From 77dfd7c9da0bae8d04d66d1cb62e1d17ab4ae2c3 Mon Sep 17 00:00:00 2001 From: Joey Parrish Date: Mon, 27 Apr 2020 16:53:54 -0700 Subject: [PATCH] Fix UI keyboard Event types The latest Closure Compiler is more picky about Event types, and complained about the use of "key" on Event. This updates the Event types so that the compiler has the correct type info. This also stops using "keyCode", which is deprecated, and only uses the current "key" property, which is even supported on IE, and should not create any compatibility issues. Issue #2528 Backported to v2.5.x Change-Id: Ic565772b1cc9597e358df015a73c40ac245edd6a --- ui/constants.js | 9 --------- ui/controls.js | 43 +++++++++++++++++++++---------------------- 2 files changed, 21 insertions(+), 31 deletions(-) diff --git a/ui/constants.js b/ui/constants.js index 6302b44b90..7041e7318b 100644 --- a/ui/constants.js +++ b/ui/constants.js @@ -23,12 +23,3 @@ shaka.ui.Constants.ARIA_LABEL = 'aria-label'; /** @const {number} */ shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR = 5; // seconds - -/** @const {number} */ -shaka.ui.Constants.KEYCODE_TAB = 9; - -/** @const {number} */ -shaka.ui.Constants.KEYCODE_SHIFT = 16; - -/** @const {number} */ -shaka.ui.Constants.KEYCODE_ESCAPE = 27; diff --git a/ui/controls.js b/ui/controls.js index cf4e681831..e1af4c896b 100644 --- a/ui/controls.js +++ b/ui/controls.js @@ -20,7 +20,6 @@ goog.provide('shaka.ui.Controls'); goog.provide('shaka.ui.ControlsPanel'); goog.require('shaka.log'); -goog.require('shaka.ui.Constants'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); goog.require('shaka.ui.SeekBar'); @@ -175,7 +174,7 @@ shaka.ui.Controls = function(player, videoContainer, video, config) { * The pressed keys set is used to record which keys are currently pressed * down, so we can know what keys are pressed at the same time. * Used by the focusInsideOverflowMenu_() function. - * @private {!Set.} + * @private {!Set.} */ this.pressedKeys_ = new Set(); @@ -823,7 +822,9 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() { // Listen for key down events to detect tab and enable outline // for focused elements. - this.eventManager_.listen(window, 'keydown', this.onKeyDown_.bind(this)); + this.eventManager_.listen(window, 'keydown', (e) => { + this.onKeyDown_(/** @type {!KeyboardEvent} */(e)); + }); // Listen for click events to dismiss the settings menus. this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus()); @@ -858,8 +859,9 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() { this.onCastStatusChange_(e); }); - this.eventManager_.listen(this.videoContainer_, - 'keyup', this.onKeyUp_.bind(this)); + this.eventManager_.listen(this.videoContainer_, 'keyup', (e) => { + this.onKeyUp_(/** @type {!KeyboardEvent} */(e)); + }); if (screen.orientation) { this.eventManager_.listen(screen.orientation, 'change', () => { @@ -1085,12 +1087,10 @@ shaka.ui.Controls.prototype.onPlayStateChange_ = function() { /** * Support controls with keyboard inputs. - * @param {!Event} event + * @param {!KeyboardEvent} event * @private */ shaka.ui.Controls.prototype.onKeyUp_ = function(event) { - let key = event.key; - let activeElement = document.activeElement; let isVolumeBar = activeElement && activeElement.classList ? activeElement.classList.contains('shaka-volume-bar') : false; @@ -1102,13 +1102,13 @@ shaka.ui.Controls.prototype.onKeyUp_ = function(event) { } // When the key is released, remove it from the pressed keys set. - this.pressedKeys_.delete(event.keyCode); + this.pressedKeys_.delete(event.key); if (!this.config_.enableKeyboardPlaybackControls) { return; } - switch (key) { + switch (event.key) { case 'ArrowLeft': // If it's not focused on the volume bar, move the seek time backward // for 5 sec. Otherwise, the volume will be adjusted automatically. @@ -1213,16 +1213,16 @@ shaka.ui.Controls.prototype.updateTimeAndSeekRange_ = function() { * 3. When navigating on overflow settings menu by pressing Tab * key or Shift+Tab keys keep the focus inside overflow menu. * - * @param {!Event} event + * @param {!KeyboardEvent} event * @private */ shaka.ui.Controls.prototype.onKeyDown_ = function(event) { - // Add the key code to the pressed keys set when it's pressed. - this.pressedKeys_.add(event.keyCode); + // Add the key to the pressed keys set when it's pressed. + this.pressedKeys_.add(event.key); const anySettingsMenusAreOpen = this.anySettingsMenusAreOpen(); - if (event.keyCode == shaka.ui.Constants.KEYCODE_TAB) { + if (event.key == 'Tab') { // Enable blue outline for focused elements for keyboard // navigation. this.controlsContainer_.classList.add('shaka-keyboard-navigation'); @@ -1232,16 +1232,15 @@ shaka.ui.Controls.prototype.onKeyDown_ = function(event) { } // If escape key was pressed, close any open settings menus. - if (event.keyCode == shaka.ui.Constants.KEYCODE_ESCAPE) { + if (event.key == 'Escape') { this.hideSettingsMenusTimer_.tickNow(); } - if (anySettingsMenusAreOpen && - this.pressedKeys_.has(shaka.ui.Constants.KEYCODE_TAB)) { - // If Tab key or Shift+Tab keys are pressed when navigating through - // an overflow settings menu, keep the focus to loop inside the - // overflow menu. - this.keepFocusInMenu_(event); + if (anySettingsMenusAreOpen && this.pressedKeys_.has('Tab')) { + // If Tab key or Shift+Tab keys are pressed when navigating through + // an overflow settings menu, keep the focus to loop inside the + // overflow menu. + this.keepFocusInMenu_(event); } }; @@ -1284,7 +1283,7 @@ shaka.ui.Controls.prototype.keepFocusInMenu_ = function(event) { // previous element. If it's currently focused on the first shown child // element of the overflow menu, let the focus move to the last child // element of the menu. - if (this.pressedKeys_.has(shaka.ui.Constants.KEYCODE_SHIFT)) { + if (this.pressedKeys_.has('Shift')) { if (activeElement == firstShownChild) { event.preventDefault(); lastShownChild.focus();