Skip to content

Commit 6ebc772

Browse files
xjoaoalvesxgkatsev
authored andcommitted
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
1 parent f38726e commit 6ebc772

File tree

2 files changed

+41
-0
lines changed

2 files changed

+41
-0
lines changed

src/js/player.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3444,6 +3444,23 @@ class Player extends Component {
34443444
this.on('mousemove', handleMouseMove);
34453445
this.on('mouseup', handleMouseUp);
34463446

3447+
const controlBar = this.getChild('controlBar');
3448+
3449+
if (controlBar) {
3450+
3451+
controlBar.on('mouseenter', function(event) {
3452+
3453+
this.player().cache_.inactivityTimeout = this.player().options_.inactivityTimeout;
3454+
this.player().options_.inactivityTimeout = 0;
3455+
3456+
});
3457+
3458+
controlBar.on('mouseleave', function(event) {
3459+
this.player().options_.inactivityTimeout = this.player().cache_.inactivityTimeout;
3460+
});
3461+
3462+
}
3463+
34473464
// Listen for keyboard navigation
34483465
// Shouldn't need to use inProgress interval because of key repeat
34493466
this.on('keydown', handleActivity);

test/unit/player.test.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import document from 'global/document';
1313
import sinon from 'sinon';
1414
import window from 'global/window';
1515
import * as middleware from '../../src/js/tech/middleware.js';
16+
import * as Events from '../../src/js/utils/events.js';
1617

1718
QUnit.module('Player', {
1819
beforeEach() {
@@ -2026,3 +2027,26 @@ QUnit.test('setting all children to false, does not cause an assertion', functio
20262027
player.dispose();
20272028
assert.ok(true, 'did not cause an assertion');
20282029
});
2030+
2031+
QUnit.test('controlBar behaviour with mouseenter and mouseleave events', function(assert) {
2032+
2033+
const player = TestHelpers.makePlayer();
2034+
2035+
player.listenForUserActivity_();
2036+
2037+
assert.equal(player.options_.inactivityTimeout, 2000, 'inactivityTimeout default value is 2000');
2038+
2039+
const el = player.getChild('controlBar').el();
2040+
2041+
// move mouse to controlBar
2042+
Events.trigger(el, 'mouseenter');
2043+
2044+
assert.equal(player.options_.inactivityTimeout, 0, 'mouseenter on control-bar, inactivityTimeout is set to 0');
2045+
2046+
// move mouse out of controlBar bounds
2047+
Events.trigger(el, 'mouseleave');
2048+
2049+
assert.equal(player.options_.inactivityTimeout, player.cache_.inactivityTimeout, 'mouse leaves control-bar, inactivityTimeout is set to default value (2000)');
2050+
2051+
player.dispose();
2052+
});

0 commit comments

Comments
 (0)