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[] = []
  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
  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('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  48     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  49     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
  50     this.channel = channel
  51   }
  52
  53   private setResolution (resolutionId: number) {
  54     console.log('set resolution %d', resolutionId)
  55
  56     if (this.isWebtorrent()) {
  57       if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
  58
  59       // Auto resolution
  60       if (resolutionId === -1) {
  61         this.embed.player.webtorrent().enableAutoResolution()
  62         return
  63       }
  64
  65       this.embed.player.webtorrent().disableAutoResolution()
  66       this.embed.player.webtorrent().updateResolution(resolutionId)
  67
  68       return
  69     }
  70
  71     this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
  72   }
  73
  74   /**
  75    * Let the host know that we're ready to go!
  76    */
  77   private notifyReady () {
  78     this.isReady = true
  79     this.channel.notify({ method: 'ready', params: true })
  80   }
  81
  82   private setupStateTracking () {
  83     let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
  84
  85     setInterval(() => {
  86       const position = this.element.currentTime
  87       const volume = this.element.volume
  88
  89       this.channel.notify({
  90         method: 'playbackStatusUpdate',
  91         params: {
  92           position,
  93           volume,
  94           playbackState: currentState
  95         }
  96       })
  97     }, 500)
  98
  99     this.element.addEventListener('play', ev => {
 100       currentState = 'playing'
 101       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
 102     })
 103
 104     this.element.addEventListener('pause', ev => {
 105       currentState = 'paused'
 106       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
 107     })
 108
 109     // PeerTube specific capabilities
 110
 111     if (this.isWebtorrent()) {
 112       this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
 113       this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
 114     } else {
 115       this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions())
 116     }
 117
 118     this.embed.player.on('volumechange', () => {
 119       this.channel.notify({
 120         method: 'volumeChange',
 121         params: this.embed.player.volume()
 122       })
 123     })
 124   }
 125
 126   private loadWebTorrentResolutions () {
 127     this.resolutions = []
 128
 129     const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 130
 131     for (const videoFile of this.embed.player.webtorrent().videoFiles) {
 132       let label = videoFile.resolution.label
 133       if (videoFile.fps && videoFile.fps >= 50) {
 134         label += videoFile.fps
 135       }
 136
 137       this.resolutions.push({
 138         id: videoFile.resolution.id,
 139         label,
 140         src: videoFile.magnetUri,
 141         active: videoFile.resolution.id === currentResolutionId,
 142         height: videoFile.resolution.id
 143       })
 144     }
 145
 146     this.channel.notify({
 147       method: 'resolutionUpdate',
 148       params: this.resolutions
 149     })
 150   }
 151
 152   private loadP2PMediaLoaderResolutions () {
 153     this.resolutions = []
 154
 155     const qualityLevels = this.embed.player.qualityLevels()
 156     const currentResolutionId = this.embed.player.qualityLevels().selectedIndex
 157
 158     for (let i = 0; i < qualityLevels.length; i++) {
 159       const level = qualityLevels[i]
 160
 161       this.resolutions.push({
 162         id: level.id,
 163         label: level.height + 'p',
 164         active: level.id === currentResolutionId,
 165         width: level.width,
 166         height: level.height
 167       })
 168     }
 169
 170     this.channel.notify({
 171       method: 'resolutionUpdate',
 172       params: this.resolutions
 173     })
 174   }
 175
 176   private isWebtorrent () {
 177     return this.embed.player.webtorrent
 178   }
 179 }