152 files changed, 3656 insertions, 3360 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index bbf946df0..9701e7f85 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -52,6 +52,20 @@
          <div *ngIf="formErrors.cache.torrents.size" class="form-error">{{ formErrors.cache.torrents.size }}</div>
        </div>
+        <div class="form-group" formGroupName="torrents">
+          <label i18n for="cacheTorrentsSize">Number of video storyboard images to keep in cache</label>
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cacheStoryboardsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.storyboards.size'] }"
+            >
+            <span i18n>{getCacheSize('storyboards'), plural, =1 {cached storyboard} other {cached storyboards}}</span>
+          </div>
+          <div *ngIf="formErrors.cache.storyboards.size" class="form-error">{{ formErrors.cache.storyboards.size }}</div>
+        </div>
      </ng-container>
    </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
index 79a98f288..06c5e6221 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
@@ -10,7 +10,7 @@ export class EditAdvancedConfigurationComponent {
  @Input() form: FormGroup
  @Input() formErrors: any
-  getCacheSize (type: 'captions' | 'previews' | 'torrents') {
+  getCacheSize (type: 'captions' | 'previews' | 'torrents' | 'storyboards') {
    return this.form.value['cache'][type]['size']
  }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
index 628c2d102..42c0e6dc2 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 export type ResolutionOption = {
  id: string
@@ -99,10 +99,7 @@ export class EditConfigurationService {
    return {
      value,
      atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible
-      unit: prepareIcu($localize`{value, plural, =1 {thread} other {threads}}`)(
+      unit: formatICU($localize`{value, plural, =1 {thread} other {threads}}`, { value })
-        { value },
-        $localize`threads`
-      )
    }
  }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 2c3b7560d..b381473d6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -9,8 +9,7 @@ import { Notifier } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import {
  ADMIN_EMAIL_VALIDATOR,
-  CACHE_CAPTIONS_SIZE_VALIDATOR,
+  CACHE_SIZE_VALIDATOR,
-  CACHE_PREVIEWS_SIZE_VALIDATOR,
  CONCURRENCY_VALIDATOR,
  INDEX_URL_VALIDATOR,
  INSTANCE_NAME_VALIDATOR,
@@ -120,13 +119,16 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
      },
      cache: {
        previews: {
-          size: CACHE_PREVIEWS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
        },
        captions: {
-          size: CACHE_CAPTIONS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
        },
        torrents: {
-          size: CACHE_CAPTIONS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
+        },
+        storyboards: {
+          size: CACHE_SIZE_VALIDATOR
        }
      },
      signup: {
@@ -188,7 +190,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
        hls: {
          enabled: null
        },
-        webtorrent: {
+        webVideos: {
          enabled: null
        },
        remoteRunners: {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index fb750aca6..accf2c28c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -67,11 +67,11 @@
              <div class="callout callout-light pt-2 mt-2 pb-0">
                <h3 class="callout-title" i18n>Output formats</h3>
-                <ng-container formGroupName="webtorrent">
+                <ng-container formGroupName="webVideos">
                  <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                    <my-peertube-checkbox
-                      inputName="transcodingWebTorrentEnabled" formControlName="enabled"
+                      inputName="transcodingWebVideosEnabled" formControlName="enabled"
-                      i18n-labelText labelText="WebTorrent enabled"
+                      i18n-labelText labelText="Web Videos enabled"
                    >
                      <ng-template ptTemplate="help">
                        <ng-container>
@@ -93,14 +93,14 @@
                        <ng-container i18n>
                          <strong>Requires ffmpeg >= 4.1</strong>
-                          <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
+                          <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with Web Videos:</p>
                          <ul>
                            <li>Resolution change is smoother</li>
                            <li>Faster playback especially with long videos</li>
                            <li>More stable playback (less bugs/infinite loading)</li>
                          </ul>
-                          <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
+                          <p>If you also enabled Web Videos support, it will multiply videos storage by 2</p>
                        </ng-container>
                      </ng-template>
                    </my-peertube-checkbox>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
index c5f4ecddb..6496e8753 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
@@ -90,9 +90,9 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
    const transcodingControl = this.form.get('transcoding.enabled')
    const videoStudioControl = this.form.get('videoStudio.enabled')
    const hlsControl = this.form.get('transcoding.hls.enabled')
-    const webtorrentControl = this.form.get('transcoding.webtorrent.enabled')
+    const webVideosControl = this.form.get('transcoding.webVideos.enabled')
-    webtorrentControl.valueChanges
+    webVideosControl.valueChanges
                     .subscribe(newValue => {
                       if (newValue === false && !hlsControl.disabled) {
                         hlsControl.disable()
@@ -105,12 +105,12 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
    hlsControl.valueChanges
              .subscribe(newValue => {
-                if (newValue === false && !webtorrentControl.disabled) {
+                if (newValue === false && !webVideosControl.disabled) {
-                  webtorrentControl.disable()
+                  webVideosControl.disable()
                }
-                if (newValue === true && !webtorrentControl.enabled) {
+                if (newValue === true && !webVideosControl.enabled) {
-                  webtorrentControl.enable()
+                  webVideosControl.enable()
                }
              })
@@ -122,7 +122,7 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
              })
    transcodingControl.updateValueAndValidity()
-    webtorrentControl.updateValueAndValidity()
+    webVideosControl.updateValueAndValidity()
    videoStudioControl.updateValueAndValidity()
    hlsControl.updateValueAndValidity()
  }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index cebb2e1a2..618892242 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -1,7 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { DropdownAction } from '@app/shared/shared-main'
@@ -63,9 +63,9 @@ export class FollowersListComponent extends RestTable <ActorFollow> implements O
      .subscribe({
        next: () => {
          // eslint-disable-next-line max-len
-          const message = prepareIcu($localize`Accepted {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`)(
+          const message = formatICU(
-            { count: follows.length, followerName: this.buildFollowerName(follows[0]) },
+            $localize`Accepted {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`,
-            $localize`Follow requests accepted`
+            { count: follows.length, followerName: this.buildFollowerName(follows[0]) }
          )
          this.notifier.success(message)
@@ -78,9 +78,9 @@ export class FollowersListComponent extends RestTable <ActorFollow> implements O
  async rejectFollower (follows: ActorFollow[]) {
    // eslint-disable-next-line max-len
-    const message = prepareIcu($localize`Do you really want to reject {count, plural, =1 {{followerName} follow request?} other {{count} follow requests?}}`)(
+    const message = formatICU(
-      { count: follows.length, followerName: this.buildFollowerName(follows[0]) },
+      $localize`Do you really want to reject {count, plural, =1 {{followerName} follow request?} other {{count} follow requests?}}`,
-      $localize`Do you really want to reject these follow requests?`
+      { count: follows.length, followerName: this.buildFollowerName(follows[0]) }
    )
    const res = await this.confirmService.confirm(message, $localize`Reject`)
@@ -90,9 +90,9 @@ export class FollowersListComponent extends RestTable <ActorFollow> implements O
        .subscribe({
          next: () => {
            // eslint-disable-next-line max-len
-            const message = prepareIcu($localize`Rejected {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`)(
+            const message = formatICU(
-              { count: follows.length, followerName: this.buildFollowerName(follows[0]) },
+              $localize`Rejected {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`,
-              $localize`Follow requests rejected`
+              { count: follows.length, followerName: this.buildFollowerName(follows[0]) }
            )
            this.notifier.success(message)
@@ -110,9 +110,9 @@ export class FollowersListComponent extends RestTable <ActorFollow> implements O
    message += '<br /><br />'
    // eslint-disable-next-line max-len
-    message += prepareIcu($localize`Do you really want to delete {count, plural, =1 {{followerName} follow request?} other {{count} follow requests?}}`)(
+    message += formatICU(
-      icuParams,
+      $localize`Do you really want to delete {count, plural, =1 {{followerName} follow request?} other {{count} follow requests?}}`,
-      $localize`Do you really want to delete these follow requests?`
+      icuParams
    )
    const res = await this.confirmService.confirm(message, $localize`Delete`)
@@ -122,9 +122,9 @@ export class FollowersListComponent extends RestTable <ActorFollow> implements O
        .subscribe({
          next: () => {
            // eslint-disable-next-line max-len
-            const message = prepareIcu($localize`Removed {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`)(
+            const message = formatICU(
-              icuParams,
+              $localize`Removed {count, plural, =1 {{followerName} follow request} other {{count} follow requests}}`,
-              $localize`Follow requests removed`
+              icuParams
            )
            this.notifier.success(message)
diff --git a/client/src/app/+admin/follows/following-list/follow-modal.component.ts b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
index 8f74e82a6..54b3cebc5 100644
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.ts
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { splitAndGetNotEmpty, UNIQUE_HOSTS_OR_HANDLE_VALIDATOR } from '@app/shared/form-validators/host-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
@@ -62,9 +62,9 @@ export class FollowModalComponent extends FormReactive implements OnInit {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`{count, plural, =1 {Follow request sent!} other {Follow requests sent!}}`)(
+            formatICU(
-              { count: hostsOrHandles.length },
+              $localize`{count, plural, =1 {Follow request sent!} other {Follow requests sent!}}`,
-              $localize`Follow request(s) sent!`
+              { count: hostsOrHandles.length }
            )
          )
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 71f2fbe66..6c8723c16 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -6,7 +6,7 @@ import { InstanceFollowService } from '@app/shared/shared-instance'
 import { ActorFollow } from '@shared/models'
 import { FollowModalComponent } from './follow-modal.component'
 import { DropdownAction } from '@app/shared/shared-main'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 @Component({
  templateUrl: './following-list.component.html',
@@ -64,9 +64,9 @@ export class FollowingListComponent extends RestTable <ActorFollow> implements O
  async removeFollowing (follows: ActorFollow[]) {
    const icuParams = { count: follows.length, entryName: this.buildFollowingName(follows[0]) }
-    const message = prepareIcu($localize`Do you really want to unfollow {count, plural, =1 {{entryName}?} other {{count} entries?}}`)(
+    const message = formatICU(
-      icuParams,
+      $localize`Do you really want to unfollow {count, plural, =1 {{entryName}?} other {{count} entries?}}`,
-      $localize`Do you really want to unfollow these entries?`
+      icuParams
    )
    const res = await this.confirmService.confirm(message, $localize`Unfollow`)
@@ -76,9 +76,9 @@ export class FollowingListComponent extends RestTable <ActorFollow> implements O
      .subscribe({
        next: () => {
          // eslint-disable-next-line max-len
-          const message = prepareIcu($localize`You are not following {count, plural, =1 {{entryName} anymore.} other {these {count} entries anymore.}}`)(
+          const message = formatICU(
-            icuParams,
+            $localize`You are not following {count, plural, =1 {{entryName} anymore.} other {these {count} entries anymore.}}`,
-            $localize`You are not following them anymore.`
+            icuParams
          )
          this.notifier.success(message)
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.ts b/client/src/app/+admin/moderation/registration-list/registration-list.component.ts
index 3ca1ceab8..35d9d13d7 100644
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.ts
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.ts
@@ -2,7 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction } from '@app/shared/shared-main'
 import { UserRegistration, UserRegistrationState } from '@shared/models'
@@ -121,9 +121,9 @@ export class RegistrationListComponent extends RestTable <UserRegistration> impl
    const icuParams = { count: registrations.length, username: registrations[0].username }
    // eslint-disable-next-line max-len
-    const message = prepareIcu($localize`Do you really want to delete {count, plural, =1 {{username} registration request?} other {{count} registration requests?}}`)(
+    const message = formatICU(
-      icuParams,
+      $localize`Do you really want to delete {count, plural, =1 {{username} registration request?} other {{count} registration requests?}}`,
-      $localize`Do you really want to delete these registration requests?`
+      icuParams
    )
    const res = await this.confirmService.confirm(message, $localize`Delete`)
@@ -133,9 +133,9 @@ export class RegistrationListComponent extends RestTable <UserRegistration> impl
      .subscribe({
        next: () => {
          // eslint-disable-next-line max-len
-          const message = prepareIcu($localize`Removed {count, plural, =1 {{username} registration request} other {{count} registration requests}}`)(
+          const message = formatICU(
-            icuParams,
+            $localize`Removed {count, plural, =1 {{username} registration request} other {{count} registration requests}}`,
-            $localize`Registration requests removed`
+            icuParams
          )
          this.notifier.success(message)
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
index 28efdc076..b77072665 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.ts
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
@@ -7,7 +7,7 @@ import { DropdownAction } from '@app/shared/shared-main'
 import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
 import { FeedFormat, UserRight } from '@shared/models'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 @Component({
  selector: 'my-video-comment-list',
@@ -146,9 +146,9 @@ export class VideoCommentListComponent extends RestTable <VideoCommentAdmin> imp
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`{count, plural, =1 {1 comment deleted.} other {{count} comments deleted.}}`)(
+            formatICU(
-              { count: commentArgs.length },
+              $localize`{count, plural, =1 {1 comment deleted.} other {{count} comments deleted.}}`,
-              $localize`${commentArgs.length} comment(s) deleted.`
+              { count: commentArgs.length }
            )
          )
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index 19420b748..5d5abf6f4 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -2,7 +2,7 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { getAPIHost, prepareIcu } from '@app/helpers'
+import { formatICU, getAPIHost } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { Actor, DropdownAction } from '@app/shared/shared-main'
 import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
@@ -210,9 +210,9 @@ export class UserListComponent extends RestTable <User> implements OnInit {
  async unbanUsers (users: User[]) {
    const res = await this.confirmService.confirm(
-      prepareIcu($localize`Do you really want to unban {count, plural, =1 {1 user} other {{count} users}}?`)(
+      formatICU(
-        { count: users.length },
+        $localize`Do you really want to unban {count, plural, =1 {1 user} other {{count} users}}?`,
-        $localize`Do you really want to unban ${users.length} users?`
+        { count: users.length }
      ),
      $localize`Unban`
    )
@@ -223,9 +223,9 @@ export class UserListComponent extends RestTable <User> implements OnInit {
        .subscribe({
          next: () => {
            this.notifier.success(
-              prepareIcu($localize`{count, plural, =1 {1 user unbanned.} other {{count} users unbanned.}}`)(
+              formatICU(
-                { count: users.length },
+                $localize`{count, plural, =1 {1 user unbanned.} other {{count} users unbanned.}}`,
-                $localize`${users.length} users unbanned.`
+                { count: users.length }
              )
            )
            this.reloadData()
@@ -252,9 +252,9 @@ export class UserListComponent extends RestTable <User> implements OnInit {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`{count, plural, =1 {1 user deleted.} other {{count} users deleted.}}`)(
+            formatICU(
-              { count: users.length },
+              $localize`{count, plural, =1 {1 user deleted.} other {{count} users deleted.}}`,
-              $localize`${users.length} users deleted.`
+              { count: users.length }
            )
          )
@@ -270,9 +270,9 @@ export class UserListComponent extends RestTable <User> implements OnInit {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`{count, plural, =1 {1 user email set as verified.} other {{count} user emails set as verified.}}`)(
+            formatICU(
-              { count: users.length },
+              $localize`{count, plural, =1 {1 user email set as verified.} other {{count} user emails set as verified.}}`,
-              $localize`${users.length} users email set as verified.`
+              { count: users.length }
            )
          )
diff --git a/client/src/app/+admin/overview/videos/video-admin.service.ts b/client/src/app/+admin/overview/videos/video-admin.service.ts
index 4b9357fb7..722495706 100644
--- a/client/src/app/+admin/overview/videos/video-admin.service.ts
+++ b/client/src/app/+admin/overview/videos/video-admin.service.ts
@@ -59,12 +59,12 @@ export class VideoAdminService {
        title: $localize`Video files`,
        children: [
          {
-            value: 'webtorrent:true isLocal:true',
+            value: 'webVideos:true isLocal:true',
-            label: $localize`With WebTorrent`
+            label: $localize`With Web Videos`
          },
          {
-            value: 'webtorrent:false isLocal:true',
+            value: 'webVideos:false isLocal:true',
-            label: $localize`Without WebTorrent`
+            label: $localize`Without Web Videos`
          },
          {
            value: 'hls:true isLocal:true',
@@ -126,8 +126,8 @@ export class VideoAdminService {
        prefix: 'hls:',
        isBoolean: true
      },
-      hasWebtorrentFiles: {
+      hasWebVideoFiles: {
-        prefix: 'webtorrent:',
+        prefix: 'webVideos:',
        isBoolean: true
      },
      isLive: {
@@ -151,7 +151,7 @@ export class VideoAdminService {
    }
    if (filters.excludePublic) {
-      privacyOneOf = [ VideoPrivacy.PRIVATE, VideoPrivacy.UNLISTED, VideoPrivacy.INTERNAL ]
+      privacyOneOf = [ VideoPrivacy.PRIVATE, VideoPrivacy.UNLISTED, VideoPrivacy.INTERNAL, VideoPrivacy.PASSWORD_PROTECTED ]
      filters.excludePublic = undefined
    }
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index c4f78cadc..3a4666435 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -83,8 +83,8 @@
      </td>
      <td>
-        <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span>
+        <span *ngIf="hasHLS(video)" class="pt-badge badge-blue">HLS</span>
-        <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span>
+        <span *ngIf="hasWebVideos(video)" class="pt-badge badge-blue">Web Videos ({{ video.files.length }})</span>
        <span i18n *ngIf="video.isLive" class="pt-badge badge-blue">Live</span>
        <span i18n *ngIf="hasObjectStorage(video)" class="pt-badge badge-purple">Object storage</span>
@@ -102,8 +102,8 @@
    <tr>
      <td class="video-info expand-cell" myAutoColspan>
        <div>
-          <div *ngIf="isWebTorrent(video)">
+          <div *ngIf="hasWebVideos(video)">
-            WebTorrent:
+            Web Videos:
            <ul>
              <li *ngFor="let file of video.files">
@@ -112,13 +112,13 @@
                <my-global-icon
                  *ngIf="canRemoveOneFile(video)"
                  i18n-ngbTooltip ngbTooltip="Delete this file" iconName="delete" role="button"
-                  (click)="removeVideoFile(video, file, 'webtorrent')"
+                  (click)="removeVideoFile(video, file, 'web-videos')"
                ></my-global-icon>
              </li>
            </ul>
          </div>
-          <div *ngIf="isHLS(video)">
+          <div *ngIf="hasHLS(video)">
            HLS:
            <ul>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index ebf82ce16..52f02d8d0 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -3,7 +3,7 @@ import { finalize } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockComponent, VideoBlockService } from '@app/shared/shared-moderation'
@@ -99,8 +99,8 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
          iconName: 'cog'
        },
        {
-          label: $localize`Run WebTorrent transcoding`,
+          label: $localize`Run Web Video transcoding`,
-          handler: videos => this.runTranscoding(videos, 'webtorrent'),
+          handler: videos => this.runTranscoding(videos, 'web-video'),
          isDisplayed: videos => videos.every(v => v.canRunTranscoding(this.authUser)),
          iconName: 'cog'
        },
@@ -111,8 +111,8 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
          iconName: 'delete'
        },
        {
-          label: $localize`Delete WebTorrent files`,
+          label: $localize`Delete Web Video files`,
-          handler: videos => this.removeVideoFiles(videos, 'webtorrent'),
+          handler: videos => this.removeVideoFiles(videos, 'web-videos'),
          isDisplayed: videos => videos.every(v => v.canRemoveFiles(this.authUser)),
          iconName: 'delete'
        }
@@ -150,14 +150,14 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
    return video.state.id === VideoState.TO_IMPORT
  }
-  isHLS (video: Video) {
+  hasHLS (video: Video) {
    const p = video.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
    if (!p) return false
    return p.files.length !== 0
  }
-  isWebTorrent (video: Video) {
+  hasWebVideos (video: Video) {
    return video.files.length !== 0
  }
@@ -176,14 +176,14 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
  getFilesSize (video: Video) {
    let files = video.files
-    if (this.isHLS(video)) {
+    if (this.hasHLS(video)) {
      files = files.concat(video.streamingPlaylists[0].files)
    }
    return files.reduce((p, f) => p += f.size, 0)
  }
-  async removeVideoFile (video: Video, file: VideoFile, type: 'hls' | 'webtorrent') {
+  async removeVideoFile (video: Video, file: VideoFile, type: 'hls' | 'web-videos') {
    const message = $localize`Are you sure you want to delete this ${file.resolution.label} file?`
    const res = await this.confirmService.confirm(message, $localize`Delete file`)
    if (res === false) return
@@ -219,9 +219,9 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
  }
  private async removeVideos (videos: Video[]) {
-    const message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {this video} other {these {count} videos}}?`)(
+    const message = formatICU(
-      { count: videos.length },
+      $localize`Are you sure you want to delete {count, plural, =1 {this video} other {these {count} videos}}?`,
-      $localize`Are you sure you want to delete these ${videos.length} videos?`
+      { count: videos.length }
    )
    const res = await this.confirmService.confirm(message, $localize`Delete`)
@@ -231,9 +231,9 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`Deleted {count, plural, =1 {1 video} other {{count} videos}}.`)(
+            formatICU(
-              { count: videos.length },
+              $localize`Deleted {count, plural, =1 {1 video} other {{count} videos}}.`,
-              $localize`Deleted ${videos.length} videos.`
+              { count: videos.length }
            )
          )
@@ -249,9 +249,9 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`Unblocked {count, plural, =1 {1 video} other {{count} videos}}.`)(
+            formatICU(
-              { count: videos.length },
+              $localize`Unblocked {count, plural, =1 {1 video} other {{count} videos}}.`,
-              $localize`Unblocked ${videos.length} videos.`
+              { count: videos.length }
            )
          )
@@ -262,20 +262,20 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
      })
  }
-  private async removeVideoFiles (videos: Video[], type: 'hls' | 'webtorrent') {
+  private async removeVideoFiles (videos: Video[], type: 'hls' | 'web-videos') {
    let message: string
    if (type === 'hls') {
      // eslint-disable-next-line max-len
-      message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {1 HLS streaming playlist} other {{count} HLS streaming playlists}}?`)(
+      message = formatICU(
-        { count: videos.length },
+        $localize`Are you sure you want to delete {count, plural, =1 {1 HLS streaming playlist} other {{count} HLS streaming playlists}}?`,
-        $localize`Are you sure you want to delete ${videos.length} HLS streaming playlists?`
+        { count: videos.length }
      )
    } else {
      // eslint-disable-next-line max-len
-      message = prepareIcu($localize`Are you sure you want to delete WebTorrent files of {count, plural, =1 {1 video} other {{count} videos}}?`)(
+      message = formatICU(
-        { count: videos.length },
+        $localize`Are you sure you want to delete Web Video files of {count, plural, =1 {1 video} other {{count} videos}}?`,
-        $localize`Are you sure you want to delete WebTorrent files of ${videos.length} videos?`
+        { count: videos.length }
      )
    }
@@ -293,7 +293,7 @@ export class VideoListComponent extends RestTable <Video> implements OnInit {
      })
  }
-  private runTranscoding (videos: Video[], type: 'hls' | 'webtorrent') {
+  private runTranscoding (videos: Video[], type: 'hls' | 'web-video') {
    this.videoService.runTranscoding(videos.map(v => v.id), type)
      .subscribe({
        next: () => {
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts
index 8ba956eb8..8994c1d00 100644
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts
@@ -1,7 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main'
 import { RunnerJob, RunnerJobState } from '@shared/models'
 import { RunnerJobFormatted, RunnerService } from '../runner.service'
@@ -57,9 +57,10 @@ export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnI
  }
  async cancelJobs (jobs: RunnerJob[]) {
-    const message = prepareIcu(
+    const message = formatICU(
-      $localize`Do you really want to cancel {count, plural, =1 {this job} other {{count} jobs}}? Children jobs will also be cancelled.`
+      $localize`Do you really want to cancel {count, plural, =1 {this job} other {{count} jobs}}? Children jobs will also be cancelled.`,
-    )({ count: jobs.length }, $localize`Do you really want to cancel these jobs? Children jobs will also be cancelled.`)
+      { count: jobs.length }
+    )
    const res = await this.confirmService.confirm(message, $localize`Cancel`)
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts
index 97ffb6013..393c3ad6b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts
@@ -30,7 +30,7 @@ export class MyAccountTwoFactorButtonComponent implements OnInit {
  async disableTwoFactor () {
    const message = $localize`Are you sure you want to disable two factor authentication of your account?`
-    const { confirmed, password } = await this.confirmService.confirmWithPassword(message, $localize`Disable two factor`)
+    const { confirmed, password } = await this.confirmService.confirmWithPassword({ message, title: $localize`Disable two factor` })
    if (confirmed === false) return
    this.twoFactorService.disableTwoFactor({ userId: this.user.id, currentPassword: password })
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index 633720a6c..4d5dbbc2b 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -54,7 +54,7 @@ export class MyVideoChannelsComponent {
    const res = await this.confirmService.confirmWithExpectedInput(
      $localize`Do you really want to delete ${videoChannel.displayName}?
 It will delete ${videoChannel.videosCount} videos uploaded in this channel, and you will not be able to create another
-channel with the same name (${videoChannel.name})!`,
+channel or account with the same name (${videoChannel.name})!`,
      $localize`Please type the name of the video channel (${videoChannel.name}) to confirm`,
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 57b8bdf7d..1827d6a0b 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -5,7 +5,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-import { immutableAssign, prepareIcu } from '@app/helpers'
+import { immutableAssign, formatICU } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
@@ -184,9 +184,9 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
                                    .map(([ k, _v ]) => parseInt(k, 10))
    const res = await this.confirmService.confirm(
-      prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)(
+      formatICU(
-        { length: toDeleteVideosIds.length },
+        $localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`,
-        $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`
+        { length: toDeleteVideosIds.length }
      ),
      $localize`Delete`
    )
@@ -205,9 +205,9 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
      .subscribe({
        next: () => {
          this.notifier.success(
-            prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)(
+            formatICU(
-              { length: toDeleteVideosIds.length },
+              $localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`,
-              $localize`${toDeleteVideosIds.length} have been deleted.`
+              { length: toDeleteVideosIds.length }
            )
          )
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index b607dabe9..97b713874 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -120,7 +120,12 @@
              </div>
            </div>
-            <div *ngIf="schedulePublicationEnabled" class="form-group">
+            <div *ngIf="passwordProtectionSelected" class="form-group">
+              <label i18n for="videoPassword">Password</label>
+              <my-input-text formControlName="videoPassword" inputId="videoPassword" [withCopy]="true" [formError]="formErrors['videoPassword']"></my-input-text>
+            </div>
+            
+            <div *ngIf="schedulePublicationSelected" class="form-group">
              <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label>
              <p-calendar
                id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat"
@@ -287,7 +292,7 @@
            <div class="form-group mx-4" *ngIf="isSaveReplayEnabled()">
              <label i18n for="replayPrivacy">Privacy of the new replay</label>
              <my-select-options
-                labelForId="replayPrivacy" [items]="videoPrivacies" [clearable]="false" formControlName="replayPrivacy"
+                labelForId="replayPrivacy" [items]="replayPrivacies" [clearable]="false" formControlName="replayPrivacy"
              ></my-select-options>
            </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 8ed54ce6b..5e5df8db7 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -14,6 +14,7 @@ import {
  VIDEO_LICENCE_VALIDATOR,
  VIDEO_NAME_VALIDATOR,
  VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR,
+  VIDEO_PASSWORD_VALIDATOR,
  VIDEO_PRIVACY_VALIDATOR,
  VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR,
  VIDEO_SUPPORT_VALIDATOR,
@@ -79,7 +80,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  // So that it can be accessed in the template
  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
-  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
+  videoPrivacies: VideoConstant<VideoPrivacy | typeof VideoEdit.SPECIAL_SCHEDULED_PRIVACY > [] = []
+  replayPrivacies: VideoConstant<VideoPrivacy> [] = []
  videoCategories: VideoConstant<number>[] = []
  videoLicences: VideoConstant<number>[] = []
  videoLanguages: VideoLanguages[] = []
@@ -103,7 +105,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  pluginDataFormGroup: FormGroup
-  schedulePublicationEnabled = false
+  schedulePublicationSelected = false
+  passwordProtectionSelected = false
  calendarLocale: any = {}
  minScheduledDate = new Date()
@@ -148,6 +151,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
    const obj: { [ id: string ]: BuildFormValidator } = {
      name: VIDEO_NAME_VALIDATOR,
      privacy: VIDEO_PRIVACY_VALIDATOR,
+      videoPassword: VIDEO_PASSWORD_VALIDATOR,
      channelId: VIDEO_CHANNEL_VALIDATOR,
      nsfw: null,
      commentsEnabled: null,
@@ -222,7 +226,9 @@ export class VideoEditComponent implements OnInit, OnDestroy {
    this.serverService.getVideoPrivacies()
      .subscribe(privacies => {
-        this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies).videoPrivacies
+        const videoPrivacies = this.videoService.explainedPrivacyLabels(privacies).videoPrivacies
+        this.videoPrivacies = videoPrivacies
+        this.replayPrivacies = videoPrivacies.filter((privacy) => privacy.id !== VideoPrivacy.PASSWORD_PROTECTED)
        // Can't schedule publication if private privacy is not available (could be deleted by a plugin)
        const hasPrivatePrivacy = this.videoPrivacies.some(p => p.id === VideoPrivacy.PRIVATE)
@@ -410,13 +416,13 @@ export class VideoEditComponent implements OnInit, OnDestroy {
      .subscribe(
        newPrivacyId => {
-          this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
+          this.schedulePublicationSelected = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
          // Value changed
          const scheduleControl = this.form.get('schedulePublicationAt')
          const waitTranscodingControl = this.form.get('waitTranscoding')
-          if (this.schedulePublicationEnabled) {
+          if (this.schedulePublicationSelected) {
            scheduleControl.setValidators([ Validators.required ])
            waitTranscodingControl.disable()
@@ -437,6 +443,16 @@ export class VideoEditComponent implements OnInit, OnDestroy {
          this.firstPatchDone = true
+          this.passwordProtectionSelected = newPrivacyId === VideoPrivacy.PASSWORD_PROTECTED
+          const videoPasswordControl = this.form.get('videoPassword')
+          if (this.passwordProtectionSelected) {
+            videoPasswordControl.setValidators([ Validators.required ])
+          } else {
+            videoPasswordControl.clearValidators()
+          }
+          videoPasswordControl.updateValueAndValidity()
        }
      )
  }
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index ad71162b8..e51047e8c 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -10,7 +10,7 @@ import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { logger } from '@root-helpers/logger'
 import { pick, simpleObjectsDeepEqual } from '@shared/core-utils'
-import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
+import { LiveVideo, LiveVideoUpdate, VideoPrivacy, VideoState } from '@shared/models'
 import { VideoSource } from '@shared/models/videos/video-source'
 import { hydrateFormFromVideo } from './shared/video-edit-utils'
@@ -49,10 +49,10 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
    this.buildForm({})
    const { videoData } = this.route.snapshot.data
-    const { video, videoChannels, videoCaptions, videoSource, liveVideo } = videoData
+    const { video, videoChannels, videoCaptions, videoSource, liveVideo, videoPassword } = videoData
    this.videoDetails = video
-    this.videoEdit = new VideoEdit(this.videoDetails)
+    this.videoEdit = new VideoEdit(this.videoDetails, videoPassword)
    this.userVideoChannels = videoChannels
    this.videoCaptions = videoCaptions
@@ -98,11 +98,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
  }
  isWaitTranscodingHidden () {
-    if (this.videoDetails.getFiles().length > 1) { // Already transcoded
+    return this.videoDetails.state.id !== VideoState.TO_TRANSCODE
-      return true
-    }
-    return false
  }
  async update () {
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 6612d22de..2c99b36a8 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -4,8 +4,9 @@ import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot } from '@angular/router'
 import { AuthService } from '@app/core'
 import { listUserChannelsForSelect } from '@app/helpers'
-import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoDetails, VideoService, VideoPasswordService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
+import { VideoPrivacy } from '@shared/models/videos'
 @Injectable()
 export class VideoUpdateResolver {
@@ -13,7 +14,8 @@ export class VideoUpdateResolver {
    private videoService: VideoService,
    private liveVideoService: LiveVideoService,
    private authService: AuthService,
-    private videoCaptionService: VideoCaptionService
+    private videoCaptionService: VideoCaptionService,
+    private videoPasswordService: VideoPasswordService
  ) {
  }
@@ -21,11 +23,11 @@ export class VideoUpdateResolver {
    const uuid: string = route.params['uuid']
    return this.videoService.getVideo({ videoId: uuid })
-               .pipe(
+                .pipe(
-                 switchMap(video => forkJoin(this.buildVideoObservables(video))),
+                  switchMap(video => forkJoin(this.buildVideoObservables(video))),
-                 map(([ video, videoSource, videoChannels, videoCaptions, liveVideo ]) =>
+                  map(([ video, videoSource, videoChannels, videoCaptions, liveVideo, videoPassword ]) =>
-                   ({ video, videoChannels, videoCaptions, videoSource, liveVideo }))
+                    ({ video, videoChannels, videoCaptions, videoSource, liveVideo, videoPassword }))
-               )
+                )
  }
  private buildVideoObservables (video: VideoDetails) {
@@ -46,6 +48,10 @@ export class VideoUpdateResolver {
      video.isLive
        ? this.liveVideoService.getVideoLive(video.id)
+        : of(undefined),
+      video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+        ? this.videoPasswordService.getVideoPasswords({ videoUUID: video.uuid })
        : of(undefined)
    ]
  }
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
index cf32e371a..140a391e9 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
@@ -1,7 +1,7 @@
 <div class="video-actions-rates">
  <div class="video-actions justify-content-end">
    <my-video-rate
-      [video]="video" [isUserLoggedIn]="isUserLoggedIn"
+      [video]="video" [videoPassword]="videoPassword" [isUserLoggedIn]="isUserLoggedIn"
      (rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)"
    ></my-video-rate>
@@ -20,7 +20,7 @@
    <div
      class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
-       *ngIf="isUserLoggedIn" (openChange)="addContent.openChange($event)"
+       *ngIf="isVideoAddableToPlaylist()" (openChange)="addContent.openChange($event)"
       [ngbTooltip]="tooltipSaveToPlaylist"
       placement="bottom auto"
    >
@@ -43,7 +43,7 @@
        <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span>
      </button>
-      <my-video-download #videoDownloadModal></my-video-download>
+      <my-video-download #videoDownloadModal [videoPassword]="videoPassword"></my-video-download>
    </ng-container>
    <ng-container *ngIf="isUserLoggedIn">
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
index 51718827d..e6c0d4de1 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -5,7 +5,7 @@ import { VideoShareComponent } from '@app/shared/shared-share-modal'
 import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
-import { UserVideoRateType, VideoCaption } from '@shared/models/videos'
+import { UserVideoRateType, VideoCaption, VideoPrivacy } from '@shared/models/videos'
 @Component({
  selector: 'my-action-buttons',
@@ -18,10 +18,12 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  @Input() video: VideoDetails
+  @Input() videoPassword: string
  @Input() videoCaptions: VideoCaption[]
  @Input() playlist: VideoPlaylist
  @Input() isUserLoggedIn: boolean
+  @Input() isUserOwner: boolean
  @Input() currentTime: number
  @Input() currentPlaylistPosition: number
@@ -92,4 +94,14 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
  private setVideoLikesBarTooltipText () {
    this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
  }
+  isVideoAddableToPlaylist () {
+    const isPasswordProtected = this.video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+    if (!this.isUserLoggedIn) return false
+    if (isPasswordProtected) return this.isUserOwner
+    return true
+  }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
index d0c138834..11966ce34 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
@@ -12,6 +12,7 @@ import { UserVideoRateType } from '@shared/models'
 })
 export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
  @Input() video: VideoDetails
+  @Input() videoPassword: string
  @Input() isUserLoggedIn: boolean
  @Output() userRatingLoaded = new EventEmitter<UserVideoRateType>()
@@ -103,13 +104,13 @@ export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
  }
  private setRating (nextRating: UserVideoRateType) {
-    const ratingMethods: { [id in UserVideoRateType]: (id: string) => Observable<any> } = {
+    const ratingMethods: { [id in UserVideoRateType]: (id: string, videoPassword: string) => Observable<any> } = {
      like: this.videoService.setVideoLike,
      dislike: this.videoService.setVideoDislike,
      none: this.videoService.unsetVideoLike
    }
-    ratingMethods[nextRating].call(this.videoService, this.video.uuid)
+    ratingMethods[nextRating].call(this.videoService, this.video.uuid, this.videoPassword)
          .subscribe({
            next: () => {
              // Update the video like attribute
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
index 033097084..1d9e10d0a 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -29,6 +29,7 @@ import { VideoCommentCreate } from '@shared/models'
 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
  @Input() user: User
  @Input() video: Video
+  @Input() videoPassword: string
  @Input() parentComment?: VideoComment
  @Input() parentComments?: VideoComment[]
  @Input() focusOnInit = false
@@ -176,12 +177,17 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  private addCommentReply (commentCreate: VideoCommentCreate) {
    return this.videoCommentService
-      .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate)
+      .addCommentReply({
+        videoId: this.video.uuid,
+        inReplyToCommentId: this.parentComment.id,
+        comment: commentCreate,
+        videoPassword: this.videoPassword
+      })
  }
  private addCommentThread (commentCreate: VideoCommentCreate) {
    return this.videoCommentService
-      .addCommentThread(this.video.uuid, commentCreate)
+      .addCommentThread(this.video.uuid, commentCreate, this.videoPassword)
  }
  private initTextValue () {
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 91bd8309c..80ea22a20 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -62,6 +62,7 @@
        *ngIf="!comment.isDeleted && inReplyToCommentId === comment.id"
        [user]="user"
        [video]="video"
+        [videoPassword]="videoPassword"
        [parentComment]="comment"
        [parentComments]="newParentComments"
        [focusOnInit]="true"
@@ -75,6 +76,7 @@
          <my-video-comment
            [comment]="commentChild.comment"
            [video]="video"
+            [videoPassword]="videoPassword"
            [inReplyToCommentId]="inReplyToCommentId"
            [commentTree]="commentChild"
            [parentComments]="newParentComments"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
index 191ec4a28..4c85df657 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
@@ -16,6 +16,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
  @ViewChild('commentReportModal') commentReportModal: CommentReportComponent
  @Input() video: Video
+  @Input() videoPassword: string
  @Input() comment: VideoComment
  @Input() parentComments: VideoComment[] = []
  @Input() commentTree: VideoCommentThreadTree
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index a003a10eb..0932d2b7f 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -20,6 +20,7 @@
  <ng-template [ngIf]="video.commentsEnabled === true">
    <my-video-comment-add
      [video]="video"
+      [videoPassword]="videoPassword"
      [user]="user"
      (commentCreated)="onCommentThreadCreated($event)"
      [textValue]="commentThreadRedraftValue"
@@ -34,6 +35,7 @@
          *ngIf="highlightedThread"
          [comment]="highlightedThread"
          [video]="video"
+          [videoPassword]="videoPassword"
          [inReplyToCommentId]="inReplyToCommentId"
          [commentTree]="threadComments[highlightedThread.id]"
          [highlightedComment]="true"
@@ -53,6 +55,7 @@
          *ngIf="!highlightedThread || comment.id !== highlightedThread.id"
          [comment]="comment"
          [video]="video"
+          [videoPassword]="videoPassword"
          [inReplyToCommentId]="inReplyToCommentId"
          [commentTree]="threadComments[comment.id]"
          [firstInThread]="i + 1 !== comments.length"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
index 96bdb28c9..848936f91 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
@@ -15,6 +15,7 @@ import { PeerTubeProblemDocument, ServerErrorCode } from '@shared/models'
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
  @Input() video: VideoDetails
+  @Input() videoPassword: string
  @Input() user: User
  @Output() timestampClicked = new EventEmitter<number>()
@@ -80,7 +81,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
    const params = {
      videoId: this.video.uuid,
-      threadId: commentId
+      threadId: commentId,
+      videoPassword: this.videoPassword
    }
    const obs = this.hooks.wrapObsFun(
@@ -119,6 +121,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
  loadMoreThreads () {
    const params = {
      videoId: this.video.uuid,
+      videoPassword: this.videoPassword,
      componentPagination: this.componentPagination,
      sort: this.sort
    }
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
index 79b83811d..45e222743 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
@@ -42,3 +42,7 @@
  <div class="blocked-label" i18n>This video is blocked.</div>
  {{ video.blacklistedReason }}
 </div>
+<div i18n class="alert alert-warning" *ngIf="video?.canAccessPasswordProtectedVideoWithoutPassword(user)">
+  This video is password protected.
+</div>
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
index ba79fabc8..8781ead7e 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core'
+import { AuthUser } from '@app/core'
 import { VideoDetails } from '@app/shared/shared-main'
-import { VideoState } from '@shared/models'
+import { VideoPrivacy, VideoState } from '@shared/models'
 @Component({
  selector: 'my-video-alert',
@@ -8,6 +9,7 @@ import { VideoState } from '@shared/models'
  styleUrls: [ './video-alert.component.scss' ]
 })
 export class VideoAlertComponent {
+  @Input() user: AuthUser
  @Input() video: VideoDetails
  @Input() noPlaylistVideoFound: boolean
@@ -46,4 +48,8 @@ export class VideoAlertComponent {
  isLiveEnded () {
    return this.video?.state.id === VideoState.LIVE_ENDED
  }
+  isVideoPasswordProtected () {
+    return this.video?.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+  }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index ec85db0ff..97d71a510 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -152,12 +152,24 @@ export class VideoWatchPlaylistComponent {
    this.onPlaylistVideosNearOfBottom(position)
  }
+  // ---------------------------------------------------------------------------
  hasPreviousVideo () {
-    return !!this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
+    return !!this.getPreviousVideo()
+  }
+  getPreviousVideo () {
+    return this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
  }
+  // ---------------------------------------------------------------------------
  hasNextVideo () {
-    return !!this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
+    return !!this.getNextVideo()
+  }
+  getNextVideo () {
+    return this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
  }
  navigateToPreviousPlaylistVideo () {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 461891779..294ff4b3a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -8,7 +8,7 @@
    </div>
    <div id="videojs-wrapper">
-      <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
+      <video #playerElement class="video-js vjs-peertube-skin" playsinline="true"></video>
    </div>
    <my-video-watch-playlist
@@ -19,7 +19,7 @@
    <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
  </div>
-  <my-video-alert [video]="video" [noPlaylistVideoFound]="noPlaylistVideoFound"></my-video-alert>
+  <my-video-alert [video]="video" [user]="user" [noPlaylistVideoFound]="noPlaylistVideoFound"></my-video-alert>
  <!-- Video information -->
  <div *ngIf="video" class="margin-content video-bottom">
@@ -51,8 +51,8 @@
              </div>
              <my-action-buttons
-                [video]="video" [isUserLoggedIn]="isUserLoggedIn()" [videoCaptions]="videoCaptions" [playlist]="playlist"
+                [video]="video" [videoPassword]="videoPassword" [isUserLoggedIn]="isUserLoggedIn()" [isUserOwner]="isUserOwner()" [videoCaptions]="videoCaptions"
-                [currentTime]="getCurrentTime()" [currentPlaylistPosition]="getCurrentPlaylistPosition()"
+                [playlist]="playlist" [currentTime]="getCurrentTime()" [currentPlaylistPosition]="getCurrentPlaylistPosition()"
              ></my-action-buttons>
            </div>
          </div>
@@ -92,6 +92,7 @@
      <my-video-comments
        class="border-top"
        [video]="video"
+        [videoPassword]="videoPassword"
        [user]="user"
        (timestampClicked)="handleTimestampClicked($event)"
      ></my-video-comments>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 19ad97d42..aebec52fb 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -1,6 +1,5 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
-import { VideoJsPlayer } from 'video.js'
 import { PlatformLocation } from '@angular/common'
 import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -19,13 +18,13 @@ import {
  UserService
 } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { isXPercentInViewport, scrollToTop } from '@app/helpers'
+import { isXPercentInViewport, scrollToTop, toBoolean } from '@app/helpers'
 import { Video, VideoCaptionService, VideoDetails, VideoFileTokenService, VideoService } from '@app/shared/shared-main'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { logger } from '@root-helpers/logger'
-import { isP2PEnabled, videoRequiresAuth } from '@root-helpers/video'
+import { isP2PEnabled, videoRequiresFileToken, videoRequiresUserAuth } from '@root-helpers/video'
 import { timeToInt } from '@shared/core-utils'
 import {
  HTMLServerConfig,
@@ -33,15 +32,16 @@ import {
  LiveVideo,
  PeerTubeProblemDocument,
  ServerErrorCode,
+  Storyboard,
  VideoCaption,
  VideoPrivacy,
  VideoState
 } from '@shared/models'
 import {
-  CustomizationOptions,
+  HLSOptions,
-  P2PMediaLoaderOptions,
+  PeerTubePlayer,
-  PeertubePlayerManager,
+  PeerTubePlayerContructorOptions,
-  PeertubePlayerManagerOptions,
+  PeerTubePlayerLoadOptions,
  PlayerMode,
  videojs
 } from '../../../assets/player'
@@ -49,7 +49,24 @@ import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from
 import { environment } from '../../../environments/environment'
 import { VideoWatchPlaylistComponent } from './shared'
-type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
+type URLOptions = {
+  playerMode: PlayerMode
+  startTime: number | string
+  stopTime: number | string
+  controls?: boolean
+  controlBar?: boolean
+  muted?: boolean
+  loop?: boolean
+  subtitle?: string
+  resume?: string
+  peertubeLink: boolean
+  playbackRate?: number | string
+}
 @Component({
  selector: 'my-video-watch',
@@ -59,15 +76,16 @@ type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
 export class VideoWatchComponent implements OnInit, OnDestroy {
  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('playerElement') playerElement: ElementRef<HTMLVideoElement>
-  player: VideoJsPlayer
+  peertubePlayer: PeerTubePlayer
-  playerElement: HTMLVideoElement
-  playerPlaceholderImgSrc: string
  theaterEnabled = false
  video: VideoDetails = null
  videoCaptions: VideoCaption[] = []
  liveVideo: LiveVideo
+  videoPassword: string
+  storyboards: Storyboard[] = []
  playlistPosition: number
  playlist: VideoPlaylist = null
@@ -75,8 +93,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  remoteServerDown = false
  noPlaylistVideoFound = false
-  private nextVideoUUID = ''
+  private nextRecommendedVideoUUID = ''
-  private nextVideoTitle = ''
+  private nextRecommendedVideoTitle = ''
  private videoFileToken: string
@@ -127,11 +145,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return this.userService.getAnonymousUser()
  }
-  ngOnInit () {
+  async ngOnInit () {
    this.serverConfig = this.serverService.getHTMLConfig()
-    PeertubePlayerManager.initState()
    this.loadRouteParams()
    this.loadRouteQuery()
@@ -140,10 +156,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.hooks.runAction('action:video-watch.init', 'video-watch')
    setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
+    const constructorOptions = await this.hooks.wrapFun(
+      this.buildPeerTubePlayerConstructorOptions.bind(this),
+      { urlOptions: this.getUrlOptions() },
+      'video-watch',
+      'filter:internal.video-watch.player.build-options.params',
+      'filter:internal.video-watch.player.build-options.result'
+    )
+    this.peertubePlayer = new PeerTubePlayer(constructorOptions)
  }
  ngOnDestroy () {
-    this.flushPlayer()
+    if (this.peertubePlayer) this.peertubePlayer.destroy()
    // Unsubscribe subscriptions
    if (this.paramsSub) this.paramsSub.unsubscribe()
@@ -168,14 +194,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    // The recommended videos's first element should be the next video
    const video = videos[0]
-    this.nextVideoUUID = video.uuid
+    this.nextRecommendedVideoUUID = video.uuid
-    this.nextVideoTitle = video.name
+    this.nextRecommendedVideoTitle = video.name
  }
  handleTimestampClicked (timestamp: number) {
-    if (!this.player || this.video.isLive) return
+    if (!this.peertubePlayer || this.video.isLive) return
-    this.player.currentTime(timestamp)
+    this.peertubePlayer.getPlayer().currentTime(timestamp)
    scrollToTop()
  }
@@ -191,6 +217,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return this.authService.isLoggedIn()
  }
+  isUserOwner () {
+    return this.video.isLocal === true && this.video.account.name === this.user?.username
+  }
  isVideoBlur (video: Video) {
    return video.isVideoNSFWForUser(this.user, this.serverConfig)
  }
@@ -236,25 +266,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
      const start = queryParams['start']
-      if (this.player && start) this.player.currentTime(parseInt(start, 10))
+      if (this.peertubePlayer && start) this.peertubePlayer.getPlayer().currentTime(parseInt(start, 10))
    })
  }
  private loadVideo (options: {
    videoId: string
    forceAutoplay: boolean
+    videoPassword?: string
  }) {
-    const { videoId, forceAutoplay } = options
+    const { videoId, forceAutoplay, videoPassword } = options
    if (this.isSameElement(this.video, videoId)) return
-    if (this.player) this.player.pause()
    this.video = undefined
    const videoObs = this.hooks.wrapObsFun(
      this.videoService.getVideo.bind(this.videoService),
-      { videoId },
+      { videoId, videoPassword },
      'video-watch',
      'filter:api.video-watch.video.get.params',
      'filter:api.video-watch.video.get.result'
@@ -269,48 +298,44 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      }),
      switchMap(({ video, live }) => {
-        if (!videoRequiresAuth(video)) return of({ video, live, videoFileToken: undefined })
+        if (!videoRequiresFileToken(video)) return of({ video, live, videoFileToken: undefined })
-        return this.videoFileTokenService.getVideoFileToken(video.uuid)
+        return this.videoFileTokenService.getVideoFileToken({ videoUUID: video.uuid, videoPassword })
          .pipe(map(({ token }) => ({ video, live, videoFileToken: token })))
      })
    )
    forkJoin([
      videoAndLiveObs,
-      this.videoCaptionService.listCaptions(videoId),
+      this.videoCaptionService.listCaptions(videoId, videoPassword),
+      this.videoService.getStoryboards(videoId, videoPassword),
      this.userService.getAnonymousOrLoggedUser()
    ]).subscribe({
-      next: ([ { video, live, videoFileToken }, captionsResult, loggedInOrAnonymousUser ]) => {
+      next: ([ { video, live, videoFileToken }, captionsResult, storyboards, loggedInOrAnonymousUser ]) => {
-        const queryParams = this.route.snapshot.queryParams
-        const urlOptions = {
-          resume: queryParams.resume,
-          startTime: queryParams.start,
-          stopTime: queryParams.stop,
-          muted: queryParams.muted,
-          loop: queryParams.loop,
-          subtitle: queryParams.subtitle,
-          playerMode: queryParams.mode,
-          playbackRate: queryParams.playbackRate,
-          peertubeLink: false
-        }
        this.onVideoFetched({
          video,
          live,
          videoCaptions: captionsResult.data,
+          storyboards,
          videoFileToken,
+          videoPassword,
          loggedInOrAnonymousUser,
-          urlOptions,
          forceAutoplay
-        }).catch(err => this.handleGlobalError(err))
+        }).catch(err => {
+          this.handleGlobalError(err)
+        })
      },
+      error: async err => {
+        if (err.body.code === ServerErrorCode.VIDEO_REQUIRES_PASSWORD || err.body.code === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) {
+          const { confirmed, password } = await this.handleVideoPasswordError(err)
-      error: err => this.handleRequestError(err)
+          if (confirmed === false) return this.location.back()
+          this.loadVideo({ ...options, videoPassword: password })
+        } else {
+          this.handleRequestError(err)
+        }
+      }
    })
  }
@@ -364,28 +389,47 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    const errorMessage: string = typeof err === 'string' ? err : err.message
    if (!errorMessage) return
-    // Display a message in the video player instead of a notification
+    this.notifier.error(errorMessage)
-    if (errorMessage.includes('from xs param')) {
+  }
-      this.flushPlayer()
-      this.remoteServerDown = true
-      return
+  private handleVideoPasswordError (err: any) {
+    let isIncorrectPassword: boolean
+    if (err.body.code === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) {
+      isIncorrectPassword = false
+    } else if (err.body.code === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) {
+      this.videoPassword = undefined
+      isIncorrectPassword = true
    }
-    this.notifier.error(errorMessage)
+    return this.confirmService.confirmWithPassword({
+      message: $localize`You need a password to watch this video`,
+      title: $localize`This video is password protected`,
+      errorMessage: isIncorrectPassword ? $localize`Incorrect password, please enter a correct password` : ''
+    })
  }
  private async onVideoFetched (options: {
    video: VideoDetails
    live: LiveVideo
    videoCaptions: VideoCaption[]
+    storyboards: Storyboard[]
    videoFileToken: string
+    videoPassword: string
-    urlOptions: URLOptions
    loggedInOrAnonymousUser: User
    forceAutoplay: boolean
  }) {
-    const { video, live, videoCaptions, urlOptions, videoFileToken, loggedInOrAnonymousUser, forceAutoplay } = options
+    const {
+      video,
+      live,
+      videoCaptions,
+      storyboards,
+      videoFileToken,
+      videoPassword,
+      loggedInOrAnonymousUser,
+      forceAutoplay
+    } = options
    this.subscribeToLiveEventsIfNeeded(this.video, video)
@@ -393,9 +437,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.videoCaptions = videoCaptions
    this.liveVideo = live
    this.videoFileToken = videoFileToken
+    this.videoPassword = videoPassword
+    this.storyboards = storyboards
    // Re init attributes
-    this.playerPlaceholderImgSrc = undefined
    this.remoteServerDown = false
    this.currentTime = undefined
@@ -409,7 +454,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.buildHotkeysHelp(video)
-    this.buildPlayer({ urlOptions, loggedInOrAnonymousUser, forceAutoplay })
+    this.loadPlayer({ loggedInOrAnonymousUser, forceAutoplay })
      .catch(err => logger.error('Cannot build the player', err))
    this.setOpenGraphTags()
@@ -422,114 +467,70 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
  }
-  private async buildPlayer (options: {
+  private async loadPlayer (options: {
-    urlOptions: URLOptions
    loggedInOrAnonymousUser: User
    forceAutoplay: boolean
  }) {
-    const { urlOptions, loggedInOrAnonymousUser, forceAutoplay } = options
+    const { loggedInOrAnonymousUser, forceAutoplay } = options
-    // Flush old player if needed
-    this.flushPlayer()
    const videoState = this.video.state.id
    if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) {
-      this.playerPlaceholderImgSrc = this.video.previewPath
+      this.updatePlayerOnNoLive()
      return
    }
-    // Build video element, because videojs removes it on dispose
+    this.peertubePlayer?.enable()
-    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
-    this.playerElement = document.createElement('video')
-    this.playerElement.className = 'video-js vjs-peertube-skin'
-    this.playerElement.setAttribute('playsinline', 'true')
-    playerElementWrapper.appendChild(this.playerElement)
    const params = {
      video: this.video,
      videoCaptions: this.videoCaptions,
+      storyboards: this.storyboards,
      liveVideo: this.liveVideo,
      videoFileToken: this.videoFileToken,
-      urlOptions,
+      videoPassword: this.videoPassword,
+      urlOptions: this.getUrlOptions(),
      loggedInOrAnonymousUser,
      forceAutoplay,
      user: this.user
    }
-    const { playerMode, playerOptions } = await this.hooks.wrapFun(
-      this.buildPlayerManagerOptions.bind(this),
+    const loadOptions = await this.hooks.wrapFun(
+      this.buildPeerTubePlayerLoadOptions.bind(this),
      params,
      'video-watch',
-      'filter:internal.video-watch.player.build-options.params',
+      'filter:internal.video-watch.player.load-options.params',
-      'filter:internal.video-watch.player.build-options.result'
+      'filter:internal.video-watch.player.load-options.result'
    )
    this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
+      await this.peertubePlayer.load(loadOptions)
-      this.player.on('customError', (_e, data: any) => {
+      const player = this.peertubePlayer.getPlayer()
-        this.zone.run(() => this.handleGlobalError(data.err))
-      })
-      this.player.on('timeupdate', () => {
+      player.on('timeupdate', () => {
        // Don't need to trigger angular change for this variable, that is sent to children components on click
-        this.currentTime = Math.floor(this.player.currentTime())
+        this.currentTime = Math.floor(player.currentTime())
      })
-      /**
+      if (this.video.isLive) {
-       * condition: true to make the upnext functionality trigger, false to disable the upnext functionality
+        player.one('ended', () => {
-       *            go to the next video in 'condition()' if you don't want of the timer.
+          this.zone.run(() => {
-       * next: function triggered at the end of the timer.
+            // We changed the video, it's not a live anymore
-       * suspended: function used at each click of the timer checking if we need to reset progress
+            if (!this.video.isLive) return
-       *            and wait until suspended becomes truthy again.
-       */
-      this.player.upnext({
-        timeout: 5000, // 5s
-        headText: $localize`Up Next`,
-        cancelText: $localize`Cancel`,
-        suspendedText: $localize`Autoplay is suspended`,
-        getTitle: () => this.nextVideoTitle,
-        next: () => this.zone.run(() => this.playNextVideoInAngularZone()),
+            this.video.state.id = VideoState.LIVE_ENDED
-        condition: () => {
-          if (!this.playlist) return this.isAutoPlayNext()
-          // Don't wait timeout to play the next playlist video
+            this.updatePlayerOnNoLive()
-          if (this.isPlaylistAutoPlayNext()) {
+          })
-            this.playNextVideoInAngularZone()
+        })
-            return undefined
+      }
-          }
-          return false
-        },
-        suspended: () => {
-          return (
-            !isXPercentInViewport(this.player.el() as HTMLElement, 80) ||
-            !document.getElementById('content').contains(document.activeElement)
-          )
-        }
-      })
-      this.player.one('stopped', () => {
-        if (this.playlist && this.isPlaylistAutoPlayNext()) {
-          this.playNextVideoInAngularZone()
-        }
-      })
-      this.player.one('ended', () => {
-        if (this.video.isLive) {
-          this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED)
-        }
-      })
-      this.player.on('theaterChange', (_: any, enabled: boolean) => {
+      player.on('theater-change', (_: any, enabled: boolean) => {
        this.zone.run(() => this.theaterEnabled = enabled)
      })
      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', {
-        player: this.player,
+        player,
        playlist: this.playlist,
        playlistPosition: this.playlistPosition,
        videojs,
@@ -546,15 +547,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return true
  }
-  private playNextVideoInAngularZone () {
+  private getNextVideoTitle () {
    if (this.playlist) {
-      this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+      return this.videoWatchPlaylist.getNextVideo()?.video?.name || ''
-      return
    }
-    if (this.nextVideoUUID) {
+    return this.nextRecommendedVideoTitle
-      this.router.navigate([ '/w', this.nextVideoUUID ])
+  }
-    }
+  private playNextVideoInAngularZone () {
+    this.zone.run(() => {
+      if (this.playlist) {
+        this.videoWatchPlaylist.navigateToNextPlaylistVideo()
+        return
+      }
+      if (this.nextRecommendedVideoUUID) {
+        this.router.navigate([ '/w', this.nextRecommendedVideoUUID ])
+      }
+    })
  }
  private isAutoplay () {
@@ -582,32 +593,93 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    )
  }
-  private flushPlayer () {
+  private buildPeerTubePlayerConstructorOptions (options: {
-    // Remove player if it exists
+    urlOptions: URLOptions
-    if (!this.player) return
+  }): PeerTubePlayerContructorOptions {
+    const { urlOptions } = options
+    return {
+      playerElement: () => this.playerElement.nativeElement,
+      enableHotkeys: true,
+      inactivityTimeout: 2500,
+      theaterButton: true,
+      controls: urlOptions.controls,
+      controlBar: urlOptions.controlBar,
+      muted: urlOptions.muted,
+      loop: urlOptions.loop,
+      playbackRate: urlOptions.playbackRate,
+      instanceName: this.serverConfig.instance.name,
+      language: this.localeId,
+      metricsUrl: environment.apiUrl + '/api/v1/metrics/playback',
+      videoViewIntervalMs: VideoWatchComponent.VIEW_VIDEO_INTERVAL_MS,
+      authorizationHeader: () => this.authService.getRequestHeaderValue(),
-    try {
+      serverUrl: environment.originServerUrl || window.location.origin,
-      this.player.dispose()
-      this.player = undefined
+      errorNotifier: (message: string) => this.notifier.error(message),
-    } catch (err) {
-      logger.error('Cannot dispose player.', err)
+      peertubeLink: () => false,
+      pluginsManager: this.pluginService.getPluginsManager()
    }
  }
-  private buildPlayerManagerOptions (params: {
+  private buildPeerTubePlayerLoadOptions (options: {
    video: VideoDetails
    liveVideo: LiveVideo
    videoCaptions: VideoCaption[]
+    storyboards: Storyboard[]
    videoFileToken: string
+    videoPassword: string
-    urlOptions: CustomizationOptions & { playerMode: PlayerMode }
+    urlOptions: URLOptions
    loggedInOrAnonymousUser: User
    forceAutoplay: boolean
    user?: AuthUser // Keep for plugins
-  }) {
+  }): PeerTubePlayerLoadOptions {
-    const { video, liveVideo, videoCaptions, videoFileToken, urlOptions, loggedInOrAnonymousUser, forceAutoplay } = params
+    const {
+      video,
+      liveVideo,
+      videoCaptions,
+      storyboards,
+      videoFileToken,
+      videoPassword,
+      urlOptions,
+      loggedInOrAnonymousUser,
+      forceAutoplay
+    } = options
+    let mode: PlayerMode
+    if (urlOptions.playerMode) {
+      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
+      else mode = 'web-video'
+    } else {
+      if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
+      else mode = 'web-video'
+    }
+    let hlsOptions: HLSOptions
+    if (video.hasHlsPlaylist()) {
+      const hlsPlaylist = video.getHlsPlaylist()
+      hlsOptions = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: video.trackerUrls,
+        videoFiles: hlsPlaylist.files
+      }
+    }
    const getStartTime = () => {
      const byUrl = urlOptions.startTime !== undefined
@@ -634,117 +706,93 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      src: environment.apiUrl + c.captionPath
    }))
+    const storyboard = storyboards.length !== 0
+      ? {
+        url: environment.apiUrl + storyboards[0].storyboardPath,
+        height: storyboards[0].spriteHeight,
+        width: storyboards[0].spriteWidth,
+        interval: storyboards[0].spriteDuration
+      }
+      : undefined
    const liveOptions = video.isLive
      ? { latencyMode: liveVideo.latencyMode }
      : undefined
-    const options: PeertubePlayerManagerOptions = {
+    return {
-      common: {
+      mode,
-        autoplay: this.isAutoplay(),
-        forceAutoplay,
-        p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
-        hasNextVideo: () => this.hasNextVideo(),
-        nextVideo: () => this.playNextVideoInAngularZone(),
-        playerElement: this.playerElement,
-        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
-        videoDuration: video.duration,
-        enableHotkeys: true,
-        inactivityTimeout: 2500,
-        poster: video.previewUrl,
-        startTime,
-        stopTime: urlOptions.stopTime,
-        controlBar: urlOptions.controlBar,
-        controls: urlOptions.controls,
-        muted: urlOptions.muted,
-        loop: urlOptions.loop,
-        subtitle: urlOptions.subtitle,
-        playbackRate: urlOptions.playbackRate,
-        peertubeLink: urlOptions.peertubeLink,
+      autoplay: this.isAutoplay(),
+      forceAutoplay,
-        theaterButton: true,
+      duration: this.video.duration,
-        captions: videoCaptions.length !== 0,
+      poster: video.previewUrl,
+      p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
-        embedUrl: video.embedUrl,
+      startTime,
-        embedTitle: video.name,
+      stopTime: urlOptions.stopTime,
-        instanceName: this.serverConfig.instance.name,
-        isLive: video.isLive,
+      embedUrl: video.embedUrl,
-        liveOptions,
+      embedTitle: video.name,
-        language: this.localeId,
+      isLive: video.isLive,
+      liveOptions,
-        metricsUrl: environment.apiUrl + '/api/v1/metrics/playback',
+      videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
+        ? this.videoService.getVideoViewUrl(video.uuid)
+        : null,
-        videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
+      videoFileToken: () => videoFileToken,
-          ? this.videoService.getVideoViewUrl(video.uuid)
+      requiresUserAuth: videoRequiresUserAuth(video, videoPassword),
-          : null,
+      requiresPassword: video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED &&
-        videoViewIntervalMs: VideoWatchComponent.VIEW_VIDEO_INTERVAL_MS,
+        !video.canAccessPasswordProtectedVideoWithoutPassword(this.user),
-        authorizationHeader: () => this.authService.getRequestHeaderValue(),
+      videoPassword: () => videoPassword,
-        serverUrl: environment.originServerUrl || window.location.origin,
+      videoCaptions: playerCaptions,
+      storyboard,
-        videoFileToken: () => videoFileToken,
+      videoShortUUID: video.shortUUID,
-        requiresAuth: videoRequiresAuth(video),
+      videoUUID: video.uuid,
-        videoCaptions: playerCaptions,
+      previousVideo: {
+        enabled: this.playlist && this.videoWatchPlaylist.hasPreviousVideo(),
-        videoShortUUID: video.shortUUID,
+        handler: this.playlist
-        videoUUID: video.uuid,
+          ? () => this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
+          : undefined,
-        errorNotifier: (message: string) => this.notifier.error(message)
+        displayControlBarButton: !!this.playlist
      },
-      webtorrent: {
+      nextVideo: {
-        videoFiles: video.files
+        enabled: this.hasNextVideo(),
+        handler: () => this.playNextVideoInAngularZone(),
+        getVideoTitle: () => this.getNextVideoTitle(),
+        displayControlBarButton: this.hasNextVideo()
      },
-      pluginsManager: this.pluginService.getPluginsManager()
+      upnext: {
-    }
+        isEnabled: () => {
+          if (this.playlist) return this.isPlaylistAutoPlayNext()
-    // Only set this if we're in a playlist
+          return this.isAutoPlayNext()
-    if (this.playlist) {
+        },
-      options.common.hasPreviousVideo = () => this.videoWatchPlaylist.hasPreviousVideo()
-      options.common.previousVideo = () => {
-        this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
-      }
-    }
-    let mode: PlayerMode
-    if (urlOptions.playerMode) {
-      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    } else {
-      if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    }
-    // p2p-media-loader needs TextEncoder, fallback on WebTorrent if not available
+        isSuspended: (player: videojs.Player) => {
-    if (typeof TextEncoder === 'undefined') {
+          return !isXPercentInViewport(player.el() as HTMLElement, 80)
-      mode = 'webtorrent'
+        },
-    }
-    if (mode === 'p2p-media-loader') {
+        timeout: this.playlist
-      const hlsPlaylist = video.getHlsPlaylist()
+          ? 0 // Don't wait to play next video in playlist
+          : 5000 // 5 seconds for a recommended video
+      },
-      const p2pMediaLoader = {
+      hls: hlsOptions,
-        playlistUrl: hlsPlaylist.playlistUrl,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        trackerAnnounce: video.trackerUrls,
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
-      Object.assign(options, { p2pMediaLoader })
+      webVideo: {
+        videoFiles: video.files
+      }
    }
-    return { playerMode: mode, playerOptions: options }
  }
  private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
@@ -792,6 +840,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.video.viewers = newViewers
  }
+  private updatePlayerOnNoLive () {
+    this.peertubePlayer.unload()
+    this.peertubePlayer.disable()
+    this.peertubePlayer.setPoster(this.video.previewPath)
+  }
  private buildHotkeysHelp (video: Video) {
    if (this.hotkeys.length !== 0) {
      this.hotkeysService.remove(this.hotkeys)
@@ -863,4 +917,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.metaService.setTag('og:url', window.location.href)
    this.metaService.setTag('url', window.location.href)
  }
+  private getUrlOptions (): URLOptions {
+    const queryParams = this.route.snapshot.queryParams
+    return {
+      resume: queryParams.resume,
+      startTime: queryParams.start,
+      stopTime: queryParams.stop,
+      muted: toBoolean(queryParams.muted),
+      loop: toBoolean(queryParams.loop),
+      subtitle: queryParams.subtitle,
+      playerMode: queryParams.mode,
+      playbackRate: queryParams.playbackRate,
+      controlBar: toBoolean(queryParams.controlBar),
+      peertubeLink: false
+    }
+  }
 }
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 7e4fac730..9339865f1 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -12,13 +12,14 @@ import { CoreModule, PluginService, RedirectService, ServerService } from './cor
 import { EmptyComponent } from './empty.component'
 import { HeaderComponent, SearchTypeaheadComponent, SuggestionComponent } from './header'
 import { HighlightPipe } from './header/highlight.pipe'
+import { polyfillICU } from './helpers'
 import { LanguageChooserComponent, MenuComponent, NotificationComponent } from './menu'
+import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
+import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
 import { ConfirmComponent } from './modal/confirm.component'
 import { CustomModalComponent } from './modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
 import { QuickSettingsModalComponent } from './modal/quick-settings-modal.component'
-import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
-import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
 import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from './shared/shared-forms'
 import { SharedGlobalIconModule } from './shared/shared-icons'
@@ -90,6 +91,11 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
      useFactory: loadConfigFactory,
      deps: [ ServerService, PluginService, RedirectService ],
      multi: true
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => polyfillICU,
+      multi: true
    }
  ]
 })
diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts
index 89a25f0a5..abe163aae 100644
--- a/client/src/app/core/confirm/confirm.service.ts
+++ b/client/src/app/core/confirm/confirm.service.ts
@@ -4,6 +4,7 @@ import { Injectable } from '@angular/core'
 type ConfirmOptions = {
  title: string
  message: string
+  errorMessage?: string
 } & (
  {
    type: 'confirm'
@@ -12,6 +13,7 @@ type ConfirmOptions = {
  {
    type: 'confirm-password'
    confirmButtonText?: string
+    isIncorrectPassword?: boolean
  } |
  {
    type: 'confirm-expected-input'
@@ -32,8 +34,14 @@ export class ConfirmService {
    return firstValueFrom(this.extractConfirmed(this.confirmResponse.asObservable()))
  }
-  confirmWithPassword (message: string, title = '', confirmButtonText?: string) {
+  confirmWithPassword (options: {
-    this.showConfirm.next({ type: 'confirm-password', title, message, confirmButtonText })
+    message: string
+    title?: string
+    confirmButtonText?: string
+    errorMessage?: string
+  }) {
+    const { message, title = '', confirmButtonText, errorMessage } = options
+    this.showConfirm.next({ type: 'confirm-password', title, message, confirmButtonText, errorMessage })
    const obs = this.confirmResponse.asObservable()
      .pipe(map(({ confirmed, value }) => ({ confirmed, password: value })))
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index d57608f1c..5aa02e472 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -30,8 +30,6 @@ export class User implements UserServerModel {
  autoPlayNextVideoPlaylist: boolean
  p2pEnabled: boolean
-  // FIXME: deprecated in 4.1
-  webTorrentEnabled: never
  videosHistoryEnabled: boolean
  videoLanguages: string[]
diff --git a/client/src/app/helpers/i18n-utils.ts b/client/src/app/helpers/i18n-utils.ts
index b7d73d16b..9e22bb4c1 100644
--- a/client/src/app/helpers/i18n-utils.ts
+++ b/client/src/app/helpers/i18n-utils.ts
@@ -1,4 +1,6 @@
 import IntlMessageFormat from 'intl-messageformat'
+import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill'
+import { shouldPolyfill as shouldPolyfillPlural } from '@formatjs/intl-pluralrules/should-polyfill'
 import { logger } from '@root-helpers/logger'
 import { environment } from '../../environments/environment'
@@ -10,31 +12,68 @@ function getDevLocale () {
  return 'fr-FR'
 }
-function prepareIcu (icu: string) {
+async function polyfillICU () {
-  let alreadyWarned = false
+  // Important to be in this order, Plural needs Locale (https://formatjs.io/docs/polyfills/intl-pluralrules)
+  await polyfillICULocale()
+  await polyfillICUPlural()
+}
-  try {
+async function polyfillICULocale () {
-    const msg = new IntlMessageFormat(icu, $localize.locale)
+  // This locale is supported
+  if (shouldPolyfillLocale()) {
+    // TODO: remove, it's only needed to support Plural polyfill and so iOS 12
+    console.log('Loading Intl Locale polyfill for ' + $localize.locale)
+    await import('@formatjs/intl-locale/polyfill')
+  }
+}
+async function polyfillICUPlural () {
+  const unsupportedLocale = shouldPolyfillPlural($localize.locale)
+  // This locale is supported
+  if (!unsupportedLocale) {
+    return
+  }
-    return (context: { [id: string]: number | string }, fallback: string) => {
+  // TODO: remove, it's only needed to support iOS 12
-      try {
+  console.log('Loading Intl Plural rules polyfill for ' + $localize.locale)
-        return msg.format(context) as string
-      } catch (err) {
-        if (!alreadyWarned) logger.warn(`Cannot format ICU ${icu}.`, err)
-        alreadyWarned = true
+  // Load the polyfill 1st BEFORE loading data
-        return fallback
+  await import('@formatjs/intl-pluralrules/polyfill-force')
-      }
+  // Degraded mode, so only load the en local data
+  await import(`@formatjs/intl-pluralrules/locale-data/en.js`)
+}
+// ---------------------------------------------------------------------------
+const icuCache = new Map<string, IntlMessageFormat>()
+const icuWarnings = new Set<string>()
+const fallback = 'String translation error'
+function formatICU (icu: string, context: { [id: string]: number | string }) {
+  try {
+    let msg = icuCache.get(icu)
+    if (!msg) {
+      msg = new IntlMessageFormat(icu, $localize.locale)
+      icuCache.set(icu, msg)
    }
+    return msg.format(context) as string
  } catch (err) {
-    logger.warn(`Cannot build intl message ${icu}.`, err)
+    if (!icuWarnings.has(icu)) {
+      logger.warn(`Cannot format ICU ${icu}.`, err)
+    }
-    return (_context: unknown, fallback: string) => fallback
+    icuWarnings.add(icu)
+    return fallback
  }
 }
 export {
  getDevLocale,
-  prepareIcu,
+  polyfillICU,
+  formatICU,
  isOnDevLocale
 }
diff --git a/client/src/app/helpers/utils/object.ts b/client/src/app/helpers/utils/object.ts
index 69b2b18c0..b69e31edf 100644
--- a/client/src/app/helpers/utils/object.ts
+++ b/client/src/app/helpers/utils/object.ts
@@ -34,6 +34,8 @@ function toBoolean (value: any) {
  if (value === 'true') return true
  if (value === 'false') return false
+  if (value === '1') return true
+  if (value === '0') return false
  return undefined
 }
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index 6584db3e6..33696d0a5 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -12,10 +12,12 @@
    <div *ngIf="inputLabel" class="form-group mt-3">
      <label for="confirmInput">{{ inputLabel }}</label>
-      <input *ngIf="!isPasswordInput" type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
+      <input *ngIf="!isPasswordInput" type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()" />
-      <my-input-text *ngIf="isPasswordInput" inputId="confirmInput" [(ngModel)]="inputValue"></my-input-text>
+      <my-input-text *ngIf="isPasswordInput" inputId="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()"></my-input-text>
    </div>
+    <div *ngIf="hasError()" class="text-danger">{{ errorMessage }}</div>
  </div>
  <div class="modal-footer inputs">
diff --git a/client/src/app/modal/confirm.component.ts b/client/src/app/modal/confirm.component.ts
index 3bb8b9b21..43369befa 100644
--- a/client/src/app/modal/confirm.component.ts
+++ b/client/src/app/modal/confirm.component.ts
@@ -21,6 +21,8 @@ export class ConfirmComponent implements OnInit {
  inputValue = ''
  confirmButtonText = ''
+  errorMessage = ''
  isPasswordInput = false
  private openedModal: NgbModalRef
@@ -42,8 +44,9 @@ export class ConfirmComponent implements OnInit {
        this.inputValue = ''
        this.confirmButtonText = ''
        this.isPasswordInput = false
+        this.errorMessage = ''
-        const { type, title, message, confirmButtonText } = payload
+        const { type, title, message, confirmButtonText, errorMessage } = payload
        this.title = title
@@ -53,6 +56,7 @@ export class ConfirmComponent implements OnInit {
        } else if (type === 'confirm-password') {
          this.inputLabel = $localize`Confirm your password`
          this.isPasswordInput = true
+          this.errorMessage = errorMessage
        }
        this.confirmButtonText = confirmButtonText || $localize`Confirm`
@@ -78,6 +82,9 @@ export class ConfirmComponent implements OnInit {
    return this.expectedInputValue !== this.inputValue
  }
+  hasError () {
+    return this.errorMessage
+  }
  showModal () {
    this.inputValue = ''
diff --git a/client/src/app/shared/form-validators/custom-config-validators.ts b/client/src/app/shared/form-validators/custom-config-validators.ts
index ff0813f7d..3672e5610 100644
--- a/client/src/app/shared/form-validators/custom-config-validators.ts
+++ b/client/src/app/shared/form-validators/custom-config-validators.ts
@@ -22,21 +22,12 @@ export const SERVICES_TWITTER_USERNAME_VALIDATOR: BuildFormValidator = {
  }
 }
-export const CACHE_PREVIEWS_SIZE_VALIDATOR: BuildFormValidator = {
+export const CACHE_SIZE_VALIDATOR: BuildFormValidator = {
  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
  MESSAGES: {
-    required: $localize`Previews cache size is required.`,
+    required: $localize`Cache size is required.`,
-    min: $localize`Previews cache size must be greater than 1.`,
+    min: $localize`Cache size must be greater than 1.`,
-    pattern: $localize`Previews cache size must be a number.`
+    pattern: $localize`Cache size must be a number.`
-  }
-}
-export const CACHE_CAPTIONS_SIZE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
-  MESSAGES: {
-    required: $localize`Captions cache size is required.`,
-    min: $localize`Captions cache size must be greater than 1.`,
-    pattern: $localize`Captions cache size must be a number.`
  }
 }
diff --git a/client/src/app/shared/form-validators/video-validators.ts b/client/src/app/shared/form-validators/video-validators.ts
index a4bda8f16..090a76e43 100644
--- a/client/src/app/shared/form-validators/video-validators.ts
+++ b/client/src/app/shared/form-validators/video-validators.ts
@@ -26,6 +26,15 @@ export const VIDEO_PRIVACY_VALIDATOR: BuildFormValidator = {
  }
 }
+export const VIDEO_PASSWORD_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(2), Validators.maxLength(100) ], // Required is set dynamically
+  MESSAGES: {
+    minLength: $localize`A password should be at least 2 characters long.`,
+    maxLength: $localize`A password should be shorter than 100 characters long.`,
+    required: $localize`A password is required for password protected video.`
+  }
+}
 export const VIDEO_CATEGORY_VALIDATOR: BuildFormValidator = {
  VALIDATORS: [ ],
  MESSAGES: {}
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
index 2c3226f68..8b6cd091a 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
@@ -1,7 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 import { ItemSelectCheckboxValue } from './select-checkbox.component'
@@ -80,9 +80,9 @@ export class SelectCheckboxAllComponent implements ControlValueAccessor {
    if (outputItems.length >= this.maxItems) {
      this.notifier.error(
-        prepareIcu($localize`You can't select more than {maxItems, plural, =1 {1 item} other {{maxItems} items}}`)(
+        formatICU(
-          { maxItems: this.maxItems },
+          $localize`You can't select more than {maxItems, plural, =1 {1 item} other {{maxItems} items}}`,
-          $localize`You can't select more than ${this.maxItems} items`
+          { maxItems: this.maxItems }
        )
      )
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index 2e63f6c17..ab1b1458a 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { ServerConfig } from '@shared/models'
 @Component({
@@ -71,17 +71,17 @@ export class InstanceFeaturesTableComponent implements OnInit {
    const hours = Math.floor(seconds / 3600)
    if (hours !== 0) {
-      return prepareIcu($localize`~ {hours, plural, =1 {1 hour} other {{hours} hours}}`)(
+      return formatICU(
-        { hours },
+        $localize`~ {hours, plural, =1 {1 hour} other {{hours} hours}}`,
-        $localize`~ ${hours} hours`
+        { hours }
      )
    }
    const minutes = Math.floor(seconds % 3600 / 60)
-    return prepareIcu($localize`~ {minutes, plural, =1 {1 minute} other {{minutes} minutes}}`)(
+    return formatICU(
-      { minutes },
+      $localize`~ {minutes, plural, =1 {1 minute} other {{minutes} minutes}}`,
-      $localize`~ ${minutes} minutes`
+      { minutes }
    )
  }
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index dc6a25e83..4ff244bbb 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,14 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
-  private yearICU = prepareIcu($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`)
-  private monthICU = prepareIcu($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`)
-  private weekICU = prepareIcu($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`)
-  private dayICU = prepareIcu($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`)
-  private hourICU = prepareIcu($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`)
  transform (arg: number | Date | string) {
    const argDate = new Date(arg)
@@ -16,7 +11,7 @@ export class FromNowPipe implements PipeTransform {
    let interval = Math.floor(seconds / 31536000)
    if (interval >= 1) {
-      return this.yearICU({ interval }, $localize`${interval} year(s) ago`)
+      return formatICU($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`, { interval })
    }
    interval = Math.floor(seconds / 2419200)
@@ -25,7 +20,7 @@ export class FromNowPipe implements PipeTransform {
    if (interval >= 12) return $localize`1 year ago`
    if (interval >= 1) {
-      return this.monthICU({ interval }, $localize`${interval} month(s) ago`)
+      return formatICU($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`, { interval })
    }
    interval = Math.floor(seconds / 604800)
@@ -34,17 +29,17 @@ export class FromNowPipe implements PipeTransform {
    if (interval >= 4) return $localize`1 month ago`
    if (interval >= 1) {
-      return this.weekICU({ interval }, $localize`${interval} week(s) ago`)
+      return formatICU($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`, { interval })
    }
    interval = Math.floor(seconds / 86400)
    if (interval >= 1) {
-      return this.dayICU({ interval }, $localize`${interval} day(s) ago`)
+      return formatICU($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`, { interval })
    }
    interval = Math.floor(seconds / 3600)
    if (interval >= 1) {
-      return this.hourICU({ interval }, $localize`${interval} hour(s) ago`)
+      return formatICU($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`, { interval })
    }
    interval = Math.floor(seconds / 60)
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index d3ec31d6e..480277450 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -52,6 +52,7 @@ import {
  VideoFileTokenService,
  VideoImportService,
  VideoOwnershipService,
+  VideoPasswordService,
  VideoResolver,
  VideoService
 } from './video'
@@ -210,6 +211,8 @@ import { VideoChannelService } from './video-channel'
    VideoChannelService,
+    VideoPasswordService,
    CustomPageService,
    ActorRedirectGuard
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
index 0f3afd116..21f31a717 100644
--- a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
@@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, ServerService } from '@app/core'
 import { objectToFormData, sortBy } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main/video'
+import { VideoPasswordService, VideoService } from '@app/shared/shared-main/video'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import { ResultList, VideoCaption } from '@shared/models'
 import { environment } from '../../../../environments/environment'
@@ -18,8 +18,10 @@ export class VideoCaptionService {
    private restExtractor: RestExtractor
  ) {}
-  listCaptions (videoId: string): Observable<ResultList<VideoCaption>> {
+  listCaptions (videoId: string, videoPassword?: string): Observable<ResultList<VideoCaption>> {
-    return this.authHttp.get<ResultList<VideoCaption>>(`${VideoService.BASE_VIDEO_URL}/${videoId}/captions`)
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
+    return this.authHttp.get<ResultList<VideoCaption>>(`${VideoService.BASE_VIDEO_URL}/${videoId}/captions`, { headers })
               .pipe(
                 switchMap(captionsResult => {
                   return this.serverService.getServerLocale()
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index a2e47883e..07d40b117 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -5,6 +5,7 @@ export * from './video-edit.model'
 export * from './video-file-token.service'
 export * from './video-import.service'
 export * from './video-ownership.service'
+export * from './video-password.service'
 export * from './video.model'
 export * from './video.resolver'
 export * from './video.service'
diff --git a/client/src/app/shared/shared-main/video/video-edit.model.ts b/client/src/app/shared/shared-main/video/video-edit.model.ts
index 47eee80d8..1b8b67ee2 100644
--- a/client/src/app/shared/shared-main/video/video-edit.model.ts
+++ b/client/src/app/shared/shared-main/video/video-edit.model.ts
@@ -1,5 +1,5 @@
 import { getAbsoluteAPIUrl } from '@app/helpers'
-import { VideoPrivacy, VideoScheduleUpdate, VideoUpdate } from '@shared/models'
+import { VideoPassword, VideoPrivacy, VideoScheduleUpdate, VideoUpdate } from '@shared/models'
 import { VideoDetails } from './video-details.model'
 import { objectKeysTyped } from '@shared/core-utils'
@@ -18,6 +18,7 @@ export class VideoEdit implements VideoUpdate {
  waitTranscoding: boolean
  channelId: number
  privacy: VideoPrivacy
+  videoPassword?: string
  support: string
  thumbnailfile?: any
  previewfile?: any
@@ -32,7 +33,7 @@ export class VideoEdit implements VideoUpdate {
  pluginData?: any
-  constructor (video?: VideoDetails) {
+  constructor (video?: VideoDetails, videoPassword?: VideoPassword) {
    if (!video) return
    this.id = video.id
@@ -63,6 +64,8 @@ export class VideoEdit implements VideoUpdate {
      : null
    this.pluginData = video.pluginData
+    if (videoPassword) this.videoPassword = videoPassword.password
  }
  patch (values: { [ id: string ]: any }) {
@@ -112,6 +115,7 @@ export class VideoEdit implements VideoUpdate {
      waitTranscoding: this.waitTranscoding,
      channelId: this.channelId,
      privacy: this.privacy,
+      videoPassword: this.videoPassword,
      originallyPublishedAt: this.originallyPublishedAt
    }
diff --git a/client/src/app/shared/shared-main/video/video-file-token.service.ts b/client/src/app/shared/shared-main/video/video-file-token.service.ts
index 791607249..9bca5b9ec 100644
--- a/client/src/app/shared/shared-main/video/video-file-token.service.ts
+++ b/client/src/app/shared/shared-main/video/video-file-token.service.ts
@@ -4,6 +4,7 @@ import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
 import { VideoToken } from '@shared/models'
 import { VideoService } from './video.service'
+import { VideoPasswordService } from './video-password.service'
 @Injectable()
 export class VideoFileTokenService {
@@ -15,16 +16,18 @@ export class VideoFileTokenService {
    private restExtractor: RestExtractor
  ) {}
-  getVideoFileToken (videoUUID: string) {
+  getVideoFileToken ({ videoUUID, videoPassword }: { videoUUID: string, videoPassword?: string }) {
    const existing = this.store.get(videoUUID)
    if (existing) return of(existing)
-    return this.createVideoFileToken(videoUUID)
+    return this.createVideoFileToken(videoUUID, videoPassword)
      .pipe(tap(result => this.store.set(videoUUID, { token: result.token, expires: new Date(result.expires) })))
  }
-  private createVideoFileToken (videoUUID: string) {
+  private createVideoFileToken (videoUUID: string, videoPassword?: string) {
-    return this.authHttp.post<VideoToken>(`${VideoService.BASE_VIDEO_URL}/${videoUUID}/token`, {})
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
+    return this.authHttp.post<VideoToken>(`${VideoService.BASE_VIDEO_URL}/${videoUUID}/token`, {}, { headers })
      .pipe(
        map(({ files }) => files),
        catchError(err => this.restExtractor.handleError(err))
diff --git a/client/src/app/shared/shared-main/video/video-password.service.ts b/client/src/app/shared/shared-main/video/video-password.service.ts
new file mode 100644
index 000000000..d5b0406f8
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-password.service.ts
@@ -0,0 +1,29 @@
+import { ResultList, VideoPassword } from '@shared/models'
+import { Injectable } from '@angular/core'
+import { catchError, switchMap } from 'rxjs'
+import { HttpClient, HttpHeaders } from '@angular/common/http'
+import { RestExtractor } from '@app/core'
+import { VideoService } from './video.service'
+@Injectable()
+export class VideoPasswordService {
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+  static buildVideoPasswordHeader (videoPassword: string) {
+    return videoPassword
+      ? new HttpHeaders().set('x-peertube-video-password', videoPassword)
+      : undefined
+  }
+  getVideoPasswords (options: { videoUUID: string }) {
+    return this.authHttp.get<ResultList<VideoPassword>>(`${VideoService.BASE_VIDEO_URL}/${options.videoUUID}/passwords`)
+      .pipe(
+        switchMap(res => res.data),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 6fdffb394..1ffc40411 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,6 +1,6 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl, prepareIcu } from '@app/helpers'
+import { durationToString, formatICU, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath, getAllFiles } from '@shared/core-utils'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
@@ -19,9 +19,6 @@ import {
 } from '@shared/models'
 export class Video implements VideoServerModel {
-  private static readonly viewsICU = prepareIcu($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`)
-  private static readonly viewersICU = prepareIcu($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`)
  byVideoChannel: string
  byAccount: string
@@ -255,7 +252,7 @@ export class Video implements VideoServerModel {
      user && user.hasRight(UserRight.MANAGE_VIDEO_FILES) &&
      this.state.id !== VideoState.TO_TRANSCODE &&
      this.hasHLS() &&
-      this.hasWebTorrent()
+      this.hasWebVideos()
  }
  canRunTranscoding (user: AuthUser) {
@@ -268,7 +265,7 @@ export class Video implements VideoServerModel {
    return this.streamingPlaylists?.some(p => p.type === VideoStreamingPlaylistType.HLS)
  }
-  hasWebTorrent () {
+  hasWebVideos () {
    return this.files && this.files.length !== 0
  }
@@ -281,11 +278,18 @@ export class Video implements VideoServerModel {
    return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
  }
+  canAccessPasswordProtectedVideoWithoutPassword (user: AuthUser) {
+    return this.privacy.id === VideoPrivacy.PASSWORD_PROTECTED &&
+      user &&
+      this.isLocal === true &&
+      (this.account.name === user.username || user.hasRight(UserRight.SEE_ALL_VIDEOS))
+  }
  getExactNumberOfViews () {
    if (this.isLive) {
-      return Video.viewersICU({ viewers: this.viewers }, $localize`${this.viewers} viewer(s)`)
+      return formatICU($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`, { viewers: this.viewers })
    }
-    return Video.viewsICU({ views: this.views }, $localize`{${this.views} view(s)}`)
+    return formatICU($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`, { views: this.views })
  }
 }
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 78a49567f..20145b9c5 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -11,6 +11,7 @@ import {
  FeedFormat,
  NSFWPolicyType,
  ResultList,
+  Storyboard,
  UserVideoRate,
  UserVideoRateType,
  UserVideoRateUpdate,
@@ -33,6 +34,7 @@ import { VideoChannel, VideoChannelService } from '../video-channel'
 import { VideoDetails } from './video-details.model'
 import { VideoEdit } from './video-edit.model'
 import { Video } from './video.model'
+import { VideoPasswordService } from './video-password.service'
 export type CommonVideoParams = {
  videoPagination?: ComponentPaginationLight
@@ -69,16 +71,17 @@ export class VideoService {
    return `${VideoService.BASE_VIDEO_URL}/${uuid}/views`
  }
-  getVideo (options: { videoId: string }): Observable<VideoDetails> {
+  getVideo (options: { videoId: string, videoPassword?: string }): Observable<VideoDetails> {
-    return this.serverService.getServerLocale()
+    const headers = VideoPasswordService.buildVideoPasswordHeader(options.videoPassword)
-               .pipe(
-                 switchMap(translations => {
+    return this.serverService.getServerLocale().pipe(
-                   return this.authHttp.get<VideoDetailsServerModel>(`${VideoService.BASE_VIDEO_URL}/${options.videoId}`)
+      switchMap(translations => {
-                              .pipe(map(videoHash => ({ videoHash, translations })))
+        return this.authHttp.get<VideoDetailsServerModel>(`${VideoService.BASE_VIDEO_URL}/${options.videoId}`, { headers })
-                 }),
+          .pipe(map(videoHash => ({ videoHash, translations })))
-                 map(({ videoHash, translations }) => new VideoDetails(videoHash, translations)),
+      }),
-                 catchError(err => this.restExtractor.handleError(err))
+      map(({ videoHash, translations }) => new VideoDetails(videoHash, translations)),
-               )
+      catchError(err => this.restExtractor.handleError(err))
+    )
  }
  updateVideo (video: VideoEdit) {
@@ -99,6 +102,9 @@ export class VideoService {
      description,
      channelId: video.channelId,
      privacy: video.privacy,
+      videoPasswords: video.privacy === VideoPrivacy.PASSWORD_PROTECTED
+        ? [ video.videoPassword ]
+        : undefined,
      tags: video.tags,
      nsfw: video.nsfw,
      waitTranscoding: video.waitTranscoding,
@@ -305,7 +311,7 @@ export class VideoService {
      )
  }
-  removeVideoFiles (videoIds: (number | string)[], type: 'hls' | 'webtorrent') {
+  removeVideoFiles (videoIds: (number | string)[], type: 'hls' | 'web-videos') {
    return from(videoIds)
      .pipe(
        concatMap(id => this.authHttp.delete(VideoService.BASE_VIDEO_URL + '/' + id + '/' + type)),
@@ -314,12 +320,12 @@ export class VideoService {
      )
  }
-  removeFile (videoId: number | string, fileId: number, type: 'hls' | 'webtorrent') {
+  removeFile (videoId: number | string, fileId: number, type: 'hls' | 'web-videos') {
    return this.authHttp.delete(VideoService.BASE_VIDEO_URL + '/' + videoId + '/' + type + '/' + fileId)
      .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
-  runTranscoding (videoIds: (number | string)[], type: 'hls' | 'webtorrent') {
+  runTranscoding (videoIds: (number | string)[], type: 'hls' | 'web-video') {
    const body: VideoTranscodingCreate = { transcodingType: type }
    return from(videoIds)
@@ -339,6 +345,27 @@ export class VideoService {
               )
  }
+  // ---------------------------------------------------------------------------
+  getStoryboards (videoId: string | number, videoPassword: string) {
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
+    return this.authHttp
+      .get<{ storyboards: Storyboard[] }>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/storyboards', { headers })
+      .pipe(
+        map(({ storyboards }) => storyboards),
+        catchError(err => {
+          if (err.status === 404) {
+            return of([])
+          }
+          this.restExtractor.handleError(err)
+        })
+      )
+  }
+  // ---------------------------------------------------------------------------
  getSource (videoId: number) {
    return this.authHttp
               .get<{ source: VideoSource }>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/source')
@@ -353,18 +380,22 @@ export class VideoService {
               )
  }
-  setVideoLike (id: string) {
+  // ---------------------------------------------------------------------------
-    return this.setVideoRate(id, 'like')
+  setVideoLike (id: string, videoPassword: string) {
+    return this.setVideoRate(id, 'like', videoPassword)
  }
-  setVideoDislike (id: string) {
+  setVideoDislike (id: string, videoPassword: string) {
-    return this.setVideoRate(id, 'dislike')
+    return this.setVideoRate(id, 'dislike', videoPassword)
  }
-  unsetVideoLike (id: string) {
+  unsetVideoLike (id: string, videoPassword: string) {
-    return this.setVideoRate(id, 'none')
+    return this.setVideoRate(id, 'none', videoPassword)
  }
+  // ---------------------------------------------------------------------------
  getUserVideoRating (id: string) {
    const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating'
@@ -394,7 +425,8 @@ export class VideoService {
      [VideoPrivacy.PRIVATE]: $localize`Only I can see this video`,
      [VideoPrivacy.UNLISTED]: $localize`Only shareable via a private link`,
      [VideoPrivacy.PUBLIC]: $localize`Anyone can see this video`,
-      [VideoPrivacy.INTERNAL]: $localize`Only users of this instance can see this video`
+      [VideoPrivacy.INTERNAL]: $localize`Only users of this instance can see this video`,
+      [VideoPrivacy.PASSWORD_PROTECTED]: $localize`Only users with the appropriate password can see this video`
    }
    const videoPrivacies = serverPrivacies.map(p => {
@@ -412,7 +444,13 @@ export class VideoService {
  }
  getHighestAvailablePrivacy (serverPrivacies: VideoConstant<VideoPrivacy>[]) {
-    const order = [ VideoPrivacy.PRIVATE, VideoPrivacy.INTERNAL, VideoPrivacy.UNLISTED, VideoPrivacy.PUBLIC ]
+    // We do not add a password as this requires additional configuration.
+    const order = [
+      VideoPrivacy.PRIVATE,
+      VideoPrivacy.INTERNAL,
+      VideoPrivacy.UNLISTED,
+      VideoPrivacy.PUBLIC
+    ]
    for (const privacy of order) {
      if (serverPrivacies.find(p => p.id === privacy)) {
@@ -499,14 +537,15 @@ export class VideoService {
    }
  }
-  private setVideoRate (id: string, rateType: UserVideoRateType) {
+  private setVideoRate (id: string, rateType: UserVideoRateType, videoPassword?: string) {
    const url = `${VideoService.BASE_VIDEO_URL}/${id}/rate`
    const body: UserVideoRateUpdate = {
      rating: rateType
    }
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
    return this.authHttp
-               .put(url, body)
+               .put(url, body, { headers })
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
 }
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index 27dcf043a..34295c34a 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -1,7 +1,7 @@
 import { forkJoin } from 'rxjs'
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -67,9 +67,9 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
          let message: string
          if (Array.isArray(this.usersToBan)) {
-            message = prepareIcu($localize`{count, plural, =1 {1 user banned.} other {{count} users banned.}}`)(
+            message = formatICU(
-              { count: this.usersToBan.length },
+              $localize`{count, plural, =1 {1 user banned.} other {{count} users banned.}}`,
-              $localize`${this.usersToBan.length} users banned.`
+              { count: this.usersToBan.length }
            )
          } else {
            message = $localize`User ${this.usersToBan.username} banned.`
@@ -88,9 +88,9 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  getModalTitle () {
    if (Array.isArray(this.usersToBan)) {
-      return prepareIcu($localize`Ban {count, plural, =1 {1 user} other {{count} users}}`)(
+      return formatICU(
-        { count: this.usersToBan.length },
+        $localize`Ban {count, plural, =1 {1 user} other {{count} users}}`,
-        $localize`Ban ${this.usersToBan.length} users`
+        { count: this.usersToBan.length }
      )
    }
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index 3ff53443a..0137def89 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { prepareIcu } from '@app/helpers'
+import { formatICU } from '@app/helpers'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -81,9 +81,9 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
    this.videoBlocklistService.blockVideo(options)
        .subscribe({
          next: () => {
-            const message = prepareIcu($localize`{count, plural, =1 {Blocked {videoName}.} other {Blocked {count} videos.}}`)(
+            const message = formatICU(
-              { count: this.videos.length, videoName: this.getSingleVideo().name },
+              $localize`{count, plural, =1 {Blocked {videoName}.} other {Blocked {count} videos.}}`,
-              $localize`Blocked ${this.videos.length} videos.`
+              { count: this.videos.length, videoName: this.getSingleVideo().name }
            )
            this.notifier.success(message)
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 5650fa948..9f1455561 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -107,6 +107,10 @@
        </a>
      </div>
+      <div i18n *ngIf="isPasswordProtectedVideo()" class="alert-private alert alert-warning">
+        This video is password protected, please note that recipients will require the corresponding password to access the content.
+      </div>
      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
        <ng-container ngbNavItem="url">
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 32f900f15..da4f2a4b4 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -243,6 +243,10 @@ export class VideoShareComponent {
    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
  }
+  isPasswordProtectedVideo () {
+    return this.video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+  }
  private getPlaylistOptions (baseUrl?: string) {
    return {
      baseUrl,
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index 8d2deedf7..3906652be 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -18,6 +18,7 @@ import {
 import { environment } from '../../../environments/environment'
 import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
 import { VideoComment } from './video-comment.model'
+import { VideoPasswordService } from '../shared-main'
 @Injectable()
 export class VideoCommentService {
@@ -31,22 +32,25 @@ export class VideoCommentService {
    private restService: RestService
  ) {}
-  addCommentThread (videoId: string, comment: VideoCommentCreate) {
+  addCommentThread (videoId: string, comment: VideoCommentCreate, videoPassword?: string) {
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
+    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment, { headers })
               .pipe(
                 map(data => this.extractVideoComment(data.comment)),
                 catchError(err => this.restExtractor.handleError(err))
               )
  }
-  addCommentReply (videoId: string, inReplyToCommentId: number, comment: VideoCommentCreate) {
+  addCommentReply (options: { videoId: string, inReplyToCommentId: number, comment: VideoCommentCreate, videoPassword?: string }) {
+    const { videoId, inReplyToCommentId, comment, videoPassword } = options
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
+    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment, { headers })
               .pipe(
                 map(data => this.extractVideoComment(data.comment)),
                 catchError(err => this.restExtractor.handleError(err))
@@ -76,10 +80,13 @@ export class VideoCommentService {
  getVideoCommentThreads (parameters: {
    videoId: string
+    videoPassword: string
    componentPagination: ComponentPaginationLight
    sort: string
  }): Observable<ThreadsResultList<VideoComment>> {
-    const { videoId, componentPagination, sort } = parameters
+    const { videoId, videoPassword, componentPagination, sort } = parameters
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
    const pagination = this.restService.componentToRestPagination(componentPagination)
@@ -87,7 +94,7 @@ export class VideoCommentService {
    params = this.restService.addRestGetParams(params, pagination, sort)
    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    return this.authHttp.get<ThreadsResultList<VideoComment>>(url, { params })
+    return this.authHttp.get<ThreadsResultList<VideoComment>>(url, { params, headers })
               .pipe(
                 map(result => this.extractVideoComments(result)),
                 catchError(err => this.restExtractor.handleError(err))
@@ -97,12 +104,14 @@ export class VideoCommentService {
  getVideoThreadComments (parameters: {
    videoId: string
    threadId: number
+    videoPassword?: string
  }): Observable<VideoCommentThreadTree> {
-    const { videoId, threadId } = parameters
+    const { videoId, threadId, videoPassword } = parameters
    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
+    const headers = VideoPasswordService.buildVideoPasswordHeader(videoPassword)
    return this.authHttp
-               .get<VideoCommentThreadTreeServerModel>(url)
+               .get<VideoCommentThreadTreeServerModel>(url, { headers })
               .pipe(
                 map(tree => this.extractVideoCommentTree(tree)),
                 catchError(err => this.restExtractor.handleError(err))
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index 56527ddfa..0a3ada711 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -273,7 +273,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
        })
  }
-  async removeVideoFiles (video: Video, type: 'hls' | 'webtorrent') {
+  async removeVideoFiles (video: Video, type: 'hls' | 'web-videos') {
    const confirmMessage = $localize`Do you really want to remove "${this.video.name}" files?`
    const res = await this.confirmService.confirm(confirmMessage, $localize`Remove "${this.video.name}" files`)
@@ -290,7 +290,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
      })
  }
-  runTranscoding (video: Video, type: 'hls' | 'webtorrent') {
+  runTranscoding (video: Video, type: 'hls' | 'web-video') {
    this.videoService.runTranscoding([ video.id ], type)
      .subscribe({
        next: () => {
@@ -394,8 +394,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
          iconName: 'cog'
        },
        {
-          label: $localize`Run WebTorrent transcoding`,
+          label: $localize`Run Web Video transcoding`,
-          handler: ({ video }) => this.runTranscoding(video, 'webtorrent'),
+          handler: ({ video }) => this.runTranscoding(video, 'web-video'),
          isDisplayed: () => this.displayOptions.transcoding && this.canRunTranscoding(),
          iconName: 'cog'
        },
@@ -406,8 +406,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
          iconName: 'delete'
        },
        {
-          label: $localize`Delete WebTorrent files`,
+          label: $localize`Delete Web Video files`,
-          handler: ({ video }) => this.removeVideoFiles(video, 'webtorrent'),
+          handler: ({ video }) => this.removeVideoFiles(video, 'web-videos'),
          isDisplayed: () => this.displayOptions.removeFiles && this.canRemoveVideoFiles(),
          iconName: 'delete'
        }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index cac82d8d0..146ea7dfe 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,13 +1,13 @@
 import { mapValues } from 'lodash-es'
 import { firstValueFrom } from 'rxjs'
 import { tap } from 'rxjs/operators'
-import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
+import { Component, ElementRef, Inject, Input, LOCALE_ID, ViewChild } from '@angular/core'
 import { HooksService } from '@app/core'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { logger } from '@root-helpers/logger'
-import { videoRequiresAuth } from '@root-helpers/video'
+import { videoRequiresFileToken } from '@root-helpers/video'
 import { objectKeysTyped, pick } from '@shared/core-utils'
-import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
+import { VideoCaption, VideoFile } from '@shared/models'
 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoFileTokenService, VideoService } from '../shared-main'
 type DownloadType = 'video' | 'subtitles'
@@ -21,6 +21,8 @@ type FileMetadata = { [key: string]: { label: string, value: string | number } }
 export class VideoDownloadComponent {
  @ViewChild('modal', { static: true }) modal: ElementRef
+  @Input() videoPassword: string
  downloadType: 'direct' | 'torrent' = 'direct'
  resolutionId: number | string = -1
@@ -89,8 +91,8 @@ export class VideoDownloadComponent {
      this.subtitleLanguageId = this.videoCaptions[0].language.id
    }
-    if (videoRequiresAuth(this.video)) {
+    if (this.isConfidentialVideo()) {
-      this.videoFileTokenService.getVideoFileToken(this.video.uuid)
+      this.videoFileTokenService.getVideoFileToken({ videoUUID: this.video.uuid, videoPassword: this.videoPassword })
        .subscribe(({ token }) => this.videoFileToken = token)
    }
@@ -201,7 +203,8 @@ export class VideoDownloadComponent {
  }
  isConfidentialVideo () {
-    return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
+    return videoRequiresFileToken(this.video)
  }
  switchToType (type: DownloadType) {
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 3d39c6fdc..3fbfaed28 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -125,7 +125,7 @@
        <my-peertube-checkbox
          formControlName="allVideos"
          inputName="allVideos"
-          i18n-labelText labelText="Display all videos (private, unlisted or not yet published)"
+          i18n-labelText labelText="Display all videos (private, unlisted, password protected or not yet published)"
        ></my-peertube-checkbox>
      </div>
    </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 3f0180695..9e0a4f79b 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -5,6 +5,7 @@
  >
    <ng-container ngProjectAs="label-warning" *ngIf="displayOptions.privacyLabel && isUnlistedVideo()" i18n>Unlisted</ng-container>
    <ng-container ngProjectAs="label-danger" *ngIf="displayOptions.privacyLabel && isPrivateVideo()" i18n>Private</ng-container>
+    <ng-container ngProjectAs="label-danger" *ngIf="displayOptions.privacyLabel && isPasswordProtectedVideo()" i18n>Password protected</ng-container>
  </my-video-thumbnail>
  <div class="video-bottom">
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 2384b34d7..d453f37a1 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -171,6 +171,10 @@ export class VideoMiniatureComponent implements OnInit {
    return this.video.privacy.id === VideoPrivacy.PRIVATE
  }
+  isPasswordProtectedVideo () {
+    return this.video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+  }
  getStateLabel (video: Video) {
    if (!video.state) return ''
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index 7b832263e..14a5abd7a 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -419,6 +419,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
          this.lastQueryLength = data.length
          if (reset) this.videos = []
          this.videos = this.videos.concat(data)
          if (this.groupByDate) this.buildGroupedDateLabels()
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 75afa0709..882b14c5e 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -21,7 +21,8 @@
            [attr.title]="playlistElement.video.name"
          >{{ playlistElement.video.name }}</a>
-          <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
+          <span i18n *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
+          <span i18n *ngIf="isVideoPasswordProtected()" class="pt-badge badge-yellow">Password protected</span>
        </div>
        <span class="video-miniature-created-at-views">
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 552ea742b..b9a1d9623 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -60,6 +60,10 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
    return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE
  }
+  isVideoPasswordProtected () {
+    return this.playlistElement.video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED
+  }
  isUnavailable (e: VideoPlaylistElement) {
    return e.type === VideoPlaylistElementType.UNAVAILABLE
  }
diff --git a/client/src/assets/player/index.ts b/client/src/assets/player/index.ts
index 9b87afc4a..d34188ea7 100644
--- a/client/src/assets/player/index.ts
+++ b/client/src/assets/player/index.ts
@@ -1,2 +1,2 @@
-export * from './peertube-player-manager'
+export * from './peertube-player'
 export * from './types'
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
deleted file mode 100644
index 2781850b9..000000000
--- a/client/src/assets/player/peertube-player-manager.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import '@peertube/videojs-contextmenu'
-import './shared/upnext/end-card'
-import './shared/upnext/upnext-plugin'
-import './shared/stats/stats-card'
-import './shared/stats/stats-plugin'
-import './shared/bezels/bezels-plugin'
-import './shared/peertube/peertube-plugin'
-import './shared/resolutions/peertube-resolutions-plugin'
-import './shared/control-bar/next-previous-video-button'
-import './shared/control-bar/p2p-info-button'
-import './shared/control-bar/peertube-link-button'
-import './shared/control-bar/peertube-load-progress-bar'
-import './shared/control-bar/theater-button'
-import './shared/control-bar/peertube-live-display'
-import './shared/settings/resolution-menu-button'
-import './shared/settings/resolution-menu-item'
-import './shared/settings/settings-dialog'
-import './shared/settings/settings-menu-button'
-import './shared/settings/settings-menu-item'
-import './shared/settings/settings-panel'
-import './shared/settings/settings-panel-child'
-import './shared/playlist/playlist-plugin'
-import './shared/mobile/peertube-mobile-plugin'
-import './shared/mobile/peertube-mobile-buttons'
-import './shared/hotkeys/peertube-hotkeys-plugin'
-import './shared/metrics/metrics-plugin'
-import videojs from 'video.js'
-import { logger } from '@root-helpers/logger'
-import { PluginsManager } from '@root-helpers/plugins-manager'
-import { isMobile } from '@root-helpers/web-browser'
-import { saveAverageBandwidth } from './peertube-player-local-storage'
-import { ManagerOptionsBuilder } from './shared/manager-options'
-import { TranslationsManager } from './translations-manager'
-import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode, PlayerNetworkInfo } from './types'
-// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
-const CaptionsButton = videojs.getComponent('CaptionsButton') as any
-// Change Captions to Subtitles/CC
-CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
-// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
-CaptionsButton.prototype.label_ = ' '
-export class PeertubePlayerManager {
-  private static playerElementClassName: string
-  private static playerElementAttributes: { name: string, value: string }[] = []
-  private static onPlayerChange: (player: videojs.Player) => void
-  private static alreadyPlayed = false
-  private static pluginsManager: PluginsManager
-  private static videojsDecodeErrors = 0
-  private static p2pMediaLoaderModule: any
-  static initState () {
-    this.alreadyPlayed = false
-  }
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
-    this.pluginsManager = options.pluginsManager
-    this.onPlayerChange = onPlayerChange
-    this.playerElementClassName = options.common.playerElement.className
-    for (const name of options.common.playerElement.getAttributeNames()) {
-      this.playerElementAttributes.push({ name, value: options.common.playerElement.getAttribute(name) })
-    }
-    if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin')
-    if (mode === 'p2p-media-loader') {
-      const [ p2pMediaLoaderModule ] = await Promise.all([
-        import('@peertube/p2p-media-loader-hlsjs'),
-        import('./shared/p2p-media-loader/p2p-media-loader-plugin')
-      ])
-      this.p2pMediaLoaderModule = p2pMediaLoaderModule
-    }
-    await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
-    return this.buildPlayer(mode, options)
-  }
-  private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise<videojs.Player> {
-    const videojsOptionsBuilder = new ManagerOptionsBuilder(mode, options, this.p2pMediaLoaderModule)
-    const videojsOptions = await this.pluginsManager.runHook(
-      'filter:internal.player.videojs.options.result',
-      videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed)
-    )
-    const self = this
-    return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
-        const player = this
-        if (!isNaN(+options.common.playbackRate)) {
-          player.playbackRate(+options.common.playbackRate)
-        }
-        let alreadyFallback = false
-        const handleError = () => {
-          if (alreadyFallback) return
-          alreadyFallback = true
-          if (mode === 'p2p-media-loader') {
-            self.tryToRecoverHLSError(player.error(), player, options)
-          } else {
-            self.maybeFallbackToWebTorrent(mode, player, options)
-          }
-        }
-        player.one('error', () => handleError())
-        player.one('play', () => {
-          self.alreadyPlayed = true
-        })
-        self.addContextMenu(videojsOptionsBuilder, player, options.common)
-        if (isMobile()) player.peertubeMobile()
-        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin({ isLive: options.common.isLive })
-        if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
-        player.bezels()
-        player.stats({
-          videoUUID: options.common.videoUUID,
-          videoIsLive: options.common.isLive,
-          mode,
-          p2pEnabled: options.common.p2pEnabled
-        })
-        player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
-          if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
-          saveAverageBandwidth(data.bandwidthEstimate)
-        })
-        const offlineNotificationElem = document.createElement('div')
-        offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
-        offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work')
-        let offlineNotificationElemAdded = false
-        const handleOnline = () => {
-          if (!offlineNotificationElemAdded) return
-          player.el().removeChild(offlineNotificationElem)
-          offlineNotificationElemAdded = false
-          logger.info('The browser is online')
-        }
-        const handleOffline = () => {
-          if (offlineNotificationElemAdded) return
-          player.el().appendChild(offlineNotificationElem)
-          offlineNotificationElemAdded = true
-          logger.info('The browser is offline')
-        }
-        window.addEventListener('online', handleOnline)
-        window.addEventListener('offline', handleOffline)
-        player.on('dispose', () => {
-          window.removeEventListener('online', handleOnline)
-          window.removeEventListener('offline', handleOffline)
-        })
-        return res(player)
-      })
-    })
-  }
-  private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
-    if (err.code === MediaError.MEDIA_ERR_DECODE) {
-      // Display a notification to user
-      if (this.videojsDecodeErrors === 0) {
-        options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.'))
-      }
-      if (this.videojsDecodeErrors === 20) {
-        this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
-        return
-      }
-      logger.info('Fast forwarding HLS to recover from an error.')
-      this.videojsDecodeErrors++
-      options.common.startTime = currentPlayer.currentTime() + 2
-      options.common.autoplay = true
-      this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
-      const newPlayer = await this.buildPlayer('p2p-media-loader', options)
-      this.onPlayerChange(newPlayer)
-    } else {
-      this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
-    }
-  }
-  private static async maybeFallbackToWebTorrent (
-    currentMode: PlayerMode,
-    currentPlayer: videojs.Player,
-    options: PeertubePlayerManagerOptions
-  ) {
-    if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') {
-      currentPlayer.peertube().displayFatalError()
-      return
-    }
-    logger.info('Fallback to webtorrent.')
-    this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
-    await import('./shared/webtorrent/webtorrent-plugin')
-    const newPlayer = await this.buildPlayer('webtorrent', options)
-    this.onPlayerChange(newPlayer)
-  }
-  private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
-    const newVideoElement = document.createElement('video')
-    // Reset class
-    newVideoElement.className = this.playerElementClassName
-    // Reapply attributes
-    for (const { name, value } of this.playerElementAttributes) {
-      newVideoElement.setAttribute(name, value)
-    }
-    // VideoJS wraps our video element inside a div
-    let currentParentPlayerElement = commonOptions.playerElement.parentNode
-    // Fix on IOS, don't ask me why
-    if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode
-    currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
-    commonOptions.playerElement = newVideoElement
-    commonOptions.onPlayerElementChange(newVideoElement)
-    player.dispose()
-    return newVideoElement
-  }
-  private static addContextMenu (optionsBuilder: ManagerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) {
-    const options = optionsBuilder.getContextMenuOptions(player, commonOptions)
-    player.contextmenuUI(options)
-  }
-}
-// ############################################################################
-export {
-  videojs
-}
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
new file mode 100644
index 000000000..a7a2b4065
--- /dev/null
+++ b/client/src/assets/player/peertube-player.ts
@@ -0,0 +1,522 @@
+import '@peertube/videojs-contextmenu'
+import './shared/upnext/end-card'
+import './shared/upnext/upnext-plugin'
+import './shared/stats/stats-card'
+import './shared/stats/stats-plugin'
+import './shared/bezels/bezels-plugin'
+import './shared/peertube/peertube-plugin'
+import './shared/resolutions/peertube-resolutions-plugin'
+import './shared/control-bar/storyboard-plugin'
+import './shared/control-bar/next-previous-video-button'
+import './shared/control-bar/p2p-info-button'
+import './shared/control-bar/peertube-link-button'
+import './shared/control-bar/theater-button'
+import './shared/control-bar/peertube-live-display'
+import './shared/settings/resolution-menu-button'
+import './shared/settings/resolution-menu-item'
+import './shared/settings/settings-dialog'
+import './shared/settings/settings-menu-button'
+import './shared/settings/settings-menu-item'
+import './shared/settings/settings-panel'
+import './shared/settings/settings-panel-child'
+import './shared/playlist/playlist-plugin'
+import './shared/mobile/peertube-mobile-plugin'
+import './shared/mobile/peertube-mobile-buttons'
+import './shared/hotkeys/peertube-hotkeys-plugin'
+import './shared/metrics/metrics-plugin'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { logger } from '@root-helpers/logger'
+import { PluginsManager } from '@root-helpers/plugins-manager'
+import { copyToClipboard } from '@root-helpers/utils'
+import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
+import { isMobile } from '@root-helpers/web-browser'
+import { buildVideoLink, decorateVideoLink, isDefaultLocale, pick } from '@shared/core-utils'
+import { saveAverageBandwidth } from './peertube-player-local-storage'
+import { ControlBarOptionsBuilder, HLSOptionsBuilder, WebVideoOptionsBuilder } from './shared/player-options-builder'
+import { TranslationsManager } from './translations-manager'
+import { PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions, PlayerNetworkInfo, VideoJSPluginOptions } from './types'
+// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
+// Change Captions to Subtitles/CC
+CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
+// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
+CaptionsButton.prototype.label_ = ' '
+// TODO: remove when https://github.com/videojs/video.js/pull/7598 is merged
+const PlayProgressBar = videojs.getComponent('PlayProgressBar') as any
+if (PlayProgressBar.prototype.options_.children.includes('timeTooltip') !== true) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip')
+}
+export class PeerTubePlayer {
+  private pluginsManager: PluginsManager
+  private videojsDecodeErrors = 0
+  private p2pMediaLoaderModule: any
+  private player: VideoJsPlayer
+  private currentLoadOptions: PeerTubePlayerLoadOptions
+  private moduleLoaded = {
+    webVideo: false,
+    p2pMediaLoader: false
+  }
+  constructor (private options: PeerTubePlayerContructorOptions) {
+    this.pluginsManager = options.pluginsManager
+  }
+  unload () {
+    if (!this.player) return
+    this.disposeDynamicPluginsIfNeeded()
+    this.player.reset()
+  }
+  async load (loadOptions: PeerTubePlayerLoadOptions) {
+    this.currentLoadOptions = loadOptions
+    this.setPoster('')
+    this.disposeDynamicPluginsIfNeeded()
+    await this.lazyLoadModulesIfNeeded()
+    await this.buildPlayerIfNeeded()
+    if (this.currentLoadOptions.mode === 'p2p-media-loader') {
+      await this.loadP2PMediaLoader()
+    } else {
+      this.loadWebVideo()
+    }
+    this.loadDynamicPlugins()
+    if (this.options.controlBar === false) this.player.controlBar.hide()
+    else this.player.controlBar.show()
+    this.player.autoplay(this.getAutoPlayValue(this.currentLoadOptions.autoplay))
+    this.player.trigger('video-change')
+  }
+  getPlayer () {
+    return this.player
+  }
+  destroy () {
+    if (this.player) this.player.dispose()
+  }
+  setPoster (url: string) {
+    this.player?.poster(url)
+    this.options.playerElement().poster = url
+  }
+  enable () {
+    if (!this.player) return
+    (this.player.el() as HTMLElement).style.pointerEvents = 'auto'
+  }
+  disable () {
+    if (!this.player) return
+    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 loadP2PMediaLoader () {
+    const hlsOptionsBuilder = new HLSOptionsBuilder({
+      ...pick(this.options, [ 'pluginsManager', 'serverUrl', 'authorizationHeader' ]),
+      ...pick(this.currentLoadOptions, [
+        'videoPassword',
+        'requiresUserAuth',
+        'videoFileToken',
+        'requiresPassword',
+        'isLive',
+        'p2pEnabled',
+        'liveOptions',
+        'hls'
+      ])
+    }, this.p2pMediaLoaderModule)
+    const { hlsjs, p2pMediaLoader } = await hlsOptionsBuilder.getPluginOptions()
+    this.player.hlsjs(hlsjs)
+    this.player.p2pMediaLoader(p2pMediaLoader)
+  }
+  private loadWebVideo () {
+    const webVideoOptionsBuilder = new WebVideoOptionsBuilder(pick(this.currentLoadOptions, [
+      'videoFileToken',
+      'webVideo',
+      'hls',
+      'startTime'
+    ]))
+    this.player.webVideo(webVideoOptionsBuilder.getPluginOptions())
+  }
+  private async buildPlayerIfNeeded () {
+    if (this.player) return
+    await TranslationsManager.loadLocaleInVideoJS(this.options.serverUrl, this.options.language, videojs)
+    const videojsOptions = await this.pluginsManager.runHook(
+      'filter:internal.player.videojs.options.result',
+      this.getVideojsOptions()
+    )
+    this.player = videojs(this.options.playerElement(), videojsOptions)
+    this.player.ready(() => {
+      if (!isNaN(+this.options.playbackRate)) {
+        this.player.playbackRate(+this.options.playbackRate)
+      }
+      let alreadyFallback = false
+      const handleError = () => {
+        if (alreadyFallback) return
+        alreadyFallback = true
+        if (this.currentLoadOptions.mode === 'p2p-media-loader') {
+          this.tryToRecoverHLSError(this.player.error())
+        } else {
+          this.maybeFallbackToWebVideo()
+        }
+      }
+      this.player.one('error', () => handleError())
+      this.player.on('p2p-info', (_, data: PlayerNetworkInfo) => {
+        if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
+        saveAverageBandwidth(data.bandwidthEstimate)
+      })
+      this.player.contextmenuUI(this.getContextMenuOptions())
+      this.displayNotificationWhenOffline()
+    })
+  }
+  private disposeDynamicPluginsIfNeeded () {
+    if (!this.player) return
+    if (this.player.usingPlugin('peertubeMobile')) this.player.peertubeMobile().dispose()
+    if (this.player.usingPlugin('peerTubeHotkeysPlugin')) this.player.peerTubeHotkeysPlugin().dispose()
+    if (this.player.usingPlugin('playlist')) this.player.playlist().dispose()
+    if (this.player.usingPlugin('bezels')) this.player.bezels().dispose()
+    if (this.player.usingPlugin('upnext')) this.player.upnext().dispose()
+    if (this.player.usingPlugin('stats')) this.player.stats().dispose()
+    if (this.player.usingPlugin('storyboard')) this.player.storyboard().dispose()
+    if (this.player.usingPlugin('peertubeDock')) this.player.peertubeDock().dispose()
+    if (this.player.usingPlugin('p2pMediaLoader')) this.player.p2pMediaLoader().dispose()
+    if (this.player.usingPlugin('hlsjs')) this.player.hlsjs().dispose()
+    if (this.player.usingPlugin('webVideo')) this.player.webVideo().dispose()
+  }
+  private loadDynamicPlugins () {
+    if (isMobile()) this.player.peertubeMobile()
+    this.player.bezels()
+    this.player.stats({
+      videoUUID: this.currentLoadOptions.videoUUID,
+      videoIsLive: this.currentLoadOptions.isLive,
+      mode: this.currentLoadOptions.mode,
+      p2pEnabled: this.currentLoadOptions.p2pEnabled
+    })
+    if (this.options.enableHotkeys === true) {
+      this.player.peerTubeHotkeysPlugin({ isLive: this.currentLoadOptions.isLive })
+    }
+    if (this.currentLoadOptions.playlist) {
+      this.player.playlist(this.currentLoadOptions.playlist)
+    }
+    if (this.currentLoadOptions.upnext) {
+      this.player.upnext({
+        timeout: this.currentLoadOptions.upnext.timeout,
+        getTitle: () => this.currentLoadOptions.nextVideo.getVideoTitle(),
+        next: () => this.currentLoadOptions.nextVideo.handler(),
+        isDisplayed: () => this.currentLoadOptions.nextVideo.enabled && this.currentLoadOptions.upnext.isEnabled(),
+        isSuspended: () => this.currentLoadOptions.upnext.isSuspended(this.player)
+      })
+    }
+    if (this.currentLoadOptions.storyboard) {
+      this.player.storyboard(this.currentLoadOptions.storyboard)
+    }
+    if (this.currentLoadOptions.dock) {
+      this.player.peertubeDock(this.currentLoadOptions.dock)
+    }
+  }
+  private async lazyLoadModulesIfNeeded () {
+    if (this.currentLoadOptions.mode === 'web-video' && this.moduleLoaded.webVideo !== true) {
+      await import('./shared/web-video/web-video-plugin')
+    }
+    if (this.currentLoadOptions.mode === 'p2p-media-loader' && this.moduleLoaded.p2pMediaLoader !== true) {
+      const [ p2pMediaLoaderModule ] = await Promise.all([
+        import('@peertube/p2p-media-loader-hlsjs'),
+        import('./shared/p2p-media-loader/hls-plugin'),
+        import('./shared/p2p-media-loader/p2p-media-loader-plugin')
+      ])
+      this.p2pMediaLoaderModule = p2pMediaLoaderModule
+    }
+  }
+  private async tryToRecoverHLSError (err: any) {
+    if (err.code === MediaError.MEDIA_ERR_DECODE) {
+      // Display a notification to user
+      if (this.videojsDecodeErrors === 0) {
+        this.options.errorNotifier(this.player.localize('The video failed to play, will try to fast forward.'))
+      }
+      if (this.videojsDecodeErrors === 20) {
+        this.maybeFallbackToWebVideo()
+        return
+      }
+      logger.info('Fast forwarding HLS to recover from an error.')
+      this.videojsDecodeErrors++
+      await this.load({
+        ...this.currentLoadOptions,
+        mode: 'p2p-media-loader',
+        startTime: this.player.currentTime() + 2,
+        autoplay: true
+      })
+    } else {
+      this.maybeFallbackToWebVideo()
+    }
+  }
+  private async maybeFallbackToWebVideo () {
+    if (this.currentLoadOptions.webVideo.videoFiles.length === 0 || this.currentLoadOptions.mode === 'web-video') {
+      this.player.peertube().displayFatalError()
+      return
+    }
+    logger.info('Fallback to web-video.')
+    await this.load({
+      ...this.currentLoadOptions,
+      mode: 'web-video',
+      startTime: this.player.currentTime(),
+      autoplay: true
+    })
+  }
+  getVideojsOptions (): videojs.PlayerOptions {
+    const html5 = {
+      preloadTextTracks: false
+    }
+    const plugins: VideoJSPluginOptions = {
+      peertube: {
+        hasAutoplay: () => this.getAutoPlayValue(this.currentLoadOptions.autoplay),
+        videoViewUrl: () => this.currentLoadOptions.videoViewUrl,
+        videoViewIntervalMs: this.options.videoViewIntervalMs,
+        authorizationHeader: this.options.authorizationHeader,
+        videoDuration: () => this.currentLoadOptions.duration,
+        startTime: () => this.currentLoadOptions.startTime,
+        stopTime: () => this.currentLoadOptions.stopTime,
+        videoCaptions: () => this.currentLoadOptions.videoCaptions,
+        isLive: () => this.currentLoadOptions.isLive,
+        videoUUID: () => this.currentLoadOptions.videoUUID,
+        subtitle: () => this.currentLoadOptions.subtitle
+      },
+      metrics: {
+        mode: () => this.currentLoadOptions.mode,
+        metricsUrl: () => this.options.metricsUrl,
+        videoUUID: () => this.currentLoadOptions.videoUUID
+      }
+    }
+    const controlBarOptionsBuilder = new ControlBarOptionsBuilder({
+      ...this.options,
+      videoShortUUID: () => this.currentLoadOptions.videoShortUUID,
+      p2pEnabled: () => this.currentLoadOptions.p2pEnabled,
+      nextVideo: () => this.currentLoadOptions.nextVideo,
+      previousVideo: () => this.currentLoadOptions.previousVideo
+    })
+    const videojsOptions = {
+      html5,
+      // We don't use text track settings for now
+      textTrackSettings: false as any, // FIXME: typings
+      controls: this.options.controls !== undefined ? this.options.controls : true,
+      loop: this.options.loop !== undefined ? this.options.loop : false,
+      muted: this.options.muted !== undefined
+        ? this.options.muted
+        : undefined, // Undefined so the player knows it has to check the local storage
+      autoplay: this.getAutoPlayValue(this.currentLoadOptions.autoplay),
+      poster: this.currentLoadOptions.poster,
+      inactivityTimeout: this.options.inactivityTimeout,
+      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
+      plugins,
+      controlBar: {
+        children: controlBarOptionsBuilder.getChildrenOptions() as any // FIXME: typings
+      },
+      language: this.options.language && !isDefaultLocale(this.options.language)
+        ? this.options.language
+        : undefined
+    }
+    return videojsOptions
+  }
+  private getAutoPlayValue (autoplay: boolean): videojs.Autoplay {
+    if (autoplay !== true) return false
+    return this.currentLoadOptions.forceAutoplay
+      ? 'any'
+      : 'play'
+  }
+  private displayNotificationWhenOffline () {
+    const offlineNotificationElem = document.createElement('div')
+    offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
+    offlineNotificationElem.innerText = this.player.localize('You seem to be offline and the video may not work')
+    let offlineNotificationElemAdded = false
+    const handleOnline = () => {
+      if (!offlineNotificationElemAdded) return
+      this.player.el().removeChild(offlineNotificationElem)
+      offlineNotificationElemAdded = false
+      logger.info('The browser is online')
+    }
+    const handleOffline = () => {
+      if (offlineNotificationElemAdded) return
+      this.player.el().appendChild(offlineNotificationElem)
+      offlineNotificationElemAdded = true
+      logger.info('The browser is offline')
+    }
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    this.player.on('dispose', () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    })
+  }
+  private getContextMenuOptions () {
+    const content = () => {
+      const self = this
+      const player = this.player
+      const shortUUID = self.currentLoadOptions.videoShortUUID
+      const isLoopEnabled = player.options_['loop']
+      const items = [
+        {
+          icon: 'repeat',
+          label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
+          listener: function () {
+            player.options_['loop'] = !isLoopEnabled
+          }
+        },
+        {
+          label: player.localize('Copy the video URL'),
+          listener: function () {
+            copyToClipboard(buildVideoLink({ shortUUID }))
+          }
+        },
+        {
+          label: player.localize('Copy the video URL at the current time'),
+          listener: function () {
+            const url = buildVideoLink({ shortUUID })
+            copyToClipboard(decorateVideoLink({ url, startTime: player.currentTime() }))
+          }
+        },
+        {
+          icon: 'code',
+          label: player.localize('Copy embed code'),
+          listener: () => {
+            copyToClipboard(buildVideoOrPlaylistEmbed({
+              embedUrl: self.currentLoadOptions.embedUrl,
+              embedTitle: self.currentLoadOptions.embedTitle
+            }))
+          }
+        }
+      ]
+      items.push({
+        icon: 'info',
+        label: player.localize('Stats for nerds'),
+        listener: () => {
+          player.stats().show()
+        }
+      })
+      return items.map(i => ({
+        ...i,
+        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
+      }))
+    }
+    return { content }
+  }
+}
+// ############################################################################
+export {
+  videojs
+}
diff --git a/client/src/assets/player/shared/bezels/bezels-plugin.ts b/client/src/assets/player/shared/bezels/bezels-plugin.ts
index ca88bc1f9..6afb2c6a3 100644
--- a/client/src/assets/player/shared/bezels/bezels-plugin.ts
+++ b/client/src/assets/player/shared/bezels/bezels-plugin.ts
@@ -1,5 +1,5 @@
 import videojs from 'video.js'
-import './pause-bezel'
+import { PauseBezel } from './pause-bezel'
 const Plugin = videojs.getPlugin('plugin')
@@ -12,7 +12,7 @@ class BezelsPlugin extends Plugin {
      player.addClass('vjs-bezels')
    })
-    player.addChild('PauseBezel', options)
+    player.addChild(new PauseBezel(player, options))
  }
 }
diff --git a/client/src/assets/player/shared/bezels/pause-bezel.ts b/client/src/assets/player/shared/bezels/pause-bezel.ts
index e35c39a5f..d364ad0dd 100644
--- a/client/src/assets/player/shared/bezels/pause-bezel.ts
+++ b/client/src/assets/player/shared/bezels/pause-bezel.ts
@@ -32,26 +32,61 @@ function getPlayBezel () {
 }
 const Component = videojs.getComponent('Component')
-class PauseBezel extends Component {
+export class PauseBezel extends Component {
  container: HTMLDivElement
+  private firstPlayDone = false
+  private paused = false
+  private playerPauseHandler: () => void
+  private playerPlayHandler: () => void
+  private videoChangeHandler: () => void
  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
    super(player, options)
    // Hide bezels on mobile since we already have our mobile overlay
    if (isMobile()) return
-    player.on('pause', (_: any) => {
+    this.playerPauseHandler = () => {
-      if (player.seeking() || player.ended()) return
+      if (player.seeking()) return
+      this.paused = true
+      if (player.ended()) return
      this.container.innerHTML = getPauseBezel()
      this.showBezel()
-    })
+    }
+    this.playerPlayHandler = () => {
+      if (player.seeking() || !this.firstPlayDone || !this.paused) {
+        this.firstPlayDone = true
+        return
+      }
+      this.paused = false
+      this.firstPlayDone = true
-    player.on('play', (_: any) => {
-      if (player.seeking()) return
      this.container.innerHTML = getPlayBezel()
      this.showBezel()
-    })
+    }
+    this.videoChangeHandler = () => {
+      this.firstPlayDone = false
+    }
+    player.on('video-change', () => this.videoChangeHandler)
+    player.on('pause', this.playerPauseHandler)
+    player.on('play', this.playerPlayHandler)
+  }
+  dispose () {
+    if (this.playerPauseHandler) this.player().off('pause', this.playerPauseHandler)
+    if (this.playerPlayHandler) this.player().off('play', this.playerPlayHandler)
+    if (this.videoChangeHandler) this.player().off('video-change', this.videoChangeHandler)
+    super.dispose()
  }
  createEl () {
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index e71e90713..9307027f6 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -2,5 +2,5 @@ export * from './next-previous-video-button'
 export * from './p2p-info-button'
 export * from './peertube-link-button'
 export * from './peertube-live-display'
-export * from './peertube-load-progress-bar'
+export * from './storyboard-plugin'
 export * from './theater-button'
diff --git a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts b/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
index b7b986806..18a107f52 100644
--- a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
+++ b/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
@@ -4,14 +4,18 @@ import { NextPreviousVideoButtonOptions } from '../../types'
 const Button = videojs.getComponent('Button')
 class NextPreviousVideoButton extends Button {
-  private readonly nextPreviousVideoButtonOptions: NextPreviousVideoButtonOptions
+  options_: NextPreviousVideoButtonOptions & videojs.ComponentOptions
-  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions) {
+  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions & videojs.ComponentOptions) {
-    super(player, options as any)
+    super(player, options)
-    this.nextPreviousVideoButtonOptions = options
+    this.player().on('video-change', () => {
+      this.updateDisabled()
+      this.updateShowing()
+    })
-    this.update()
+    this.updateDisabled()
+    this.updateShowing()
  }
  createEl () {
@@ -35,15 +39,20 @@ class NextPreviousVideoButton extends Button {
  }
  handleClick () {
-    this.nextPreviousVideoButtonOptions.handler()
+    this.options_.handler()
  }
-  update () {
+  updateDisabled () {
-    const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
+    const disabled = this.options_.isDisabled()
    if (disabled) this.addClass('vjs-disabled')
    else this.removeClass('vjs-disabled')
  }
+  updateShowing () {
+    if (this.options_.isDisplayed()) this.show()
+    else this.hide()
+  }
 }
 videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
diff --git a/client/src/assets/player/shared/control-bar/p2p-info-button.ts b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
index 1979654ad..4177b3280 100644
--- a/client/src/assets/player/shared/control-bar/p2p-info-button.ts
+++ b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
@@ -1,71 +1,44 @@
 import videojs from 'video.js'
-import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../../types'
+import { PlayerNetworkInfo } from '../../types'
 import { bytes } from '../common'
 const Button = videojs.getComponent('Button')
-class P2pInfoButton extends Button {
+class P2PInfoButton extends Button {
+  el_: HTMLElement
-  constructor (player: videojs.Player, options?: PeerTubeP2PInfoButtonOptions) {
-    super(player, options as any)
-  }
  createEl () {
-    const div = videojs.dom.createEl('div', {
+    const div = videojs.dom.createEl('div', { className: 'vjs-peertube' })
-      className: 'vjs-peertube'
+    const subDivP2P = videojs.dom.createEl('div', {
-    })
-    const subDivWebtorrent = videojs.dom.createEl('div', {
      className: 'vjs-peertube-hidden' // Hide the stats before we get the info
    }) as HTMLDivElement
-    div.appendChild(subDivWebtorrent)
+    div.appendChild(subDivP2P)
-    // Stop here if P2P is not enabled
+    const downloadIcon = videojs.dom.createEl('span', { className: 'icon icon-download' })
-    const p2pEnabled = (this.options_ as PeerTubeP2PInfoButtonOptions).p2pEnabled
+    subDivP2P.appendChild(downloadIcon)
-    if (!p2pEnabled) return div as HTMLButtonElement
-    const downloadIcon = videojs.dom.createEl('span', {
+    const downloadSpeedText = videojs.dom.createEl('span', { className: 'download-speed-text' })
-      className: 'icon icon-download'
+    const downloadSpeedNumber = videojs.dom.createEl('span', { className: 'download-speed-number' })
-    })
-    subDivWebtorrent.appendChild(downloadIcon)
-    const downloadSpeedText = videojs.dom.createEl('span', {
-      className: 'download-speed-text'
-    })
-    const downloadSpeedNumber = videojs.dom.createEl('span', {
-      className: 'download-speed-number'
-    })
    const downloadSpeedUnit = videojs.dom.createEl('span')
    downloadSpeedText.appendChild(downloadSpeedNumber)
    downloadSpeedText.appendChild(downloadSpeedUnit)
-    subDivWebtorrent.appendChild(downloadSpeedText)
+    subDivP2P.appendChild(downloadSpeedText)
-    const uploadIcon = videojs.dom.createEl('span', {
+    const uploadIcon = videojs.dom.createEl('span', { className: 'icon icon-upload' })
-      className: 'icon icon-upload'
+    subDivP2P.appendChild(uploadIcon)
-    })
-    subDivWebtorrent.appendChild(uploadIcon)
-    const uploadSpeedText = videojs.dom.createEl('span', {
+    const uploadSpeedText = videojs.dom.createEl('span', { className: 'upload-speed-text' })
-      className: 'upload-speed-text'
+    const uploadSpeedNumber = videojs.dom.createEl('span', { className: 'upload-speed-number' })
-    })
-    const uploadSpeedNumber = videojs.dom.createEl('span', {
-      className: 'upload-speed-number'
-    })
    const uploadSpeedUnit = videojs.dom.createEl('span')
    uploadSpeedText.appendChild(uploadSpeedNumber)
    uploadSpeedText.appendChild(uploadSpeedUnit)
-    subDivWebtorrent.appendChild(uploadSpeedText)
+    subDivP2P.appendChild(uploadSpeedText)
-    const peersText = videojs.dom.createEl('span', {
+    const peersText = videojs.dom.createEl('span', { className: 'peers-text' })
-      className: 'peers-text'
+    const peersNumber = videojs.dom.createEl('span', { className: 'peers-number' })
-    })
+    subDivP2P.appendChild(peersNumber)
-    const peersNumber = videojs.dom.createEl('span', {
+    subDivP2P.appendChild(peersText)
-      className: 'peers-number'
-    })
-    subDivWebtorrent.appendChild(peersNumber)
-    subDivWebtorrent.appendChild(peersText)
-    const subDivHttp = videojs.dom.createEl('div', {
+    const subDivHttp = videojs.dom.createEl('div', { className: 'vjs-peertube-hidden' }) as HTMLElement
-      className: 'vjs-peertube-hidden'
-    })
    const subDivHttpText = videojs.dom.createEl('span', {
      className: 'http-fallback',
      textContent: 'HTTP'
@@ -74,14 +47,9 @@ class P2pInfoButton extends Button {
    subDivHttp.appendChild(subDivHttpText)
    div.appendChild(subDivHttp)
-    this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
+    this.player_.on('p2p-info', (_event: any, data: PlayerNetworkInfo) => {
-      // We are in HTTP fallback
+      subDivP2P.className = 'vjs-peertube-displayed'
-      if (!data) {
+      subDivHttp.className = 'vjs-peertube-hidden'
-        subDivHttp.className = 'vjs-peertube-displayed'
-        subDivWebtorrent.className = 'vjs-peertube-hidden'
-        return
-      }
      const p2pStats = data.p2p
      const httpStats = data.http
@@ -92,17 +60,17 @@ class P2pInfoButton extends Button {
      const totalUploaded = bytes(p2pStats.uploaded)
      const numPeers = p2pStats.numPeers
-      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
+      subDivP2P.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
      if (data.source === 'p2p-media-loader') {
        const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
        const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
-        subDivWebtorrent.title +=
+        subDivP2P.title +=
          ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
          ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
      }
-      subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
+      subDivP2P.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
      downloadSpeedNumber.textContent = downloadSpeed[0]
      downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
@@ -114,11 +82,24 @@ class P2pInfoButton extends Button {
      peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
      subDivHttp.className = 'vjs-peertube-hidden'
-      subDivWebtorrent.className = 'vjs-peertube-displayed'
+      subDivP2P.className = 'vjs-peertube-displayed'
+    })
+    this.player_.on('http-info', (_event, data: PlayerNetworkInfo) => {
+      // We are in HTTP fallback
+      subDivHttp.className = 'vjs-peertube-displayed'
+      subDivP2P.className = 'vjs-peertube-hidden'
+      subDivHttp.title = this.player().localize('Total downloaded: ') + bytes(data.http.downloaded).join(' ')
+    })
+    this.player_.on('video-change', () => {
+      subDivP2P.className = 'vjs-peertube-hidden'
+      subDivHttp.className = 'vjs-peertube-hidden'
    })
    return div as HTMLButtonElement
  }
 }
-videojs.registerComponent('P2PInfoButton', P2pInfoButton)
+videojs.registerComponent('P2PInfoButton', P2PInfoButton)
diff --git a/client/src/assets/player/shared/control-bar/peertube-link-button.ts b/client/src/assets/player/shared/control-bar/peertube-link-button.ts
index 45d7ac42f..8242b9cea 100644
--- a/client/src/assets/player/shared/control-bar/peertube-link-button.ts
+++ b/client/src/assets/player/shared/control-bar/peertube-link-button.ts
@@ -3,37 +3,58 @@ import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
 import { PeerTubeLinkButtonOptions } from '../../types'
 const Component = videojs.getComponent('Component')
 class PeerTubeLinkButton extends Component {
+  private mouseEnterHandler: () => void
+  private clickHandler: () => void
-  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
+  options_: PeerTubeLinkButtonOptions & videojs.ComponentOptions
-    super(player, options as any)
-  }
-  createEl () {
+  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions & videojs.ComponentOptions) {
-    return this.buildElement()
+    super(player, options)
+    this.updateShowing()
+    this.player().on('video-change', () => this.updateShowing())
  }
-  updateHref () {
+  dispose () {
-    this.el().setAttribute('href', this.buildLink())
+    if (this.el()) return
+    this.el().removeEventListener('mouseenter', this.mouseEnterHandler)
+    this.el().removeEventListener('click', this.clickHandler)
+    super.dispose()
  }
-  private buildElement () {
+  createEl () {
    const el = videojs.dom.createEl('a', {
      href: this.buildLink(),
-      innerHTML: (this.options_ as PeerTubeLinkButtonOptions).instanceName,
+      innerHTML: this.options_.instanceName,
      title: this.player().localize('Video page (new window)'),
      className: 'vjs-peertube-link',
      target: '_blank'
    })
-    el.addEventListener('mouseenter', () => this.updateHref())
+    this.mouseEnterHandler = () => this.updateHref()
-    el.addEventListener('click', () => this.player().pause())
+    this.clickHandler = () => this.player().pause()
+    el.addEventListener('mouseenter', this.mouseEnterHandler)
+    el.addEventListener('click', this.clickHandler)
+    return el
+  }
+  updateShowing () {
+    if (this.options_.isDisplayed()) this.show()
+    else this.hide()
+  }
-    return el as HTMLButtonElement
+  updateHref () {
+    this.el().setAttribute('href', this.buildLink())
  }
  private buildLink () {
-    const url = buildVideoLink({ shortUUID: (this.options_ as PeerTubeLinkButtonOptions).shortUUID })
+    const url = buildVideoLink({ shortUUID: this.options_.shortUUID() })
    return decorateVideoLink({ url, startTime: this.player().currentTime() })
  }
diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
index 649eb0b00..f9f6bf12f 100644
--- a/client/src/assets/player/shared/control-bar/peertube-live-display.ts
+++ b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
@@ -13,7 +13,6 @@ class PeerTubeLiveDisplay extends ClickableComponent {
    this.interval = this.setInterval(() => this.updateClass(), 1000)
-    this.show()
    this.updateSync(true)
  }
@@ -30,7 +29,7 @@ class PeerTubeLiveDisplay extends ClickableComponent {
  createEl () {
    const el = super.createEl('div', {
-      className: 'vjs-live-control vjs-control'
+      className: 'vjs-pt-live-control vjs-control'
    })
    this.contentEl_ = videojs.dom.createEl('div', {
@@ -83,10 +82,9 @@ class PeerTubeLiveDisplay extends ClickableComponent {
  }
  private getHLSJS () {
-    const p2pMediaLoader = this.player()?.p2pMediaLoader
+    if (!this.player()?.usingPlugin('p2pMediaLoader')) return
-    if (!p2pMediaLoader) return undefined
-    return p2pMediaLoader().getHLSJS()
+    return this.player().p2pMediaLoader().getHLSJS()
  }
 }
diff --git a/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts b/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts
deleted file mode 100644
index 623e70eb2..000000000
--- a/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import videojs from 'video.js'
-const Component = videojs.getComponent('Component')
-class PeerTubeLoadProgressBar extends Component {
-  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
-    super(player, options)
-    this.on(player, 'progress', this.update)
-  }
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-load-progress',
-      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
-    })
-  }
-  dispose () {
-    super.dispose()
-  }
-  update () {
-    const torrent = this.player().webtorrent().getTorrent()
-    if (!torrent) return
-    (this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
-  }
-}
-Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)
diff --git a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
new file mode 100644
index 000000000..80c69b5f2
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
@@ -0,0 +1,197 @@
+import videojs from 'video.js'
+import { StoryboardOptions } from '../../types'
+// Big thanks to this beautiful plugin: https://github.com/phloxic/videojs-sprite-thumbnails
+// Adapted to respect peertube player style
+const Plugin = videojs.getPlugin('plugin')
+class StoryboardPlugin extends Plugin {
+  private url: string
+  private height: number
+  private width: number
+  private interval: number
+  private cached: boolean
+  private mouseTimeTooltip: videojs.MouseTimeDisplay
+  private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: any }
+  private progress: any
+  private spritePlaceholder: HTMLElement
+  private readonly sprites: { [id: string]: HTMLImageElement } = {}
+  private readonly boundedHijackMouseTooltip: typeof StoryboardPlugin.prototype.hijackMouseTooltip
+  private onReadyOrLoadstartHandler: (event: { type: 'ready' }) => void
+  constructor (player: videojs.Player, options: videojs.ComponentOptions & StoryboardOptions) {
+    super(player, options)
+    this.url = options.url
+    this.height = options.height
+    this.width = options.width
+    this.interval = options.interval
+    this.boundedHijackMouseTooltip = this.hijackMouseTooltip.bind(this)
+    this.init()
+    this.player.ready(() => {
+      player.addClass('vjs-storyboard')
+    })
+  }
+  init () {
+    const controls = this.player.controlBar as any
+    // default control bar component tree is expected
+    // https://docs.videojs.com/tutorial-components.html#default-component-tree
+    this.progress = controls?.progressControl
+    this.seekBar = this.progress?.seekBar
+    this.mouseTimeTooltip = this.seekBar?.mouseTimeDisplay?.timeTooltip
+    this.spritePlaceholder = videojs.dom.createEl('div', { className: 'vjs-storyboard-sprite-placeholder' }) as HTMLElement
+    this.seekBar?.el()?.appendChild(this.spritePlaceholder)
+    this.onReadyOrLoadstartHandler = event => {
+      if (event.type !== 'ready') {
+        const spriteSource = this.player.currentSources().find(source => {
+          return Object.prototype.hasOwnProperty.call(source, 'storyboard')
+        }) as any
+        const spriteOpts = spriteSource?.['storyboard'] as StoryboardOptions
+        if (spriteOpts) {
+          this.url = spriteOpts.url
+          this.height = spriteOpts.height
+          this.width = spriteOpts.width
+          this.interval = spriteOpts.interval
+        }
+      }
+      this.cached = !!this.sprites[this.url]
+      this.load()
+    }
+    this.player.on([ 'ready', 'loadstart' ], this.onReadyOrLoadstartHandler)
+  }
+  dispose () {
+    if (this.onReadyOrLoadstartHandler) this.player.off([ 'ready', 'loadstart' ], this.onReadyOrLoadstartHandler)
+    if (this.progress) this.progress.off([ 'mousemove', 'touchmove' ], this.boundedHijackMouseTooltip)
+    this.seekBar?.el()?.removeChild(this.spritePlaceholder)
+    super.dispose()
+  }
+  private load () {
+    const spriteEvents = [ 'mousemove', 'touchmove' ]
+    if (this.isReady()) {
+      if (!this.cached) {
+        this.sprites[this.url] = videojs.dom.createEl('img', {
+          src: this.url
+        })
+      }
+      this.progress.on(spriteEvents, this.boundedHijackMouseTooltip)
+    } else {
+      this.progress.off(spriteEvents, this.boundedHijackMouseTooltip)
+      this.resetMouseTooltip()
+    }
+  }
+  private hijackMouseTooltip (evt: Event) {
+    const sprite = this.sprites[this.url]
+    const imgWidth = sprite.naturalWidth
+    const imgHeight = sprite.naturalHeight
+    const seekBarEl = this.seekBar.el()
+    if (!sprite.complete || !imgWidth || !imgHeight) {
+      this.resetMouseTooltip()
+      return
+    }
+    this.player.requestNamedAnimationFrame('StoryBoardPlugin#hijackMouseTooltip', () => {
+      const seekBarRect = videojs.dom.getBoundingClientRect(seekBarEl)
+      const playerRect = videojs.dom.getBoundingClientRect(this.player.el())
+      if (!seekBarRect || !playerRect) return
+      const seekBarX = videojs.dom.getPointerPosition(seekBarEl, evt).x
+      let position = seekBarX * this.player.duration()
+      const maxPosition = Math.round((imgHeight / this.height) * (imgWidth / this.width)) - 1
+      position = Math.min(position / this.interval, maxPosition)
+      const responsive = 600
+      const playerWidth = this.player.currentWidth()
+      const scaleFactor = responsive && playerWidth < responsive
+        ? playerWidth / responsive
+        : 1
+      const columns = imgWidth / this.width
+      const scaledWidth = this.width * scaleFactor
+      const scaledHeight = this.height * scaleFactor
+      const cleft = Math.floor(position % columns) * -scaledWidth
+      const ctop = Math.floor(position / columns) * -scaledHeight
+      const bgSize = `${imgWidth * scaleFactor}px ${imgHeight * scaleFactor}px`
+      const topOffset = -scaledHeight - 60
+      const previewHalfSize = Math.round(scaledWidth / 2)
+      let left = seekBarRect.width * seekBarX - previewHalfSize
+      // Seek bar doesn't take all the player width, so we can add/minus a few more pixels
+      const minLeft = playerRect.left - seekBarRect.left
+      const maxLeft = seekBarRect.width - scaledWidth + (playerRect.right - seekBarRect.right)
+      if (left < minLeft) left = minLeft
+      if (left > maxLeft) left = maxLeft
+      const tooltipStyle: { [id: string]: string } = {
+        'background-image': `url("${this.url}")`,
+        'background-repeat': 'no-repeat',
+        'background-position': `${cleft}px ${ctop}px`,
+        'background-size': bgSize,
+        'color': '#fff',
+        'text-shadow': '1px 1px #000',
+        'position': 'relative',
+        'top': `${topOffset}px`,
+        'border': '1px solid #000',
+        // border should not overlay thumbnail area
+        'width': `${scaledWidth + 2}px`,
+        'height': `${scaledHeight + 2}px`
+      }
+      tooltipStyle.left = `${left}px`
+      for (const [ key, value ] of Object.entries(tooltipStyle)) {
+        this.spritePlaceholder.style.setProperty(key, value)
+      }
+    })
+  }
+  private resetMouseTooltip () {
+    if (this.spritePlaceholder) {
+      this.spritePlaceholder.style.cssText = ''
+    }
+  }
+  private isReady () {
+    return this.mouseTimeTooltip && this.width && this.height && this.url
+  }
+}
+videojs.registerPlugin('storyboard', StoryboardPlugin)
+export { StoryboardPlugin }
diff --git a/client/src/assets/player/shared/control-bar/theater-button.ts b/client/src/assets/player/shared/control-bar/theater-button.ts
index 56c349d6b..a5feb56ee 100644
--- a/client/src/assets/player/shared/control-bar/theater-button.ts
+++ b/client/src/assets/player/shared/control-bar/theater-button.ts
@@ -1,14 +1,19 @@
 import videojs from 'video.js'
 import { getStoredTheater, saveTheaterInStore } from '../../peertube-player-local-storage'
+import { TheaterButtonOptions } from '../../types'
 const Button = videojs.getComponent('Button')
 class TheaterButton extends Button {
  private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
-  constructor (player: videojs.Player, options: videojs.ComponentOptions) {
+  private theaterButtonOptions: TheaterButtonOptions
+  constructor (player: videojs.Player, options: TheaterButtonOptions & videojs.ComponentOptions) {
    super(player, options)
+    this.theaterButtonOptions = options
    const enabled = getStoredTheater()
    if (enabled === true) {
      this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
@@ -19,6 +24,9 @@ class TheaterButton extends Button {
    this.controlText('Theater mode')
    this.player().theaterEnabled = enabled
+    this.updateShowing()
+    this.player().on('video-change', () => this.updateShowing())
  }
  buildCSSClass () {
@@ -36,7 +44,7 @@ class TheaterButton extends Button {
    saveTheaterInStore(theaterEnabled)
-    this.player_.trigger('theaterChange', theaterEnabled)
+    this.player_.trigger('theater-change', theaterEnabled)
  }
  handleClick () {
@@ -48,6 +56,11 @@ class TheaterButton extends Button {
  private isTheaterEnabled () {
    return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
  }
+  private updateShowing () {
+    if (this.theaterButtonOptions.isDisplayed()) this.show()
+    else this.hide()
+  }
 }
 videojs.registerComponent('TheaterButton', TheaterButton)
diff --git a/client/src/assets/player/shared/dock/peertube-dock-component.ts b/client/src/assets/player/shared/dock/peertube-dock-component.ts
index 183c7a00f..c13ca647b 100644
--- a/client/src/assets/player/shared/dock/peertube-dock-component.ts
+++ b/client/src/assets/player/shared/dock/peertube-dock-component.ts
@@ -10,17 +10,20 @@ export type PeerTubeDockComponentOptions = {
 class PeerTubeDockComponent extends Component {
-  createEl () {
+  options_: videojs.ComponentOptions & PeerTubeDockComponentOptions
-    const options = this.options_ as PeerTubeDockComponentOptions
-    const el = super.createEl('div', {
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-      className: 'peertube-dock'
+  constructor (player: videojs.Player, options: videojs.ComponentOptions & PeerTubeDockComponentOptions) {
-    })
+    super(player, options)
+  }
+  createEl () {
+    const el = super.createEl('div', { className: 'peertube-dock' })
-    if (options.avatarUrl) {
+    if (this.options_.avatarUrl) {
      const avatar = videojs.dom.createEl('img', {
        className: 'peertube-dock-avatar',
-        src: options.avatarUrl
+        src: this.options_.avatarUrl
      })
      el.appendChild(avatar)
@@ -30,27 +33,27 @@ class PeerTubeDockComponent extends Component {
      className: 'peertube-dock-title-description'
    })
-    if (options.title) {
+    if (this.options_.title) {
      const title = videojs.dom.createEl('div', {
        className: 'peertube-dock-title',
-        title: options.title,
+        title: this.options_.title,
-        innerHTML: options.title
+        innerHTML: this.options_.title
      })
      elWrapperTitleDescription.appendChild(title)
    }
-    if (options.description) {
+    if (this.options_.description) {
      const description = videojs.dom.createEl('div', {
        className: 'peertube-dock-description',
-        title: options.description,
+        title: this.options_.description,
-        innerHTML: options.description
+        innerHTML: this.options_.description
      })
      elWrapperTitleDescription.appendChild(description)
    }
-    if (options.title || options.description) {
+    if (this.options_.title || this.options_.description) {
      el.appendChild(elWrapperTitleDescription)
    }
diff --git a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts b/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
index 245981692..fc71a8c4b 100644
--- a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
+++ b/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
@@ -10,14 +10,25 @@ export type PeerTubeDockPluginOptions = {
 }
 class PeerTubeDockPlugin extends Plugin {
+  private dockComponent: PeerTubeDockComponent
  constructor (player: videojs.Player, options: videojs.PlayerOptions & PeerTubeDockPluginOptions) {
    super(player, options)
-    this.player.addClass('peertube-dock')
+    player.ready(() => {
+      player.addClass('peertube-dock')
-    this.player.ready(() => {
-      this.player.addChild('PeerTubeDockComponent', options) as PeerTubeDockComponent
    })
+    this.dockComponent = new PeerTubeDockComponent(player, options)
+    player.addChild(this.dockComponent)
+  }
+  dispose () {
+    this.dockComponent?.dispose()
+    this.player.removeChild(this.dockComponent)
+    this.player.removeClass('peertube-dock')
+    super.dispose()
  }
 }
diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
index 2742b21a1..e77b7dc6d 100644
--- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
+++ b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
@@ -31,6 +31,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
  dispose () {
    document.removeEventListener('keydown', this.handleKeyFunction)
+    super.dispose()
  }
  private onKeyDown (event: KeyboardEvent) {
diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
deleted file mode 100644
index 26f923e92..000000000
--- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import {
-  CommonOptions,
-  NextPreviousVideoButtonOptions,
-  PeerTubeLinkButtonOptions,
-  PeertubePlayerManagerOptions,
-  PlayerMode
-} from '../../types'
-export class ControlBarOptionsBuilder {
-  private options: CommonOptions
-  constructor (
-    globalOptions: PeertubePlayerManagerOptions,
-    private mode: PlayerMode
-  ) {
-    this.options = globalOptions.common
-  }
-  getChildrenOptions () {
-    const children = {}
-    if (this.options.previousVideo) {
-      Object.assign(children, this.getPreviousVideo())
-    }
-    Object.assign(children, { playToggle: {} })
-    if (this.options.nextVideo) {
-      Object.assign(children, this.getNextVideo())
-    }
-    Object.assign(children, {
-      ...this.getTimeControls(),
-      flexibleWidthSpacer: {},
-      ...this.getProgressControl(),
-      p2PInfoButton: {
-        p2pEnabled: this.options.p2pEnabled
-      },
-      muteToggle: {},
-      volumeControl: {},
-      ...this.getSettingsButton()
-    })
-    if (this.options.peertubeLink === true) {
-      Object.assign(children, {
-        peerTubeLinkButton: {
-          shortUUID: this.options.videoShortUUID,
-          instanceName: this.options.instanceName
-        } as PeerTubeLinkButtonOptions
-      })
-    }
-    if (this.options.theaterButton === true) {
-      Object.assign(children, {
-        theaterButton: {}
-      })
-    }
-    Object.assign(children, {
-      fullscreenToggle: {}
-    })
-    return children
-  }
-  private getSettingsButton () {
-    const settingEntries: string[] = []
-    if (!this.options.isLive) {
-      settingEntries.push('playbackRateMenuButton')
-    }
-    if (this.options.captions === true) settingEntries.push('captionsButton')
-    settingEntries.push('resolutionMenuButton')
-    return {
-      settingsButton: {
-        setup: {
-          maxHeightOffset: 40
-        },
-        entries: settingEntries
-      }
-    }
-  }
-  private getTimeControls () {
-    if (this.options.isLive) {
-      return {
-        peerTubeLiveDisplay: {}
-      }
-    }
-    return {
-      currentTimeDisplay: {},
-      timeDivider: {},
-      durationDisplay: {}
-    }
-  }
-  private getProgressControl () {
-    if (this.options.isLive) return {}
-    const loadProgressBar = this.mode === 'webtorrent'
-      ? 'peerTubeLoadProgressBar'
-      : 'loadProgressBar'
-    return {
-      progressControl: {
-        children: {
-          seekBar: {
-            children: {
-              [loadProgressBar]: {},
-              mouseTimeDisplay: {},
-              playProgressBar: {}
-            }
-          }
-        }
-      }
-    }
-  }
-  private getPreviousVideo () {
-    const buttonOptions: NextPreviousVideoButtonOptions = {
-      type: 'previous',
-      handler: this.options.previousVideo,
-      isDisabled: () => {
-        if (!this.options.hasPreviousVideo) return false
-        return !this.options.hasPreviousVideo()
-      }
-    }
-    return { previousVideoButton: buttonOptions }
-  }
-  private getNextVideo () {
-    const buttonOptions: NextPreviousVideoButtonOptions = {
-      type: 'next',
-      handler: this.options.nextVideo,
-      isDisabled: () => {
-        if (!this.options.hasNextVideo) return false
-        return !this.options.hasNextVideo()
-      }
-    }
-    return { nextVideoButton: buttonOptions }
-  }
-}
diff --git a/client/src/assets/player/shared/manager-options/index.ts b/client/src/assets/player/shared/manager-options/index.ts
deleted file mode 100644
index 4934d8302..000000000
--- a/client/src/assets/player/shared/manager-options/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './manager-options-builder'
diff --git a/client/src/assets/player/shared/manager-options/manager-options-builder.ts b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
deleted file mode 100644
index 5d3ee4c4a..000000000
--- a/client/src/assets/player/shared/manager-options/manager-options-builder.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import videojs from 'video.js'
-import { copyToClipboard } from '@root-helpers/utils'
-import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
-import { isIOS, isSafari } from '@root-helpers/web-browser'
-import { buildVideoLink, decorateVideoLink, pick } from '@shared/core-utils'
-import { isDefaultLocale } from '@shared/core-utils/i18n'
-import { VideoJSPluginOptions } from '../../types'
-import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../types/manager-options'
-import { ControlBarOptionsBuilder } from './control-bar-options-builder'
-import { HLSOptionsBuilder } from './hls-options-builder'
-import { WebTorrentOptionsBuilder } from './webtorrent-options-builder'
-export class ManagerOptionsBuilder {
-  constructor (
-    private mode: PlayerMode,
-    private options: PeertubePlayerManagerOptions,
-    private p2pMediaLoaderModule?: any
-  ) {
-  }
-  async getVideojsOptions (alreadyPlayed: boolean): Promise<videojs.PlayerOptions> {
-    const commonOptions = this.options.common
-    let autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed)
-    const html5 = {
-      preloadTextTracks: false
-    }
-    const plugins: VideoJSPluginOptions = {
-      peertube: {
-        mode: this.mode,
-        autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
-        ...pick(commonOptions, [
-          'videoViewUrl',
-          'videoViewIntervalMs',
-          'authorizationHeader',
-          'startTime',
-          'videoDuration',
-          'subtitle',
-          'videoCaptions',
-          'stopTime',
-          'isLive',
-          'videoUUID'
-        ])
-      },
-      metrics: {
-        mode: this.mode,
-        ...pick(commonOptions, [
-          'metricsUrl',
-          'videoUUID'
-        ])
-      }
-    }
-    if (commonOptions.playlist) {
-      plugins.playlist = commonOptions.playlist
-    }
-    if (this.mode === 'p2p-media-loader') {
-      const hlsOptionsBuilder = new HLSOptionsBuilder(this.options, this.p2pMediaLoaderModule)
-      const options = await hlsOptionsBuilder.getPluginOptions()
-      Object.assign(plugins, pick(options, [ 'hlsjs', 'p2pMediaLoader' ]))
-      Object.assign(html5, options.html5)
-    } else if (this.mode === 'webtorrent') {
-      const webtorrentOptionsBuilder = new WebTorrentOptionsBuilder(this.options, this.getAutoPlayValue(autoplay, alreadyPlayed))
-      Object.assign(plugins, webtorrentOptionsBuilder.getPluginOptions())
-      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
-      autoplay = false
-    }
-    const controlBarOptionsBuilder = new ControlBarOptionsBuilder(this.options, this.mode)
-    const videojsOptions = {
-      html5,
-      // We don't use text track settings for now
-      textTrackSettings: false as any, // FIXME: typings
-      controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
-      loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
-      muted: commonOptions.muted !== undefined
-        ? commonOptions.muted
-        : undefined, // Undefined so the player knows it has to check the local storage
-      autoplay: this.getAutoPlayValue(autoplay, alreadyPlayed),
-      poster: commonOptions.poster,
-      inactivityTimeout: commonOptions.inactivityTimeout,
-      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
-      plugins,
-      controlBar: {
-        children: controlBarOptionsBuilder.getChildrenOptions() as any // FIXME: typings
-      }
-    }
-    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
-      Object.assign(videojsOptions, { language: commonOptions.language })
-    }
-    return videojsOptions
-  }
-  private getAutoPlayValue (autoplay: videojs.Autoplay, alreadyPlayed: boolean) {
-    if (autoplay !== true) return autoplay
-    // On first play, disable autoplay to avoid issues
-    // But if the player already played videos, we can safely autoplay next ones
-    if (isIOS() || isSafari()) {
-      return alreadyPlayed ? 'play' : false
-    }
-    return this.options.common.forceAutoplay
-      ? 'any'
-      : 'play'
-  }
-  getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) {
-    const content = () => {
-      const isLoopEnabled = player.options_['loop']
-      const items = [
-        {
-          icon: 'repeat',
-          label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
-          listener: function () {
-            player.options_['loop'] = !isLoopEnabled
-          }
-        },
-        {
-          label: player.localize('Copy the video URL'),
-          listener: function () {
-            copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID }))
-          }
-        },
-        {
-          label: player.localize('Copy the video URL at the current time'),
-          listener: function (this: videojs.Player) {
-            const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID })
-            copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
-          }
-        },
-        {
-          icon: 'code',
-          label: player.localize('Copy embed code'),
-          listener: () => {
-            copyToClipboard(buildVideoOrPlaylistEmbed({ embedUrl: commonOptions.embedUrl, embedTitle: commonOptions.embedTitle }))
-          }
-        }
-      ]
-      if (this.mode === 'webtorrent') {
-        items.push({
-          label: player.localize('Copy magnet URI'),
-          listener: function (this: videojs.Player) {
-            copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
-          }
-        })
-      }
-      items.push({
-        icon: 'info',
-        label: player.localize('Stats for nerds'),
-        listener: () => {
-          player.stats().show()
-        }
-      })
-      return items.map(i => ({
-        ...i,
-        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
-      }))
-    }
-    return { content }
-  }
-}
diff --git a/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts b/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts
deleted file mode 100644
index b5bdcd4e6..000000000
--- a/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { addQueryParams } from '../../../../../../shared/core-utils'
-import { PeertubePlayerManagerOptions, WebtorrentPluginOptions } from '../../types'
-export class WebTorrentOptionsBuilder {
-  constructor (
-    private options: PeertubePlayerManagerOptions,
-    private autoPlayValue: any
-  ) {
-  }
-  getPluginOptions () {
-    const commonOptions = this.options.common
-    const webtorrentOptions = this.options.webtorrent
-    const p2pMediaLoaderOptions = this.options.p2pMediaLoader
-    const autoplay = this.autoPlayValue === 'play'
-    const webtorrent: WebtorrentPluginOptions = {
-      autoplay,
-      playerRefusedP2P: commonOptions.p2pEnabled === false,
-      videoDuration: commonOptions.videoDuration,
-      playerElement: commonOptions.playerElement,
-      videoFileToken: commonOptions.videoFileToken,
-      requiresAuth: commonOptions.requiresAuth,
-      buildWebSeedUrls: file => {
-        if (!commonOptions.requiresAuth) return []
-        return [ addQueryParams(file.fileUrl, { videoFileToken: commonOptions.videoFileToken() }) ]
-      },
-      videoFiles: webtorrentOptions.videoFiles.length !== 0
-        ? webtorrentOptions.videoFiles
-        // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode
-        : p2pMediaLoaderOptions?.videoFiles || [],
-      startTime: commonOptions.startTime
-    }
-    return { webtorrent }
-  }
-}
diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts
index 2aae3e90a..48363a724 100644
--- a/client/src/assets/player/shared/metrics/metrics-plugin.ts
+++ b/client/src/assets/player/shared/metrics/metrics-plugin.ts
@@ -1,14 +1,15 @@
+import debug from 'debug'
 import videojs from 'video.js'
-import { PlaybackMetricCreate } from '../../../../../../shared/models'
-import { MetricsPluginOptions, PlayerMode, PlayerNetworkInfo } from '../../types'
 import { logger } from '@root-helpers/logger'
+import { PlaybackMetricCreate } from '../../../../../../shared/models'
+import { MetricsPluginOptions, PlayerNetworkInfo } from '../../types'
+const debugLogger = debug('peertube:player:metrics')
 const Plugin = videojs.getPlugin('plugin')
 class MetricsPlugin extends Plugin {
-  private readonly metricsUrl: string
+  options_: MetricsPluginOptions
-  private readonly videoUUID: string
-  private readonly mode: PlayerMode
  private downloadedBytesP2P = 0
  private downloadedBytesHTTP = 0
@@ -28,29 +29,54 @@ class MetricsPlugin extends Plugin {
  constructor (player: videojs.Player, options: MetricsPluginOptions) {
    super(player)
-    this.metricsUrl = options.metricsUrl
+    this.options_ = options
-    this.videoUUID = options.videoUUID
-    this.mode = options.mode
-    this.player.one('play', () => {
+    this.trackBytes()
-      this.runMetricsInterval()
+    this.trackResolutionChange()
+    this.trackErrors()
-      this.trackBytes()
+    this.one('play', () => {
-      this.trackResolutionChange()
+      this.player.on('video-change', () => {
-      this.trackErrors()
+        this.runMetricsIntervalOnPlay()
+      })
    })
+    this.runMetricsIntervalOnPlay()
  }
  dispose () {
    if (this.metricsInterval) clearInterval(this.metricsInterval)
+    super.dispose()
+  }
+  private runMetricsIntervalOnPlay () {
+    this.downloadedBytesP2P = 0
+    this.downloadedBytesHTTP = 0
+    this.uploadedBytesP2P = 0
+    this.resolutionChanges = 0
+    this.errors = 0
+    this.lastPlayerNetworkInfo = undefined
+    debugLogger('Will track metrics on next play')
+    this.player.one('play', () => {
+      debugLogger('Tracking metrics')
+      this.runMetricsInterval()
+    })
  }
  private runMetricsInterval () {
+    if (this.metricsInterval) clearInterval(this.metricsInterval)
    this.metricsInterval = setInterval(() => {
      let resolution: number
      let fps: number
-      if (this.mode === 'p2p-media-loader') {
+      if (this.player.usingPlugin('p2pMediaLoader')) {
        const level = this.player.p2pMediaLoader().getCurrentLevel()
        if (!level) return
@@ -60,21 +86,23 @@ class MetricsPlugin extends Plugin {
        fps = framerate
          ? parseInt(framerate, 10)
          : undefined
-      } else { // webtorrent
+      } else if (this.player.usingPlugin('webVideo')) {
-        const videoFile = this.player.webtorrent().getCurrentVideoFile()
+        const videoFile = this.player.webVideo().getCurrentVideoFile()
        if (!videoFile) return
        resolution = videoFile.resolution.id
        fps = videoFile.fps && videoFile.fps !== -1
          ? videoFile.fps
          : undefined
+      } else {
+        return
      }
      const body: PlaybackMetricCreate = {
        resolution,
        fps,
-        playerMode: this.mode,
+        playerMode: this.options_.mode(),
        resolutionChanges: this.resolutionChanges,
@@ -85,7 +113,7 @@ class MetricsPlugin extends Plugin {
        uploadedBytesP2P: this.uploadedBytesP2P,
-        videoId: this.videoUUID
+        videoId: this.options_.videoUUID()
      }
      this.resolutionChanges = 0
@@ -99,15 +127,13 @@ class MetricsPlugin extends Plugin {
      const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
-      return fetch(this.metricsUrl, { method: 'POST', body: JSON.stringify(body), headers })
+      return fetch(this.options_.metricsUrl(), { method: 'POST', body: JSON.stringify(body), headers })
        .catch(err => logger.error('Cannot send metrics to the server.', err))
    }, this.CONSTANTS.METRICS_INTERVAL)
  }
  private trackBytes () {
-    this.player.on('p2pInfo', (_event, data: PlayerNetworkInfo) => {
+    this.player.on('p2p-info', (_event, data: PlayerNetworkInfo) => {
-      if (!data) return
      this.downloadedBytesHTTP += data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)
      this.downloadedBytesP2P += data.p2p.downloaded - (this.lastPlayerNetworkInfo?.p2p.downloaded || 0)
@@ -115,10 +141,18 @@ class MetricsPlugin extends Plugin {
      this.lastPlayerNetworkInfo = data
    })
+    this.player.on('http-info', (_event, data: PlayerNetworkInfo) => {
+      this.downloadedBytesHTTP += data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)
+    })
  }
  private trackResolutionChange () {
-    this.player.on('engineResolutionChange', () => {
+    this.player.on('engine-resolution-change', () => {
+      this.resolutionChanges++
+    })
+    this.player.on('user-resolution-change', () => {
      this.resolutionChanges++
    })
  }
diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
index 09cb98f2e..1bc3ca38d 100644
--- a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
+++ b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
@@ -2,22 +2,20 @@ import videojs from 'video.js'
 const Component = videojs.getComponent('Component')
 class PeerTubeMobileButtons extends Component {
+  private mainButton: HTMLDivElement
  private rewind: Element
  private forward: Element
  private rewindText: Element
  private forwardText: Element
-  createEl () {
+  private touchStartHandler: (e: TouchEvent) => void
-    const container = super.createEl('div', {
-      className: 'vjs-mobile-buttons-overlay'
-    }) as HTMLDivElement
-    const mainButton = super.createEl('div', {
+  createEl () {
-      className: 'main-button'
+    const container = super.createEl('div', { className: 'vjs-mobile-buttons-overlay' }) as HTMLDivElement
-    }) as HTMLDivElement
+    this.mainButton = super.createEl('div', { className: 'main-button' }) as HTMLDivElement
-    mainButton.addEventListener('touchstart', e => {
+    this.touchStartHandler = e => {
      e.stopPropagation()
      if (this.player_.paused() || this.player_.ended()) {
@@ -26,7 +24,9 @@ class PeerTubeMobileButtons extends Component {
      }
      this.player_.pause()
-    })
+    }
+    this.mainButton.addEventListener('touchstart', this.touchStartHandler, { passive: true })
    this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' })
    this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' })
@@ -40,12 +40,18 @@ class PeerTubeMobileButtons extends Component {
    this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' }))
    container.appendChild(this.rewind)
-    container.appendChild(mainButton)
+    container.appendChild(this.mainButton)
    container.appendChild(this.forward)
    return container
  }
+  dispose () {
+    if (this.touchStartHandler) this.mainButton.removeEventListener('touchstart', this.touchStartHandler)
+    super.dispose()
+  }
  displayFastSeek (amount: number) {
    if (amount === 0) {
      this.hideRewind()
diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
index 646e9f8c6..f31fa7ddb 100644
--- a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
+++ b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
@@ -21,6 +21,15 @@ class PeerTubeMobilePlugin extends Plugin {
  private setCurrentTimeTimeout: ReturnType<typeof setTimeout>
+  private onPlayHandler: () => void
+  private onFullScreenChangeHandler: () => void
+  private onTouchStartHandler: (event: TouchEvent) => void
+  private onMobileButtonTouchStartHandler: (event: TouchEvent) => void
+  private sliderActiveHandler: () => void
+  private sliderInactiveHandler: () => void
+  private seekBar: videojs.Component
  constructor (player: videojs.Player, options: videojs.PlayerOptions) {
    super(player, options)
@@ -36,18 +45,38 @@ class PeerTubeMobilePlugin extends Plugin {
    (this.player.options_.userActions as any).click = false
    this.player.options_.userActions.doubleClick = false
-    this.player.one('play', () => {
+    this.onPlayHandler = () => this.initTouchStartEvents()
-      this.initTouchStartEvents()
+    this.player.one('play', this.onPlayHandler)
-    })
+    this.seekBar = this.player.getDescendant([ 'controlBar', 'progressControl', 'seekBar' ])
+    this.sliderActiveHandler = () => this.player.addClass('vjs-mobile-sliding')
+    this.sliderInactiveHandler = () => this.player.removeClass('vjs-mobile-sliding')
+    this.seekBar.on('slideractive', this.sliderActiveHandler)
+    this.seekBar.on('sliderinactive', this.sliderInactiveHandler)
+  }
+  dispose () {
+    if (this.onPlayHandler) this.player.off('play', this.onPlayHandler)
+    if (this.onFullScreenChangeHandler) this.player.off('fullscreenchange', this.onFullScreenChangeHandler)
+    if (this.onTouchStartHandler) this.player.off('touchstart', this.onFullScreenChangeHandler)
+    if (this.onMobileButtonTouchStartHandler) {
+      this.peerTubeMobileButtons?.el().removeEventListener('touchstart', this.onMobileButtonTouchStartHandler)
+    }
+    super.dispose()
  }
  private handleFullscreenRotation () {
-    this.player.on('fullscreenchange', () => {
+    this.onFullScreenChangeHandler = () => {
      if (!this.player.isFullscreen() || this.isPortraitVideo()) return
      screen.orientation.lock('landscape')
        .catch(err => logger.error('Cannot lock screen to landscape.', err))
-    })
+    }
+    this.player.on('fullscreenchange', this.onFullScreenChangeHandler)
  }
  private isPortraitVideo () {
@@ -80,19 +109,22 @@ class PeerTubeMobilePlugin extends Plugin {
      this.lastTapEvent = event
    }
-    this.player.on('touchstart', (event: TouchEvent) => {
+    this.onTouchStartHandler = event => {
      // Only enable user active on player touch, we listen event on peertube mobile buttons to disable it
      if (this.player.userActive()) return
      handleTouchStart(event)
-    })
+    }
+    this.player.on('touchstart', this.onTouchStartHandler)
-    this.peerTubeMobileButtons.el().addEventListener('touchstart', (event: TouchEvent) => {
+    this.onMobileButtonTouchStartHandler = event => {
      // Prevent mousemove/click events firing on the player, that conflict with our user active logic
      event.preventDefault()
      handleTouchStart(event)
-    }, { passive: false })
+    }
+    this.peerTubeMobileButtons.el().addEventListener('touchstart', this.onMobileButtonTouchStartHandler, { passive: false })
  }
  private onDoubleTap (event: TouchEvent) {
diff --git a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
index d05d6193c..d83ec625a 100644
--- a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
@@ -14,6 +14,10 @@ type Metadata = {
  levels: Level[]
 }
+// ---------------------------------------------------------------------------
+// Source handler registration
+// ---------------------------------------------------------------------------
 type HookFn = (player: videojs.Player, hljs: Hlsjs) => void
 const registerSourceHandler = function (vjs: typeof videojs) {
@@ -25,10 +29,13 @@ const registerSourceHandler = function (vjs: typeof videojs) {
  const html5 = vjs.getTech('Html5')
  if (!html5) {
-    logger.error('No Hml5 tech found in videojs')
+    logger.error('No "Html5" tech found in videojs')
    return
  }
+  // Already registered
+  if ((html5 as any).canPlaySource({ type: 'application/x-mpegURL' })) return
  // FIXME: typings
  (html5 as any).registerSourceHandler({
    canHandleSource: function (source: videojs.Tech.SourceObject) {
@@ -56,32 +63,55 @@ const registerSourceHandler = function (vjs: typeof videojs) {
  (vjs as any).Html5Hlsjs = Html5Hlsjs
 }
-function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
+// ---------------------------------------------------------------------------
-  const player = this
+// HLS options plugin
+// ---------------------------------------------------------------------------
-  if (!options) return
+const Plugin = videojs.getPlugin('plugin')
-  if (!player.srOptions_) {
+class HLSJSConfigHandler extends Plugin {
-    player.srOptions_ = {}
-  }
+  constructor (player: videojs.Player, options: HlsjsConfigHandlerOptions) {
+    super(player, options)
+    if (!options) return
+    if (!player.srOptions_) {
+      player.srOptions_ = {}
+    }
+    if (!player.srOptions_.hlsjsConfig) {
+      player.srOptions_.hlsjsConfig = options.hlsjsConfig
+    }
-  if (!player.srOptions_.hlsjsConfig) {
+    if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
-    player.srOptions_.hlsjsConfig = options.hlsjsConfig
+      player.srOptions_.levelLabelHandler = options.levelLabelHandler
+    }
+    registerSourceHandler(videojs)
  }
-  if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
+  dispose () {
-    player.srOptions_.levelLabelHandler = options.levelLabelHandler
+    this.player.srOptions_ = undefined
+    const tech = this.player.tech(true) as any
+    if (tech.hlsProvider) {
+      tech.hlsProvider.dispose()
+      tech.hlsProvider = undefined
+    }
+    super.dispose()
  }
 }
-const registerConfigPlugin = function (vjs: typeof videojs) {
+videojs.registerPlugin('hlsjs', HLSJSConfigHandler)
-  // Used in Brightcove since we don't pass options directly there
-  const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
+// ---------------------------------------------------------------------------
-  registerVjsPlugin('hlsjs', hlsjsConfigHandler)
+// HLS JS source handler
-}
+// ---------------------------------------------------------------------------
-class Html5Hlsjs {
+export class Html5Hlsjs {
-  private static readonly hooks: { [id: string]: HookFn[] } = {}
+  private static hooks: { [id: string]: HookFn[] } = {}
  private readonly videoElement: HTMLVideoElement
  private readonly errorCounts: ErrorCounts = {}
@@ -101,8 +131,9 @@ class Html5Hlsjs {
  private dvrDuration: number = null
  private edgeMargin: number = null
-  private handlers: { [ id in 'play' ]: EventListener } = {
+  private handlers: { [ id in 'play' | 'error' ]: EventListener } = {
-    play: null
+    play: null,
+    error: null
  }
  constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
@@ -115,7 +146,7 @@ class Html5Hlsjs {
    this.videoElement = tech.el() as HTMLVideoElement
    this.player = vjs((tech.options_ as any).playerId)
-    this.videoElement.addEventListener('error', event => {
+    this.handlers.error = event => {
      let errorTxt: string
      const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
@@ -143,7 +174,8 @@ class Html5Hlsjs {
      }
      logger.error(`MEDIA_ERROR: ${errorTxt}`)
-    })
+    }
+    this.videoElement.addEventListener('error', this.handlers.error)
    this.initialize()
  }
@@ -174,6 +206,7 @@ class Html5Hlsjs {
  // See comment for `initialize` method.
  dispose () {
    this.videoElement.removeEventListener('play', this.handlers.play)
+    this.videoElement.removeEventListener('error', this.handlers.error)
    // FIXME: https://github.com/video-dev/hls.js/issues/4092
    const untypedHLS = this.hls as any
@@ -200,6 +233,10 @@ class Html5Hlsjs {
    return true
  }
+  static removeAllHooks () {
+    Html5Hlsjs.hooks = {}
+  }
  private _executeHooksFor (type: string) {
    if (Html5Hlsjs.hooks[type] === undefined) {
      return
@@ -421,7 +458,7 @@ class Html5Hlsjs {
        ? data.level
        : -1
-      this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true })
+      this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, fireCallback: false })
    })
    this.hls.attachMedia(this.videoElement)
@@ -433,9 +470,3 @@ class Html5Hlsjs {
    this._initHlsjs()
  }
 }
-export {
-  Html5Hlsjs,
-  registerSourceHandler,
-  registerConfigPlugin
-}
diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
index e6f525fea..fe967a730 100644
--- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -3,19 +3,12 @@ import videojs from 'video.js'
 import { Events, Segment } from '@peertube/p2p-media-loader-core'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
 import { logger } from '@root-helpers/logger'
-import { addQueryParams, timeToInt } from '@shared/core-utils'
+import { addQueryParams } from '@shared/core-utils'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types'
-import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
+import { SettingsButton } from '../settings/settings-menu-button'
-registerConfigPlugin(videojs)
-registerSourceHandler(videojs)
 const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
-  private readonly CONSTANTS = {
-    INFO_SCHEDULER: 1000 // Don't change this
-  }
  private readonly options: P2PMediaLoaderPluginOptions
  private hlsjs: Hlsjs
@@ -31,7 +24,6 @@ class P2pMediaLoaderPlugin extends Plugin {
    pendingDownload: [] as number[],
    totalDownload: 0
  }
-  private startTime: number
  private networkInfoInterval: any
@@ -39,7 +31,6 @@ class P2pMediaLoaderPlugin extends Plugin {
    super(player)
    this.options = options
-    this.startTime = timeToInt(options.startTime)
    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
    if (!(videojs as any).Html5Hlsjs) {
@@ -77,17 +68,22 @@ class P2pMediaLoaderPlugin extends Plugin {
    })
    player.ready(() => {
-      this.initializeCore()
      this.initializePlugin()
    })
  }
  dispose () {
-    if (this.hlsjs) this.hlsjs.destroy()
+    this.p2pEngine?.removeAllListeners()
-    if (this.p2pEngine) this.p2pEngine.destroy()
+    this.p2pEngine?.destroy()
+    this.hlsjs?.destroy()
+    this.options.segmentValidator?.destroy();
+    (videojs as any).Html5Hlsjs?.removeAllHooks()
    clearInterval(this.networkInfoInterval)
+    super.dispose()
  }
  getCurrentLevel () {
@@ -104,18 +100,6 @@ class P2pMediaLoaderPlugin extends Plugin {
    return this.hlsjs
  }
-  private initializeCore () {
-    this.player.one('play', () => {
-      this.player.addClass('vjs-has-big-play-button-clicked')
-    })
-    this.player.one('canplay', () => {
-      if (this.startTime) {
-        this.player.currentTime(this.startTime)
-      }
-    })
-  }
  private initializePlugin () {
    initHlsJsPlayer(this.hlsjs)
@@ -133,7 +117,7 @@ class P2pMediaLoaderPlugin extends Plugin {
    this.runStats()
-    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engineResolutionChange'))
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
  }
  private runStats () {
@@ -167,7 +151,7 @@ class P2pMediaLoaderPlugin extends Plugin {
      this.statsP2PBytes.pendingUpload = []
      this.statsHTTPBytes.pendingDownload = []
-      return this.player.trigger('p2pInfo', {
+      return this.player.trigger('p2p-info', {
        source: 'p2p-media-loader',
        http: {
          downloadSpeed: httpDownloadSpeed,
@@ -182,7 +166,7 @@ class P2pMediaLoaderPlugin extends Plugin {
        },
        bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8
      } as PlayerNetworkInfo)
-    }, this.CONSTANTS.INFO_SCHEDULER)
+    }, 1000)
  }
  private arraySum (data: number[]) {
@@ -190,10 +174,7 @@ class P2pMediaLoaderPlugin extends Plugin {
  }
  private fallbackToBuiltInIOS () {
-    logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.');
+    logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.')
-    // Workaround to force video.js to not re create a video element
-    (this.player as any).playerElIngest_ = this.player.el().parentNode
    this.player.src({
      type: this.options.type,
@@ -203,9 +184,14 @@ class P2pMediaLoaderPlugin extends Plugin {
      })
    })
-    this.player.ready(() => {
+    // Resolution button is not supported in built-in HLS player
-      this.initializeCore()
+    this.getResolutionButton().hide()
-    })
+  }
+  private getResolutionButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+    return settingsButton.menu.getChild('resolutionMenuButton')
  }
 }
diff --git a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
index 44a31bfb4..a2f7e676d 100644
--- a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
@@ -9,21 +9,29 @@ type SegmentsJSON = { [filename: string]: string | { [byterange: string]: string
 const maxRetries = 10
-function segmentValidatorFactory (options: {
+export class SegmentValidator {
-  serverUrl: string
-  segmentsSha256Url: string
+  private readonly bytesRangeRegex = /bytes=(\d+)-(\d+)/
-  authorizationHeader: () => string
-  requiresAuth: boolean
+  private destroyed = false
-}) {
-  const { serverUrl, segmentsSha256Url, authorizationHeader, requiresAuth } = options
+  constructor (private readonly options: {
+    serverUrl: string
-  let segmentsJSON = fetchSha256Segments({ serverUrl, segmentsSha256Url, authorizationHeader, requiresAuth })
+    segmentsSha256Url: string
-  const regex = /bytes=(\d+)-(\d+)/
+    authorizationHeader: () => string
+    requiresUserAuth: boolean
-  return async function segmentValidator (segment: Segment, _method: string, _peerId: string, retry = 1) {
+    requiresPassword: boolean
+    videoPassword: () => string
+  }) {
+  }
+  async validate (segment: Segment, _method: string, _peerId: string, retry = 1) {
+    if (this.destroyed) return
    const filename = basename(removeQueryParams(segment.url))
-    const segmentValue = (await segmentsJSON)[filename]
+    const segmentValue = (await this.fetchSha256Segments())[filename]
    if (!segmentValue && retry > maxRetries) {
      throw new Error(`Unknown segment name ${filename} in segment validator`)
@@ -34,8 +42,7 @@ function segmentValidatorFactory (options: {
      await wait(500)
-      segmentsJSON = fetchSha256Segments({ serverUrl, segmentsSha256Url, authorizationHeader, requiresAuth })
+      await this.validate(segment, _method, _peerId, retry + 1)
-      await segmentValidator(segment, _method, _peerId, retry + 1)
      return
    }
@@ -46,7 +53,7 @@ function segmentValidatorFactory (options: {
    if (typeof segmentValue === 'string') {
      hashShouldBe = segmentValue
    } else {
-      const captured = regex.exec(segment.range)
+      const captured = this.bytesRangeRegex.exec(segment.range)
      range = captured[1] + '-' + captured[2]
      hashShouldBe = segmentValue[range]
@@ -56,7 +63,7 @@ function segmentValidatorFactory (options: {
      throw new Error(`Unknown segment name ${filename}/${range} in segment validator`)
    }
-    const calculatedSha = await sha256Hex(segment.data)
+    const calculatedSha = await this.sha256Hex(segment.data)
    if (calculatedSha !== hashShouldBe) {
      throw new Error(
        `Hashes does not correspond for segment ${filename}/${range}` +
@@ -64,61 +71,53 @@ function segmentValidatorFactory (options: {
      )
    }
  }
-}
-// ---------------------------------------------------------------------------
+  destroy () {
+    this.destroyed = true
+  }
-export {
+  private fetchSha256Segments (): Promise<SegmentsJSON> {
-  segmentValidatorFactory
+    let headers: { [ id: string ]: string } = {}
-}
-// ---------------------------------------------------------------------------
+    if (isSameOrigin(this.options.serverUrl, this.options.segmentsSha256Url)) {
+      if (this.options.requiresPassword) headers = { 'x-peertube-video-password': this.options.videoPassword() }
-function fetchSha256Segments (options: {
+      else if (this.options.requiresUserAuth) headers = { Authorization: this.options.authorizationHeader() }
-  serverUrl: string
+    }
-  segmentsSha256Url: string
-  authorizationHeader: () => string
-  requiresAuth: boolean
-}): Promise<SegmentsJSON> {
-  const { serverUrl, segmentsSha256Url, requiresAuth, authorizationHeader } = options
-  const headers = requiresAuth && isSameOrigin(serverUrl, segmentsSha256Url)
-    ? { Authorization: authorizationHeader() }
-    : {}
-  return fetch(segmentsSha256Url, { headers })
-    .then(res => res.json() as Promise<SegmentsJSON>)
-    .catch(err => {
-      logger.error('Cannot get sha256 segments', err)
-      return {}
-    })
-}
-async function sha256Hex (data?: ArrayBuffer) {
-  if (!data) return undefined
-  if (window.crypto.subtle) {
+    return fetch(this.options.segmentsSha256Url, { headers })
-    return window.crypto.subtle.digest('SHA-256', data)
+      .then(res => res.json() as Promise<SegmentsJSON>)
-      .then(data => bufferToHex(data))
+      .catch(err => {
+        logger.error('Cannot get sha256 segments', err)
+        return {}
+      })
  }
-  // Fallback for non HTTPS context
+  private async sha256Hex (data?: ArrayBuffer) {
-  const shaModule = (await import('sha.js') as any).default
+    if (!data) return undefined
-  // eslint-disable-next-line new-cap
-  return new shaModule.sha256().update(Buffer.from(data)).digest('hex')
+    if (window.crypto.subtle) {
-}
+      return window.crypto.subtle.digest('SHA-256', data)
+        .then(data => this.bufferToHex(data))
+    }
-// Thanks: https://stackoverflow.com/a/53307879
+    // Fallback for non HTTPS context
-function bufferToHex (buffer?: ArrayBuffer) {
+    const shaModule = (await import('sha.js') as any).default
-  if (!buffer) return ''
+    // eslint-disable-next-line new-cap
+    return new shaModule.sha256().update(Buffer.from(data)).digest('hex')
+  }
-  let s = ''
+  // Thanks: https://stackoverflow.com/a/53307879
-  const h = '0123456789abcdef'
+  private bufferToHex (buffer?: ArrayBuffer) {
-  const o = new Uint8Array(buffer)
+    if (!buffer) return ''
-  o.forEach((v: any) => {
+    let s = ''
-    s += h[v >> 4] + h[v & 15]
+    const h = '0123456789abcdef'
-  })
+    const o = new Uint8Array(buffer)
-  return s
+    o.forEach((v: any) => {
+      s += h[v >> 4] + h[v & 15]
+    })
+    return s
+  }
 }
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index af2147749..f52ec75f4 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -1,7 +1,7 @@
 import debug from 'debug'
 import videojs from 'video.js'
 import { logger } from '@root-helpers/logger'
-import { isMobile } from '@root-helpers/web-browser'
+import { isIOS, isMobile } from '@root-helpers/web-browser'
 import { timeToInt } from '@shared/core-utils'
 import { VideoView, VideoViewEvent } from '@shared/models/videos'
 import {
@@ -13,7 +13,7 @@ import {
  saveVideoWatchHistory,
  saveVolumeInStore
 } from '../../peertube-player-local-storage'
-import { PeerTubePluginOptions, VideoJSCaption } from '../../types'
+import { PeerTubePluginOptions } from '../../types'
 import { SettingsButton } from '../settings/settings-menu-button'
 const debugLogger = debug('peertube:player:peertube')
@@ -21,43 +21,59 @@ const debugLogger = debug('peertube:player:peertube')
 const Plugin = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
-  private readonly videoViewUrl: string
+  private readonly videoViewUrl: () => string
  private readonly authorizationHeader: () => string
+  private readonly initialInactivityTimeout: number
-  private readonly videoUUID: string
+  private readonly hasAutoplay: () => videojs.Autoplay
-  private readonly startTime: number
-  private readonly videoViewIntervalMs: number
-  private videoCaptions: VideoJSCaption[]
+  private currentSubtitle: string
-  private defaultSubtitle: string
+  private currentPlaybackRate: number
  private videoViewInterval: any
  private menuOpened = false
  private mouseInControlBar = false
  private mouseInSettings = false
-  private readonly initialInactivityTimeout: number
-  constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
+  private videoViewOnPlayHandler: (...args: any[]) => void
+  private videoViewOnSeekedHandler: (...args: any[]) => void
+  private videoViewOnEndedHandler: (...args: any[]) => void
+  private stopTimeHandler: (...args: any[]) => void
+  constructor (player: videojs.Player, private readonly options: PeerTubePluginOptions) {
    super(player)
    this.videoViewUrl = options.videoViewUrl
    this.authorizationHeader = options.authorizationHeader
-    this.videoUUID = options.videoUUID
+    this.hasAutoplay = options.hasAutoplay
-    this.startTime = timeToInt(options.startTime)
-    this.videoViewIntervalMs = options.videoViewIntervalMs
-    this.videoCaptions = options.videoCaptions
    this.initialInactivityTimeout = this.player.options_.inactivityTimeout
-    if (options.autoplay !== false) this.player.addClass('vjs-has-autoplay')
+    this.currentSubtitle = this.options.subtitle() || getStoredLastSubtitle()
+    this.initializePlayer()
+    this.initOnVideoChange()
+    this.deleteLegacyIndexedDB()
    this.player.on('autoplay-failure', () => {
+      debugLogger('Autoplay failed')
      this.player.removeClass('vjs-has-autoplay')
+      // Fix a bug on iOS where the big play button is not displayed when autoplay fails
+      if (isIOS()) this.player.hasStarted(false)
    })
-    this.player.ready(() => {
+    this.player.on('ratechange', () => {
+      this.currentPlaybackRate = this.player.playbackRate()
+      this.player.defaultPlaybackRate(this.currentPlaybackRate)
+    })
+    this.player.one('canplay', () => {
      const playerOptions = this.player.options_
      const volume = getStoredVolume()
@@ -65,28 +81,15 @@ class PeerTubePlugin extends Plugin {
      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
      if (muted !== undefined) this.player.muted(muted)
+    })
-      this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
+    this.player.ready(() => {
      this.player.on('volumechange', () => {
        saveVolumeInStore(this.player.volume())
        saveMuteInStore(this.player.muted())
      })
-      if (options.stopTime) {
-        const stopTime = timeToInt(options.stopTime)
-        const self = this
-        this.player.on('timeupdate', function onTimeUpdate () {
-          if (self.player.currentTime() > stopTime) {
-            self.player.pause()
-            self.player.trigger('stopped')
-            self.player.off('timeupdate', onTimeUpdate)
-          }
-        })
-      }
      this.player.textTracks().addEventListener('change', () => {
        const showing = this.player.textTracks().tracks_.find(t => {
          return t.kind === 'captions' && t.mode === 'showing'
@@ -94,23 +97,24 @@ class PeerTubePlugin extends Plugin {
        if (!showing) {
          saveLastSubtitle('off')
+          this.currentSubtitle = undefined
          return
        }
+        this.currentSubtitle = showing.language
        saveLastSubtitle(showing.language)
      })
-      this.player.on('sourcechange', () => this.initCaptions())
+      this.player.on('video-change', () => {
+        this.initOnVideoChange()
-      this.player.duration(options.videoDuration)
+      })
-      this.initializePlayer()
-      this.runUserViewing()
    })
  }
  dispose () {
    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    super.dispose()
  }
  onMenuOpened () {
@@ -162,40 +166,70 @@ class PeerTubePlugin extends Plugin {
    this.initSmoothProgressBar()
-    this.initCaptions()
+    this.player.ready(() => {
+      this.listenControlBarMouse()
-    this.listenControlBarMouse()
+    })
    this.listenFullScreenChange()
  }
+  private initOnVideoChange () {
+    if (this.hasAutoplay() !== false) this.player.addClass('vjs-has-autoplay')
+    else this.player.removeClass('vjs-has-autoplay')
+    if (this.currentPlaybackRate && this.currentPlaybackRate !== 1) {
+      debugLogger('Setting playback rate to ' + this.currentPlaybackRate)
+      this.player.playbackRate(this.currentPlaybackRate)
+    }
+    this.player.ready(() => {
+      this.initCaptions()
+      this.updateControlBar()
+    })
+    this.handleStartStopTime()
+    this.runUserViewing()
+  }
  // ---------------------------------------------------------------------------
  private runUserViewing () {
-    let lastCurrentTime = this.startTime
+    const startTime = timeToInt(this.options.startTime())
+    let lastCurrentTime = startTime
    let lastViewEvent: VideoViewEvent
-    this.player.one('play', () => {
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
-      this.notifyUserIsWatching(this.startTime, lastViewEvent)
+    if (this.videoViewOnPlayHandler) this.player.off('play', this.videoViewOnPlayHandler)
-    })
+    if (this.videoViewOnSeekedHandler) this.player.off('seeked', this.videoViewOnSeekedHandler)
+    if (this.videoViewOnEndedHandler) this.player.off('ended', this.videoViewOnEndedHandler)
-    this.player.on('seeked', () => {
+    this.videoViewOnPlayHandler = () => {
+      this.notifyUserIsWatching(startTime, lastViewEvent)
+    }
+    this.videoViewOnSeekedHandler = () => {
      const diff = Math.floor(this.player.currentTime()) - lastCurrentTime
      // Don't take into account small forwards
      if (diff > 0 && diff < 3) return
      lastViewEvent = 'seek'
-    })
+    }
-    this.player.one('ended', () => {
+    this.videoViewOnEndedHandler = () => {
      const currentTime = Math.floor(this.player.duration())
      lastCurrentTime = currentTime
      this.notifyUserIsWatching(currentTime, lastViewEvent)
      lastViewEvent = undefined
-    })
+    }
+    this.player.one('play', this.videoViewOnPlayHandler)
+    this.player.on('seeked', this.videoViewOnSeekedHandler)
+    this.player.one('ended', this.videoViewOnEndedHandler)
    this.videoViewInterval = setInterval(() => {
      const currentTime = Math.floor(this.player.currentTime())
@@ -209,13 +243,13 @@ class PeerTubePlugin extends Plugin {
        .catch(err => logger.error('Cannot notify user is watching.', err))
      lastViewEvent = undefined
-    }, this.videoViewIntervalMs)
+    }, this.options.videoViewIntervalMs)
  }
  private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
    // Server won't save history, so save the video position in local storage
    if (!this.authorizationHeader()) {
-      saveVideoWatchHistory(this.videoUUID, currentTime)
+      saveVideoWatchHistory(this.options.videoUUID(), currentTime)
    }
    if (!this.videoViewUrl) return Promise.resolve(true)
@@ -225,7 +259,7 @@ class PeerTubePlugin extends Plugin {
    const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
    if (this.authorizationHeader()) headers.set('Authorization', this.authorizationHeader())
-    return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
+    return fetch(this.videoViewUrl(), { method: 'POST', body: JSON.stringify(body), headers })
  }
  // ---------------------------------------------------------------------------
@@ -279,18 +313,89 @@ class PeerTubePlugin extends Plugin {
  }
  private initCaptions () {
-    for (const caption of this.videoCaptions) {
+    debugLogger('Init captions with current subtitle ' + this.currentSubtitle)
+    this.player.tech(true).clearTracks('text')
+    for (const caption of this.options.videoCaptions()) {
      this.player.addRemoteTextTrack({
        kind: 'captions',
        label: caption.label,
        language: caption.language,
        id: caption.language,
        src: caption.src,
-        default: this.defaultSubtitle === caption.language
+        default: this.currentSubtitle === caption.language
-      }, false)
+      }, true)
+    }
+    this.player.trigger('captions-changed')
+  }
+  private updateControlBar () {
+    debugLogger('Updating control bar')
+    if (this.options.isLive()) {
+      this.getPlaybackRateButton().hide()
+      this.player.controlBar.getChild('progressControl').hide()
+      this.player.controlBar.getChild('currentTimeDisplay').hide()
+      this.player.controlBar.getChild('timeDivider').hide()
+      this.player.controlBar.getChild('durationDisplay').hide()
+      this.player.controlBar.getChild('peerTubeLiveDisplay').show()
+    } else {
+      this.getPlaybackRateButton().show()
+      this.player.controlBar.getChild('progressControl').show()
+      this.player.controlBar.getChild('currentTimeDisplay').show()
+      this.player.controlBar.getChild('timeDivider').show()
+      this.player.controlBar.getChild('durationDisplay').show()
+      this.player.controlBar.getChild('peerTubeLiveDisplay').hide()
    }
-    this.player.trigger('captionsChanged')
+    if (this.options.videoCaptions().length === 0) {
+      this.getCaptionsButton().hide()
+    } else {
+      this.getCaptionsButton().show()
+    }
+  }
+  private handleStartStopTime () {
+    this.player.duration(this.options.videoDuration())
+    if (this.stopTimeHandler) {
+      this.player.off('timeupdate', this.stopTimeHandler)
+      this.stopTimeHandler = undefined
+    }
+    // Prefer canplaythrough instead of canplay because Chrome has issues with the second one
+    this.player.one('canplaythrough', () => {
+      if (this.options.startTime()) {
+        debugLogger('Start the video at ' + this.options.startTime())
+        this.player.currentTime(timeToInt(this.options.startTime()))
+      }
+      if (this.options.stopTime()) {
+        const stopTime = timeToInt(this.options.stopTime())
+        this.stopTimeHandler = () => {
+          if (this.player.currentTime() <= stopTime) return
+          debugLogger('Stopping the video at ' + this.options.stopTime())
+          // Time top stop
+          this.player.pause()
+          this.player.trigger('auto-stopped')
+          this.player.off('timeupdate', this.stopTimeHandler)
+          this.stopTimeHandler = undefined
+        }
+        this.player.on('timeupdate', this.stopTimeHandler)
+      }
+    })
  }
  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
@@ -314,6 +419,37 @@ class PeerTubePlugin extends Plugin {
      this.update()
    }
  }
+  private getCaptionsButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+    return settingsButton.menu.getChild('captionsButton') as videojs.CaptionsButton
+  }
+  private getPlaybackRateButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+    return settingsButton.menu.getChild('playbackRateMenuButton')
+  }
+  // We don't use webtorrent anymore, so we can safely remove old chunks from IndexedDB
+  private deleteLegacyIndexedDB () {
+    try {
+      if (typeof window.indexedDB === 'undefined') return
+      if (!window.indexedDB) return
+      if (typeof window.indexedDB.databases !== 'function') return
+      window.indexedDB.databases()
+        .then(databases => {
+          for (const db of databases) {
+            window.indexedDB.deleteDatabase(db.name)
+          }
+        })
+    } catch (err) {
+      debugLogger('Cannot delete legacy indexed DB', err)
+      // Nothing to do
+    }
+  }
 }
 videojs.registerPlugin('peertube', PeerTubePlugin)
diff --git a/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts b/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts
new file mode 100644
index 000000000..b467e3637
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts
@@ -0,0 +1,136 @@
+import {
+  NextPreviousVideoButtonOptions,
+  PeerTubeLinkButtonOptions,
+  PeerTubePlayerContructorOptions,
+  PeerTubePlayerLoadOptions,
+  TheaterButtonOptions
+} from '../../types'
+type ControlBarOptionsBuilderConstructorOptions =
+  Pick<PeerTubePlayerContructorOptions, 'peertubeLink' | 'instanceName' | 'theaterButton'> &
+  {
+    videoShortUUID: () => string
+    p2pEnabled: () => boolean
+    previousVideo: () => PeerTubePlayerLoadOptions['previousVideo']
+    nextVideo: () => PeerTubePlayerLoadOptions['nextVideo']
+  }
+export class ControlBarOptionsBuilder {
+  constructor (private options: ControlBarOptionsBuilderConstructorOptions) {
+  }
+  getChildrenOptions () {
+    const children = {
+      ...this.getPreviousVideo(),
+      playToggle: {},
+      ...this.getNextVideo(),
+      ...this.getTimeControls(),
+      ...this.getProgressControl(),
+      p2PInfoButton: {},
+      muteToggle: {},
+      volumeControl: {},
+      ...this.getSettingsButton(),
+      ...this.getPeerTubeLinkButton(),
+      ...this.getTheaterButton(),
+      fullscreenToggle: {}
+    }
+    return children
+  }
+  private getSettingsButton () {
+    const settingEntries: string[] = []
+    settingEntries.push('playbackRateMenuButton')
+    settingEntries.push('captionsButton')
+    settingEntries.push('resolutionMenuButton')
+    return {
+      settingsButton: {
+        setup: {
+          maxHeightOffset: 40
+        },
+        entries: settingEntries
+      }
+    }
+  }
+  private getTimeControls () {
+    return {
+      peerTubeLiveDisplay: {},
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {}
+    }
+  }
+  private getProgressControl () {
+    return {
+      progressControl: {
+        children: {
+          seekBar: {
+            children: {
+              loadProgressBar: {},
+              mouseTimeDisplay: {},
+              playProgressBar: {}
+            }
+          }
+        }
+      }
+    }
+  }
+  private getPreviousVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'previous',
+      handler: () => this.options.previousVideo().handler(),
+      isDisabled: () => !this.options.previousVideo().enabled,
+      isDisplayed: () => this.options.previousVideo().displayControlBarButton
+    }
+    return { previousVideoButton: buttonOptions }
+  }
+  private getNextVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'next',
+      handler: () => this.options.nextVideo().handler(),
+      isDisabled: () => !this.options.nextVideo().enabled,
+      isDisplayed: () => this.options.nextVideo().displayControlBarButton
+    }
+    return { nextVideoButton: buttonOptions }
+  }
+  private getPeerTubeLinkButton () {
+    const options: PeerTubeLinkButtonOptions = {
+      isDisplayed: this.options.peertubeLink,
+      shortUUID: this.options.videoShortUUID,
+      instanceName: this.options.instanceName
+    }
+    return { peerTubeLinkButton: options }
+  }
+  private getTheaterButton () {
+    const options: TheaterButtonOptions = {
+      isDisplayed: () => this.options.theaterButton
+    }
+    return {
+      theaterButton: options
+    }
+  }
+}
diff --git a/client/src/assets/player/shared/manager-options/hls-options-builder.ts b/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts
index 194991fa4..10df2db5d 100644
--- a/client/src/assets/player/shared/manager-options/hls-options-builder.ts
+++ b/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts
@@ -3,49 +3,61 @@ import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
 import { logger } from '@root-helpers/logger'
 import { LiveVideoLatencyMode } from '@shared/models'
 import { getAverageBandwidthInStore } from '../../peertube-player-local-storage'
-import { P2PMediaLoader, P2PMediaLoaderPluginOptions } from '../../types'
+import { P2PMediaLoader, P2PMediaLoaderPluginOptions, PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions } from '../../types'
-import { PeertubePlayerManagerOptions } from '../../types/manager-options'
 import { getRtcConfig, isSameOrigin } from '../common'
 import { RedundancyUrlManager } from '../p2p-media-loader/redundancy-url-manager'
 import { segmentUrlBuilderFactory } from '../p2p-media-loader/segment-url-builder'
-import { segmentValidatorFactory } from '../p2p-media-loader/segment-validator'
+import { SegmentValidator } from '../p2p-media-loader/segment-validator'
+type ConstructorOptions =
+  Pick<PeerTubePlayerContructorOptions, 'pluginsManager' | 'serverUrl' | 'authorizationHeader'> &
+  Pick<PeerTubePlayerLoadOptions, 'videoPassword' | 'requiresUserAuth' | 'videoFileToken' | 'requiresPassword' |
+  'isLive' | 'liveOptions' | 'p2pEnabled' | 'hls'>
 export class HLSOptionsBuilder {
  constructor (
-    private options: PeertubePlayerManagerOptions,
+    private options: ConstructorOptions,
    private p2pMediaLoaderModule?: any
  ) {
  }
  async getPluginOptions () {
-    const commonOptions = this.options.common
+    const redundancyUrlManager = new RedundancyUrlManager(this.options.hls.redundancyBaseUrls)
+    const segmentValidator = new SegmentValidator({
-    const redundancyUrlManager = new RedundancyUrlManager(this.options.p2pMediaLoader.redundancyBaseUrls)
+      segmentsSha256Url: this.options.hls.segmentsSha256Url,
+      authorizationHeader: this.options.authorizationHeader,
+      requiresUserAuth: this.options.requiresUserAuth,
+      serverUrl: this.options.serverUrl,
+      requiresPassword: this.options.requiresPassword,
+      videoPassword: this.options.videoPassword
+    })
    const p2pMediaLoaderConfig = await this.options.pluginsManager.runHook(
      'filter:internal.player.p2p-media-loader.options.result',
-      this.getP2PMediaLoaderOptions(redundancyUrlManager)
+      this.getP2PMediaLoaderOptions({ redundancyUrlManager, segmentValidator })
    )
    const loader = new this.p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() as P2PMediaLoader
    const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
-      requiresAuth: commonOptions.requiresAuth,
+      requiresUserAuth: this.options.requiresUserAuth,
-      videoFileToken: commonOptions.videoFileToken,
+      videoFileToken: this.options.videoFileToken,
      redundancyUrlManager,
      type: 'application/x-mpegURL',
-      startTime: commonOptions.startTime,
+      src: this.options.hls.playlistUrl,
-      src: this.options.p2pMediaLoader.playlistUrl,
+      segmentValidator,
      loader
    }
    const hlsjs = {
+      hlsjsConfig: this.getHLSJSOptions(loader),
      levelLabelHandler: (level: { height: number, width: number }) => {
        const resolution = Math.min(level.height || 0, level.width || 0)
-        const file = this.options.p2pMediaLoader.videoFiles.find(f => f.resolution.id === resolution)
+        const file = this.options.hls.videoFiles.find(f => f.resolution.id === resolution)
        // We don't have files for live videos
        if (!file) return level.height
@@ -56,26 +68,27 @@ export class HLSOptionsBuilder {
      }
    }
-    const html5 = {
+    return { p2pMediaLoader, hlsjs }
-      hlsjsConfig: this.getHLSJSOptions(loader)
-    }
-    return { p2pMediaLoader, hlsjs, html5 }
  }
  // ---------------------------------------------------------------------------
-  private getP2PMediaLoaderOptions (redundancyUrlManager: RedundancyUrlManager): HlsJsEngineSettings {
+  private getP2PMediaLoaderOptions (options: {
+    redundancyUrlManager: RedundancyUrlManager
+    segmentValidator: SegmentValidator
+  }): HlsJsEngineSettings {
+    const { redundancyUrlManager, segmentValidator } = options
    let consumeOnly = false
    if ((navigator as any)?.connection?.type === 'cellular') {
      logger.info('We are on a cellular connection: disabling seeding.')
      consumeOnly = true
    }
-    const trackerAnnounce = this.options.p2pMediaLoader.trackerAnnounce
+    const trackerAnnounce = this.options.hls.trackerAnnounce
-                                                 .filter(t => t.startsWith('ws'))
+      .filter(t => t.startsWith('ws'))
-    const specificLiveOrVODOptions = this.options.common.isLive
+    const specificLiveOrVODOptions = this.options.isLive
      ? this.getP2PMediaLoaderLiveOptions()
      : this.getP2PMediaLoaderVODOptions()
@@ -88,28 +101,28 @@ export class HLSOptionsBuilder {
        httpFailedSegmentTimeout: 1000,
        xhrSetup: (xhr, url) => {
-          if (!this.options.common.requiresAuth) return
+          const { requiresUserAuth, requiresPassword } = this.options
-          if (!isSameOrigin(this.options.common.serverUrl, url)) return
+          if (!(requiresUserAuth || requiresPassword)) return
+          if (!isSameOrigin(this.options.serverUrl, url)) return
+          if (requiresPassword) xhr.setRequestHeader('x-peertube-video-password', this.options.videoPassword())
-          xhr.setRequestHeader('Authorization', this.options.common.authorizationHeader())
+          else xhr.setRequestHeader('Authorization', this.options.authorizationHeader())
        },
-        segmentValidator: segmentValidatorFactory({
+        segmentValidator: segmentValidator.validate.bind(segmentValidator),
-          segmentsSha256Url: this.options.p2pMediaLoader.segmentsSha256Url,
-          authorizationHeader: this.options.common.authorizationHeader,
-          requiresAuth: this.options.common.requiresAuth,
-          serverUrl: this.options.common.serverUrl
-        }),
        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
-        useP2P: this.options.common.p2pEnabled,
+        useP2P: this.options.p2pEnabled,
        consumeOnly,
        ...specificLiveOrVODOptions
      },
      segments: {
-        swarmId: this.options.p2pMediaLoader.playlistUrl,
+        swarmId: this.options.hls.playlistUrl,
        forwardSegmentCount: specificLiveOrVODOptions.p2pDownloadMaxPriority ?? 20
      }
    }
@@ -120,7 +133,7 @@ export class HLSOptionsBuilder {
      requiredSegmentsPriority: 1
    }
-    const latencyMode = this.options.common.liveOptions.latencyMode
+    const latencyMode = this.options.liveOptions.latencyMode
    switch (latencyMode) {
      case LiveVideoLatencyMode.SMALL_LATENCY:
@@ -158,7 +171,7 @@ export class HLSOptionsBuilder {
  // ---------------------------------------------------------------------------
  private getHLSJSOptions (loader: P2PMediaLoader) {
-    const specificLiveOrVODOptions = this.options.common.isLive
+    const specificLiveOrVODOptions = this.options.isLive
      ? this.getHLSLiveOptions()
      : this.getHLSVODOptions()
@@ -186,7 +199,7 @@ export class HLSOptionsBuilder {
  }
  private getHLSLiveOptions () {
-    const latencyMode = this.options.common.liveOptions.latencyMode
+    const latencyMode = this.options.liveOptions.latencyMode
    switch (latencyMode) {
      case LiveVideoLatencyMode.SMALL_LATENCY:
diff --git a/client/src/assets/player/shared/player-options-builder/index.ts b/client/src/assets/player/shared/player-options-builder/index.ts
new file mode 100644
index 000000000..674754a94
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/index.ts
@@ -0,0 +1,3 @@
+export * from './control-bar-options-builder'
+export * from './hls-options-builder'
+export * from './web-video-options-builder'
diff --git a/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
new file mode 100644
index 000000000..a3c3c3f27
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
@@ -0,0 +1,22 @@
+import { PeerTubePlayerLoadOptions, WebVideoPluginOptions } from '../../types'
+type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls' | 'startTime'>
+export class WebVideoOptionsBuilder {
+  constructor (private options: ConstructorOptions) {
+  }
+  getPluginOptions (): WebVideoPluginOptions {
+    return {
+      videoFileToken: this.options.videoFileToken,
+      videoFiles: this.options.webVideo.videoFiles.length !== 0
+        ? this.options.webVideo.videoFiles
+        : this.options?.hls.videoFiles || [],
+      startTime: this.options.startTime
+    }
+  }
+}
diff --git a/client/src/assets/player/shared/playlist/playlist-button.ts b/client/src/assets/player/shared/playlist/playlist-button.ts
index 6cfaf4158..45cbb4899 100644
--- a/client/src/assets/player/shared/playlist/playlist-button.ts
+++ b/client/src/assets/player/shared/playlist/playlist-button.ts
@@ -8,8 +8,15 @@ class PlaylistButton extends ClickableComponent {
  private playlistInfoElement: HTMLElement
  private wrapper: HTMLElement
-  constructor (player: videojs.Player, options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu }) {
+  options_: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
-    super(player, options as any)
+  // FIXME: eslint -> it's not a useless constructor, we need to extend constructor options typings
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor (
+    player: videojs.Player,
+    options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
+  ) {
+    super(player, options)
  }
  createEl () {
@@ -40,20 +47,15 @@ class PlaylistButton extends ClickableComponent {
  }
  update () {
-    const options = this.options_ as PlaylistPluginOptions
+    this.playlistInfoElement.innerHTML = this.options_.getCurrentPosition() + '/' + this.options_.playlist.videosLength
-    this.playlistInfoElement.innerHTML = options.getCurrentPosition() + '/' + options.playlist.videosLength
+    this.wrapper.title = this.player().localize('Playlist: {1}', [ this.options_.playlist.displayName ])
-    this.wrapper.title = this.player().localize('Playlist: {1}', [ options.playlist.displayName ])
  }
  handleClick () {
-    const playlistMenu = this.getPlaylistMenu()
+    const playlistMenu = this.options_.playlistMenu
    playlistMenu.open()
  }
-  private getPlaylistMenu () {
-    return (this.options_ as any).playlistMenu as PlaylistMenu
-  }
 }
 videojs.registerComponent('PlaylistButton', PlaylistButton)
diff --git a/client/src/assets/player/shared/playlist/playlist-menu-item.ts b/client/src/assets/player/shared/playlist/playlist-menu-item.ts
index 81b5acf30..f9366332d 100644
--- a/client/src/assets/player/shared/playlist/playlist-menu-item.ts
+++ b/client/src/assets/player/shared/playlist/playlist-menu-item.ts
@@ -8,6 +8,11 @@ const Component = videojs.getComponent('Component')
 class PlaylistMenuItem extends Component {
  private element: VideoPlaylistElement
+  private clickHandler: () => void
+  private keyDownHandler: (event: KeyboardEvent) => void
+  options_: videojs.ComponentOptions & PlaylistItemOptions
  constructor (player: videojs.Player, options?: PlaylistItemOptions) {
    super(player, options as any)
@@ -15,19 +20,27 @@ class PlaylistMenuItem extends Component {
    this.element = options.element
-    this.on([ 'click', 'tap' ], () => this.switchPlaylistItem())
+    this.clickHandler = () => this.switchPlaylistItem()
-    this.on('keydown', event => this.handleKeyDown(event))
+    this.keyDownHandler = event => this.handleKeyDown(event)
+    this.on([ 'click', 'tap' ], this.clickHandler)
+    this.on('keydown', this.keyDownHandler)
  }
-  createEl () {
+  dispose () {
-    const options = this.options_ as PlaylistItemOptions
+    this.off([ 'click', 'tap' ], this.clickHandler)
+    this.off('keydown', this.keyDownHandler)
+    super.dispose()
+  }
+  createEl () {
    const li = super.createEl('li', {
      className: 'vjs-playlist-menu-item',
      innerHTML: ''
    }) as HTMLElement
-    if (!options.element.video) {
+    if (!this.options_.element.video) {
      li.classList.add('vjs-disabled')
    }
@@ -37,14 +50,14 @@ class PlaylistMenuItem extends Component {
    const position = super.createEl('div', {
      className: 'item-position',
-      innerHTML: options.element.position
+      innerHTML: this.options_.element.position
    })
    positionBlock.appendChild(position)
    li.appendChild(positionBlock)
-    if (options.element.video) {
+    if (this.options_.element.video) {
-      this.buildAvailableVideo(li, positionBlock, options)
+      this.buildAvailableVideo(li, positionBlock, this.options_)
    } else {
      this.buildUnavailableVideo(li)
    }
@@ -125,9 +138,7 @@ class PlaylistMenuItem extends Component {
  }
  private switchPlaylistItem () {
-    const options = this.options_ as PlaylistItemOptions
+    this.options_.onClicked()
-    options.onClicked()
  }
 }
diff --git a/client/src/assets/player/shared/playlist/playlist-menu.ts b/client/src/assets/player/shared/playlist/playlist-menu.ts
index 1ec9ac804..53a5a7274 100644
--- a/client/src/assets/player/shared/playlist/playlist-menu.ts
+++ b/client/src/assets/player/shared/playlist/playlist-menu.ts
@@ -6,26 +6,32 @@ import { PlaylistMenuItem } from './playlist-menu-item'
 const Component = videojs.getComponent('Component')
 class PlaylistMenu extends Component {
-  private menuItems: PlaylistMenuItem[]
+  private menuItems: PlaylistMenuItem[] = []
-  constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
+  private readonly userInactiveHandler: () => void
-    super(player, options as any)
+  private readonly onMouseEnter: () => void
+  private readonly onMouseLeave: () => void
-    const self = this
+  private readonly onPlayerCick: (event: Event) => void
-    function userInactiveHandler () {
+  options_: PlaylistPluginOptions & videojs.ComponentOptions
-      self.close()
+  constructor (player: videojs.Player, options?: PlaylistPluginOptions & videojs.ComponentOptions) {
+    super(player, options)
+    this.userInactiveHandler = () => {
+      this.close()
    }
-    this.el().addEventListener('mouseenter', () => {
+    this.onMouseEnter = () => {
-      this.player().off('userinactive', userInactiveHandler)
+      this.player().off('userinactive', this.userInactiveHandler)
-    })
+    }
-    this.el().addEventListener('mouseleave', () => {
+    this.onMouseLeave = () => {
-      this.player().one('userinactive', userInactiveHandler)
+      this.player().one('userinactive', this.userInactiveHandler)
-    })
+    }
-    this.player().on('click', event => {
+    this.onPlayerCick = event => {
      let current = event.target as HTMLElement
      do {
@@ -40,14 +46,31 @@ class PlaylistMenu extends Component {
      } while (current)
      this.close()
-    })
+    }
+    this.el().addEventListener('mouseenter', this.onMouseEnter)
+    this.el().addEventListener('mouseleave', this.onMouseLeave)
+    this.player().on('click', this.onPlayerCick)
+  }
+  dispose () {
+    this.el().removeEventListener('mouseenter', this.onMouseEnter)
+    this.el().removeEventListener('mouseleave', this.onMouseLeave)
+    this.player().off('userinactive', this.userInactiveHandler)
+    this.player().off('click', this.onPlayerCick)
+    for (const item of this.menuItems) {
+      item.dispose()
+    }
+    super.dispose()
  }
  createEl () {
    this.menuItems = []
-    const options = this.getOptions()
    const menu = super.createEl('div', {
      className: 'vjs-playlist-menu',
      innerHTML: '',
@@ -61,11 +84,11 @@ class PlaylistMenu extends Component {
    const headerLeft = super.createEl('div')
    const leftTitle = super.createEl('div', {
-      innerHTML: options.playlist.displayName,
+      innerHTML: this.options_.playlist.displayName,
      className: 'title'
    })
-    const playlistChannel = options.playlist.videoChannel
+    const playlistChannel = this.options_.playlist.videoChannel
    const leftSubtitle = super.createEl('div', {
      innerHTML: playlistChannel
        ? this.player().localize('By {1}', [ playlistChannel.displayName ])
@@ -86,7 +109,7 @@ class PlaylistMenu extends Component {
    const list = super.createEl('ol')
-    for (const playlistElement of options.elements) {
+    for (const playlistElement of this.options_.elements) {
      const item = new PlaylistMenuItem(this.player(), {
        element: playlistElement,
        onClicked: () => this.onItemClicked(playlistElement)
@@ -100,13 +123,13 @@ class PlaylistMenu extends Component {
    menu.appendChild(header)
    menu.appendChild(list)
+    this.update()
    return menu
  }
  update () {
-    const options = this.getOptions()
+    this.updateSelected(this.options_.getCurrentPosition())
-    this.updateSelected(options.getCurrentPosition())
  }
  open () {
@@ -123,12 +146,8 @@ class PlaylistMenu extends Component {
    }
  }
-  private getOptions () {
-    return this.options_ as PlaylistPluginOptions
-  }
  private onItemClicked (element: VideoPlaylistElement) {
-    this.getOptions().onItemClicked(element)
+    this.options_.onItemClicked(element)
  }
 }
diff --git a/client/src/assets/player/shared/playlist/playlist-plugin.ts b/client/src/assets/player/shared/playlist/playlist-plugin.ts
index 44de0da5a..c00e45843 100644
--- a/client/src/assets/player/shared/playlist/playlist-plugin.ts
+++ b/client/src/assets/player/shared/playlist/playlist-plugin.ts
@@ -8,17 +8,10 @@ const Plugin = videojs.getPlugin('plugin')
 class PlaylistPlugin extends Plugin {
  private playlistMenu: PlaylistMenu
  private playlistButton: PlaylistButton
-  private options: PlaylistPluginOptions
  constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
    super(player, options)
-    this.options = options
-    this.player.ready(() => {
-      player.addClass('vjs-playlist')
-    })
    this.playlistMenu = new PlaylistMenu(player, options)
    this.playlistButton = new PlaylistButton(player, { ...options, playlistMenu: this.playlistMenu })
@@ -26,8 +19,16 @@ class PlaylistPlugin extends Plugin {
    player.addChild(this.playlistButton, options)
  }
-  updateSelected () {
+  dispose () {
-    this.playlistMenu.updateSelected(this.options.getCurrentPosition())
+    this.player.removeClass('vjs-playlist')
+    this.playlistMenu.dispose()
+    this.playlistButton.dispose()
+    this.player.removeChild(this.playlistMenu)
+    this.player.removeChild(this.playlistButton)
+    super.dispose()
  }
 }
diff --git a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts b/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
index 4fafd27b1..4d6701003 100644
--- a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
+++ b/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
@@ -8,7 +8,16 @@ class PeerTubeResolutionsPlugin extends Plugin {
  private resolutions: PeerTubeResolution[] = []
  private autoResolutionChosenId: number
-  private autoResolutionEnabled = true
+  constructor (player: videojs.Player) {
+    super(player)
+    player.on('video-change', () => {
+      this.resolutions = []
+      this.trigger('resolutions-removed')
+    })
+  }
  add (resolutions: PeerTubeResolution[]) {
    for (const r of resolutions) {
@@ -18,12 +27,12 @@ class PeerTubeResolutionsPlugin extends Plugin {
    this.currentSelection = this.getSelected()
    this.sort()
-    this.trigger('resolutionsAdded')
+    this.trigger('resolutions-added')
  }
  remove (resolutionIndex: number) {
    this.resolutions = this.resolutions.filter(r => r.id !== resolutionIndex)
-    this.trigger('resolutionRemoved')
+    this.trigger('resolutions-removed')
  }
  getResolutions () {
@@ -40,10 +49,10 @@ class PeerTubeResolutionsPlugin extends Plugin {
  select (options: {
    id: number
-    byEngine: boolean
+    fireCallback: boolean
    autoResolutionChosenId?: number
  }) {
-    const { id, autoResolutionChosenId, byEngine } = options
+    const { id, autoResolutionChosenId, fireCallback } = options
    if (this.currentSelection?.id === id && this.autoResolutionChosenId === autoResolutionChosenId) return
@@ -55,25 +64,11 @@ class PeerTubeResolutionsPlugin extends Plugin {
      if (r.selected) {
        this.currentSelection = r
-        if (!byEngine) r.selectCallback()
+        if (fireCallback) r.selectCallback()
      }
    }
-    this.trigger('resolutionChanged')
+    this.trigger('resolutions-changed')
-  }
-  disableAutoResolution () {
-    this.autoResolutionEnabled = false
-    this.trigger('autoResolutionEnabledChanged')
-  }
-  enabledAutoResolution () {
-    this.autoResolutionEnabled = true
-    this.trigger('autoResolutionEnabledChanged')
-  }
-  isAutoResolutionEnabeld () {
-    return this.autoResolutionEnabled
  }
  private sort () {
diff --git a/client/src/assets/player/shared/settings/resolution-menu-button.ts b/client/src/assets/player/shared/settings/resolution-menu-button.ts
index 672411c11..c39894284 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-button.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-button.ts
@@ -11,12 +11,12 @@ class ResolutionMenuButton extends MenuButton {
    this.controlText('Quality')
-    player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
+    player.peertubeResolutions().on('resolutions-added', () => this.update())
-    player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities())
+    player.peertubeResolutions().on('resolutions-removed', () => this.update())
    // For parent
-    player.peertubeResolutions().on('resolutionChanged', () => {
+    player.peertubeResolutions().on('resolutions-changed', () => {
-      setTimeout(() => this.trigger('labelUpdated'))
+      setTimeout(() => this.trigger('label-updated'))
    })
  }
@@ -37,69 +37,42 @@ class ResolutionMenuButton extends MenuButton {
  }
  createMenu () {
-    return new Menu(this.player_)
+    const menu: videojs.Menu = new Menu(this.player_, { menuButton: this })
-  }
+    const resolutions = this.player().peertubeResolutions().getResolutions()
-  buildCSSClass () {
-    return super.buildCSSClass() + ' vjs-resolution-button'
-  }
-  buildWrapperCSSClass () {
-    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
-  }
-  private addClickListener (component: any) {
-    component.on('click', () => {
-      const children = this.menu.children()
-      for (const child of children) {
-        if (component !== child) {
-          (child as videojs.MenuItem).selected(false)
-        }
-      }
-    })
-  }
-  private buildQualities () {
+    for (const r of resolutions) {
-    for (const d of this.player().peertubeResolutions().getResolutions()) {
+      const label = r.label === '0p'
-      const label = d.label === '0p'
        ? this.player().localize('Audio-only')
-        : d.label
+        : r.label
-      this.menu.addChild(new ResolutionMenuItem(
+      const component = new ResolutionMenuItem(
        this.player_,
        {
-          id: d.id + '',
+          id: r.id + '',
-          resolutionId: d.id,
+          resolutionId: r.id,
          label,
-          selected: d.selected
+          selected: r.selected
-        })
+        }
      )
-    }
-    for (const m of this.menu.children()) {
+      menu.addItem(component)
-      this.addClickListener(m)
    }
-    this.trigger('menuChanged')
+    return menu
  }
-  private cleanupQualities () {
+  update () {
-    const resolutions = this.player().peertubeResolutions().getResolutions()
+    super.update()
-    this.menu.children().forEach((children: ResolutionMenuItem) => {
-      if (children.resolutionId === undefined) {
-        return
-      }
-      if (resolutions.find(r => r.id === children.resolutionId)) {
+    this.trigger('menu-changed')
-        return
+  }
-      }
-      this.menu.removeChild(children)
+  buildCSSClass () {
-    })
+    return super.buildCSSClass() + ' vjs-resolution-button'
+  }
-    this.trigger('menuChanged')
+  buildWrapperCSSClass () {
+    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
  }
 }
diff --git a/client/src/assets/player/shared/settings/resolution-menu-item.ts b/client/src/assets/player/shared/settings/resolution-menu-item.ts
index c59b8b891..86387f533 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-item.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-item.ts
@@ -10,35 +10,32 @@ class ResolutionMenuItem extends MenuItem {
  readonly resolutionId: number
  private readonly label: string
-  private autoResolutionEnabled: boolean
  private autoResolutionChosen: string
-  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
+  private updateSelectionHandler: () => void
-    options.selectable = true
-    super(player, options)
+  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
+    super(player, { ...options, selectable: true })
-    this.autoResolutionEnabled = true
    this.autoResolutionChosen = ''
    this.resolutionId = options.resolutionId
    this.label = options.label
-    player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())
+    this.updateSelectionHandler = () => this.updateSelection()
+    player.peertubeResolutions().on('resolutions-changed', this.updateSelectionHandler)
+  }
+  dispose () {
+    this.player().peertubeResolutions().off('resolutions-changed', this.updateSelectionHandler)
-    // We only want to disable the "Auto" item
+    super.dispose()
-    if (this.resolutionId === -1) {
-      player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution())
-    }
  }
  handleClick (event: any) {
-    // Auto button disabled?
-    if (this.autoResolutionEnabled === false && this.resolutionId === -1) return
    super.handleClick(event)
-    this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false })
+    this.player().peertubeResolutions().select({ id: this.resolutionId, fireCallback: true })
  }
  updateSelection () {
@@ -51,19 +48,6 @@ class ResolutionMenuItem extends MenuItem {
    this.selected(this.resolutionId === selectedResolution.id)
  }
-  updateAutoResolution () {
-    const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld()
-    // Check if the auto resolution is enabled or not
-    if (enabled === false) {
-      this.addClass('disabled')
-    } else {
-      this.removeClass('disabled')
-    }
-    this.autoResolutionEnabled = enabled
-  }
  getLabel () {
    if (this.resolutionId === -1) {
      return this.label + ' <small>' + this.autoResolutionChosen + '</small>'
diff --git a/client/src/assets/player/shared/settings/settings-dialog.ts b/client/src/assets/player/shared/settings/settings-dialog.ts
index f5fbbe7ad..ba39d0f45 100644
--- a/client/src/assets/player/shared/settings/settings-dialog.ts
+++ b/client/src/assets/player/shared/settings/settings-dialog.ts
@@ -28,6 +28,18 @@ class SettingsDialog extends Component {
      'aria-describedby': dialogDescriptionId
    })
  }
+  show () {
+    this.player().addClass('vjs-settings-dialog-opened')
+    super.show()
+  }
+  hide () {
+    this.player().removeClass('vjs-settings-dialog-opened')
+    super.hide()
+  }
 }
 Component.registerComponent('SettingsDialog', SettingsDialog)
diff --git a/client/src/assets/player/shared/settings/settings-menu-button.ts b/client/src/assets/player/shared/settings/settings-menu-button.ts
index 4cf29866b..9499a43eb 100644
--- a/client/src/assets/player/shared/settings/settings-menu-button.ts
+++ b/client/src/assets/player/shared/settings/settings-menu-button.ts
@@ -71,7 +71,7 @@ class SettingsButton extends Button {
    }
  }
-  onDisposeSettingsItem (event: any, name: string) {
+  onDisposeSettingsItem (_event: any, name: string) {
    if (name === undefined) {
      const children = this.menu.children()
@@ -103,6 +103,8 @@ class SettingsButton extends Button {
    if (this.isInIframe()) {
      window.removeEventListener('blur', this.documentClickHandler)
    }
+    super.dispose()
  }
  onAddSettingsItem (event: any, data: any) {
@@ -249,8 +251,8 @@ class SettingsButton extends Button {
  }
  resetChildren () {
-    for (const menuChild of this.menu.children()) {
+    for (const menuChild of this.menu.children() as SettingsMenuItem[]) {
-      (menuChild as SettingsMenuItem).reset()
+      menuChild.reset()
    }
  }
@@ -258,8 +260,8 @@ class SettingsButton extends Button {
   * Hide all the sub menus
   */
  hideChildren () {
-    for (const menuChild of this.menu.children()) {
+    for (const menuChild of this.menu.children() as SettingsMenuItem[]) {
-      (menuChild as SettingsMenuItem).hideSubMenu()
+      menuChild.hideSubMenu()
    }
  }
diff --git a/client/src/assets/player/shared/settings/settings-menu-item.ts b/client/src/assets/player/shared/settings/settings-menu-item.ts
index 288e3b233..9916ae27f 100644
--- a/client/src/assets/player/shared/settings/settings-menu-item.ts
+++ b/client/src/assets/player/shared/settings/settings-menu-item.ts
@@ -70,17 +70,22 @@ class SettingsMenuItem extends MenuItem {
        this.build()
        // Update on rate change
-        player.on('ratechange', this.submenuClickHandler)
+        if (subMenuName === 'PlaybackRateMenuButton') {
+          player.on('ratechange', this.submenuClickHandler)
+        }
        if (subMenuName === 'CaptionsButton') {
-          // Hack to regenerate captions on HTTP fallback
+          player.on('captions-changed', () => {
-          player.on('captionsChanged', () => {
+            // Wait menu component rebuild
            setTimeout(() => {
-              this.settingsSubMenuEl_.innerHTML = ''
+              this.rebuildAfterMenuChange()
-              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
+            }, 150)
-              this.update()
+          })
-              this.bindClickEvents()
+        }
-            }, 0)
+        if (subMenuName === 'ResolutionMenuButton') {
+          this.subMenu.on('menu-changed', () => {
+            this.rebuildAfterMenuChange()
          })
        }
@@ -89,6 +94,12 @@ class SettingsMenuItem extends MenuItem {
    })
  }
+  dispose () {
+    this.settingsSubMenuEl_.removeEventListener('transitionend', this.transitionEndHandler)
+    super.dispose()
+  }
  eventHandlers () {
    this.submenuClickHandler = this.onSubmenuClick.bind(this)
    this.transitionEndHandler = this.onTransitionEnd.bind(this)
@@ -190,27 +201,6 @@ class SettingsMenuItem extends MenuItem {
    (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
  }
-  /**
-   * Add/remove prefixed event listener for CSS Transition
-   *
-   * @method PrefixedEvent
-   */
-  PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
-    const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
-    for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[p]) {
-        type = type.toLowerCase()
-      }
-      if (action === 'addEvent') {
-        element.addEventListener(prefix[p] + type, callback, false)
-      } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[p] + type, callback, false)
-      }
-    }
-  }
  onTransitionEnd (event: any) {
    if (event.propertyName !== 'margin-right') {
      return
@@ -254,12 +244,7 @@ class SettingsMenuItem extends MenuItem {
  }
  build () {
-    this.subMenu.on('labelUpdated', () => {
+    this.subMenu.on('label-updated', () => {
-      this.update()
-    })
-    this.subMenu.on('menuChanged', () => {
-      this.bindClickEvents()
-      this.setSize()
      this.update()
    })
@@ -272,25 +257,12 @@ class SettingsMenuItem extends MenuItem {
    this.setSize()
    this.bindClickEvents()
-    // prefixed event listeners for CSS TransitionEnd
+    this.settingsSubMenuEl_.addEventListener('transitionend', this.transitionEndHandler, false)
-    this.PrefixedEvent(
-      this.settingsSubMenuEl_,
-      'TransitionEnd',
-      this.transitionEndHandler,
-      'addEvent'
-    )
  }
  update (event?: any) {
-    let target: HTMLElement = null
    const subMenu = this.subMenu.name()
-    if (event && event.type === 'tap') {
-      target = event.target
-    } else if (event) {
-      target = event.currentTarget
-    }
    // Playback rate menu button doesn't get a vjs-selected class
    // or sets options_['selected'] on the selected playback rate.
    // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
@@ -321,6 +293,13 @@ class SettingsMenuItem extends MenuItem {
      }
    }
+    let target: HTMLElement = null
+    if (event && event.type === 'tap') {
+      target = event.target
+    } else if (event) {
+      target = event.currentTarget
+    }
    if (target && !target.classList.contains('vjs-back-button')) {
      this.settingsButton.hideDialog()
    }
@@ -369,6 +348,15 @@ class SettingsMenuItem extends MenuItem {
    }
  }
+  private rebuildAfterMenuChange () {
+    this.settingsSubMenuEl_.innerHTML = ''
+    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
+    this.update()
+    this.createBackButton()
+    this.setSize()
+    this.bindClickEvents()
+  }
 }
 (SettingsMenuItem as any).prototype.contentElType = 'button'
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index 471a5e46c..fad68cec9 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -7,7 +7,7 @@ import { bytes } from '../common'
 interface StatsCardOptions extends videojs.ComponentOptions {
  videoUUID: string
  videoIsLive: boolean
-  mode: 'webtorrent' | 'p2p-media-loader'
+  mode: 'web-video' | 'p2p-media-loader'
  p2pEnabled: boolean
 }
@@ -34,7 +34,7 @@ class StatsCard extends Component {
  updateInterval: any
-  mode: 'webtorrent' | 'p2p-media-loader'
+  mode: 'web-video' | 'p2p-media-loader'
  metadataStore: any = {}
@@ -63,6 +63,9 @@ class StatsCard extends Component {
  private liveLatency: InfoElement
+  private onP2PInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
+  private onHTTPInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
  createEl () {
    this.containerEl = videojs.dom.createEl('div', {
      className: 'vjs-stats-content'
@@ -86,9 +89,7 @@ class StatsCard extends Component {
    this.populateInfoBlocks()
-    this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
+    this.onP2PInfoHandler = (_event, data) => {
-      if (!data) return // HTTP fallback
      this.mode = data.source
      const p2pStats = data.p2p
@@ -105,11 +106,29 @@ class StatsCard extends Component {
        this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
        this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
      }
-    })
+    }
+    this.onHTTPInfoHandler = (_event, data) => {
+      this.mode = data.source
+      this.playerNetworkInfo.totalDownloaded = bytes(data.http.downloaded).join(' ')
+    }
+    this.player().on('p2p-info', this.onP2PInfoHandler)
+    this.player().on('http-info', this.onHTTPInfoHandler)
    return this.containerEl
  }
+  dispose () {
+    if (this.updateInterval) clearInterval(this.updateInterval)
+    this.player().off('p2p-info', this.onP2PInfoHandler)
+    this.player().off('http-info', this.onHTTPInfoHandler)
+    super.dispose()
+  }
  toggle () {
    if (this.updateInterval) this.hide()
    else this.show()
@@ -122,7 +141,7 @@ class StatsCard extends Component {
      try {
        const options = this.mode === 'p2p-media-loader'
          ? this.buildHLSOptions()
-          : await this.buildWebTorrentOptions() // Default
+          : await this.buildWebVideoOptions() // Default
        this.populateInfoValues(options)
      } catch (err) {
@@ -170,8 +189,8 @@ class StatsCard extends Component {
    }
  }
-  private async buildWebTorrentOptions () {
+  private async buildWebVideoOptions () {
-    const videoFile = this.player_.webtorrent().getCurrentVideoFile()
+    const videoFile = this.player_.webVideo().getCurrentVideoFile()
    if (!this.metadataStore[videoFile.fileUrl]) {
      this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
@@ -194,7 +213,7 @@ class StatsCard extends Component {
    const resolution = videoFile?.resolution.label + videoFile?.fps
    const buffer = this.timeRangesToString(this.player_.buffered())
-    const progress = this.player_.webtorrent().getTorrent()?.progress
+    const progress = this.player_.bufferedPercent()
    return {
      playerNetworkInfo: this.playerNetworkInfo,
@@ -284,8 +303,10 @@ class StatsCard extends Component {
      ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
      : undefined
-    this.setInfoValue(this.playerMode, this.mode || 'HTTP')
+    const p2pEnabled = this.options_.p2pEnabled && this.mode === 'p2p-media-loader'
-    this.setInfoValue(this.p2p, player.localize(this.options_.p2pEnabled ? 'enabled' : 'disabled'))
+    this.setInfoValue(this.playerMode, this.mode)
+    this.setInfoValue(this.p2p, player.localize(p2pEnabled ? 'enabled' : 'disabled'))
    this.setInfoValue(this.uuid, this.options_.videoUUID)
    this.setInfoValue(this.viewport, frames)
diff --git a/client/src/assets/player/shared/stats/stats-plugin.ts b/client/src/assets/player/shared/stats/stats-plugin.ts
index 8aad80e8a..86684a78c 100644
--- a/client/src/assets/player/shared/stats/stats-plugin.ts
+++ b/client/src/assets/player/shared/stats/stats-plugin.ts
@@ -7,10 +7,6 @@ class StatsForNerdsPlugin extends Plugin {
  private statsCard: StatsCard
  constructor (player: videojs.Player, options: StatsCardOptions) {
-    const settings = {
-      ...options
-    }
    super(player)
    this.player.ready(() => {
@@ -19,7 +15,17 @@ class StatsForNerdsPlugin extends Plugin {
    this.statsCard = new StatsCard(player, options)
-    player.addChild(this.statsCard, settings)
+    // Copy options
+    player.addChild(this.statsCard)
+  }
+  dispose () {
+    if (this.statsCard) {
+      this.statsCard.dispose()
+      this.player.removeChild(this.statsCard)
+    }
+    super.dispose()
  }
  show () {
diff --git a/client/src/assets/player/shared/upnext/end-card.ts b/client/src/assets/player/shared/upnext/end-card.ts
index 61668e407..3589e1fd8 100644
--- a/client/src/assets/player/shared/upnext/end-card.ts
+++ b/client/src/assets/player/shared/upnext/end-card.ts
@@ -1,6 +1,7 @@
 import videojs from 'video.js'
+import { UpNextPluginOptions } from '../../types'
-function getMainTemplate (options: any) {
+function getMainTemplate (options: EndCardOptions) {
  return `
    <div class="vjs-upnext-top">
      <span class="vjs-upnext-headtext">${options.headText}</span>
@@ -23,15 +24,10 @@ function getMainTemplate (options: any) {
  `
 }
-export interface EndCardOptions extends videojs.ComponentOptions {
+export interface EndCardOptions extends videojs.ComponentOptions, UpNextPluginOptions {
-  next: () => void
-  getTitle: () => string
-  timeout: number
  cancelText: string
  headText: string
  suspendedText: string
-  condition: () => boolean
-  suspended: () => boolean
 }
 const Component = videojs.getComponent('Component')
@@ -52,27 +48,43 @@ class EndCard extends Component {
  suspendedMessage: HTMLElement
  nextButton: HTMLElement
+  private onEndedHandler: () => void
+  private onPlayingHandler: () => void
  constructor (player: videojs.Player, options: EndCardOptions) {
    super(player, options)
    this.totalTicks = this.options_.timeout / this.interval
-    player.on('ended', (_: any) => {
+    this.onEndedHandler = () => {
-      if (!this.options_.condition()) return
+      if (!this.options_.isDisplayed()) return
      player.addClass('vjs-upnext--showing')
-      this.showCard((canceled: boolean) => {
+      this.showCard(canceled => {
        player.removeClass('vjs-upnext--showing')
        this.container.style.display = 'none'
        if (!canceled) {
          this.options_.next()
        }
      })
-    })
+    }
-    player.on('playing', () => {
+    this.onPlayingHandler = () => {
      this.upNextEvents.trigger('playing')
-    })
+    }
+    player.on([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+    player.on('playing', this.onPlayingHandler)
+  }
+  dispose () {
+    if (this.onEndedHandler) this.player().off([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+    if (this.onPlayingHandler) this.player().off('playing', this.onPlayingHandler)
+    super.dispose()
  }
  createEl () {
@@ -101,7 +113,7 @@ class EndCard extends Component {
    return container
  }
-  showCard (cb: (value: boolean) => void) {
+  showCard (cb: (canceled: boolean) => void) {
    let timeout: any
    this.autoplayRing.setAttribute('stroke-dasharray', `${this.dashOffsetStart}`)
@@ -109,6 +121,10 @@ class EndCard extends Component {
    this.title.innerHTML = this.options_.getTitle()
+    if (this.totalTicks === 0) {
+      return cb(false)
+    }
    this.upNextEvents.one('cancel', () => {
      clearTimeout(timeout)
      cb(true)
@@ -134,7 +150,7 @@ class EndCard extends Component {
    }
    const update = () => {
-      if (this.options_.suspended()) {
+      if (this.options_.isSuspended()) {
        this.suspendedMessage.innerText = this.options_.suspendedText
        goToPercent(0)
        this.ticks = 0
diff --git a/client/src/assets/player/shared/upnext/upnext-plugin.ts b/client/src/assets/player/shared/upnext/upnext-plugin.ts
index e12e8c503..0badcd68c 100644
--- a/client/src/assets/player/shared/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/shared/upnext/upnext-plugin.ts
@@ -1,27 +1,25 @@
 import videojs from 'video.js'
+import { UpNextPluginOptions } from '../../types'
 import { EndCardOptions } from './end-card'
 const Plugin = videojs.getPlugin('plugin')
 class UpNextPlugin extends Plugin {
-  constructor (player: videojs.Player, options: Partial<EndCardOptions> = {}) {
+  constructor (player: videojs.Player, options: UpNextPluginOptions) {
-    const settings = {
+    super(player)
+    const settings: EndCardOptions = {
      next: options.next,
      getTitle: options.getTitle,
-      timeout: options.timeout || 5000,
+      timeout: options.timeout,
-      cancelText: options.cancelText || 'Cancel',
+      cancelText: player.localize('Cancel'),
-      headText: options.headText || 'Up Next',
+      headText: player.localize('Up Next'),
-      suspendedText: options.suspendedText || 'Autoplay is suspended',
+      suspendedText: player.localize('Autoplay is suspended'),
-      condition: options.condition,
+      isDisplayed: options.isDisplayed,
-      suspended: options.suspended
+      isSuspended: options.isSuspended
    }
-    super(player)
-    // UpNext plugin can be called later, so ensure the player is not disposed
-    if (this.player.isDisposed()) return
    this.player.ready(() => {
      player.addClass('vjs-upnext')
    })
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
new file mode 100644
index 000000000..80e56795b
--- /dev/null
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -0,0 +1,186 @@
+import debug from 'debug'
+import videojs from 'video.js'
+import { logger } from '@root-helpers/logger'
+import { addQueryParams } from '@shared/core-utils'
+import { VideoFile } from '@shared/models'
+import { PeerTubeResolution, PlayerNetworkInfo, WebVideoPluginOptions } from '../../types'
+const debugLogger = debug('peertube:player:web-video-plugin')
+const Plugin = videojs.getPlugin('plugin')
+class WebVideoPlugin extends Plugin {
+  private readonly videoFiles: VideoFile[]
+  private currentVideoFile: VideoFile
+  private videoFileToken: () => string
+  private networkInfoInterval: any
+  private onErrorHandler: () => void
+  private onPlayHandler: () => void
+  constructor (player: videojs.Player, options?: WebVideoPluginOptions) {
+    super(player, options)
+    this.videoFiles = options.videoFiles
+    this.videoFileToken = options.videoFileToken
+    this.updateVideoFile({ videoFile: this.pickAverageVideoFile(), isUserResolutionChange: false })
+    player.ready(() => {
+      this.buildQualities()
+      this.setupNetworkInfoInterval()
+      if (this.videoFiles.length === 0) {
+        this.player.addClass('disabled')
+        return
+      }
+    })
+  }
+  dispose () {
+    clearInterval(this.networkInfoInterval)
+    if (this.onErrorHandler) this.player.off('error', this.onErrorHandler)
+    if (this.onPlayHandler) this.player.off('canplay', this.onPlayHandler)
+    super.dispose()
+  }
+  getCurrentResolutionId () {
+    return this.currentVideoFile.resolution.id
+  }
+  updateVideoFile (options: {
+    videoFile: VideoFile
+    isUserResolutionChange: boolean
+  }) {
+    this.currentVideoFile = options.videoFile
+    debugLogger('Updating web video file to ' + this.currentVideoFile.fileUrl)
+    const paused = this.player.paused()
+    const playbackRate = this.player.playbackRate()
+    const currentTime = this.player.currentTime()
+    // Enable error display now this is our last fallback
+    this.onErrorHandler = () => this.player.peertube().displayFatalError()
+    this.player.one('error', this.onErrorHandler)
+    let httpUrl = this.currentVideoFile.fileUrl
+    if (this.videoFileToken()) {
+      httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
+    }
+    const oldAutoplayValue = this.player.autoplay()
+    if (options.isUserResolutionChange) {
+      this.player.autoplay(false)
+      this.player.addClass('vjs-updating-resolution')
+    }
+    this.player.src(httpUrl)
+    this.onPlayHandler = () => {
+      this.player.playbackRate(playbackRate)
+      this.player.currentTime(currentTime)
+      this.adaptPosterForAudioOnly()
+      if (options.isUserResolutionChange) {
+        this.player.trigger('user-resolution-change')
+        this.player.trigger('web-video-source-change')
+        this.tryToPlay()
+          .then(() => {
+            if (paused) this.player.pause()
+            this.player.autoplay(oldAutoplayValue)
+          })
+      }
+    }
+    this.player.one('canplay', this.onPlayHandler)
+  }
+  getCurrentVideoFile () {
+    return this.currentVideoFile
+  }
+  private adaptPosterForAudioOnly () {
+    // Audio-only (resolutionId === 0) gets special treatment
+    if (this.currentVideoFile.resolution.id === 0) {
+      this.player.audioPosterMode(true)
+    } else {
+      this.player.audioPosterMode(false)
+    }
+  }
+  private tryToPlay () {
+    debugLogger('Try to play manually the video')
+    const playPromise = this.player.play()
+    if (playPromise === undefined) return
+    return playPromise
+      .catch((err: Error) => {
+        if (err.message.includes('The play() request was interrupted by a call to pause()')) {
+          return
+        }
+        logger.warn(err)
+        this.player.pause()
+        this.player.posterImage.show()
+        this.player.removeClass('vjs-has-autoplay')
+        this.player.removeClass('vjs-playing-audio-only-content')
+      })
+      .finally(() => {
+        this.player.removeClass('vjs-updating-resolution')
+      })
+  }
+  private pickAverageVideoFile () {
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
+    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
+    return files[Math.floor(files.length / 2)]
+  }
+  private buildQualities () {
+    const resolutions: PeerTubeResolution[] = this.videoFiles.map(videoFile => ({
+      id: videoFile.resolution.id,
+      label: this.buildQualityLabel(videoFile),
+      height: videoFile.resolution.id,
+      selected: videoFile.id === this.currentVideoFile.id,
+      selectCallback: () => this.updateVideoFile({ videoFile, isUserResolutionChange: true })
+    }))
+    this.player.peertubeResolutions().add(resolutions)
+  }
+  private buildQualityLabel (file: VideoFile) {
+    let label = file.resolution.label
+    if (file.fps && file.fps >= 50) {
+      label += file.fps
+    }
+    return label
+  }
+  private setupNetworkInfoInterval () {
+    this.networkInfoInterval = setInterval(() => {
+      return this.player.trigger('http-info', {
+        source: 'web-video',
+        http: {
+          downloaded: this.player.bufferedPercent() * this.currentVideoFile.size
+        }
+      } as PlayerNetworkInfo)
+    }, 1000)
+  }
+}
+videojs.registerPlugin('webVideo', WebVideoPlugin)
+export { WebVideoPlugin }
diff --git a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts b/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
deleted file mode 100644
index 74ae17704..000000000
--- a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-// From https://github.com/MinEduTDF/idb-chunk-store
-// We use temporary IndexDB (all data are removed on destroy) to avoid RAM issues
-// Thanks @santiagogil and @Feross
-import Dexie from 'dexie'
-import { EventEmitter } from 'events'
-import { logger } from '@root-helpers/logger'
-class ChunkDatabase extends Dexie {
-  chunks: Dexie.Table<{ id: number, buf: Buffer }, number>
-  constructor (dbname: string) {
-    super(dbname)
-    this.version(1).stores({
-      chunks: 'id'
-    })
-  }
-}
-class ExpirationDatabase extends Dexie {
-  databases: Dexie.Table<{ name: string, expiration: number }, number>
-  constructor () {
-    super('webtorrent-expiration')
-    this.version(1).stores({
-      databases: 'name,expiration'
-    })
-  }
-}
-export class PeertubeChunkStore extends EventEmitter {
-  private static readonly BUFFERING_PUT_MS = 1000
-  private static readonly CLEANER_INTERVAL_MS = 1000 * 60 // 1 minute
-  private static readonly CLEANER_EXPIRATION_MS = 1000 * 60 * 5 // 5 minutes
-  chunkLength: number
-  private pendingPut: { id: number, buf: Buffer, cb: (err?: Error) => void }[] = []
-  // If the store is full
-  private memoryChunks: { [ id: number ]: Buffer | true } = {}
-  private databaseName: string
-  private putBulkTimeout: any
-  private cleanerInterval: any
-  private db: ChunkDatabase
-  private expirationDB: ExpirationDatabase
-  private readonly length: number
-  private readonly lastChunkLength: number
-  private readonly lastChunkIndex: number
-  constructor (chunkLength: number, opts: any) {
-    super()
-    this.databaseName = 'webtorrent-chunks-'
-    if (!opts) opts = {}
-    if (opts.torrent?.infoHash) this.databaseName += opts.torrent.infoHash
-    else this.databaseName += '-default'
-    this.setMaxListeners(100)
-    this.chunkLength = Number(chunkLength)
-    if (!this.chunkLength) throw new Error('First argument must be a chunk length')
-    this.length = Number(opts.length) || Infinity
-    if (this.length !== Infinity) {
-      this.lastChunkLength = (this.length % this.chunkLength) || this.chunkLength
-      this.lastChunkIndex = Math.ceil(this.length / this.chunkLength) - 1
-    }
-    this.db = new ChunkDatabase(this.databaseName)
-    // Track databases that expired
-    this.expirationDB = new ExpirationDatabase()
-    this.runCleaner()
-  }
-  put (index: number, buf: Buffer, cb: (err?: Error) => void) {
-    const isLastChunk = (index === this.lastChunkIndex)
-    if (isLastChunk && buf.length !== this.lastChunkLength) {
-      return this.nextTick(cb, new Error('Last chunk length must be ' + this.lastChunkLength))
-    }
-    if (!isLastChunk && buf.length !== this.chunkLength) {
-      return this.nextTick(cb, new Error('Chunk length must be ' + this.chunkLength))
-    }
-    // Specify we have this chunk
-    this.memoryChunks[index] = true
-    // Add it to the pending put
-    this.pendingPut.push({ id: index, buf, cb })
-    // If it's already planned, return
-    if (this.putBulkTimeout) return
-    // Plan a future bulk insert
-    this.putBulkTimeout = setTimeout(async () => {
-      const processing = this.pendingPut
-      this.pendingPut = []
-      this.putBulkTimeout = undefined
-      try {
-        await this.db.transaction('rw', this.db.chunks, () => {
-          return this.db.chunks.bulkPut(processing.map(p => ({ id: p.id, buf: p.buf })))
-        })
-      } catch (err) {
-        logger.info('Cannot bulk insert chunks. Store them in memory.', err)
-        processing.forEach(p => {
-          this.memoryChunks[p.id] = p.buf
-        })
-      } finally {
-        processing.forEach(p => p.cb())
-      }
-    }, PeertubeChunkStore.BUFFERING_PUT_MS)
-  }
-  get (index: number, opts: any, cb: (err?: Error, buf?: Buffer) => void): void {
-    if (typeof opts === 'function') return this.get(index, null, opts)
-    // IndexDB could be slow, use our memory index first
-    const memoryChunk = this.memoryChunks[index]
-    if (memoryChunk === undefined) {
-      const err = new Error('Chunk not found') as any
-      err['notFound'] = true
-      return process.nextTick(() => cb(err))
-    }
-    // Chunk in memory
-    if (memoryChunk !== true) return cb(null, memoryChunk)
-    // Chunk in store
-    this.db.transaction('r', this.db.chunks, async () => {
-      const result = await this.db.chunks.get({ id: index })
-      if (result === undefined) return cb(null, Buffer.alloc(0))
-      const buf = result.buf
-      if (!opts) return this.nextTick(cb, null, buf)
-      const offset = opts.offset || 0
-      const len = opts.length || (buf.length - offset)
-      return cb(null, buf.slice(offset, len + offset))
-    })
-    .catch(err => {
-      logger.error(err)
-      return cb(err)
-    })
-  }
-  close (cb: (err?: Error) => void) {
-    return this.destroy(cb)
-  }
-  async destroy (cb: (err?: Error) => void) {
-    try {
-      if (this.pendingPut) {
-        clearTimeout(this.putBulkTimeout)
-        this.pendingPut = null
-      }
-      if (this.cleanerInterval) {
-        clearInterval(this.cleanerInterval)
-        this.cleanerInterval = null
-      }
-      if (this.db) {
-        this.db.close()
-        await this.dropDatabase(this.databaseName)
-      }
-      if (this.expirationDB) {
-        this.expirationDB.close()
-        this.expirationDB = null
-      }
-      return cb()
-    } catch (err) {
-      logger.error('Cannot destroy peertube chunk store.', err)
-      return cb(err)
-    }
-  }
-  private runCleaner () {
-    this.checkExpiration()
-    this.cleanerInterval = setInterval(() => {
-      this.checkExpiration()
-    }, PeertubeChunkStore.CLEANER_INTERVAL_MS)
-  }
-  private async checkExpiration () {
-    let databasesToDeleteInfo: { name: string }[] = []
-    try {
-      await this.expirationDB.transaction('rw', this.expirationDB.databases, async () => {
-        // Update our database expiration since we are alive
-        await this.expirationDB.databases.put({
-          name: this.databaseName,
-          expiration: new Date().getTime() + PeertubeChunkStore.CLEANER_EXPIRATION_MS
-        })
-        const now = new Date().getTime()
-        databasesToDeleteInfo = await this.expirationDB.databases.where('expiration').below(now).toArray()
-      })
-    } catch (err) {
-      logger.error('Cannot update expiration of fetch expired databases.', err)
-    }
-    for (const databaseToDeleteInfo of databasesToDeleteInfo) {
-      await this.dropDatabase(databaseToDeleteInfo.name)
-    }
-  }
-  private async dropDatabase (databaseName: string) {
-    const dbToDelete = new ChunkDatabase(databaseName)
-    logger.info(`Destroying IndexDB database ${databaseName}`)
-    try {
-      await dbToDelete.delete()
-      await this.expirationDB.transaction('rw', this.expirationDB.databases, () => {
-        return this.expirationDB.databases.where({ name: databaseName }).delete()
-      })
-    } catch (err) {
-      logger.error(`Cannot delete ${databaseName}.`, err)
-    }
-  }
-  private nextTick <T> (cb: (err?: Error, val?: T) => void, err: Error, val?: T) {
-    process.nextTick(() => cb(err, val), undefined)
-  }
-}
diff --git a/client/src/assets/player/shared/webtorrent/video-renderer.ts b/client/src/assets/player/shared/webtorrent/video-renderer.ts
deleted file mode 100644
index a85d7a838..000000000
--- a/client/src/assets/player/shared/webtorrent/video-renderer.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-// Thanks: https://github.com/feross/render-media
-const MediaElementWrapper = require('mediasource')
-import { logger } from '@root-helpers/logger'
-import { extname } from 'path'
-const Videostream = require('videostream')
-const VIDEOSTREAM_EXTS = [
-  '.m4a',
-  '.m4v',
-  '.mp4'
-]
-type RenderMediaOptions = {
-  controls: boolean
-  autoplay: boolean
-}
-function renderVideo (
-  file: any,
-  elem: HTMLVideoElement,
-  opts: RenderMediaOptions,
-  callback: (err: Error, renderer: any) => void
-) {
-  validateFile(file)
-  return renderMedia(file, elem, opts, callback)
-}
-function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
-  const extension = extname(file.name).toLowerCase()
-  let preparedElem: any
-  let currentTime = 0
-  let renderer: any
-  try {
-    if (VIDEOSTREAM_EXTS.includes(extension)) {
-      renderer = useVideostream()
-    } else {
-      renderer = useMediaSource()
-    }
-  } catch (err) {
-    return callback(err)
-  }
-  function useVideostream () {
-    prepareElem()
-    preparedElem.addEventListener('error', function onError (err: Error) {
-      preparedElem.removeEventListener('error', onError)
-      return callback(err)
-    })
-    preparedElem.addEventListener('loadstart', onLoadStart)
-    return new Videostream(file, preparedElem)
-  }
-  function useMediaSource (useVP9 = false) {
-    const codecs = getCodec(file.name, useVP9)
-    prepareElem()
-    preparedElem.addEventListener('error', function onError (err: Error) {
-      preparedElem.removeEventListener('error', onError)
-      // Try with vp9 before returning an error
-      if (codecs.includes('vp8')) return fallbackToMediaSource(true)
-      return callback(err)
-    })
-    preparedElem.addEventListener('loadstart', onLoadStart)
-    const wrapper = new MediaElementWrapper(preparedElem)
-    const writable = wrapper.createWriteStream(codecs)
-    file.createReadStream().pipe(writable)
-    if (currentTime) preparedElem.currentTime = currentTime
-    return wrapper
-  }
-  function fallbackToMediaSource (useVP9 = false) {
-    if (useVP9 === true) logger.info('Falling back to media source with VP9 enabled.')
-    else logger.info('Falling back to media source..')
-    useMediaSource(useVP9)
-  }
-  function prepareElem () {
-    if (preparedElem === undefined) {
-      preparedElem = elem
-      preparedElem.addEventListener('progress', function () {
-        currentTime = elem.currentTime
-      })
-    }
-  }
-  function onLoadStart () {
-    preparedElem.removeEventListener('loadstart', onLoadStart)
-    if (opts.autoplay) preparedElem.play()
-    callback(null, renderer)
-  }
-}
-function validateFile (file: any) {
-  if (file == null) {
-    throw new Error('file cannot be null or undefined')
-  }
-  if (typeof file.name !== 'string') {
-    throw new Error('missing or invalid file.name property')
-  }
-  if (typeof file.createReadStream !== 'function') {
-    throw new Error('missing or invalid file.createReadStream property')
-  }
-}
-function getCodec (name: string, useVP9 = false) {
-  const ext = extname(name).toLowerCase()
-  if (ext === '.mp4') {
-    return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
-  }
-  if (ext === '.webm') {
-    if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
-    return 'video/webm; codecs="vp8, vorbis"'
-  }
-  return undefined
-}
-export {
-  renderVideo
-}
diff --git a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
deleted file mode 100644
index 3dde44a60..000000000
--- a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
+++ /dev/null
@@ -1,663 +0,0 @@
-import videojs from 'video.js'
-import * as WebTorrent from 'webtorrent'
-import { logger } from '@root-helpers/logger'
-import { isIOS } from '@root-helpers/web-browser'
-import { addQueryParams, timeToInt } from '@shared/core-utils'
-import { VideoFile } from '@shared/models'
-import { getAverageBandwidthInStore, getStoredMute, getStoredVolume, saveAverageBandwidth } from '../../peertube-player-local-storage'
-import { PeerTubeResolution, PlayerNetworkInfo, WebtorrentPluginOptions } from '../../types'
-import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../common'
-import { PeertubeChunkStore } from './peertube-chunk-store'
-import { renderVideo } from './video-renderer'
-const CacheChunkStore = require('cache-chunk-store')
-type PlayOptions = {
-  forcePlay?: boolean
-  seek?: number
-  delay?: number
-}
-const Plugin = videojs.getPlugin('plugin')
-class WebTorrentPlugin extends Plugin {
-  readonly videoFiles: VideoFile[]
-  private readonly playerElement: HTMLVideoElement
-  private readonly autoplay: boolean | string = false
-  private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: videojs.Player['src']
-  private readonly videoDuration: number
-  private readonly CONSTANTS = {
-    INFO_SCHEDULER: 1000, // Don't change this
-    AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
-    AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
-    AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
-    AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
-    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
-  }
-  private readonly buildWebSeedUrls: (file: VideoFile) => string[]
-  private readonly webtorrent = new WebTorrent({
-    tracker: {
-      rtcConfig: getRtcConfig()
-    },
-    dht: false
-  })
-  private currentVideoFile: VideoFile
-  private torrent: WebTorrent.Torrent
-  private renderer: any
-  private fakeRenderer: any
-  private destroyingFakeRenderer = false
-  private autoResolution = true
-  private autoResolutionPossible = true
-  private isAutoResolutionObservation = false
-  private playerRefusedP2P = false
-  private requiresAuth: boolean
-  private videoFileToken: () => string
-  private torrentInfoInterval: any
-  private autoQualityInterval: any
-  private addTorrentDelay: any
-  private qualityObservationTimer: any
-  private runAutoQualitySchedulerTimer: any
-  private downloadSpeeds: number[] = []
-  constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
-    super(player)
-    this.startTime = timeToInt(options.startTime)
-    // Custom autoplay handled by webtorrent because we lazy play the video
-    this.autoplay = options.autoplay
-    this.playerRefusedP2P = options.playerRefusedP2P
-    this.videoFiles = options.videoFiles
-    this.videoDuration = options.videoDuration
-    this.savePlayerSrcFunction = this.player.src
-    this.playerElement = options.playerElement
-    this.requiresAuth = options.requiresAuth
-    this.videoFileToken = options.videoFileToken
-    this.buildWebSeedUrls = options.buildWebSeedUrls
-    this.player.ready(() => {
-      const playerOptions = this.player.options_
-      const volume = getStoredVolume()
-      if (volume !== undefined) this.player.volume(volume)
-      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
-      if (muted !== undefined) this.player.muted(muted)
-      this.player.duration(options.videoDuration)
-      this.initializePlayer()
-      this.runTorrentInfoScheduler()
-      this.player.one('play', () => {
-        // Don't run immediately scheduler, wait some seconds the TCP connections are made
-        this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
-      })
-    })
-  }
-  dispose () {
-    clearTimeout(this.addTorrentDelay)
-    clearTimeout(this.qualityObservationTimer)
-    clearTimeout(this.runAutoQualitySchedulerTimer)
-    clearInterval(this.torrentInfoInterval)
-    clearInterval(this.autoQualityInterval)
-    // Don't need to destroy renderer, video player will be destroyed
-    this.flushVideoFile(this.currentVideoFile, false)
-    this.destroyFakeRenderer()
-  }
-  getCurrentResolutionId () {
-    return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
-  }
-  updateVideoFile (
-    videoFile?: VideoFile,
-    options: {
-      forcePlay?: boolean
-      seek?: number
-      delay?: number
-    } = {},
-    done: () => void = () => { /* empty */ }
-  ) {
-    // Automatically choose the adapted video file
-    if (!videoFile) {
-      const savedAverageBandwidth = getAverageBandwidthInStore()
-      videoFile = savedAverageBandwidth
-        ? this.getAppropriateFile(savedAverageBandwidth)
-        : this.pickAverageVideoFile()
-    }
-    if (!videoFile) {
-      throw Error(`Can't update video file since videoFile is undefined.`)
-    }
-    // Don't add the same video file once again
-    if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
-      return
-    }
-    // Do not display error to user because we will have multiple fallback
-    this.player.peertube().hideFatalError();
-    // Hack to "simulate" src link in video.js >= 6
-    // Without this, we can't play the video after pausing it
-    // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-    (this.player as any).src = () => true
-    const oldPlaybackRate = this.player.playbackRate()
-    const previousVideoFile = this.currentVideoFile
-    this.currentVideoFile = videoFile
-    // Don't try on iOS that does not support MediaSource
-    // Or don't use P2P if webtorrent is disabled
-    if (isIOS() || this.playerRefusedP2P) {
-      return this.fallbackToHttp(options, () => {
-        this.player.playbackRate(oldPlaybackRate)
-        return done()
-      })
-    }
-    this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
-      this.player.playbackRate(oldPlaybackRate)
-      return done()
-    })
-    this.selectAppropriateResolution(true)
-  }
-  updateEngineResolution (resolutionId: number, delay = 0) {
-    // Remember player state
-    const currentTime = this.player.currentTime()
-    const isPaused = this.player.paused()
-    // Hide bigPlayButton
-    if (!isPaused) {
-      this.player.bigPlayButton.hide()
-    }
-    // Audio-only (resolutionId === 0) gets special treatment
-    if (resolutionId === 0) {
-      // Audio-only: show poster, do not auto-hide controls
-      this.player.addClass('vjs-playing-audio-only-content')
-      this.player.posterImage.show()
-    } else {
-      // Hide poster to have black background
-      this.player.removeClass('vjs-playing-audio-only-content')
-      this.player.posterImage.hide()
-    }
-    const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
-    const options = {
-      forcePlay: false,
-      delay,
-      seek: currentTime + (delay / 1000)
-    }
-    this.updateVideoFile(newVideoFile, options)
-    this.player.trigger('engineResolutionChange')
-  }
-  flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
-    if (videoFile !== undefined && this.webtorrent.get(videoFile.magnetUri)) {
-      if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
-      this.webtorrent.remove(videoFile.magnetUri)
-      logger.info(`Removed ${videoFile.magnetUri}`)
-    }
-  }
-  disableAutoResolution () {
-    this.autoResolution = false
-    this.autoResolutionPossible = false
-    this.player.peertubeResolutions().disableAutoResolution()
-  }
-  isAutoResolutionPossible () {
-    return this.autoResolutionPossible
-  }
-  getTorrent () {
-    return this.torrent
-  }
-  getCurrentVideoFile () {
-    return this.currentVideoFile
-  }
-  changeQuality (id: number) {
-    if (id === -1) {
-      if (this.autoResolutionPossible === true) {
-        this.autoResolution = true
-        this.selectAppropriateResolution(false)
-      }
-      return
-    }
-    this.autoResolution = false
-    this.updateEngineResolution(id)
-    this.selectAppropriateResolution(false)
-  }
-  private addTorrent (
-    magnetOrTorrentUrl: string,
-    previousVideoFile: VideoFile,
-    options: PlayOptions,
-    done: (err?: Error) => void
-  ) {
-    if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
-    logger.info(`Adding ${magnetOrTorrentUrl}.`)
-    const oldTorrent = this.torrent
-    const torrentOptions = {
-      // Don't use arrow function: it breaks webtorrent (that uses `new` keyword)
-      store: function (chunkLength: number, storeOpts: any) {
-        return new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
-          max: 100
-        })
-      },
-      urlList: this.buildWebSeedUrls(this.currentVideoFile)
-    }
-    this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
-      logger.info(`Added ${magnetOrTorrentUrl}.`)
-      if (oldTorrent) {
-        // Pause the old torrent
-        this.stopTorrent(oldTorrent)
-        // We use a fake renderer so we download correct pieces of the next file
-        if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
-      }
-      // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
-      this.addTorrentDelay = setTimeout(() => {
-        // We don't need the fake renderer anymore
-        this.destroyFakeRenderer()
-        const paused = this.player.paused()
-        this.flushVideoFile(previousVideoFile)
-        // Update progress bar (just for the UI), do not wait rendering
-        if (options.seek) this.player.currentTime(options.seek)
-        const renderVideoOptions = { autoplay: false, controls: true }
-        renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
-          this.renderer = renderer
-          if (err) return this.fallbackToHttp(options, done)
-          return this.tryToPlay(err => {
-            if (err) return done(err)
-            if (options.seek) this.seek(options.seek)
-            if (options.forcePlay === false && paused === true) this.player.pause()
-            return done()
-          })
-        })
-      }, options.delay || 0)
-    })
-    this.torrent.on('error', (err: any) => logger.error(err))
-    this.torrent.on('warning', (err: any) => {
-      // We don't support HTTP tracker but we don't care -> we use the web socket tracker
-      if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
-      // Users don't care about issues with WebRTC, but developers do so log it in the console
-      if (err.message.indexOf('Ice connection failed') !== -1) {
-        logger.info(err)
-        return
-      }
-      // Magnet hash is not up to date with the torrent file, add directly the torrent file
-      if (err.message.indexOf('incorrect info hash') !== -1) {
-        logger.error('Incorrect info hash detected, falling back to torrent file.')
-        const newOptions = { forcePlay: true, seek: options.seek }
-        return this.addTorrent((this.torrent as any)['xs'], previousVideoFile, newOptions, done)
-      }
-      // Remote instance is down
-      if (err.message.indexOf('from xs param') !== -1) {
-        this.handleError(err)
-      }
-      logger.warn(err)
-    })
-  }
-  private tryToPlay (done?: (err?: Error) => void) {
-    if (!done) done = function () { /* empty */ }
-    const playPromise = this.player.play()
-    if (playPromise !== undefined) {
-      return playPromise.then(() => done())
-                        .catch((err: Error) => {
-                          if (err.message.includes('The play() request was interrupted by a call to pause()')) {
-                            return
-                          }
-                          logger.warn(err)
-                          this.player.pause()
-                          this.player.posterImage.show()
-                          this.player.removeClass('vjs-has-autoplay')
-                          this.player.removeClass('vjs-has-big-play-button-clicked')
-                          this.player.removeClass('vjs-playing-audio-only-content')
-                          return done()
-                        })
-    }
-    return done()
-  }
-  private seek (time: number) {
-    this.player.currentTime(time)
-    this.player.handleTechSeeked_()
-  }
-  private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
-    if (this.videoFiles === undefined) return undefined
-    if (this.videoFiles.length === 1) return this.videoFiles[0]
-    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
-    if (files.length === 0) return undefined
-    // Don't change the torrent if the player ended
-    if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
-    if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
-    // Limit resolution according to player height
-    const playerHeight = this.playerElement.offsetHeight
-    // We take the first resolution just above the player height
-    // Example: player height is 530px, we want the 720p file instead of 480p
-    let maxResolution = files[0].resolution.id
-    for (let i = files.length - 1; i >= 0; i--) {
-      const resolutionId = files[i].resolution.id
-      if (resolutionId !== 0 && resolutionId >= playerHeight) {
-        maxResolution = resolutionId
-        break
-      }
-    }
-    // Filter videos we can play according to our screen resolution and bandwidth
-    const filteredFiles = files.filter(f => f.resolution.id <= maxResolution)
-                               .filter(f => {
-                                 const fileBitrate = (f.size / this.videoDuration)
-                                 let threshold = fileBitrate
-                                 // If this is for a higher resolution or an initial load: add a margin
-                                 if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
-                                   threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
-                                 }
-                                 return averageDownloadSpeed > threshold
-                               })
-    // If the download speed is too bad, return the lowest resolution we have
-    if (filteredFiles.length === 0) return videoFileMinByResolution(files)
-    return videoFileMaxByResolution(filteredFiles)
-  }
-  private getAndSaveActualDownloadSpeed () {
-    const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
-    const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
-    if (lastDownloadSpeeds.length === 0) return -1
-    const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
-    const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
-    // Save the average bandwidth for future use
-    saveAverageBandwidth(averageBandwidth)
-    return averageBandwidth
-  }
-  private initializePlayer () {
-    this.buildQualities()
-    if (this.videoFiles.length === 0) {
-      this.player.addClass('disabled')
-      return
-    }
-    if (this.autoplay !== false) {
-      this.player.posterImage.hide()
-      return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
-    }
-    // Proxy first play
-    const oldPlay = this.player.play.bind(this.player);
-    (this.player as any).play = () => {
-      this.player.addClass('vjs-has-big-play-button-clicked')
-      this.player.play = oldPlay
-      this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
-    }
-  }
-  private runAutoQualityScheduler () {
-    this.autoQualityInterval = setInterval(() => {
-      // Not initialized or in HTTP fallback
-      if (this.torrent === undefined || this.torrent === null) return
-      if (this.autoResolution === false) return
-      if (this.isAutoResolutionObservation === true) return
-      const file = this.getAppropriateFile()
-      let changeResolution = false
-      let changeResolutionDelay = 0
-      // Lower resolution
-      if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
-        logger.info(`Downgrading automatically the resolution to: ${file.resolution.label}`)
-        changeResolution = true
-      } else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Higher resolution
-        logger.info(`Upgrading automatically the resolution to: ${file.resolution.label}`)
-        changeResolution = true
-        changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_HIGHER_RESOLUTION_DELAY
-      }
-      if (changeResolution === true) {
-        this.updateEngineResolution(file.resolution.id, changeResolutionDelay)
-        // Wait some seconds in observation of our new resolution
-        this.isAutoResolutionObservation = true
-        this.qualityObservationTimer = setTimeout(() => {
-          this.isAutoResolutionObservation = false
-        }, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
-      }
-    }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
-  }
-  private isPlayerWaiting () {
-    return this.player?.hasClass('vjs-waiting')
-  }
-  private runTorrentInfoScheduler () {
-    this.torrentInfoInterval = setInterval(() => {
-      // Not initialized yet
-      if (this.torrent === undefined) return
-      // Http fallback
-      if (this.torrent === null) return this.player.trigger('p2pInfo', false)
-      // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
-      if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
-      return this.player.trigger('p2pInfo', {
-        source: 'webtorrent',
-        http: {
-          downloadSpeed: 0,
-          downloaded: 0
-        },
-        p2p: {
-          downloadSpeed: this.torrent.downloadSpeed,
-          numPeers: this.torrent.numPeers,
-          uploadSpeed: this.torrent.uploadSpeed,
-          downloaded: this.torrent.downloaded,
-          uploaded: this.torrent.uploaded
-        },
-        bandwidthEstimate: this.webtorrent.downloadSpeed
-      } as PlayerNetworkInfo)
-    }, this.CONSTANTS.INFO_SCHEDULER)
-  }
-  private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
-    const paused = this.player.paused()
-    this.disableAutoResolution()
-    this.flushVideoFile(this.currentVideoFile, true)
-    this.torrent = null
-    // Enable error display now this is our last fallback
-    this.player.one('error', () => this.player.peertube().displayFatalError())
-    let httpUrl = this.currentVideoFile.fileUrl
-    if (this.requiresAuth && this.videoFileToken) {
-      httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
-    }
-    this.player.src = this.savePlayerSrcFunction
-    this.player.src(httpUrl)
-    this.selectAppropriateResolution(true)
-    // We changed the source, so reinit captions
-    this.player.trigger('sourcechange')
-    return this.tryToPlay(err => {
-      if (err && done) return done(err)
-      if (options.seek) this.seek(options.seek)
-      if (options.forcePlay === false && paused === true) this.player.pause()
-      if (done) return done()
-    })
-  }
-  private handleError (err: Error | string) {
-    return this.player.trigger('customError', { err })
-  }
-  private pickAverageVideoFile () {
-    if (this.videoFiles.length === 1) return this.videoFiles[0]
-    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
-    return files[Math.floor(files.length / 2)]
-  }
-  private stopTorrent (torrent: WebTorrent.Torrent) {
-    torrent.pause()
-    // Pause does not remove actual peers (in particular the webseed peer)
-    torrent.removePeer((torrent as any)['ws'])
-  }
-  private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
-    this.destroyingFakeRenderer = false
-    const fakeVideoElem = document.createElement('video')
-    renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
-      this.fakeRenderer = renderer
-      // The renderer returns an error when we destroy it, so skip them
-      if (this.destroyingFakeRenderer === false && err) {
-        logger.error('Cannot render new torrent in fake video element.', err)
-      }
-      // Load the future file at the correct time (in delay MS - 2 seconds)
-      fakeVideoElem.currentTime = this.player.currentTime() + (delay - 2000)
-    })
-  }
-  private destroyFakeRenderer () {
-    if (this.fakeRenderer) {
-      this.destroyingFakeRenderer = true
-      if (this.fakeRenderer.destroy) {
-        try {
-          this.fakeRenderer.destroy()
-        } catch (err) {
-          logger.info('Cannot destroy correctly fake renderer.', err)
-        }
-      }
-      this.fakeRenderer = undefined
-    }
-  }
-  private buildQualities () {
-    const resolutions: PeerTubeResolution[] = this.videoFiles.map(file => ({
-      id: file.resolution.id,
-      label: this.buildQualityLabel(file),
-      height: file.resolution.id,
-      selected: false,
-      selectCallback: () => this.changeQuality(file.resolution.id)
-    }))
-    resolutions.push({
-      id: -1,
-      label: this.player.localize('Auto'),
-      selected: true,
-      selectCallback: () => this.changeQuality(-1)
-    })
-    this.player.peertubeResolutions().add(resolutions)
-  }
-  private buildQualityLabel (file: VideoFile) {
-    let label = file.resolution.label
-    if (file.fps && file.fps >= 50) {
-      label += file.fps
-    }
-    return label
-  }
-  private selectAppropriateResolution (byEngine: boolean) {
-    const resolution = this.autoResolution
-      ? -1
-      : this.getCurrentResolutionId()
-    const autoResolutionChosen = this.autoResolution
-      ? this.getCurrentResolutionId()
-      : undefined
-    this.player.peertubeResolutions().select({ id: resolution, autoResolutionChosenId: autoResolutionChosen, byEngine })
-  }
-}
-videojs.registerPlugin('webtorrent', WebTorrentPlugin)
-export { WebTorrentPlugin }
diff --git a/client/src/assets/player/types/index.ts b/client/src/assets/player/types/index.ts
index b73e0b3cb..4bf49f65c 100644
--- a/client/src/assets/player/types/index.ts
+++ b/client/src/assets/player/types/index.ts
@@ -1,2 +1,2 @@
-export * from './manager-options'
+export * from './peertube-player-options'
 export * from './peertube-videojs-typings'
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
deleted file mode 100644
index c14fd7e99..000000000
--- a/client/src/assets/player/types/manager-options.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { PluginsManager } from '@root-helpers/plugins-manager'
-import { LiveVideoLatencyMode, VideoFile } from '@shared/models'
-import { PlaylistPluginOptions, VideoJSCaption } from './peertube-videojs-typings'
-export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
-export type WebtorrentOptions = {
-  videoFiles: VideoFile[]
-}
-export type P2PMediaLoaderOptions = {
-  playlistUrl: string
-  segmentsSha256Url: string
-  trackerAnnounce: string[]
-  redundancyBaseUrls: string[]
-  videoFiles: VideoFile[]
-}
-export interface CustomizationOptions {
-  startTime: number | string
-  stopTime: number | string
-  controls?: boolean
-  controlBar?: boolean
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
-  resume?: string
-  peertubeLink: boolean
-  playbackRate?: number | string
-}
-export interface CommonOptions extends CustomizationOptions {
-  playerElement: HTMLVideoElement
-  onPlayerElementChange: (element: HTMLVideoElement) => void
-  autoplay: boolean
-  forceAutoplay: boolean
-  p2pEnabled: boolean
-  nextVideo?: () => void
-  hasNextVideo?: () => boolean
-  previousVideo?: () => void
-  hasPreviousVideo?: () => boolean
-  playlist?: PlaylistPluginOptions
-  videoDuration: number
-  enableHotkeys: boolean
-  inactivityTimeout: number
-  poster: string
-  videoViewIntervalMs: number
-  instanceName: string
-  theaterButton: boolean
-  captions: boolean
-  videoViewUrl: string
-  authorizationHeader?: () => string
-  metricsUrl: string
-  embedUrl: string
-  embedTitle: string
-  isLive: boolean
-  liveOptions?: {
-    latencyMode: LiveVideoLatencyMode
-  }
-  language?: string
-  videoCaptions: VideoJSCaption[]
-  videoUUID: string
-  videoShortUUID: string
-  serverUrl: string
-  requiresAuth: boolean
-  videoFileToken: () => string
-  errorNotifier: (message: string) => void
-}
-export type PeertubePlayerManagerOptions = {
-  common: CommonOptions
-  webtorrent: WebtorrentOptions
-  p2pMediaLoader?: P2PMediaLoaderOptions
-  pluginsManager: PluginsManager
-}
diff --git a/client/src/assets/player/types/peertube-player-options.ts b/client/src/assets/player/types/peertube-player-options.ts
new file mode 100644
index 000000000..e1b8c7fab
--- /dev/null
+++ b/client/src/assets/player/types/peertube-player-options.ts
@@ -0,0 +1,117 @@
+import { PluginsManager } from '@root-helpers/plugins-manager'
+import { LiveVideoLatencyMode, VideoFile } from '@shared/models'
+import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { PlaylistPluginOptions, VideoJSCaption, VideoJSStoryboard } from './peertube-videojs-typings'
+export type PlayerMode = 'web-video' | 'p2p-media-loader'
+export type PeerTubePlayerContructorOptions = {
+  playerElement: () => HTMLVideoElement
+  controls: boolean
+  controlBar: boolean
+  muted: boolean
+  loop: boolean
+  peertubeLink: () => boolean
+  playbackRate?: number | string
+  enableHotkeys: boolean
+  inactivityTimeout: number
+  videoViewIntervalMs: number
+  instanceName: string
+  theaterButton: boolean
+  authorizationHeader: () => string
+  metricsUrl: string
+  serverUrl: string
+  errorNotifier: (message: string) => void
+  // Current web browser language
+  language: string
+  pluginsManager: PluginsManager
+}
+export type PeerTubePlayerLoadOptions = {
+  mode: PlayerMode
+  startTime?: number | string
+  stopTime?: number | string
+  autoplay: boolean
+  forceAutoplay: boolean
+  poster: string
+  subtitle?: string
+  videoViewUrl: string
+  embedUrl: string
+  embedTitle: string
+  isLive: boolean
+  liveOptions?: {
+    latencyMode: LiveVideoLatencyMode
+  }
+  videoCaptions: VideoJSCaption[]
+  storyboard: VideoJSStoryboard
+  videoUUID: string
+  videoShortUUID: string
+  duration: number
+  requiresUserAuth: boolean
+  videoFileToken: () => string
+  requiresPassword: boolean
+  videoPassword: () => string
+  nextVideo: {
+    enabled: boolean
+    getVideoTitle: () => string
+    handler?: () => void
+    displayControlBarButton: boolean
+  }
+  previousVideo: {
+    enabled: boolean
+    handler?: () => void
+    displayControlBarButton: boolean
+  }
+  upnext?: {
+    isEnabled: () => boolean
+    isSuspended: (player: videojs.VideoJsPlayer) => boolean
+    timeout: number
+  }
+  dock?: PeerTubeDockPluginOptions
+  playlist?: PlaylistPluginOptions
+  p2pEnabled: boolean
+  hls?: HLSOptions
+  webVideo?: WebVideoOptions
+}
+export type WebVideoOptions = {
+  videoFiles: VideoFile[]
+}
+export type HLSOptions = {
+  playlistUrl: string
+  segmentsSha256Url: string
+  trackerAnnounce: string[]
+  redundancyBaseUrls: string[]
+  videoFiles: VideoFile[]
+}
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index eadf56cfa..f10fc03a8 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -2,8 +2,11 @@ import { HlsConfig, Level } from 'hls.js'
 import videojs from 'video.js'
 import { Engine } from '@peertube/p2p-media-loader-hlsjs'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
-import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { BezelsPlugin } from '../shared/bezels/bezels-plugin'
-import { HotkeysOptions } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { StoryboardPlugin } from '../shared/control-bar/storyboard-plugin'
+import { PeerTubeDockPlugin, PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { HotkeysOptions, PeerTubeHotkeysPlugin } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { PeerTubeMobilePlugin } from '../shared/mobile/peertube-mobile-plugin'
 import { Html5Hlsjs } from '../shared/p2p-media-loader/hls-plugin'
 import { P2pMediaLoaderPlugin } from '../shared/p2p-media-loader/p2p-media-loader-plugin'
 import { RedundancyUrlManager } from '../shared/p2p-media-loader/redundancy-url-manager'
@@ -12,9 +15,10 @@ import { PlaylistPlugin } from '../shared/playlist/playlist-plugin'
 import { PeerTubeResolutionsPlugin } from '../shared/resolutions/peertube-resolutions-plugin'
 import { StatsCardOptions } from '../shared/stats/stats-card'
 import { StatsForNerdsPlugin } from '../shared/stats/stats-plugin'
-import { EndCardOptions } from '../shared/upnext/end-card'
+import { UpNextPlugin } from '../shared/upnext/upnext-plugin'
-import { WebTorrentPlugin } from '../shared/webtorrent/webtorrent-plugin'
+import { WebVideoPlugin } from '../shared/web-video/web-video-plugin'
-import { PlayerMode } from './manager-options'
+import { PlayerMode } from './peertube-player-options'
+import { SegmentValidator } from '../shared/p2p-media-loader/segment-validator'
 declare module 'video.js' {
@@ -31,33 +35,36 @@ declare module 'video.js' {
    handleTechSeeked_ (): void
+    textTracks (): TextTrackList & {
+      tracks_: (TextTrack & { id: string, label: string, src: string })[]
+    }
    // Plugins
    peertube (): PeerTubePlugin
-    webtorrent (): WebTorrentPlugin
+    webVideo (options?: any): WebVideoPlugin
-    p2pMediaLoader (): P2pMediaLoaderPlugin
+    p2pMediaLoader (options?: any): P2pMediaLoaderPlugin
+    hlsjs (options?: any): any
    peertubeResolutions (): PeerTubeResolutionsPlugin
-    contextmenuUI (options: any): any
+    contextmenuUI (options?: any): any
-    bezels (): void
+    bezels (): BezelsPlugin
-    peertubeMobile (): void
+    peertubeMobile (): PeerTubeMobilePlugin
-    peerTubeHotkeysPlugin (options?: HotkeysOptions): void
+    peerTubeHotkeysPlugin (options?: HotkeysOptions): PeerTubeHotkeysPlugin
    stats (options?: StatsCardOptions): StatsForNerdsPlugin
-    textTracks (): TextTrackList & {
+    storyboard (options?: StoryboardOptions): StoryboardPlugin
-      tracks_: (TextTrack & { id: string, label: string, src: string })[]
-    }
-    peertubeDock (options: PeerTubeDockPluginOptions): void
+    peertubeDock (options?: PeerTubeDockPluginOptions): PeerTubeDockPlugin
-    upnext (options: Partial<EndCardOptions>): void
+    upnext (options?: UpNextPluginOptions): UpNextPlugin
-    playlist (): PlaylistPlugin
+    playlist (options?: PlaylistPluginOptions): PlaylistPlugin
  }
 }
@@ -89,33 +96,43 @@ type VideoJSCaption = {
  src: string
 }
+type VideoJSStoryboard = {
+  url: string
+  width: number
+  height: number
+  interval: number
+}
 type PeerTubePluginOptions = {
-  mode: PlayerMode
+  hasAutoplay: () => videojs.Autoplay
-  autoplay: videojs.Autoplay
+  videoViewUrl: () => string
-  videoDuration: number
+  videoViewIntervalMs: number
-  videoViewUrl: string
  authorizationHeader?: () => string
-  subtitle?: string
+  videoDuration: () => number
-  videoCaptions: VideoJSCaption[]
+  startTime: () => number | string
+  stopTime: () => number | string
-  startTime: number | string
-  stopTime: number | string
-  isLive: boolean
+  videoCaptions: () => VideoJSCaption[]
+  isLive: () => boolean
-  videoUUID: string
+  videoUUID: () => string
+  subtitle: () => string
-  videoViewIntervalMs: number
 }
 type MetricsPluginOptions = {
-  mode: PlayerMode
+  mode: () => PlayerMode
-  metricsUrl: string
+  metricsUrl: () => string
-  videoUUID: string
+  videoUUID: () => string
+}
+type StoryboardOptions = {
+  url: string
+  width: number
+  height: number
+  interval: number
 }
 type PlaylistPluginOptions = {
@@ -128,37 +145,36 @@ type PlaylistPluginOptions = {
  onItemClicked: (element: VideoPlaylistElement) => void
 }
+type UpNextPluginOptions = {
+  timeout: number
+  next: () => void
+  getTitle: () => string
+  isDisplayed: () => boolean
+  isSuspended: () => boolean
+}
 type NextPreviousVideoButtonOptions = {
  type: 'next' | 'previous'
-  handler: () => void
+  handler?: () => void
+  isDisplayed: () => boolean
  isDisabled: () => boolean
 }
 type PeerTubeLinkButtonOptions = {
-  shortUUID: string
+  isDisplayed: () => boolean
+  shortUUID: () => string
  instanceName: string
 }
-type PeerTubeP2PInfoButtonOptions = {
+type TheaterButtonOptions = {
-  p2pEnabled: boolean
+  isDisplayed: () => boolean
 }
-type WebtorrentPluginOptions = {
+type WebVideoPluginOptions = {
-  playerElement: HTMLVideoElement
-  autoplay: videojs.Autoplay
-  videoDuration: number
  videoFiles: VideoFile[]
  startTime: number | string
-  playerRefusedP2P: boolean
-  requiresAuth: boolean
  videoFileToken: () => string
-  buildWebSeedUrls: (file: VideoFile) => string[]
 }
 type P2PMediaLoaderPluginOptions = {
@@ -166,16 +182,17 @@ type P2PMediaLoaderPluginOptions = {
  type: string
  src: string
-  startTime: number | string
  loader: P2PMediaLoader
+  segmentValidator: SegmentValidator
-  requiresAuth: boolean
+  requiresUserAuth: boolean
  videoFileToken: () => string
 }
 export type P2PMediaLoader = {
  getEngine(): Engine
+  destroy: () => void
 }
 type VideoJSPluginOptions = {
@@ -184,7 +201,7 @@ type VideoJSPluginOptions = {
  peertube: PeerTubePluginOptions
  metrics: MetricsPluginOptions
-  webtorrent?: WebtorrentPluginOptions
+  webVideo?: WebVideoPluginOptions
  p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
@@ -211,14 +228,14 @@ type AutoResolutionUpdateData = {
 }
 type PlayerNetworkInfo = {
-  source: 'webtorrent' | 'p2p-media-loader'
+  source: 'web-video' | 'p2p-media-loader'
  http: {
-    downloadSpeed: number
+    downloadSpeed?: number
    downloaded: number
  }
-  p2p: {
+  p2p?: {
    downloadSpeed: number
    uploadSpeed: number
    downloaded: number
@@ -227,7 +244,7 @@ type PlayerNetworkInfo = {
  }
  // In bytes
-  bandwidthEstimate: number
+  bandwidthEstimate?: number
 }
 type PlaylistItemOptions = {
@@ -238,6 +255,8 @@ type PlaylistItemOptions = {
 export {
  PlayerNetworkInfo,
+  TheaterButtonOptions,
+  VideoJSStoryboard,
  PlaylistItemOptions,
  NextPreviousVideoButtonOptions,
  ResolutionUpdateData,
@@ -246,11 +265,12 @@ export {
  MetricsPluginOptions,
  VideoJSCaption,
  PeerTubePluginOptions,
-  WebtorrentPluginOptions,
+  WebVideoPluginOptions,
  P2PMediaLoaderPluginOptions,
  PeerTubeResolution,
  VideoJSPluginOptions,
+  UpNextPluginOptions,
  LoadedQualityData,
-  PeerTubeLinkButtonOptions,
+  StoryboardOptions,
-  PeerTubeP2PInfoButtonOptions
+  PeerTubeLinkButtonOptions
 }
diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts
index 9022b908b..4a44615fb 100644
--- a/client/src/root-helpers/video.ts
+++ b/client/src/root-helpers/video.ts
@@ -41,14 +41,21 @@ function isP2PEnabled (video: Video, config: HTMLServerConfig, userP2PEnabled: b
  return userP2PEnabled
 }
-function videoRequiresAuth (video: Video) {
+function videoRequiresUserAuth (video: Video, videoPassword?: string) {
-  return new Set([ VideoPrivacy.PRIVATE, VideoPrivacy.INTERNAL ]).has(video.privacy.id)
+  return new Set([ VideoPrivacy.PRIVATE, VideoPrivacy.INTERNAL ]).has(video.privacy.id) ||
+    (video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED && !videoPassword)
+}
+function videoRequiresFileToken (video: Video, videoPassword?: string) {
+  return new Set([ VideoPrivacy.PRIVATE, VideoPrivacy.INTERNAL, VideoPrivacy.PASSWORD_PROTECTED ]).has(video.privacy.id)
 }
 export {
  buildVideoOrPlaylistEmbed,
  isP2PEnabled,
-  videoRequiresAuth
+  videoRequiresUserAuth,
+  videoRequiresFileToken
 }
 // ---------------------------------------------------------------------------
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 96b3adf66..09a75e2fd 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -12,11 +12,8 @@
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: visibility 0.3s, opacity 0.3s !important;
-  &.control-bar-hidden {
+  > button:not(.vjs-hidden):first-child,
-    display: none !important;
+  > button.vjs-hidden + button:not(.vjs-hidden) {
-  }
-  > button:first-child {
    @include margin-left($first-control-bar-element-margin-left);
  }
@@ -79,6 +76,7 @@
          top: -0.3em;
        }
+        // Only used on mobile
        .vjs-time-tooltip {
          display: none;
        }
@@ -152,7 +150,7 @@
    }
  }
-  .vjs-live-control {
+  .vjs-pt-live-control {
    padding: 5px 7px;
    border-radius: 3px;
    height: fit-content;
@@ -230,6 +228,7 @@
  .vjs-next-video,
  .vjs-previous-video {
    width: $control-bar-button-width - 4px;
+    cursor: pointer;
    &.vjs-disabled {
      cursor: default;
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 5d0307d95..4bfd67a26 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -10,3 +10,4 @@
 @use './playlist';
 @use './stats';
 @use './offline-notification';
+@use './storyboard.scss';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 84d7a00f1..b0019d2c9 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -6,6 +6,31 @@
 /* Special mobile style */
 .video-js.vjs-peertube-skin.vjs-is-mobile {
+  // No hover means we can't display the storyboard/time tooltip on mouse hover
+  // Use the time tooltip in progress control instead
+  .vjs-mouse-display {
+    display: none !important;
+  }
+  .vjs-storyboard-sprite-placeholder {
+    display: none;
+  }
+  .vjs-progress-control .vjs-sliding {
+    .vjs-time-tooltip,
+    .vjs-storyboard-sprite-placeholder {
+      display: block !important;
+      visibility: visible !important;
+    }
+    .vjs-time-tooltip {
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
  .vjs-control-bar {
    .vjs-progress-control .vjs-slider .vjs-play-progress {
      // Always display the circle on mobile
@@ -145,7 +170,8 @@
    }
  }
-  &.vjs-scrubbing {
+  &.vjs-scrubbing,
+  &.vjs-mobile-sliding {
    .vjs-mobile-buttons-overlay {
      display: none;
    }
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 4df8dbaf0..572ae7050 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -84,7 +84,9 @@ body {
  }
  // Do not display poster when video is starting
-  &.vjs-has-autoplay:not(.vjs-has-started) {
+  // Or if we change resolution manually
+  &.vjs-has-autoplay:not(.vjs-has-started),
+  &.vjs-updating-resolution {
    .vjs-poster {
      opacity: 0;
      visibility: hidden;
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index d2346c126..369c827f7 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -75,6 +75,7 @@ $setting-transition-easing: ease-out;
      > .vjs-menu {
        flex: 1;
        min-width: 200px;
+        padding: 5px 0;
      }
      > .vjs-menu,
@@ -90,14 +91,6 @@ $setting-transition-easing: ease-out;
            background-color: rgba(255, 255, 255, 0.2);
          }
-          &:first-child {
-            margin-top: 5px;
-          }
-          &:last-child {
-            margin-bottom: 5px;
-          }
          &.disabled {
            opacity: 0.5;
            cursor: default !important;
diff --git a/client/src/sass/player/storyboard.scss b/client/src/sass/player/storyboard.scss
new file mode 100644
index 000000000..c80d1b59d
--- /dev/null
+++ b/client/src/sass/player/storyboard.scss
@@ -0,0 +1,26 @@
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+// Like the time tooltip
+.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
+  display: none;
+}
+.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
+  display: block;
+  // Ensure that we maintain a font-size of ~10px.
+  font-size: 0.6em;
+  visibility: visible;
+}
+.video-js.vjs-settings-dialog-opened {
+  .vjs-storyboard-sprite-placeholder,
+  .vjs-time-tooltip,
+  .vjs-mouse-display {
+    display: none !important;
+  }
+}
diff --git a/client/src/shims/http.ts b/client/src/shims/http.ts
deleted file mode 100644
index 1b1767aab..000000000
--- a/client/src/shims/http.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-http')
diff --git a/client/src/shims/https.ts b/client/src/shims/https.ts
deleted file mode 100644
index f5ef70430..000000000
--- a/client/src/shims/https.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('https-browserify')
diff --git a/client/src/shims/stream.ts b/client/src/shims/stream.ts
deleted file mode 100644
index 977fd05a0..000000000
--- a/client/src/shims/stream.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-browserify')
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 (this.isWebVideo() && resolutionId === -1) {
-      if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
+      logger.error('Auto resolution cannot be set in web video player mode')
-      this.embed.player.webtorrent().changeQuality(resolutionId)
      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('resolutions-added', () => this.loadResolutions())
-    this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
+    this.embed.player.peertubeResolutions().on('resolutions-changed', () => this.loadResolutions())
    this.loadResolutions()
@@ -193,7 +190,7 @@ export class PeerTubeEmbedApi {
    })
  }
-  private isWebtorrent () {
+  private isWebVideo () {
-    return !!this.embed.player.webtorrent
+    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 {
-import { HTMLServerConfig, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement, VideoState } from '../../../../shared/models'
+  HTMLServerConfig,
-import { PeertubePlayerManager } from '../../assets/player'
+  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
+    const { videoResponse, captionsPromise, storyboardsPromise, forceAutoplay } = options
-    this.resetPlayerElement()
    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)
+        const videoFileToken = videoRequiresFileToken(videoInfo)
-          ? await this.videoFetcher.loadVideoToken(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(),
+      storyboardsResponse,
-      videoFileToken: () => videoFileToken,
-      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
+      videoFileToken: () => videoFileToken,
+      videoPassword: () => this.videoPassword,
+      requiresPassword: this.requiresPassword,
-      playlistTracker: this.playlistTracker,
+      playlist,
-      playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
-      playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
      live,
-      forceAutoplay
+      forceAutoplay,
+      alreadyPlayed: this.alreadyPlayed
    })
+    await this.peertubePlayer.load(loadOptions)
-    this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), playerOptions, (player: videojs.Player) => {
+    if (!this.alreadyInitialized) {
-      this.player = player
+      this.player = this.peertubePlayer.getPlayer();
-    })
-    this.player.on('customError', (event: any, data: any) => {
+      (window as any)['videojsPlayer'] = this.player
-      const message = data?.err?.message || ''
-      if (!message.includes('from xs param')) return
-      this.player.dispose()
+      this.buildCSS()
-      this.playerHTML.removePlayerElement()
+      this.initializeApi()
-      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.playerHTML.removePlaceholder()
+    this.alreadyInitialized = true
-    if (this.isPlaylistEmbed()) {
+    this.player.one('play', () => {
-      await this.buildPlayerPlaylistUpnext()
+      this.alreadyPlayed = true
+    })
-      this.player.playlist().updateSelected()
+    if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
-      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.peertubePlayer.disable()
-        this.disablePlayer()
      } 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()) {
+    if (this.playerOptionsBuilder.hasBigPlayBackgroundColor()) {
-      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
+      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerOptionsBuilder.getBigPlayBackgroundColor())
    }
-    if (this.playerManagerOptions.hasForegroundColor()) {
+    if (this.playerOptionsBuilder.hasForegroundColor()) {
-      body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
+      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 () {
+  private async handlePasswordError (err: PeerTubeServerError) {
-    if (this.player.isFullscreen()) {
+    let incorrectPassword: boolean = null
-      this.player.exitFullscreen()
+    if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
-    }
+    else if (err.serverCode === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) incorrectPassword = true
-    // Disable player
+    if (incorrectPassword === null) return false
-    this.player.hasStarted(false)
-    this.player.removeClass('vjs-has-autoplay')
-    this.player.bigPlayButton.hide();
-    (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 }) {
+  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }, videoPassword?: string) {
-    const refreshFetchOptions = optionalAuth
+    let refreshFetchOptions: { headers?: Headers } = {}
-      ? { headers: this.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) {
+  async askVideoPassword (options: { incorrectPassword: boolean, translations: Translations }): Promise<string> {
-    const placeholder = this.getPlaceholderElement()
+    const { incorrectPassword, translations } = options
+    return new Promise((resolve) => {
-    const url = window.location.origin + video.previewPath
+      this.wrapperElement.style.display = 'none'
-    placeholder.style.backgroundImage = `url("${url}")`
-    placeholder.style.display = 'block'
+      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 () {
+  removeVideoPasswordBlock () {
-    const placeholder = this.getPlaceholderElement()
+    const videoPasswordBlock = document.getElementById('video-password-block')
-    placeholder.style.display = 'none'
+    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
+    videoPassword: () => string
+    requiresPassword: boolean
-    autoplayFromPreviousVideo: boolean
    translations: Translations
-    playlistTracker?: PlaylistTracker
+    playlist?: {
-    playNextPlaylistVideo?: () => any
+      playlistTracker: PlaylistTracker
-    playPreviousPlaylistVideo?: () => any
+      playNext: () => any
-    onVideoUpdate?: (uuid: string) => any
+      playPrevious: () => any
-  }) {
+      onVideoUpdate: (uuid: string) => any
+    }
+  }): Promise<PeerTubePlayerLoadOptions> {
    const {
      video,
      captionsResponse,
-      autoplayFromPreviousVideo,
      videoFileToken,
+      videoPassword,
+      requiresPassword,
      translations,
+      alreadyPlayed,
      forceAutoplay,
-      playlistTracker,
+      playlist,
      live,
-      authorizationHeader,
+      storyboardsResponse
-      serverConfig
    } = options
-    const videoCaptions = await this.buildCaptions(captionsResponse, translations)
+    const [ videoCaptions, storyboard ] = await Promise.all([
+      this.buildCaptions(captionsResponse, translations),
-    const playerOptions: PeertubePlayerManagerOptions = {
+      this.buildStoryboard(storyboardsResponse)
-      common: {
+    ])
-        // Autoplay in playlist mode
-        autoplay: autoplayFromPreviousVideo ? true : this.autoplay,
-        forceAutoplay,
-        controls: this.controls,
+    return {
-        controlBar: this.controlBar,
+      mode: this.mode,
-        muted: this.muted,
-        loop: this.loop,
-        p2pEnabled: this.p2pEnabled,
+      autoplay: forceAutoplay || alreadyPlayed || this.autoplay,
+      forceAutoplay,
-        captions: videoCaptions.length !== 0,
+      p2pEnabled: this.p2pEnabled,
-        subtitle: this.subtitle,
-        startTime: playlistTracker
+      subtitle: this.subtitle,
-          ? playlistTracker.getCurrentElement().startTimestamp
-          : this.startTime,
-        stopTime: playlistTracker
-          ? playlistTracker.getCurrentElement().stopTimestamp
-          : this.stopTime,
-        playbackRate: this.playbackRate,
+      storyboard,
-        videoCaptions,
+      startTime: playlist
-        inactivityTimeout: 2500,
+        ? playlist.playlistTracker.getCurrentElement().startTimestamp
-        videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
+        : this.startTime,
-        videoViewIntervalMs: 5000,
+      stopTime: playlist
-        metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+        ? playlist.playlistTracker.getCurrentElement().stopTimestamp
+        : this.stopTime,
-        videoShortUUID: video.shortUUID,
+      videoCaptions,
-        videoUUID: video.uuid,
+      videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
-        playerElement: this.playerHTML.getPlayerElement(),
+      videoShortUUID: video.shortUUID,
-        onPlayerElementChange: (element: HTMLVideoElement) => {
+      videoUUID: video.uuid,
-          this.playerHTML.setPlayerElement(element)
-        },
-        videoDuration: video.duration,
+      duration: video.duration,
-        enableHotkeys: true,
-        peertubeLink: this.peertubeLink,
+      poster: window.location.origin + video.previewPath,
-        instanceName: serverConfig.instance.name,
-        poster: window.location.origin + video.previewPath,
+      embedUrl: window.location.origin + video.embedPath,
-        theaterButton: false,
+      embedTitle: video.name,
-        serverUrl: window.location.origin,
+      requiresUserAuth: videoRequiresUserAuth(video),
-        language: navigator.language,
+      videoFileToken,
-        embedUrl: window.location.origin + video.embedPath,
-        embedTitle: video.name,
-        requiresAuth: videoRequiresAuth(video),
+      requiresPassword,
-        authorizationHeader,
+      videoPassword,
-        videoFileToken,
-        errorNotifier: () => {
+      ...this.buildLiveOptions(video, live),
-          // Empty, we don't have a notifier in the embed
-        },
-        ...this.buildLiveOptions(video, live),
+      ...this.buildPlaylistOptions(playlist),
-        ...this.buildPlaylistOptions(options)
+      dock: this.buildDockOptions(video),
-      },
-      webtorrent: {
+      webVideo: {
        videoFiles: video.files
      },
-      ...this.buildP2PMediaLoaderOptions(video),
+      hls: this.buildHLSOptions(video)
-      pluginsManager: this.peertubePlugin.getPluginsManager()
    }
-    return playerOptions
  }
  private buildLiveOptions (video: VideoDetails, live: LiveVideo) {
@@ -278,15 +300,39 @@ export class PlayerManagerOptions {
    }
  }
-  private buildPlaylistOptions (options: {
+  private async buildStoryboard (storyboardsResponse: Response) {
-    playlistTracker?: PlaylistTracker
+    const { storyboards } = await storyboardsResponse.json() as { storyboards: Storyboard[] }
-    playNextPlaylistVideo?: () => any
+    if (!storyboards || storyboards.length === 0) return undefined
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
+    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(),
+      previousVideo: {
-      hasNextVideo: () => playlistTracker.hasNextPlaylistElement(),
+        enabled: playlistTracker.hasPreviousPlaylistElement(),
+        handler: () => playPrevious(),
+        displayControlBarButton: true
+      },
-      previousVideo: () => playPreviousPlaylistVideo(),
+      nextVideo: {
-      hasPreviousVideo: () => playlistTracker.hasPreviousPlaylistElement()
+        enabled: playlistTracker.hasNextPlaylistElement(),
+        handler: () => playNext(),
+        getVideoTitle: () => playlistTracker.getNextPlaylistElement()?.video?.name,
+        displayControlBarButton: true
+      },
+      upnext: {
+        isEnabled: () => true,
+        isSuspended: () => false,
+        timeout: 0
+      }
    }
  }
-  private buildP2PMediaLoaderOptions (video: VideoDetails) {
+  private buildHLSOptions (video: VideoDetails): HLSOptions {
-    if (this.mode !== 'p2p-media-loader') return {}
    const hlsPlaylist = video.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+    if (!hlsPlaylist) return undefined
    return {
-      p2pMediaLoader: {
+      playlistUrl: hlsPlaylist.playlistUrl,
-        playlistUrl: hlsPlaylist.playlistUrl,
+      segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+      redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+      trackerAnnounce: video.trackerUrls,
-        trackerAnnounce: video.trackerUrls,
+      videoFiles: hlsPlaylist.files
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
    }
  }
@@ -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) {
+  async loadVideo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }) {
-    const videoPromise = this.loadVideoInfo(videoId)
+    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) {
+  loadVideoToken (video: VideoDetails, videoPassword?: string) {
-    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' })
+    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> {
+  private loadVideoInfo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true })
+    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true }, videoPassword)
  }
-  private loadVideoCaptions (videoId: string): Promise<Response> {
+  private loadVideoCaptions ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true })
+    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 { PeerTubeResolution, PlayerEventType } from '../embed-player-api/definitions'
-import { PeerTubePlayer } from '../player/player'
+import { PeerTubePlayer } from '../embed-player-api/player'
 import { logger } from '../../root-helpers'
 window.addEventListener('load', async () => {
diff --git a/client/src/types/index.ts b/client/src/types/index.ts
index 5508515fd..60564496c 100644
--- a/client/src/types/index.ts
+++ b/client/src/types/index.ts
@@ -1,4 +1,5 @@
 export * from './client-script.model'
+export * from './server-error.model'
 export * from './job-state-client.type'
 export * from './job-type-client.type'
 export * from './link.type'
diff --git a/client/src/types/server-error.model.ts b/client/src/types/server-error.model.ts
new file mode 100644
index 000000000..4a57287fe
--- /dev/null
+++ b/client/src/types/server-error.model.ts
@@ -0,0 +1,11 @@
+import { ServerErrorCode } from '@shared/models/index'
+export class PeerTubeServerError extends Error {
+  serverCode: ServerErrorCode
+  constructor (message: string, serverCode: ServerErrorCode) {
+    super(message)
+    this.name = 'CustomError'
+    this.serverCode = serverCode
+  }
+}