fix: Control-bar autohide when cursor placed over it #5258 (#5692)

Listen to 'mouseenter' and 'mouseleave' events when triggered in the control-bar and temporarily sets inactivity timeout to zero before restoring it. Closes #5258
videojs · Dec 26, 2018 · 6ebc7727ef3115c4c15be73306758cf33bcbfbef · 6ebc772
1 parent f38726e
commit 6ebc7727ef3115c4c15be73306758cf33bcbfbef
Unified Split

Showing with 41 additions and 0 deletions.

+17 −0 src/js/player.js

+24 −0 test/unit/player.test.js
diff --git a/src/js/player.js b/src/js/player.js
@@ -3444,6 +3444,23 @@ class Player extends Component {
    this.on('mousemove', handleMouseMove);
    this.on('mouseup', handleMouseUp);
+  
+    const controlBar = this.getChild('controlBar');
+  
+
+  
+    if (controlBar) {
+  
+
+  
+      controlBar.on('mouseenter', function(event) {
+  
+
+  
+        this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
+  
+        this.player().options_.inactivityTimeout = 0;
+  
+
+  
+      });
+  
+
+  
+      controlBar.on('mouseleave', function(event) {
+  
+        this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
+  
+      });
+  
+
+  
+    }
+  
+
    // Listen for keyboard navigation
    // Shouldn't need to use inProgress interval because of key repeat
    this.on('keydown', handleActivity);

diff --git a/test/unit/player.test.js b/test/unit/player.test.js
@@ -13,6 +13,7 @@ import document from 'global/document';
 import sinon from 'sinon';
 import window from 'global/window';
 import * as middleware from '../../src/js/tech/middleware.js';
+  
+import * as Events from '../../src/js/utils/events.js';
 QUnit.module('Player', {
  beforeEach() {
@@ -2026,3 +2027,26 @@ QUnit.test('setting all children to false, does not cause an assertion', functio
  player.dispose();
  assert.ok(true, 'did not cause an assertion');
 });
+  
+
+  
+QUnit.test('controlBar behaviour with mouseenter and mouseleave events', function(assert) {
+  
+
+  
+  const player = TestHelpers.makePlayer();
+  
+
+  
+  player.listenForUserActivity_();
+  
+
+  
+  assert.equal(player.options_.inactivityTimeout, 2000, 'inactivityTimeout default value is 2000');
+  
+
+  
+  const el = player.getChild('controlBar').el();
+  
+
+  
+  // move mouse to controlBar
+  
+  Events.trigger(el, 'mouseenter');
+  
+
+  
+  assert.equal(player.options_.inactivityTimeout, 0, 'mouseenter on control-bar, inactivityTimeout is set to 0');
+  
+
+  
+  // move mouse out of controlBar bounds
+  
+  Events.trigger(el, 'mouseleave');
+  
+
+  
+  assert.equal(player.options_.inactivityTimeout, player.cache_.inactivityTimeout, 'mouse leaves control-bar, inactivityTimeout is set to default value (2000)');
+  
+
+  
+  player.dispose();
+  
+});