refactor hotkey setting & add A hotkey (#676)

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 = () => {
       />
     </>
   );
-};
+};