client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2
   3 import * as Channel from 'jschannel'
   4
   5 import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared'
   6 import { PeerTubeResolution } from '../player/definitions'
   7 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
   8 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
   9 import {
  10   P2PMediaLoaderOptions,
  11   PeertubePlayerManager,
  12   PeertubePlayerManagerOptions,
  13   PlayerMode
  14 } from '../../assets/player/peertube-player-manager'
  15 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
  16
  17 /**
  18  * Embed API exposes control of the embed player to the outside world via
  19  * JSChannels and window.postMessage
  20  */
  21 class PeerTubeEmbedApi {
  22   private channel: Channel.MessagingChannel
  23   private isReady = false
  24   private resolutions: PeerTubeResolution[] = null
  25
  26   constructor (private embed: PeerTubeEmbed) {
  27   }
  28
  29   initialize () {
  30     this.constructChannel()
  31     this.setupStateTracking()
  32
  33     // We're ready!
  34
  35     this.notifyReady()
  36   }
  37
  38   private get element () {
  39     return this.embed.videoElement
  40   }
  41
  42   private constructChannel () {
  43     const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
  44
  45     channel.bind('play', (txn, params) => this.embed.player.play())
  46     channel.bind('pause', (txn, params) => this.embed.player.pause())
  47     channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
  48     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
  49     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
  50     channel.bind('isReady', (txn, params) => this.isReady)
  51     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
  52     channel.bind('getResolutions', (txn, params) => this.resolutions)
  53     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
  54     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
  55     channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
  56
  57     this.channel = channel
  58   }
  59
  60   private setResolution (resolutionId: number) {
  61     if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
  62
  63     // Auto resolution
  64     if (resolutionId === -1) {
  65       this.embed.player.webtorrent().enableAutoResolution()
  66       return
  67     }
  68
  69     this.embed.player.webtorrent().disableAutoResolution()
  70     this.embed.player.webtorrent().updateResolution(resolutionId)
  71   }
  72
  73   /**
  74    * Let the host know that we're ready to go!
  75    */
  76   private notifyReady () {
  77     this.isReady = true
  78     this.channel.notify({ method: 'ready', params: true })
  79   }
  80
  81   private setupStateTracking () {
  82     let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
  83
  84     setInterval(() => {
  85       const position = this.element.currentTime
  86       const volume = this.element.volume
  87
  88       this.channel.notify({
  89         method: 'playbackStatusUpdate',
  90         params: {
  91           position,
  92           volume,
  93           playbackState: currentState
  94         }
  95       })
  96     }, 500)
  97
  98     this.element.addEventListener('play', ev => {
  99       currentState = 'playing'
 100       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
 101     })
 102
 103     this.element.addEventListener('pause', ev => {
 104       currentState = 'paused'
 105       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
 106     })
 107
 108     // PeerTube specific capabilities
 109
 110     if (this.embed.player.webtorrent) {
 111       this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
 112       this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
 113     }
 114   }
 115
 116   private loadWebTorrentResolutions () {
 117     const resolutions = []
 118     const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 119
 120     for (const videoFile of this.embed.player.webtorrent().videoFiles) {
 121       let label = videoFile.resolution.label
 122       if (videoFile.fps && videoFile.fps >= 50) {
 123         label += videoFile.fps
 124       }
 125
 126       resolutions.push({
 127         id: videoFile.resolution.id,
 128         label,
 129         src: videoFile.magnetUri,
 130         active: videoFile.resolution.id === currentResolutionId
 131       })
 132     }
 133
 134     this.resolutions = resolutions
 135     this.channel.notify({
 136       method: 'resolutionUpdate',
 137       params: this.resolutions
 138     })
 139   }
 140 }
 141
 142 class PeerTubeEmbed {
 143   videoElement: HTMLVideoElement
 144   player: any
 145   playerOptions: any
 146   api: PeerTubeEmbedApi = null
 147   autoplay: boolean
 148   controls: boolean
 149   muted: boolean
 150   loop: boolean
 151   subtitle: string
 152   enableApi = false
 153   startTime: number | string = 0
 154   stopTime: number | string
 155   mode: PlayerMode
 156   scope = 'peertube'
 157
 158   static async main () {
 159     const videoContainerId = 'video-container'
 160     const embed = new PeerTubeEmbed(videoContainerId)
 161     await embed.init()
 162   }
 163
 164   constructor (private videoContainerId: string) {
 165     this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
 166   }
 167
 168   getVideoUrl (id: string) {
 169     return window.location.origin + '/api/v1/videos/' + id
 170   }
 171
 172   loadVideoInfo (videoId: string): Promise<Response> {
 173     return fetch(this.getVideoUrl(videoId))
 174   }
 175
 176   loadVideoCaptions (videoId: string): Promise<Response> {
 177     return fetch(this.getVideoUrl(videoId) + '/captions')
 178   }
 179
 180   loadConfig (): Promise<Response> {
 181     return fetch('/api/v1/config')
 182   }
 183
 184   removeElement (element: HTMLElement) {
 185     element.parentElement.removeChild(element)
 186   }
 187
 188   displayError (text: string, translations?: { [ id: string ]: string }) {
 189     // Remove video element
 190     if (this.videoElement) this.removeElement(this.videoElement)
 191
 192     const translatedText = peertubeTranslate(text, translations)
 193     const translatedSorry = peertubeTranslate('Sorry', translations)
 194
 195     document.title = translatedSorry + ' - ' + translatedText
 196
 197     const errorBlock = document.getElementById('error-block')
 198     errorBlock.style.display = 'flex'
 199
 200     const errorTitle = document.getElementById('error-title')
 201     errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
 202
 203     const errorText = document.getElementById('error-content')
 204     errorText.innerHTML = translatedText
 205   }
 206
 207   videoNotFound (translations?: { [ id: string ]: string }) {
 208     const text = 'This video does not exist.'
 209     this.displayError(text, translations)
 210   }
 211
 212   videoFetchError (translations?: { [ id: string ]: string }) {
 213     const text = 'We cannot fetch the video. Please try again later.'
 214     this.displayError(text, translations)
 215   }
 216
 217   getParamToggle (params: URLSearchParams, name: string, defaultValue?: boolean) {
 218     return params.has(name) ? (params.get(name) === '1' || params.get(name) === 'true') : defaultValue
 219   }
 220
 221   getParamString (params: URLSearchParams, name: string, defaultValue?: string) {
 222     return params.has(name) ? params.get(name) : defaultValue
 223   }
 224
 225   async init () {
 226     try {
 227       await this.initCore()
 228     } catch (e) {
 229       console.error(e)
 230     }
 231   }
 232
 233   private initializeApi () {
 234     if (!this.enableApi) return
 235
 236     this.api = new PeerTubeEmbedApi(this)
 237     this.api.initialize()
 238   }
 239
 240   private loadParams () {
 241     try {
 242       const params = new URL(window.location.toString()).searchParams
 243
 244       this.autoplay = this.getParamToggle(params, 'autoplay', false)
 245       this.controls = this.getParamToggle(params, 'controls', true)
 246       this.muted = this.getParamToggle(params, 'muted', false)
 247       this.loop = this.getParamToggle(params, 'loop', false)
 248       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
 249
 250       this.scope = this.getParamString(params, 'scope', this.scope)
 251       this.subtitle = this.getParamString(params, 'subtitle')
 252       this.startTime = this.getParamString(params, 'start')
 253       this.stopTime = this.getParamString(params, 'stop')
 254
 255       this.mode = this.getParamString(params, 'mode') === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
 256     } catch (err) {
 257       console.error('Cannot get params from URL.', err)
 258     }
 259   }
 260
 261   private async initCore () {
 262     const urlParts = window.location.pathname.split('/')
 263     const videoId = urlParts[ urlParts.length - 1 ]
 264
 265     const [ serverTranslations, videoResponse, captionsResponse, configResponse ] = await Promise.all([
 266       PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language),
 267       this.loadVideoInfo(videoId),
 268       this.loadVideoCaptions(videoId),
 269       this.loadConfig()
 270     ])
 271
 272     if (!videoResponse.ok) {
 273       if (videoResponse.status === 404) return this.videoNotFound(serverTranslations)
 274
 275       return this.videoFetchError(serverTranslations)
 276     }
 277
 278     const videoInfo: VideoDetails = await videoResponse.json()
 279     let videoCaptions: VideoJSCaption[] = []
 280     if (captionsResponse.ok) {
 281       const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
 282       videoCaptions = data.map(c => ({
 283         label: peertubeTranslate(c.language.label, serverTranslations),
 284         language: c.language.id,
 285         src: window.location.origin + c.captionPath
 286       }))
 287     }
 288
 289     this.loadParams()
 290
 291     const options: PeertubePlayerManagerOptions = {
 292       common: {
 293         autoplay: this.autoplay,
 294         controls: this.controls,
 295         muted: this.muted,
 296         loop: this.loop,
 297         captions: videoCaptions.length !== 0,
 298         startTime: this.startTime,
 299         stopTime: this.stopTime,
 300         subtitle: this.subtitle,
 301
 302         videoCaptions,
 303         inactivityTimeout: 1500,
 304         videoViewUrl: this.getVideoUrl(videoId) + '/views',
 305
 306         playerElement: this.videoElement,
 307         onPlayerElementChange: (element: HTMLVideoElement) => this.videoElement = element,
 308
 309         videoDuration: videoInfo.duration,
 310         enableHotkeys: true,
 311         peertubeLink: true,
 312         poster: window.location.origin + videoInfo.previewPath,
 313         theaterMode: false,
 314
 315         serverUrl: window.location.origin,
 316         language: navigator.language,
 317         embedUrl: window.location.origin + videoInfo.embedPath
 318       },
 319
 320       webtorrent: {
 321         videoFiles: videoInfo.files
 322       }
 323     }
 324
 325     if (this.mode === 'p2p-media-loader') {
 326       const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
 327
 328       Object.assign(options, {
 329         p2pMediaLoader: {
 330           playlistUrl: hlsPlaylist.playlistUrl,
 331           segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
 332           redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
 333           trackerAnnounce: videoInfo.trackerUrls,
 334           videoFiles: videoInfo.files
 335         } as P2PMediaLoaderOptions
 336       })
 337     }
 338
 339     this.player = await PeertubePlayerManager.initialize(this.mode, options)
 340
 341     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 342
 343     window[ 'videojsPlayer' ] = this.player
 344
 345     if (this.controls) {
 346       const config: ServerConfig = await configResponse.json()
 347       const description = config.tracker.enabled
 348         ? '<span class="text">' + this.player.localize('Uses P2P, others may know your IP is downloading this video.') + '</span>'
 349         : undefined
 350
 351       this.player.dock({
 352         title: videoInfo.name,
 353         description
 354       })
 355     }
 356
 357     this.initializeApi()
 358   }
 359
 360   private handleError (err: Error, translations?: { [ id: string ]: string }) {
 361     if (err.message.indexOf('from xs param') !== -1) {
 362       this.player.dispose()
 363       this.videoElement = null
 364       this.displayError('This video is not available because the remote instance is not responding.', translations)
 365       return
 366     }
 367   }
 368 }
 369
 370 PeerTubeEmbed.main()
 371   .catch(err => console.error('Cannot init embed.', err))