X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fstandalone%2Fvideos%2Fembed.ts;h=cc4274b99810792a1cb950504067ce71d850787a;hb=54909304287f3c04dcfb39660be8ead57dc95440;hp=356f149c0de491f8aacaed47cec87d19228ec76d;hpb=2f061e065ab43cc0b73595b619639a92952aeeba;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 356f149c0..cc4274b99 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,12 +3,21 @@ 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 } 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, 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 {
@@ -43,7 +52,7 @@ export class PeerTubeEmbed {
     this.liveManager = new LiveManager(this.playerHTML)
 
     try {
-      this.config = JSON.parse(window['PeerTubeServerConfig'])
+      this.config = JSON.parse((window as any)['PeerTubeServerConfig'])
     } catch (err) {
       logger.error('Cannot parse HTML config.', err)
     }
@@ -81,7 +90,7 @@ export class PeerTubeEmbed {
 
     if (!videoId) return
 
-    return this.loadVideoAndBuildPlayer(videoId)
+    return this.loadVideoAndBuildPlayer({ uuid: videoId, autoplayFromPreviousVideo: false, forceAutoplay: false })
   }
 
   private async initPlaylist () {
@@ -138,7 +147,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(next)
 
-    return this.loadVideoAndBuildPlayer(next.video.uuid)
+    return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
   }
 
   async playPreviousPlaylistVideo () {
@@ -150,7 +159,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(previous)
 
-    await this.loadVideoAndBuildPlayer(previous.video.uuid)
+    await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
   }
 
   getCurrentPlaylistPosition () {
@@ -159,24 +168,37 @@ export class PeerTubeEmbed {
 
   // ---------------------------------------------------------------------------
 
-  private async loadVideoAndBuildPlayer (uuid: string) {
+  private async loadVideoAndBuildPlayer (options: {
+    uuid: string
+    autoplayFromPreviousVideo: boolean
+    forceAutoplay: boolean
+  }) {
+    const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
+
     try {
       const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
 
-      return this.buildVideoPlayer(videoResponse, captionsPromise)
+      return this.buildVideoPlayer({ videoResponse, captionsPromise, autoplayFromPreviousVideo, forceAutoplay })
     } catch (err) {
       this.playerHTML.displayError(err.message, await this.translationsPromise)
     }
   }
 
-  private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
-    const alreadyHadPlayer = this.resetPlayerElement()
+  private async buildVideoPlayer (options: {
+    videoResponse: Response
+    captionsPromise: Promise<Response>
+    autoplayFromPreviousVideo: boolean
+    forceAutoplay: boolean
+  }) {
+    const { videoResponse, captionsPromise, autoplayFromPreviousVideo, forceAutoplay } = options
+
+    this.resetPlayerElement()
 
     const videoInfoPromise = videoResponse.json()
       .then(async (videoInfo: VideoDetails) => {
         this.playerManagerOptions.loadParams(this.config, videoInfo)
 
-        if (!alreadyHadPlayer && !this.playerManagerOptions.hasAutoplay()) {
+        if (!autoplayFromPreviousVideo && !this.playerManagerOptions.hasAutoplay()) {
           this.playerHTML.buildPlaceholder(videoInfo)
         }
         const live = videoInfo.isLive
@@ -201,26 +223,27 @@ export class PeerTubeEmbed {
 
     const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
 
-    const options = await this.playerManagerOptions.getPlayerOptions({
+    const playerOptions = await this.playerManagerOptions.getPlayerOptions({
       video,
       captionsResponse,
-      alreadyHadPlayer,
+      autoplayFromPreviousVideo,
       translations,
       serverConfig: this.config,
 
       authorizationHeader: () => this.http.getHeaderTokenValue(),
       videoFileToken: () => videoFileToken,
 
-      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
+      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
 
       playlistTracker: this.playlistTracker,
       playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
       playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
 
-      live
+      live,
+      forceAutoplay
     })
 
-    this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), options, (player: videojs.Player) => {
+    this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), playerOptions, (player: videojs.Player) => {
       this.player = player
     })
 
@@ -231,9 +254,9 @@ export class PeerTubeEmbed {
       this.player.dispose()
       this.playerHTML.removePlayerElement()
       this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
-    })
+    });
 
-    window['videojsPlayer'] = this.player
+    (window as any)['videojsPlayer'] = this.player
 
     this.buildCSS()
     this.buildPlayerDock(video)
@@ -251,27 +274,31 @@ 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)
+          this.loadVideoAndBuildPlayer({ uuid: video.uuid, autoplayFromPreviousVideo: false, forceAutoplay: true })
         }
       })
+
+      if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
+        this.liveManager.displayInfo({ state: video.state.id, translations })
+
+        this.disablePlayer()
+      } else {
+        this.correctlyHandleLiveEnding(translations)
+      }
     }
+
+    this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
   }
 
   private resetPlayerElement () {
-    let alreadyHadPlayer = false
-
     if (this.player) {
       this.player.dispose()
       this.player = undefined
-      alreadyHadPlayer = true
     }
 
     const playerElement = document.createElement('video')
@@ -280,8 +307,6 @@ export class PeerTubeEmbed {
 
     this.playerHTML.setPlayerElement(playerElement)
     this.playerHTML.addPlayerElementToDOM()
-
-    return alreadyHadPlayer
   }
 
   private async buildPlayerPlaylistUpnext () {
@@ -351,6 +376,31 @@ 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()