3 files changed, 159 insertions, 123 deletions

diff --git a/client/src/standalone/videos/shared/index.ts b/client/src/standalone/videos/shared/index.ts
index 928b8e270..dcc522ac6 100644
--- a/client/src/standalone/videos/shared/index.ts
+++ b/client/src/standalone/videos/shared/index.ts
@@ -2,7 +2,7 @@ export * from './auth-http'
 export * from './peertube-plugin'
 export * from './live-manager'
 export * from './player-html'
-export * from './player-manager-options'
+export * from './player-options-builder'
 export * from './playlist-fetcher'
 export * from './playlist-tracker'
 export * from './translations'
diff --git a/client/src/standalone/videos/shared/player-html.ts b/client/src/standalone/videos/shared/player-html.ts
index a0846d9d7..0defa0d70 100644
--- a/client/src/standalone/videos/shared/player-html.ts
+++ b/client/src/standalone/videos/shared/player-html.ts
@@ -1,5 +1,4 @@
 import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
-import { VideoDetails } from '../../../../../shared/models'
 import { logger } from '../../../root-helpers'
 import { Translations } from './translations'
 
@@ -59,7 +58,6 @@ export class PlayerHTML {
     const { incorrectPassword, translations } = options
     return new Promise((resolve) => {
 
-      this.removePlaceholder()
       this.wrapperElement.style.display = 'none'
 
       const translatedTitle = peertubeTranslate('This video is password protected', translations)
@@ -107,19 +105,6 @@ export class PlayerHTML {
     this.wrapperElement.style.display = 'block'
   }
 
-  buildPlaceholder (video: VideoDetails) {
-    const placeholder = this.getPlaceholderElement()
-
-    const url = window.location.origin + video.previewPath
-    placeholder.style.backgroundImage = `url("${url}")`
-    placeholder.style.display = 'block'
-  }
-
-  removePlaceholder () {
-    const placeholder = this.getPlaceholderElement()
-    placeholder.style.display = 'none'
-  }
-
   displayInformation (text: string, translations: Translations) {
     if (this.informationElement) this.removeInformation()
 
@@ -137,10 +122,6 @@ export class PlayerHTML {
     this.informationElement = undefined
   }
 
-  private getPlaceholderElement () {
-    return document.getElementById('placeholder-preview')
-  }
-
   private removeElement (element: HTMLElement) {
     element.parentElement.removeChild(element)
   }
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-options-builder.ts
index 3c7521bc2..8a4e32444 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-options-builder.ts
@@ -10,7 +10,7 @@ import {
   VideoState,
   VideoStreamingPlaylistType
 } from '../../../../../shared/models'
-import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode, VideoJSCaption } from '../../../assets/player'
+import { HLSOptions, PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions, PlayerMode, VideoJSCaption } from '../../../assets/player'
 import {
   getBoolOrDefault,
   getParamString,
@@ -27,7 +27,7 @@ import { PlaylistTracker } from './playlist-tracker'
 import { Translations } from './translations'
 import { VideoFetcher } from './video-fetcher'
 
-export class PlayerManagerOptions {
+export class PlayerOptionsBuilder {
   private autoplay: boolean
 
   private controls: boolean
@@ -141,10 +141,10 @@ export class PlayerManagerOptions {
 
       if (modeParam) {
         if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader'
-        else this.mode = 'webtorrent'
+        else this.mode = 'web-video'
       } else {
         if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader'
-        else this.mode = 'webtorrent'
+        else this.mode = 'web-video'
       }
     } catch (err) {
       logger.error('Cannot get params from URL.', err)
@@ -153,7 +153,47 @@ export class PlayerManagerOptions {
 
   // ---------------------------------------------------------------------------
 
-  async getPlayerOptions (options: {
+  getPlayerConstructorOptions (options: {
+    serverConfig: HTMLServerConfig
+    authorizationHeader: () => string
+  }): PeerTubePlayerContructorOptions {
+    const { serverConfig, authorizationHeader } = options
+
+    return {
+      controls: this.controls,
+      controlBar: this.controlBar,
+
+      muted: this.muted,
+      loop: this.loop,
+
+      playbackRate: this.playbackRate,
+
+      inactivityTimeout: 2500,
+      videoViewIntervalMs: 5000,
+      metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+
+      authorizationHeader,
+
+      playerElement: () => this.playerHTML.getPlayerElement(),
+      enableHotkeys: true,
+
+      peertubeLink: () => this.peertubeLink,
+      instanceName: serverConfig.instance.name,
+
+      theaterButton: false,
+
+      serverUrl: window.location.origin,
+      language: navigator.language,
+
+      pluginsManager: this.peertubePlugin.getPluginsManager(),
+
+      errorNotifier: () => {
+        // Empty, we don't have a notifier in the embed
+      }
+    }
+  }
+
+  async getPlayerLoadOptions (options: {
     video: VideoDetails
     captionsResponse: Response
 
@@ -161,39 +201,35 @@ export class PlayerManagerOptions {
 
     live?: LiveVideo
 
+    alreadyPlayed: boolean
     forceAutoplay: boolean
 
-    authorizationHeader: () => string
     videoFileToken: () => string
 
     videoPassword: () => string
     requiresPassword: boolean
 
-    serverConfig: HTMLServerConfig
-
-    autoplayFromPreviousVideo: boolean
-
     translations: Translations
 
-    playlistTracker?: PlaylistTracker
-    playNextPlaylistVideo?: () => any
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
-  }) {
+    playlist?: {
+      playlistTracker: PlaylistTracker
+      playNext: () => any
+      playPrevious: () => any
+      onVideoUpdate: (uuid: string) => any
+    }
+  }): Promise<PeerTubePlayerLoadOptions> {
     const {
       video,
       captionsResponse,
-      autoplayFromPreviousVideo,
       videoFileToken,
       videoPassword,
       requiresPassword,
       translations,
+      alreadyPlayed,
       forceAutoplay,
-      playlistTracker,
+      playlist,
       live,
-      storyboardsResponse,
-      authorizationHeader,
-      serverConfig
+      storyboardsResponse
     } = options
 
     const [ videoCaptions, storyboard ] = await Promise.all([
@@ -201,88 +237,56 @@ export class PlayerManagerOptions {
       this.buildStoryboard(storyboardsResponse)
     ])
 
-    const playerOptions: PeertubePlayerManagerOptions = {
-      common: {
-        // Autoplay in playlist mode
-        autoplay: autoplayFromPreviousVideo ? true : this.autoplay,
-        forceAutoplay,
-
-        controls: this.controls,
-        controlBar: this.controlBar,
-
-        muted: this.muted,
-        loop: this.loop,
-
-        p2pEnabled: this.p2pEnabled,
-
-        captions: videoCaptions.length !== 0,
-        subtitle: this.subtitle,
+    return {
+      mode: this.mode,
 
-        storyboard,
+      autoplay: forceAutoplay || alreadyPlayed || this.autoplay,
+      forceAutoplay,
 
-        startTime: playlistTracker
-          ? playlistTracker.getCurrentElement().startTimestamp
-          : this.startTime,
-        stopTime: playlistTracker
-          ? playlistTracker.getCurrentElement().stopTimestamp
-          : this.stopTime,
+      p2pEnabled: this.p2pEnabled,
 
-        playbackRate: this.playbackRate,
+      subtitle: this.subtitle,
 
-        videoCaptions,
-        inactivityTimeout: 2500,
-        videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
-        videoViewIntervalMs: 5000,
-        metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+      storyboard,
 
-        videoShortUUID: video.shortUUID,
-        videoUUID: video.uuid,
+      startTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().startTimestamp
+        : this.startTime,
+      stopTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().stopTimestamp
+        : this.stopTime,
 
-        playerElement: this.playerHTML.getPlayerElement(),
-        onPlayerElementChange: (element: HTMLVideoElement) => {
-          this.playerHTML.setPlayerElement(element)
-        },
+      videoCaptions,
+      videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
 
-        videoDuration: video.duration,
-        enableHotkeys: true,
+      videoShortUUID: video.shortUUID,
+      videoUUID: video.uuid,
 
-        peertubeLink: this.peertubeLink,
-        instanceName: serverConfig.instance.name,
+      duration: video.duration,
 
-        poster: window.location.origin + video.previewPath,
-        theaterButton: false,
+      poster: window.location.origin + video.previewPath,
 
-        serverUrl: window.location.origin,
-        language: navigator.language,
-        embedUrl: window.location.origin + video.embedPath,
-        embedTitle: video.name,
+      embedUrl: window.location.origin + video.embedPath,
+      embedTitle: video.name,
 
-        requiresUserAuth: videoRequiresUserAuth(video),
-        authorizationHeader,
-        videoFileToken,
+      requiresUserAuth: videoRequiresUserAuth(video),
+      videoFileToken,
 
-        requiresPassword,
-        videoPassword,
+      requiresPassword,
+      videoPassword,
 
-        errorNotifier: () => {
-          // Empty, we don't have a notifier in the embed
-        },
+      ...this.buildLiveOptions(video, live),
 
-        ...this.buildLiveOptions(video, live),
+      ...this.buildPlaylistOptions(playlist),
 
-        ...this.buildPlaylistOptions(options)
-      },
+      dock: this.buildDockOptions(video),
 
-      webtorrent: {
+      webVideo: {
         videoFiles: video.files
       },
 
-      ...this.buildP2PMediaLoaderOptions(video),
-
-      pluginsManager: this.peertubePlugin.getPluginsManager()
+      hls: this.buildHLSOptions(video)
     }
-
-    return playerOptions
   }
 
   private buildLiveOptions (video: VideoDetails, live: LiveVideo) {
@@ -308,15 +312,27 @@ export class PlayerManagerOptions {
     }
   }
 
-  private buildPlaylistOptions (options: {
-    playlistTracker?: PlaylistTracker
-    playNextPlaylistVideo?: () => any
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
+  private buildPlaylistOptions (options?: {
+    playlistTracker: PlaylistTracker
+    playNext: () => any
+    playPrevious: () => any
+    onVideoUpdate: (uuid: string) => any
   }) {
-    const { playlistTracker, playNextPlaylistVideo, playPreviousPlaylistVideo, onVideoUpdate } = options
+    if (!options) {
+      return {
+        nextVideo: {
+          enabled: false,
+          displayControlBarButton: false,
+          getVideoTitle: () => ''
+        },
+        previousVideo: {
+          enabled: false,
+          displayControlBarButton: false
+        }
+      }
+    }
 
-    if (!playlistTracker) return {}
+    const { playlistTracker, playNext, playPrevious, onVideoUpdate } = options
 
     return {
       playlist: {
@@ -332,27 +348,37 @@ export class PlayerManagerOptions {
         }
       },
 
-      nextVideo: () => playNextPlaylistVideo(),
-      hasNextVideo: () => playlistTracker.hasNextPlaylistElement(),
+      previousVideo: {
+        enabled: playlistTracker.hasPreviousPlaylistElement(),
+        handler: () => playPrevious(),
+        displayControlBarButton: true
+      },
+
+      nextVideo: {
+        enabled: playlistTracker.hasNextPlaylistElement(),
+        handler: () => playNext(),
+        getVideoTitle: () => playlistTracker.getNextPlaylistElement()?.video?.name,
+        displayControlBarButton: true
+      },
 
-      previousVideo: () => playPreviousPlaylistVideo(),
-      hasPreviousVideo: () => playlistTracker.hasPreviousPlaylistElement()
+      upnext: {
+        isEnabled: () => true,
+        isSuspended: () => false,
+        timeout: 0
+      }
     }
   }
 
-  private buildP2PMediaLoaderOptions (video: VideoDetails) {
-    if (this.mode !== 'p2p-media-loader') return {}
-
+  private buildHLSOptions (video: VideoDetails): HLSOptions {
     const hlsPlaylist = video.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+    if (!hlsPlaylist) return undefined
 
     return {
-      p2pMediaLoader: {
-        playlistUrl: hlsPlaylist.playlistUrl,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        trackerAnnounce: video.trackerUrls,
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
+      playlistUrl: hlsPlaylist.playlistUrl,
+      segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+      redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+      trackerAnnounce: video.trackerUrls,
+      videoFiles: hlsPlaylist.files
     }
   }
 
@@ -374,6 +400,35 @@ export class PlayerManagerOptions {
 
   // ---------------------------------------------------------------------------
 
+  private buildDockOptions (videoInfo: VideoDetails) {
+    if (!this.hasControls()) return undefined
+
+    const title = this.hasTitle()
+      ? videoInfo.name
+      : undefined
+
+    const description = this.hasWarningTitle() && this.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
+
+    return {
+      title,
+      description,
+      avatarUrl: title && avatar
+        ? avatar.path
+        : undefined
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
   private isP2PEnabled (config: HTMLServerConfig, video: Video) {
     const userP2PEnabled = getBoolOrDefault(
       peertubeLocalStorage.getItem(UserLocalStorageKeys.P2P_ENABLED),