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