diff --git a/src/components/video-editor.tsx b/src/components/video-editor.tsx index 8f5ed36..f3f9349 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 } from "lucide-react"; import { getFFmpeg } from "@/lib/ffmpeg"; import { fetchFile } from "@ffmpeg/util"; @@ -26,6 +26,26 @@ export function VideoEditor() { getFFmpeg(); }, []); + useEffect(() => { + const video = videoRef.current; + if (!video) return; + + const handleTimeUpdate = () => { + if (video.currentTime > trimValues[1]) { + video.pause(); + video.currentTime = trimValues[0]; + } + }; + + video.addEventListener('timeupdate', handleTimeUpdate); + + return () => { + if (video) { + video.removeEventListener('timeupdate', handleTimeUpdate); + } + }; + }, [trimValues]); + const handleFileChange = (event: ChangeEvent) => { const file = event.target.files?.[0]; if (file) { @@ -43,6 +63,17 @@ export function VideoEditor() { setTrimValues([0, video.duration]); }; + const handleTrimValueChange = (newValues: number[]) => { + if (videoRef.current) { + if (newValues[0] !== trimValues[0]) { + videoRef.current.currentTime = newValues[0]; + } else if (newValues[1] !== trimValues[1]) { + videoRef.current.currentTime = newValues[1]; + } + } + setTrimValues(newValues); + }; + const formatTime = (timeInSeconds: number) => { if (isNaN(timeInSeconds) || timeInSeconds < 0) { return "00:00.000"; @@ -101,12 +132,6 @@ export function VideoEditor() { setIsTrimming(false); }; - const handleUntrim = () => { - setTrimmedVideoUrl(null); - setTrimValues([0, duration]); - setProgress(0); - }; - return ( @@ -123,11 +148,10 @@ export function VideoEditor() {
@@ -135,7 +159,7 @@ export function VideoEditor() {
{videoSrc && ( - {trimmedVideoUrl && ( - - )}