client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2 import videojs from 'video.js'
   3 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
   4 import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes'
   5 import {
   6   ClientHookName,
   7   HTMLServerConfig,
   8   OAuth2ErrorCode,
   9   PluginType,
  10   ResultList,
  11   UserRefreshToken,
  12   VideoCaption,
  13   VideoDetails,
  14   VideoPlaylist,
  15   VideoPlaylistElement,
  16   VideoStreamingPlaylistType
  17 } from '../../../../shared/models'
  18 import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
  19 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
  20 import { TranslationsManager } from '../../assets/player/translations-manager'
  21 import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
  22 import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins'
  23 import { Tokens } from '../../root-helpers/users'
  24 import { objectToUrlEncoded } from '../../root-helpers/utils'
  25 import { RegisterClientHelpers } from '../../types/register-client-option.model'
  26 import { PeerTubeEmbedApi } from './embed-api'
  27
  28 type Translations = { [ id: string ]: string }
  29
  30 export class PeerTubeEmbed {
  31   playerElement: HTMLVideoElement
  32   player: videojs.Player
  33   api: PeerTubeEmbedApi = null
  34
  35   autoplay: boolean
  36   controls: boolean
  37   muted: boolean
  38   loop: boolean
  39   subtitle: string
  40   enableApi = false
  41   startTime: number | string = 0
  42   stopTime: number | string
  43
  44   title: boolean
  45   warningTitle: boolean
  46   peertubeLink: boolean
  47   bigPlayBackgroundColor: string
  48   foregroundColor: string
  49
  50   mode: PlayerMode
  51   scope = 'peertube'
  52
  53   userTokens: Tokens
  54   headers = new Headers()
  55   LOCAL_STORAGE_OAUTH_CLIENT_KEYS = {
  56     CLIENT_ID: 'client_id',
  57     CLIENT_SECRET: 'client_secret'
  58   }
  59
  60   config: HTMLServerConfig
  61
  62   private translationsPromise: Promise<{ [id: string]: string }>
  63   private PeertubePlayerManagerModulePromise: Promise<any>
  64
  65   private playlist: VideoPlaylist
  66   private playlistElements: VideoPlaylistElement[]
  67   private currentPlaylistElement: VideoPlaylistElement
  68
  69   private wrapperElement: HTMLElement
  70
  71   private peertubeHooks: Hooks = {}
  72   private loadedScripts = new Set<string>()
  73
  74   static async main () {
  75     const videoContainerId = 'video-wrapper'
  76     const embed = new PeerTubeEmbed(videoContainerId)
  77     await embed.init()
  78   }
  79
  80   constructor (private videoWrapperId: string) {
  81     this.wrapperElement = document.getElementById(this.videoWrapperId)
  82
  83     try {
  84       this.config = JSON.parse(window['PeerTubeServerConfig'])
  85     } catch (err) {
  86       console.error('Cannot parse HTML config.', err)
  87     }
  88   }
  89
  90   getVideoUrl (id: string) {
  91     return window.location.origin + '/api/v1/videos/' + id
  92   }
  93
  94   refreshFetch (url: string, options?: RequestInit) {
  95     return fetch(url, options)
  96       .then((res: Response) => {
  97         if (res.status !== HttpStatusCode.UNAUTHORIZED_401) return res
  98
  99         const refreshingTokenPromise = new Promise<void>((resolve, reject) => {
 100           const clientId: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID)
 101           const clientSecret: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET)
 102
 103           const headers = new Headers()
 104           headers.set('Content-Type', 'application/x-www-form-urlencoded')
 105
 106           const data = {
 107             refresh_token: this.userTokens.refreshToken,
 108             client_id: clientId,
 109             client_secret: clientSecret,
 110             response_type: 'code',
 111             grant_type: 'refresh_token'
 112           }
 113
 114           fetch('/api/v1/users/token', {
 115             headers,
 116             method: 'POST',
 117             body: objectToUrlEncoded(data)
 118           }).then(res => {
 119             if (res.status === HttpStatusCode.UNAUTHORIZED_401) return undefined
 120
 121             return res.json()
 122           }).then((obj: UserRefreshToken & { code?: OAuth2ErrorCode }) => {
 123             if (!obj || obj.code === OAuth2ErrorCode.INVALID_GRANT) {
 124               Tokens.flush()
 125               this.removeTokensFromHeaders()
 126
 127               return resolve()
 128             }
 129
 130             this.userTokens.accessToken = obj.access_token
 131             this.userTokens.refreshToken = obj.refresh_token
 132             this.userTokens.save()
 133
 134             this.setHeadersFromTokens()
 135
 136             resolve()
 137           }).catch((refreshTokenError: any) => {
 138             reject(refreshTokenError)
 139           })
 140         })
 141
 142         return refreshingTokenPromise
 143           .catch(() => {
 144             Tokens.flush()
 145
 146             this.removeTokensFromHeaders()
 147           }).then(() => fetch(url, {
 148             ...options,
 149             headers: this.headers
 150           }))
 151       })
 152   }
 153
 154   getPlaylistUrl (id: string) {
 155     return window.location.origin + '/api/v1/video-playlists/' + id
 156   }
 157
 158   loadVideoInfo (videoId: string): Promise<Response> {
 159     return this.refreshFetch(this.getVideoUrl(videoId), { headers: this.headers })
 160   }
 161
 162   loadVideoCaptions (videoId: string): Promise<Response> {
 163     return this.refreshFetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers })
 164   }
 165
 166   loadPlaylistInfo (playlistId: string): Promise<Response> {
 167     return this.refreshFetch(this.getPlaylistUrl(playlistId), { headers: this.headers })
 168   }
 169
 170   loadPlaylistElements (playlistId: string, start = 0): Promise<Response> {
 171     const url = new URL(this.getPlaylistUrl(playlistId) + '/videos')
 172     url.search = new URLSearchParams({ start: '' + start, count: '100' }).toString()
 173
 174     return this.refreshFetch(url.toString(), { headers: this.headers })
 175   }
 176
 177   removeElement (element: HTMLElement) {
 178     element.parentElement.removeChild(element)
 179   }
 180
 181   displayError (text: string, translations?: Translations) {
 182     // Remove video element
 183     if (this.playerElement) {
 184       this.removeElement(this.playerElement)
 185       this.playerElement = undefined
 186     }
 187
 188     const translatedText = peertubeTranslate(text, translations)
 189     const translatedSorry = peertubeTranslate('Sorry', translations)
 190
 191     document.title = translatedSorry + ' - ' + translatedText
 192
 193     const errorBlock = document.getElementById('error-block')
 194     errorBlock.style.display = 'flex'
 195
 196     const errorTitle = document.getElementById('error-title')
 197     errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
 198
 199     const errorText = document.getElementById('error-content')
 200     errorText.innerHTML = translatedText
 201
 202     this.wrapperElement.style.display = 'none'
 203   }
 204
 205   videoNotFound (translations?: Translations) {
 206     const text = 'This video does not exist.'
 207     this.displayError(text, translations)
 208   }
 209
 210   videoFetchError (translations?: Translations) {
 211     const text = 'We cannot fetch the video. Please try again later.'
 212     this.displayError(text, translations)
 213   }
 214
 215   playlistNotFound (translations?: Translations) {
 216     const text = 'This playlist does not exist.'
 217     this.displayError(text, translations)
 218   }
 219
 220   playlistFetchError (translations?: Translations) {
 221     const text = 'We cannot fetch the playlist. Please try again later.'
 222     this.displayError(text, translations)
 223   }
 224
 225   getParamToggle (params: URLSearchParams, name: string, defaultValue?: boolean) {
 226     return params.has(name) ? (params.get(name) === '1' || params.get(name) === 'true') : defaultValue
 227   }
 228
 229   getParamString (params: URLSearchParams, name: string, defaultValue?: string) {
 230     return params.has(name) ? params.get(name) : defaultValue
 231   }
 232
 233   async playNextVideo () {
 234     const next = this.getNextPlaylistElement()
 235     if (!next) {
 236       console.log('Next element not found in playlist.')
 237       return
 238     }
 239
 240     this.currentPlaylistElement = next
 241
 242     return this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
 243   }
 244
 245   async playPreviousVideo () {
 246     const previous = this.getPreviousPlaylistElement()
 247     if (!previous) {
 248       console.log('Previous element not found in playlist.')
 249       return
 250     }
 251
 252     this.currentPlaylistElement = previous
 253
 254     await this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
 255   }
 256
 257   getCurrentPosition () {
 258     if (!this.currentPlaylistElement) return -1
 259
 260     return this.currentPlaylistElement.position
 261   }
 262
 263   async init () {
 264     try {
 265       this.userTokens = Tokens.load()
 266       await this.initCore()
 267     } catch (e) {
 268       console.error(e)
 269     }
 270   }
 271
 272   private initializeApi () {
 273     if (!this.enableApi) return
 274
 275     this.api = new PeerTubeEmbedApi(this)
 276     this.api.initialize()
 277   }
 278
 279   private loadParams (video: VideoDetails) {
 280     try {
 281       const params = new URL(window.location.toString()).searchParams
 282
 283       this.autoplay = this.getParamToggle(params, 'autoplay', false)
 284       this.controls = this.getParamToggle(params, 'controls', true)
 285       this.muted = this.getParamToggle(params, 'muted', undefined)
 286       this.loop = this.getParamToggle(params, 'loop', false)
 287       this.title = this.getParamToggle(params, 'title', true)
 288       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
 289       this.warningTitle = this.getParamToggle(params, 'warningTitle', true)
 290       this.peertubeLink = this.getParamToggle(params, 'peertubeLink', true)
 291
 292       this.scope = this.getParamString(params, 'scope', this.scope)
 293       this.subtitle = this.getParamString(params, 'subtitle')
 294       this.startTime = this.getParamString(params, 'start')
 295       this.stopTime = this.getParamString(params, 'stop')
 296
 297       this.bigPlayBackgroundColor = this.getParamString(params, 'bigPlayBackgroundColor')
 298       this.foregroundColor = this.getParamString(params, 'foregroundColor')
 299
 300       const modeParam = this.getParamString(params, 'mode')
 301
 302       if (modeParam) {
 303         if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader'
 304         else this.mode = 'webtorrent'
 305       } else {
 306         if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader'
 307         else this.mode = 'webtorrent'
 308       }
 309     } catch (err) {
 310       console.error('Cannot get params from URL.', err)
 311     }
 312   }
 313
 314   private async loadAllPlaylistVideos (playlistId: string, baseResult: ResultList<VideoPlaylistElement>) {
 315     let elements = baseResult.data
 316     let total = baseResult.total
 317     let i = 0
 318
 319     while (total > elements.length && i < 10) {
 320       const result = await this.loadPlaylistElements(playlistId, elements.length)
 321
 322       const json = await result.json() as ResultList<VideoPlaylistElement>
 323       total = json.total
 324
 325       elements = elements.concat(json.data)
 326       i++
 327     }
 328
 329     if (i === 10) {
 330       console.error('Cannot fetch all playlists elements, there are too many!')
 331     }
 332
 333     return elements
 334   }
 335
 336   private async loadPlaylist (playlistId: string) {
 337     const playlistPromise = this.loadPlaylistInfo(playlistId)
 338     const playlistElementsPromise = this.loadPlaylistElements(playlistId)
 339
 340     let playlistResponse: Response
 341     let isResponseOk: boolean
 342
 343     try {
 344       playlistResponse = await playlistPromise
 345       isResponseOk = playlistResponse.status === HttpStatusCode.OK_200
 346     } catch (err) {
 347       console.error(err)
 348       isResponseOk = false
 349     }
 350
 351     if (!isResponseOk) {
 352       const serverTranslations = await this.translationsPromise
 353
 354       if (playlistResponse?.status === HttpStatusCode.NOT_FOUND_404) {
 355         this.playlistNotFound(serverTranslations)
 356         return undefined
 357       }
 358
 359       this.playlistFetchError(serverTranslations)
 360       return undefined
 361     }
 362
 363     return { playlistResponse, videosResponse: await playlistElementsPromise }
 364   }
 365
 366   private async loadVideo (videoId: string) {
 367     const videoPromise = this.loadVideoInfo(videoId)
 368
 369     let videoResponse: Response
 370     let isResponseOk: boolean
 371
 372     try {
 373       videoResponse = await videoPromise
 374       isResponseOk = videoResponse.status === HttpStatusCode.OK_200
 375     } catch (err) {
 376       console.error(err)
 377
 378       isResponseOk = false
 379     }
 380
 381     if (!isResponseOk) {
 382       const serverTranslations = await this.translationsPromise
 383
 384       if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
 385         this.videoNotFound(serverTranslations)
 386         return undefined
 387       }
 388
 389       this.videoFetchError(serverTranslations)
 390       return undefined
 391     }
 392
 393     const captionsPromise = this.loadVideoCaptions(videoId)
 394
 395     return { captionsPromise, videoResponse }
 396   }
 397
 398   private async buildPlaylistManager () {
 399     const translations = await this.translationsPromise
 400
 401     this.player.upnext({
 402       timeout: 10000, // 10s
 403       headText: peertubeTranslate('Up Next', translations),
 404       cancelText: peertubeTranslate('Cancel', translations),
 405       suspendedText: peertubeTranslate('Autoplay is suspended', translations),
 406       getTitle: () => this.nextVideoTitle(),
 407       next: () => this.playNextVideo(),
 408       condition: () => !!this.getNextPlaylistElement(),
 409       suspended: () => false
 410     })
 411   }
 412
 413   private async loadVideoAndBuildPlayer (uuid: string) {
 414     const res = await this.loadVideo(uuid)
 415     if (res === undefined) return
 416
 417     return this.buildVideoPlayer(res.videoResponse, res.captionsPromise)
 418   }
 419
 420   private nextVideoTitle () {
 421     const next = this.getNextPlaylistElement()
 422     if (!next) return ''
 423
 424     return next.video.name
 425   }
 426
 427   private getNextPlaylistElement (position?: number): VideoPlaylistElement {
 428     if (!position) position = this.currentPlaylistElement.position + 1
 429
 430     if (position > this.playlist.videosLength) {
 431       return undefined
 432     }
 433
 434     const next = this.playlistElements.find(e => e.position === position)
 435
 436     if (!next || !next.video) {
 437       return this.getNextPlaylistElement(position + 1)
 438     }
 439
 440     return next
 441   }
 442
 443   private getPreviousPlaylistElement (position?: number): VideoPlaylistElement {
 444     if (!position) position = this.currentPlaylistElement.position - 1
 445
 446     if (position < 1) {
 447       return undefined
 448     }
 449
 450     const prev = this.playlistElements.find(e => e.position === position)
 451
 452     if (!prev || !prev.video) {
 453       return this.getNextPlaylistElement(position - 1)
 454     }
 455
 456     return prev
 457   }
 458
 459   private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
 460     let alreadyHadPlayer = false
 461
 462     if (this.player) {
 463       this.player.dispose()
 464       alreadyHadPlayer = true
 465     }
 466
 467     this.playerElement = document.createElement('video')
 468     this.playerElement.className = 'video-js vjs-peertube-skin'
 469     this.playerElement.setAttribute('playsinline', 'true')
 470     this.wrapperElement.appendChild(this.playerElement)
 471
 472     // Issue when we parsed config from HTML, fallback to API
 473     if (!this.config) {
 474       this.config = await this.refreshFetch('/api/v1/config')
 475                               .then(res => res.json())
 476     }
 477
 478     const videoInfoPromise = videoResponse.json()
 479       .then((videoInfo: VideoDetails) => {
 480         if (!alreadyHadPlayer) this.loadPlaceholder(videoInfo)
 481
 482         return videoInfo
 483       })
 484
 485     const [ videoInfoTmp, serverTranslations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
 486       videoInfoPromise,
 487       this.translationsPromise,
 488       captionsPromise,
 489       this.PeertubePlayerManagerModulePromise
 490     ])
 491
 492     await this.ensurePluginsAreLoaded(serverTranslations)
 493
 494     const videoInfo: VideoDetails = videoInfoTmp
 495
 496     const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
 497     const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
 498
 499     this.loadParams(videoInfo)
 500
 501     const playlistPlugin = this.currentPlaylistElement
 502       ? {
 503         elements: this.playlistElements,
 504         playlist: this.playlist,
 505
 506         getCurrentPosition: () => this.currentPlaylistElement.position,
 507
 508         onItemClicked: (videoPlaylistElement: VideoPlaylistElement) => {
 509           this.currentPlaylistElement = videoPlaylistElement
 510
 511           this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
 512             .catch(err => console.error(err))
 513         }
 514       }
 515       : undefined
 516
 517     const options: PeertubePlayerManagerOptions = {
 518       common: {
 519         // Autoplay in playlist mode
 520         autoplay: alreadyHadPlayer ? true : this.autoplay,
 521         controls: this.controls,
 522         muted: this.muted,
 523         loop: this.loop,
 524
 525         captions: videoCaptions.length !== 0,
 526         subtitle: this.subtitle,
 527
 528         startTime: this.playlist ? this.currentPlaylistElement.startTimestamp : this.startTime,
 529         stopTime: this.playlist ? this.currentPlaylistElement.stopTimestamp : this.stopTime,
 530
 531         nextVideo: this.playlist ? () => this.playNextVideo() : undefined,
 532         hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined,
 533
 534         previousVideo: this.playlist ? () => this.playPreviousVideo() : undefined,
 535         hasPreviousVideo: this.playlist ? () => !!this.getPreviousPlaylistElement() : undefined,
 536
 537         playlist: playlistPlugin,
 538
 539         videoCaptions,
 540         inactivityTimeout: 2500,
 541         videoViewUrl: this.getVideoUrl(videoInfo.uuid) + '/views',
 542         videoUUID: videoInfo.uuid,
 543
 544         isLive: videoInfo.isLive,
 545
 546         playerElement: this.playerElement,
 547         onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
 548
 549         videoDuration: videoInfo.duration,
 550         enableHotkeys: true,
 551         peertubeLink: this.peertubeLink,
 552         poster: window.location.origin + videoInfo.previewPath,
 553         theaterButton: false,
 554
 555         serverUrl: window.location.origin,
 556         language: navigator.language,
 557         embedUrl: window.location.origin + videoInfo.embedPath,
 558         embedTitle: videoInfo.name
 559       },
 560
 561       webtorrent: {
 562         videoFiles: videoInfo.files
 563       }
 564     }
 565
 566     if (this.mode === 'p2p-media-loader') {
 567       const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
 568
 569       Object.assign(options, {
 570         p2pMediaLoader: {
 571           playlistUrl: hlsPlaylist.playlistUrl,
 572           segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
 573           redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
 574           trackerAnnounce: videoInfo.trackerUrls,
 575           videoFiles: hlsPlaylist.files
 576         } as P2PMediaLoaderOptions
 577       })
 578     }
 579
 580     this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => this.player = player)
 581     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 582
 583     window[ 'videojsPlayer' ] = this.player
 584
 585     this.buildCSS()
 586
 587     await this.buildDock(videoInfo)
 588
 589     this.initializeApi()
 590
 591     this.removePlaceholder()
 592
 593     if (this.isPlaylistEmbed()) {
 594       await this.buildPlaylistManager()
 595
 596       this.player.playlist().updateSelected()
 597
 598       this.player.on('stopped', () => {
 599         this.playNextVideo()
 600       })
 601     }
 602
 603     this.runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video: videoInfo })
 604   }
 605
 606   private async initCore () {
 607     if (this.userTokens) this.setHeadersFromTokens()
 608
 609     this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
 610     this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
 611
 612     let videoId: string
 613
 614     if (this.isPlaylistEmbed()) {
 615       const playlistId = this.getResourceId()
 616       const res = await this.loadPlaylist(playlistId)
 617       if (!res) return undefined
 618
 619       this.playlist = await res.playlistResponse.json()
 620
 621       const playlistElementResult = await res.videosResponse.json()
 622       this.playlistElements = await this.loadAllPlaylistVideos(playlistId, playlistElementResult)
 623
 624       const params = new URL(window.location.toString()).searchParams
 625       const playlistPositionParam = this.getParamString(params, 'playlistPosition')
 626
 627       let position = 1
 628
 629       if (playlistPositionParam) {
 630         position = parseInt(playlistPositionParam + '', 10)
 631       }
 632
 633       this.currentPlaylistElement = this.playlistElements.find(e => e.position === position)
 634       if (!this.currentPlaylistElement || !this.currentPlaylistElement.video) {
 635         console.error('Current playlist element is not valid.', this.currentPlaylistElement)
 636         this.currentPlaylistElement = this.getNextPlaylistElement()
 637       }
 638
 639       if (!this.currentPlaylistElement) {
 640         console.error('This playlist does not have any valid element.')
 641         const serverTranslations = await this.translationsPromise
 642         this.playlistFetchError(serverTranslations)
 643         return
 644       }
 645
 646       videoId = this.currentPlaylistElement.video.uuid
 647     } else {
 648       videoId = this.getResourceId()
 649     }
 650
 651     return this.loadVideoAndBuildPlayer(videoId)
 652   }
 653
 654   private handleError (err: Error, translations?: { [ id: string ]: string }) {
 655     if (err.message.indexOf('from xs param') !== -1) {
 656       this.player.dispose()
 657       this.playerElement = null
 658       this.displayError('This video is not available because the remote instance is not responding.', translations)
 659       return
 660     }
 661   }
 662
 663   private async buildDock (videoInfo: VideoDetails) {
 664     if (!this.controls) return
 665
 666     // On webtorrent fallback, player may have been disposed
 667     if (!this.player.player_) return
 668
 669     const title = this.title ? videoInfo.name : undefined
 670
 671     const description = this.config.tracker.enabled && this.warningTitle
 672       ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
 673       : undefined
 674
 675     if (title || description) {
 676       this.player.dock({
 677         title,
 678         description
 679       })
 680     }
 681   }
 682
 683   private buildCSS () {
 684     const body = document.getElementById('custom-css')
 685
 686     if (this.bigPlayBackgroundColor) {
 687       body.style.setProperty('--embedBigPlayBackgroundColor', this.bigPlayBackgroundColor)
 688     }
 689
 690     if (this.foregroundColor) {
 691       body.style.setProperty('--embedForegroundColor', this.foregroundColor)
 692     }
 693   }
 694
 695   private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> {
 696     if (captionsResponse.ok) {
 697       const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
 698
 699       return data.map(c => ({
 700         label: peertubeTranslate(c.language.label, serverTranslations),
 701         language: c.language.id,
 702         src: window.location.origin + c.captionPath
 703       }))
 704     }
 705
 706     return []
 707   }
 708
 709   private loadPlaceholder (video: VideoDetails) {
 710     const placeholder = this.getPlaceholderElement()
 711
 712     const url = window.location.origin + video.previewPath
 713     placeholder.style.backgroundImage = `url("${url}")`
 714     placeholder.style.display = 'block'
 715   }
 716
 717   private removePlaceholder () {
 718     const placeholder = this.getPlaceholderElement()
 719     placeholder.style.display = 'none'
 720   }
 721
 722   private getPlaceholderElement () {
 723     return document.getElementById('placeholder-preview')
 724   }
 725
 726   private setHeadersFromTokens () {
 727     this.headers.set('Authorization', `${this.userTokens.tokenType} ${this.userTokens.accessToken}`)
 728   }
 729
 730   private removeTokensFromHeaders () {
 731     this.headers.delete('Authorization')
 732   }
 733
 734   private getResourceId () {
 735     const urlParts = window.location.pathname.split('/')
 736     return urlParts[ urlParts.length - 1 ]
 737   }
 738
 739   private isPlaylistEmbed () {
 740     return window.location.pathname.split('/')[1] === 'video-playlists'
 741   }
 742
 743   private async ensurePluginsAreLoaded (translations?: { [ id: string ]: string }) {
 744     if (this.config.plugin.registered.length === 0) return
 745
 746     for (const plugin of this.config.plugin.registered) {
 747       for (const key of Object.keys(plugin.clientScripts)) {
 748         const clientScript = plugin.clientScripts[key]
 749
 750         if (clientScript.scopes.includes('embed') === false) continue
 751
 752         const script = `/plugins/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`
 753
 754         if (this.loadedScripts.has(script)) continue
 755
 756         const pluginInfo = {
 757           plugin,
 758           clientScript: {
 759             script,
 760             scopes: clientScript.scopes
 761           },
 762           pluginType: PluginType.PLUGIN,
 763           isTheme: false
 764         }
 765
 766         await loadPlugin({
 767           hooks: this.peertubeHooks,
 768           pluginInfo,
 769           onSettingsScripts: () => undefined,
 770           peertubeHelpersFactory: _ => this.buildPeerTubeHelpers(translations)
 771         })
 772       }
 773     }
 774   }
 775
 776   private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers {
 777     function unimplemented (): any {
 778       throw new Error('This helper is not implemented in embed.')
 779     }
 780
 781     return {
 782       getBaseStaticRoute: unimplemented,
 783
 784       getBaseRouterRoute: unimplemented,
 785
 786       getSettings: unimplemented,
 787
 788       isLoggedIn: unimplemented,
 789       getAuthHeader: unimplemented,
 790
 791       notifier: {
 792         info: unimplemented,
 793         error: unimplemented,
 794         success: unimplemented
 795       },
 796
 797       showModal: unimplemented,
 798
 799       getServerConfig: unimplemented,
 800
 801       markdownRenderer: {
 802         textMarkdownToHTML: unimplemented,
 803         enhancedMarkdownToHTML: unimplemented
 804       },
 805
 806       translate: (value: string) => {
 807         return Promise.resolve(peertubeTranslate(value, translations))
 808       }
 809     }
 810   }
 811
 812   private runHook <T> (hookName: ClientHookName, result?: T, params?: any): Promise<T> {
 813     return runHook(this.peertubeHooks, hookName, result, params)
 814   }
 815 }
 816
 817 PeerTubeEmbed.main()
 818   .catch(err => console.error('Cannot init embed.', err))