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