Added clear button to reset editor state

src/components/FileUpload.tsx

@@ -9,13 +9,15 @@ import { MAX_FILE_SIZE, WARNING_FILE_SIZE } from "@/lib/types";
 
 interface Props {
   onFileSelect: (file: File) => void;
+  onClear: () => void;
   currentFile: File | null;
   fileError: string;
   duration: number;
 }
 
 export default function FileUpload({
   onFileSelect,
+  onClear,
   currentFile,
   fileError,
   duration,
@@ -125,6 +127,13 @@ export default function FileUpload({
     if (file) handleFile(file);
   };
 
+  const handleClear = () => {
+    setError("");
+    setWarning("");
+    if (inputRef.current) inputRef.current.value = "";
+    onClear();
+  };
+
   // ── File info (shown after upload) ───────────────────
   const FileInfo = () => (
     <div className="px-4 py-3 bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius)] shadow-[var(--shadow)]">
@@ -158,14 +167,28 @@ export default function FileUpload({
           </div>
         </div>
 
-        <button
-          type="button"
-          onClick={() => inputRef.current?.click()}
-          className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
-        >
-          Change
-          <span className="text-[var(--muted)] ml-1">(Ctrl+O)</span>
-        </button>
+        <div className="flex flex-wrap items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
+            aria-label="Change video file"
+          >
+            Change
+            <span className="text-[var(--muted)] ml-1">(Ctrl+O)</span>
+          </button>
+          <span className="text-[var(--border)]" aria-hidden="true">
+            |
+          </span>
+          <button
+            type="button"
+            onClick={handleClear}
+            className="text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-md border border-[var(--error-border)] text-[var(--error)] bg-[var(--error-bg)] hover:bg-[var(--error-hover)] transition-colors"
+            aria-label="Clear uploaded video and reset editor"
+          >
+            Clear
+          </button>
+        </div>
       </div>
 
       <p className="text-xs text-[var(--muted)] mt-3 break-words">

src/components/VideoEditor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useVideoEditor } from "@/hooks/useVideoEditor";
 import { TextOverlay } from "@/lib/types";
 import FileUpload from "./FileUpload";
@@ -239,6 +239,22 @@ export default function VideoEditor() {
     setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const downloadRef = useRef<HTMLDivElement>(null);
 
+  const handleClearUpload = useCallback(() => {
+    if (status === "loading-engine" || status === "exporting") {
+      cancelExport();
+    }
+    reset();
+    setSelectedTextId(null);
+    setOpenSections({
+      resize: true,
+      trim: false,
+      rotation: false,
+      text: false,
+      audio: false,
+      export: false,
+    });
+  }, [reset, cancelExport, status]);
+
   /**
    * Updates a text overlay property and syncs with recipe.
    */
@@ -370,7 +386,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}
+                onClear={handleClearUpload}
+                currentFile={file}
+                fileError={fileError}
+                duration={duration}
+              />
 
               {!file && (
                 <div className="text-center text-[var(--muted)] py-6">

src/hooks/useVideoEditor.ts

@@ -640,18 +640,49 @@ export function useVideoEditor() {
 
 
   const reset = useCallback(() => {
+    exportCancelledRef.current = true;
+    exportAbortControllerRef.current?.abort();
+    exportAbortControllerRef.current = null;
+    terminateFFmpeg();
+
     if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl);
+
     setFile(null);
     setVideoMetadata(null);
     setDuration(0);
-    setRecipe(DEFAULT_RECIPE);
+    setCurrentTime(0);
+    setFileError("");
+    setRecipe({
+      ...DEFAULT_RECIPE,
+      soundOnCompletion:
+        typeof window !== "undefined" &&
+        localStorage.getItem("soundOnCompletion") === "true",
+    });
     setStatus("idle");
     setProgress(0);
     setResult(null);
     setError(null);
     setExportStartedAt(null);
+
+    setMusicFile(null);
+    setMusicVolume(70);
+    setOriginalAudioVolume(40);
+    setLoopMusic(false);
+    setOverlayFile(null);
+    setOverlayPosition("bottom-right");
+    setOverlaySize(150);
+    setOverlayOpacity(100);
+
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+
     try {
       localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem("reframe-settings");
     } catch {
       // ignore
     }