diff --git a/src/js/player.js b/src/js/player.js index 95349cdfd..b68c6ae9a 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -370,6 +370,8 @@ class Player extends Component { this.boundUpdatePlayerHeightOnAudioOnlyMode_ = (e) => this.updatePlayerHeightOnAudioOnlyMode_(e); + this.boundGlobalKeydown_ = (e) => this.handleGlobalKeydown_(e); + // default isFullscreen_ to false this.isFullscreen_ = false; @@ -611,6 +613,10 @@ class Player extends Component { this.on('keydown', (e) => this.handleKeyDown(e)); this.on('languagechange', (e) => this.handleLanguagechange(e)); + if (this.isGlobalHotKeysEnabled()) { + Events.on(document.body, 'keydown', this.boundGlobalKeydown_); + } + this.breakpoints(this.options_.breakpoints); this.responsive(this.options_.responsive); @@ -646,6 +652,7 @@ class Player extends Component { // Make sure all player-specific document listeners are unbound. This is Events.off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_); Events.off(document, 'keydown', this.boundFullWindowOnEscKey_); + Events.off(document.body, 'keydown', this.boundGlobalKeydown_); if (this.styleEl_ && this.styleEl_.parentNode) { this.styleEl_.parentNode.removeChild(this.styleEl_); @@ -2247,6 +2254,12 @@ class Player extends Component { this.trigger('textdata', data); } + handleGlobalKeydown_(event) { + if (event.target === document.body) { + this.handleKeyDown(event); + } + } + /** * Get object for cached values. * @@ -4570,6 +4583,10 @@ class Player extends Component { this.height(this.audioOnlyCache_.controlBarHeight); } + isGlobalHotKeysEnabled() { + return !!(this.options_ && this.options_.userActions && this.options_.userActions.globalHotkeys); + } + enableAudioOnlyUI_() { // Update styling immediately to show the control bar so we can get its height this.addClass('vjs-audio-only-mode'); diff --git a/test/unit/player-user-actions.test.js b/test/unit/player-user-actions.test.js index d639434ed..35a5614e2 100644 --- a/test/unit/player-user-actions.test.js +++ b/test/unit/player-user-actions.test.js @@ -639,3 +639,58 @@ QUnit.test('hotkeys are NOT ignored when focus is on a button input', function(a defaultKeyTests.mute(this.player, assert, true); defaultKeyTests.playPause(this.player, assert, true); }); + +QUnit.module('Player: User Actions: Global Hotkeys', { + + beforeEach() { + this.clock = sinon.useFakeTimers(); + this.player = TestHelpers.makePlayer(); + }, + + afterEach() { + this.player.dispose(); + this.clock.restore(); + } +}); + +QUnit.test('when userActions.globalHotkeys is true, hotkeys are enabled at document.body level', function(assert) { + this.player.dispose(); + this.player = TestHelpers.makePlayer({ + controls: true, + userActions: { + globalHotkeys: true, + hotkeys: true + } + }); + + this.player.requestFullscreen = sinon.spy(); + + const event = new KeyboardEvent('keydown', { // eslint-disable-line no-undef + key: 'f' + }); + + document.body.dispatchEvent(event); + + assert.strictEqual(this.player.requestFullscreen.callCount, 1, 'has gone fullscreen'); +}); + +QUnit.test('when userActions.globalHotkeys is NOT true, hotkeys are NOT enabled at document.body level', function(assert) { + this.player.dispose(); + this.player = TestHelpers.makePlayer({ + controls: true, + userActions: { + globalHotkeys: false, + hotkeys: true + } + }); + + this.player.requestFullscreen = sinon.spy(); + + const event = new KeyboardEvent('keydown', { // eslint-disable-line no-undef + key: 'f' + }); + + document.body.dispatchEvent(event); + + assert.strictEqual(this.player.requestFullscreen.callCount, 0, 'has not gone fullscreen'); +});