Merge branch 'release/5.0.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / video-watch.component.ts

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 b3818c8dee541261d22f7922f6547193fb72fd7b..84548de97f8b9983e06a8d5b7f92210765946f3c 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -133,8 +133,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.loadRouteParams()
     this.loadRouteQuery()
 
-    this.initHotkeys()
-
     this.theaterEnabled = getStoredTheater()
 
     this.hooks.runAction('action:video-watch.init', 'video-watch')
@@ -180,7 +178,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   onPlaylistVideoFound (videoId: string) {
-    this.loadVideo(videoId)
+    this.loadVideo({ videoId, forceAutoplay: false })
   }
 
   onPlaylistNoVideoFound () {
@@ -212,7 +210,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private loadRouteParams () {
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const videoId = routeParams['videoId']
-      if (videoId) return this.loadVideo(videoId)
+      if (videoId) return this.loadVideo({ videoId, forceAutoplay: false })
 
       const playlistId = routeParams['playlistId']
       if (playlistId) return this.loadPlaylist(playlistId)
@@ -240,7 +238,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     })
   }
 
-  private loadVideo (videoId: string) {
+  private loadVideo (options: {
+    videoId: string
+    forceAutoplay: boolean
+  }) {
+    const { videoId, forceAutoplay } = options
+
     if (this.isSameElement(this.video, videoId)) return
 
     if (this.player) this.player.pause()
@@ -290,11 +293,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           subtitle: queryParams.subtitle,
 
           playerMode: queryParams.mode,
+          playbackRate: queryParams.playbackRate,
           peertubeLink: false
         }
 
-        this.onVideoFetched({ video, live, videoCaptions: captionsResult.data, videoFileToken, loggedInOrAnonymousUser, urlOptions })
-            .catch(err => this.handleGlobalError(err))
+        this.onVideoFetched({
+          video,
+          live,
+          videoCaptions: captionsResult.data,
+          videoFileToken,
+          loggedInOrAnonymousUser,
+          urlOptions,
+          forceAutoplay
+        }).catch(err => this.handleGlobalError(err))
       },
 
       error: err => this.handleRequestError(err)
@@ -370,8 +381,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     urlOptions: URLOptions
     loggedInOrAnonymousUser: User
+    forceAutoplay: boolean
   }) {
-    const { video, live, videoCaptions, urlOptions, videoFileToken, loggedInOrAnonymousUser } = options
+    const { video, live, videoCaptions, urlOptions, videoFileToken, loggedInOrAnonymousUser, forceAutoplay } = options
 
     this.subscribeToLiveEventsIfNeeded(this.video, video)
 
@@ -393,7 +405,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (res === false) return this.location.back()
     }
 
-    this.buildPlayer(urlOptions, loggedInOrAnonymousUser)
+    this.buildHotkeysHelp(video)
+
+    this.buildPlayer({ urlOptions, loggedInOrAnonymousUser, forceAutoplay })
       .catch(err => logger.error('Cannot build the player', err))
 
     this.setOpenGraphTags()
@@ -406,7 +420,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
   }
 
-  private async buildPlayer (urlOptions: URLOptions, loggedInOrAnonymousUser: User) {
+  private async buildPlayer (options: {
+    urlOptions: URLOptions
+    loggedInOrAnonymousUser: User
+    forceAutoplay: boolean
+  }) {
+    const { urlOptions, loggedInOrAnonymousUser, forceAutoplay } = options
+
     // Flush old player if needed
     this.flushPlayer()
 
@@ -430,6 +450,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       videoFileToken: this.videoFileToken,
       urlOptions,
       loggedInOrAnonymousUser,
+      forceAutoplay,
       user: this.user
     }
     const { playerMode, playerOptions } = await this.hooks.wrapFun(
@@ -581,9 +602,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
 
     loggedInOrAnonymousUser: User
+    forceAutoplay: boolean
     user?: AuthUser // Keep for plugins
   }) {
-    const { video, liveVideo, videoCaptions, videoFileToken, urlOptions, loggedInOrAnonymousUser } = params
+    const { video, liveVideo, videoCaptions, videoFileToken, urlOptions, loggedInOrAnonymousUser, forceAutoplay } = params
 
     const getStartTime = () => {
       const byUrl = urlOptions.startTime !== undefined
@@ -615,6 +637,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const options: PeertubePlayerManagerOptions = {
       common: {
         autoplay: this.isAutoplay(),
+        forceAutoplay,
         p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
 
         hasNextVideo: () => this.hasNextVideo(),
@@ -635,6 +658,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         muted: urlOptions.muted,
         loop: urlOptions.loop,
         subtitle: urlOptions.subtitle,
+        playbackRate: urlOptions.playbackRate,
 
         peertubeLink: urlOptions.peertubeLink,
 
@@ -657,7 +681,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           : null,
         authorizationHeader: () => this.authService.getRequestHeaderValue(),
 
-        serverUrl: environment.originServerUrl,
+        serverUrl: environment.originServerUrl || window.location.origin,
 
         videoFileToken: () => videoFileToken,
         requiresAuth: videoRequiresAuth(video),
@@ -749,7 +773,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     // Reset to force refresh the video
     this.video = undefined
-    this.loadVideo(videoUUID)
+    this.loadVideo({ videoId: videoUUID, forceAutoplay: true })
   }
 
   private handleLiveViewsChange (newViewers: number) {
@@ -763,33 +787,43 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.video.viewers = newViewers
   }
 
-  private initHotkeys () {
+  private buildHotkeysHelp (video: Video) {
+    if (this.hotkeys.length !== 0) {
+      this.hotkeysService.remove(this.hotkeys)
+    }
+
     this.hotkeys = [
       // These hotkeys are managed by the player
       new Hotkey('f', e => e, undefined, $localize`Enter/exit fullscreen`),
       new Hotkey('space', e => e, undefined, $localize`Play/Pause the video`),
       new Hotkey('m', e => e, undefined, $localize`Mute/unmute the video`),
 
-      new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
-
       new Hotkey('up', e => e, undefined, $localize`Increase the volume`),
       new Hotkey('down', e => e, undefined, $localize`Decrease the volume`),
 
-      new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
-      new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
-
-      new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
-      new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
-
-      new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
-      new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`),
-
       new Hotkey('t', e => {
         this.theaterEnabled = !this.theaterEnabled
         return false
       }, undefined, $localize`Toggle theater mode`)
     ]
 
+    if (!video.isLive) {
+      this.hotkeys = this.hotkeys.concat([
+        // These hotkeys are also managed by the player but only for VOD
+
+        new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
+
+        new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
+        new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
+
+        new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
+        new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
+
+        new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
+        new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`)
+      ])
+    }
+
     if (this.isUserLoggedIn()) {
       this.hotkeys = this.hotkeys.concat([
         new Hotkey('shift+s', () => {