add hotkey for playrate +/- (#969)

enjoy/src/i18n/en.json

@@ -716,5 +716,7 @@
   "displayContent": "Display content",
   "hideContent": "Hide content",
   "audioInput": "Audio input",
-  "textInput": "Text input"
+  "textInput": "Text input",
+  "increasePlaybackRate": "Increase playback rate",
+  "descreasePlaybackRate": "Descrease playback rate"
 }

enjoy/src/i18n/zh-CN.json

@@ -716,5 +716,7 @@
   "displayContent": "显示内容",
   "hideContent": "隐藏内容",
   "audioInput": "语音输入",
-  "textInput": "文字输入"
+  "textInput": "文字输入",
+  "increasePlaybackRate": "加快播放速度",
+  "decreasePlaybackRate": "减慢播放速度"
 }

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

@@ -432,6 +432,32 @@ export const MediaPlayerControls = () => {
       preventDefault: true,
     }
   );
+  useHotkeys(
+    currentHotkeys.IncreasePlaybackRate,
+    () => {
+      setPlaybackRate(
+        PLAYBACK_RATE_OPTIONS[
+          PLAYBACK_RATE_OPTIONS.indexOf(playbackRate) + 1
+        ] ?? playbackRate
+      );
+    },
+    {
+      preventDefault: true,
+    }
+  );
+  useHotkeys(
+    currentHotkeys.DecreasePlaybackRate,
+    () => {
+      setPlaybackRate(
+        PLAYBACK_RATE_OPTIONS[
+          PLAYBACK_RATE_OPTIONS.indexOf(playbackRate) - 1
+        ] ?? playbackRate
+      );
+    },
+    {
+      preventDefault: true,
+    }
+  );
 
   /*
    * Fit zoom ratio when activeRegion is word or segment
@@ -514,7 +540,12 @@ export const MediaPlayerControls = () => {
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-96">
-            <div className="mb-4 text-center">{t("playbackRate")}</div>
+            <div
+              id="media-playback-rate-controller"
+              className="mb-4 text-center"
+            >
+              {t("playbackRate")}
+            </div>
             <div className="w-full rounded-full flex items-center justify-between bg-muted">
               {PLAYBACK_RATE_OPTIONS.map((rate, i) => (
                 <div

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

@@ -168,6 +168,44 @@ export const Hotkeys = () => {
 
         <Separator />
 
+        <div className="flex items-center justify-between py-4">
+          <div className="flex items-center space-x-2 capitalize">
+            {t("increasePlaybackRate")}
+          </div>
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("increasePlaybackRate"),
+                keyName: "IncreasePlaybackRate",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.IncreasePlaybackRate}
+          </kbd>
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center justify-between py-4">
+          <div className="flex items-center space-x-2 capitalize">
+            {t("decreasePlaybackRate")}
+          </div>
+          <kbd
+            onClick={() =>
+              handleItemSelected({
+                name: t("decreasePlaybackRate"),
+                keyName: "DecreasePlaybackRate",
+              })
+            }
+            className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground cursor-pointer"
+          >
+            {currentHotkeys.DecreasePlaybackRate}
+          </kbd>
+        </div>
+
+        <Separator />
+
         <div className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-2 capitalize">
             {t("compare")}

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

@@ -53,6 +53,8 @@ const defaultKeyMap = {
   PlayNextSegment: "N",
   Compare: "C",
   PronunciationAssessment: "A",
+  IncreasePlaybackRate: "]",
+  DecreasePlaybackRate: "[",
   // dev tools
   OpenDevTools: `${ControlOrCommand}+Shift+I`,
 };