Function VideoDialog

apps/frontend/src/components/media/video-dialog.tsx:32–263

({
  open,
  onOpenChange,
  generatedImage,
  prompt,
  onVideoGenerated,
}: VideoDialogProps)

}

export function VideoDialog({
  open,
  onOpenChange,
  generatedImage,
  prompt,
  onVideoGenerated,
}: VideoDialogProps) {
  const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);
  const [videoModels, setVideoModels] = useState<VideoModel[]>([]);
  const [selectedVideoModel, setSelectedVideoModel] = useState("");
  const [isLoadingModels, setIsLoadingModels] = useState(false);
  const isMounted = useRef(true);

  const fetch = useFetch();
  const { toast } = useToast();

  // Track component mount status
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  // Reset all state when dialog closes
  useEffect(() => {
    if (!open) {
      setIsGeneratingVideo(false);
      setSelectedVideoModel("");
      setIsLoadingModels(false);
    }
  }, [open]);

  // Fetch video models
  useEffect(() => {
    const fetchVideoModels = async () => {
      setIsLoadingModels(true);
      try {
        const response = await fetch("/models");
        if (response.ok) {
          const data = await response.json();
          if (data.list && data.list["video"]) {
            setVideoModels(data.list["video"]);
            if (data.list["video"].length > 0) {
              setSelectedVideoModel(data.list["video"][0].model);
            }
          }
        }
      } catch (error) {
        console.error("Error loading video models:", error);
        toast({
          title: "Error",
          description: "Failed to load video models. Please try again.",
          variant: "destructive",
        });
        setVideoModels([]);
      } finally {
        setIsLoadingModels(false);