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

   1 import './embed.scss'
   2
   3 import * as Channel from 'jschannel'
   4 import { PeerTubeResolution } 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[] = null
  15
  16   constructor (private embed: PeerTubeEmbed) {
  17   }
  18
  19   initialize () {
  20     this.constructChannel()
  21     this.setupStateTracking()
  22
  23     // We're ready!
  24
  25     this.notifyReady()
  26   }
  27
  28   private get element () {
  29     return this.embed.videoElement
  30   }
  31
  32   private constructChannel () {
  33     const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
  34
  35     channel.bind('play', (txn, params) => this.embed.player.play())
  36     channel.bind('pause', (txn, params) => this.embed.player.pause())
  37     channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
  38     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
  39     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
  40     channel.bind('isReady', (txn, params) => this.isReady)
  41     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
  42     channel.bind('getResolutions', (txn, params) => this.resolutions)
  43     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  44     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  45     channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
  46     this.channel = channel
  47   }
  48
  49   private setResolution (resolutionId: number) {
  50     if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
  51
  52     // Auto resolution
  53     if (resolutionId === -1) {
  54       this.embed.player.webtorrent().enableAutoResolution()
  55       return
  56     }
  57
  58     this.embed.player.webtorrent().disableAutoResolution()
  59     this.embed.player.webtorrent().updateResolution(resolutionId)
  60   }
  61
  62   /**
  63    * Let the host know that we're ready to go!
  64    */
  65   private notifyReady () {
  66     this.isReady = true
  67     this.channel.notify({ method: 'ready', params: true })
  68   }
  69
  70   private setupStateTracking () {
  71     let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
  72
  73     setInterval(() => {
  74       const position = this.element.currentTime
  75       const volume = this.element.volume
  76
  77       this.channel.notify({
  78         method: 'playbackStatusUpdate',
  79         params: {
  80           position,
  81           volume,
  82           playbackState: currentState
  83         }
  84       })
  85     }, 500)
  86
  87     this.element.addEventListener('play', ev => {
  88       currentState = 'playing'
  89       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
  90     })
  91
  92     this.element.addEventListener('pause', ev => {
  93       currentState = 'paused'
  94       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
  95     })
  96
  97     // PeerTube specific capabilities
  98
  99     if (this.embed.player.webtorrent) {
 100       this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
 101       this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
 102     }
 103   }
 104
 105   private loadWebTorrentResolutions () {
 106     const resolutions = []
 107     const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 108
 109     for (const videoFile of this.embed.player.webtorrent().videoFiles) {
 110       let label = videoFile.resolution.label
 111       if (videoFile.fps && videoFile.fps >= 50) {
 112         label += videoFile.fps
 113       }
 114
 115       resolutions.push({
 116         id: videoFile.resolution.id,
 117         label,
 118         src: videoFile.magnetUri,
 119         active: videoFile.resolution.id === currentResolutionId
 120       })
 121     }
 122
 123     this.resolutions = resolutions
 124     this.channel.notify({
 125       method: 'resolutionUpdate',
 126       params: this.resolutions
 127     })
 128   }
 129 }