Correctly terminate an ended live

[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed.ts

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 0a2b0ccbde7ae82a789f914757a575e509722405..2b826b9a280df24e8be83fe6e416ef7e4245bb7c 100644 (file)
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,12 +3,12 @@ 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, VideoState } from '../../../../shared/models'
 import { PeertubePlayerManager } from '../../assets/player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
-import { getParamString } 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 { AuthHTTP, LiveManager, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, Translations, VideoFetcher } from './shared'
 import { PlayerHTML } from './shared/player-html'
 
 export class PeerTubeEmbed {
@@ -31,6 +31,8 @@ export class PeerTubeEmbed {
   private playlistTracker: PlaylistTracker
 
   constructor (videoWrapperId: string) {
+    logger.registerServerSending(window.location.origin)
+
     this.http = new AuthHTTP()
 
     this.videoFetcher = new VideoFetcher(this.http)
@@ -43,7 +45,7 @@ export class PeerTubeEmbed {
     try {
       this.config = JSON.parse(window['PeerTubeServerConfig'])
     } catch (err) {
-      console.error('Cannot parse HTML config.', err)
+      logger.error('Cannot parse HTML config.', err)
     }
   }
 
@@ -115,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()
     }
@@ -125,7 +132,7 @@ export class PeerTubeEmbed {
   async playNextPlaylistVideo () {
     const next = this.playlistTracker.getNextPlaylistElement()
     if (!next) {
-      console.log('Next element not found in playlist.')
+      logger.info('Next element not found in playlist.')
       return
     }
 
@@ -137,7 +144,7 @@ export class PeerTubeEmbed {
   async playPreviousPlaylistVideo () {
     const previous = this.playlistTracker.getPreviousPlaylistElement()
     if (!previous) {
-      console.log('Previous element not found in playlist.')
+      logger.info('Previous element not found in playlist.')
       return
     }
 
@@ -165,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,
@@ -196,6 +206,11 @@ export class PeerTubeEmbed {
       captionsResponse,
       alreadyHadPlayer,
       translations,
+      serverConfig: this.config,
+
+      authorizationHeader: () => this.http.getHeaderTokenValue(),
+      videoFileToken: () => videoFileToken,
+
       onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
 
       playlistTracker: this.playlistTracker,
@@ -236,18 +251,25 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
-
     if (video.isLive) {
-      this.liveManager.displayInfoAndListenForChanges({
+      this.liveManager.listenForChanges({
         video,
-        translations,
         onPublishedVideo: () => {
           this.liveManager.stopListeningForChanges(video)
           this.loadVideoAndBuildPlayer(video.uuid)
         }
       })
+
+      if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
+        this.liveManager.displayInfo({ state: video.state.id, translations })
+
+        this.disablePlayer()
+      } else {
+        this.correctlyHandleLiveEnding(translations)
+      }
     }
+
+    this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
   }
 
   private resetPlayerElement () {
@@ -255,6 +277,7 @@ export class PeerTubeEmbed {
 
     if (this.player) {
       this.player.dispose()
+      this.player = undefined
       alreadyHadPlayer = true
     }
 
@@ -335,11 +358,36 @@ export class PeerTubeEmbed {
   private isPlaylistEmbed () {
     return window.location.pathname.split('/')[1] === 'video-playlists'
   }
+
+  // ---------------------------------------------------------------------------
+
+  private correctlyHandleLiveEnding (translations: Translations) {
+    this.player.one('ended', () => {
+      // Display the live ended information
+      this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations })
+
+      this.disablePlayer()
+    })
+  }
+
+  private disablePlayer () {
+    if (this.player.isFullscreen()) {
+      this.player.exitFullscreen()
+    }
+
+    // Disable player
+    this.player.hasStarted(false)
+    this.player.removeClass('vjs-has-autoplay')
+    this.player.bigPlayButton.hide();
+
+    (this.player.el() as HTMLElement).style.pointerEvents = 'none'
+  }
+
 }
 
 PeerTubeEmbed.main()
   .catch(err => {
     (window as any).displayIncompatibleBrowser()
 
-    console.error('Cannot init embed.', err)
+    logger.error('Cannot init embed.', err)
   })