修复了按键监听的问题

src/app/alphabet/MemoryCard.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/Button";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { Letter, SupportedAlphabets } from "@/interfaces";
-import { Dispatch, SetStateAction, useRef, useState } from "react";
+import { Dispatch, KeyboardEvent, SetStateAction, useEffect, useRef, useState } from "react";
 
 export default function MemoryCard(
     {
@@ -19,9 +19,21 @@ export default function MemoryCard(
     const [more, setMore] = useState(false);
     const [ipaDisplay, setIPADisplay] = useState(true);
     const [letterDisplay, setLetterDisplay] = useState(true);
+
+    useEffect(() => {
+        const handleKeydown = (e: globalThis.KeyboardEvent) => {
+            if (e.key === ' ') refresh();
+        }
+        document.addEventListener('keydown', handleKeydown);
+        return () => document.removeEventListener('keydown', handleKeydown);
+    });
+
     const letter = alphabet[index];
+    const refresh = () => {
+        setIndex(Math.floor(Math.random() * alphabet.length));
+    }
     return (
-        <div className="w-full flex justify-center items-center">
+        <div className="w-full flex justify-center items-center" onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => e.preventDefault()}>
             <div className="m-4 p-4 w-full md:w-[60dvw] flex-col rounded-2xl shadow border-gray-200 border flex justify-center items-center">
                 <div className="w-full flex justify-end items-center">
                     <IconClick size={32} alt="close" src={IMAGES.close} onClick={() => setChosenAlphabet(null)}></IconClick>
@@ -31,7 +43,7 @@ export default function MemoryCard(
                     <span className="text-5xl md:text-7xl text-gray-400">{ipaDisplay ? letter.letter_sound_ipa : ''}</span>
                 </div>
                 <div className="flex flex-row mt-32 items-center justify-center gap-2">
-                    <IconClick size={48} alt="refresh" src={IMAGES.refresh} onClick={() => setIndex(Math.floor(Math.random() * alphabet.length))}></IconClick>
+                    <IconClick size={48} alt="refresh" src={IMAGES.refresh} onClick={refresh}></IconClick>
                     <IconClick size={48} alt="more" src={IMAGES.more_horiz} onClick={() => setMore(!more)}></IconClick>
                     {
                         more ? (<>

src/app/srt-player/VideoPlayer/VideoPanel.tsx

@@ -39,6 +39,24 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>((
         setIsPlaying(!video.paused);
     }, [videoRef, videoUrl]);
 
+    useEffect(() => {
+        const handleKeyDownEvent = (e: globalThis.KeyboardEvent) => {
+            if (e.key === 'n') {
+                next();
+            } else if (e.key === 'p') {
+                previous();
+            } else if (e.key === ' ') {
+                togglePlayPause();
+            } else if (e.key === 'r') {
+                restart();
+            } else if (e.key === 'a') {
+                ; handleAutoPauseToggle();
+            }
+        }
+        document.addEventListener('keydown', handleKeyDownEvent);
+        return () => document.removeEventListener('keydown', handleKeyDownEvent)
+    });
+
     useEffect(() => {
         const cb = () => {
             if (ready.current.all()) {
@@ -139,22 +157,8 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>((
         }
     }
 
-    const handleKeyDownEvent = (e: KeyboardEvent<HTMLDivElement>) => {
-        if (e.key === 'n') {
-            next();
-        } else if (e.key === 'p') {
-            previous();
-        } else if (e.key === ' ') {
-            togglePlayPause();
-        } else if (e.key === 'r') {
-            restart();
-        } else if (e.key === 'a') {
-            ; handleAutoPauseToggle();
-        }
-    }
-
     return (
-        <div className="w-full flex flex-col" onKeyDown={handleKeyDownEvent}>
+        <div className="w-full flex flex-col">
             <video className="bg-gray-200" ref={videoRef} onTimeUpdate={timeUpdate}></video>
             <SubtitleDisplay subtitle={subtitle}></SubtitleDisplay>
             <div className="buttons flex mt-2 gap-2 flex-wrap">

src/app/srt-player/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useState } from "react";
+import { KeyboardEvent, useRef, useState } from "react";
 import UploadArea from "./UploadArea";
 import VideoPanel from "./VideoPlayer/VideoPanel";
 
@@ -10,7 +10,7 @@ export default function Home() {
   const [videoUrl, setVideoUrl] = useState<string | null>(null);
   const [srtUrl, setSrtUrl] = useState<string | null>(null);
   return (
-    <div className="flex w-screen pt-8 items-center justify-center">
+    <div className="flex w-screen pt-8 items-center justify-center" onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => e.preventDefault()}>
       <div className="w-[80vw] md:w-[45vw] flex items-center flex-col">
         <VideoPanel
           videoUrl={videoUrl}