Skip to content

Commit 35de64c

Browse files
mister-benmister-ben
authored
refactor: Replace keycode dependency with event.key (#8735)
refactor: Replace keycode dependency with event.key
1 parent 978731e commit 35de64c

19 files changed

+48
-80
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@
9191
"@videojs/xhr": "2.6.0",
9292
"aes-decrypter": "^4.0.1",
9393
"global": "4.4.0",
94-
"keycode": "2.2.0",
9594
"m3u8-parser": "^7.1.0",
9695
"mpd-parser": "^1.2.2",
9796
"mux.js": "^7.0.1",

‎src/js/button.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import ClickableComponent from './clickable-component.js';
55
import Component from './component';
66
import log from './utils/log.js';
7-
import keycode from 'keycode';
87
import {createEl} from './utils/dom.js';
98

109
/**
@@ -118,7 +117,7 @@ class Button extends ClickableComponent {
118117
// prevent the event from propagating through the DOM and triggering Player
119118
// hotkeys. We do not preventDefault here because we _want_ the browser to
120119
// handle it.
121-
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
120+
if (event.key === ' ' || event.key === 'Enter') {
122121
event.stopPropagation();
123122
return;
124123
}

‎src/js/clickable-component.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import Component from './component';
55
import * as Dom from './utils/dom.js';
66
import log from './utils/log.js';
7-
import keycode from 'keycode';
87

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

@@ -245,7 +244,7 @@ class ClickableComponent extends Component {
245244
// Support Space or Enter key operation to fire a click event. Also,
246245
// prevent the event from propagating through the DOM and triggering
247246
// Player hotkeys.
248-
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
247+
if (event.key === ' ' || event.key === 'Enter') {
249248
event.preventDefault();
250249
event.stopPropagation();
251250
this.trigger('click');

‎src/js/close-button.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*/
44
import Button from './button';
55
import Component from './component';
6-
import keycode from 'keycode';
76

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

@@ -80,7 +79,7 @@ class CloseButton extends Button {
8079
*/
8180
handleKeyDown(event) {
8281
// Esc button will trigger `click` event
83-
if (keycode.isEventKey(event, 'Esc')) {
82+
if (event.key === 'Escape') {
8483
event.preventDefault();
8584
event.stopPropagation();
8685
this.trigger('click');

‎src/js/component.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import * as Fn from './utils/fn.js';
1212
import * as Guid from './utils/guid.js';
1313
import {toTitleCase, toLowerCase} from './utils/str.js';
1414
import {merge} from './utils/obj.js';
15-
import keycode from 'keycode';
1615

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

@@ -1354,7 +1353,7 @@ class Component {
13541353

13551354
// We only stop propagation here because we want unhandled events to fall
13561355
// back to the browser. Exclude Tab for focus trapping, exclude also when spatialNavigation is enabled.
1357-
if (!keycode.isEventKey(event, 'Tab') && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
1356+
if (event.key !== 'Tab' && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
13581357
event.stopPropagation();
13591358
}
13601359
this.player_.handleKeyDown(event);

‎src/js/control-bar/progress-control/seek-bar.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import * as Dom from '../../utils/dom.js';
88
import * as Fn from '../../utils/fn.js';
99
import {formatTime} from '../../utils/time.js';
1010
import {silencePromise} from '../../utils/promise';
11-
import keycode from 'keycode';
1211
import document from 'global/document';
1312

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

441-
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
440+
if (event.key === ' ' || event.key === 'Enter') {
442441
event.preventDefault();
443442
event.stopPropagation();
444443
this.handleAction(event);
445-
} else if (keycode.isEventKey(event, 'Home')) {
444+
} else if (event.key === 'Home') {
446445
event.preventDefault();
447446
event.stopPropagation();
448447
this.userSeek_(0);
449-
} else if (keycode.isEventKey(event, 'End')) {
448+
} else if (event.key === 'End') {
450449
event.preventDefault();
451450
event.stopPropagation();
452451
if (liveTracker && liveTracker.isLive()) {
453452
this.userSeek_(liveTracker.liveCurrentTime());
454453
} else {
455454
this.userSeek_(this.player_.duration());
456455
}
457-
} else if (/^[0-9]$/.test(keycode(event))) {
456+
} else if (/^[0-9]$/.test(event.key)) {
458457
event.preventDefault();
459458
event.stopPropagation();
460-
const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
459+
const gotoFraction = parseInt(event.key, 10) * 0.1;
461460

462461
if (liveTracker && liveTracker.isLive()) {
463462
this.userSeek_(liveTracker.seekableStart() + (liveTracker.liveWindow() * gotoFraction));
464463
} else {
465464
this.userSeek_(this.player_.duration() * gotoFraction);
466465
}
467-
} else if (keycode.isEventKey(event, 'PgDn')) {
466+
} else if (event.key === 'PageDown') {
468467
event.preventDefault();
469468
event.stopPropagation();
470469
this.userSeek_(this.player_.currentTime() - (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
471-
} else if (keycode.isEventKey(event, 'PgUp')) {
470+
} else if (event.key === 'PageUp') {
472471
event.preventDefault();
473472
event.stopPropagation();
474473
this.userSeek_(this.player_.currentTime() + (STEP_SECONDS * PAGE_KEY_MULTIPLIER));

‎src/js/control-bar/volume-panel.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import Component from '../component.js';
55
import {isPlain} from '../utils/obj';
66
import * as Events from '../utils/events.js';
7-
import keycode from 'keycode';
87
import document from 'global/document';
98

109
/** @import Player from './player' */
@@ -140,7 +139,7 @@ class VolumePanel extends Component {
140139
* @listens keyup
141140
*/
142141
handleVolumeControlKeyUp(event) {
143-
if (keycode.isEventKey(event, 'Esc')) {
142+
if (event.key === 'Escape') {
144143
this.muteToggle.focus();
145144
}
146145
}
@@ -185,7 +184,7 @@ class VolumePanel extends Component {
185184
* @listens keydown | keyup
186185
*/
187186
handleKeyPress(event) {
188-
if (keycode.isEventKey(event, 'Esc')) {
187+
if (event.key === 'Escape') {
189188
this.handleMouseOut();
190189
}
191190
}

‎src/js/menu/menu-button.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import * as Events from '../utils/events.js';
99
import {toTitleCase} from '../utils/str.js';
1010
import { IS_IOS } from '../utils/browser.js';
1111
import document from 'global/document';
12-
import keycode from 'keycode';
1312

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

@@ -298,19 +297,19 @@ class MenuButton extends Component {
298297
handleKeyDown(event) {
299298

300299
// Escape or Tab unpress the 'button'
301-
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
300+
if (event.key === 'Esc' || event.key === 'Tab') {
302301
if (this.buttonPressed_) {
303302
this.unpressButton();
304303
}
305304

306305
// Don't preventDefault for Tab key - we still want to lose focus
307-
if (!keycode.isEventKey(event, 'Tab')) {
306+
if (!event.key === 'Tab') {
308307
event.preventDefault();
309308
// Set focus back to the menu button's button
310309
this.menuButton_.focus();
311310
}
312311
// Up Arrow or Down Arrow also 'press' the button to open the menu
313-
} else if ((keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
312+
} else if ((event.key === 'Up') || event.key === 'Down' && !(this.player_.options_.playerOptions.spatialNavigation && this.player_.options_.playerOptions.spatialNavigation.enabled)) {
314313
if (!this.buttonPressed_) {
315314
event.preventDefault();
316315
this.pressButton();
@@ -329,7 +328,7 @@ class MenuButton extends Component {
329328
*/
330329
handleMenuKeyUp(event) {
331330
// Escape hides popup menu
332-
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
331+
if (event.key === 'Esc' || event.key === 'Tab') {
333332
this.removeClass('vjs-hover');
334333
}
335334
}
@@ -357,12 +356,12 @@ class MenuButton extends Component {
357356
*/
358357
handleSubmenuKeyDown(event) {
359358
// Escape or Tab unpress the 'button'
360-
if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {
359+
if (event.key === 'Esc' || event.key === 'Tab') {
361360
if (this.buttonPressed_) {
362361
this.unpressButton();
363362
}
364363
// Don't preventDefault for Tab key - we still want to lose focus
365-
if (!keycode.isEventKey(event, 'Tab')) {
364+
if (!event.key === 'Tab') {
366365
event.preventDefault();
367366
// Set focus back to the menu button's button
368367
this.menuButton_.focus();

‎src/js/menu/menu-item.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
*/
44
import ClickableComponent from '../clickable-component.js';
55
import Component from '../component.js';
6-
import {MenuKeys} from './menu-keys.js';
7-
import keycode from 'keycode';
86
import {createEl} from '../utils/dom.js';
97

108
/** @import Player from '../player' */
@@ -96,7 +94,7 @@ class MenuItem extends ClickableComponent {
9694
* @listens keydown
9795
*/
9896
handleKeyDown(event) {
99-
if (!MenuKeys.some((key) => keycode.isEventKey(event, key))) {
97+
if (['Tab', 'Escape', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'ArrowDown'].includes(event.key)) {
10098
// Pass keydown handling up for unused keys
10199
super.handleKeyDown(event);
102100
}

‎src/js/menu/menu-keys.js

-20
This file was deleted.

‎src/js/menu/menu.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Component from '../component.js';
55
import document from 'global/document';
66
import * as Dom from '../utils/dom.js';
77
import * as Events from '../utils/events.js';
8-
import keycode from 'keycode';
98

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

@@ -215,13 +214,13 @@ class Menu extends Component {
215214
handleKeyDown(event) {
216215

217216
// Left and Down Arrows
218-
if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
217+
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
219218
event.preventDefault();
220219
event.stopPropagation();
221220
this.stepForward();
222221

223222
// Up and Right Arrows
224-
} else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
223+
} else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
225224
event.preventDefault();
226225
event.stopPropagation();
227226
this.stepBack();

‎src/js/modal-dialog.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import * as Dom from './utils/dom';
55
import Component from './component';
66
import window from 'global/window';
77
import document from 'global/document';
8-
import keycode from 'keycode';
98

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

473-
if (keycode.isEventKey(event, 'Escape') && this.closeable()) {
472+
if (event.key === 'Escape' && this.closeable()) {
474473
event.preventDefault();
475474
this.close();
476475
return;
477476
}
478477

479478
// exit early if it isn't a tab key
480-
if (!keycode.isEventKey(event, 'Tab')) {
479+
if (event.key !== 'Tab') {
481480
return;
482481
}
483482

‎src/js/player.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import filterSource from './utils/filter-source';
3434
import {getMimetype, findMimetype} from './utils/mimetypes';
3535
import {hooks} from './utils/hooks';
3636
import {isObject} from './utils/obj';
37-
import keycode from 'keycode';
3837
import icons from '../images/icons.svg';
3938
import SpatialNavigation from './spatial-navigation.js';
4039

@@ -3121,7 +3120,7 @@ class Player extends Component {
31213120
* Event to check for key press
31223121
*/
31233122
fullWindowOnEscKey(event) {
3124-
if (keycode.isEventKey(event, 'Esc')) {
3123+
if (event.key === 'Escape') {
31253124
if (this.isFullscreen() === true) {
31263125
if (!this.isFullWindow) {
31273126
this.exitFullscreen();
@@ -3371,9 +3370,9 @@ class Player extends Component {
33713370

33723371
// set fullscreenKey, muteKey, playPauseKey from `hotkeys`, use defaults if not set
33733372
const {
3374-
fullscreenKey = keydownEvent => keycode.isEventKey(keydownEvent, 'f'),
3375-
muteKey = keydownEvent => keycode.isEventKey(keydownEvent, 'm'),
3376-
playPauseKey = keydownEvent => (keycode.isEventKey(keydownEvent, 'k') || keycode.isEventKey(keydownEvent, 'Space'))
3373+
fullscreenKey = keydownEvent => (event.key.toLowerCase() === 'f'),
3374+
muteKey = keydownEvent => (event.key.toLowerCase() === 'm'),
3375+
playPauseKey = keydownEvent => (event.key.toLowerCase() === 'k' || event.key.toLowerCase() === ' ')
33773376
} = hotkeys;
33783377

33793378
if (fullscreenKey.call(this, event)) {

‎src/js/slider/slider.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Component from '../component.js';
55
import * as Dom from '../utils/dom.js';
66
import {IS_CHROME} from '../utils/browser.js';
77
import {clamp} from '../utils/num.js';
8-
import keycode from 'keycode';
98

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

@@ -315,13 +314,13 @@ class Slider extends Component {
315314
const horizontalSeek = spatialNavOptions && spatialNavOptions.horizontalSeek;
316315

317316
if (spatialNavEnabled) {
318-
if ((horizontalSeek && keycode.isEventKey(event, 'Left')) ||
319-
(!horizontalSeek && keycode.isEventKey(event, 'Down'))) {
317+
if ((horizontalSeek && event.key === 'ArrowLeft') ||
318+
(!horizontalSeek && event.key === 'ArrowDown')) {
320319
event.preventDefault();
321320
event.stopPropagation();
322321
this.stepBack();
323-
} else if ((horizontalSeek && keycode.isEventKey(event, 'Right')) ||
324-
(!horizontalSeek && keycode.isEventKey(event, 'Up'))) {
322+
} else if ((horizontalSeek && event.key === 'ArrowRight') ||
323+
(!horizontalSeek && event.key === 'ArrowUp')) {
325324
event.preventDefault();
326325
event.stopPropagation();
327326
this.stepForward();
@@ -330,13 +329,13 @@ class Slider extends Component {
330329
}
331330

332331
// Left and Down Arrows
333-
} else if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
332+
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
334333
event.preventDefault();
335334
event.stopPropagation();
336335
this.stepBack();
337336

338337
// Up and Right Arrows
339-
} else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
338+
} else if (event.key === 'ArrowUp' || event.key === 'ArrowRight') {
340339
event.preventDefault();
341340
event.stopPropagation();
342341
this.stepForward();

‎src/js/spatial-navigation.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* @file spatial-navigation.js
33
*/
44
import EventTarget from './event-target';
5-
import keycode from 'keycode';
65
import SpatialNavKeyCodes from './utils/spatial-navigation-key-codes';
76

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

85-
if (keycode.isEventKey(actualEvent, 'left') || keycode.isEventKey(actualEvent, 'up') ||
86-
keycode.isEventKey(actualEvent, 'right') || keycode.isEventKey(actualEvent, 'down')) {
84+
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(actualEvent.key)) {
8785
// Handle directional navigation
8886
if (this.isPaused_) {
8987
return;
9088
}
9189
actualEvent.preventDefault();
92-
const direction = keycode(actualEvent);
90+
91+
// "ArrowLeft" => "left" etc
92+
const direction = actualEvent.key.substring(5).toLowerCase();
9393

9494
this.move(direction);
9595
} else if (SpatialNavKeyCodes.isEventKey(actualEvent, 'play') || SpatialNavKeyCodes.isEventKey(actualEvent, 'pause') ||

0 commit comments

Comments
 (0)