From f131a681ab8e5c13e8bd992cf8b4516f905df436 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Fri, 30 Jan 2026 08:28:59 +0100
Subject: [PATCH] [dyad] Add clear button to remove video - wrote 1 file(s)

---
 src/components/video-editor.tsx | 57 ++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/video-editor.tsx b/src/components/video-editor.tsx
index cdfef46..ebf7a21 100644
--- a/src/components/video-editor.tsx
+++ b/src/components/video-editor.tsx
@@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
 import { Progress } from "@/components/ui/progress";
-import { UploadCloud, Scissors, Download, Loader2, RotateCcw } from "lucide-react";
+import { UploadCloud, Scissors, Download, Loader2, RotateCcw, Trash2 } from "lucide-react";
 import { getFFmpeg } from "@/lib/ffmpeg";
 import { fetchFile } from "@ffmpeg/util";
 
@@ -148,6 +148,19 @@ export function VideoEditor() {
     }
   };
 
+  const handleClear = () => {
+    if (videoSrc) {
+      URL.revokeObjectURL(videoSrc);
+    }
+    setVideoSrc(null);
+    setVideoFile(null);
+    setDuration(0);
+    setTrimValues([0, 0]);
+    setIsTrimming(false);
+    setTrimmedVideoUrl(null);
+    setProgress(0);
+  };
+
   return (
     <Card className="w-full shadow-lg rounded-2xl border">
       <CardHeader className="text-center">
@@ -220,25 +233,31 @@ export function VideoEditor() {
         )}
       </CardContent>
       {videoSrc && (
-        <CardFooter className="flex justify-end space-x-4 p-6">
-            <Button variant="ghost" size="lg" onClick={handleReset} disabled={isTrimming}>
-                <RotateCcw className="mr-2 h-5 w-5" />
-                Reset
-            </Button>
-            <Button variant="outline" size="lg" onClick={handleCutVideo} disabled={isTrimming}>
-                {isTrimming ? (
-                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                ) : (
-                    <Scissors className="mr-2 h-5 w-5" />
-                )}
-                {isTrimming ? "Trimming..." : "Cut Video"}
-            </Button>
-            <Button asChild variant="default" size="lg" disabled={!trimmedVideoUrl || isTrimming}>
-                <a href={trimmedVideoUrl!} download={`trimmed-${videoFile?.name || 'video.mp4'}`}>
-                    <Download className="mr-2 h-5 w-5" />
-                    Export
-                </a>
+        <CardFooter className="flex justify-between items-center p-6">
+            <Button variant="destructive" size="lg" onClick={handleClear} disabled={isTrimming}>
+                <Trash2 className="mr-2 h-5 w-5" />
+                Clear
             </Button>
+            <div className="flex space-x-4">
+                <Button variant="ghost" size="lg" onClick={handleReset} disabled={isTrimming}>
+                    <RotateCcw className="mr-2 h-5 w-5" />
+                    Reset
+                </Button>
+                <Button variant="outline" size="lg" onClick={handleCutVideo} disabled={isTrimming}>
+                    {isTrimming ? (
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                        <Scissors className="mr-2 h-5 w-5" />
+                    )}
+                    {isTrimming ? "Trimming..." : "Cut Video"}
+                </Button>
+                <Button asChild variant="default" size="lg" disabled={!trimmedVideoUrl || isTrimming}>
+                    <a href={trimmedVideoUrl!} download={`trimmed-${videoFile?.name || 'video.mp4'}`}>
+                        <Download className="mr-2 h-5 w-5" />
+                        Export
+                    </a>
+                </Button>
+            </div>
         </CardFooter>
       )}
     </Card>