Add configurable hotkeys

package.json

@@ -40,6 +40,7 @@
     "react-virtualized-auto-sizer": "^1.0.26",
     "react-window": "^1.8.11",
     "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
     "smol-toml": "^1.4.0",
     "standardized-audio-context": "^25.3.77",
     "typescript": "^5.8.3",

src/globalKeys.ts

@@ -51,7 +51,7 @@ export interface IKey {
   splitKey?: string;
 }
 
-export const KEYMAP: IKeyMap = {
+export const DEFAULT_KEYMAP: IKeyMap = {
   videoPlayer: {
     play: {
       name: "keyboardControls.videoPlayButton",

src/i18n/locales/en-US.json

@@ -345,7 +345,14 @@
       "scrubberLeft": "Move left",
       "scrubberRight": "Move right",
       "scrubberIncrease": "Move faster",
-      "scrubberDecrease": "Move slower"
+      "scrubberDecrease": "Move slower",
+      "changeModal": {
+        "title": "Change hotkey: {{name}}",
+        "info": "Record a new hotkey sequence by pressing the keys you want.",
+        "recordedKeys": "Recorded keys: ",
+        "save": "Save",
+        "discard": "Discard"
+      }
     },
 
     "theme": {

src/index.tsx

@@ -14,13 +14,17 @@ import "./i18n/config";
 
 import "@opencast/appkit/dist/colors.css";
 import { ColorSchemeProvider } from "@opencast/appkit";
+import { PersistGate } from "redux-persist/lib/integration/react";
+import { persistStore } from "redux-persist";
 
 const container = document.getElementById("root");
 if (!container) {
   throw new Error("Failed to find the root element");
 }
 const root = ReactDOMClient.createRoot(container);
 
+// Commenting persistent stuff out can help with debugging
+const persistor = persistStore(store);
 
 // Load config here
 // Load the rest of the application and try to fetch the settings file from the
@@ -36,9 +40,11 @@ initialize.then(
     root.render(
       <React.StrictMode>
         <Provider store={store}>
-          <ColorSchemeProvider>
-            <App />
-          </ColorSchemeProvider>
+          <PersistGate loading={<div>loading...</div>} persistor={persistor}>
+            <ColorSchemeProvider>
+              <App />
+            </ColorSchemeProvider>
+          </PersistGate>
         </Provider>
       </React.StrictMode>,
     );

src/main/CuttingActions.tsx

@@ -26,7 +26,7 @@ import {
   timelineZoomIn,
   timelineZoomOut,
 } from "../redux/videoSlice";
-import { KEYMAP, rewriteKeys } from "../globalKeys";
+import { rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload, ActionCreatorWithPayload, PayloadActionCreator } from "@reduxjs/toolkit";
 
 import { useTranslation } from "react-i18next";
@@ -36,6 +36,7 @@ import { Slider } from "@mui/material";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ProtoButton } from "@opencast/appkit";
 import Select, { components, SingleValue } from "react-select";
+import { selectKeymap } from "../redux/hotkeySlice";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -65,6 +66,8 @@ const CuttingActions: React.FC<{
   // Init redux variables
   const dispatch = useAppDispatch();
 
+  const keymap = useAppSelector(selectKeymap);
+
   /**
    * General action callback for cutting actions
    * @param event event triggered by click or button press
@@ -92,37 +95,37 @@ const CuttingActions: React.FC<{
 
   // Maps functions to hotkeys
   useHotkeys(
-    KEYMAP.cutting.cut.key,
+    keymap.cutting.cut.key,
     () => dispatchAction(cut),
     { preventDefault: true },
     [cut],
   );
   useHotkeys(
-    KEYMAP.cutting.delete.key,
+    keymap.cutting.delete.key,
     () => dispatchAction(markAsDeletedOrAlive),
     { preventDefault: true },
     [markAsDeletedOrAlive],
   );
   useHotkeys(
-    KEYMAP.cutting.mergeLeft.key,
+    keymap.cutting.mergeLeft.key,
     () => dispatchAction(mergeLeft),
     { preventDefault: true },
     [mergeLeft],
   );
   useHotkeys(
-    KEYMAP.cutting.mergeRight.key,
+    keymap.cutting.mergeRight.key,
     () => dispatchAction(mergeRight),
     { preventDefault: true },
     [mergeRight],
   );
   useHotkeys(
-    KEYMAP.cutting.zoomIn.key,
+    keymap.cutting.zoomIn.key,
     () => dispatchAction(timelineZoomIn),
-    { preventDefault: true, splitKey: KEYMAP.cutting.zoomIn.splitKey, useKey: true },
+    { preventDefault: true, splitKey: keymap.cutting.zoomIn.splitKey, useKey: true },
     [timelineZoomIn],
   );
   useHotkeys(
-    KEYMAP.cutting.zoomOut.key,
+    keymap.cutting.zoomOut.key,
     () => dispatchAction(timelineZoomOut),
     { preventDefault: true, useKey: true },
     [timelineZoomOut],
@@ -152,8 +155,8 @@ const CuttingActions: React.FC<{
             action={cut}
             actionWithPayload={undefined}
             payload={undefined}
-            tooltip={t("cuttingActions.cut-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
-            ariaLabelText={t("cuttingActions.cut-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
+            tooltip={t("cuttingActions.cut-tooltip", { hotkeyName: rewriteKeys(keymap.cutting.cut.key) })}
+            ariaLabelText={t("cuttingActions.cut-tooltip-aria", { hotkeyName: rewriteKeys(keymap.cutting.cut.key) })}
           />
           <div css={verticalLineStyle} />
         </>
@@ -166,16 +169,16 @@ const CuttingActions: React.FC<{
             action={add}
             actionWithPayload={undefined}
             payload={undefined}
-            tooltip={t("cuttingActions.add-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
-            ariaLabelText={t("cuttingActions.add-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key) })}
+            tooltip={t("cuttingActions.add-tooltip", { hotkeyName: rewriteKeys(keymap.cutting.cut.key) })}
+            ariaLabelText={t("cuttingActions.add-tooltip-aria", { hotkeyName: rewriteKeys(keymap.cutting.cut.key) })}
           />
           <div css={verticalLineStyle} />
         </>
       }
       {!isDeleteButtonDisabled &&
         <>
           <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
-            hotKeyName={rewriteKeys(KEYMAP.cutting.delete.key)}
+            hotKeyName={rewriteKeys(keymap.cutting.delete.key)}
           />
           <div css={verticalLineStyle} />
         </>
@@ -188,9 +191,9 @@ const CuttingActions: React.FC<{
             action={deleteByMerge}
             actionWithPayload={undefined}
             payload={undefined}
-            tooltip={t("cuttingActions.deleteByMerge-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.delete.key) })}
+            tooltip={t("cuttingActions.deleteByMerge-tooltip", { hotkeyName: rewriteKeys(keymap.cutting.delete.key) })}
             ariaLabelText={t("cuttingActions.deleteByMerge-tooltip-aria",
-              { hotkeyName: rewriteKeys(KEYMAP.cutting.delete.key) })}
+              { hotkeyName: rewriteKeys(keymap.cutting.delete.key) })}
           />
           <div css={verticalLineStyle} />
         </>
@@ -203,9 +206,9 @@ const CuttingActions: React.FC<{
             action={mergeLeft}
             actionWithPayload={undefined}
             payload={undefined}
-            tooltip={t("cuttingActions.mergeLeft-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })}
+            tooltip={t("cuttingActions.mergeLeft-tooltip", { hotkeyName: rewriteKeys(keymap.cutting.mergeLeft.key) })}
             ariaLabelText={
-              t("cuttingActions.mergeLeft-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key) })
+              t("cuttingActions.mergeLeft-tooltip-aria", { hotkeyName: rewriteKeys(keymap.cutting.mergeLeft.key) })
             }
           />
           <div css={verticalLineStyle} />
@@ -219,9 +222,9 @@ const CuttingActions: React.FC<{
             action={mergeRight}
             actionWithPayload={undefined}
             payload={undefined}
-            tooltip={t("cuttingActions.mergeRight-tooltip", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })}
+            tooltip={t("cuttingActions.mergeRight-tooltip", { hotkeyName: rewriteKeys(keymap.cutting.mergeRight.key) })}
             ariaLabelText={
-              t("cuttingActions.mergeRight-tooltip-aria", { hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key) })
+              t("cuttingActions.mergeRight-tooltip-aria", { hotkeyName: rewriteKeys(keymap.cutting.mergeRight.key) })
             }
           />
           <div css={verticalLineStyle} />
@@ -257,12 +260,12 @@ const CuttingActions: React.FC<{
       }
       <ZoomSlider actionHandler={dispatchAction}
         tooltip={t("cuttingActions.zoomSlider-tooltip", {
-          hotkeyNameIn: rewriteKeys(KEYMAP.cutting.zoomIn),
-          hotkeyNameOut: rewriteKeys(KEYMAP.cutting.zoomOut),
+          hotkeyNameIn: rewriteKeys(keymap.cutting.zoomIn),
+          hotkeyNameOut: rewriteKeys(keymap.cutting.zoomOut),
         })}
         ariaLabelText={t("cuttingActions.zoomSlider-aria", {
-          hotkeyNameIn: rewriteKeys(KEYMAP.cutting.zoomIn),
-          hotkeyNameOut: rewriteKeys(KEYMAP.cutting.zoomOut),
+          hotkeyNameIn: rewriteKeys(keymap.cutting.zoomIn),
+          hotkeyNameOut: rewriteKeys(keymap.cutting.zoomOut),
         })}
       />
       <ZoomDropdown />

src/main/CuttingActionsContextMenu.tsx

@@ -5,9 +5,10 @@ import { LuChevronLeft, LuChevronRight, LuScissors, LuTrash } from "react-icons/
 import TrashRestore from "../img/trash-restore.svg?react";
 
 import { ContextMenuItem, ThemedContextMenu } from "./ContextMenu";
-import { KEYMAP, rewriteKeys } from "../globalKeys";
+import { rewriteKeys } from "../globalKeys";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { cut, markAsDeletedOrAlive, mergeLeft, mergeRight, selectIsCurrentSegmentAlive } from "../redux/videoSlice";
+import { selectKeymap } from "../redux/hotkeySlice";
 
 const CuttingActionsContextMenu: React.FC<{
   children: React.ReactNode,
@@ -19,43 +20,44 @@ const CuttingActionsContextMenu: React.FC<{
 
   // Init redux variables
   const dispatch = useAppDispatch();
+  const keymap = useAppSelector(selectKeymap);
   const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive);
 
   const cuttingContextMenuItems: ContextMenuItem[] = [
     {
       name: t("cuttingActions.cut-button"),
       action: () => dispatch(cut()),
       icon: LuScissors,
-      hotKey: KEYMAP.cutting.cut.key,
+      hotKey: keymap.cutting.cut.key,
       ariaLabel: t("cuttingActions.cut-tooltip-aria", {
-        hotkeyName: rewriteKeys(KEYMAP.cutting.cut.key),
+        hotkeyName: rewriteKeys(keymap.cutting.cut.key),
       }),
     },
     {
       name: isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button"),
       action: () => dispatch(markAsDeletedOrAlive()),
       icon: isCurrentSegmentAlive ? LuTrash : TrashRestore,
-      hotKey: KEYMAP.cutting.delete.key,
+      hotKey: keymap.cutting.delete.key,
       ariaLabel: t("cuttingActions.delete-restore-tooltip-aria", {
-        hotkeyName: rewriteKeys(KEYMAP.cutting.delete.key),
+        hotkeyName: rewriteKeys(keymap.cutting.delete.key),
       }),
     },
     {
       name: t("cuttingActions.mergeLeft-button"),
       action: () => dispatch(mergeLeft()),
       icon: LuChevronLeft,
-      hotKey: KEYMAP.cutting.mergeLeft.key,
+      hotKey: keymap.cutting.mergeLeft.key,
       ariaLabel: t("cuttingActions.mergeLeft-tooltip-aria", {
-        hotkeyName: rewriteKeys(KEYMAP.cutting.mergeLeft.key),
+        hotkeyName: rewriteKeys(keymap.cutting.mergeLeft.key),
       }),
     },
     {
       name: t("cuttingActions.mergeRight-button"),
       action: () => dispatch(mergeRight()),
       icon: LuChevronRight,
-      hotKey: KEYMAP.cutting.mergeRight.key,
+      hotKey: keymap.cutting.mergeRight.key,
       ariaLabel: t("cuttingActions.mergeRight-tooltip-aria", {
-        hotkeyName: rewriteKeys(KEYMAP.cutting.mergeRight.key),
+        hotkeyName: rewriteKeys(keymap.cutting.mergeRight.key),
       }),
     },
   ];