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.indexOf('?') === -1 ? 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 => document.getElementById('playlist-position').innerHTML = position + '')
  43   })
  44
  45   let playbackRates: number[] = []
  46   let currentRate = await player.getPlaybackRate()
  47
  48   const updateRates = async () => {
  49     const rateListEl = document.querySelector('#rate-list')
  50     rateListEl.innerHTML = ''
  51
  52     playbackRates.forEach(rate => {
  53       if (currentRate === rate) {
  54         const itemEl = document.createElement('strong')
  55         itemEl.innerText = `${rate} (active)`
  56         itemEl.style.display = 'block'
  57         rateListEl.appendChild(itemEl)
  58       } else {
  59         const itemEl = document.createElement('a')
  60         itemEl.href = 'javascript:;'
  61         itemEl.innerText = rate.toString()
  62         itemEl.addEventListener('click', () => {
  63           player.setPlaybackRate(rate)
  64           currentRate = rate
  65           updateRates()
  66         })
  67         itemEl.style.display = 'block'
  68         rateListEl.appendChild(itemEl)
  69       }
  70     })
  71   }
  72
  73   player.getPlaybackRates().then(rates => {
  74     playbackRates = rates
  75     updateRates()
  76   })
  77
  78   const updateCaptions = async () => {
  79     const captions = await player.getCaptions()
  80
  81     const captionEl = document.querySelector('#caption-list')
  82     captionEl.innerHTML = ''
  83
  84     captions.forEach(c => {
  85       console.log(c)
  86
  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 })