From 915824619abd44f7cb1ff9e18d61163a6daf3609 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 20 Sep 2023 16:49:28 +0200 Subject: [PATCH] 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. --- src/globalKeys.ts | 33 ++++++++++++++++----------------- src/main/CuttingActions.tsx | 16 ++++++++-------- src/main/KeyboardControls.tsx | 4 ++-- src/main/Timeline.tsx | 10 +++++----- src/main/VideoControls.tsx | 6 +++--- 5 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src/globalKeys.ts b/src/globalKeys.ts index 9b4e730f7..0476d48ff 100644 --- 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 index f947bee78..e412375a6 100644 --- 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 = () => {
{/* { 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() diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx index 6ba9b71d3..6ca99eedf 100644 --- 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}>
diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx index eb0aac892..3ebcca8ae 100644 --- 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 (
switchPlayPreview(ref)} onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " ") { switchPlayPreview(undefined)