use hotkey in vocabulary page (#597)

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

@@ -1,18 +1,36 @@
 import { t } from "i18next";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useContext } from "react";
 import { Button, ScrollArea, Separator } from "@renderer/components/ui";
 import Mark from "mark.js";
+import { useHotkeys } from "react-hotkeys-hook";
+import { HotKeysSettingsProviderContext } from "@renderer/context";
 
 export const MeaningMemorizingCard = (props: { meaning: MeaningType }) => {
   const {
     meaning: { word, lookups },
   } = props;
+  const { currentHotkeys, enabled } = useContext(
+    HotKeysSettingsProviderContext
+  );
   const [side, setSide] = useState<"front" | "back">("front");
 
   useEffect(() => {
     setSide("front");
   }, [word]);
 
+  useHotkeys(
+    [currentHotkeys.PlayOrPause],
+    (keyboardEvent, _hotkeyEvent) => {
+      keyboardEvent.preventDefault();
+
+      document.getElementById("vocabulary-toggle-side-button").click();
+    },
+    {
+      enabled,
+    },
+    [side]
+  );
+
   if (side === "front")
     return (
       <FrontSide word={word} lookups={lookups} onFlip={() => setSide("back")} />
@@ -64,7 +82,11 @@ const FrontSide = (props: {
         </div>
       </ScrollArea>
       <div className="mt-4 flex items-center justify-center">
-        <Button variant="default" onClick={onFlip}>
+        <Button
+          id="vocabulary-toggle-side-button"
+          variant="default"
+          onClick={onFlip}
+        >
           {t("backSide")}
         </Button>
       </div>
@@ -146,7 +168,11 @@ const BackSide = (props: { meaning: MeaningType; onFlip: () => void }) => {
       </ScrollArea>
 
       <div className="mt-4 flex items-center justify-center">
-        <Button variant="secondary" onClick={onFlip}>
+        <Button
+          id="vocabulary-toggle-side-button"
+          variant="secondary"
+          onClick={onFlip}
+        >
           {t("frontSide")}
         </Button>
       </div>

enjoy/src/renderer/pages/vocabulary.tsx

@@ -2,9 +2,13 @@ import { Button } from "@renderer/components/ui";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useState, useContext, useEffect } from "react";
-import { AppSettingsProviderContext } from "@renderer/context";
+import {
+  AppSettingsProviderContext,
+  HotKeysSettingsProviderContext,
+} from "@renderer/context";
 import { LoaderSpin, MeaningMemorizingCard } from "@renderer/components";
 import { t } from "i18next";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export default () => {
   const navigate = useNavigate();
@@ -12,6 +16,9 @@ export default () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [meanings, setMeanings] = useState<MeaningType[]>([]);
   const { webApi } = useContext(AppSettingsProviderContext);
+  const { currentHotkeys, enabled } = useContext(
+    HotKeysSettingsProviderContext
+  );
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [nextPage, setNextPage] = useState(1);
 
@@ -33,6 +40,26 @@ export default () => {
     fetchMeanings(1);
   }, []);
 
+  useHotkeys(
+    [currentHotkeys.PlayPreviousSegment, currentHotkeys.PlayNextSegment],
+    (keyboardEvent, hotkeyEvent) => {
+      keyboardEvent.preventDefault();
+
+      switch (hotkeyEvent.keys.join("")) {
+        case currentHotkeys.PlayPreviousSegment.toLowerCase():
+          document.getElementById("vocabulary-previous-button").click();
+          break;
+        case currentHotkeys.PlayNextSegment.toLowerCase():
+          document.getElementById("vocabulary-next-button").click();
+          break;
+      }
+    },
+    {
+      enabled,
+    },
+    []
+  );
+
   if (loading) {
     return <LoaderSpin />;
   }
@@ -55,6 +82,7 @@ export default () => {
               variant="secondary"
               size="icon"
               className="rounded-full"
+              id="vocabulary-previous-button"
               onClick={() => {
                 if (currentIndex > 0) {
                   setCurrentIndex(currentIndex - 1);
@@ -70,6 +98,7 @@ export default () => {
               variant="secondary"
               size="icon"
               className="rounded-full"
+              id="vocabulary-next-button"
               onClick={() => {
                 if (currentIndex < meanings.length - 1) {
                   setCurrentIndex(currentIndex + 1);