diff --git a/ui/component/claimCollectionAdd/view.jsx b/ui/component/claimCollectionAdd/view.jsx index a7803d6b4..848445866 100644 --- a/ui/component/claimCollectionAdd/view.jsx +++ b/ui/component/claimCollectionAdd/view.jsx @@ -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(); } diff --git a/ui/component/collectionsListMine/view.jsx b/ui/component/collectionsListMine/view.jsx index ee3be8b17..d87c92f14 100644 --- a/ui/component/collectionsListMine/view.jsx +++ b/ui/component/collectionsListMine/view.jsx @@ -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(''); } diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index aaaafebec..b52003bcf 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -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); } }; diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 33360f3d0..91cd44875 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -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(); } diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx index 2a523e1f3..5a946f868 100644 --- a/ui/component/fileRender/view.jsx +++ b/ui/component/fileRender/view.jsx @@ -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 { } escapeListener(e: SyntheticKeyboardEvent<*>) { - if (e.keyCode === 27) { + if (e.keyCode === KEYCODES.ESCAPE) { e.preventDefault(); this.exitFullscreen(); diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx index a98676ba1..48bde1bde 100644 --- a/ui/component/fileRenderInitiator/view.jsx +++ b/ui/component/fileRenderInitiator/view.jsx @@ -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') { diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx index 859591c72..408152b53 100644 --- a/ui/component/sideNavigation/view.jsx +++ b/ui/component/sideNavigation/view.jsx @@ -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); diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 871edf3a0..bac5fb9ba 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -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(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) { diff --git a/ui/constants/keycodes.js b/ui/constants/keycodes.js new file mode 100644 index 000000000..c0d77ba1e --- /dev/null +++ b/ui/constants/keycodes.js @@ -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;