LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Consolidate keycode constants

Browse source
This commit is contained in:
infinite-persistence 2021-08-31 15:05:42 +08:00
parent 160d8fe4b8
commit 4259d6fc17
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
9 changed files with 90 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/claimCollectionAdd/view.jsx
View file

@ -5,6 +5,7 @@ import Button from 'component/button';
import Card from 'component/common/card';
import { FormField } from 'component/common/form';
import * as ICONS from 'constants/icons';
import * as KEYCODES from 'constants/keycodes';
import CollectionSelectItem from 'component/collectionSelectItem';
type Props = {
@ -46,8 +47,7 @@ const ClaimCollectionAdd = (props: Props) => {
}
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
const KEYCODE_ENTER = 13;
if (e.keyCode === KEYCODE_ENTER) {
if (e.keyCode === KEYCODES.ENTER) {
e.preventDefault();
buttonref.current.click();
}

6
ui/component/collectionsListMine/view.jsx
View file

@ -7,6 +7,8 @@ import { COLLECTIONS_CONSTS } from 'lbry-redux';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as KEYCODES from 'constants/keycodes';
import Yrbl from 'component/yrbl';
import classnames from 'classnames';
import { FormField, Form } from 'component/common/form';
@ -14,7 +16,6 @@ import { FormField, Form } from 'component/common/form';
type Props = {
builtinCollections: CollectionGroup,
publishedCollections: CollectionGroup,
publishedCollections: CollectionGroup,
unpublishedCollections: CollectionGroup,
// savedCollections: CollectionGroup,
};
@ -66,8 +67,7 @@ export default function CollectionsListMine(props: Props) {
const favorites = builtinCollectionsList.find((list) => list.id === COLLECTIONS_CONSTS.FAVORITES_ID);
const builtin = [watchLater, favorites];
function escapeListener(e: SyntheticKeyboardEvent<*>) {
const KEYCODE_ESCAPE = 27;
if (e.keyCode === KEYCODE_ESCAPE) {
if (e.keyCode === KEYCODES.ESCAPE) {
e.preventDefault();
setSearchText('');
}

4
ui/component/comment/view.jsx
View file

@ -1,6 +1,7 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as KEYCODES from 'constants/keycodes';
import { COMMENT_HIGHLIGHTED } from 'constants/classnames';
import { SORT_BY, COMMENT_PAGE_SIZE_REPLIES } from 'constants/comment';
import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
@ -71,7 +72,6 @@ type Props = {
};
const LENGTH_TO_COLLAPSE = 300;
const ESCAPE_KEY = 27;
function Comment(props: Props) {
const {
@ -157,7 +157,7 @@ function Comment(props: Props) {
// a user will try and press the escape key to cancel editing their comment
const handleEscape = (event) => {
if (event.keyCode === ESCAPE_KEY) {
if (event.keyCode === KEYCODES.ESCAPE) {
setEditing(false);
}
};

4
ui/component/commentCreate/view.jsx
View file

@ -3,6 +3,7 @@ import type { ElementRef } from 'react';
import { SIMPLE_SITE } from 'config';
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as KEYCODES from 'constants/keycodes';
import React from 'react';
import classnames from 'classnames';
import { FormField, Form } from 'component/common/form';
@ -157,8 +158,7 @@ export function CommentCreate(props: Props) {
}
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
const KEYCODE_ENTER = 13;
if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
e.preventDefault();
buttonRef.current.click();
}

3
ui/component/fileRender/view.jsx
View file

@ -4,6 +4,7 @@ import React from 'react';
import { lazyImport } from 'util/lazyImport';
import classnames from 'classnames';
import * as RENDER_MODES from 'constants/file_render_modes';
import * as KEYCODES from 'constants/keycodes';
import VideoViewer from 'component/viewers/videoViewer';
import { withRouter } from 'react-router-dom';
import fs from 'fs';
@ -57,7 +58,7 @@ class FileRender extends React.PureComponent<Props> {
}
escapeListener(e: SyntheticKeyboardEvent<*>) {
if (e.keyCode === 27) {
if (e.keyCode === KEYCODES.ESCAPE) {
e.preventDefault();
this.exitFullscreen();

5
ui/component/fileRenderInitiator/view.jsx
View file

@ -7,6 +7,7 @@ import React, { useEffect, useCallback } from 'react';
import classnames from 'classnames';
import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes';
import * as KEYCODES from 'constants/keycodes';
import Button from 'component/button';
import isUserTyping from 'util/detect-typing';
import { getThumbnailCdnUrl } from 'util/thumbnail';
@ -14,8 +15,6 @@ import Nag from 'component/common/nag';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
const SPACE_BAR_KEYCODE = 32;
type Props = {
play: (string, string) => void,
isLoading: boolean,
@ -120,7 +119,7 @@ export default function FileRenderInitiator(props: Props) {
// This is just for beginning to download a file
// Play/Pause/Fullscreen will be handled by the respective viewers because not every file type should behave the same
function handleKeyDown(e: KeyboardEvent) {
if (!isUserTyping() && e.keyCode === SPACE_BAR_KEYCODE) {
if (!isUserTyping() && e.keyCode === KEYCODES.SPACEBAR) {
e.preventDefault();
if (!isPlaying || fileStatus === 'stopped') {

8
ui/component/sideNavigation/view.jsx
View file

@ -2,6 +2,7 @@
import type { Node } from 'react';
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as KEYCODES from 'constants/keycodes';
import React from 'react';
import Button from 'component/button';
import classnames from 'classnames';
@ -15,9 +16,6 @@ import { SIMPLE_SITE, DOMAIN, ENABLE_UI_NOTIFICATIONS } from 'config';
import { IS_MAC } from 'component/app/view';
// @endif
const ESCAPE_KEY_CODE = 27;
const BACKSLASH_KEY_CODE = 220;
const HOME = {
title: 'Home',
link: `/`,
@ -265,9 +263,9 @@ function SideNavigation(props: Props) {
React.useEffect(() => {
function handleKeydown(e: SyntheticKeyboardEvent<*>) {
if (e.keyCode === ESCAPE_KEY_CODE && isAbsolute) {
if (e.keyCode === KEYCODES.ESCAPE && isAbsolute) {
setSidebarOpen(false);
} else if (e.keyCode === BACKSLASH_KEY_CODE) {
} else if (e.keyCode === KEYCODES.BACKSLASH) {
const hasActiveInput = document.querySelector('input:focus, textarea:focus');
if (!hasActiveInput) {
setSidebarOpen(!sidebarOpen);

58
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
// import { SIMPLE_SITE } from 'config';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
import * as KEYCODES from 'constants/keycodes';
import classnames from 'classnames';
import videojs from 'video.js';
import 'video.js/dist/alt/video-js-cdn.min.css';
@ -95,35 +96,6 @@ const VIDEO_JS_OPTIONS = {
},
};
const SPACE_BAR_KEYCODE = 32;
const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77;
const SMALL_T_KEYCODE = 84;
const ARROW_LEFT_KEYCODE = 37;
const ARROW_UP_KEYCODE = 38;
const ARROW_RIGHT_KEYCODE = 39;
const ARROW_DOWN_KEYCODE = 40;
const COMMA_KEYCODE = 188;
const PERIOD_KEYCODE = 190;
const SMALL_J_KEYCODE = 74;
const SMALL_K_KEYCODE = 75;
const SMALL_L_KEYCODE = 76;
const P_KEYCODE = 80;
const N_KEYCODE = 78;
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE;
const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE;
const VOLUME_UP_KEYCODE = ARROW_UP_KEYCODE;
const VOLUME_DOWN_KEYCODE = ARROW_DOWN_KEYCODE;
const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
const SEEK_FORWARD_KEYCODE_5 = ARROW_RIGHT_KEYCODE;
const SEEK_BACKWARD_KEYCODE_5 = ARROW_LEFT_KEYCODE;
const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds
@ -408,24 +380,24 @@ export default React.memo<Props>(function VideoJs(props: Props) {
function handleShiftKeyActions(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
if (e.keyCode === PERIOD_KEYCODE) changePlaybackSpeed(true);
if (e.keyCode === COMMA_KEYCODE) changePlaybackSpeed(false);
if (e.keyCode === N_KEYCODE) playNext();
if (e.keyCode === P_KEYCODE) playPrevious();
if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true);
if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false);
if (e.keyCode === KEYCODES.N) playNext();
if (e.keyCode === KEYCODES.P) playPrevious();
}
function handleSingleKeyActions(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) togglePlay();
if (e.keyCode === FULLSCREEN_KEYCODE) toggleFullscreen();
if (e.keyCode === MUTE_KEYCODE) toggleMute();
if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp();
if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown();
if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode();
if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP);
if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP);
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5);
if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5);
if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay();
if (e.keyCode === KEYCODES.F) toggleFullscreen();
if (e.keyCode === KEYCODES.M) toggleMute();
if (e.keyCode === KEYCODES.UP) volumeUp();
if (e.keyCode === KEYCODES.DOWN) volumeDown();
if (e.keyCode === KEYCODES.T) toggleTheaterMode();
if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP);
if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP);
if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5);
if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5);
}
function seekVideo(stepSize: number) {

59
ui/constants/keycodes.js Normal file
View file

@ -0,0 +1,59 @@
export const BACKSPACE = 8;
export const TAB = 9;
export const ENTER = 13;
export const SHIFT = 16;
export const CTRL = 17;
export const ALT = 18;
export const PAUSE = 19;
export const CAPS_LOCK = 20;
export const ESCAPE = 27;
export const SPACEBAR = 32;
export const PG_UP = 33;
export const PG_DN = 34;
export const END = 35;
export const HOME = 36;
export const LEFT = 37;
export const UP = 38;
export const RIGHT = 39;
export const DOWN = 40;
export const INSERT = 45;
export const DELETE = 46;
export const COMMAND = 91;
export const COMMAND_LEFT = 91;
export const COMMAND_RIGHT = 93;
export const NUMPAD_MULTIPLY = 106;
export const NUMPAD_PLUS = 107;
export const NUMPAD_MINUS = 109;
export const NUMPAD_DOT = 110;
export const NUMPAD_SLASH = 111;
export const NUM_LOCK = 144;
export const SCROLL_LOCK = 145;
export const BACKSLASH = 220;
export const PERIOD = 190;
export const COMMA = 188;
export const A = 65;
export const B = 66;
export const C = 67;
export const D = 68;
export const E = 69;
export const F = 70;
export const G = 71;
export const H = 72;
export const I = 73;
export const J = 74;
export const K = 75;
export const L = 76;
export const M = 77;
export const N = 78;
export const O = 79;
export const P = 80;
export const Q = 81;
export const R = 82;
export const S = 83;
export const T = 84;
export const U = 85;
export const V = 86;
export const W = 87;
export const X = 88;
export const Y = 89;
export const Z = 90;