6 files changed, 100 insertions, 35 deletions

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 2124b4711..a99f1edae 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -13,6 +13,12 @@ export class PeerTubeEmbedApi {
   private isReady = false
   private resolutions: PeerTubeResolution[] = []
 
+  private oldVideoElement: HTMLVideoElement
+  private videoElPlayListener: () => void
+  private videoElPauseListener: () => void
+  private videoElEndedListener: () => void
+  private videoElInterval: any
+
   constructor (private readonly embed: PeerTubeEmbed) {
 
   }
@@ -26,6 +32,11 @@ export class PeerTubeEmbedApi {
     this.notifyReady()
   }
 
+  reInit () {
+    this.disposeStateTracking()
+    this.setupStateTracking()
+  }
+
   private get element () {
     return this.embed.getPlayerElement()
   }
@@ -101,7 +112,7 @@ export class PeerTubeEmbedApi {
   private setupStateTracking () {
     let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 
-    setInterval(() => {
+    this.videoElInterval = setInterval(() => {
       const position = this.element.currentTime
       const volume = this.element.volume
 
@@ -116,20 +127,29 @@ export class PeerTubeEmbedApi {
       })
     }, 500)
 
-    this.element.addEventListener('play', ev => {
+    // ---------------------------------------------------------------------------
+
+    this.videoElPlayListener = () => {
       currentState = 'playing'
       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
-    })
+    }
+    this.element.addEventListener('play', this.videoElPlayListener)
 
-    this.element.addEventListener('pause', ev => {
+    this.videoElPauseListener = () => {
       currentState = 'paused'
       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
-    })
+    }
+    this.element.addEventListener('pause', this.videoElPauseListener)
 
-    this.element.addEventListener('ended', ev => {
+    this.videoElEndedListener = () => {
       currentState = 'ended'
       this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
-    })
+    }
+    this.element.addEventListener('ended', this.videoElEndedListener)
+
+    this.oldVideoElement = this.element
+
+    // ---------------------------------------------------------------------------
 
     // PeerTube specific capabilities
     this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
@@ -145,6 +165,18 @@ export class PeerTubeEmbedApi {
     })
   }
 
+  private disposeStateTracking () {
+    if (!this.oldVideoElement) return
+
+    this.oldVideoElement.removeEventListener('play', this.videoElPlayListener)
+    this.oldVideoElement.removeEventListener('pause', this.videoElPauseListener)
+    this.oldVideoElement.removeEventListener('ended', this.videoElEndedListener)
+
+    clearInterval(this.videoElInterval)
+
+    this.oldVideoElement = undefined
+  }
+
   private loadResolutions () {
     this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
       .map(r => ({
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 451e54840..356f149c0 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,10 +3,10 @@ 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, LiveVideo, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement } from '../../../../shared/models'
+import { HTMLServerConfig, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement } from '../../../../shared/models'
 import { PeertubePlayerManager } from '../../assets/player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
-import { getParamString, logger } from '../../root-helpers'
+import { getParamString, logger, videoRequiresAuth } from '../../root-helpers'
 import { PeerTubeEmbedApi } from './embed-api'
 import { AuthHTTP, LiveManager, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, VideoFetcher } from './shared'
 import { PlayerHTML } from './shared/player-html'
@@ -117,6 +117,11 @@ export class PeerTubeEmbed {
 
   private initializeApi () {
     if (this.playerManagerOptions.hasAPIEnabled()) {
+      if (this.api) {
+        this.api.reInit()
+        return
+      }
+
       this.api = new PeerTubeEmbedApi(this)
       this.api.initialize()
     }
@@ -167,22 +172,25 @@ export class PeerTubeEmbed {
   private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
     const alreadyHadPlayer = this.resetPlayerElement()
 
-    const videoInfoPromise: Promise<{ video: VideoDetails, live?: LiveVideo }> = videoResponse.json()
-      .then((videoInfo: VideoDetails) => {
+    const videoInfoPromise = videoResponse.json()
+      .then(async (videoInfo: VideoDetails) => {
         this.playerManagerOptions.loadParams(this.config, videoInfo)
 
         if (!alreadyHadPlayer && !this.playerManagerOptions.hasAutoplay()) {
           this.playerHTML.buildPlaceholder(videoInfo)
         }
+        const live = videoInfo.isLive
+          ? await this.videoFetcher.loadLive(videoInfo)
+          : undefined
 
-        if (!videoInfo.isLive) {
-          return { video: videoInfo }
-        }
+        const videoFileToken = videoRequiresAuth(videoInfo)
+          ? await this.videoFetcher.loadVideoToken(videoInfo)
+          : undefined
 
-        return this.videoFetcher.loadVideoWithLive(videoInfo)
+        return { live, video: videoInfo, videoFileToken }
       })
 
-    const [ { video, live }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
+    const [ { video, live, videoFileToken }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
       videoInfoPromise,
       this.translationsPromise,
       captionsPromise,
@@ -200,6 +208,9 @@ export class PeerTubeEmbed {
       translations,
       serverConfig: this.config,
 
+      authorizationHeader: () => this.http.getHeaderTokenValue(),
+      videoFileToken: () => videoFileToken,
+
       onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
 
       playlistTracker: this.playlistTracker,
diff --git a/client/src/standalone/videos/shared/auth-http.ts b/client/src/standalone/videos/shared/auth-http.ts
index 0356ab8a6..95e3b029e 100644
--- a/client/src/standalone/videos/shared/auth-http.ts
+++ b/client/src/standalone/videos/shared/auth-http.ts
@@ -1,5 +1,5 @@
 import { HttpStatusCode, OAuth2ErrorCode, UserRefreshToken } from '../../../../../shared/models'
-import { objectToUrlEncoded, UserTokens } from '../../../root-helpers'
+import { OAuthUserTokens, objectToUrlEncoded } from '../../../root-helpers'
 import { peertubeLocalStorage } from '../../../root-helpers/peertube-web-storage'
 
 export class AuthHTTP {
@@ -8,30 +8,32 @@ export class AuthHTTP {
     CLIENT_SECRET: 'client_secret'
   }
 
-  private userTokens: UserTokens
+  private userOAuthTokens: OAuthUserTokens
 
   private headers = new Headers()
 
   constructor () {
-    this.userTokens = UserTokens.getUserTokens(peertubeLocalStorage)
+    this.userOAuthTokens = OAuthUserTokens.getUserTokens(peertubeLocalStorage)
 
-    if (this.userTokens) this.setHeadersFromTokens()
+    if (this.userOAuthTokens) this.setHeadersFromTokens()
   }
 
-  fetch (url: string, { optionalAuth }: { optionalAuth: boolean }) {
+  fetch (url: string, { optionalAuth, method }: { optionalAuth: boolean, method?: string }) {
     const refreshFetchOptions = optionalAuth
       ? { headers: this.headers }
       : {}
 
-    return this.refreshFetch(url.toString(), refreshFetchOptions)
+    return this.refreshFetch(url.toString(), { ...refreshFetchOptions, method })
   }
 
   getHeaderTokenValue () {
-    return `${this.userTokens.tokenType} ${this.userTokens.accessToken}`
+    if (!this.userOAuthTokens) return null
+
+    return `${this.userOAuthTokens.tokenType} ${this.userOAuthTokens.accessToken}`
   }
 
   isLoggedIn () {
-    return !!this.userTokens
+    return !!this.userOAuthTokens
   }
 
   private refreshFetch (url: string, options?: RequestInit) {
@@ -47,7 +49,7 @@ export class AuthHTTP {
           headers.set('Content-Type', 'application/x-www-form-urlencoded')
 
           const data = {
-            refresh_token: this.userTokens.refreshToken,
+            refresh_token: this.userOAuthTokens.refreshToken,
             client_id: clientId,
             client_secret: clientSecret,
             response_type: 'code',
@@ -64,15 +66,15 @@ export class AuthHTTP {
             return res.json()
           }).then((obj: UserRefreshToken & { code?: OAuth2ErrorCode }) => {
             if (!obj || obj.code === OAuth2ErrorCode.INVALID_GRANT) {
-              UserTokens.flushLocalStorage(peertubeLocalStorage)
+              OAuthUserTokens.flushLocalStorage(peertubeLocalStorage)
               this.removeTokensFromHeaders()
 
               return resolve()
             }
 
-            this.userTokens.accessToken = obj.access_token
-            this.userTokens.refreshToken = obj.refresh_token
-            UserTokens.saveToLocalStorage(peertubeLocalStorage, this.userTokens)
+            this.userOAuthTokens.accessToken = obj.access_token
+            this.userOAuthTokens.refreshToken = obj.refresh_token
+            OAuthUserTokens.saveToLocalStorage(peertubeLocalStorage, this.userOAuthTokens)
 
             this.setHeadersFromTokens()
 
@@ -84,7 +86,7 @@ export class AuthHTTP {
 
         return refreshingTokenPromise
           .catch(() => {
-            UserTokens.flushLocalStorage(peertubeLocalStorage)
+            OAuthUserTokens.flushLocalStorage(peertubeLocalStorage)
 
             this.removeTokensFromHeaders()
           }).then(() => fetch(url, {
diff --git a/client/src/standalone/videos/shared/peertube-plugin.ts b/client/src/standalone/videos/shared/peertube-plugin.ts
index 968854ce8..daf6f2b03 100644
--- a/client/src/standalone/videos/shared/peertube-plugin.ts
+++ b/client/src/standalone/videos/shared/peertube-plugin.ts
@@ -43,6 +43,7 @@ export class PeerTubePlugin {
     return {
       getBaseStaticRoute: unimplemented,
       getBaseRouterRoute: unimplemented,
+      getBaseWebSocketRoute: unimplemented,
       getBasePluginClientPath: unimplemented,
 
       getSettings: () => {
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts
index eed821994..87a84975b 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-manager-options.ts
@@ -17,7 +17,8 @@ import {
   isP2PEnabled,
   logger,
   peertubeLocalStorage,
-  UserLocalStorageKeys
+  UserLocalStorageKeys,
+  videoRequiresAuth
 } from '../../../root-helpers'
 import { PeerTubePlugin } from './peertube-plugin'
 import { PlayerHTML } from './player-html'
@@ -154,6 +155,9 @@ export class PlayerManagerOptions {
     captionsResponse: Response
     live?: LiveVideo
 
+    authorizationHeader: () => string
+    videoFileToken: () => string
+
     serverConfig: HTMLServerConfig
 
     alreadyHadPlayer: boolean
@@ -169,9 +173,11 @@ export class PlayerManagerOptions {
       video,
       captionsResponse,
       alreadyHadPlayer,
+      videoFileToken,
       translations,
       playlistTracker,
       live,
+      authorizationHeader,
       serverConfig
     } = options
 
@@ -227,6 +233,10 @@ export class PlayerManagerOptions {
         embedUrl: window.location.origin + video.embedPath,
         embedTitle: video.name,
 
+        requiresAuth: videoRequiresAuth(video),
+        authorizationHeader,
+        videoFileToken,
+
         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 b42d622f9..cf6d12831 100644
--- a/client/src/standalone/videos/shared/video-fetcher.ts
+++ b/client/src/standalone/videos/shared/video-fetcher.ts
@@ -1,4 +1,4 @@
-import { HttpStatusCode, LiveVideo, VideoDetails } from '../../../../../shared/models'
+import { HttpStatusCode, LiveVideo, VideoDetails, VideoToken } from '../../../../../shared/models'
 import { logger } from '../../../root-helpers'
 import { AuthHTTP } from './auth-http'
 
@@ -36,10 +36,15 @@ export class VideoFetcher {
     return { captionsPromise, videoResponse }
   }
 
-  loadVideoWithLive (video: VideoDetails) {
+  loadLive (video: VideoDetails) {
     return this.http.fetch(this.getLiveUrl(video.uuid), { optionalAuth: true })
-      .then(res => res.json())
-      .then((live: LiveVideo) => ({ video, live }))
+      .then(res => res.json() as Promise<LiveVideo>)
+  }
+
+  loadVideoToken (video: VideoDetails) {
+    return this.http.fetch(this.getVideoTokenUrl(video.uuid), { optionalAuth: true, method: 'POST' })
+      .then(res => res.json() as Promise<VideoToken>)
+      .then(token => token.files.token)
   }
 
   getVideoViewsUrl (videoUUID: string) {
@@ -61,4 +66,8 @@ export class VideoFetcher {
   private getLiveUrl (videoId: string) {
     return window.location.origin + '/api/v1/videos/live/' + videoId
   }
+
+  private getVideoTokenUrl (id: string) {
+    return this.getVideoUrl(id) + '/token'
+  }
 }