add loop setting for playlists, and use sessionStorage

[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 523865feffc3299ea637dfa9e06f6d706c1bd85e..aaaa63d4da66b1dd55e7907d0c062c1e17f89541 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -2,7 +2,7 @@ import { catchError } from 'rxjs/operators'
 import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { MetaService } from '@ngx-meta/core'
 import { AuthUser, Notifier, ServerService } from '@app/core'
@@ -37,6 +37,7 @@ import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PlatformLocation } from '@angular/common'
 import { randomInt } from '@shared/core-utils/miscs/miscs'
+import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component'
 
 @Component({
   selector: 'my-video-watch',
@@ -69,7 +70,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   likesBarTooltipText = ''
   hasAlreadyAcceptedPrivacyConcern = false
   remoteServerDown = false
-  hotkeys: Hotkey[]
+  hotkeys: Hotkey[] = []
 
   private nextVideoUuid = ''
   private currentTime: number
@@ -147,7 +148,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
 
     // Unbind hotkeys
-    if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
+    this.hotkeysService.remove(this.hotkeys)
   }
 
   setLike () {
@@ -418,6 +419,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const { playerMode, playerOptions } = await this.hooks.wrapFun(
       this.buildPlayerManagerOptions.bind(this),
       params,
+      'video-watch',
+      'filter:internal.video-watch.player.build-options.params',
       'filter:internal.video-watch.player.build-options.result'
     )
 
@@ -433,15 +436,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.player.one('ended', () => {
         if (this.playlist) {
-          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-        } else if (this.user && this.user.autoPlayNextVideo) {
+          if (
+            this.user && this.user.autoPlayNextVideoPlaylist ||
+            peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+          ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+        } else if (
+          this.user && this.user.autoPlayNextVideo ||
+          peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+        ) {
           this.zone.run(() => this.autoplayNext())
         }
       })
 
       this.player.one('stopped', () => {
         if (this.playlist) {
-          this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+          if (
+            this.user && this.user.autoPlayNextVideoPlaylist ||
+            peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+          ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
         }
       })
 
@@ -549,26 +561,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
   }
 
-  private initHotkeys () {
-    this.hotkeys = [
-      new Hotkey('shift+l', () => {
-        this.setLike()
-        return false
-      }, undefined, this.i18n('Like the video')),
-
-      new Hotkey('shift+d', () => {
-        this.setDislike()
-        return false
-      }, undefined, this.i18n('Dislike the video')),
-
-      new Hotkey('shift+s', () => {
-        this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
-        return false
-      }, undefined, this.i18n('Subscribe to the account'))
-    ]
-    if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
-  }
-
   private buildPlayerManagerOptions (params: {
     video: VideoDetails,
     videoCaptions: VideoCaption[],
@@ -577,7 +569,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }) {
     const { video, videoCaptions, urlOptions, user } = params
 
-    let startTime = timeToInt(urlOptions.startTime) || (video.userHistory ? video.userHistory.currentTime : 0)
+    let startTime = timeToInt(urlOptions.startTime) || (video.userHistory && !this.playlist ? video.userHistory.currentTime : 0)
     // If we are at the end of the video, reset the timer
     if (video.duration - startTime <= 1) startTime = 0
 
@@ -665,4 +657,47 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.player.pause()
   }
+
+  private initHotkeys () {
+    this.hotkeys = [
+      // These hotkeys are managed by the player
+      new Hotkey('f', e => e, undefined, this.i18n('Enter/exit fullscreen (requires player focus)')),
+      new Hotkey('space', e => e, undefined, this.i18n('Play/Pause the video (requires player focus)')),
+      new Hotkey('m', e => e, undefined, this.i18n('Mute/unmute the video (requires player focus)')),
+
+      new Hotkey('0-9', e => e, undefined, this.i18n('Skip to a percentage of the video: 0 is 0% and 9 is 90% (requires player focus)')),
+
+      new Hotkey('up', e => e, undefined, this.i18n('Increase the volume (requires player focus)')),
+      new Hotkey('down', e => e, undefined, this.i18n('Decrease the volume (requires player focus)')),
+
+      new Hotkey('right', e => e, undefined, this.i18n('Seek the video forward (requires player focus)')),
+      new Hotkey('left', e => e, undefined, this.i18n('Seek the video backward (requires player focus)')),
+
+      new Hotkey('>', e => e, undefined, this.i18n('Increase playback rate (requires player focus)')),
+      new Hotkey('<', e => e, undefined, this.i18n('Decrease playback rate (requires player focus)')),
+
+      new Hotkey('.', e => e, undefined, this.i18n('Navigate in the video frame by frame (requires player focus)'))
+    ]
+
+    if (this.isUserLoggedIn()) {
+      this.hotkeys = this.hotkeys.concat([
+        new Hotkey('shift+l', () => {
+          this.setLike()
+          return false
+        }, undefined, this.i18n('Like the video')),
+
+        new Hotkey('shift+d', () => {
+          this.setDislike()
+          return false
+        }, undefined, this.i18n('Dislike the video')),
+
+        new Hotkey('shift+s', () => {
+          this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
+          return false
+        }, undefined, this.i18n('Subscribe to the account'))
+      ])
+    }
+
+    this.hotkeysService.add(this.hotkeys)
+  }
 }