Fix control bar inactive timeout

2 files changed, 37 insertions, 15 deletions

diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index dd9408c8e..9824c43b5 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -36,6 +36,10 @@ class PeerTubePlugin extends Plugin {
   private userWatchingVideoInterval: any
   private lastResolutionChange: ResolutionUpdateData
 
+  private menuOpened = false
+  private mouseInControlBar = false
+  private readonly savedInactivityTimeout: number
+
   constructor (player: videojs.Player, options: PeerTubePluginOptions) {
     super(player, options)
 
@@ -43,6 +47,8 @@ class PeerTubePlugin extends Plugin {
     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', () => {
@@ -124,6 +130,16 @@ class PeerTubePlugin extends Plugin {
     if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
   }
 
+  onMenuOpen () {
+    this.menuOpened = false
+    this.alterInactivity()
+  }
+
+  onMenuClosed () {
+    this.menuOpened = true
+    this.alterInactivity()
+  }
+
   private initializePlayer () {
     if (isMobile()) this.player.addClass('vjs-is-mobile')
 
@@ -131,7 +147,7 @@ class PeerTubePlugin extends Plugin {
 
     this.initCaptions()
 
-    this.alterInactivity()
+    this.listenControlBarMouse()
   }
 
   private runViewAdd () {
@@ -208,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 () {
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index 3e8b5fc94..b700f4be6 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -122,6 +122,8 @@ class SettingsButton extends Button {
   }
 
   showDialog () {
+    this.player_.peertube().onMenuOpen()
+
     this.menu.el_.style.opacity = '1'
     this.dialog.show()
 
@@ -129,6 +131,8 @@ class SettingsButton extends Button {
   }
 
   hideDialog () {
+    this.player_.peertube().onMenuClosed()
+
     this.dialog.hide()
     this.setDialogSize(this.getComponentSize(this.menu))
     this.menu.el_.style.opacity = '1'