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

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