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   const mainElement = document.querySelector('#host')
  19   mainElement.appendChild(iframe)
  20
  21   console.log('Document finished loading.')
  22   const player = new PeerTubePlayer(document.querySelector('iframe'))
  23
  24   window['player'] = player
  25
  26   console.log('Awaiting player ready...')
  27   await player.ready
  28   console.log('Player is ready.')
  29
  30   const monitoredEvents = [
  31     'pause',
  32     'play',
  33     'playbackStatusUpdate',
  34     'playbackStatusChange'
  35   ]
  36
  37   monitoredEvents.forEach(e => {
  38     player.addEventListener(e as PlayerEventType, (param) => console.log(`PLAYER: event '${e}' received`, param))
  39     console.log(`PLAYER: now listening for event '${e}'`)
  40
  41     player.getCurrentPosition()
  42       .then(position => {
  43         document.getElementById('playlist-position').innerHTML = position + ''
  44       })
  45   })
  46
  47   let playbackRates: number[] = []
  48   let currentRate = await player.getPlaybackRate()
  49
  50   const updateRates = () => {
  51     const rateListEl = document.querySelector('#rate-list')
  52     rateListEl.innerHTML = ''
  53
  54     playbackRates.forEach(rate => {
  55       if (currentRate === rate) {
  56         const itemEl = document.createElement('strong')
  57         itemEl.innerText = `${rate} (active)`
  58         itemEl.style.display = 'block'
  59         rateListEl.appendChild(itemEl)
  60       } else {
  61         const itemEl = document.createElement('a')
  62         itemEl.href = 'javascript:;'
  63         itemEl.innerText = rate.toString()
  64         itemEl.addEventListener('click', () => {
  65           player.setPlaybackRate(rate)
  66           currentRate = rate
  67           updateRates()
  68         })
  69         itemEl.style.display = 'block'
  70         rateListEl.appendChild(itemEl)
  71       }
  72     })
  73   }
  74
  75   player.getPlaybackRates().then(rates => {
  76     playbackRates = rates
  77     updateRates()
  78   })
  79
  80   const updateCaptions = async () => {
  81     const captions = await player.getCaptions()
  82
  83     const captionEl = document.querySelector('#caption-list')
  84     captionEl.innerHTML = ''
  85
  86     captions.forEach(c => {
  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
 108   const updateResolutions = (resolutions: PeerTubeResolution[]) => {
 109     const resolutionListEl = document.querySelector('#resolution-list')
 110     resolutionListEl.innerHTML = ''
 111
 112     resolutions.forEach(resolution => {
 113       if (resolution.active) {
 114         const itemEl = document.createElement('strong')
 115         itemEl.innerText = `${resolution.label} (active)`
 116         itemEl.style.display = 'block'
 117         resolutionListEl.appendChild(itemEl)
 118       } else {
 119         const itemEl = document.createElement('a')
 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     })
 129   }
 130
 131   player.getResolutions().then(
 132     resolutions => updateResolutions(resolutions))
 133   player.addEventListener('resolutionUpdate',
 134     resolutions => updateResolutions(resolutions))
 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))
 143 })