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 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.playerElement
  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
  39     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
  40     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
  41
  42     channel.bind('isReady', (txn, params) => this.isReady)
  43
  44     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
  45     channel.bind('getResolutions', (txn, params) => this.resolutions)
  46
  47     channel.bind('getCaptions', (txn, params) => this.getCaptions())
  48     channel.bind('setCaption', (txn, id) => this.setCaption(id)),
  49
  50     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  51     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  52     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
  53
  54     channel.bind('playNextVideo', (txn, params) => this.embed.playNextVideo())
  55     channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousVideo())
  56     channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPosition())
  57     this.channel = channel
  58   }
  59
  60   private setResolution (resolutionId: number) {
  61     console.log('set resolution %d', resolutionId)
  62
  63     if (this.isWebtorrent()) {
  64       if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
  65
  66       // Auto resolution
  67       if (resolutionId === -1) {
  68         this.embed.player.webtorrent().enableAutoResolution()
  69         return
  70       }
  71
  72       this.embed.player.webtorrent().disableAutoResolution()
  73       this.embed.player.webtorrent().updateResolution(resolutionId)
  74
  75       return
  76     }
  77
  78     this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
  79   }
  80
  81   private getCaptions (): PeerTubeTextTrack[] {
  82     return this.embed.player.textTracks().tracks_.map(t => {
  83       return {
  84         id: t.id,
  85         src: t.src,
  86         label: t.label,
  87         mode: t.mode as any
  88       }
  89     })
  90   }
  91
  92   private setCaption (id: string) {
  93     const tracks = this.embed.player.textTracks().tracks_
  94
  95     for (const track of tracks) {
  96       if (track.id === id) track.mode = 'showing'
  97       else track.mode = 'disabled'
  98     }
  99   }
 100
 101   /**
 102    * Let the host know that we're ready to go!
 103    */
 104   private notifyReady () {
 105     this.isReady = true
 106     this.channel.notify({ method: 'ready', params: true })
 107   }
 108
 109   private setupStateTracking () {
 110     let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 111
 112     setInterval(() => {
 113       const position = this.element.currentTime
 114       const volume = this.element.volume
 115
 116       this.channel.notify({
 117         method: 'playbackStatusUpdate',
 118         params: {
 119           position,
 120           volume,
 121           duration: this.embed.player.duration(),
 122           playbackState: currentState
 123         }
 124       })
 125     }, 500)
 126
 127     this.element.addEventListener('play', ev => {
 128       currentState = 'playing'
 129       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
 130     })
 131
 132     this.element.addEventListener('pause', ev => {
 133       currentState = 'paused'
 134       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
 135     })
 136
 137     this.element.addEventListener('ended', ev => {
 138       currentState = 'ended'
 139       this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
 140     })
 141
 142     // PeerTube specific capabilities
 143     if (this.isWebtorrent()) {
 144       this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
 145       this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
 146
 147       this.loadWebTorrentResolutions()
 148     } else {
 149       this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions())
 150       this.embed.player.p2pMediaLoader().on('resolutionsLoaded', () => this.loadP2PMediaLoaderResolutions())
 151     }
 152
 153     this.embed.player.on('volumechange', () => {
 154       this.channel.notify({
 155         method: 'volumeChange',
 156         params: this.embed.player.volume()
 157       })
 158     })
 159   }
 160
 161   private loadWebTorrentResolutions () {
 162     this.resolutions = []
 163
 164     const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 165
 166     for (const videoFile of this.embed.player.webtorrent().videoFiles) {
 167       let label = videoFile.resolution.label
 168       if (videoFile.fps && videoFile.fps >= 50) {
 169         label += videoFile.fps
 170       }
 171
 172       this.resolutions.push({
 173         id: videoFile.resolution.id,
 174         label,
 175         src: videoFile.magnetUri,
 176         active: videoFile.resolution.id === currentResolutionId,
 177         height: videoFile.resolution.id
 178       })
 179     }
 180
 181     this.channel.notify({
 182       method: 'resolutionUpdate',
 183       params: this.resolutions
 184     })
 185   }
 186
 187   private loadP2PMediaLoaderResolutions () {
 188     this.resolutions = []
 189
 190     const qualityLevels = this.embed.player.qualityLevels()
 191     const currentResolutionId = this.embed.player.qualityLevels().selectedIndex
 192
 193     for (let i = 0; i < qualityLevels.length; i++) {
 194       const level = qualityLevels[i]
 195
 196       this.resolutions.push({
 197         id: level.id,
 198         label: level.height + 'p',
 199         active: level.id === currentResolutionId,
 200         width: level.width,
 201         height: level.height
 202       })
 203     }
 204
 205     this.channel.notify({
 206       method: 'resolutionUpdate',
 207       params: this.resolutions
 208     })
 209   }
 210
 211   private isWebtorrent () {
 212     return !!this.embed.player.webtorrent
 213   }
 214 }