pascallinxweiler/Clipify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Add clear button to remove video - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-30 08:28:59 +01:00
parent aaecd3e203
commit f131a681ab
1 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/video-editor.tsx
View File

@@ -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>