1 files changed, 85 insertions, 143 deletions

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 6e37ce193..78b812ffd 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,7 +3,6 @@ import '../../assets/player/shared/dock/peertube-dock-component'
 import '../../assets/player/shared/dock/peertube-dock-plugin'
 import { PeerTubeServerError } from 'src/types'
 import videojs from 'video.js'
-import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
 import {
   HTMLServerConfig,
   ResultList,
@@ -13,7 +12,7 @@ import {
   VideoPlaylistElement,
   VideoState
 } from '../../../../shared/models'
-import { PeertubePlayerManager } from '../../assets/player'
+import { PeerTubePlayer } from '../../assets/player/peertube-player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
 import { getParamString, logger, videoRequiresFileToken } from '../../root-helpers'
 import { PeerTubeEmbedApi } from './embed-api'
@@ -21,7 +20,7 @@ import {
   AuthHTTP,
   LiveManager,
   PeerTubePlugin,
-  PlayerManagerOptions,
+  PlayerOptionsBuilder,
   PlaylistFetcher,
   PlaylistTracker,
   Translations,
@@ -36,17 +35,23 @@ export class PeerTubeEmbed {
   config: HTMLServerConfig
 
   private translationsPromise: Promise<{ [id: string]: string }>
-  private PeertubePlayerManagerModulePromise: Promise<any>
+  private PeerTubePlayerManagerModulePromise: Promise<any>
 
   private readonly http: AuthHTTP
   private readonly videoFetcher: VideoFetcher
   private readonly playlistFetcher: PlaylistFetcher
   private readonly peertubePlugin: PeerTubePlugin
   private readonly playerHTML: PlayerHTML
-  private readonly playerManagerOptions: PlayerManagerOptions
+  private readonly playerOptionsBuilder: PlayerOptionsBuilder
   private readonly liveManager: LiveManager
 
+  private peertubePlayer: PeerTubePlayer
+
   private playlistTracker: PlaylistTracker
+
+  private alreadyInitialized = false
+  private alreadyPlayed = false
+
   private videoPassword: string
   private requiresPassword: boolean
 
@@ -59,7 +64,7 @@ export class PeerTubeEmbed {
     this.playlistFetcher = new PlaylistFetcher(this.http)
     this.peertubePlugin = new PeerTubePlugin(this.http)
     this.playerHTML = new PlayerHTML(videoWrapperId)
-    this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
+    this.playerOptionsBuilder = new PlayerOptionsBuilder(this.playerHTML, this.videoFetcher, this.peertubePlugin)
     this.liveManager = new LiveManager(this.playerHTML)
     this.requiresPassword = false
 
@@ -81,14 +86,14 @@ export class PeerTubeEmbed {
   }
 
   getScope () {
-    return this.playerManagerOptions.getScope()
+    return this.playerOptionsBuilder.getScope()
   }
 
   // ---------------------------------------------------------------------------
 
   async init () {
     this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
-    this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
+    this.PeerTubePlayerManagerModulePromise = import('../../assets/player/peertube-player')
 
     // Issue when we parsed config from HTML, fallback to API
     if (!this.config) {
@@ -102,7 +107,7 @@ export class PeerTubeEmbed {
 
     if (!videoId) return
 
-    return this.loadVideoAndBuildPlayer({ uuid: videoId, autoplayFromPreviousVideo: false, forceAutoplay: false })
+    return this.loadVideoAndBuildPlayer({ uuid: videoId, forceAutoplay: false })
   }
 
   private async initPlaylist () {
@@ -137,7 +142,7 @@ export class PeerTubeEmbed {
   }
 
   private initializeApi () {
-    if (this.playerManagerOptions.hasAPIEnabled()) {
+    if (this.playerOptionsBuilder.hasAPIEnabled()) {
       if (this.api) {
         this.api.reInit()
         return
@@ -159,7 +164,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(next)
 
-    return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
+    return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, forceAutoplay: false })
   }
 
   async playPreviousPlaylistVideo () {
@@ -171,7 +176,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(previous)
 
-    await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
+    await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, forceAutoplay: false })
   }
 
   getCurrentPlaylistPosition () {
@@ -182,10 +187,9 @@ export class PeerTubeEmbed {
 
   private async loadVideoAndBuildPlayer (options: {
     uuid: string
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
+    const { uuid, forceAutoplay } = options
 
     try {
       const {
@@ -194,7 +198,7 @@ export class PeerTubeEmbed {
         storyboardsPromise
       } = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
 
-      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay })
+      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, forceAutoplay })
     } catch (err) {
 
       if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
@@ -206,20 +210,14 @@ export class PeerTubeEmbed {
     videoResponse: Response
     storyboardsPromise: Promise<Response>
     captionsPromise: Promise<Response>
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay } = options
-
-    this.resetPlayerElement()
+    const { videoResponse, captionsPromise, storyboardsPromise, forceAutoplay } = options
 
     const videoInfoPromise = videoResponse.json()
       .then(async (videoInfo: VideoDetails) => {
-        this.playerManagerOptions.loadParams(this.config, videoInfo)
+        this.playerOptionsBuilder.loadParams(this.config, videoInfo)
 
-        if (!autoplayFromPreviousVideo && !this.playerManagerOptions.hasAutoplay()) {
-          this.playerHTML.buildPlaceholder(videoInfo)
-        }
         const live = videoInfo.isLive
           ? await this.videoFetcher.loadLive(videoInfo)
           : undefined
@@ -235,89 +233,78 @@ export class PeerTubeEmbed {
       { video, live, videoFileToken },
       translations,
       captionsResponse,
-      storyboardsResponse,
-      PeertubePlayerManagerModule
+      storyboardsResponse
     ] = await Promise.all([
       videoInfoPromise,
       this.translationsPromise,
       captionsPromise,
       storyboardsPromise,
-      this.PeertubePlayerManagerModulePromise
+      this.buildPlayerIfNeeded()
     ])
 
-    await this.peertubePlugin.loadPlugins(this.config, translations)
+    // If already played, we are in a playlist so we don't want to display the poster between videos
+    if (!this.alreadyPlayed) {
+      this.peertubePlayer.setPoster(window.location.origin + video.previewPath)
+    }
 
-    const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
+    const playlist = this.playlistTracker
+      ? {
+        onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, forceAutoplay: false }),
 
-    const playerOptions = await this.playerManagerOptions.getPlayerOptions({
+        playlistTracker: this.playlistTracker,
+        playNext: () => this.playNextPlaylistVideo(),
+        playPrevious: () => this.playPreviousPlaylistVideo()
+      }
+      : undefined
+
+    const loadOptions = await this.playerOptionsBuilder.getPlayerLoadOptions({
       video,
       captionsResponse,
-      autoplayFromPreviousVideo,
       translations,
-      serverConfig: this.config,
 
       storyboardsResponse,
 
-      authorizationHeader: () => this.http.getHeaderTokenValue(),
       videoFileToken: () => videoFileToken,
       videoPassword: () => this.videoPassword,
       requiresPassword: this.requiresPassword,
 
-      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
-
-      playlistTracker: this.playlistTracker,
-      playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
-      playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
+      playlist,
 
       live,
-      forceAutoplay
+      forceAutoplay,
+      alreadyPlayed: this.alreadyPlayed
     })
+    await this.peertubePlayer.load(loadOptions)
 
-    this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), playerOptions, (player: videojs.Player) => {
-      this.player = player
-    })
+    if (!this.alreadyInitialized) {
+      this.player = this.peertubePlayer.getPlayer();
 
-    this.player.on('customError', (event: any, data: any) => {
-      const message = data?.err?.message || ''
-      if (!message.includes('from xs param')) return
+      (window as any)['videojsPlayer'] = this.player
 
-      this.player.dispose()
-      this.playerHTML.removePlayerElement()
-      this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
-    });
+      this.buildCSS()
+      this.initializeApi()
+    }
 
-    (window as any)['videojsPlayer'] = this.player
+    this.alreadyInitialized = true
 
-    this.buildCSS()
-    this.buildPlayerDock(video)
-    this.initializeApi()
+    this.player.one('play', () => {
+      this.alreadyPlayed = true
+    })
 
-    this.playerHTML.removePlaceholder()
     if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
 
-    if (this.isPlaylistEmbed()) {
-      await this.buildPlayerPlaylistUpnext()
-
-      this.player.playlist().updateSelected()
-
-      this.player.on('stopped', () => {
-        this.playNextPlaylistVideo()
-      })
-    }
-
     if (video.isLive) {
       this.liveManager.listenForChanges({
         video,
         onPublishedVideo: () => {
           this.liveManager.stopListeningForChanges(video)
-          this.loadVideoAndBuildPlayer({ uuid: video.uuid, autoplayFromPreviousVideo: false, forceAutoplay: true })
+          this.loadVideoAndBuildPlayer({ uuid: video.uuid, forceAutoplay: true })
         }
       })
 
       if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
         this.liveManager.displayInfo({ state: video.state.id, translations })
-
-        this.disablePlayer()
+        this.peertubePlayer.disable()
       } else {
         this.correctlyHandleLiveEnding(translations)
       }
@@ -326,74 +313,15 @@ export class PeerTubeEmbed {
     this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
   }
 
-  private resetPlayerElement () {
-    if (this.player) {
-      this.player.dispose()
-      this.player = undefined
-    }
-
-    const playerElement = document.createElement('video')
-    playerElement.className = 'video-js vjs-peertube-skin'
-    playerElement.setAttribute('playsinline', 'true')
-
-    this.playerHTML.setPlayerElement(playerElement)
-    this.playerHTML.addPlayerElementToDOM()
-  }
-
-  private async buildPlayerPlaylistUpnext () {
-    const translations = await this.translationsPromise
-
-    this.player.upnext({
-      timeout: 10000, // 10s
-      headText: peertubeTranslate('Up Next', translations),
-      cancelText: peertubeTranslate('Cancel', translations),
-      suspendedText: peertubeTranslate('Autoplay is suspended', translations),
-      getTitle: () => this.playlistTracker.nextVideoTitle(),
-      next: () => this.playNextPlaylistVideo(),
-      condition: () => !!this.playlistTracker.getNextPlaylistElement(),
-      suspended: () => false
-    })
-  }
-
-  private buildPlayerDock (videoInfo: VideoDetails) {
-    if (!this.playerManagerOptions.hasControls()) return
-
-    // On webtorrent fallback, player may have been disposed
-    if (!this.player.player_) return
-
-    const title = this.playerManagerOptions.hasTitle()
-      ? videoInfo.name
-      : undefined
-
-    const description = this.playerManagerOptions.hasWarningTitle() && this.playerManagerOptions.hasP2PEnabled()
-      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
-      : undefined
-
-    if (!title && !description) return
-
-    const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
-    const avatar = availableAvatars.length !== 0
-      ? availableAvatars[0]
-      : undefined
-
-    this.player.peertubeDock({
-      title,
-      description,
-      avatarUrl: title && avatar
-        ? avatar.path
-        : undefined
-    })
-  }
-
   private buildCSS () {
     const body = document.getElementById('custom-css')
 
-    if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
-      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
+    if (this.playerOptionsBuilder.hasBigPlayBackgroundColor()) {
+      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerOptionsBuilder.getBigPlayBackgroundColor())
     }
 
-    if (this.playerManagerOptions.hasForegroundColor()) {
-      body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
+    if (this.playerOptionsBuilder.hasForegroundColor()) {
+      body.style.setProperty('--embedForegroundColor', this.playerOptionsBuilder.getForegroundColor())
     }
   }
 
@@ -415,23 +343,10 @@ export class PeerTubeEmbed {
       // Display the live ended information
       this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations })
 
-      this.disablePlayer()
+      this.peertubePlayer.disable()
     })
   }
 
-  private disablePlayer () {
-    if (this.player.isFullscreen()) {
-      this.player.exitFullscreen()
-    }
-
-    // Disable player
-    this.player.hasStarted(false)
-    this.player.removeClass('vjs-has-autoplay')
-    this.player.bigPlayButton.hide();
-
-    (this.player.el() as HTMLElement).style.pointerEvents = 'none'
-  }
-
   private async handlePasswordError (err: PeerTubeServerError) {
     let incorrectPassword: boolean = null
     if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
@@ -447,6 +362,33 @@ export class PeerTubeEmbed {
     return true
   }
 
+  private async buildPlayerIfNeeded () {
+    if (this.peertubePlayer) {
+      this.peertubePlayer.enable()
+
+      return
+    }
+
+    const playerElement = document.createElement('video')
+    playerElement.className = 'video-js vjs-peertube-skin'
+    playerElement.setAttribute('playsinline', 'true')
+
+    this.playerHTML.setPlayerElement(playerElement)
+    this.playerHTML.addPlayerElementToDOM()
+
+    const [ { PeerTubePlayer } ] = await Promise.all([
+      this.PeerTubePlayerManagerModulePromise,
+      this.peertubePlugin.loadPlugins(this.config, await this.translationsPromise)
+    ])
+
+    const constructorOptions = this.playerOptionsBuilder.getPlayerConstructorOptions({
+      serverConfig: this.config,
+      authorizationHeader: () => this.http.getHeaderTokenValue()
+    })
+    this.peertubePlayer = new PeerTubePlayer(constructorOptions)
+
+    this.player = this.peertubePlayer.getPlayer()
+  }
 }
 
 PeerTubeEmbed.main()