69 files changed, 869 insertions, 532 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
  }