9/30/2025

src/app/srt-player/components/AppCard.tsx

@@ -11,7 +11,7 @@ export default function AppCard() {
     const [srtUrl, setSrtUrl] = useState<string | null>(null);
 
     return (
-        <div className="min-w-[410px] max-h-[1000px] max-w-[1400px] flex items-center flex-col bg-gray-200 rounded shadow-2xl w-8/12 py-12">
+        <div className="min-w-[410px] max-w-[1000px] w-10/12 flex items-center flex-col bg-gray-200 rounded shadow-2xl py-12">
             <p className="text-4xl font-extrabold">SRT Video Player</p>
             <VideoPanel
                 videoUrl={videoUrl}

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

@@ -155,16 +155,14 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>((
 
     return (
         <div className="flex flex-col w-9/12" onKeyDown={handleKeyDownEvent}>
-            <video className="max-h-80" ref={videoRef} onTimeUpdate={timeUpdate}></video>
+            <video className="w-12/12" ref={videoRef} onTimeUpdate={timeUpdate}></video>
             <SubtitleDisplay subtitle={subtitle}></SubtitleDisplay>
-            <div className="buttons">
+            <div className="buttons flex mt-2 gap-2 flex-wrap">
-                <ul className="">
                 <Button label={isPlaying ? 'PAUSE' : 'PLAY'} onClick={togglePlayPause}></Button>
                 <Button label="NEXT" onClick={next}></Button>
                 <Button label="PREVIOUS" onClick={previous}></Button>
                 <Button label="RESTART" onClick={restart}></Button>
                 <Button label={`AUTOPAUSE(${autoPause ? 'Y' : 'N'})`} onClick={handleAutoPauseToggle}></Button>
-                </ul>
             </div>
             <input className="seekbar" type="range" min={0} max={srtLength} onChange={handleSeek} step={1} value={progress}></input>
             <span>{spanText}</span>

src/app/word-board/page.tsx

@@ -139,9 +139,10 @@ export default function Home() {
   //   inputRef.current.value = '';
   // }
   return (
-    <div onKeyDown={handleKeyDown} className="p-5 my-10 mx-auto bg-gray-200 rounded shadow-2xl w-[1050px]">
+    <div className="flex w-screen h-screen justify-center items-center">
+      <div onKeyDown={handleKeyDown} className="p-5 bg-gray-200 rounded shadow-2xl">
         <WordBoard selectWord={selectWord} words={words as [Word]} setWords={setWords} />
-      <div className="flex justify-center rounded mt-3 w-[1000px]">
+        <div className="flex justify-center rounded mt-3">
           <input ref={inputRef} placeholder="word to operate" type="text" className="focus:outline-none border-b-2 border-black" />
           <Button label="插入" onClick={insertWord}></Button>
           <Button label="删除" onClick={deleteWord}></Button>
@@ -153,5 +154,6 @@ export default function Home() {
         </div>
         <input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>
       </div>
+    </div>
   );
 }

src/components/Button.tsx

@@ -1,6 +1,6 @@
 export default function Button({ label, onClick }: { label: string, onClick?: () => void }) {
   return (
-    <button onClick={onClick} className="m-1 px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300">
+    <button onClick={onClick} className="px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300">
       {label}
     </button>
   );

src/constants.ts

@@ -1,4 +1,4 @@
-export const BOARD_WIDTH = 1000;
+export const BOARD_WIDTH = 800;
-export const BOARD_HEIGHT = 600;
+export const BOARD_HEIGHT = 500;
 export const TEXT_SIZE = 30;
 export const TEXT_WIDTH = TEXT_SIZE * 0.6;