]>
Commit | Line | Data |
---|---|---|
99941732 WL |
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 | }) |