fix(frontend): resolve disabled export button and synchronize editor …

src/components/FileUpload.tsx

@@ -12,13 +12,15 @@ interface Props {
   currentFile: File | null;
   fileError: string;
   duration: number;
+  isLoading?: boolean;
 }
 
 export default function FileUpload({
   onFileSelect,
   currentFile,
   fileError,
   duration,
+  isLoading = false,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -259,6 +261,24 @@ export default function FileUpload({
       />
     </div>
   );
+
+  // ── Loading state ──
+  const LoadingState = () => (
+    <div className="flex flex-col items-center justify-center gap-4 py-12 px-6 border-2 border-dashed border-[var(--border)] rounded-xl bg-[var(--bg)] animate-pulse">
+      <div className="relative flex items-center justify-center w-16 h-16">
+        <div className="absolute w-12 h-12 rounded-full border-4 border-film-500/20 border-t-film-600 animate-spin" />
+        <Film size={20} className="text-film-600 animate-pulse" />
+      </div>
+      <div className="text-center">
+        <p className="font-heading font-semibold text-[var(--text)] text-base">
+          Processing Video
+        </p>
+        <p className="text-sm text-[var(--muted)] mt-1">
+          Extracting dimensions, aspect ratio, and metadata...
+        </p>
+      </div>
+    </div>
+  );
 
   return (
     <>
@@ -305,7 +325,7 @@ export default function FileUpload({
             {warning}
           </p>
         )}
-        {currentFile ? <FileInfo /> : <DropZone />}
+        {isLoading ? <LoadingState /> : currentFile ? <FileInfo /> : <DropZone />}
       </div>
     </>
   );

src/components/VideoEditor.tsx

@@ -271,7 +271,7 @@ export default function VideoEditor() {
     }
   }, [status]);
 
-  const isProcessing = status === "loading-engine" || status === "exporting";
+  const isProcessing = status === "loading" || status === "loading-engine" || status === "exporting";
   const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
 
   const intervalSeconds = useMemo(() => {
@@ -370,7 +370,13 @@ export default function VideoEditor() {
 
           <div className="space-y-4 min-w-0">
             <div className="bg-[var(--surface)] rounded-xl p-3 border border-[var(--border)] animate-fade-in">
-              <FileUpload onFileSelect={handleFileSelect} currentFile={file} fileError={fileError} duration={duration} />
+              <FileUpload
+                onFileSelect={handleFileSelect}
+                currentFile={file}
+                fileError={fileError}
+                duration={duration}
+                isLoading={status === "loading"}
+              />
 
               {!file && (
                 <div className="text-center text-[var(--muted)] py-6">

src/hooks/useVideoEditor.ts

@@ -353,12 +353,13 @@ export function useVideoEditor() {
 
   const handleFileSelect = useCallback(async (selectedFile: File) => {
     setResult(null);
-    setStatus("idle");
+    setStatus("loading");
     setError(null);
     setFile(null);
     setVideoMetadata(null);
     if (!selectedFile.type.startsWith("video/")) {
       setFileError("Please upload a video file only.");
+      setStatus("idle");
       return;
     }
 
@@ -411,6 +412,7 @@ export function useVideoEditor() {
       setDuration(dur);
       setVideoMetadata({ width, height, duration: dur });
       setFile(selectedFile);
+      setStatus("idle");
 
       if (dimensionCheck === "warning") {
         console.warn(`[Reframe] High resolution video detected (${width}×${height}). Export may be slow.`);
@@ -613,6 +615,26 @@ export function useVideoEditor() {
     }
    },[result?.blobUrl])
 
+  // Reset export status/result/error when recipe or options change after an export/error
+  useEffect(() => {
+    if (status === "done" || status === "error") {
+      setStatus("idle");
+      setResult(null);
+      setError(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    recipe,
+    musicFile,
+    musicVolume,
+    originalAudioVolume,
+    loopMusic,
+    overlayFile,
+    overlayPosition,
+    overlaySize,
+    overlayOpacity,
+  ]);
+
   useEffect(() => {
     return () => {
       terminateFFmpeg();

src/lib/types.ts

@@ -68,6 +68,7 @@ export interface ExportResult {
 
 export type ExportStatus =
   | "idle"
+  | "loading"
   | "loading-engine"
   | "exporting"
   | "done"