"use client"; import { ScrollArea } from "../ui/scroll-area"; import { Button } from "../ui/button"; import { Scissors, ArrowLeftToLine, ArrowRightToLine, Trash2, Snowflake, Copy, SplitSquareHorizontal, MoreVertical, Volume2, VolumeX, Pause, Play, } from "lucide-react"; import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "../ui/tooltip"; import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store"; import { useMediaStore } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store"; import { processMediaFiles } from "@/lib/media-processing"; import { toast } from "sonner"; import { useState, useRef, useEffect } from "react"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their clips. // You can drag media here to add it to your project. // Clips can be trimmed, deleted, and moved. const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClip, clearSelectedClip } = useTimelineStore(); const { mediaItems, addMediaItem } = useMediaStore(); const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore(); const [isDragOver, setIsDragOver] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [zoomLevel, setZoomLevel] = useState(1); const dragCounterRef = useRef(0); const timelineRef = useRef(null); // Unified context menu state const [contextMenu, setContextMenu] = useState<{ type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null>(null); // Update timeline duration when tracks change useEffect(() => { const totalDuration = getTotalDuration(); setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline }, [tracks, setDuration, getTotalDuration]); // Close context menu on click elsewhere useEffect(() => { const handleClick = () => setContextMenu(null); if (contextMenu) { window.addEventListener("click", handleClick); return () => window.removeEventListener("click", handleClick); } }, [contextMenu]); // Keyboard event for deleting selected clip useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.key === "Delete" || e.key === "Backspace") && selectedClip) { removeClipFromTrack(selectedClip.trackId, selectedClip.clipId); clearSelectedClip(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [selectedClip, removeClipFromTrack, clearSelectedClip]); const handleDragEnter = (e: React.DragEvent) => { // When something is dragged over the timeline, show overlay e.preventDefault(); // Don't show overlay for timeline clips - they're handled by tracks if (e.dataTransfer.types.includes("application/x-timeline-clip")) { return; } dragCounterRef.current += 1; if (!isDragOver) { setIsDragOver(true); } }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); }; const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); // Don't update state for timeline clips - they're handled by tracks if (e.dataTransfer.types.includes("application/x-timeline-clip")) { return; } dragCounterRef.current -= 1; if (dragCounterRef.current === 0) { setIsDragOver(false); } }; const handleDrop = async (e: React.DragEvent) => { // When media is dropped, add it as a new track/clip e.preventDefault(); setIsDragOver(false); dragCounterRef.current = 0; // Ignore timeline clip drags - they're handled by track-specific handlers const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip"); if (hasTimelineClip) { return; } const mediaItemData = e.dataTransfer.getData("application/x-media-item"); if (mediaItemData) { // Handle media item drops by creating new tracks try { const { id, type } = JSON.parse(mediaItemData); const mediaItem = mediaItems.find((item) => item.id === id); if (!mediaItem) { toast.error("Media item not found"); return; } // Add to video or audio track depending on type const trackType = type === "audio" ? "audio" : "video"; const newTrackId = addTrack(trackType); addClipToTrack(newTrackId, { mediaId: mediaItem.id, name: mediaItem.name, duration: mediaItem.duration || 5, startTime: 0, trimStart: 0, trimEnd: 0, }); toast.success(`Added ${mediaItem.name} to new ${trackType} track`); } catch (error) { // Show error if parsing fails console.error("Error parsing media item data:", error); toast.error("Failed to add media to timeline"); } } else if (e.dataTransfer.files?.length > 0) { // Handle file drops by creating new tracks setIsProcessing(true); try { const processedItems = await processMediaFiles(e.dataTransfer.files); for (const processedItem of processedItems) { addMediaItem(processedItem); const currentMediaItems = useMediaStore.getState().mediaItems; const addedItem = currentMediaItems.find( (item) => item.name === processedItem.name && item.url === processedItem.url ); if (addedItem) { const trackType = processedItem.type === "audio" ? "audio" : "video"; const newTrackId = addTrack(trackType); addClipToTrack(newTrackId, { mediaId: addedItem.id, name: addedItem.name, duration: addedItem.duration || 5, startTime: 0, trimStart: 0, trimEnd: 0, }); } } } catch (error) { // Show error if file processing fails console.error("Error processing external files:", error); toast.error("Failed to process dropped files"); } finally { setIsProcessing(false); } } }; const handleTimelineClick = (e: React.MouseEvent) => { const timeline = timelineRef.current; if (!timeline || duration === 0) return; const rect = timeline.getBoundingClientRect(); const x = e.clientX - rect.left; const timelineWidth = rect.width; const visibleDuration = duration / zoomLevel; const clickedTime = (x / timelineWidth) * visibleDuration; seek(Math.max(0, Math.min(duration, clickedTime))); }; const handleWheel = (e: React.WheelEvent) => { e.preventDefault(); const delta = e.deltaY > 0 ? -0.05 : 0.05; setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta))); }; const dragProps = { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, }; return (
{/* Show overlay when dragging media over the timeline */} {isDragOver && (
Drop media here to add to timeline
)} {/* Toolbar */}
{/* Play/Pause Button */} {isPlaying ? "Pause (Space)" : "Play (Space)"}
{/* Time Display */}
{Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s
{/* Test Clip Button - for debugging */} {tracks.length === 0 && ( Add a test clip to try playback )}
Split clip (S) Split and keep left (A) Split and keep right (D) Separate audio (E) Duplicate clip (Ctrl+D) Freeze frame (F) Delete clip (Delete)
{/* Timeline Container */}
{/* Timeline Header with Ruler */}
{/* Track Labels Header */}
Tracks
{zoomLevel.toFixed(1)}x
{/* Timeline Ruler */}
{/* Time markers */} {(() => { // Calculate appropriate time interval based on zoom level const getTimeInterval = (zoom: number) => { const pixelsPerSecond = 50 * zoom; if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out return 30; // Every 30s when extremely zoomed out }; const interval = getTimeInterval(zoomLevel); const markerCount = Math.ceil(duration / interval) + 1; return Array.from({ length: markerCount }, (_, i) => { const time = i * interval; if (time > duration) return null; const isMainMarker = time % (interval >= 1 ? Math.max(1, interval) : 1) === 0; return (
{(() => { const formatTime = (seconds: number) => { const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const secs = seconds % 60; if (hours > 0) { return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; } else if (minutes > 0) { return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`; } else if (interval >= 1) { return `${Math.floor(secs)}s`; } else { return `${secs.toFixed(1)}s`; } }; return formatTime(time); })()}
); }).filter(Boolean); })()} {/* Playhead in ruler */}
{/* Tracks Area */}
{/* Track Labels */}
{tracks.length === 0 ? (

No tracks

Drop media to create tracks

) : (
{tracks.map((track) => (
{track.name} {track.muted && ( Muted )}
))}
)}
{/* Timeline Tracks Content */}
0 ? `${tracks.length * 60}px` : "200px", }} onClick={handleTimelineClick} onWheel={handleWheel} > {tracks.length === 0 ? (

Drop media here to start

) : ( <> {tracks.map((track, index) => (
{ e.preventDefault(); setContextMenu({ type: 'track', trackId: track.id, x: e.clientX, y: e.clientY, }); }} >
))} {/* Playhead for tracks area */}
)}
{/* Clean Unified Context Menu */} {contextMenu && (
e.preventDefault()} > {contextMenu.type === 'track' ? ( // Track context menu <>
) : ( // Clip context menu <>
)}
)}
); } function TimelineTrackContent({ track, zoomLevel, setContextMenu, }: { track: TimelineTrack; zoomLevel: number; setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void; }) { const { mediaItems } = useMediaStore(); const { tracks, moveClipToTrack, updateClipTrim, updateClipStartTime, addClipToTrack, removeClipFromTrack, toggleTrackMute, selectedClip, selectClip, } = useTimelineStore(); const { currentTime } = usePlaybackStore(); const [isDropping, setIsDropping] = useState(false); const [dropPosition, setDropPosition] = useState(null); const [isDraggedOver, setIsDraggedOver] = useState(false); const [wouldOverlap, setWouldOverlap] = useState(false); const [resizing, setResizing] = useState<{ clipId: string; side: "left" | "right"; startX: number; initialTrimStart: number; initialTrimEnd: number; } | null>(null); const dragCounterRef = useRef(0); const [clipMenuOpen, setClipMenuOpen] = useState(null); // Handle clip deletion const handleDeleteClip = (clipId: string) => { removeClipFromTrack(track.id, clipId); }; const handleResizeStart = ( e: React.MouseEvent, clipId: string, side: "left" | "right" ) => { e.stopPropagation(); e.preventDefault(); const clip = track.clips.find((c) => c.id === clipId); if (!clip) return; setResizing({ clipId, side, startX: e.clientX, initialTrimStart: clip.trimStart, initialTrimEnd: clip.trimEnd, }); }; const updateTrimFromMouseMove = (e: { clientX: number }) => { if (!resizing) return; const clip = track.clips.find((c) => c.id === resizing.clipId); if (!clip) return; const deltaX = e.clientX - resizing.startX; const deltaTime = deltaX / (50 * zoomLevel); if (resizing.side === "left") { const newTrimStart = Math.max( 0, Math.min( clip.duration - clip.trimEnd - 0.1, resizing.initialTrimStart + deltaTime ) ); updateClipTrim(track.id, clip.id, newTrimStart, clip.trimEnd); } else { const newTrimEnd = Math.max( 0, Math.min( clip.duration - clip.trimStart - 0.1, resizing.initialTrimEnd - deltaTime ) ); updateClipTrim(track.id, clip.id, clip.trimStart, newTrimEnd); } }; const handleResizeMove = (e: React.MouseEvent) => { updateTrimFromMouseMove(e); }; const handleResizeEnd = () => { setResizing(null); }; const handleClipDragStart = (e: React.DragEvent, clip: any) => { const dragData = { clipId: clip.id, trackId: track.id, name: clip.name }; e.dataTransfer.setData( "application/x-timeline-clip", JSON.stringify(dragData) ); e.dataTransfer.effectAllowed = "move"; // Add visual feedback to the dragged element const target = e.currentTarget.parentElement as HTMLElement; target.style.opacity = "0.5"; target.style.transform = "scale(0.95)"; }; const handleClipDragEnd = (e: React.DragEvent) => { // Reset visual feedback const target = e.currentTarget.parentElement as HTMLElement; target.style.opacity = ""; target.style.transform = ""; }; const handleTrackDragOver = (e: React.DragEvent) => { e.preventDefault(); // Handle both timeline clips and media items const hasTimelineClip = e.dataTransfer.types.includes( "application/x-timeline-clip" ); const hasMediaItem = e.dataTransfer.types.includes( "application/x-media-item" ); if (!hasTimelineClip && !hasMediaItem) return; if (hasMediaItem) { try { const mediaItemData = e.dataTransfer.getData( "application/x-media-item" ); if (mediaItemData) { const { type } = JSON.parse(mediaItemData); const isCompatible = (track.type === "video" && (type === "video" || type === "image")) || (track.type === "audio" && type === "audio"); if (!isCompatible) { e.dataTransfer.dropEffect = "none"; return; } } } catch (error) { } } // Calculate drop position for overlap checking const trackContainer = e.currentTarget.querySelector( ".track-clips-container" ) as HTMLElement; let dropTime = 0; if (trackContainer) { const rect = trackContainer.getBoundingClientRect(); const mouseX = Math.max(0, e.clientX - rect.left); dropTime = mouseX / (50 * zoomLevel); } // Check for potential overlaps and show appropriate feedback let wouldOverlap = false; if (hasMediaItem) { try { const mediaItemData = e.dataTransfer.getData( "application/x-media-item" ); if (mediaItemData) { const { id } = JSON.parse(mediaItemData); const mediaItem = mediaItems.find((item) => item.id === id); if (mediaItem) { const newClipDuration = mediaItem.duration || 5; const snappedTime = Math.round(dropTime * 10) / 10; const newClipEnd = snappedTime + newClipDuration; wouldOverlap = track.clips.some((existingClip) => { const existingStart = existingClip.startTime; const existingEnd = existingClip.startTime + (existingClip.duration - existingClip.trimStart - existingClip.trimEnd); return snappedTime < existingEnd && newClipEnd > existingStart; }); } } } catch (error) { // Continue with default behavior } } else if (hasTimelineClip) { try { const timelineClipData = e.dataTransfer.getData( "application/x-timeline-clip" ); if (timelineClipData) { const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData); const sourceTrack = tracks.find( (t: TimelineTrack) => t.id === fromTrackId ); const movingClip = sourceTrack?.clips.find( (c: any) => c.id === clipId ); if (movingClip) { const movingClipDuration = movingClip.duration - movingClip.trimStart - movingClip.trimEnd; const snappedTime = Math.round(dropTime * 10) / 10; const movingClipEnd = snappedTime + movingClipDuration; wouldOverlap = track.clips.some((existingClip) => { if (fromTrackId === track.id && existingClip.id === clipId) return false; const existingStart = existingClip.startTime; const existingEnd = existingClip.startTime + (existingClip.duration - existingClip.trimStart - existingClip.trimEnd); return snappedTime < existingEnd && movingClipEnd > existingStart; }); } } } catch (error) { // Continue with default behavior } } if (wouldOverlap) { e.dataTransfer.dropEffect = "none"; setIsDraggedOver(true); setWouldOverlap(true); setDropPosition(Math.round(dropTime * 10) / 10); return; } e.dataTransfer.dropEffect = hasTimelineClip ? "move" : "copy"; setIsDraggedOver(true); setWouldOverlap(false); setDropPosition(Math.round(dropTime * 10) / 10); }; const handleTrackDragEnter = (e: React.DragEvent) => { e.preventDefault(); const hasTimelineClip = e.dataTransfer.types.includes( "application/x-timeline-clip" ); const hasMediaItem = e.dataTransfer.types.includes( "application/x-media-item" ); if (!hasTimelineClip && !hasMediaItem) return; dragCounterRef.current++; setIsDropping(true); setIsDraggedOver(true); }; const handleTrackDragLeave = (e: React.DragEvent) => { e.preventDefault(); const hasTimelineClip = e.dataTransfer.types.includes( "application/x-timeline-clip" ); const hasMediaItem = e.dataTransfer.types.includes( "application/x-media-item" ); if (!hasTimelineClip && !hasMediaItem) return; dragCounterRef.current--; if (dragCounterRef.current === 0) { setIsDropping(false); setIsDraggedOver(false); setWouldOverlap(false); setDropPosition(null); } }; const handleTrackDrop = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); // Reset all drag states dragCounterRef.current = 0; setIsDropping(false); setIsDraggedOver(false); setWouldOverlap(false); const currentDropPosition = dropPosition; setDropPosition(null); const hasTimelineClip = e.dataTransfer.types.includes( "application/x-timeline-clip" ); const hasMediaItem = e.dataTransfer.types.includes( "application/x-media-item" ); if (!hasTimelineClip && !hasMediaItem) return; const trackContainer = e.currentTarget.querySelector( ".track-clips-container" ) as HTMLElement; if (!trackContainer) return; const rect = trackContainer.getBoundingClientRect(); const mouseX = Math.max(0, e.clientX - rect.left); const newStartTime = mouseX / (50 * zoomLevel); const snappedTime = Math.round(newStartTime * 10) / 10; try { if (hasTimelineClip) { // Handle timeline clip movement const timelineClipData = e.dataTransfer.getData( "application/x-timeline-clip" ); if (!timelineClipData) return; const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData); // Find the clip being moved const sourceTrack = tracks.find( (t: TimelineTrack) => t.id === fromTrackId ); const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId); if (!movingClip) { toast.error("Clip not found"); return; } // Check for overlaps with existing clips (excluding the moving clip itself) const movingClipDuration = movingClip.duration - movingClip.trimStart - movingClip.trimEnd; const movingClipEnd = snappedTime + movingClipDuration; const hasOverlap = track.clips.some((existingClip) => { // Skip the clip being moved if it's on the same track if (fromTrackId === track.id && existingClip.id === clipId) return false; const existingStart = existingClip.startTime; const existingEnd = existingClip.startTime + (existingClip.duration - existingClip.trimStart - existingClip.trimEnd); // Check if clips overlap return snappedTime < existingEnd && movingClipEnd > existingStart; }); if (hasOverlap) { toast.error( "Cannot move clip here - it would overlap with existing clips" ); return; } if (fromTrackId === track.id) { // Moving within same track updateClipStartTime(track.id, clipId, snappedTime); } else { // Moving to different track moveClipToTrack(fromTrackId, track.id, clipId); requestAnimationFrame(() => { updateClipStartTime(track.id, clipId, snappedTime); }); } } else if (hasMediaItem) { // Handle media item drop const mediaItemData = e.dataTransfer.getData( "application/x-media-item" ); if (!mediaItemData) return; const { id, type } = JSON.parse(mediaItemData); const mediaItem = mediaItems.find((item) => item.id === id); if (!mediaItem) { toast.error("Media item not found"); return; } // Check if track type is compatible const isCompatible = (track.type === "video" && (type === "video" || type === "image")) || (track.type === "audio" && type === "audio"); if (!isCompatible) { toast.error(`Cannot add ${type} to ${track.type} track`); return; } // Check for overlaps with existing clips const newClipDuration = mediaItem.duration || 5; const newClipEnd = snappedTime + newClipDuration; const hasOverlap = track.clips.some((existingClip) => { const existingStart = existingClip.startTime; const existingEnd = existingClip.startTime + (existingClip.duration - existingClip.trimStart - existingClip.trimEnd); // Check if clips overlap return snappedTime < existingEnd && newClipEnd > existingStart; }); if (hasOverlap) { toast.error( "Cannot place clip here - it would overlap with existing clips" ); return; } addClipToTrack(track.id, { mediaId: mediaItem.id, name: mediaItem.name, duration: mediaItem.duration || 5, startTime: snappedTime, trimStart: 0, trimEnd: 0, }); toast.success(`Added ${mediaItem.name} to ${track.name}`); } } catch (error) { console.error("Error handling drop:", error); toast.error("Failed to add media to track"); } }; const getTrackColor = (type: string) => { switch (type) { case "video": return "bg-blue-500/20 border-blue-500/30"; case "audio": return "bg-green-500/20 border-green-500/30"; case "effects": return "bg-purple-500/20 border-purple-500/30"; default: return "bg-gray-500/20 border-gray-500/30"; } }; const renderClipContent = (clip: any) => { const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (!mediaItem) { return ( {clip.name} ); } if (mediaItem.type === "image") { return (
{mediaItem.name}
); } if (mediaItem.type === "video" && mediaItem.thumbnailUrl) { return (
{mediaItem.name}
{clip.name}
); } // Fallback for audio or videos without thumbnails return ( {clip.name} ); }; const handleSplitClip = (clip: any) => { // Use current playback time as split point const splitTime = currentTime; // Only split if splitTime is within the clip's effective range const effectiveStart = clip.startTime; const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return; const firstDuration = splitTime - effectiveStart; const secondDuration = effectiveEnd - splitTime; // First part: adjust original clip updateClipTrim( track.id, clip.id, clip.trimStart, clip.trimEnd + secondDuration ); // Second part: add new clip after split addClipToTrack(track.id, { mediaId: clip.mediaId, name: clip.name + " (cut)", duration: clip.duration, startTime: splitTime, trimStart: clip.trimStart + firstDuration, trimEnd: clip.trimEnd, }); }; return (
{ e.preventDefault(); // Only show track menu if we didn't click on a clip if (!(e.target as HTMLElement).closest(".timeline-clip")) { setContextMenu({ type: 'track', trackId: track.id, x: e.clientX, y: e.clientY, }); } }} onDragOver={handleTrackDragOver} onDragEnter={handleTrackDragEnter} onDragLeave={handleTrackDragLeave} onDrop={handleTrackDrop} onMouseMove={handleResizeMove} onMouseUp={handleResizeEnd} onMouseLeave={handleResizeEnd} >
{track.clips.length === 0 ? (
{isDropping ? wouldOverlap ? "Cannot drop - would overlap" : "Drop clip here" : "Drop media here"}
) : ( <> {track.clips.map((clip) => { const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd; const clipWidth = Math.max( 80, effectiveDuration * 50 * zoomLevel ); const clipLeft = clip.startTime * 50 * zoomLevel; // Correctly declare isSelected inside the map const isSelected = selectedClip && selectedClip.trackId === track.id && selectedClip.clipId === clip.id; return (
{ e.stopPropagation(); selectClip(track.id, clip.id); }} tabIndex={0} onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); setContextMenu({ type: 'clip', trackId: track.id, clipId: clip.id, x: e.clientX, y: e.clientY, }); }} > {/* Left trim handle */}
handleResizeStart(e, clip.id, "left")} /> {/* Clip content */}
handleClipDragStart(e, clip)} onDragEnd={handleClipDragEnd} > {renderClipContent(clip)} {/* Clip options menu */}
{clipMenuOpen === clip.id && (
)}
{/* Right trim handle */}
handleResizeStart(e, clip.id, "right")} />
); })} {/* Drop position indicator */} {isDraggedOver && dropPosition !== null && (
{wouldOverlap ? "⚠️" : ""} {dropPosition.toFixed(1)}s
)} )}
); }