diff options
Diffstat (limited to 'client/src/standalone/videos/test-embed.ts')
-rw-r--r-- | client/src/standalone/videos/test-embed.ts | 36 |
1 files changed, 33 insertions, 3 deletions
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts index e5e6365dc..24cb62230 100644 --- a/client/src/standalone/videos/test-embed.ts +++ b/client/src/standalone/videos/test-embed.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import './test-embed.scss' | 1 | import './test-embed.scss' |
2 | import { PeerTubePlayer } from '../player/player' | 2 | import { PeerTubePlayer } from '../player/player' |
3 | import { PeerTubeResolution, PlayerEventType } from '../player/definitions' | 3 | import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } from '../player/definitions' |
4 | 4 | ||
5 | window.addEventListener('load', async () => { | 5 | window.addEventListener('load', async () => { |
6 | const urlParts = window.location.href.split('/') | 6 | const urlParts = window.location.href.split('/') |
@@ -8,7 +8,7 @@ window.addEventListener('load', async () => { | |||
8 | const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ] | 8 | const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ] |
9 | 9 | ||
10 | const iframe = document.createElement('iframe') | 10 | const iframe = document.createElement('iframe') |
11 | iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1` | 11 | iframe.src = `/videos/embed/${videoId}?api=1` |
12 | 12 | ||
13 | const mainElement = document.querySelector('#host') | 13 | const mainElement = document.querySelector('#host') |
14 | mainElement.appendChild(iframe) | 14 | mainElement.appendChild(iframe) |
@@ -30,7 +30,7 @@ window.addEventListener('load', async () => { | |||
30 | ] | 30 | ] |
31 | 31 | ||
32 | monitoredEvents.forEach(e => { | 32 | monitoredEvents.forEach(e => { |
33 | player.addEventListener(e as PlayerEventType, () => console.log(`PLAYER: event '${e}' received`)) | 33 | player.addEventListener(e as PlayerEventType, (param) => console.log(`PLAYER: event '${e}' received`, param)) |
34 | console.log(`PLAYER: now listening for event '${e}'`) | 34 | console.log(`PLAYER: now listening for event '${e}'`) |
35 | }) | 35 | }) |
36 | 36 | ||
@@ -67,6 +67,36 @@ window.addEventListener('load', async () => { | |||
67 | updateRates() | 67 | updateRates() |
68 | }) | 68 | }) |
69 | 69 | ||
70 | const updateCaptions = async () => { | ||
71 | const captions = await player.getCaptions() | ||
72 | |||
73 | const captionEl = document.querySelector('#caption-list') | ||
74 | captionEl.innerHTML = '' | ||
75 | |||
76 | captions.forEach(c => { | ||
77 | console.log(c) | ||
78 | |||
79 | if (c.mode === 'showing') { | ||
80 | const itemEl = document.createElement('strong') | ||
81 | itemEl.innerText = `${c.label} (active)` | ||
82 | itemEl.style.display = 'block' | ||
83 | captionEl.appendChild(itemEl) | ||
84 | } else { | ||
85 | const itemEl = document.createElement('a') | ||
86 | itemEl.href = 'javascript:;' | ||
87 | itemEl.innerText = c.label | ||
88 | itemEl.addEventListener('click', () => { | ||
89 | player.setCaption(c.id) | ||
90 | updateCaptions() | ||
91 | }) | ||
92 | itemEl.style.display = 'block' | ||
93 | captionEl.appendChild(itemEl) | ||
94 | } | ||
95 | }) | ||
96 | } | ||
97 | |||
98 | updateCaptions() | ||
99 | |||
70 | const updateResolutions = ((resolutions: PeerTubeResolution[]) => { | 100 | const updateResolutions = ((resolutions: PeerTubeResolution[]) => { |
71 | const resolutionListEl = document.querySelector('#resolution-list') | 101 | const resolutionListEl = document.querySelector('#resolution-list') |
72 | resolutionListEl.innerHTML = '' | 102 | resolutionListEl.innerHTML = '' |