Fix player captions menu

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

diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 92ac57cf5020fe8dd6242c81939f93ac5f22d812..9824c43b54143b891937134b02fc908b2437bca8 100644 (file)
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -22,7 +22,6 @@ import {
 
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
-  private readonly startTime: number = 0
   private readonly videoViewUrl: string
   private readonly videoDuration: number
   private readonly CONSTANTS = {
@@ -35,17 +34,21 @@ class PeerTubePlugin extends Plugin {
 
   private videoViewInterval: any
   private userWatchingVideoInterval: any
-  private qualityObservationTimer: any
   private lastResolutionChange: ResolutionUpdateData
 
+  private menuOpened = false
+  private mouseInControlBar = false
+  private readonly savedInactivityTimeout: number
+
   constructor (player: videojs.Player, options: PeerTubePluginOptions) {
     super(player, options)
 
-    this.startTime = timeToInt(options.startTime)
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
     this.videoCaptions = options.videoCaptions
 
+    this.savedInactivityTimeout = player.options_.inactivityTimeout
+
     if (options.autoplay === true) this.player.addClass('vjs-has-autoplay')
 
     this.player.on('autoplay-failure', () => {
@@ -84,6 +87,20 @@ class PeerTubePlugin extends Plugin {
         saveMuteInStore(this.player.muted())
       })
 
+      if (options.stopTime) {
+        const stopTime = timeToInt(options.stopTime)
+        const self = this
+
+        this.player.on('timeupdate', function onTimeUpdate () {
+          if (self.player.currentTime() > stopTime) {
+            self.player.pause()
+            self.player.trigger('stopped')
+
+            self.player.off('timeupdate', onTimeUpdate)
+          }
+        })
+      }
+
       this.player.textTracks().on('change', () => {
         const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
           return t.kind === 'captions' && t.mode === 'showing'
@@ -109,11 +126,18 @@ class PeerTubePlugin extends Plugin {
   }
 
   dispose () {
-    clearTimeout(this.qualityObservationTimer)
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+  }
 
-    clearInterval(this.videoViewInterval)
+  onMenuOpen () {
+    this.menuOpened = false
+    this.alterInactivity()
+  }
 
-    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+  onMenuClosed () {
+    this.menuOpened = true
+    this.alterInactivity()
   }
 
   private initializePlayer () {
@@ -123,7 +147,7 @@ class PeerTubePlugin extends Plugin {
 
     this.initCaptions()
 
-    this.alterInactivity()
+    this.listenControlBarMouse()
   }
 
   private runViewAdd () {
@@ -200,23 +224,25 @@ class PeerTubePlugin extends Plugin {
     this.trigger('resolutionChange', data)
   }
 
-  private alterInactivity () {
-    let saveInactivityTimeout: number
+  private listenControlBarMouse () {
+    this.player.controlBar.on('mouseenter', () => {
+      this.mouseInControlBar = true
+      this.alterInactivity()
+    })
 
-    const disableInactivity = () => {
-      saveInactivityTimeout = this.player.options_.inactivityTimeout
-      this.player.options_.inactivityTimeout = 0
-    }
-    const enableInactivity = () => {
-      this.player.options_.inactivityTimeout = saveInactivityTimeout
-    }
+    this.player.controlBar.on('mouseleave', () => {
+      this.mouseInControlBar = false
+      this.alterInactivity()
+    })
+  }
 
-    const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
+  private alterInactivity () {
+    if (this.menuOpened || this.mouseInControlBar) {
+      this.player.options_.inactivityTimeout = this.savedInactivityTimeout
+      return
+    }
 
-    this.player.controlBar.on('mouseenter', () => disableInactivity())
-    settingsDialog.on('mouseenter', () => disableInactivity())
-    this.player.controlBar.on('mouseleave', () => enableInactivity())
-    settingsDialog.on('mouseleave', () => enableInactivity())
+    this.player.options_.inactivityTimeout = 1
   }
 
   private initCaptions () {