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

   1 import './embed.scss'
   2
   3 import * as Channel from 'jschannel'
   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   constructor (private readonly embed: PeerTubeEmbed) {
  17
  18   }
  19
  20   initialize () {
  21     this.constructChannel()
  22     this.setupStateTracking()
  23
  24     // We're ready!
  25
  26     this.notifyReady()
  27   }
  28
  29   private get element () {
  30     return this.embed.getPlayerElement()
  31   }
  32
  33   private constructChannel () {
  34     const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.getScope() })
  35
  36     channel.bind('play', (txn, params) => this.embed.player.play())
  37     channel.bind('pause', (txn, params) => this.embed.player.pause())
  38     channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
  39
  40     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
  41     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
  42
  43     channel.bind('isReady', (txn, params) => this.isReady)
  44
  45     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
  46     channel.bind('getResolutions', (txn, params) => this.resolutions)
  47
  48     channel.bind('getCaptions', (txn, params) => this.getCaptions())
  49     channel.bind('setCaption', (txn, id) => this.setCaption(id))
  50
  51     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  52     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  53     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
  54
  55     channel.bind('playNextVideo', (txn, params) => this.embed.playNextPlaylistVideo())
  56     channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousPlaylistVideo())
  57     channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPlaylistPosition())
  58     this.channel = channel
  59   }
  60
  61   private setResolution (resolutionId: number) {
  62     console.log('set resolution %d', resolutionId)
  63
  64     if (this.isWebtorrent()) {
  65       if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
  66
  67       this.embed.player.webtorrent().changeQuality(resolutionId)
  68
  69       return
  70     }
  71
  72     this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
  73   }
  74
  75   private getCaptions (): PeerTubeTextTrack[] {
  76     return this.embed.player.textTracks().tracks_.map(t => ({
  77       id: t.id,
  78       src: t.src,
  79       label: t.label,
  80       mode: t.mode
  81     }))
  82   }
  83
  84   private setCaption (id: string) {
  85     const tracks = this.embed.player.textTracks().tracks_
  86
  87     for (const track of tracks) {
  88       if (track.id === id) track.mode = 'showing'
  89       else track.mode = 'disabled'
  90     }
  91   }
  92
  93   /**
  94    * Let the host know that we're ready to go!
  95    */
  96   private notifyReady () {
  97     this.isReady = true
  98     this.channel.notify({ method: 'ready', params: true })
  99   }
 100
 101   private setupStateTracking () {
 102     let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 103
 104     setInterval(() => {
 105       const position = this.element.currentTime
 106       const volume = this.element.volume
 107
 108       this.channel.notify({
 109         method: 'playbackStatusUpdate',
 110         params: {
 111           position,
 112           volume,
 113           duration: this.embed.player.duration(),
 114           playbackState: currentState
 115         }
 116       })
 117     }, 500)
 118
 119     this.element.addEventListener('play', ev => {
 120       currentState = 'playing'
 121       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
 122     })
 123
 124     this.element.addEventListener('pause', ev => {
 125       currentState = 'paused'
 126       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
 127     })
 128
 129     this.element.addEventListener('ended', ev => {
 130       currentState = 'ended'
 131       this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
 132     })
 133
 134     // PeerTube specific capabilities
 135     this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
 136     this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
 137
 138     this.loadResolutions()
 139
 140     this.embed.player.on('volumechange', () => {
 141       this.channel.notify({
 142         method: 'volumeChange',
 143         params: this.embed.player.volume()
 144       })
 145     })
 146   }
 147
 148   private loadResolutions () {
 149     this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
 150       .map(r => ({
 151         id: r.id,
 152         label: r.label,
 153         active: r.selected,
 154         width: r.width,
 155         height: r.height
 156       }))
 157
 158     this.channel.notify({
 159       method: 'resolutionUpdate',
 160       params: this.resolutions
 161     })
 162   }
 163
 164   private isWebtorrent () {
 165     return !!this.embed.player.webtorrent
 166   }
 167 }