client/src/standalone/videos/embed.ts

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