Consolidate keycode constants

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 === KEYCODES.ENTER) {
-    if (e.keyCode === KEYCODE_ENTER) {
       e.preventDefault();
       buttonref.current.click();
     }

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 === KEYCODES.ESCAPE) {
-    if (e.keyCode === KEYCODE_ESCAPE) {
       e.preventDefault();
       setSearchText('');
     }

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);
         }
       };

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 === KEYCODES.ENTER) {
-    if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
       e.preventDefault();
       buttonRef.current.click();
     }

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<Props> {
   }
 
   escapeListener(e: SyntheticKeyboardEvent<*>) {
-    if (e.keyCode === 27) {
+    if (e.keyCode === KEYCODES.ESCAPE) {
       e.preventDefault();
 
       this.exitFullscreen();

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') {

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);

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<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 === KEYCODES.PERIOD) changePlaybackSpeed(true);
-    if (e.keyCode === COMMA_KEYCODE) changePlaybackSpeed(false);
+    if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false);
-    if (e.keyCode === N_KEYCODE) playNext();
+    if (e.keyCode === KEYCODES.N) playNext();
-    if (e.keyCode === P_KEYCODE) playPrevious();
+    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 === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay();
-    if (e.keyCode === FULLSCREEN_KEYCODE) toggleFullscreen();
+    if (e.keyCode === KEYCODES.F) toggleFullscreen();
-    if (e.keyCode === MUTE_KEYCODE) toggleMute();
+    if (e.keyCode === KEYCODES.M) toggleMute();
-    if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp();
+    if (e.keyCode === KEYCODES.UP) volumeUp();
-    if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown();
+    if (e.keyCode === KEYCODES.DOWN) volumeDown();
-    if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode();
+    if (e.keyCode === KEYCODES.T) toggleTheaterMode();
-    if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP);
+    if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP);
-    if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP);
+    if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP);
-    if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5);
+    if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5);
-    if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5);
+    if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5);
   }
 
   function seekVideo(stepSize: number) {

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;