aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/test-embed.ts
diff options
context:
space:
mode:
authorWilliam Lahti <wilahti@gmail.com>2018-07-10 08:47:56 -0700
committerChocobozzz <me@florianbigard.com>2018-07-10 17:47:56 +0200
commit999417328bde0e60cd59318fc1c18672356254ce (patch)
tree22673fcbd4dc333e3362912b2c813e97a41c765f /client/src/standalone/videos/test-embed.ts
parent0b755f3b27190ea4d9c301ede0955b2736605f4c (diff)
downloadPeerTube-999417328bde0e60cd59318fc1c18672356254ce.tar.gz
PeerTube-999417328bde0e60cd59318fc1c18672356254ce.tar.zst
PeerTube-999417328bde0e60cd59318fc1c18672356254ce.zip
Ability to programmatically control embeds (#776)
* first stab at jschannel based player api * semicolon purge * more method-level docs; consolidate definitions * missing definitions * better match peertube's class conventions * styling for embed tester * basic docs * add `getVolume` * document the test-embed feature
Diffstat (limited to 'client/src/standalone/videos/test-embed.ts')
-rw-r--r--client/src/standalone/videos/test-embed.ts98
1 files changed, 98 insertions, 0 deletions
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
new file mode 100644
index 000000000..721514488
--- /dev/null
+++ b/client/src/standalone/videos/test-embed.ts
@@ -0,0 +1,98 @@
1import './test-embed.scss'
2import { PeerTubePlayer } from '../player/player';
3import { PlayerEventType } from '../player/definitions';
4
5window.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}) \ No newline at end of file