From 096a7395b2e82ee178fb414095a77b2a0c2aec7b Mon Sep 17 00:00:00 2001
From: Harry <HarryYC@users.noreply.github.com>
Date: Wed, 3 Apr 2024 21:12:23 -0700
Subject: [PATCH] Fea: add hotkey for compare function (#483)

* add hotkey for compare function

* remove duplicate hotkeys

* add id="media-compare-button" to small layout
---
 .../medias/media-current-recording.tsx        | 69 ++++++++++---------
 .../medias/media-player-controls.tsx          | 14 ++--
 .../components/preferences/hotkeys.tsx        | 13 ++++
 3 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/enjoy/src/renderer/components/medias/media-current-recording.tsx b/enjoy/src/renderer/components/medias/media-current-recording.tsx
index 234e97b8..68e82e52 100644
--- a/enjoy/src/renderer/components/medias/media-current-recording.tsx
+++ b/enjoy/src/renderer/components/medias/media-current-recording.tsx
@@ -320,7 +320,7 @@ export const MediaCurrentRecording = () => {
     }
 
     const subscriptions = [
-      regions.on("region-created", () => { }),
+      regions.on("region-created", () => {}),
 
       regions.on("region-clicked", (region, e) => {
         e.stopPropagation();
@@ -476,11 +476,12 @@ export const MediaCurrentRecording = () => {
           setIsRecording={setIsRecording}
         />
 
-        {
-          layout?.name === 'lg' && <>
+        {layout?.name === "lg" && (
+          <>
             <Button
               variant={isComparing ? "secondary" : "outline"}
               size="icon"
+              id="media-compare-button"
               data-tooltip-id="media-player-tooltip"
               data-tooltip-content={t("compare")}
               className="rounded-full w-8 h-8 p-0"
@@ -500,13 +501,14 @@ export const MediaCurrentRecording = () => {
               <TextCursorInputIcon className="w-4 h-4" />
             </Button>
           </>
-        }
+        )}
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
               size="icon"
+              id="media-compare-button"
               data-tooltip-id="media-player-tooltip"
               data-tooltip-content={t("more")}
               className="rounded-full w-8 h-8 p-0"
@@ -516,43 +518,42 @@ export const MediaCurrentRecording = () => {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
-            {
-              layout?.name === 'sm' && (
-                <>
-                  <DropdownMenuItem
-                    className="cursor-pointer"
-                    onClick={toggleCompare}
-                  >
-                    <GitCompareIcon className="w-4 h-4 mr-4" />
-                    <span>{t("compare")}</span>
-                  </DropdownMenuItem>
+            {layout?.name === "sm" && (
+              <>
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={toggleCompare}
+                >
+                  <GitCompareIcon className="w-4 h-4 mr-4" />
+                  <span>{t("compare")}</span>
+                </DropdownMenuItem>
 
-                  <DropdownMenuItem
-                    className="cursor-pointer"
-                    onClick={() => setIsSelectingRegion(!isSelectingRegion)}
-                  >
-                    <TextCursorInputIcon className="w-4 h-4 mr-4" />
-                    <span>{t("selectRegion")}</span>
-                  </DropdownMenuItem>
-                </>
-              )
-            }
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => setIsSelectingRegion(!isSelectingRegion)}
+                >
+                  <TextCursorInputIcon className="w-4 h-4 mr-4" />
+                  <span>{t("selectRegion")}</span>
+                </DropdownMenuItem>
+              </>
+            )}
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => setDetailIsOpen(true)}
             >
               <GaugeCircleIcon
                 className={`w-4 h-4 mr-4
-                    ${currentRecording.pronunciationAssessment
-                    ? currentRecording.pronunciationAssessment
-                      .pronunciationScore >= 80
-                      ? "text-green-500"
-                      : currentRecording.pronunciationAssessment
-                        .pronunciationScore >= 60
-                        ? "text-yellow-600"
-                        : "text-red-500"
-                    : ""
-                  }
+                    ${
+                      currentRecording.pronunciationAssessment
+                        ? currentRecording.pronunciationAssessment
+                            .pronunciationScore >= 80
+                          ? "text-green-500"
+                          : currentRecording.pronunciationAssessment
+                              .pronunciationScore >= 60
+                          ? "text-yellow-600"
+                          : "text-red-500"
+                        : ""
+                    }
                     `}
               />
               <span>{t("pronunciationAssessment")}</span>
diff --git a/enjoy/src/renderer/components/medias/media-player-controls.tsx b/enjoy/src/renderer/components/medias/media-player-controls.tsx
index b3ef62f7..42fd89e2 100644
--- a/enjoy/src/renderer/components/medias/media-player-controls.tsx
+++ b/enjoy/src/renderer/components/medias/media-player-controls.tsx
@@ -372,7 +372,7 @@ export const MediaPlayerControls = () => {
   }, [wavesurfer, decoded, playMode, activeRegion, currentTime]);
 
   useHotkeys(
-    ["Space", "p", "n", "r"],
+    ["Space", "p", "n", "r", "c"],
     (keyboardEvent, hotkeyEvent) => {
       if (!wavesurfer) return;
       keyboardEvent.preventDefault();
@@ -390,6 +390,9 @@ export const MediaPlayerControls = () => {
         case "r":
           document.getElementById("media-record-button").click();
           break;
+        case "c":
+          document.getElementById("media-compare-button").click();
+          break;
       }
     },
     [wavesurfer]
@@ -481,10 +484,11 @@ export const MediaPlayerControls = () => {
               {PLAYBACK_RATE_OPTIONS.map((rate, i) => (
                 <div
                   key={i}
-                  className={`cursor-pointer h-10 w-10 leading-10 rounded-full flex items-center justify-center ${rate === playbackRate
-                    ? "bg-primary text-white text-md"
-                    : "text-black/70 text-xs"
-                    }`}
+                  className={`cursor-pointer h-10 w-10 leading-10 rounded-full flex items-center justify-center ${
+                    rate === playbackRate
+                      ? "bg-primary text-white text-md"
+                      : "text-black/70 text-xs"
+                  }`}
                   onClick={() => {
                     setPlaybackRate(rate);
                   }}
diff --git a/enjoy/src/renderer/components/preferences/hotkeys.tsx b/enjoy/src/renderer/components/preferences/hotkeys.tsx
index ebdaae47..2e9df16c 100644
--- a/enjoy/src/renderer/components/preferences/hotkeys.tsx
+++ b/enjoy/src/renderer/components/preferences/hotkeys.tsx
@@ -84,7 +84,20 @@ export const Hotkeys = () => {
             n
           </kbd>
         </div>
+
         <Separator />
+
+        <div className="flex items-center justify-between py-4">
+          <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>
+        </div>
+
+        <Separator />
+
       </div>
     </>
   );