9/30/2025

This commit is contained in:
2025-09-30 08:57:07 +08:00
parent 46f027f697
commit e846616832
5 changed files with 25 additions and 25 deletions

View File

@@ -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}

View File

@@ -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">
<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 className="buttons flex mt-2 gap-2 flex-wrap">
<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>
</div>
<input className="seekbar" type="range" min={0} max={srtLength} onChange={handleSeek} step={1} value={progress}></input>
<span>{spanText}</span>

View File

@@ -139,19 +139,21 @@ 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]">
<WordBoard selectWord={selectWord} words={words as [Word]} setWords={setWords} />
<div className="flex justify-center rounded mt-3 w-[1000px]">
<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>
<Button label="搜索" onClick={searchWord}></Button>
<Button label="导入" onClick={importWords}></Button>
<Button label="导" onClick={exportWords}></Button>
<Button label="删光" onClick={deleteAll}></Button>
{/* <Button label="朗读" onClick={readWordAloud}></Button> */}
<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">
<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>
<Button label="搜索" onClick={searchWord}></Button>
<Button label="导" onClick={importWords}></Button>
<Button label="导出" onClick={exportWords}></Button>
<Button label="删光" onClick={deleteAll}></Button>
{/* <Button label="朗读" onClick={readWordAloud}></Button> */}
</div>
<input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>
</div>
<input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>
</div>
);
}

View File

@@ -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>
);

View File

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