first commit

src/app/srt-player/UploadArea.tsx

@@ -0,0 +1,53 @@
+import Button from "@/components/Button";
+import { useRef, useState } from "react";
+
+export default function UploadArea(
+  {
+    setVideoUrl,
+    setSrtUrl
+  }: {
+    setVideoUrl: (url: string | null) => void;
+    setSrtUrl: (url: string | null) => void;
+  }
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [SrtFile, setSrtFile] = useState<File | null>(null);
+
+  const uploadVideo = () => {
+    const input = inputRef.current;
+    if (input) {
+      input.setAttribute('accept', 'video/*');
+      input.click();
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (file) {
+          setVideoFile(file);
+          setVideoUrl(URL.createObjectURL(file));
+        }
+      };
+    }
+  }
+  const uploadSRT = () => {
+    const input = inputRef.current;
+    if (input) {
+      input.setAttribute('accept', '.srt');
+      input.click();
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (file) {
+          setSrtFile(file);
+          setSrtUrl(URL.createObjectURL(file));
+        }
+      };
+    }
+  }
+  return (
+    <div className="w-full flex flex-col gap-2 m-2">
+      <Button label="上传视频" onClick={uploadVideo} />
+      <Button label="上传字幕" onClick={uploadSRT} />
+      <input type="file" className="hidden" ref={inputRef} />
+    </div >
+  )
+}