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

   1 import './test-embed.scss'
   2 import { PeerTubePlayer } from '../player/player'
   3 import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } 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}?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, (param) => console.log(`PLAYER: event '${e}' received`, param))
  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 updateCaptions = async () => {
  71     const captions = await player.getCaptions()
  72
  73     const captionEl = document.querySelector('#caption-list')
  74     captionEl.innerHTML = ''
  75
  76     captions.forEach(c => {
  77       console.log(c)
  78
  79       if (c.mode === 'showing') {
  80         const itemEl = document.createElement('strong')
  81         itemEl.innerText = `${c.label} (active)`
  82         itemEl.style.display = 'block'
  83         captionEl.appendChild(itemEl)
  84       } else {
  85         const itemEl = document.createElement('a')
  86         itemEl.href = 'javascript:;'
  87         itemEl.innerText = c.label
  88         itemEl.addEventListener('click', () => {
  89           player.setCaption(c.id)
  90           updateCaptions()
  91         })
  92         itemEl.style.display = 'block'
  93         captionEl.appendChild(itemEl)
  94       }
  95     })
  96   }
  97
  98   updateCaptions()
  99
 100   const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
 101     const resolutionListEl = document.querySelector('#resolution-list')
 102     resolutionListEl.innerHTML = ''
 103
 104     resolutions.forEach(resolution => {
 105       if (resolution.active) {
 106         const itemEl = document.createElement('strong')
 107         itemEl.innerText = `${resolution.label} (active)`
 108         itemEl.style.display = 'block'
 109         resolutionListEl.appendChild(itemEl)
 110       } else {
 111         const itemEl = document.createElement('a')
 112         itemEl.href = 'javascript:;'
 113         itemEl.innerText = resolution.label
 114         itemEl.addEventListener('click', () => {
 115           player.setResolution(resolution.id)
 116         })
 117         itemEl.style.display = 'block'
 118         resolutionListEl.appendChild(itemEl)
 119       }
 120     })
 121   })
 122
 123   player.getResolutions().then(
 124     resolutions => updateResolutions(resolutions))
 125   player.addEventListener('resolutionUpdate',
 126     resolutions => updateResolutions(resolutions))
 127
 128   const updateVolume = (volume: number) => {
 129     const volumeEl = document.getElementById('volume')
 130     volumeEl.innerText = (volume * 100) + '%'
 131   }
 132
 133   player.getVolume().then(volume => updateVolume(volume))
 134   player.addEventListener('volumeChange', volume => updateVolume(volume))
 135 })