-
- {/* Toolbar */}
-
- );
-}
-
-function TimelineTrackContent({ track, zoomLevel }: { track: TimelineTrack, zoomLevel: number }) {
- const { mediaItems } = useMediaStore();
- const { tracks, moveClipToTrack, updateClipTrim, updateClipStartTime, addClipToTrack } = useTimelineStore();
- const [isDropping, setIsDropping] = useState(false);
- const [dropPosition, setDropPosition] = useState
-
-
-
-
-
- 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 Area */}
-
- Tracks
-
-
- {/* Timeline Ruler */}
-
- {zoomLevel.toFixed(1)}x
-
-
-
-
-
-
- {/* 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 */}
-
-
-
-
- {/* Track Labels */}
-
-
- {tracks.length === 0 ? (
-
-
- {/* Timeline Tracks Content */}
-
-
- ) : (
-
-
- No tracks
-- Drop media to create tracks -
-
- {tracks.map((track) => (
-
- )}
-
-
- ))}
-
-
- {track.name}
-
-
-
-
-
- 0 ? `${tracks.length * 60}px` : '200px'
- }}
- onClick={handleTimelineClick}
- onWheel={handleWheel}
- >
- {tracks.length === 0 ? (
-
-
-
- ) : (
- <>
- {tracks.map((track, index) => (
-
-
-
-
- Drop media here to start
-
-
- ))}
-
- {/* Playhead for tracks area */}
-
-
- )}
-
- 
-
- );
- }
-
- if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
- return (
-
-
- );
- }
-
- // Fallback for audio or videos without thumbnails
- return (
- {clip.name}
- );
- };
-
- return (
-
- 
-
-
- {clip.name}
-
-
-
- {track.clips.length === 0 ? (
- (null);
+
+ const handleDragEnter = (e: React.DragEvent) => {
+ e.preventDefault();
+
+ // Don't show overlay for timeline clips or other internal drags
+ 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
+ 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) => {
+ e.preventDefault();
+ setIsDragOver(false);
+ dragCounterRef.current = 0;
+
+ 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;
+ }
+
+ 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) {
+ 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) {
+ 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 (
+ (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 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);
+ };
+
+ useEffect(() => {
+ if (!resizing) return;
+
+ const handleGlobalMouseMove = (e: MouseEvent) => {
+ updateTrimFromMouseMove(e);
+ };
+
+ const handleGlobalMouseUp = () => {
+ setResizing(null);
+ };
+
+ document.addEventListener('mousemove', handleGlobalMouseMove);
+ document.addEventListener('mouseup', handleGlobalMouseUp);
+
+ return () => {
+ document.removeEventListener('mousemove', handleGlobalMouseMove);
+ document.removeEventListener('mouseup', handleGlobalMouseUp);
+ };
+ }, [resizing, track.id, zoomLevel, updateClipTrim]);
+
+ 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();
+
+ // 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) {
+ updateClipStartTime(track.id, clipId, snappedTime);
+ } else {
+ 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 (
+
- {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;
-
- return (
-
-
- );
-}
+"use client";
+
+import { ScrollArea } from "../ui/scroll-area";
+import { Button } from "../ui/button";
+import {
+ Scissors,
+ ArrowLeftToLine,
+ ArrowRightToLine,
+ Trash2,
+ Snowflake,
+ Copy,
+ SplitSquareHorizontal,
+} from "lucide-react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+ TooltipProvider,
+} from "../ui/tooltip";
+import { DragOverlay } from "../ui/drag-overlay";
+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 { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
+import { toast } from "sonner";
+import { useState, useRef, useEffect } from "react";
+
+export function Timeline() {
+ const { tracks, addTrack, addClipToTrack } = useTimelineStore();
+ const { mediaItems, addMediaItem } = useMediaStore();
+ const { currentTime, duration, seek } = usePlaybackStore();
+ const [isDragOver, setIsDragOver] = useState(false);
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [zoomLevel, setZoomLevel] = useState(1);
+ const dragCounterRef = useRef(0);
+ const timelineRef = useRef handleResizeStart(e, clip.id, 'left')}
- />
-
-
- handleClipDragStart(e, clip)}
- onDragEnd={handleClipDragEnd}
- >
- {renderClipContent(clip)}
-
-
- handleResizeStart(e, clip.id, 'right')}
- />
-
- );
- })}
-
- {/* Drop position indicator */}
- {isDraggedOver && dropPosition !== null && (
-
-
-
-
- )}
-
- )}
-
- {wouldOverlap ? "⚠️" : ""}{dropPosition.toFixed(1)}s
-
-
+
+ {/* Toolbar */}
+
+ );
+}
+
+function TimelineTrackContent({ track, zoomLevel }: { track: TimelineTrack, zoomLevel: number }) {
+ const { mediaItems } = useMediaStore();
+ const { tracks, moveClipToTrack, updateClipTrim, updateClipStartTime, addClipToTrack } = useTimelineStore();
+ const [isDropping, setIsDropping] = useState(false);
+ const [dropPosition, setDropPosition] = useState
+
+
+
+
+
+ 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 Area */}
+
+ Tracks
+
+
+ {/* Timeline Ruler */}
+
+ {zoomLevel.toFixed(1)}x
+
+
+
+
+
+
+ {/* 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 */}
+
+
+
+
+ {/* Track Labels */}
+
+
+ {tracks.length === 0 ? (
+
+
+ {/* Timeline Tracks Content */}
+
+
+ ) : (
+
+
+ No tracks
++ Drop media to create tracks +
+
+ {tracks.map((track) => (
+
+ )}
+
+
+ ))}
+
+
+ {track.name}
+
+
+
+
+
+ 0 ? `${tracks.length * 60}px` : '200px'
+ }}
+ onClick={handleTimelineClick}
+ onWheel={handleWheel}
+ >
+ {tracks.length === 0 ? (
+
+
+
+ ) : (
+ <>
+ {tracks.map((track, index) => (
+
+
+
+
+ Drop media here to start
+
+
+ ))}
+
+ {/* Playhead for tracks area */}
+
+
+ )}
+
+
+
+ );
+ }
+
+ if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+ return (
+
+
+ );
+ }
+
+ // Fallback for audio or videos without thumbnails
+ return (
+ {clip.name}
+ );
+ };
+
+ return (
+
+
+
+
+ {clip.name}
+
+
+
+ {track.clips.length === 0 ? (
+ (null);
- const { isPlaying, currentTime, volume, play, pause, setVolume, setDuration, setCurrentTime } = usePlaybackStore();
+ const { isPlaying, currentTime, volume, speed, play, pause, setVolume, setDuration, setCurrentTime } = usePlaybackStore();
useEffect(() => {
const video = videoRef.current;
@@ -35,14 +35,20 @@ export function VideoPlayer({ src, poster, className = "", startTime = 0 }: Vide
video.currentTime = e.detail.time;
};
+ const handleSpeedEvent = (e: CustomEvent) => {
+ video.playbackRate = e.detail.speed;
+ };
+
video.addEventListener("timeupdate", handleTimeUpdate);
video.addEventListener("loadedmetadata", handleLoadedMetadata);
window.addEventListener("playback-seek", handleSeekEvent as EventListener);
+ window.addEventListener("playback-speed", handleSpeedEvent as EventListener);
return () => {
video.removeEventListener("timeupdate", handleTimeUpdate);
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
+ window.removeEventListener("playback-speed", handleSpeedEvent as EventListener);
};
}, [setCurrentTime, setDuration]);
@@ -63,6 +69,12 @@ export function VideoPlayer({ src, poster, className = "", startTime = 0 }: Vide
video.volume = volume;
}, [volume]);
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) return;
+ video.playbackRate = speed;
+ }, [speed]);
+
const handleSeek = (e: React.MouseEvent) => {
const video = videoRef.current;
if (!video) return;
diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts
index d241f411..9d8e6c9f 100644
--- a/apps/web/src/lib/media-processing.ts
+++ b/apps/web/src/lib/media-processing.ts
@@ -1,68 +1,68 @@
-import { toast } from "sonner";
-import {
- getFileType,
- generateVideoThumbnail,
- getMediaDuration,
- getImageAspectRatio,
- type MediaItem,
-} from "@/stores/media-store";
-// import { generateThumbnail, getVideoInfo } from "./ffmpeg-utils"; // Temporarily disabled
-
-export interface ProcessedMediaItem extends Omit {}
-
-export async function processMediaFiles(
- files: FileList | File[]
-): Promise {
- const fileArray = Array.from(files);
- const processedItems: ProcessedMediaItem[] = [];
-
- for (const file of fileArray) {
- const fileType = getFileType(file);
-
- if (!fileType) {
- toast.error(`Unsupported file type: ${file.name}`);
- continue;
- }
-
- const url = URL.createObjectURL(file);
- let thumbnailUrl: string | undefined;
- let duration: number | undefined;
- let aspectRatio: number = 16 / 9; // Default fallback
-
- try {
- if (fileType === "image") {
- // Get image aspect ratio
- aspectRatio = await getImageAspectRatio(file);
- } else if (fileType === "video") {
- // Use basic thumbnail generation for now
- const videoResult = await generateVideoThumbnail(file);
- thumbnailUrl = videoResult.thumbnailUrl;
- aspectRatio = videoResult.aspectRatio;
- } else if (fileType === "audio") {
- // For audio, use a square aspect ratio
- aspectRatio = 1;
- }
-
- // Get duration for videos and audio (if not already set by FFmpeg)
- if ((fileType === "video" || fileType === "audio") && !duration) {
- duration = await getMediaDuration(file);
- }
-
- processedItems.push({
- name: file.name,
- type: fileType,
- file,
- url,
- thumbnailUrl,
- duration,
- aspectRatio,
- });
- } catch (error) {
- console.error("Error processing file:", file.name, error);
- toast.error(`Failed to process ${file.name}`);
- URL.revokeObjectURL(url); // Clean up on error
- }
- }
-
- return processedItems;
-}
+import { toast } from "sonner";
+import {
+ getFileType,
+ generateVideoThumbnail,
+ getMediaDuration,
+ getImageAspectRatio,
+ type MediaItem,
+} from "@/stores/media-store";
+// import { generateThumbnail, getVideoInfo } from "./ffmpeg-utils"; // Temporarily disabled
+
+export interface ProcessedMediaItem extends Omit {}
+
+export async function processMediaFiles(
+ files: FileList | File[]
+): Promise {
+ const fileArray = Array.from(files);
+ const processedItems: ProcessedMediaItem[] = [];
+
+ for (const file of fileArray) {
+ const fileType = getFileType(file);
+
+ if (!fileType) {
+ toast.error(`Unsupported file type: ${file.name}`);
+ continue;
+ }
+
+ const url = URL.createObjectURL(file);
+ let thumbnailUrl: string | undefined;
+ let duration: number | undefined;
+ let aspectRatio: number = 16 / 9; // Default fallback
+
+ try {
+ if (fileType === "image") {
+ // Get image aspect ratio
+ aspectRatio = await getImageAspectRatio(file);
+ } else if (fileType === "video") {
+ // Use basic thumbnail generation for now
+ const videoResult = await generateVideoThumbnail(file);
+ thumbnailUrl = videoResult.thumbnailUrl;
+ aspectRatio = videoResult.aspectRatio;
+ } else if (fileType === "audio") {
+ // For audio, use a square aspect ratio
+ aspectRatio = 1;
+ }
+
+ // Get duration for videos and audio (if not already set by FFmpeg)
+ if ((fileType === "video" || fileType === "audio") && !duration) {
+ duration = await getMediaDuration(file);
+ }
+
+ processedItems.push({
+ name: file.name,
+ type: fileType,
+ file,
+ url,
+ thumbnailUrl,
+ duration,
+ aspectRatio,
+ });
+ } catch (error) {
+ console.error("Error processing file:", file.name, error);
+ toast.error(`Failed to process ${file.name}`);
+ URL.revokeObjectURL(url); // Clean up on error
+ }
+ }
+
+ return processedItems;
+}
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 7db1fb93..03a6e9a9 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -11,6 +11,7 @@ export const usePlaybackStore = create((set, get) => ({
currentTime: 0,
duration: 0,
volume: 1,
+ speed: 1.0,
play: () => set({ isPlaying: true }),
pause: () => set({ isPlaying: false }),
@@ -25,6 +26,14 @@ export const usePlaybackStore = create((set, get) => ({
window.dispatchEvent(event);
},
setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
+ setSpeed: (speed: number) => {
+ const newSpeed = Math.max(0.1, Math.min(2.0, speed));
+ set({ speed: newSpeed });
+
+ // Notify video element to update playback rate
+ const event = new CustomEvent('playback-speed', { detail: { speed: newSpeed } });
+ window.dispatchEvent(event);
+ },
setDuration: (duration: number) => set({ duration }),
setCurrentTime: (time: number) => set({ currentTime: time }),
}));
\ No newline at end of file
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 4b56e6bd..7e1a36ee 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1,177 +1,177 @@
-import { create } from "zustand";
-
-export interface TimelineClip {
- id: string;
- mediaId: string;
- name: string;
- duration: number;
- startTime: number;
- trimStart: number;
- trimEnd: number;
-}
-
-export interface TimelineTrack {
- id: string;
- name: string;
- type: "video" | "audio" | "effects";
- clips: TimelineClip[];
-}
-
-interface TimelineStore {
- tracks: TimelineTrack[];
-
- // Actions
- addTrack: (type: "video" | "audio" | "effects") => string;
- removeTrack: (trackId: string) => void;
- addClipToTrack: (trackId: string, clip: Omit) => void;
- removeClipFromTrack: (trackId: string, clipId: string) => void;
- moveClipToTrack: (
- fromTrackId: string,
- toTrackId: string,
- clipId: string
- ) => void;
- updateClipTrim: (
- trackId: string,
- clipId: string,
- trimStart: number,
- trimEnd: number
- ) => void;
- updateClipStartTime: (
- trackId: string,
- clipId: string,
- startTime: number
- ) => void;
-
- // Computed values
- getTotalDuration: () => number;
-}
-
-export const useTimelineStore = create((set, get) => ({
- tracks: [],
-
- addTrack: (type) => {
- const newTrack: TimelineTrack = {
- id: crypto.randomUUID(),
- name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
- type,
- clips: [],
- };
- set((state) => ({
- tracks: [...state.tracks, newTrack],
- }));
- return newTrack.id;
- },
-
- removeTrack: (trackId) => {
- set((state) => ({
- tracks: state.tracks.filter((track) => track.id !== trackId),
- }));
- },
-
- addClipToTrack: (trackId, clipData) => {
- const newClip: TimelineClip = {
- ...clipData,
- id: crypto.randomUUID(),
- startTime: clipData.startTime || 0,
- trimStart: 0,
- trimEnd: 0,
- };
-
- set((state) => ({
- tracks: state.tracks.map((track) =>
- track.id === trackId
- ? { ...track, clips: [...track.clips, newClip] }
- : track
- ),
- }));
- },
-
- removeClipFromTrack: (trackId, clipId) => {
- set((state) => ({
- tracks: state.tracks.map((track) =>
- track.id === trackId
- ? {
- ...track,
- clips: track.clips.filter((clip) => clip.id !== clipId),
- }
- : track
- ),
- }));
- },
-
- moveClipToTrack: (fromTrackId, toTrackId, clipId) => {
- set((state) => {
- const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
- const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId);
-
- if (!clipToMove) return state;
-
- return {
- tracks: state.tracks.map((track) => {
- if (track.id === fromTrackId) {
- return {
- ...track,
- clips: track.clips.filter((clip) => clip.id !== clipId),
- };
- } else if (track.id === toTrackId) {
- return {
- ...track,
- clips: [...track.clips, clipToMove],
- };
- }
- return track;
- }),
- };
- });
- },
-
-
-
- updateClipTrim: (trackId, clipId, trimStart, trimEnd) => {
- set((state) => ({
- tracks: state.tracks.map((track) =>
- track.id === trackId
- ? {
- ...track,
- clips: track.clips.map((clip) =>
- clip.id === clipId
- ? { ...clip, trimStart, trimEnd }
- : clip
- ),
- }
- : track
- ),
- }));
- },
-
- updateClipStartTime: (trackId, clipId, startTime) => {
- set((state) => ({
- tracks: state.tracks.map((track) =>
- track.id === trackId
- ? {
- ...track,
- clips: track.clips.map((clip) =>
- clip.id === clipId
- ? { ...clip, startTime }
- : clip
- ),
- }
- : track
- ),
- }));
- },
-
- getTotalDuration: () => {
- const { tracks } = get();
- if (tracks.length === 0) return 0;
-
- const trackEndTimes = tracks.map((track) =>
- track.clips.reduce((maxEnd, clip) => {
- const clipEnd = clip.startTime + clip.duration - clip.trimStart - clip.trimEnd;
- return Math.max(maxEnd, clipEnd);
- }, 0)
- );
-
- return Math.max(...trackEndTimes, 0);
- },
-}));
+import { create } from "zustand";
+
+export interface TimelineClip {
+ id: string;
+ mediaId: string;
+ name: string;
+ duration: number;
+ startTime: number;
+ trimStart: number;
+ trimEnd: number;
+}
+
+export interface TimelineTrack {
+ id: string;
+ name: string;
+ type: "video" | "audio" | "effects";
+ clips: TimelineClip[];
+}
+
+interface TimelineStore {
+ tracks: TimelineTrack[];
+
+ // Actions
+ addTrack: (type: "video" | "audio" | "effects") => string;
+ removeTrack: (trackId: string) => void;
+ addClipToTrack: (trackId: string, clip: Omit) => void;
+ removeClipFromTrack: (trackId: string, clipId: string) => void;
+ moveClipToTrack: (
+ fromTrackId: string,
+ toTrackId: string,
+ clipId: string
+ ) => void;
+ updateClipTrim: (
+ trackId: string,
+ clipId: string,
+ trimStart: number,
+ trimEnd: number
+ ) => void;
+ updateClipStartTime: (
+ trackId: string,
+ clipId: string,
+ startTime: number
+ ) => void;
+
+ // Computed values
+ getTotalDuration: () => number;
+}
+
+export const useTimelineStore = create((set, get) => ({
+ tracks: [],
+
+ addTrack: (type) => {
+ const newTrack: TimelineTrack = {
+ id: crypto.randomUUID(),
+ name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
+ type,
+ clips: [],
+ };
+ set((state) => ({
+ tracks: [...state.tracks, newTrack],
+ }));
+ return newTrack.id;
+ },
+
+ removeTrack: (trackId) => {
+ set((state) => ({
+ tracks: state.tracks.filter((track) => track.id !== trackId),
+ }));
+ },
+
+ addClipToTrack: (trackId, clipData) => {
+ const newClip: TimelineClip = {
+ ...clipData,
+ id: crypto.randomUUID(),
+ startTime: clipData.startTime || 0,
+ trimStart: 0,
+ trimEnd: 0,
+ };
+
+ set((state) => ({
+ tracks: state.tracks.map((track) =>
+ track.id === trackId
+ ? { ...track, clips: [...track.clips, newClip] }
+ : track
+ ),
+ }));
+ },
+
+ removeClipFromTrack: (trackId, clipId) => {
+ set((state) => ({
+ tracks: state.tracks.map((track) =>
+ track.id === trackId
+ ? {
+ ...track,
+ clips: track.clips.filter((clip) => clip.id !== clipId),
+ }
+ : track
+ ),
+ }));
+ },
+
+ moveClipToTrack: (fromTrackId, toTrackId, clipId) => {
+ set((state) => {
+ const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
+ const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId);
+
+ if (!clipToMove) return state;
+
+ return {
+ tracks: state.tracks.map((track) => {
+ if (track.id === fromTrackId) {
+ return {
+ ...track,
+ clips: track.clips.filter((clip) => clip.id !== clipId),
+ };
+ } else if (track.id === toTrackId) {
+ return {
+ ...track,
+ clips: [...track.clips, clipToMove],
+ };
+ }
+ return track;
+ }),
+ };
+ });
+ },
+
+
+
+ updateClipTrim: (trackId, clipId, trimStart, trimEnd) => {
+ set((state) => ({
+ tracks: state.tracks.map((track) =>
+ track.id === trackId
+ ? {
+ ...track,
+ clips: track.clips.map((clip) =>
+ clip.id === clipId
+ ? { ...clip, trimStart, trimEnd }
+ : clip
+ ),
+ }
+ : track
+ ),
+ }));
+ },
+
+ updateClipStartTime: (trackId, clipId, startTime) => {
+ set((state) => ({
+ tracks: state.tracks.map((track) =>
+ track.id === trackId
+ ? {
+ ...track,
+ clips: track.clips.map((clip) =>
+ clip.id === clipId
+ ? { ...clip, startTime }
+ : clip
+ ),
+ }
+ : track
+ ),
+ }));
+ },
+
+ getTotalDuration: () => {
+ const { tracks } = get();
+ if (tracks.length === 0) return 0;
+
+ const trackEndTimes = tracks.map((track) =>
+ track.clips.reduce((maxEnd, clip) => {
+ const clipEnd = clip.startTime + clip.duration - clip.trimStart - clip.trimEnd;
+ return Math.max(maxEnd, clipEnd);
+ }, 0)
+ );
+
+ return Math.max(...trackEndTimes, 0);
+ },
+}));
diff --git a/apps/web/src/types/playback.ts b/apps/web/src/types/playback.ts
index 88113ef3..3fbd1a02 100644
--- a/apps/web/src/types/playback.ts
+++ b/apps/web/src/types/playback.ts
@@ -3,6 +3,7 @@ export interface PlaybackState {
currentTime: number;
duration: number;
volume: number;
+ speed: number;
}
export interface PlaybackControls {
@@ -10,5 +11,6 @@ export interface PlaybackControls {
pause: () => void;
seek: (time: number) => void;
setVolume: (volume: number) => void;
+ setSpeed: (speed: number) => void;
toggle: () => void;
}
\ No newline at end of file
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index 74886b24..640dbd40 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -1,6 +1,6 @@
-export interface TProject {
- id: string;
- name: string;
- createdAt: Date;
- updatedAt: Date;
-}
+export interface TProject {
+ id: string;
+ name: string;
+ createdAt: Date;
+ updatedAt: Date;
+}
+ {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;
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 29f29cf2..58ba329e 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
-import { type DialogProps } from "radix-ui";
+import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index d31f7113..a37d1629 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -14,7 +14,7 @@ interface VideoPlayerProps {
export function VideoPlayer({ src, poster, className = "", startTime = 0 }: VideoPlayerProps) {
const videoRef = useRef handleResizeStart(e, clip.id, 'left')}
+ />
+
+
+ handleClipDragStart(e, clip)}
+ onDragEnd={handleClipDragEnd}
+ >
+ {renderClipContent(clip)}
+
+
+ handleResizeStart(e, clip.id, 'right')}
+ />
+
+ );
+ })}
+
+ {/* Drop position indicator */}
+ {isDraggedOver && dropPosition !== null && (
+
+
+
+
+ )}
+
+ )}
+
+ {wouldOverlap ? "⚠️" : ""}{dropPosition.toFixed(1)}s
+
+