client/src/standalone/videos/test-embed.ts

   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       console.log(c)
  90
  91       if (c.mode === 'showing') {
  92         const itemEl = document.createElement('strong')
  93         itemEl.innerText = `${c.label} (active)`
  94         itemEl.style.display = 'block'
  95         captionEl.appendChild(itemEl)
  96       } else {
  97         const itemEl = document.createElement('a')
  98         itemEl.href = 'javascript:;'
  99         itemEl.innerText = c.label
 100         itemEl.addEventListener('click', () => {
 101           player.setCaption(c.id)
 102           updateCaptions()
 103         })
 104         itemEl.style.display = 'block'
 105         captionEl.appendChild(itemEl)
 106       }
 107     })
 108   }
 109
 110   updateCaptions()
 111
 112   const updateResolutions = (resolutions: PeerTubeResolution[]) => {
 113     const resolutionListEl = document.querySelector('#resolution-list')
 114     resolutionListEl.innerHTML = ''
 115
 116     resolutions.forEach(resolution => {
 117       if (resolution.active) {
 118         const itemEl = document.createElement('strong')
 119         itemEl.innerText = `${resolution.label} (active)`
 120         itemEl.style.display = 'block'
 121         resolutionListEl.appendChild(itemEl)
 122       } else {
 123         const itemEl = document.createElement('a')
 124         itemEl.href = 'javascript:;'
 125         itemEl.innerText = resolution.label
 126         itemEl.addEventListener('click', () => {
 127           player.setResolution(resolution.id)
 128         })
 129         itemEl.style.display = 'block'
 130         resolutionListEl.appendChild(itemEl)
 131       }
 132     })
 133   }
 134
 135   player.getResolutions().then(
 136     resolutions => updateResolutions(resolutions))
 137   player.addEventListener('resolutionUpdate',
 138     resolutions => updateResolutions(resolutions))
 139
 140   const updateVolume = (volume: number) => {
 141     const volumeEl = document.getElementById('volume')
 142     volumeEl.innerText = (volume * 100) + '%'
 143   }
 144
 145   player.getVolume().then(volume => updateVolume(volume))
 146   player.addEventListener('volumeChange', volume => updateVolume(volume))
 147 })