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

   1 import './embed.scss'
   2 import * as Channel from 'jschannel'
   3 import { logger } from '../../root-helpers'
   4 import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
   5 import { PeerTubeEmbed } from './embed'
   6
   7 /**
   8  * Embed API exposes control of the embed player to the outside world via
   9  * JSChannels and window.postMessage
  10  */
  11 export class PeerTubeEmbedApi {
  12   private channel: Channel.MessagingChannel
  13   private isReady = false
  14   private resolutions: PeerTubeResolution[] = []
  15
  16   private oldVideoElement: HTMLVideoElement
  17   private videoElPlayListener: () => void
  18   private videoElPauseListener: () => void
  19   private videoElEndedListener: () => void
  20   private videoElInterval: any
  21
  22   constructor (private readonly embed: PeerTubeEmbed) {
  23
  24   }
  25
  26   initialize () {
  27     this.constructChannel()
  28     this.setupStateTracking()
  29
  30     // We're ready!
  31
  32     this.notifyReady()
  33   }
  34
  35   reInit () {
  36     this.disposeStateTracking()
  37     this.setupStateTracking()
  38   }
  39
  40   private get element () {
  41     return this.embed.getPlayerElement()
  42   }
  43
  44   private constructChannel () {
  45     const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.getScope() })
  46
  47     channel.bind('play', (txn, params) => this.embed.player.play())
  48     channel.bind('pause', (txn, params) => this.embed.player.pause())
  49     channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
  50
  51     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
  52     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
  53
  54     channel.bind('isReady', (txn, params) => this.isReady)
  55
  56     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
  57     channel.bind('getResolutions', (txn, params) => this.resolutions)
  58
  59     channel.bind('getCaptions', (txn, params) => this.getCaptions())
  60     channel.bind('setCaption', (txn, id) => this.setCaption(id))
  61
  62     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  63     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  64     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
  65
  66     channel.bind('playNextVideo', (txn, params) => this.embed.playNextPlaylistVideo())
  67     channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousPlaylistVideo())
  68     channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPlaylistPosition())
  69     this.channel = channel
  70   }
  71
  72   private setResolution (resolutionId: number) {
  73     logger.info(`Set resolution ${resolutionId}`)
  74
  75     if (this.isWebtorrent()) {
  76       if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
  77
  78       this.embed.player.webtorrent().changeQuality(resolutionId)
  79
  80       return
  81     }
  82
  83     this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
  84   }
  85
  86   private getCaptions (): PeerTubeTextTrack[] {
  87     return this.embed.player.textTracks().tracks_.map(t => ({
  88       id: t.id,
  89       src: t.src,
  90       label: t.label,
  91       mode: t.mode
  92     }))
  93   }
  94
  95   private setCaption (id: string) {
  96     const tracks = this.embed.player.textTracks().tracks_
  97
  98     for (const track of tracks) {
  99       if (track.id === id) track.mode = 'showing'
 100       else track.mode = 'disabled'
 101     }
 102   }
 103
 104   /**
 105    * Let the host know that we're ready to go!
 106    */
 107   private notifyReady () {
 108     this.isReady = true
 109     this.channel.notify({ method: 'ready', params: true })
 110   }
 111
 112   private setupStateTracking () {
 113     let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 114
 115     this.videoElInterval = setInterval(() => {
 116       const position = this.element.currentTime
 117       const volume = this.element.volume
 118
 119       this.channel.notify({
 120         method: 'playbackStatusUpdate',
 121         params: {
 122           position,
 123           volume,
 124           duration: this.embed.player.duration(),
 125           playbackState: currentState
 126         }
 127       })
 128     }, 500)
 129
 130     // ---------------------------------------------------------------------------
 131
 132     this.videoElPlayListener = () => {
 133       currentState = 'playing'
 134       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
 135     }
 136     this.element.addEventListener('play', this.videoElPlayListener)
 137
 138     this.videoElPauseListener = () => {
 139       currentState = 'paused'
 140       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
 141     }
 142     this.element.addEventListener('pause', this.videoElPauseListener)
 143
 144     this.videoElEndedListener = () => {
 145       currentState = 'ended'
 146       this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
 147     }
 148     this.element.addEventListener('ended', this.videoElEndedListener)
 149
 150     this.oldVideoElement = this.element
 151
 152     // ---------------------------------------------------------------------------
 153
 154     // PeerTube specific capabilities
 155     this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
 156     this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
 157
 158     this.loadResolutions()
 159
 160     this.embed.player.on('volumechange', () => {
 161       this.channel.notify({
 162         method: 'volumeChange',
 163         params: this.embed.player.volume()
 164       })
 165     })
 166   }
 167
 168   private disposeStateTracking () {
 169     if (!this.oldVideoElement) return
 170
 171     this.oldVideoElement.removeEventListener('play', this.videoElPlayListener)
 172     this.oldVideoElement.removeEventListener('pause', this.videoElPauseListener)
 173     this.oldVideoElement.removeEventListener('ended', this.videoElEndedListener)
 174
 175     clearInterval(this.videoElInterval)
 176
 177     this.oldVideoElement = undefined
 178   }
 179
 180   private loadResolutions () {
 181     this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
 182       .map(r => ({
 183         id: r.id,
 184         label: r.label,
 185         active: r.selected,
 186         width: r.width,
 187         height: r.height
 188       }))
 189
 190     this.channel.notify({
 191       method: 'resolutionUpdate',
 192       params: this.resolutions
 193     })
 194   }
 195
 196   private isWebtorrent () {
 197     return !!this.embed.player.webtorrent
 198   }
 199 }