]>
Commit | Line | Data |
---|---|---|
99941732 | 1 | import './test-embed.scss' |
9054a8b6 | 2 | import { PeerTubeResolution, PlayerEventType } from '../player/definitions' |
902aa3a0 | 3 | import { PeerTubePlayer } from '../player/player' |
42b40636 | 4 | import { logger } from '../../root-helpers' |
99941732 WL |
5 | |
6 | window.addEventListener('load', async () => { | |
99941732 | 7 | const urlParts = window.location.href.split('/') |
9df52d66 | 8 | const lastPart = urlParts[urlParts.length - 1] |
9054a8b6 C |
9 | |
10 | const isPlaylist = window.location.pathname.startsWith('/video-playlists/') | |
11 | ||
e5a818d3 | 12 | const elementId = !lastPart.includes('?') ? lastPart : lastPart.split('?')[0] |
99941732 | 13 | |
c4710631 | 14 | const iframe = document.createElement('iframe') |
9054a8b6 | 15 | iframe.src = isPlaylist |
7a13d032 C |
16 | ? `/video-playlists/embed/${elementId}?api=1` |
17 | : `/videos/embed/${elementId}?api=1` | |
6377a9f2 | 18 | |
db9df9a7 C |
19 | iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups') |
20 | ||
c4710631 | 21 | const mainElement = document.querySelector('#host') |
902aa3a0 | 22 | mainElement.appendChild(iframe) |
99941732 | 23 | |
42b40636 | 24 | logger.info('Document finished loading.') |
c4710631 | 25 | const player = new PeerTubePlayer(document.querySelector('iframe')) |
99941732 | 26 | |
9df52d66 | 27 | window['player'] = player |
99941732 | 28 | |
42b40636 | 29 | logger.info('Awaiting player ready...') |
99941732 | 30 | await player.ready |
42b40636 | 31 | logger.info('Player is ready.') |
99941732 | 32 | |
c4710631 | 33 | const monitoredEvents = [ |
902aa3a0 C |
34 | 'pause', |
35 | 'play', | |
36 | 'playbackStatusUpdate', | |
99941732 WL |
37 | 'playbackStatusChange' |
38 | ] | |
39 | ||
40 | monitoredEvents.forEach(e => { | |
42b40636 C |
41 | player.addEventListener(e as PlayerEventType, (param) => logger.info(`PLAYER: event '${e}' received`, { param })) |
42 | logger.info(`PLAYER: now listening for event '${e}'`) | |
9054a8b6 C |
43 | |
44 | player.getCurrentPosition() | |
9df52d66 C |
45 | .then(position => { |
46 | document.getElementById('playlist-position').innerHTML = position + '' | |
47 | }) | |
99941732 WL |
48 | }) |
49 | ||
902aa3a0 | 50 | let playbackRates: number[] = [] |
99941732 WL |
51 | let currentRate = await player.getPlaybackRate() |
52 | ||
98ab5dc8 | 53 | const updateRates = () => { |
c4710631 | 54 | const rateListEl = document.querySelector('#rate-list') |
99941732 | 55 | rateListEl.innerHTML = '' |
902aa3a0 | 56 | |
99941732 | 57 | playbackRates.forEach(rate => { |
902aa3a0 | 58 | if (currentRate === rate) { |
c4710631 | 59 | const itemEl = document.createElement('strong') |
99941732 WL |
60 | itemEl.innerText = `${rate} (active)` |
61 | itemEl.style.display = 'block' | |
62 | rateListEl.appendChild(itemEl) | |
63 | } else { | |
c4710631 | 64 | const itemEl = document.createElement('a') |
99941732 | 65 | itemEl.href = 'javascript:;' |
a7c9cbb5 | 66 | itemEl.innerText = rate.toString() |
99941732 WL |
67 | itemEl.addEventListener('click', () => { |
68 | player.setPlaybackRate(rate) | |
69 | currentRate = rate | |
70 | updateRates() | |
71 | }) | |
72 | itemEl.style.display = 'block' | |
73 | rateListEl.appendChild(itemEl) | |
74 | } | |
75 | }) | |
76 | } | |
77 | ||
78 | player.getPlaybackRates().then(rates => { | |
79 | playbackRates = rates | |
80 | updateRates() | |
81 | }) | |
82 | ||
1151f521 C |
83 | const updateCaptions = async () => { |
84 | const captions = await player.getCaptions() | |
85 | ||
86 | const captionEl = document.querySelector('#caption-list') | |
87 | captionEl.innerHTML = '' | |
88 | ||
89 | captions.forEach(c => { | |
1151f521 C |
90 | if (c.mode === 'showing') { |
91 | const itemEl = document.createElement('strong') | |
92 | itemEl.innerText = `${c.label} (active)` | |
93 | itemEl.style.display = 'block' | |
94 | captionEl.appendChild(itemEl) | |
95 | } else { | |
96 | const itemEl = document.createElement('a') | |
97 | itemEl.href = 'javascript:;' | |
98 | itemEl.innerText = c.label | |
99 | itemEl.addEventListener('click', () => { | |
100 | player.setCaption(c.id) | |
101 | updateCaptions() | |
102 | }) | |
103 | itemEl.style.display = 'block' | |
104 | captionEl.appendChild(itemEl) | |
105 | } | |
106 | }) | |
107 | } | |
108 | ||
109 | updateCaptions() | |
110 | ||
9df52d66 | 111 | const updateResolutions = (resolutions: PeerTubeResolution[]) => { |
c4710631 | 112 | const resolutionListEl = document.querySelector('#resolution-list') |
99941732 WL |
113 | resolutionListEl.innerHTML = '' |
114 | ||
c199c427 | 115 | resolutions.forEach(resolution => { |
99941732 | 116 | if (resolution.active) { |
c4710631 | 117 | const itemEl = document.createElement('strong') |
99941732 WL |
118 | itemEl.innerText = `${resolution.label} (active)` |
119 | itemEl.style.display = 'block' | |
120 | resolutionListEl.appendChild(itemEl) | |
121 | } else { | |
c4710631 | 122 | const itemEl = document.createElement('a') |
99941732 WL |
123 | itemEl.href = 'javascript:;' |
124 | itemEl.innerText = resolution.label | |
125 | itemEl.addEventListener('click', () => { | |
126 | player.setResolution(resolution.id) | |
127 | }) | |
128 | itemEl.style.display = 'block' | |
129 | resolutionListEl.appendChild(itemEl) | |
130 | } | |
131 | }) | |
9df52d66 | 132 | } |
99941732 WL |
133 | |
134 | player.getResolutions().then( | |
135 | resolutions => updateResolutions(resolutions)) | |
902aa3a0 | 136 | player.addEventListener('resolutionUpdate', |
99941732 | 137 | resolutions => updateResolutions(resolutions)) |
6377a9f2 C |
138 | |
139 | const updateVolume = (volume: number) => { | |
140 | const volumeEl = document.getElementById('volume') | |
141 | volumeEl.innerText = (volume * 100) + '%' | |
142 | } | |
143 | ||
144 | player.getVolume().then(volume => updateVolume(volume)) | |
145 | player.addEventListener('volumeChange', volume => updateVolume(volume)) | |
902aa3a0 | 146 | }) |