client/src/standalone/player/player.ts

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