Feat/custom hotkeys (#496)

* feat: 2024-04-07 15:27:52 - custom hotkeys

* feat: 2024-04-07 15:52:13 - add custome compare shortcuts

* feat: 2024-04-09 10:17:23 - Modify the code according to the code review suggestions and optimize the experience.

---------

Co-authored-by: more.tai <more.tai@huolala.cn>

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

@@ -1,19 +1,45 @@
 import { t } from "i18next";
 import { Separator } from "@renderer/components/ui";
+import { HotKeysSettingsProviderContext, Hotkey } from "@/renderer/context";
+import { useContext, useState } from "react";
+import { ChangeHotkeyDialog } from "../change-hotkey-dialog";
 
 export const Hotkeys = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<{
+    name: string;
+    keyName: string;
+  } | null>(null);
+  const {
+    currentHotkeys,
+    startRecordingHotkeys,
+    stopRecordingHotkeys,
+  } = useContext(HotKeysSettingsProviderContext);
+
   const commandOrCtrl = navigator.platform.includes("Mac") ? "Cmd" : "Ctrl";
 
+  const handleItemSelected = (item: { name: string; keyName: Hotkey }) => {
+    setOpen(true);
+    startRecordingHotkeys();
+    setSelectedItem(item);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      stopRecordingHotkeys();
+    }
+  };
+
   return (
     <>
       <div className="font-semibold mb-4 capitilized">{t("hotkeys")}</div>
-
       <div className="mb-6">
         <div className="text-sm text-muted-foreground">{t("system")}</div>
 
         <div className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-2">{t("quitApp")}</div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
+          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-not-allowed">
             {commandOrCtrl} + Q
           </kbd>
         </div>
@@ -24,8 +50,16 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2">
             {t("openPreferences")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            {commandOrCtrl} + ,
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: "Open preferences",
+                keyName: "OpenPreferences",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.OpenPreferences}
           </kbd>
         </div>
         <Separator />
@@ -36,8 +70,16 @@ export const Hotkeys = () => {
 
         <div className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-2">{t("playOrPause")}</div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            Space
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("playOrPause"),
+                keyName: "PlayOrPause",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.PlayOrPause}
           </kbd>
         </div>
 
@@ -47,8 +89,16 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2 capitalize">
             {t("startOrStopRecording")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            r
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("startOrStopRecording"),
+                keyName: "StartOrStopRecording",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.StartOrStopRecording}
           </kbd>
         </div>
 
@@ -58,8 +108,16 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2">
             {t("playOrPauseRecording")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            {commandOrCtrl} + r
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("playOrPauseRecording"),
+                keyName: "PlayOrPauseRecording",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.PlayOrPauseRecording}
           </kbd>
         </div>
 
@@ -69,8 +127,16 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2 capitalize">
             {t("playPreviousSegment")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            p
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("playPreviousSegment"),
+                keyName: "PlayPreviousSegment",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.PlayPreviousSegment}
           </kbd>
         </div>
 
@@ -80,8 +146,16 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2 capitalize">
             {t("playNextSegment")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            n
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("playNextSegment"),
+                keyName: "PlayNextSegment",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.PlayNextSegment}
           </kbd>
         </div>
 
@@ -91,14 +165,28 @@ export const Hotkeys = () => {
           <div className="flex items-center space-x-2 capitalize">
             {t("compare")}
           </div>
-          <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
-            c
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("compare"),
+                keyName: "Compare",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.Compare}
           </kbd>
         </div>
 
         <Separator />
-
       </div>
+
+      <ChangeHotkeyDialog
+        open={open}
+        keyName={selectedItem?.keyName}
+        name={selectedItem?.name}
+        onOpenChange={handleOpenChange}
+      />
     </>
   );
 };