client/src/standalone/player/player.ts

   1 import * as Channel from 'jschannel'
   2 import { EventRegistrar } from './events'
   3 import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
   4
   5 const PASSTHROUGH_EVENTS = [
   6   'pause',
   7   'play',
   8   'playbackStatusUpdate',
   9   'playbackStatusChange',
  10   'resolutionUpdate'
  11 ]
  12
  13 /**
  14  * Allows for programmatic control of a PeerTube embed running in an <iframe>
  15  * within a web page.
  16  */
  17 export class PeerTubePlayer {
  18
  19   private eventRegistrar: EventRegistrar = new EventRegistrar()
  20   private channel: Channel.MessagingChannel
  21   private readyPromise: Promise<void>
  22
  23   /**
  24    * Construct a new PeerTubePlayer for the given PeerTube embed iframe.
  25    * Optionally provide a `scope` to ensure that messages are not crossed
  26    * between multiple PeerTube embeds. The string passed here must match the
  27    * `scope=` query parameter on the embed URL.
  28    *
  29    * @param embedElement
  30    * @param scope
  31    */
  32   constructor (
  33     private embedElement: HTMLIFrameElement,
  34     private scope?: string
  35   ) {
  36     this.eventRegistrar.registerTypes(PASSTHROUGH_EVENTS)
  37
  38     this.constructChannel()
  39     this.prepareToBeReady()
  40   }
  41
  42   /**
  43    * Destroy the player object and remove the associated player from the DOM.
  44    */
  45   destroy () {
  46     this.embedElement.remove()
  47   }
  48
  49   /**
  50    * Listen to an event emitted by this player.
  51    *
  52    * @param event One of the supported event types
  53    * @param handler A handler which will be passed an event object (or undefined if no event object is included)
  54    */
  55   addEventListener (event: PlayerEventType, handler: EventHandler<any>): boolean {
  56     return this.eventRegistrar.addListener(event, handler)
  57   }
  58
  59   /**
  60    * Remove an event listener previously added with addEventListener().
  61    *
  62    * @param event The name of the event previously listened to
  63    * @param handler
  64    */
  65   removeEventListener (event: PlayerEventType, handler: EventHandler<any>): boolean {
  66     return this.eventRegistrar.removeListener(event, handler)
  67   }
  68
  69   /**
  70    * Promise resolves when the player is ready.
  71    */
  72   get ready (): Promise<void> {
  73     return this.readyPromise
  74   }
  75
  76   /**
  77    * Tell the embed to start/resume playback
  78    */
  79   async play () {
  80     await this.sendMessage('play')
  81   }
  82
  83   /**
  84    * Tell the embed to pause playback.
  85    */
  86   async pause () {
  87     await this.sendMessage('pause')
  88   }
  89
  90   /**
  91    * Tell the embed to change the audio volume
  92    * @param value A number from 0 to 1
  93    */
  94   async setVolume (value: number) {
  95     await this.sendMessage('setVolume', value)
  96   }
  97
  98   /**
  99    * Get the current volume level in the embed.
 100    * @param value A number from 0 to 1
 101    */
 102   async getVolume (): Promise<number> {
 103     return this.sendMessage<void, number>('setVolume')
 104   }
 105
 106   /**
 107    * Tell the embed to seek to a specific position (in seconds)
 108    * @param seconds
 109    */
 110   async seek (seconds: number) {
 111     await this.sendMessage('seek', seconds)
 112   }
 113
 114   /**
 115    * Tell the embed to switch resolutions to the resolution identified
 116    * by the given ID.
 117    *
 118    * @param resolutionId The ID of the resolution as found with getResolutions()
 119    */
 120   async setResolution (resolutionId: any) {
 121     await this.sendMessage('setResolution', resolutionId)
 122   }
 123
 124   /**
 125    * Retrieve a list of the available resolutions. This may change later, listen to the
 126    * `resolutionUpdate` event with `addEventListener` in order to be updated as the available
 127    * resolutions change.
 128    */
 129   async getResolutions (): Promise<PeerTubeResolution[]> {
 130     return this.sendMessage<void, PeerTubeResolution[]>('getResolutions')
 131   }
 132
 133   /**
 134    * Retrieve a list of available playback rates.
 135    */
 136   async getPlaybackRates (): Promise<number[]> {
 137     return this.sendMessage<void, number[]>('getPlaybackRates')
 138   }
 139
 140   /**
 141    * Get the current playback rate. Defaults to 1 (1x playback rate).
 142    */
 143   async getPlaybackRate (): Promise<number> {
 144     return this.sendMessage<void, number>('getPlaybackRate')
 145   }
 146
 147   /**
 148    * Set the playback rate. Should be one of the options returned by getPlaybackRates().
 149    * Passing 0.5 means half speed, 1 means normal, 2 means 2x speed, etc.
 150    *
 151    * @param rate
 152    */
 153   async setPlaybackRate (rate: number) {
 154     await this.sendMessage('setPlaybackRate', rate)
 155   }
 156
 157   private constructChannel () {
 158     this.channel = Channel.build({
 159       window: this.embedElement.contentWindow,
 160       origin: '*',
 161       scope: this.scope || 'peertube'
 162     })
 163     this.eventRegistrar.bindToChannel(this.channel)
 164   }
 165
 166   private prepareToBeReady () {
 167     let readyResolve: Function
 168     let readyReject: Function
 169
 170     this.readyPromise = new Promise<void>((res, rej) => {
 171       readyResolve = res
 172       readyReject = rej
 173     })
 174
 175     this.channel.bind('ready', success => success ? readyResolve() : readyReject())
 176     this.channel.call({
 177       method: 'isReady',
 178       success: isReady => isReady ? readyResolve() : null
 179     })
 180   }
 181
 182   private sendMessage<TIn, TOut> (method: string, params?: TIn): Promise<TOut> {
 183     return new Promise<TOut>((resolve, reject) => {
 184       this.channel.call({
 185         method, params,
 186         success: result => resolve(result),
 187         error: error => reject(error)
 188       })
 189     })
 190   }
 191 }
 192
 193 // put it on the window as well as the export
 194 window[ 'PeerTubePlayer' ] = PeerTubePlayer