Upgrade and adjust hotkeys keyboard shortcuts

package.json

@@ -29,7 +29,7 @@
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-final-form": "^6.5.9",
-    "react-hotkeys-hook": "^4.6.1",
+    "react-hotkeys-hook": "^5.2.1",
     "react-i18next": "^15.4.0",
     "react-icons": "^5.5.0",
     "react-indiana-drag-scroll": "^2.2.1",

src/globalKeys.ts

@@ -22,8 +22,8 @@ const groupSubtitleList = "keyboardControls.groupSubtitleList";
  */
 export const rewriteKeys = (key: string | IKey) => {
   const newKey = typeof key === "string" ?
-    key : key.combinationKey ?
-      key.key.replaceAll(key.combinationKey, "+") : key.key;
+    key : key.splitKey ?
+      key.key.replaceAll(key.splitKey, "+") : key.key;
 
   return isMacOs ? newKey.replace("Alt", "Option") : newKey;
 };
@@ -48,7 +48,7 @@ export interface IKeyGroup {
 export interface IKey {
   name: string;
   key: string;
-  combinationKey?: string;
+  splitKey?: string;
 }
 
 export const KEYMAP: IKeyMap = {
@@ -89,12 +89,12 @@ export const KEYMAP: IKeyMap = {
     },
     zoomIn: {
       name: "cuttingActions.zoomIn",
-      key: "Shift;Alt;z, +",
-      combinationKey: ";",
+      key: "Shift;Alt;r, +",
+      splitKey: ";",
     },
     zoomOut: {
       name: "cuttingActions.zoomOut",
-      key: "Shift+Alt+t, -",
+      key: "Shift+Alt+e, -",
     },
   },
   timeline: {

src/main/CuttingActions.tsx

@@ -95,13 +95,13 @@ const CuttingActions: React.FC = () => {
   useHotkeys(
     KEYMAP.cutting.zoomIn.key,
     () => dispatchAction(timelineZoomIn),
-    { preventDefault: true, combinationKey: KEYMAP.cutting.zoomIn.combinationKey },
+    { preventDefault: true, splitKey: KEYMAP.cutting.zoomIn.splitKey, useKey: true },
     [timelineZoomIn],
   );
   useHotkeys(
     KEYMAP.cutting.zoomOut.key,
-    () => dispatchAction(timelineZoomOut, undefined),
-    { preventDefault: true },
+    () => dispatchAction(timelineZoomOut),
+    { preventDefault: true, useKey: true },
     [timelineZoomOut],
   );
 

src/main/KeyboardControls.tsx

@@ -131,7 +131,7 @@ const KeyboardControls: React.FC = () => {
         const entries: { [groupName: string]: string[][]; } = {};
         Object.entries(group).forEach(([, action]) => {
           const sequences = action.key.split(",").map(item => item.trim());
-          const sequenceCombinationkey = action.combinationKey ? action.combinationKey : "+";
+          const sequenceCombinationkey = action.splitKey ? action.splitKey : "+";
           entries[action.name] = Object.entries(sequences).map(([, sequence]) => {
             return sequence.split(sequenceCombinationkey).map(item => rewriteKeys(item.trim()));
           });

src/main/MainContent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 import Metadata from "./Metadata";
 import TrackSelection from "./TrackSelection";
@@ -89,51 +89,74 @@ const MainContent: React.FC = () => {
     padding: "20px",
   });
 
+  // Apply main focus to the current view for keyboard shortcuts.
+  const mainRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    // Auto-focus main content when route changes
+    mainRef.current?.focus();
+  }, [mainMenuState]);
+
   const render = () => {
     if (mainMenuState === MainMenuStateNames.cutting) {
       return (
-        <div css={[mainContentStyle, cuttingStyle]} role="main">
+        <div css={[mainContentStyle, cuttingStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <Cutting />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.metadata) {
       return (
-        <div css={[mainContentStyle, metadataStyle]} role="main">
+        <div css={[mainContentStyle, metadataStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <Metadata />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.trackSelection) {
       return (
-        <div css={[mainContentStyle, trackSelectStyle]} role="main">
+        <div css={[mainContentStyle, trackSelectStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <TrackSelection />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.subtitles) {
       return (
-        <div css={[mainContentStyle, subtitleSelectStyle]} role="main">
+        <div css={[mainContentStyle, subtitleSelectStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <Subtitle />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.thumbnail) {
       return (
-        <div css={[mainContentStyle, thumbnailSelectStyle]} role="main">
+        <div css={[mainContentStyle, thumbnailSelectStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <Thumbnail />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.finish) {
       return (
-        <div css={[mainContentStyle, finishStyle]} role="main">
+        <div css={[mainContentStyle, finishStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <Finish />
         </div>
       );
     } else if (mainMenuState === MainMenuStateNames.keyboardControls) {
       return (
-        <div css={[mainContentStyle, keyboardControlsStyle]} role="main">
+        <div css={[mainContentStyle, keyboardControlsStyle]} role="main"
+          ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+        >
           <KeyboardControls />
         </div>
       );
     } else {
-      <div css={[mainContentStyle, defaultStyle]} role="main">
+      <div css={[mainContentStyle, defaultStyle]} role="main"
+        ref={mainRef} tabIndex={-1} style={{ outline: "none" }}
+      >
         <LuWrench css={{ fontSize: 80 }} />
         Placeholder
       </div>;

src/main/SubtitleListEditor.tsx

@@ -292,7 +292,9 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
         deleteCue();
         break;
     }
-  }, { enableOnFormTags: ["input", "select", "textarea"] }, [identifier, cue, props.index]);
+  }, { enableOnFormTags: ["input", "select", "textarea"], preventDefault: true }, [identifier, cue, props.index]);
+
+  const hotkeyDivRef = hotkeyRef as React.RefObject<HTMLDivElement>;
 
   const setTimeToSegmentStart = () => {
     dispatch(setCurrentlyAt(cue.startTime));
@@ -369,7 +371,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
   });
 
   return (
-    <div ref={hotkeyRef} tabIndex={-1} css={[segmentStyle, {
+    <div ref={hotkeyDivRef} tabIndex={-1} css={[segmentStyle, {
       ...props.style,
       // Used for padding in the VariableSizeList
       top: props.style.top !== undefined ?

src/main/Timeline.tsx

@@ -273,13 +273,13 @@ export const Scrubber = React.forwardRef<HTMLDivElement, ScrubberProps>((props,
   useHotkeys(
     KEYMAP.timeline.increase.key,
     () => setKeyboardJumpDelta(keyboardJumpDelta => Math.min(keyboardJumpDelta * 10, 1000000)),
-    {},
+    { preventDefault: true },
     [keyboardJumpDelta],
   );
   useHotkeys(
     KEYMAP.timeline.decrease.key,
     () => setKeyboardJumpDelta(keyboardJumpDelta => Math.max(keyboardJumpDelta / 10, 1)),
-    {},
+    { preventDefault: true },
     [keyboardJumpDelta],
   );