learn-languages/src/app/srt-player/UploadArea.tsx

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