Fix Mac Hotkeys

`react-hotkeys-hook` does not play nice with MacOs. Long story short, we have to use the more reliable `shift` instead of `mod`. Also, we cannot use `option`, so we have to wait with rewriting `alt` as `option` until displaying.
opencast · Sep 20, 2023 · 9158246 · 9158246
1 parent 1079503
commit 9158246
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 35 deletions.
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
@@ -20,12 +20,11 @@ const groupSubtitleList = "keyboardControls.groupSubtitleList"
 /**
  * Helper function that rewrites keys based on the OS
  */
-const rewriteKeys = (key: string) => {
+export const rewriteKeys = (key: string) => {
   let newKey = key
   if (isMacOs) {
     newKey = newKey.replace("Alt", "Option")
   }
-  newKey = isMacOs ? newKey.replace("Mod", "Command") : newKey.replace("Mod", "Control")
 
   return newKey
 }
@@ -56,69 +55,69 @@ export const KEYMAP: IKeyMap = {
   videoPlayer: {
     play: {
       name: "keyboardControls.videoPlayButton",
-      key: rewriteKeys("Mod+Alt+Space, Space"),
+      key: "Shift+Alt+Space, Space",
     },
     preview: {
       name: "video.previewButton",
-      key: rewriteKeys("Mod+Alt+p"),
+      key: "Shift+Alt+p",
     }
   },
   cutting: {
     cut: {
       name: "cuttingActions.cut-button",
-      key: rewriteKeys("Mod+Alt+c"),
+      key: "Shift+Alt+c",
     },
     delete: {
       name: "cuttingActions.delete-button",
-      key: rewriteKeys("Mod+Alt+d"),
+      key: "Shift+Alt+d",
     },
     mergeLeft: {
       name: "cuttingActions.mergeLeft-button",
-      key: rewriteKeys("Mod+Alt+n"),
+      key: "Shift+Alt+n",
     },
     mergeRight: {
       name: "cuttingActions.mergeRight-button",
-      key: rewriteKeys("Mod+Alt+m"),
+      key: "Shift+Alt+m",
     },
   },
   timeline: {
     left: {
       name: "keyboardControls.scrubberLeft",
-      key: rewriteKeys("Mod+Alt+j , Left"),
+      key: "Shift+Alt+j , Left",
     },
     right: {
       name: "keyboardControls.scrubberRight",
-      key: rewriteKeys("Mod+Alt+l, Right"),
+      key: "Shift+Alt+l, Right",
     },
     increase: {
       name: "keyboardControls.scrubberIncrease",
-      key: rewriteKeys("Mod+Alt+i, Up"),
+      key: "Shift+Alt+i, Up",
     },
     decrease: {
       name: "keyboardControls.scrubberDecrease",
-      key: rewriteKeys("Mod+Alt+k, Down"),
+      key: "Shift+Alt+k, Down",
     },
   },
   subtitleList: {
     addAbove: {
       name: "subtitleList.addSegmentAbove",
-      key: rewriteKeys("Mod+Alt+q"),
+      key: "Shift+Alt+q",
     },
     addBelow: {
       name: "subtitleList.addSegmentBelow",
-      key: rewriteKeys("Mod+Alt+a"),
+      key: "Shift+Alt+a",
     },
     jumpAbove: {
       name: "subtitleList.jumpToSegmentAbove",
-      key: rewriteKeys("Mod+Alt+w"),
+      key: "Shift+Alt+w",
     },
     jumpBelow: {
       name: "subtitleList.jumpToSegmentBelow",
-      key: rewriteKeys("Mod+Alt+s"),
+      key: "Shift+Alt+s",
     },
     delete: {
       name: "subtitleList.deleteSegment",
-      key: rewriteKeys("Mod+Alt+d"),
+      key: "Shift+Alt+d",
     }
   }
 }
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight
 } from '../redux/videoSlice'
-import { KEYMAP } from "../globalKeys";
+import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
 
 import { useTranslation } from 'react-i18next';
@@ -67,24 +67,24 @@ const CuttingActions: React.FC = () => {
     <div css={cuttingStyle}>
       <CuttingActionsButton Icon={LuScissors}
         actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut}
-        tooltip={t('cuttingActions.cut-tooltip', { hotkeyName: KEYMAP.cutting.cut.key })}
-        ariaLabelText={t('cuttingActions.cut-tooltip-aria', { hotkeyName: 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} />
       <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
-        hotKeyName={KEYMAP.cutting.delete.key}
+        hotKeyName={rewriteKeys(KEYMAP.cutting.delete.key)}
       />
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuChevronLeft}
         actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
-        tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: KEYMAP.cutting.mergeLeft.key })}
-        ariaLabelText={t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: 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) })}
       />
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuChevronRight}
         actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight}
-        tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: KEYMAP.cutting.mergeRight.key})}
-        ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: 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) })}
       />
       {/* <CuttingActionsButton Icon={faQuestion} actionName="Reset changes" action={null}
         tooltip="Not implemented"

diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 import { useTranslation, Trans} from "react-i18next";
 import { flexGapReplacementStyle } from "../cssStyles";
-import { getGroupName, KEYMAP } from "../globalKeys";
+import { getGroupName, KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTheme } from "../themes";
 import { titleStyle, titleStyleBold } from '../cssStyles'
 
@@ -127,7 +127,7 @@ const KeyboardControls: React.FC = () => {
         Object.entries(group).forEach(([, action]) => {
           const sequences = action.key.split(",").map(item => item.trim())
           entries[action.name] = Object.entries(sequences).map(([, sequence]) => {
-            return sequence.split("+").map(item => item.trim())
+            return sequence.split("+").map(item => rewriteKeys(item.trim()))
           })
         })
         groups.push(<Group name={getGroupName(groupName)} entries={entries} key={index}/>)

diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
@@ -16,7 +16,7 @@ import useResizeObserver from "use-resize-observer";
 
 import { Waveform } from '../util/waveform'
 import { convertMsToReadableString } from '../util/utilityFunctions';
-import { KEYMAP } from '../globalKeys';
+import { KEYMAP, rewriteKeys } from '../globalKeys';
 
 import { useTranslation } from 'react-i18next';
 import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
@@ -251,10 +251,10 @@ export const Scrubber: React.FC<{
           aria-label={t("timeline.scrubber-text-aria",
             {currentTime: convertMsToReadableString(currentlyAt), segment: activeSegmentIndex,
               segmentStatus: (segments[activeSegmentIndex].deleted ? "Deleted" : "Alive"),
-              moveLeft: KEYMAP.timeline.left.key,
-              moveRight: KEYMAP.timeline.right.key,
-              increase: KEYMAP.timeline.increase.key,
-              decrease: KEYMAP.timeline.decrease.key })}
+              moveLeft: rewriteKeys(KEYMAP.timeline.left.key),
+              moveRight: rewriteKeys(KEYMAP.timeline.right.key),
+              increase: rewriteKeys(KEYMAP.timeline.increase.key),
+              decrease: rewriteKeys(KEYMAP.timeline.decrease.key) })}
           tabIndex={0}>
           <LuMenu css={scrubberDragHandleIconStyle}/>
         </div>

diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx
@@ -13,7 +13,7 @@ import {
 import { convertMsToReadableString } from '../util/utilityFunctions'
 import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 
-import { KEYMAP } from "../globalKeys";
+import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTranslation } from 'react-i18next';
 
 import { RootState } from "../redux/store";
@@ -144,12 +144,12 @@ const PreviewMode: React.FC<{
   return (
     <ThemedTooltip
       title={t("video.previewButton-tooltip", { status: (isPlayPreview ? "on" : "off"),
-        hotkeyName: KEYMAP.videoPlayer.preview.key })}
+        hotkeyName: rewriteKeys(KEYMAP.videoPlayer.preview.key) })}
     >
       <div css={previewModeStyle}
         ref={ref}
         role="switch" aria-checked={isPlayPreview} tabIndex={0} aria-hidden={false}
-        aria-label={t("video.previewButton-aria", { hotkeyName: KEYMAP.videoPlayer.preview.key })}
+        aria-label={t("video.previewButton-aria", { hotkeyName: rewriteKeys(KEYMAP.videoPlayer.preview.key) })}
         onClick={() => switchPlayPreview(ref)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " ") {
           switchPlayPreview(undefined)