Fix player unfuntional hotkeys (#679)

* upgrade deps

* fix react warning

* hotkeys for play/pause recording

* tune recording trim

* refactor hotkeys

enjoy/src/main/db/models/recording.ts

@@ -328,9 +328,9 @@ export class Recording extends Model<Recording> {
     let trimmedSamples = echogarden.trimAudioStart(
       rawAudio.audioChannels[0],
       0,
-      -35
+      -50
     );
-    trimmedSamples = echogarden.trimAudioEnd(trimmedSamples, 0, -35);
+    trimmedSamples = echogarden.trimAudioEnd(trimmedSamples, 0, -50);
     rawAudio.audioChannels[0] = trimmedSamples;
 
     duration = Math.round(echogarden.getRawAudioDuration(rawAudio) * 1000);

enjoy/src/renderer/components/meanings/meaning-memorizing-card.tsx

@@ -20,13 +20,11 @@ export const MeaningMemorizingCard = (props: { meaning: MeaningType }) => {
 
   useHotkeys(
     [currentHotkeys.PlayOrPause],
-    (keyboardEvent, _hotkeyEvent) => {
-      keyboardEvent.preventDefault();
-
+    () => {
       document.getElementById("vocabulary-toggle-side-button").click();
     },
     {
-      enabled,
+      preventDefault: true,
     },
     [side]
   );

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

@@ -421,27 +421,12 @@ export const MediaCurrentRecording = () => {
     calContainerWidth();
   }, [currentRecording, isRecording, layout?.width]);
 
-  useHotkeys(
-    [
-      currentHotkeys.PlayOrPauseRecording,
-      currentHotkeys.PronunciationAssessment,
-    ],
-    (keyboardEvent, hotkeyEvent) => {
-      if (!player) return;
-      keyboardEvent.preventDefault();
-
-      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]
-  );
+  useHotkeys(currentHotkeys.PlayOrPauseRecording, () => {
+    document.getElementById("recording-play-or-pause-button").click();
+  });
+  useHotkeys(currentHotkeys.PronunciationAssessment, () => {
+    setDetailIsOpen(!detailIsOpen);
+  });
 
   if (isRecording) return <MediaRecorder />;
   if (!currentRecording?.src)

enjoy/src/renderer/components/medias/media-player-controls.tsx

@@ -375,39 +375,49 @@ export const MediaPlayerControls = () => {
   }, [wavesurfer, decoded, playMode, activeRegion, currentTime]);
 
   useHotkeys(
-    [
-      currentHotkeys.PlayOrPause,
-      currentHotkeys.PlayPreviousSegment,
-      currentHotkeys.PlayNextSegment,
-      currentHotkeys.StartOrStopRecording,
-      currentHotkeys.Compare,
-    ],
-    (keyboardEvent, hotkeyEvent) => {
-      if (!wavesurfer) return;
-      keyboardEvent.preventDefault();
-
-      switch (hotkeyEvent.keys.join("")) {
-        case currentHotkeys.PlayOrPause.toLowerCase():
-          document.getElementById("media-play-or-pause-button").click();
-          break;
-        case currentHotkeys.PlayPreviousSegment.toLowerCase():
-          document.getElementById("media-play-previous-button").click();
-          break;
-        case currentHotkeys.PlayNextSegment.toLowerCase():
-          document.getElementById("media-play-next-button").click();
-          break;
-        case currentHotkeys.StartOrStopRecording.toLowerCase():
-          document.getElementById("media-record-button").click();
-          break;
-        case currentHotkeys.Compare.toLowerCase():
-          document.getElementById("media-compare-button").click();
-          break;
-      }
+    currentHotkeys.PlayOrPause,
+    () => {
+      document.getElementById("media-play-or-pause-button").click();
     },
     {
-      enabled,
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    currentHotkeys.PlayPreviousSegment,
+    () => {
+      document.getElementById("media-play-previous-button").click();
     },
-    [wavesurfer, currentHotkeys]
+    {
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    currentHotkeys.PlayNextSegment,
+    () => {
+      document.getElementById("media-play-next-button").click();
+    },
+    {
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    currentHotkeys.StartOrStopRecording,
+    () => {
+      document.getElementById("media-record-button").click();
+    },
+    {
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    currentHotkeys.Compare,
+    () => {
+      document.getElementById("media-compare-button").click();
+    },
+    {
+      preventDefault: true,
+    }
   );
 
   /*

enjoy/src/renderer/components/misc/bandu-login-form.tsx

@@ -68,7 +68,7 @@ export const BanduLoginForm = () => {
     intlTelInput(ref.current, {
       initialCountry: "cn",
       utilsScript:
-        "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/utils.js",
+        "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js",
     });
     setIti(intlTelInput(ref.current));
 

enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-card.tsx

@@ -67,7 +67,7 @@ export const PronunciationAssessmentCard = (props: {
             ].map(({ label, value }) => {
               if (typeof value === "number") {
                 return (
-                  <div className="flex items-center space-x-2 mb-2">
+                  <div key={label} className="flex items-center space-x-2 mb-2">
                     <span className="text-muted-foreground text-sm">
                       {label}:
                     </span>
@@ -95,7 +95,9 @@ export const PronunciationAssessmentCard = (props: {
             </div>
           )}
           <div className="mt-auto flex items-center gap-4">
-            {assessment.language && <Badge variant="secondary">{assessment.language}</Badge>}
+            {assessment.language && (
+              <Badge variant="secondary">{assessment.language}</Badge>
+            )}
             <div className="text-xs text-muted-foreground">
               {formatDateTime(assessment.createdAt)}
             </div>

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

@@ -109,6 +109,7 @@ const HotKeysSettingsSystemSettings = ({
     },
     {
       enabled,
+      preventDefault: true,
     }
   );
 
@@ -119,6 +120,7 @@ const HotKeysSettingsSystemSettings = ({
     },
     {
       enabled,
+      preventDefault: true,
     }
   );
 
@@ -129,6 +131,7 @@ const HotKeysSettingsSystemSettings = ({
     },
     {
       enabled,
+      preventDefault: true,
     }
   );
   return children;