18 files changed, 460 insertions, 288 deletions

diff --git a/client/src/standalone/player/.npmignore b/client/src/standalone/embed-player-api/.npmignore
index 870b6315b..870b6315b 100644
--- a/client/src/standalone/player/.npmignore
+++ b/client/src/standalone/embed-player-api/.npmignore
diff --git a/client/src/standalone/player/README.md b/client/src/standalone/embed-player-api/README.md
index 7b47e8f02..7b47e8f02 100644
--- a/client/src/standalone/player/README.md
+++ b/client/src/standalone/embed-player-api/README.md
diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/embed-player-api/definitions.ts
index 495f1a98c..495f1a98c 100644
--- a/client/src/standalone/player/definitions.ts
+++ b/client/src/standalone/embed-player-api/definitions.ts
diff --git a/client/src/standalone/player/events.ts b/client/src/standalone/embed-player-api/events.ts
index 77d21c78c..77d21c78c 100644
--- a/client/src/standalone/player/events.ts
+++ b/client/src/standalone/embed-player-api/events.ts
diff --git a/client/src/standalone/player/package.json b/client/src/standalone/embed-player-api/package.json
index b549fbf52..b549fbf52 100644
--- a/client/src/standalone/player/package.json
+++ b/client/src/standalone/embed-player-api/package.json
diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/embed-player-api/player.ts
index 75487258b..75487258b 100644
--- a/client/src/standalone/player/player.ts
+++ b/client/src/standalone/embed-player-api/player.ts
diff --git a/client/src/standalone/player/tsconfig.json b/client/src/standalone/embed-player-api/tsconfig.json
index eecc63dfb..eecc63dfb 100644
--- a/client/src/standalone/player/tsconfig.json
+++ b/client/src/standalone/embed-player-api/tsconfig.json
diff --git a/client/src/standalone/player/webpack.config.js b/client/src/standalone/embed-player-api/webpack.config.js
index 48d350edf..48d350edf 100644
--- a/client/src/standalone/player/webpack.config.js
+++ b/client/src/standalone/embed-player-api/webpack.config.js
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index a99f1edae..6227c378e 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -1,7 +1,7 @@
 import './embed.scss'
 import * as Channel from 'jschannel'
 import { logger } from '../../root-helpers'
-import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
+import { PeerTubeResolution, PeerTubeTextTrack } from '../embed-player-api/definitions'
 import { PeerTubeEmbed } from './embed'
 
 /**
@@ -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 32bf5f655..e2dc02b60 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -41,9 +41,24 @@
       <div id="error-content"></div>
     </div>
 
-    <div id="video-wrapper"></div>
+    <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" autocomplete="user-password" required>
+        <button type="submit" id="video-password-submit"> </button>
+      </form>
 
-    <div id="placeholder-preview"></div>
+      <div id="video-password-error"></div>
+      <svg xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" viewBox="0 0 24 24">
+        <g fill="none" stroke="#c4c4c4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>
+      </svg>
+    </div>
+
+    <div id="video-wrapper"></div>
 
     <script type="text/javascript">
       // Can be called in embed.ts
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 3631ea7e6..d15887478 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -24,7 +24,7 @@ html,
 body {
   height: 100%;
   margin: 0;
-  background-color: #000;
+  background-color: #0f0f10;
 }
 
 #video-wrapper {
@@ -42,8 +42,10 @@ body {
   }
 }
 
-#error-block {
+#error-block,
+#video-password-block {
   display: none;
+  user-select: none;
 
   flex-direction: column;
   align-content: center;
@@ -86,6 +88,43 @@ body {
   text-align: center;
 }
 
+#video-password-content {
+  @include margin(1rem, 0, 2rem);
+}
+
+#video-password-input,
+#video-password-submit {
+  line-height: 23px;
+  padding: 1rem;
+  margin: 1rem 0.5rem;
+  border: 0;
+  font-weight: 600;
+  border-radius: 3px!important;
+  font-size: 18px;
+  display: inline-block;
+}
+
+#video-password-submit {
+  color: #fff;
+  background-color: #f2690d;
+  cursor: pointer;
+}
+
+#video-password-submit:hover {
+  background-color: #f47825;
+}
+#video-password-error {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 2rem;
+  font-weight: bolder;
+}
+
+#video-password-block svg {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media screen and (max-width: 300px) {
   #error-block {
     font-size: 36px;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index cc4274b99..78b812ffd 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,18 +1,26 @@
 import './embed.scss'
 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, VideoDetails, VideoPlaylist, VideoPlaylistElement, VideoState } from '../../../../shared/models'
-import { PeertubePlayerManager } from '../../assets/player'
+import {
+  HTMLServerConfig,
+  ResultList,
+  ServerErrorCode,
+  VideoDetails,
+  VideoPlaylist,
+  VideoPlaylistElement,
+  VideoState
+} from '../../../../shared/models'
+import { PeerTubePlayer } from '../../assets/player/peertube-player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
-import { getParamString, logger, videoRequiresAuth } from '../../root-helpers'
+import { getParamString, logger, videoRequiresFileToken } from '../../root-helpers'
 import { PeerTubeEmbedApi } from './embed-api'
 import {
   AuthHTTP,
   LiveManager,
   PeerTubePlugin,
-  PlayerManagerOptions,
+  PlayerOptionsBuilder,
   PlaylistFetcher,
   PlaylistTracker,
   Translations,
@@ -27,18 +35,26 @@ 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
+
   constructor (videoWrapperId: string) {
     logger.registerServerSending(window.location.origin)
 
@@ -48,8 +64,9 @@ 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
 
     try {
       this.config = JSON.parse((window as any)['PeerTubeServerConfig'])
@@ -69,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) {
@@ -90,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 () {
@@ -125,7 +142,7 @@ export class PeerTubeEmbed {
   }
 
   private initializeApi () {
-    if (this.playerManagerOptions.hasAPIEnabled()) {
+    if (this.playerOptionsBuilder.hasAPIEnabled()) {
       if (this.api) {
         this.api.reInit()
         return
@@ -147,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 () {
@@ -159,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 () {
@@ -170,123 +187,124 @@ export class PeerTubeEmbed {
 
   private async loadVideoAndBuildPlayer (options: {
     uuid: string
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
+    const { uuid, forceAutoplay } = options
 
     try {
-      const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
+      const {
+        videoResponse,
+        captionsPromise,
+        storyboardsPromise
+      } = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
 
-      return this.buildVideoPlayer({ videoResponse, captionsPromise, autoplayFromPreviousVideo, forceAutoplay })
+      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, forceAutoplay })
     } catch (err) {
-      this.playerHTML.displayError(err.message, await this.translationsPromise)
+
+      if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
+      else this.playerHTML.displayError(err.message, await this.translationsPromise)
     }
   }
 
   private async buildVideoPlayer (options: {
     videoResponse: Response
+    storyboardsPromise: Promise<Response>
     captionsPromise: Promise<Response>
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { videoResponse, captionsPromise, 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
 
-        const videoFileToken = videoRequiresAuth(videoInfo)
-          ? await this.videoFetcher.loadVideoToken(videoInfo)
+        const videoFileToken = videoRequiresFileToken(videoInfo)
+          ? await this.videoFetcher.loadVideoToken(videoInfo, this.videoPassword)
           : undefined
 
         return { live, video: videoInfo, videoFileToken }
       })
 
-    const [ { video, live, videoFileToken }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
+    const [
+      { video, live, videoFileToken },
+      translations,
+      captionsResponse,
+      storyboardsResponse
+    ] = await Promise.all([
       videoInfoPromise,
       this.translationsPromise,
       captionsPromise,
-      this.PeertubePlayerManagerModulePromise
+      storyboardsPromise,
+      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 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,
 
-      authorizationHeader: () => this.http.getHeaderTokenValue(),
-      videoFileToken: () => videoFileToken,
+      storyboardsResponse,
 
-      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
+      videoFileToken: () => videoFileToken,
+      videoPassword: () => this.videoPassword,
+      requiresPassword: this.requiresPassword,
 
-      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)
-    });
-
-    (window as any)['videojsPlayer'] = this.player
-
-    this.buildCSS()
-    this.buildPlayerDock(video)
-    this.initializeApi()
+      this.buildCSS()
+      this.initializeApi()
+    }
 
-    this.playerHTML.removePlaceholder()
+    this.alreadyInitialized = true
 
-    if (this.isPlaylistEmbed()) {
-      await this.buildPlayerPlaylistUpnext()
+    this.player.one('play', () => {
+      this.alreadyPlayed = true
+    })
 
-      this.player.playlist().updateSelected()
-
-      this.player.on('stopped', () => {
-        this.playNextPlaylistVideo()
-      })
-    }
+    if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
 
     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)
       }
@@ -295,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())
     }
   }
 
@@ -384,23 +343,52 @@ 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()
-    }
+  private async handlePasswordError (err: PeerTubeServerError) {
+    let incorrectPassword: boolean = null
+    if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
+    else if (err.serverCode === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) incorrectPassword = true
 
-    // Disable player
-    this.player.hasStarted(false)
-    this.player.removeClass('vjs-has-autoplay')
-    this.player.bigPlayButton.hide();
+    if (incorrectPassword === null) return false
 
-    (this.player.el() as HTMLElement).style.pointerEvents = 'none'
+    this.requiresPassword = true
+    this.videoPassword = await this.playerHTML.askVideoPassword({
+      incorrectPassword,
+      translations: await this.translationsPromise
+    })
+    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/auth-http.ts b/client/src/standalone/videos/shared/auth-http.ts
index 95e3b029e..c1e9f7750 100644
--- a/client/src/standalone/videos/shared/auth-http.ts
+++ b/client/src/standalone/videos/shared/auth-http.ts
@@ -18,10 +18,12 @@ export class AuthHTTP {
     if (this.userOAuthTokens) this.setHeadersFromTokens()
   }
 
-  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }) {
-    const refreshFetchOptions = optionalAuth
-      ? { headers: this.headers }
-      : {}
+  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }, videoPassword?: string) {
+    let refreshFetchOptions: { headers?: Headers } = {}
+
+    if (videoPassword) this.headers.set('x-peertube-video-password', videoPassword)
+
+    if (videoPassword || optionalAuth) refreshFetchOptions = { headers: this.headers }
 
     return this.refreshFetch(url.toString(), { ...refreshFetchOptions, method })
   }
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 d93678c10..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'
 
@@ -55,17 +54,55 @@ export class PlayerHTML {
     this.wrapperElement.style.display = 'none'
   }
 
-  buildPlaceholder (video: VideoDetails) {
-    const placeholder = this.getPlaceholderElement()
+  async askVideoPassword (options: { incorrectPassword: boolean, translations: Translations }): Promise<string> {
+    const { incorrectPassword, translations } = options
+    return new Promise((resolve) => {
 
-    const url = window.location.origin + video.previewPath
-    placeholder.style.backgroundImage = `url("${url}")`
-    placeholder.style.display = 'block'
+      this.wrapperElement.style.display = 'none'
+
+      const translatedTitle = peertubeTranslate('This video is password protected', translations)
+      const translatedMessage = peertubeTranslate('You need a password to watch this video.', translations)
+
+      document.title = translatedTitle
+
+      const videoPasswordBlock = document.getElementById('video-password-block')
+      videoPasswordBlock.style.display = 'flex'
+
+      const videoPasswordTitle = document.getElementById('video-password-title')
+      videoPasswordTitle.innerHTML = translatedTitle
+
+      const videoPasswordMessage = document.getElementById('video-password-content')
+      videoPasswordMessage.innerHTML = translatedMessage
+
+      if (incorrectPassword) {
+        const videoPasswordError = document.getElementById('video-password-error')
+        videoPasswordError.innerHTML = peertubeTranslate('Incorrect password, please enter a correct password', translations)
+        videoPasswordError.style.transform = 'scale(1.2)'
+
+        setTimeout(() => {
+          videoPasswordError.style.transform = 'scale(1)'
+        }, 500)
+      }
+
+      const videoPasswordSubmitButton = document.getElementById('video-password-submit')
+      videoPasswordSubmitButton.innerHTML = peertubeTranslate('Watch Video', translations)
+
+      const videoPasswordInput = document.getElementById('video-password-input') as HTMLInputElement
+      videoPasswordInput.placeholder = peertubeTranslate('Password', translations)
+
+      const videoPasswordForm = document.getElementById('video-password-form')
+      videoPasswordForm.addEventListener('submit', (event) => {
+        event.preventDefault()
+        const videoPassword = videoPasswordInput.value
+        resolve(videoPassword)
+      })
+    })
   }
 
-  removePlaceholder () {
-    const placeholder = this.getPlaceholderElement()
-    placeholder.style.display = 'none'
+  removeVideoPasswordBlock () {
+    const videoPasswordBlock = document.getElementById('video-password-block')
+    videoPasswordBlock.style.display = 'none'
+    this.wrapperElement.style.display = 'block'
   }
 
   displayInformation (text: string, translations: Translations) {
@@ -85,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 43ae22a3b..8a4e32444 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-options-builder.ts
@@ -2,6 +2,7 @@ import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
 import {
   HTMLServerConfig,
   LiveVideo,
+  Storyboard,
   Video,
   VideoCaption,
   VideoDetails,
@@ -9,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,
@@ -18,7 +19,7 @@ import {
   logger,
   peertubeLocalStorage,
   UserLocalStorageKeys,
-  videoRequiresAuth
+  videoRequiresUserAuth
 } from '../../../root-helpers'
 import { PeerTubePlugin } from './peertube-plugin'
 import { PlayerHTML } from './player-html'
@@ -26,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
@@ -140,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)
@@ -152,119 +153,140 @@ 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
+
+    storyboardsResponse: Response
+
     live?: LiveVideo
 
+    alreadyPlayed: boolean
     forceAutoplay: boolean
 
-    authorizationHeader: () => string
     videoFileToken: () => string
 
-    serverConfig: HTMLServerConfig
-
-    autoplayFromPreviousVideo: boolean
+    videoPassword: () => string
+    requiresPassword: 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,
-      authorizationHeader,
-      serverConfig
+      storyboardsResponse
     } = options
 
-    const videoCaptions = await this.buildCaptions(captionsResponse, translations)
-
-    const playerOptions: PeertubePlayerManagerOptions = {
-      common: {
-        // Autoplay in playlist mode
-        autoplay: autoplayFromPreviousVideo ? true : this.autoplay,
-        forceAutoplay,
+    const [ videoCaptions, storyboard ] = await Promise.all([
+      this.buildCaptions(captionsResponse, translations),
+      this.buildStoryboard(storyboardsResponse)
+    ])
 
-        controls: this.controls,
-        controlBar: this.controlBar,
-
-        muted: this.muted,
-        loop: this.loop,
+    return {
+      mode: this.mode,
 
-        p2pEnabled: this.p2pEnabled,
+      autoplay: forceAutoplay || alreadyPlayed || this.autoplay,
+      forceAutoplay,
 
-        captions: videoCaptions.length !== 0,
-        subtitle: this.subtitle,
+      p2pEnabled: this.p2pEnabled,
 
-        startTime: playlistTracker
-          ? playlistTracker.getCurrentElement().startTimestamp
-          : this.startTime,
-        stopTime: playlistTracker
-          ? playlistTracker.getCurrentElement().stopTimestamp
-          : this.stopTime,
+      subtitle: this.subtitle,
 
-        playbackRate: this.playbackRate,
+      storyboard,
 
-        videoCaptions,
-        inactivityTimeout: 2500,
-        videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
-        videoViewIntervalMs: 5000,
-        metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+      startTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().startTimestamp
+        : this.startTime,
+      stopTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().stopTimestamp
+        : this.stopTime,
 
-        videoShortUUID: video.shortUUID,
-        videoUUID: video.uuid,
+      videoCaptions,
+      videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
 
-        playerElement: this.playerHTML.getPlayerElement(),
-        onPlayerElementChange: (element: HTMLVideoElement) => {
-          this.playerHTML.setPlayerElement(element)
-        },
+      videoShortUUID: video.shortUUID,
+      videoUUID: video.uuid,
 
-        videoDuration: video.duration,
-        enableHotkeys: true,
+      duration: video.duration,
 
-        peertubeLink: this.peertubeLink,
-        instanceName: serverConfig.instance.name,
+      poster: window.location.origin + video.previewPath,
 
-        poster: window.location.origin + video.previewPath,
-        theaterButton: false,
+      embedUrl: window.location.origin + video.embedPath,
+      embedTitle: video.name,
 
-        serverUrl: window.location.origin,
-        language: navigator.language,
-        embedUrl: window.location.origin + video.embedPath,
-        embedTitle: video.name,
+      requiresUserAuth: videoRequiresUserAuth(video),
+      videoFileToken,
 
-        requiresAuth: videoRequiresAuth(video),
-        authorizationHeader,
-        videoFileToken,
+      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) {
@@ -278,15 +300,39 @@ export class PlayerManagerOptions {
     }
   }
 
-  private buildPlaylistOptions (options: {
-    playlistTracker?: PlaylistTracker
-    playNextPlaylistVideo?: () => any
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
+  private async buildStoryboard (storyboardsResponse: Response) {
+    const { storyboards } = await storyboardsResponse.json() as { storyboards: Storyboard[] }
+    if (!storyboards || storyboards.length === 0) return undefined
+
+    return {
+      url: window.location.origin + storyboards[0].storyboardPath,
+      height: storyboards[0].spriteHeight,
+      width: storyboards[0].spriteWidth,
+      interval: storyboards[0].spriteDuration
+    }
+  }
+
+  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: {
@@ -302,27 +348,37 @@ export class PlayerManagerOptions {
         }
       },
 
-      nextVideo: () => playNextPlaylistVideo(),
-      hasNextVideo: () => playlistTracker.hasNextPlaylistElement(),
+      previousVideo: {
+        enabled: playlistTracker.hasPreviousPlaylistElement(),
+        handler: () => playPrevious(),
+        displayControlBarButton: true
+      },
 
-      previousVideo: () => playPreviousPlaylistVideo(),
-      hasPreviousVideo: () => playlistTracker.hasPreviousPlaylistElement()
+      nextVideo: {
+        enabled: playlistTracker.hasNextPlaylistElement(),
+        handler: () => playNext(),
+        getVideoTitle: () => playlistTracker.getNextPlaylistElement()?.video?.name,
+        displayControlBarButton: true
+      },
+
+      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
     }
   }
 
@@ -344,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),
diff --git a/client/src/standalone/videos/shared/video-fetcher.ts b/client/src/standalone/videos/shared/video-fetcher.ts
index cf6d12831..7fb94fbf3 100644
--- a/client/src/standalone/videos/shared/video-fetcher.ts
+++ b/client/src/standalone/videos/shared/video-fetcher.ts
@@ -1,5 +1,6 @@
 import { HttpStatusCode, LiveVideo, VideoDetails, VideoToken } from '../../../../../shared/models'
 import { logger } from '../../../root-helpers'
+import { PeerTubeServerError } from '../../../types'
 import { AuthHTTP } from './auth-http'
 
 export class VideoFetcher {
@@ -8,8 +9,8 @@ export class VideoFetcher {
 
   }
 
-  async loadVideo (videoId: string) {
-    const videoPromise = this.loadVideoInfo(videoId)
+  async loadVideo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }) {
+    const videoPromise = this.loadVideoInfo({ videoId, videoPassword })
 
     let videoResponse: Response
     let isResponseOk: boolean
@@ -27,13 +28,17 @@ export class VideoFetcher {
       if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
         throw new Error('This video does not exist.')
       }
-
+      if (videoResponse?.status === HttpStatusCode.FORBIDDEN_403) {
+        const res = await videoResponse.json()
+        throw new PeerTubeServerError(res.message, res.code)
+      }
       throw new Error('We cannot fetch the video. Please try again later.')
     }
 
-    const captionsPromise = this.loadVideoCaptions(videoId)
+    const captionsPromise = this.loadVideoCaptions({ videoId, videoPassword })
+    const storyboardsPromise = this.loadStoryboards(videoId)
 
-    return { captionsPromise, videoResponse }
+    return { captionsPromise, storyboardsPromise, videoResponse }
   }
 
   loadLive (video: VideoDetails) {
@@ -41,8 +46,8 @@ export class VideoFetcher {
       .then(res => res.json() as Promise<LiveVideo>)
   }
 
-  loadVideoToken (video: VideoDetails) {
-    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' })
+  loadVideoToken (video: VideoDetails, videoPassword?: string) {
+    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' }, videoPassword)
       .then(res => res.json() as Promise<VideoToken>)
       .then(token => token.files.token)
   }
@@ -51,12 +56,12 @@ export class VideoFetcher {
     return this.getVideoUrl(videoUUID) + '/views'
   }
 
-  private loadVideoInfo (videoId: string): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true })
+  private loadVideoInfo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
+    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true }, videoPassword)
   }
 
-  private loadVideoCaptions (videoId: string): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true })
+  private loadVideoCaptions ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
+    return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true }, videoPassword)
   }
 
   private getVideoUrl (id: string) {
@@ -67,6 +72,14 @@ export class VideoFetcher {
     return window.location.origin + '/api/v1/videos/live/' + videoId
   }
 
+  private loadStoryboards (videoUUID: string): Promise<Response> {
+    return this.http.fetch(this.getStoryboardsUrl(videoUUID), { optionalAuth: true })
+  }
+
+  private getStoryboardsUrl (videoId: string) {
+    return window.location.origin + '/api/v1/videos/' + videoId + '/storyboards'
+  }
+
   private getVideoTokenUrl (id: string) {
     return this.getVideoUrl(id) + '/token'
   }
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index b34df11ee..b7a283c4d 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -1,6 +1,6 @@
 import './test-embed.scss'
-import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
-import { PeerTubePlayer } from '../player/player'
+import { PeerTubeResolution, PlayerEventType } from '../embed-player-api/definitions'
+import { PeerTubePlayer } from '../embed-player-api/player'
 import { logger } from '../../root-helpers'
 
 window.addEventListener('load', async () => {