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

Lines changed: 0 additions & 1 deletion
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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 1 addition & 2 deletions
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

Lines changed: 7 additions & 8 deletions
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

Lines changed: 2 additions & 3 deletions
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

Lines changed: 6 additions & 7 deletions
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

Lines changed: 1 addition & 3 deletions
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

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)