Skip to content

Commit

Permalink
refactor: Replace keycode dependency with event.key (#8735)
Browse files Browse the repository at this point in the history
refactor: Replace keycode dependency with event.key
  • Loading branch information
mister-ben authored May 23, 2024
1 parent 978731e commit 35de64c
Show file tree
Hide file tree
Showing 19 changed files with 48 additions and 80 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@
"@videojs/xhr": "2.6.0",
"aes-decrypter": "^4.0.1",
"global": "4.4.0",
"keycode": "2.2.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.2.2",
"mux.js": "^7.0.1",
Expand Down
3 changes: 1 addition & 2 deletions src/js/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import ClickableComponent from './clickable-component.js';
import Component from './component';
import log from './utils/log.js';
import keycode from 'keycode';
import {createEl} from './utils/dom.js';

/**
Expand Down Expand Up @@ -118,7 +117,7 @@ class Button extends ClickableComponent {
// prevent the event from propagating through the DOM and triggering Player
// hotkeys. We do not preventDefault here because we _want_ the browser to
// handle it.
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
if (event.key === ' ' || event.key === 'Enter') {
event.stopPropagation();
return;
}
Expand Down
3 changes: 1 addition & 2 deletions src/js/clickable-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import Component from './component';
import * as Dom from './utils/dom.js';
import log from './utils/log.js';
import keycode from 'keycode';

/** @import Player from './player' */

Expand Down Expand Up @@ -245,7 +244,7 @@ class ClickableComponent extends Component {
// Support Space or Enter key operation to fire a click event. Also,
// prevent the event from propagating through the DOM and triggering
// Player hotkeys.
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.trigger('click');
Expand Down
3 changes: 1 addition & 2 deletions src/js/close-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import Button from './button';
import Component from './component';
import keycode from 'keycode';

/** @import Player from './player' */

Expand Down Expand Up @@ -80,7 +79,7 @@ class CloseButton extends Button {
*/
handleKeyDown(event) {
// Esc button will trigger `click` event
if (keycode.isEventKey(event, 'Esc')) {
if (event.key === 'Escape') {
event.preventDefault();
event.stopPropagation();
this.trigger('click');
Expand Down
3 changes: 1 addition & 2 deletions src/js/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import * as Fn from './utils/fn.js';
import * as Guid from './utils/guid.js';
import {toTitleCase, toLowerCase} from './utils/str.js';
import {merge} from './utils/obj.js';
import keycode from 'keycode';

/** @import Player from './player' */

Expand Down Expand Up @@ -1354,7 +1353,7 @@ class Component {

// We only stop propagation here because we want unhandled events to fall
// back to the browser. Exclude Tab for focus trapping, exclude also when spatialNavigation is enabled.
if (!keycode.isEventKey(event, 'Tab') && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
if (event.key !== 'Tab' && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
event.stopPropagation();
}
this.player_.handleKeyDown(event);
Expand Down
15 changes: 7 additions & 8 deletions src/js/control-bar/progress-control/seek-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import * as Dom from '../../utils/dom.js';
import * as Fn from '../../utils/fn.js';
import {formatTime} from '../../utils/time.js';
import {silencePromise} from '../../utils/promise';
import keycode from 'keycode';
import document from 'global/document';

/** @import Player from '../../player' */
Expand Down Expand Up @@ -438,37 +437,37 @@ class SeekBar extends Slider {
handleKeyDown(event) {
const liveTracker = this.player_.liveTracker;

if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.handleAction(event);
} else if (keycode.isEventKey(event, 'Home')) {
} else if (event.key === 'Home') {
event.preventDefault();
event.stopPropagation();
this.userSeek_(0);
} else if (keycode.isEventKey(event, 'End')) {
} else if (event.key === 'End') {
event.preventDefault();
event.stopPropagation();
if (liveTracker && liveTracker.isLive()) {
this.userSeek_(liveTracker.liveCurrentTime());
} else {
this.userSeek_(this.player_.duration());
}
} else if (/^[0-9]$/.test(keycode(event))) {
} else if (/^[0-9]$/.test(event.key)) {
event.preventDefault();
event.stopPropagation();
const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
const gotoFraction = parseInt(event.key, 10) * 0.1;

if (liveTracker && liveTracker.isLive()) {
this.userSeek_(liveTracker.seekableStart() + (liveTracker.liveWindow() * gotoFraction));
} else {
this.userSeek_(this.player_.duration() * gotoFraction);
}
} else if (keycode.isEventKey(event, 'PgDn')) {
} else if (event.key === 'PageDown') {
event.preventDefault();
event.stopPropagation();
this.userSeek_(this.player_.currentTime() - (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
} else if (keycode.isEventKey(event, 'PgUp')) {
} else if (event.key === 'PageUp') {
event.preventDefault();
event.stopPropagation();
this.userSeek_(this.player_.currentTime() + (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
Expand Down
5 changes: 2 additions & 3 deletions src/js/control-bar/volume-panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import Component from '../component.js';
import {isPlain} from '../utils/obj';
import * as Events from '../utils/events.js';
import keycode from 'keycode';
import document from 'global/document';

/** @import Player from './player' */
Expand Down Expand Up @@ -140,7 +139,7 @@ class VolumePanel extends Component {
* @listens keyup
*/
handleVolumeControlKeyUp(event) {
if (keycode.isEventKey(event, 'Esc')) {
if (event.key === 'Escape') {
this.muteToggle.focus();
}
}
Expand Down Expand Up @@ -185,7 +184,7 @@ class VolumePanel extends Component {
* @listens keydown | keyup
*/
handleKeyPress(event) {
if (keycode.isEventKey(event, 'Esc')) {
if (event.key === 'Escape') {
this.handleMouseOut();
}
}
Expand Down
13 changes: 6 additions & 7 deletions src/js/menu/menu-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import * as Events from '../utils/events.js';
import {toTitleCase} from '../utils/str.js';
import { IS_IOS } from '../utils/browser.js';
import document from 'global/document';
import keycode from 'keycode';

/** @import Player from '../player' */

Expand Down Expand Up @@ -298,19 +297,19 @@ class MenuButton extends Component {
handleKeyDown(event) {

// Escape or Tab unpress the 'button'
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
if (event.key === 'Esc' || event.key === 'Tab') {
if (this.buttonPressed_) {
this.unpressButton();
}

// Don't preventDefault for Tab key - we still want to lose focus
if (!keycode.isEventKey(event, 'Tab')) {
if (!event.key === 'Tab') {
event.preventDefault();
// Set focus back to the menu button's button
this.menuButton_.focus();
}
// Up Arrow or Down Arrow also 'press' the button to open the menu
} else if ((keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
} else if ((event.key === 'Up') || event.key === 'Down' && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
if (!this.buttonPressed_) {
event.preventDefault();
this.pressButton();
Expand All @@ -329,7 +328,7 @@ class MenuButton extends Component {
*/
handleMenuKeyUp(event) {
// Escape hides popup menu
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
if (event.key === 'Esc' || event.key === 'Tab') {
this.removeClass('vjs-hover');
}
}
Expand Down Expand Up @@ -357,12 +356,12 @@ class MenuButton extends Component {
*/
handleSubmenuKeyDown(event) {
// Escape or Tab unpress the 'button'
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
if (event.key === 'Esc' || event.key === 'Tab') {
if (this.buttonPressed_) {
this.unpressButton();
}
// Don't preventDefault for Tab key - we still want to lose focus
if (!keycode.isEventKey(event, 'Tab')) {
if (!event.key === 'Tab') {
event.preventDefault();
// Set focus back to the menu button's button
this.menuButton_.focus();
Expand Down
4 changes: 1 addition & 3 deletions src/js/menu/menu-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
*/
import ClickableComponent from '../clickable-component.js';
import Component from '../component.js';
import {MenuKeys} from './menu-keys.js';
import keycode from 'keycode';
import {createEl} from '../utils/dom.js';

/** @import Player from '../player' */
Expand Down Expand Up @@ -96,7 +94,7 @@ class MenuItem extends ClickableComponent {
* @listens keydown
*/
handleKeyDown(event) {
if (!MenuKeys.some((key) => keycode.isEventKey(event, key))) {
if (['Tab', 'Escape', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'ArrowDown'].includes(event.key)) {
// Pass keydown handling up for unused keys
super.handleKeyDown(event);
}
Expand Down
20 changes: 0 additions & 20 deletions src/js/menu/menu-keys.js

This file was deleted.

5 changes: 2 additions & 3 deletions src/js/menu/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Component from '../component.js';
import document from 'global/document';
import * as Dom from '../utils/dom.js';
import * as Events from '../utils/events.js';
import keycode from 'keycode';

/** @import Player from '../player' */

Expand Down Expand Up @@ -215,13 +214,13 @@ class Menu extends Component {
handleKeyDown(event) {

// Left and Down Arrows
if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
this.stepForward();

// Up and Right Arrows
} else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
} else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
event.preventDefault();
event.stopPropagation();
this.stepBack();
Expand Down
5 changes: 2 additions & 3 deletions src/js/modal-dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import * as Dom from './utils/dom';
import Component from './component';
import window from 'global/window';
import document from 'global/document';
import keycode from 'keycode';

/** @import Player from './player' */
/** @import { ContentDescriptor } from './utils/dom' */
Expand Down Expand Up @@ -470,14 +469,14 @@ class ModalDialog extends Component {
// Do not allow keydowns to reach out of the modal dialog.
event.stopPropagation();

if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
if (event.key === 'Escape' && this.closeable()) {
event.preventDefault();
this.close();
return;
}

// exit early if it isn't a tab key
if (!keycode.isEventKey(event, 'Tab')) {
if (event.key !== 'Tab') {
return;
}

Expand Down
9 changes: 4 additions & 5 deletions src/js/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import filterSource from './utils/filter-source';
import {getMimetype, findMimetype} from './utils/mimetypes';
import {hooks} from './utils/hooks';
import {isObject} from './utils/obj';
import keycode from 'keycode';
import icons from '../images/icons.svg';
import SpatialNavigation from './spatial-navigation.js';

Expand Down Expand Up @@ -3121,7 +3120,7 @@ class Player extends Component {
* Event to check for key press
*/
fullWindowOnEscKey(event) {
if (keycode.isEventKey(event, 'Esc')) {
if (event.key === 'Escape') {
if (this.isFullscreen() === true) {
if (!this.isFullWindow) {
this.exitFullscreen();
Expand Down Expand Up @@ -3371,9 +3370,9 @@ class Player extends Component {

// set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
const {
fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
playPauseKey = keydownEvent => (keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space'))
fullscreenKey = keydownEvent => (event.key.toLowerCase() === 'f'),
muteKey = keydownEvent => (event.key.toLowerCase() === 'm'),
playPauseKey = keydownEvent => (event.key.toLowerCase() === 'k' || event.key.toLowerCase() === ' ')
} = hotkeys;

if (fullscreenKey.call(this, event)) {
Expand Down
13 changes: 6 additions & 7 deletions src/js/slider/slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Component from '../component.js';
import * as Dom from '../utils/dom.js';
import {IS_CHROME} from '../utils/browser.js';
import {clamp} from '../utils/num.js';
import keycode from 'keycode';

/** @import Player from '../player' */

Expand Down Expand Up @@ -315,13 +314,13 @@ class Slider extends Component {
const horizontalSeek = spatialNavOptions && spatialNavOptions.horizontalSeek;

if (spatialNavEnabled) {
if ((horizontalSeek && keycode.isEventKey(event, 'Left')) ||
(!horizontalSeek && keycode.isEventKey(event, 'Down'))) {
if ((horizontalSeek && event.key === 'ArrowLeft') ||
(!horizontalSeek && event.key === 'ArrowDown')) {
event.preventDefault();
event.stopPropagation();
this.stepBack();
} else if ((horizontalSeek && keycode.isEventKey(event, 'Right')) ||
(!horizontalSeek && keycode.isEventKey(event, 'Up'))) {
} else if ((horizontalSeek && event.key === 'ArrowRight') ||
(!horizontalSeek && event.key === 'ArrowUp')) {
event.preventDefault();
event.stopPropagation();
this.stepForward();
Expand All @@ -330,13 +329,13 @@ class Slider extends Component {
}

// Left and Down Arrows
} else if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
this.stepBack();

// Up and Right Arrows
} else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
} else if (event.key === 'ArrowUp' || event.key === 'ArrowRight') {
event.preventDefault();
event.stopPropagation();
this.stepForward();
Expand Down
8 changes: 4 additions & 4 deletions src/js/spatial-navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* @file spatial-navigation.js
*/
import EventTarget from './event-target';
import keycode from 'keycode';
import SpatialNavKeyCodes from './utils/spatial-navigation-key-codes';

/** @import Component from './component' */
Expand Down Expand Up @@ -82,14 +81,15 @@ class SpatialNavigation extends EventTarget {
// Determine if the event is a custom modalKeydown event
const actualEvent = event.originalEvent ? event.originalEvent : event;

if (keycode.isEventKey(actualEvent, 'left') || keycode.isEventKey(actualEvent, 'up') ||
keycode.isEventKey(actualEvent, 'right') || keycode.isEventKey(actualEvent, 'down')) {
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(actualEvent.key)) {
// Handle directional navigation
if (this.isPaused_) {
return;
}
actualEvent.preventDefault();
const direction = keycode(actualEvent);

// "ArrowLeft" => "left" etc
const direction = actualEvent.key.substring(5).toLowerCase();

this.move(direction);
} else if (SpatialNavKeyCodes.isEventKey(actualEvent, 'play') || SpatialNavKeyCodes.isEventKey(actualEvent, 'pause') ||
Expand Down
Loading

0 comments on commit 35de64c

Please sign in to comment.