7 files changed, 178 insertions, 24 deletions

diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index 32bf5f655..a74bb4cee 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -41,6 +41,23 @@
       <div id="error-content"></div>
     </div>
 
+    <div id="video-password-block">
+      <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
+      <h1 id="video-password-title"></h1>
+      
+      <div id="video-password-content"></div>
+      
+      <form id="video-password-form">
+        <input type="password" id="video-password-input" name="video-password" required>
+        <button type="submit" id="video-password-submit"> </button>
+      </form>
+
+      <div id="video-password-error"></div>
+      <svg xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" viewBox="0 0 24 24">
+        <g fill="none" stroke="#c4c4c4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>
+      </svg>
+    </div>
+
     <div id="video-wrapper"></div>
 
     <div id="placeholder-preview"></div>
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 3631ea7e6..d15887478 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -24,7 +24,7 @@ html,
 body {
   height: 100%;
   margin: 0;
-  background-color: #000;
+  background-color: #0f0f10;
 }
 
 #video-wrapper {
@@ -42,8 +42,10 @@ body {
   }
 }
 
-#error-block {
+#error-block,
+#video-password-block {
   display: none;
+  user-select: none;
 
   flex-direction: column;
   align-content: center;
@@ -86,6 +88,43 @@ body {
   text-align: center;
 }
 
+#video-password-content {
+  @include margin(1rem, 0, 2rem);
+}
+
+#video-password-input,
+#video-password-submit {
+  line-height: 23px;
+  padding: 1rem;
+  margin: 1rem 0.5rem;
+  border: 0;
+  font-weight: 600;
+  border-radius: 3px!important;
+  font-size: 18px;
+  display: inline-block;
+}
+
+#video-password-submit {
+  color: #fff;
+  background-color: #f2690d;
+  cursor: pointer;
+}
+
+#video-password-submit:hover {
+  background-color: #f47825;
+}
+#video-password-error {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 2rem;
+  font-weight: bolder;
+}
+
+#video-password-block svg {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media screen and (max-width: 300px) {
   #error-block {
     font-size: 36px;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index cc4274b99..cffda2cc7 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,10 +3,18 @@ import '../../assets/player/shared/dock/peertube-dock-component'
 import '../../assets/player/shared/dock/peertube-dock-plugin'
 import videojs from 'video.js'
 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
-import { HTMLServerConfig, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement, VideoState } from '../../../../shared/models'
+import {
+  HTMLServerConfig,
+  ResultList,
+  ServerErrorCode,
+  VideoDetails,
+  VideoPlaylist,
+  VideoPlaylistElement,
+  VideoState
+} from '../../../../shared/models'
 import { PeertubePlayerManager } from '../../assets/player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
-import { getParamString, logger, videoRequiresAuth } from '../../root-helpers'
+import { getParamString, logger, videoRequiresFileToken } from '../../root-helpers'
 import { PeerTubeEmbedApi } from './embed-api'
 import {
   AuthHTTP,
@@ -19,6 +27,7 @@ import {
   VideoFetcher
 } from './shared'
 import { PlayerHTML } from './shared/player-html'
+import { PeerTubeServerError } from 'src/types'
 
 export class PeerTubeEmbed {
   player: videojs.Player
@@ -38,6 +47,8 @@ export class PeerTubeEmbed {
   private readonly liveManager: LiveManager
 
   private playlistTracker: PlaylistTracker
+  private videoPassword: string
+  private requiresPassword: boolean
 
   constructor (videoWrapperId: string) {
     logger.registerServerSending(window.location.origin)
@@ -50,6 +61,7 @@ export class PeerTubeEmbed {
     this.playerHTML = new PlayerHTML(videoWrapperId)
     this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
     this.liveManager = new LiveManager(this.playerHTML)
+    this.requiresPassword = false
 
     try {
       this.config = JSON.parse((window as any)['PeerTubeServerConfig'])
@@ -176,11 +188,13 @@ export class PeerTubeEmbed {
     const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
 
     try {
-      const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
+      const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
 
       return this.buildVideoPlayer({ videoResponse, captionsPromise, autoplayFromPreviousVideo, forceAutoplay })
     } catch (err) {
-      this.playerHTML.displayError(err.message, await this.translationsPromise)
+
+      if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
+      else this.playerHTML.displayError(err.message, await this.translationsPromise)
     }
   }
 
@@ -205,8 +219,8 @@ export class PeerTubeEmbed {
           ? await this.videoFetcher.loadLive(videoInfo)
           : undefined
 
-        const videoFileToken = videoRequiresAuth(videoInfo)
-          ? await this.videoFetcher.loadVideoToken(videoInfo)
+        const videoFileToken = videoRequiresFileToken(videoInfo)
+          ? await this.videoFetcher.loadVideoToken(videoInfo, this.videoPassword)
           : undefined
 
         return { live, video: videoInfo, videoFileToken }
@@ -232,6 +246,8 @@ export class PeerTubeEmbed {
 
       authorizationHeader: () => this.http.getHeaderTokenValue(),
       videoFileToken: () => videoFileToken,
+      videoPassword: () => this.videoPassword,
+      requiresPassword: this.requiresPassword,
 
       onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
 
@@ -263,6 +279,7 @@ export class PeerTubeEmbed {
     this.initializeApi()
 
     this.playerHTML.removePlaceholder()
+    if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
 
     if (this.isPlaylistEmbed()) {
       await this.buildPlayerPlaylistUpnext()
@@ -401,6 +418,21 @@ export class PeerTubeEmbed {
     (this.player.el() as HTMLElement).style.pointerEvents = 'none'
   }
 
+  private async handlePasswordError (err: PeerTubeServerError) {
+    let incorrectPassword: boolean = null
+    if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
+    else if (err.serverCode === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) incorrectPassword = true
+
+    if (incorrectPassword === null) return false
+
+    this.requiresPassword = true
+    this.videoPassword = await this.playerHTML.askVideoPassword({
+      incorrectPassword,
+      translations: await this.translationsPromise
+    })
+    return true
+  }
+
 }
 
 PeerTubeEmbed.main()
diff --git a/client/src/standalone/videos/shared/auth-http.ts b/client/src/standalone/videos/shared/auth-http.ts
index 95e3b029e..c1e9f7750 100644
--- a/client/src/standalone/videos/shared/auth-http.ts
+++ b/client/src/standalone/videos/shared/auth-http.ts
@@ -18,10 +18,12 @@ export class AuthHTTP {
     if (this.userOAuthTokens) this.setHeadersFromTokens()
   }
 
-  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }) {
-    const refreshFetchOptions = optionalAuth
-      ? { headers: this.headers }
-      : {}
+  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }, videoPassword?: string) {
+    let refreshFetchOptions: { headers?: Headers } = {}
+
+    if (videoPassword) this.headers.set('x-peertube-video-password', videoPassword)
+
+    if (videoPassword || optionalAuth) refreshFetchOptions = { headers: this.headers }
 
     return this.refreshFetch(url.toString(), { ...refreshFetchOptions, method })
   }
diff --git a/client/src/standalone/videos/shared/player-html.ts b/client/src/standalone/videos/shared/player-html.ts
index d93678c10..a0846d9d7 100644
--- a/client/src/standalone/videos/shared/player-html.ts
+++ b/client/src/standalone/videos/shared/player-html.ts
@@ -55,6 +55,58 @@ export class PlayerHTML {
     this.wrapperElement.style.display = 'none'
   }
 
+  async askVideoPassword (options: { incorrectPassword: boolean, translations: Translations }): Promise<string> {
+    const { incorrectPassword, translations } = options
+    return new Promise((resolve) => {
+
+      this.removePlaceholder()
+      this.wrapperElement.style.display = 'none'
+
+      const translatedTitle = peertubeTranslate('This video is password protected', translations)
+      const translatedMessage = peertubeTranslate('You need a password to watch this video.', translations)
+
+      document.title = translatedTitle
+
+      const videoPasswordBlock = document.getElementById('video-password-block')
+      videoPasswordBlock.style.display = 'flex'
+
+      const videoPasswordTitle = document.getElementById('video-password-title')
+      videoPasswordTitle.innerHTML = translatedTitle
+
+      const videoPasswordMessage = document.getElementById('video-password-content')
+      videoPasswordMessage.innerHTML = translatedMessage
+
+      if (incorrectPassword) {
+        const videoPasswordError = document.getElementById('video-password-error')
+        videoPasswordError.innerHTML = peertubeTranslate('Incorrect password, please enter a correct password', translations)
+        videoPasswordError.style.transform = 'scale(1.2)'
+
+        setTimeout(() => {
+          videoPasswordError.style.transform = 'scale(1)'
+        }, 500)
+      }
+
+      const videoPasswordSubmitButton = document.getElementById('video-password-submit')
+      videoPasswordSubmitButton.innerHTML = peertubeTranslate('Watch Video', translations)
+
+      const videoPasswordInput = document.getElementById('video-password-input') as HTMLInputElement
+      videoPasswordInput.placeholder = peertubeTranslate('Password', translations)
+
+      const videoPasswordForm = document.getElementById('video-password-form')
+      videoPasswordForm.addEventListener('submit', (event) => {
+        event.preventDefault()
+        const videoPassword = videoPasswordInput.value
+        resolve(videoPassword)
+      })
+    })
+  }
+
+  removeVideoPasswordBlock () {
+    const videoPasswordBlock = document.getElementById('video-password-block')
+    videoPasswordBlock.style.display = 'none'
+    this.wrapperElement.style.display = 'block'
+  }
+
   buildPlaceholder (video: VideoDetails) {
     const placeholder = this.getPlaceholderElement()
 
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts
index 43ae22a3b..587516410 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-manager-options.ts
@@ -18,7 +18,7 @@ import {
   logger,
   peertubeLocalStorage,
   UserLocalStorageKeys,
-  videoRequiresAuth
+  videoRequiresUserAuth
 } from '../../../root-helpers'
 import { PeerTubePlugin } from './peertube-plugin'
 import { PlayerHTML } from './player-html'
@@ -162,6 +162,9 @@ export class PlayerManagerOptions {
     authorizationHeader: () => string
     videoFileToken: () => string
 
+    videoPassword: () => string
+    requiresPassword: boolean
+
     serverConfig: HTMLServerConfig
 
     autoplayFromPreviousVideo: boolean
@@ -178,6 +181,8 @@ export class PlayerManagerOptions {
       captionsResponse,
       autoplayFromPreviousVideo,
       videoFileToken,
+      videoPassword,
+      requiresPassword,
       translations,
       forceAutoplay,
       playlistTracker,
@@ -242,10 +247,13 @@ export class PlayerManagerOptions {
         embedUrl: window.location.origin + video.embedPath,
         embedTitle: video.name,
 
-        requiresAuth: videoRequiresAuth(video),
+        requiresUserAuth: videoRequiresUserAuth(video),
         authorizationHeader,
         videoFileToken,
 
+        requiresPassword,
+        videoPassword,
+
         errorNotifier: () => {
           // Empty, we don't have a notifier in the embed
         },
diff --git a/client/src/standalone/videos/shared/video-fetcher.ts b/client/src/standalone/videos/shared/video-fetcher.ts
index cf6d12831..76ba0a3ed 100644
--- a/client/src/standalone/videos/shared/video-fetcher.ts
+++ b/client/src/standalone/videos/shared/video-fetcher.ts
@@ -1,3 +1,4 @@
+import { PeerTubeServerError } from '../../../types'
 import { HttpStatusCode, LiveVideo, VideoDetails, VideoToken } from '../../../../../shared/models'
 import { logger } from '../../../root-helpers'
 import { AuthHTTP } from './auth-http'
@@ -8,8 +9,8 @@ export class VideoFetcher {
 
   }
 
-  async loadVideo (videoId: string) {
-    const videoPromise = this.loadVideoInfo(videoId)
+  async loadVideo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }) {
+    const videoPromise = this.loadVideoInfo({ videoId, videoPassword })
 
     let videoResponse: Response
     let isResponseOk: boolean
@@ -27,11 +28,14 @@ export class VideoFetcher {
       if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
         throw new Error('This video does not exist.')
       }
-
+      if (videoResponse?.status === HttpStatusCode.FORBIDDEN_403) {
+        const res = await videoResponse.json()
+        throw new PeerTubeServerError(res.message, res.code)
+      }
       throw new Error('We cannot fetch the video. Please try again later.')
     }
 
-    const captionsPromise = this.loadVideoCaptions(videoId)
+    const captionsPromise = this.loadVideoCaptions({ videoId, videoPassword })
 
     return { captionsPromise, videoResponse }
   }
@@ -41,8 +45,8 @@ export class VideoFetcher {
       .then(res => res.json() as Promise<LiveVideo>)
   }
 
-  loadVideoToken (video: VideoDetails) {
-    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' })
+  loadVideoToken (video: VideoDetails, videoPassword?: string) {
+    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' }, videoPassword)
       .then(res => res.json() as Promise<VideoToken>)
       .then(token => token.files.token)
   }
@@ -51,12 +55,12 @@ export class VideoFetcher {
     return this.getVideoUrl(videoUUID) + '/views'
   }
 
-  private loadVideoInfo (videoId: string): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true })
+  private loadVideoInfo ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
+    return this.http.fetch(this.getVideoUrl(videoId), { optionalAuth: true }, videoPassword)
   }
 
-  private loadVideoCaptions (videoId: string): Promise<Response> {
-    return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true })
+  private loadVideoCaptions ({ videoId, videoPassword }: { videoId: string, videoPassword?: string }): Promise<Response> {
+    return this.http.fetch(this.getVideoUrl(videoId) + '/captions', { optionalAuth: true }, videoPassword)
   }
 
   private getVideoUrl (id: string) {