9/30/2025
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user