Remove webtorrent support from client

6 files changed, 251 insertions, 281 deletions

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index a99f1edae..cdda122b2 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -72,15 +72,12 @@ export class PeerTubeEmbedApi {
   private setResolution (resolutionId: number) {
     logger.info(`Set resolution ${resolutionId}`)
 
-    if (this.isWebtorrent()) {
-      if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
-
-      this.embed.player.webtorrent().changeQuality(resolutionId)
-
+    if (this.isWebVideo() && resolutionId === -1) {
+      logger.error('Auto resolution cannot be set in web video player mode')
       return
     }
 
-    this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
+    this.embed.player.peertubeResolutions().select({ id: resolutionId, fireCallback: true })
   }
 
   private getCaptions (): PeerTubeTextTrack[] {
@@ -152,8 +149,8 @@ export class PeerTubeEmbedApi {
     // ---------------------------------------------------------------------------
 
     // PeerTube specific capabilities
-    this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
-    this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
+    this.embed.player.peertubeResolutions().on('resolutions-added', () => this.loadResolutions())
+    this.embed.player.peertubeResolutions().on('resolutions-changed', () => this.loadResolutions())
 
     this.loadResolutions()
 
@@ -193,7 +190,7 @@ export class PeerTubeEmbedApi {
     })
   }
 
-  private isWebtorrent () {
-    return !!this.embed.player.webtorrent
+  private isWebVideo () {
+    return !!this.embed.player.webVideo
   }
 }
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index a74bb4cee..e2dc02b60 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -44,11 +44,11 @@
     <div id="video-password-block">
       <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
       <h1 id="video-password-title"></h1>
-      
+
       <div id="video-password-content"></div>
-      
+
       <form id="video-password-form">
-        <input type="password" id="video-password-input" name="video-password" required>
+        <input type="password" id="video-password-input" name="video-password" autocomplete="user-password" required>
         <button type="submit" id="video-password-submit"> </button>
       </form>
 
@@ -60,8 +60,6 @@
 
     <div id="video-wrapper"></div>
 
-    <div id="placeholder-preview"></div>
-
     <script type="text/javascript">
       // Can be called in embed.ts
       window.displayIncompatibleBrowser = function () {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 6e37ce193..5c68aaaf2 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,75 @@ 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)
+    this.peertubePlayer.setPoster(window.location.origin + video.previewPath)
+
+    const playlist = this.playlistTracker
+      ? {
+        onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, forceAutoplay: false }),
 
-    const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
+        playlistTracker: this.playlistTracker,
+        playNext: () => this.playNextPlaylistVideo(),
+        playPrevious: () => this.playPreviousPlaylistVideo()
+      }
+      : undefined
 
-    const playerOptions = await this.playerManagerOptions.getPlayerOptions({
+    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 +310,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 +340,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 +359,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()
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),