]>
Commit | Line | Data |
---|---|---|
99941732 | 1 | import './test-embed.scss' |
902aa3a0 C |
2 | import { PeerTubePlayer } from '../player/player' |
3 | import { PlayerEventType } from '../player/definitions' | |
99941732 WL |
4 | |
5 | window.addEventListener('load', async () => { | |
99941732 | 6 | const urlParts = window.location.href.split('/') |
902aa3a0 C |
7 | const lastPart = urlParts[ urlParts.length - 1 ] |
8 | const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ] | |
99941732 WL |
9 | |
10 | let iframe = document.createElement('iframe') | |
11 | iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1` | |
12 | let mainElement = document.querySelector('#host') | |
902aa3a0 | 13 | mainElement.appendChild(iframe) |
99941732 WL |
14 | |
15 | console.log(`Document finished loading.`) | |
16 | let player = new PeerTubePlayer(document.querySelector('iframe')) | |
17 | ||
902aa3a0 | 18 | window[ 'player' ] = player |
99941732 WL |
19 | |
20 | console.log(`Awaiting player ready...`) | |
21 | await player.ready | |
22 | console.log(`Player is ready.`) | |
23 | ||
24 | let monitoredEvents = [ | |
902aa3a0 C |
25 | 'pause', |
26 | 'play', | |
27 | 'playbackStatusUpdate', | |
99941732 WL |
28 | 'playbackStatusChange' |
29 | ] | |
30 | ||
31 | monitoredEvents.forEach(e => { | |
902aa3a0 | 32 | player.addEventListener(e as PlayerEventType, () => console.log(`PLAYER: event '${e}' received`)) |
99941732 WL |
33 | console.log(`PLAYER: now listening for event '${e}'`) |
34 | }) | |
35 | ||
902aa3a0 | 36 | let playbackRates: number[] = [] |
99941732 WL |
37 | let currentRate = await player.getPlaybackRate() |
38 | ||
39 | let updateRates = async () => { | |
99941732 WL |
40 | let rateListEl = document.querySelector('#rate-list') |
41 | rateListEl.innerHTML = '' | |
902aa3a0 | 42 | |
99941732 | 43 | playbackRates.forEach(rate => { |
902aa3a0 | 44 | if (currentRate === rate) { |
99941732 WL |
45 | let itemEl = document.createElement('strong') |
46 | itemEl.innerText = `${rate} (active)` | |
47 | itemEl.style.display = 'block' | |
48 | rateListEl.appendChild(itemEl) | |
49 | } else { | |
50 | let itemEl = document.createElement('a') | |
51 | itemEl.href = 'javascript:;' | |
a7c9cbb5 | 52 | itemEl.innerText = rate.toString() |
99941732 WL |
53 | itemEl.addEventListener('click', () => { |
54 | player.setPlaybackRate(rate) | |
55 | currentRate = rate | |
56 | updateRates() | |
57 | }) | |
58 | itemEl.style.display = 'block' | |
59 | rateListEl.appendChild(itemEl) | |
60 | } | |
61 | }) | |
62 | } | |
63 | ||
64 | player.getPlaybackRates().then(rates => { | |
65 | playbackRates = rates | |
66 | updateRates() | |
67 | }) | |
68 | ||
69 | let updateResolutions = resolutions => { | |
70 | let resolutionListEl = document.querySelector('#resolution-list') | |
71 | resolutionListEl.innerHTML = '' | |
72 | ||
73 | resolutions.forEach(resolution => { | |
74 | if (resolution.active) { | |
75 | let itemEl = document.createElement('strong') | |
76 | itemEl.innerText = `${resolution.label} (active)` | |
77 | itemEl.style.display = 'block' | |
78 | resolutionListEl.appendChild(itemEl) | |
79 | } else { | |
80 | let itemEl = document.createElement('a') | |
81 | itemEl.href = 'javascript:;' | |
82 | itemEl.innerText = resolution.label | |
83 | itemEl.addEventListener('click', () => { | |
84 | player.setResolution(resolution.id) | |
85 | }) | |
86 | itemEl.style.display = 'block' | |
87 | resolutionListEl.appendChild(itemEl) | |
88 | } | |
89 | }) | |
90 | } | |
91 | ||
92 | player.getResolutions().then( | |
93 | resolutions => updateResolutions(resolutions)) | |
902aa3a0 | 94 | player.addEventListener('resolutionUpdate', |
99941732 | 95 | resolutions => updateResolutions(resolutions)) |
902aa3a0 | 96 | }) |