refactor hotkey setting & add A hotkey (#676)

enjoy/src/i18n/en.json

@@ -565,7 +565,7 @@
   "customizeShortcuts": "Customize shortcuts",
   "customizeShortcutsTip": "Click to change",
   "customizeShortcutsRecordingTip": "Recording new shortcut",
-  "customizeShortcutsInvalidToast": "Your shortcut should only have one modifier (Ctrl, Alt, Shift, or Meta) and one key, like 'Ctrl+C'.",
+  "customizeShortcutsInvalidToast": "Your shortcut should have two modifier (Ctrl, Alt, Shift, or Meta) at most and one regular key, like 'Ctrl+C'.",
   "customizeShortcutsConflictToast": "{{input}} conflicts with the existing {{otherHotkeyName}} shortcut.",
   "customizeShortcutsUpdated": "Changes saved",
   "following": "following",

enjoy/src/i18n/zh-CN.json

@@ -565,7 +565,7 @@
   "customizeShortcuts": "自定义快捷键",
   "customizeShortcutsTip": "点击重新录制",
   "customizeShortcutsRecordingTip": "正在录制快捷键",
-  "customizeShortcutsInvalidToast": "快捷键应最多含一个修饰键（Ctrl, Alt, Shift 或 Meta）和一个键，如 'Ctrl+C'",
+  "customizeShortcutsInvalidToast": "快捷键应含最多两个修饰键（Ctrl, Alt, Shift 或 Meta）和一个普通键，如 'Ctrl+C'",
   "customizeShortcutsConflictToast": "{{input}} 和已有 {{otherHotkeyName}} 的键位冲突了",
   "customizeShortcutsUpdated": "设置成功",
   "following": "关注中",

enjoy/src/renderer/components/medias/media-current-recording.tsx

@@ -422,12 +422,22 @@ export const MediaCurrentRecording = () => {
   }, [currentRecording, isRecording, layout?.width]);
 
   useHotkeys(
-    currentHotkeys.PlayOrPauseRecording,
-    (keyboardEvent, _hotkeyEvent) => {
+    [
+      currentHotkeys.PlayOrPauseRecording,
+      currentHotkeys.PronunciationAssessment,
+    ],
+    (keyboardEvent, hotkeyEvent) => {
       if (!player) return;
       keyboardEvent.preventDefault();
 
-      document.getElementById("recording-play-or-pause-button").click();
+      switch (hotkeyEvent.keys.join("")) {
+        case currentHotkeys.PlayOrPauseRecording.toLowerCase():
+          document.getElementById("recording-play-or-pause-button").click();
+          break;
+        case currentHotkeys.PronunciationAssessment.toLowerCase():
+          setDetailIsOpen(!detailIsOpen);
+          break;
+      }
     },
     { enabled },
     [player]

enjoy/src/renderer/components/preferences/hotkeys-settings.tsx

@@ -33,10 +33,20 @@ export const HotkeysSettings = ({
     isRecording,
   } = useContext(HotKeysSettingsProviderContext);
 
-  const joinedKeys = useMemo(
-    () => [...recordingHotkeys].join("+"),
-    [recordingHotkeys]
-  );
+  const reset = () => {
+    stopRecordingHotkeys();
+    resetRecordingHotkeys();
+  };
+
+  const joinedKeys = useMemo(() => {
+    const keys = [...recordingHotkeys].join("+").split("+");
+    if (keys?.length > 3) {
+      reset();
+      return "";
+    } else {
+      return keys.join("+");
+    }
+  }, [recordingHotkeys]);
 
   const changeKeyMap = async () => {
     const ret = (await changeHotkey(keyName, recordingHotkeys)) as unknown as {
@@ -64,11 +74,6 @@ export const HotkeysSettings = ({
     }
   };
 
-  const reset = () => {
-    stopRecordingHotkeys();
-    resetRecordingHotkeys();
-  };
-
   // ensure recording disabled when dialog close
   useEffect(() => {
     return () => {
@@ -87,7 +92,7 @@ export const HotkeysSettings = ({
             <div className="">
               <div className="flex justify-center mb-4">
                 <Button variant="secondary">
-                  {joinedKeys.length > 0 ? (
+                  {joinedKeys?.length > 0 ? (
                     <span className="text-sm">{joinedKeys}</span>
                   ) : (
                     <span className="font-mono">-</span>

enjoy/src/renderer/components/preferences/hotkeys.tsx

@@ -1,7 +1,5 @@
 import { t } from "i18next";
-import {
-  Separator,
-} from "@renderer/components/ui";
+import { Separator } from "@renderer/components/ui";
 import { HotKeysSettingsProviderContext, Hotkey } from "@renderer/context";
 import { HotkeysSettings } from "@renderer/components";
 import { useContext, useState } from "react";
@@ -113,6 +111,25 @@ export const Hotkeys = () => {
 
         <Separator />
 
+        <div className="flex items-center justify-between py-4">
+          <div className="flex items-center space-x-2">
+            {t("pronunciationAssessment")}
+          </div>
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("pronunciationAssessment"),
+                keyName: "PronunciationAssessment",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer capitalize"
+          >
+            {currentHotkeys.PronunciationAssessment}
+          </kbd>
+        </div>
+
+        <Separator />
+
         <div className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-2 capitalize">
             {t("playPreviousSegment")}
@@ -179,4 +196,4 @@ export const Hotkeys = () => {
       />
     </>
   );
-};
+};

enjoy/src/renderer/context/hotkeys-settings-provider.tsx

@@ -14,8 +14,8 @@ function isShortcutValid(shortcut: string) {
   const keys = shortcut.toLowerCase().split("+");
   const modifierCount = keys.filter((key) => modifiers.includes(key)).length;
   const normalKeyCount = keys.length - modifierCount;
-  // Validation rule: At most one modifier key, and at most one regular key
-  return modifierCount <= 1 && normalKeyCount === 1;
+  // Validation rule: At most two modifier key, and at most one regular key
+  return modifierCount <= 2 && normalKeyCount === 1;
 }
 
 function mergeWithPreference(
@@ -37,7 +37,7 @@ function mergeWithPreference(
   return c;
 }
 
-const ControlOrCommand = navigator.platform.includes("Mac")
+const ControlOrCommand = navigator.userAgent.includes("Mac")
   ? "Meta"
   : "Control";
 
@@ -52,6 +52,7 @@ const defaultKeyMap = {
   PlayPreviousSegment: "P",
   PlayNextSegment: "N",
   Compare: "C",
+  PronunciationAssessment: "A",
   // dev tools
   OpenDevTools: `${ControlOrCommand}+Shift+I`,
 };
@@ -89,9 +90,8 @@ const initialState: HotkeysSettingsProviderState = {
   isRecording: false,
 };
 
-export const HotKeysSettingsProviderContext = createContext<
-  HotkeysSettingsProviderState
->(initialState);
+export const HotKeysSettingsProviderContext =
+  createContext<HotkeysSettingsProviderState>(initialState);
 
 const HotKeysSettingsSystemSettings = ({
   currentHotkeys,
@@ -168,7 +168,8 @@ export const HotKeysSettingsProvider = ({
       data: string | string[];
       input: string;
     } | void> => {
-      const str = [...recordedHotkeys].join("+");
+      const keys = [...recordedHotkeys].slice(0, 3).filter(Boolean);
+      const str = keys.join("+");
       const newMap = {
         ...currentHotkeys,
         [keyName]: str,