diff options
author | William Lahti <wilahti@gmail.com> | 2018-07-10 08:47:56 -0700 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-07-10 17:47:56 +0200 |
commit | 999417328bde0e60cd59318fc1c18672356254ce (patch) | |
tree | 22673fcbd4dc333e3362912b2c813e97a41c765f /client/src/standalone/videos/test-embed.ts | |
parent | 0b755f3b27190ea4d9c301ede0955b2736605f4c (diff) | |
download | PeerTube-999417328bde0e60cd59318fc1c18672356254ce.tar.gz PeerTube-999417328bde0e60cd59318fc1c18672356254ce.tar.zst PeerTube-999417328bde0e60cd59318fc1c18672356254ce.zip |
Ability to programmatically control embeds (#776)
* first stab at jschannel based player api
* semicolon purge
* more method-level docs; consolidate definitions
* missing definitions
* better match peertube's class conventions
* styling for embed tester
* basic docs
* add `getVolume`
* document the test-embed feature
Diffstat (limited to 'client/src/standalone/videos/test-embed.ts')
-rw-r--r-- | client/src/standalone/videos/test-embed.ts | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts new file mode 100644 index 000000000..721514488 --- /dev/null +++ b/client/src/standalone/videos/test-embed.ts | |||
@@ -0,0 +1,98 @@ | |||
1 | import './test-embed.scss' | ||
2 | import { PeerTubePlayer } from '../player/player'; | ||
3 | import { PlayerEventType } from '../player/definitions'; | ||
4 | |||
5 | window.addEventListener('load', async () => { | ||
6 | |||
7 | const urlParts = window.location.href.split('/') | ||
8 | const lastPart = urlParts[urlParts.length - 1] | ||
9 | const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[0] | ||
10 | |||
11 | let iframe = document.createElement('iframe') | ||
12 | iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1` | ||
13 | let mainElement = document.querySelector('#host') | ||
14 | mainElement.appendChild(iframe); | ||
15 | |||
16 | console.log(`Document finished loading.`) | ||
17 | let player = new PeerTubePlayer(document.querySelector('iframe')) | ||
18 | |||
19 | window['player'] = player | ||
20 | |||
21 | console.log(`Awaiting player ready...`) | ||
22 | await player.ready | ||
23 | console.log(`Player is ready.`) | ||
24 | |||
25 | let monitoredEvents = [ | ||
26 | 'pause', 'play', | ||
27 | 'playbackStatusUpdate', | ||
28 | 'playbackStatusChange' | ||
29 | ] | ||
30 | |||
31 | monitoredEvents.forEach(e => { | ||
32 | player.addEventListener(<PlayerEventType>e, () => console.log(`PLAYER: event '${e}' received`)) | ||
33 | console.log(`PLAYER: now listening for event '${e}'`) | ||
34 | }) | ||
35 | |||
36 | let playbackRates = [] | ||
37 | let activeRate = 1 | ||
38 | let currentRate = await player.getPlaybackRate() | ||
39 | |||
40 | let updateRates = async () => { | ||
41 | |||
42 | let rateListEl = document.querySelector('#rate-list') | ||
43 | rateListEl.innerHTML = '' | ||
44 | |||
45 | playbackRates.forEach(rate => { | ||
46 | if (currentRate == rate) { | ||
47 | let itemEl = document.createElement('strong') | ||
48 | itemEl.innerText = `${rate} (active)` | ||
49 | itemEl.style.display = 'block' | ||
50 | rateListEl.appendChild(itemEl) | ||
51 | } else { | ||
52 | let itemEl = document.createElement('a') | ||
53 | itemEl.href = 'javascript:;' | ||
54 | itemEl.innerText = rate | ||
55 | itemEl.addEventListener('click', () => { | ||
56 | player.setPlaybackRate(rate) | ||
57 | currentRate = rate | ||
58 | updateRates() | ||
59 | }) | ||
60 | itemEl.style.display = 'block' | ||
61 | rateListEl.appendChild(itemEl) | ||
62 | } | ||
63 | }) | ||
64 | } | ||
65 | |||
66 | player.getPlaybackRates().then(rates => { | ||
67 | playbackRates = rates | ||
68 | updateRates() | ||
69 | }) | ||
70 | |||
71 | let updateResolutions = resolutions => { | ||
72 | let resolutionListEl = document.querySelector('#resolution-list') | ||
73 | resolutionListEl.innerHTML = '' | ||
74 | |||
75 | resolutions.forEach(resolution => { | ||
76 | if (resolution.active) { | ||
77 | let itemEl = document.createElement('strong') | ||
78 | itemEl.innerText = `${resolution.label} (active)` | ||
79 | itemEl.style.display = 'block' | ||
80 | resolutionListEl.appendChild(itemEl) | ||
81 | } else { | ||
82 | let itemEl = document.createElement('a') | ||
83 | itemEl.href = 'javascript:;' | ||
84 | itemEl.innerText = resolution.label | ||
85 | itemEl.addEventListener('click', () => { | ||
86 | player.setResolution(resolution.id) | ||
87 | }) | ||
88 | itemEl.style.display = 'block' | ||
89 | resolutionListEl.appendChild(itemEl) | ||
90 | } | ||
91 | }) | ||
92 | } | ||
93 | |||
94 | player.getResolutions().then( | ||
95 | resolutions => updateResolutions(resolutions)) | ||
96 | player.addEventListener('resolutionUpdate', | ||
97 | resolutions => updateResolutions(resolutions)) | ||
98 | }) \ No newline at end of file | ||