add loop toggle to the player contextmenu

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / peertube-player-manager.ts

diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index fcf0d0f4158eb42c573c5523d1635c1167386f63..018845a54c85fecfb3da850273ec86d8dfdeea1b 100644 (file)
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,6 +1,6 @@
 import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
-import 'videojs-contextmenu-ui'
+import 'videojs-contextmenu-pt'
 import 'videojs-contrib-quality-levels'
 import './upnext/end-card'
 import './upnext/upnext-plugin'
@@ -98,6 +98,7 @@ export interface CommonOptions extends CustomizationOptions {
 
   videoViewUrl: string
   embedUrl: string
+  embedTitle: string
 
   isLive: boolean
 
@@ -105,6 +106,8 @@ export interface CommonOptions extends CustomizationOptions {
 
   videoCaptions: VideoJSCaption[]
 
+  videoUUID: string
+
   userWatching?: UserWatching
 
   serverUrl: string
@@ -119,7 +122,6 @@ export type PeertubePlayerManagerOptions = {
 export class PeertubePlayerManager {
   private static playerElementClassName: string
   private static onPlayerChange: (player: videojs.Player) => void
-
   private static alreadyPlayed = false
 
   static initState () {
@@ -165,7 +167,7 @@ export class PeertubePlayerManager {
           PeertubePlayerManager.alreadyPlayed = true
         })
 
-        self.addContextMenu(mode, player, options.common.embedUrl)
+        self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
 
         player.bezels()
 
@@ -203,7 +205,7 @@ export class PeertubePlayerManager {
     videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
       const player = this
 
-      self.addContextMenu(mode, player, options.common.embedUrl)
+      self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
 
       PeertubePlayerManager.onPlayerChange(player)
     })
@@ -230,7 +232,8 @@ export class PeertubePlayerManager {
         subtitle: commonOptions.subtitle,
         videoCaptions: commonOptions.videoCaptions,
         stopTime: commonOptions.stopTime,
-        isLive: commonOptions.isLive
+        isLive: commonOptions.isLive,
+        videoUUID: commonOptions.videoUUID
       }
     }
 
@@ -271,7 +274,7 @@ export class PeertubePlayerManager {
 
       poster: commonOptions.poster,
       inactivityTimeout: commonOptions.inactivityTimeout,
-      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
+      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
 
       plugins,
 
@@ -492,41 +495,56 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
-    const content = [
-      {
-        label: player.localize('Copy the video URL'),
-        listener: function () {
-          copyToClipboard(buildVideoLink())
-        }
-      },
-      {
-        label: player.localize('Copy the video URL at the current time'),
-        listener: function (this: videojs.Player) {
-          copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
-        }
-      },
-      {
-        label: player.localize('Copy embed code'),
-        listener: () => {
-          copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl))
+  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string, videoEmbedTitle: string) {
+    const content = () => {
+      const isLoopEnabled = player.options_['loop']
+      const items = [
+        {
+          label: isLoopEnabled ? player.localize('Stop playing in loop') : player.localize('Play in loop'),
+          listener: function () {
+            player.options_['loop'] = !isLoopEnabled
+          }
+        },
+        {
+          label: player.localize('Copy the video URL'),
+          listener: function () {
+            copyToClipboard(buildVideoLink())
+          }
+        },
+        {
+          label: player.localize('Copy the video URL at the current time'),
+          listener: function (this: videojs.Player) {
+            copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
+          }
+        },
+        {
+          label: player.localize('Copy embed code'),
+          listener: () => {
+            copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle))
+          }
         }
+      ]
+
+      if (mode === 'webtorrent') {
+        items.push({
+          label: player.localize('Copy magnet URI'),
+          listener: function (this: videojs.Player) {
+            copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
+          }
+        })
       }
-    ]
 
-    if (mode === 'webtorrent') {
-      content.push({
-        label: player.localize('Copy magnet URI'),
-        listener: function (this: videojs.Player) {
-          copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
-        }
-      })
+      return items
     }
 
+    // adding the menu
     player.contextmenuUI({ content })
   }
 
   private static addHotkeysOptions (plugins: VideoJSPluginOptions) {
+    const isNaked = (event: KeyboardEvent, key: string) =>
+      (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && event.key === key)
+
     Object.assign(plugins, {
       hotkeys: {
         skipInitialFocus: true,
@@ -540,28 +558,23 @@ export class PeertubePlayerManager {
         enableVolumeScroll: false,
         enableModifiersForNumbers: false,
 
-        fullscreenKey: function (event: KeyboardEvent) {
-          // fullscreen with the f key or Ctrl+Enter
-          return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
+        rewindKey: function (event: KeyboardEvent) {
+          return isNaked(event, 'ArrowLeft')
         },
 
-        seekStep: function (event: KeyboardEvent) {
-          // mimic VLC seek behavior, and default to 5 (original value is 5).
-          if (event.ctrlKey && event.altKey) {
-            return 5 * 60
-          } else if (event.ctrlKey) {
-            return 60
-          } else if (event.altKey) {
-            return 10
-          } else {
-            return 5
-          }
+        forwardKey: function (event: KeyboardEvent) {
+          return isNaked(event, 'ArrowRight')
+        },
+
+        fullscreenKey: function (event: KeyboardEvent) {
+          // fullscreen with the f key or Ctrl+Enter
+          return isNaked(event, 'f') || (!event.altKey && event.ctrlKey && event.key === 'Enter')
         },
 
         customKeys: {
           increasePlaybackRateKey: {
             key: function (event: KeyboardEvent) {
-              return event.key === '>'
+              return isNaked(event, '>')
             },
             handler: function (player: videojs.Player) {
               const newValue = Math.min(player.playbackRate() + 0.1, 5)
@@ -570,7 +583,7 @@ export class PeertubePlayerManager {
           },
           decreasePlaybackRateKey: {
             key: function (event: KeyboardEvent) {
-              return event.key === '<'
+              return isNaked(event, '<')
             },
             handler: function (player: videojs.Player) {
               const newValue = Math.max(player.playbackRate() - 0.1, 0.10)
@@ -579,7 +592,7 @@ export class PeertubePlayerManager {
           },
           frameByFrame: {
             key: function (event: KeyboardEvent) {
-              return event.key === '.'
+              return isNaked(event, '.')
             },
             handler: function (player: videojs.Player) {
               player.pause()