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       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 })