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 {
   5   HTMLServerConfig,
   6   HttpStatusCode,
   7   OAuth2ErrorCode,
   8   ResultList,
   9   UserRefreshToken,
  10   Video,
  11   VideoCaption,
  12   VideoDetails,
  13   VideoPlaylist,
  14   VideoPlaylistElement,
  15   VideoStreamingPlaylistType
  16 } from '../../../../shared/models'
  17 import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
  18 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
  19 import { TranslationsManager } from '../../assets/player/translations-manager'
  20 import { isP2PEnabled } from '../../assets/player/utils'
  21 import { getBoolOrDefault } from '../../root-helpers/local-storage-utils'
  22 import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
  23 import { PluginsManager } from '../../root-helpers/plugins-manager'
  24 import { UserLocalStorageKeys, UserTokens } from '../../root-helpers/users'
  25 import { objectToUrlEncoded } from '../../root-helpers/utils'
  26 import { RegisterClientHelpers } from '../../types/register-client-option.model'
  27 import { PeerTubeEmbedApi } from './embed-api'
  28
  29 type Translations = { [ id: string ]: string }
  30
  31 export class PeerTubeEmbed {
  32   playerElement: HTMLVideoElement
  33   player: videojs.Player
  34   api: PeerTubeEmbedApi = null
  35
  36   autoplay: boolean
  37   controls: boolean
  38   muted: boolean
  39   loop: boolean
  40   subtitle: string
  41   enableApi = false
  42   startTime: number | string = 0
  43   stopTime: number | string
  44
  45   title: boolean
  46   warningTitle: boolean
  47   peertubeLink: boolean
  48   bigPlayBackgroundColor: string
  49   foregroundColor: string
  50
  51   mode: PlayerMode
  52   scope = 'peertube'
  53
  54   userTokens: UserTokens
  55   headers = new Headers()
  56   LOCAL_STORAGE_OAUTH_CLIENT_KEYS = {
  57     CLIENT_ID: 'client_id',
  58     CLIENT_SECRET: 'client_secret'
  59   }
  60
  61   config: HTMLServerConfig
  62
  63   private translationsPromise: Promise<{ [id: string]: string }>
  64   private PeertubePlayerManagerModulePromise: Promise<any>
  65
  66   private playlist: VideoPlaylist
  67   private playlistElements: VideoPlaylistElement[]
  68   private currentPlaylistElement: VideoPlaylistElement
  69
  70   private readonly wrapperElement: HTMLElement
  71
  72   private pluginsManager: PluginsManager
  73
  74   constructor (private readonly videoWrapperId: string) {
  75     this.wrapperElement = document.getElementById(this.videoWrapperId)
  76
  77     try {
  78       this.config = JSON.parse(window['PeerTubeServerConfig'])
  79     } catch (err) {
  80       console.error('Cannot parse HTML config.', err)
  81     }
  82   }
  83
  84   static async main () {
  85     const videoContainerId = 'video-wrapper'
  86     const embed = new PeerTubeEmbed(videoContainerId)
  87     await embed.init()
  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               UserTokens.flushLocalStorage(peertubeLocalStorage)
 125               this.removeTokensFromHeaders()
 126
 127               return resolve()
 128             }
 129
 130             this.userTokens.accessToken = obj.access_token
 131             this.userTokens.refreshToken = obj.refresh_token
 132             UserTokens.saveToLocalStorage(peertubeLocalStorage, this.userTokens)
 133
 134             this.setHeadersFromTokens()
 135
 136             resolve()
 137           }).catch((refreshTokenError: any) => {
 138             reject(refreshTokenError)
 139           })
 140         })
 141
 142         return refreshingTokenPromise
 143           .catch(() => {
 144             UserTokens.flushLocalStorage(peertubeLocalStorage)
 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     this.userTokens = UserTokens.getUserTokens(peertubeLocalStorage)
 265     await this.initCore()
 266   }
 267
 268   private initializeApi () {
 269     if (!this.enableApi) return
 270
 271     this.api = new PeerTubeEmbedApi(this)
 272     this.api.initialize()
 273   }
 274
 275   private loadParams (video: VideoDetails) {
 276     try {
 277       const params = new URL(window.location.toString()).searchParams
 278
 279       this.autoplay = this.getParamToggle(params, 'autoplay', false)
 280       this.controls = this.getParamToggle(params, 'controls', true)
 281       this.muted = this.getParamToggle(params, 'muted', undefined)
 282       this.loop = this.getParamToggle(params, 'loop', false)
 283       this.title = this.getParamToggle(params, 'title', true)
 284       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
 285       this.warningTitle = this.getParamToggle(params, 'warningTitle', true)
 286       this.peertubeLink = this.getParamToggle(params, 'peertubeLink', true)
 287
 288       this.scope = this.getParamString(params, 'scope', this.scope)
 289       this.subtitle = this.getParamString(params, 'subtitle')
 290       this.startTime = this.getParamString(params, 'start')
 291       this.stopTime = this.getParamString(params, 'stop')
 292
 293       this.bigPlayBackgroundColor = this.getParamString(params, 'bigPlayBackgroundColor')
 294       this.foregroundColor = this.getParamString(params, 'foregroundColor')
 295
 296       const modeParam = this.getParamString(params, 'mode')
 297
 298       if (modeParam) {
 299         if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader'
 300         else this.mode = 'webtorrent'
 301       } else {
 302         if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader'
 303         else this.mode = 'webtorrent'
 304       }
 305     } catch (err) {
 306       console.error('Cannot get params from URL.', err)
 307     }
 308   }
 309
 310   private async loadAllPlaylistVideos (playlistId: string, baseResult: ResultList<VideoPlaylistElement>) {
 311     let elements = baseResult.data
 312     let total = baseResult.total
 313     let i = 0
 314
 315     while (total > elements.length && i < 10) {
 316       const result = await this.loadPlaylistElements(playlistId, elements.length)
 317
 318       const json = await result.json()
 319       total = json.total
 320
 321       elements = elements.concat(json.data)
 322       i++
 323     }
 324
 325     if (i === 10) {
 326       console.error('Cannot fetch all playlists elements, there are too many!')
 327     }
 328
 329     return elements
 330   }
 331
 332   private async loadPlaylist (playlistId: string) {
 333     const playlistPromise = this.loadPlaylistInfo(playlistId)
 334     const playlistElementsPromise = this.loadPlaylistElements(playlistId)
 335
 336     let playlistResponse: Response
 337     let isResponseOk: boolean
 338
 339     try {
 340       playlistResponse = await playlistPromise
 341       isResponseOk = playlistResponse.status === HttpStatusCode.OK_200
 342     } catch (err) {
 343       console.error(err)
 344       isResponseOk = false
 345     }
 346
 347     if (!isResponseOk) {
 348       const serverTranslations = await this.translationsPromise
 349
 350       if (playlistResponse?.status === HttpStatusCode.NOT_FOUND_404) {
 351         this.playlistNotFound(serverTranslations)
 352         return undefined
 353       }
 354
 355       this.playlistFetchError(serverTranslations)
 356       return undefined
 357     }
 358
 359     return { playlistResponse, videosResponse: await playlistElementsPromise }
 360   }
 361
 362   private async loadVideo (videoId: string) {
 363     const videoPromise = this.loadVideoInfo(videoId)
 364
 365     let videoResponse: Response
 366     let isResponseOk: boolean
 367
 368     try {
 369       videoResponse = await videoPromise
 370       isResponseOk = videoResponse.status === HttpStatusCode.OK_200
 371     } catch (err) {
 372       console.error(err)
 373
 374       isResponseOk = false
 375     }
 376
 377     if (!isResponseOk) {
 378       const serverTranslations = await this.translationsPromise
 379
 380       if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
 381         this.videoNotFound(serverTranslations)
 382         return undefined
 383       }
 384
 385       this.videoFetchError(serverTranslations)
 386       return undefined
 387     }
 388
 389     const captionsPromise = this.loadVideoCaptions(videoId)
 390
 391     return { captionsPromise, videoResponse }
 392   }
 393
 394   private async buildPlaylistManager () {
 395     const translations = await this.translationsPromise
 396
 397     this.player.upnext({
 398       timeout: 10000, // 10s
 399       headText: peertubeTranslate('Up Next', translations),
 400       cancelText: peertubeTranslate('Cancel', translations),
 401       suspendedText: peertubeTranslate('Autoplay is suspended', translations),
 402       getTitle: () => this.nextVideoTitle(),
 403       next: () => this.playNextVideo(),
 404       condition: () => !!this.getNextPlaylistElement(),
 405       suspended: () => false
 406     })
 407   }
 408
 409   private async loadVideoAndBuildPlayer (uuid: string) {
 410     const res = await this.loadVideo(uuid)
 411     if (res === undefined) return
 412
 413     return this.buildVideoPlayer(res.videoResponse, res.captionsPromise)
 414   }
 415
 416   private nextVideoTitle () {
 417     const next = this.getNextPlaylistElement()
 418     if (!next) return ''
 419
 420     return next.video.name
 421   }
 422
 423   private getNextPlaylistElement (position?: number): VideoPlaylistElement {
 424     if (!position) position = this.currentPlaylistElement.position + 1
 425
 426     if (position > this.playlist.videosLength) {
 427       return undefined
 428     }
 429
 430     const next = this.playlistElements.find(e => e.position === position)
 431
 432     if (!next || !next.video) {
 433       return this.getNextPlaylistElement(position + 1)
 434     }
 435
 436     return next
 437   }
 438
 439   private getPreviousPlaylistElement (position?: number): VideoPlaylistElement {
 440     if (!position) position = this.currentPlaylistElement.position - 1
 441
 442     if (position < 1) {
 443       return undefined
 444     }
 445
 446     const prev = this.playlistElements.find(e => e.position === position)
 447
 448     if (!prev || !prev.video) {
 449       return this.getNextPlaylistElement(position - 1)
 450     }
 451
 452     return prev
 453   }
 454
 455   private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
 456     let alreadyHadPlayer = false
 457
 458     if (this.player) {
 459       this.player.dispose()
 460       alreadyHadPlayer = true
 461     }
 462
 463     this.playerElement = document.createElement('video')
 464     this.playerElement.className = 'video-js vjs-peertube-skin'
 465     this.playerElement.setAttribute('playsinline', 'true')
 466     this.wrapperElement.appendChild(this.playerElement)
 467
 468     // Issue when we parsed config from HTML, fallback to API
 469     if (!this.config) {
 470       this.config = await this.refreshFetch('/api/v1/config')
 471         .then(res => res.json())
 472     }
 473
 474     const videoInfoPromise = videoResponse.json()
 475       .then((videoInfo: VideoDetails) => {
 476         this.loadParams(videoInfo)
 477
 478         if (!alreadyHadPlayer && !this.autoplay) this.loadPlaceholder(videoInfo)
 479
 480         return videoInfo
 481       })
 482
 483     const [ videoInfoTmp, serverTranslations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
 484       videoInfoPromise,
 485       this.translationsPromise,
 486       captionsPromise,
 487       this.PeertubePlayerManagerModulePromise
 488     ])
 489
 490     await this.loadPlugins(serverTranslations)
 491
 492     const videoInfo: VideoDetails = videoInfoTmp
 493
 494     const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
 495     const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
 496
 497     const playlistPlugin = this.currentPlaylistElement
 498       ? {
 499         elements: this.playlistElements,
 500         playlist: this.playlist,
 501
 502         getCurrentPosition: () => this.currentPlaylistElement.position,
 503
 504         onItemClicked: (videoPlaylistElement: VideoPlaylistElement) => {
 505           this.currentPlaylistElement = videoPlaylistElement
 506
 507           this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
 508               .catch(err => console.error(err))
 509         }
 510       }
 511       : undefined
 512
 513     const options: PeertubePlayerManagerOptions = {
 514       common: {
 515         // Autoplay in playlist mode
 516         autoplay: alreadyHadPlayer ? true : this.autoplay,
 517         controls: this.controls,
 518         muted: this.muted,
 519         loop: this.loop,
 520
 521         p2pEnabled: this.isP2PEnabled(videoInfo),
 522
 523         captions: videoCaptions.length !== 0,
 524         subtitle: this.subtitle,
 525
 526         startTime: this.playlist ? this.currentPlaylistElement.startTimestamp : this.startTime,
 527         stopTime: this.playlist ? this.currentPlaylistElement.stopTimestamp : this.stopTime,
 528
 529         nextVideo: this.playlist ? () => this.playNextVideo() : undefined,
 530         hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined,
 531
 532         previousVideo: this.playlist ? () => this.playPreviousVideo() : undefined,
 533         hasPreviousVideo: this.playlist ? () => !!this.getPreviousPlaylistElement() : undefined,
 534
 535         playlist: playlistPlugin,
 536
 537         videoCaptions,
 538         inactivityTimeout: 2500,
 539         videoViewUrl: this.getVideoUrl(videoInfo.uuid) + '/views',
 540         videoShortUUID: videoInfo.shortUUID,
 541         videoUUID: videoInfo.uuid,
 542
 543         isLive: videoInfo.isLive,
 544
 545         playerElement: this.playerElement,
 546         onPlayerElementChange: (element: HTMLVideoElement) => {
 547           this.playerElement = element
 548         },
 549
 550         videoDuration: videoInfo.duration,
 551         enableHotkeys: true,
 552         peertubeLink: this.peertubeLink,
 553         poster: window.location.origin + videoInfo.previewPath,
 554         theaterButton: false,
 555
 556         serverUrl: window.location.origin,
 557         language: navigator.language,
 558         embedUrl: window.location.origin + videoInfo.embedPath,
 559         embedTitle: videoInfo.name
 560       },
 561
 562       webtorrent: {
 563         videoFiles: videoInfo.files
 564       },
 565
 566       pluginsManager: this.pluginsManager
 567     }
 568
 569     if (this.mode === 'p2p-media-loader') {
 570       const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
 571
 572       Object.assign(options, {
 573         p2pMediaLoader: {
 574           playlistUrl: hlsPlaylist.playlistUrl,
 575           segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
 576           redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
 577           trackerAnnounce: videoInfo.trackerUrls,
 578           videoFiles: hlsPlaylist.files
 579         } as P2PMediaLoaderOptions
 580       })
 581     }
 582
 583     this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => {
 584       this.player = player
 585     })
 586
 587     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 588
 589     window['videojsPlayer'] = this.player
 590
 591     this.buildCSS()
 592
 593     this.buildDock(videoInfo)
 594
 595     this.initializeApi()
 596
 597     this.removePlaceholder()
 598
 599     if (this.isPlaylistEmbed()) {
 600       await this.buildPlaylistManager()
 601
 602       this.player.playlist().updateSelected()
 603
 604       this.player.on('stopped', () => {
 605         this.playNextVideo()
 606       })
 607     }
 608
 609     this.pluginsManager.runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video: videoInfo })
 610   }
 611
 612   private async initCore () {
 613     if (this.userTokens) this.setHeadersFromTokens()
 614
 615     this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
 616     this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
 617
 618     let videoId: string
 619
 620     if (this.isPlaylistEmbed()) {
 621       const playlistId = this.getResourceId()
 622       const res = await this.loadPlaylist(playlistId)
 623       if (!res) return undefined
 624
 625       this.playlist = await res.playlistResponse.json()
 626
 627       const playlistElementResult = await res.videosResponse.json()
 628       this.playlistElements = await this.loadAllPlaylistVideos(playlistId, playlistElementResult)
 629
 630       const params = new URL(window.location.toString()).searchParams
 631       const playlistPositionParam = this.getParamString(params, 'playlistPosition')
 632
 633       let position = 1
 634
 635       if (playlistPositionParam) {
 636         position = parseInt(playlistPositionParam + '', 10)
 637       }
 638
 639       this.currentPlaylistElement = this.playlistElements.find(e => e.position === position)
 640       if (!this.currentPlaylistElement || !this.currentPlaylistElement.video) {
 641         console.error('Current playlist element is not valid.', this.currentPlaylistElement)
 642         this.currentPlaylistElement = this.getNextPlaylistElement()
 643       }
 644
 645       if (!this.currentPlaylistElement) {
 646         console.error('This playlist does not have any valid element.')
 647         const serverTranslations = await this.translationsPromise
 648         this.playlistFetchError(serverTranslations)
 649         return
 650       }
 651
 652       videoId = this.currentPlaylistElement.video.uuid
 653     } else {
 654       videoId = this.getResourceId()
 655     }
 656
 657     return this.loadVideoAndBuildPlayer(videoId)
 658   }
 659
 660   private handleError (err: Error, translations?: { [ id: string ]: string }) {
 661     if (err.message.includes('from xs param')) {
 662       this.player.dispose()
 663       this.playerElement = null
 664       this.displayError('This video is not available because the remote instance is not responding.', translations)
 665
 666     }
 667   }
 668
 669   private buildDock (videoInfo: VideoDetails) {
 670     if (!this.controls) return
 671
 672     // On webtorrent fallback, player may have been disposed
 673     if (!this.player.player_) return
 674
 675     const title = this.title ? videoInfo.name : undefined
 676
 677     const description = this.warningTitle && this.isP2PEnabled(videoInfo)
 678       ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
 679       : undefined
 680
 681     if (title || description) {
 682       this.player.dock({
 683         title,
 684         description
 685       })
 686     }
 687   }
 688
 689   private buildCSS () {
 690     const body = document.getElementById('custom-css')
 691
 692     if (this.bigPlayBackgroundColor) {
 693       body.style.setProperty('--embedBigPlayBackgroundColor', this.bigPlayBackgroundColor)
 694     }
 695
 696     if (this.foregroundColor) {
 697       body.style.setProperty('--embedForegroundColor', this.foregroundColor)
 698     }
 699   }
 700
 701   private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> {
 702     if (captionsResponse.ok) {
 703       const { data } = await captionsResponse.json()
 704
 705       return data.map((c: VideoCaption) => ({
 706         label: peertubeTranslate(c.language.label, serverTranslations),
 707         language: c.language.id,
 708         src: window.location.origin + c.captionPath
 709       }))
 710     }
 711
 712     return []
 713   }
 714
 715   private loadPlaceholder (video: VideoDetails) {
 716     const placeholder = this.getPlaceholderElement()
 717
 718     const url = window.location.origin + video.previewPath
 719     placeholder.style.backgroundImage = `url("${url}")`
 720     placeholder.style.display = 'block'
 721   }
 722
 723   private removePlaceholder () {
 724     const placeholder = this.getPlaceholderElement()
 725     placeholder.style.display = 'none'
 726   }
 727
 728   private getPlaceholderElement () {
 729     return document.getElementById('placeholder-preview')
 730   }
 731
 732   private setHeadersFromTokens () {
 733     this.headers.set('Authorization', `${this.userTokens.tokenType} ${this.userTokens.accessToken}`)
 734   }
 735
 736   private removeTokensFromHeaders () {
 737     this.headers.delete('Authorization')
 738   }
 739
 740   private getResourceId () {
 741     const urlParts = window.location.pathname.split('/')
 742     return urlParts[urlParts.length - 1]
 743   }
 744
 745   private isPlaylistEmbed () {
 746     return window.location.pathname.split('/')[1] === 'video-playlists'
 747   }
 748
 749   private loadPlugins (translations?: { [ id: string ]: string }) {
 750     this.pluginsManager = new PluginsManager({
 751       peertubeHelpersFactory: _ => this.buildPeerTubeHelpers(translations)
 752     })
 753
 754     this.pluginsManager.loadPluginsList(this.config)
 755
 756     return this.pluginsManager.ensurePluginsAreLoaded('embed')
 757   }
 758
 759   private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers {
 760     const unimplemented = () => {
 761       throw new Error('This helper is not implemented in embed.')
 762     }
 763
 764     return {
 765       getBaseStaticRoute: unimplemented,
 766       getBaseRouterRoute: unimplemented,
 767       getBasePluginClientPath: unimplemented,
 768
 769       getSettings: unimplemented,
 770
 771       isLoggedIn: unimplemented,
 772       getAuthHeader: unimplemented,
 773
 774       notifier: {
 775         info: unimplemented,
 776         error: unimplemented,
 777         success: unimplemented
 778       },
 779
 780       showModal: unimplemented,
 781
 782       getServerConfig: unimplemented,
 783
 784       markdownRenderer: {
 785         textMarkdownToHTML: unimplemented,
 786         enhancedMarkdownToHTML: unimplemented
 787       },
 788
 789       translate: (value: string) => Promise.resolve(peertubeTranslate(value, translations))
 790     }
 791   }
 792
 793   private isP2PEnabled (video: Video) {
 794     const userP2PEnabled = getBoolOrDefault(
 795       peertubeLocalStorage.getItem(UserLocalStorageKeys.P2P_ENABLED),
 796       this.config.defaults.p2p.embed.enabled
 797     )
 798
 799     return isP2PEnabled(video, this.config, userP2PEnabled)
 800   }
 801 }
 802
 803 PeerTubeEmbed.main()
 804   .catch(err => {
 805     (window as any).displayIncompatibleBrowser()
 806
 807     console.error('Cannot init embed.', err)
 808   })