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

   1 import './test-embed.scss'
   2 import { PeerTubePlayer } from '../player/player'
   3 import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
   4
   5 window.addEventListener('load', async () => {
   6   const urlParts = window.location.href.split('/')
   7   const lastPart = urlParts[ urlParts.length - 1 ]
   8   const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
   9
  10   const iframe = document.createElement('iframe')
  11   iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
  12
  13   const mainElement = document.querySelector('#host')
  14   mainElement.appendChild(iframe)
  15
  16   console.log(`Document finished loading.`)
  17   const player = new PeerTubePlayer(document.querySelector('iframe'))
  18
  19   window[ 'player' ] = player
  20
  21   console.log(`Awaiting player ready...`)
  22   await player.ready
  23   console.log(`Player is ready.`)
  24
  25   const monitoredEvents = [
  26     'pause',
  27     'play',
  28     'playbackStatusUpdate',
  29     'playbackStatusChange'
  30   ]
  31
  32   monitoredEvents.forEach(e => {
  33     player.addEventListener(e as PlayerEventType, () => console.log(`PLAYER: event '${e}' received`))
  34     console.log(`PLAYER: now listening for event '${e}'`)
  35   })
  36
  37   let playbackRates: number[] = []
  38   let currentRate = await player.getPlaybackRate()
  39
  40   const updateRates = async () => {
  41     const rateListEl = document.querySelector('#rate-list')
  42     rateListEl.innerHTML = ''
  43
  44     playbackRates.forEach(rate => {
  45       if (currentRate === rate) {
  46         const itemEl = document.createElement('strong')
  47         itemEl.innerText = `${rate} (active)`
  48         itemEl.style.display = 'block'
  49         rateListEl.appendChild(itemEl)
  50       } else {
  51         const itemEl = document.createElement('a')
  52         itemEl.href = 'javascript:;'
  53         itemEl.innerText = rate.toString()
  54         itemEl.addEventListener('click', () => {
  55           player.setPlaybackRate(rate)
  56           currentRate = rate
  57           updateRates()
  58         })
  59         itemEl.style.display = 'block'
  60         rateListEl.appendChild(itemEl)
  61       }
  62     })
  63   }
  64
  65   player.getPlaybackRates().then(rates => {
  66     playbackRates = rates
  67     updateRates()
  68   })
  69
  70   const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
  71     const resolutionListEl = document.querySelector('#resolution-list')
  72     resolutionListEl.innerHTML = ''
  73
  74     resolutions.forEach(resolution => {
  75       if (resolution.active) {
  76         const itemEl = document.createElement('strong')
  77         itemEl.innerText = `${resolution.label} (active)`
  78         itemEl.style.display = 'block'
  79         resolutionListEl.appendChild(itemEl)
  80       } else {
  81         const itemEl = document.createElement('a')
  82         itemEl.href = 'javascript:;'
  83         itemEl.innerText = resolution.label
  84         itemEl.addEventListener('click', () => {
  85           player.setResolution(resolution.id)
  86         })
  87         itemEl.style.display = 'block'
  88         resolutionListEl.appendChild(itemEl)
  89       }
  90     })
  91   })
  92
  93   player.getResolutions().then(
  94     resolutions => updateResolutions(resolutions))
  95   player.addEventListener('resolutionUpdate',
  96     resolutions => updateResolutions(resolutions))
  97
  98   const updateVolume = (volume: number) => {
  99     const volumeEl = document.getElementById('volume')
 100     volumeEl.innerText = (volume * 100) + '%'
 101   }
 102
 103   player.getVolume().then(volume => updateVolume(volume))
 104   player.addEventListener('volumeChange', volume => updateVolume(volume))
 105 })