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