xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove unwanted clip option menu

Browse Source
This commit is contained in:
priyankarpal
2025-06-26 20:28:03 +05:30
parent 1284c232a3
commit 53184217bf
1 changed files with 177 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
apps/web/src/components/editor/timeline.tsx
View File

@ -1,14 +1,13 @@
"use client"; 'use client';
import { processMediaFiles } from "@/lib/media-processing"; import { processMediaFiles } from '@/lib/media-processing';
import { useMediaStore } from "@/stores/media-store"; import { useMediaStore } from '@/stores/media-store';
import { usePlaybackStore } from "@/stores/playback-store"; import { usePlaybackStore } from '@/stores/playback-store';
import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store"; import { useTimelineStore, type TimelineTrack } from '@/stores/timeline-store';
import { import {
ArrowLeftToLine, ArrowLeftToLine,
ArrowRightToLine, ArrowRightToLine,
Copy, Copy,
MoreVertical,
Pause, Pause,
Play, Play,
Scissors, Scissors,
@ -17,28 +16,27 @@ import {
Trash2, Trash2,
Volume2, Volume2,
VolumeX, VolumeX,
} from "lucide-react"; } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from "sonner"; import { toast } from 'sonner';
import { Button } from "../ui/button"; import { Button } from '../ui/button';
import { ScrollArea } from "../ui/scroll-area"; import { ScrollArea } from '../ui/scroll-area';
import { import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "../ui/select"; } from '../ui/select';
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "../ui/tooltip"; } from '../ui/tooltip';
import AudioWaveform from "./audio-waveform";
import AudioWaveform from './audio-waveform';
export function Timeline() { export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips. // Timeline shows all tracks (video, audio, effects) and their clips.
@ -79,7 +77,7 @@ export function Timeline() {
// Unified context menu state // Unified context menu state
const [contextMenu, setContextMenu] = useState<{ const [contextMenu, setContextMenu] = useState<{
type: "track" | "clip"; type: 'track' | 'clip';
trackId: string; trackId: string;
clipId?: string; clipId?: string;
x: number; x: number;
@ -110,8 +108,8 @@ export function Timeline() {
useEffect(() => { useEffect(() => {
const handleClick = () => setContextMenu(null); const handleClick = () => setContextMenu(null);
if (contextMenu) { if (contextMenu) {
window.addEventListener("click", handleClick); window.addEventListener('click', handleClick);
return () => window.removeEventListener("click", handleClick); return () => window.removeEventListener('click', handleClick);
} }
}, [contextMenu]); }, [contextMenu]);
@ -119,7 +117,7 @@ export function Timeline() {
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if ( if (
(e.key === "Delete" || e.key === "Backspace") && (e.key === 'Delete' || e.key === 'Backspace') &&
selectedClips.length > 0 selectedClips.length > 0
) { ) {
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
@ -128,35 +126,35 @@ export function Timeline() {
clearSelectedClips(); clearSelectedClips();
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedClips, removeClipFromTrack, clearSelectedClips]); }, [selectedClips, removeClipFromTrack, clearSelectedClips]);
// Keyboard event for undo (Cmd+Z) // Keyboard event for undo (Cmd+Z)
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) { if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
undo(); undo();
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown);
}, [undo]); }, [undo]);
// Keyboard event for redo (Cmd+Shift+Z or Cmd+Y) // Keyboard event for redo (Cmd+Shift+Z or Cmd+Y)
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === "z" && e.shiftKey) { if ((e.metaKey || e.ctrlKey) && e.key === 'z' && e.shiftKey) {
e.preventDefault(); e.preventDefault();
redo(); redo();
} else if ((e.metaKey || e.ctrlKey) && e.key === "y") { } else if ((e.metaKey || e.ctrlKey) && e.key === 'y') {
e.preventDefault(); e.preventDefault();
redo(); redo();
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown);
}, [redo]); }, [redo]);
// Mouse down on timeline background to start marquee // Mouse down on timeline background to start marquee
@ -187,11 +185,11 @@ export function Timeline() {
prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false } prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }
); );
}; };
window.addEventListener("mousemove", handleMouseMove); window.addEventListener('mousemove', handleMouseMove);
window.addEventListener("mouseup", handleMouseUp); window.addEventListener('mouseup', handleMouseUp);
return () => { return () => {
window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp); window.removeEventListener('mouseup', handleMouseUp);
}; };
}, [marquee]); }, [marquee]);
@ -239,12 +237,12 @@ export function Timeline() {
if (newSelection.length > 0) { if (newSelection.length > 0) {
if (marquee.additive) { if (marquee.additive) {
const selectedSet = new Set( const selectedSet = new Set(
selectedClips.map((c) => c.trackId + ":" + c.clipId) selectedClips.map((c) => c.trackId + ':' + c.clipId)
); );
newSelection = [ newSelection = [
...selectedClips, ...selectedClips,
...newSelection.filter( ...newSelection.filter(
(c) => !selectedSet.has(c.trackId + ":" + c.clipId) (c) => !selectedSet.has(c.trackId + ':' + c.clipId)
), ),
]; ];
} }
@ -266,7 +264,7 @@ export function Timeline() {
// When something is dragged over the timeline, show overlay // When something is dragged over the timeline, show overlay
e.preventDefault(); e.preventDefault();
// Don't show overlay for timeline clips - they're handled by tracks // Don't show overlay for timeline clips - they're handled by tracks
if (e.dataTransfer.types.includes("application/x-timeline-clip")) { if (e.dataTransfer.types.includes('application/x-timeline-clip')) {
return; return;
} }
dragCounterRef.current += 1; dragCounterRef.current += 1;
@ -283,7 +281,7 @@ export function Timeline() {
e.preventDefault(); e.preventDefault();
// Don't update state for timeline clips - they're handled by tracks // Don't update state for timeline clips - they're handled by tracks
if (e.dataTransfer.types.includes("application/x-timeline-clip")) { if (e.dataTransfer.types.includes('application/x-timeline-clip')) {
return; return;
} }
@ -301,24 +299,24 @@ export function Timeline() {
// Ignore timeline clip drags - they're handled by track-specific handlers // Ignore timeline clip drags - they're handled by track-specific handlers
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
if (hasTimelineClip) { if (hasTimelineClip) {
return; return;
} }
const mediaItemData = e.dataTransfer.getData("application/x-media-item"); const mediaItemData = e.dataTransfer.getData('application/x-media-item');
if (mediaItemData) { if (mediaItemData) {
// Handle media item drops by creating new tracks // Handle media item drops by creating new tracks
try { try {
const { id, type } = JSON.parse(mediaItemData); const { id, type } = JSON.parse(mediaItemData);
const mediaItem = mediaItems.find((item) => item.id === id); const mediaItem = mediaItems.find((item) => item.id === id);
if (!mediaItem) { if (!mediaItem) {
toast.error("Media item not found"); toast.error('Media item not found');
return; return;
} }
// Add to video or audio track depending on type // Add to video or audio track depending on type
const trackType = type === "audio" ? "audio" : "video"; const trackType = type === 'audio' ? 'audio' : 'video';
const newTrackId = addTrack(trackType); const newTrackId = addTrack(trackType);
addClipToTrack(newTrackId, { addClipToTrack(newTrackId, {
mediaId: mediaItem.id, mediaId: mediaItem.id,
@ -331,8 +329,8 @@ export function Timeline() {
toast.success(`Added ${mediaItem.name} to new ${trackType} track`); toast.success(`Added ${mediaItem.name} to new ${trackType} track`);
} catch (error) { } catch (error) {
// Show error if parsing fails // Show error if parsing fails
console.error("Error parsing media item data:", error); console.error('Error parsing media item data:', error);
toast.error("Failed to add media to timeline"); toast.error('Failed to add media to timeline');
} }
} else if (e.dataTransfer.files?.length > 0) { } else if (e.dataTransfer.files?.length > 0) {
// Handle file drops by creating new tracks // Handle file drops by creating new tracks
@ -348,7 +346,7 @@ export function Timeline() {
); );
if (addedItem) { if (addedItem) {
const trackType = const trackType =
processedItem.type === "audio" ? "audio" : "video"; processedItem.type === 'audio' ? 'audio' : 'video';
const newTrackId = addTrack(trackType); const newTrackId = addTrack(trackType);
addClipToTrack(newTrackId, { addClipToTrack(newTrackId, {
mediaId: addedItem.id, mediaId: addedItem.id,
@ -362,8 +360,8 @@ export function Timeline() {
} }
} catch (error) { } catch (error) {
// Show error if file processing fails // Show error if file processing fails
console.error("Error processing external files:", error); console.error('Error processing external files:', error);
toast.error("Failed to process dropped files"); toast.error('Failed to process dropped files');
} finally { } finally {
setIsProcessing(false); setIsProcessing(false);
} }
@ -429,11 +427,11 @@ export function Timeline() {
if (scrubTime !== null) seek(scrubTime); // finalize seek if (scrubTime !== null) seek(scrubTime); // finalize seek
setScrubTime(null); setScrubTime(null);
}; };
window.addEventListener("mousemove", onMouseMove); window.addEventListener('mousemove', onMouseMove);
window.addEventListener("mouseup", onMouseUp); window.addEventListener('mouseup', onMouseUp);
return () => { return () => {
window.removeEventListener("mousemove", onMouseMove); window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener("mouseup", onMouseUp); window.removeEventListener('mouseup', onMouseUp);
}; };
}, [isScrubbing, scrubTime, seek, handleScrub]); }, [isScrubbing, scrubTime, seek, handleScrub]);
@ -450,7 +448,7 @@ export function Timeline() {
// Action handlers for toolbar // Action handlers for toolbar
const handleSplitSelected = () => { const handleSplitSelected = () => {
if (selectedClips.length === 0) { if (selectedClips.length === 0) {
toast.error("No clips selected"); toast.error('No clips selected');
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
@ -470,7 +468,7 @@ export function Timeline() {
); );
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (split)", name: clip.name + ' (split)',
duration: clip.duration, duration: clip.duration,
startTime: splitTime, startTime: splitTime,
trimStart: clip.trimStart + (splitTime - effectiveStart), trimStart: clip.trimStart + (splitTime - effectiveStart),
@ -479,12 +477,12 @@ export function Timeline() {
} }
} }
}); });
toast.success("Split selected clip(s)"); toast.success('Split selected clip(s)');
}; };
const handleDuplicateSelected = () => { const handleDuplicateSelected = () => {
if (selectedClips.length === 0) { if (selectedClips.length === 0) {
toast.error("No clips selected"); toast.error('No clips selected');
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
@ -493,7 +491,7 @@ export function Timeline() {
if (clip && track) { if (clip && track) {
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (copy)", name: clip.name + ' (copy)',
duration: clip.duration, duration: clip.duration,
startTime: startTime:
clip.startTime + clip.startTime +
@ -504,12 +502,12 @@ export function Timeline() {
}); });
} }
}); });
toast.success("Duplicated selected clip(s)"); toast.success('Duplicated selected clip(s)');
}; };
const handleFreezeSelected = () => { const handleFreezeSelected = () => {
if (selectedClips.length === 0) { if (selectedClips.length === 0) {
toast.error("No clips selected"); toast.error('No clips selected');
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
@ -519,7 +517,7 @@ export function Timeline() {
// Add a new freeze frame clip at the playhead // Add a new freeze frame clip at the playhead
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (freeze)", name: clip.name + ' (freeze)',
duration: 1, // 1 second freeze frame duration: 1, // 1 second freeze frame
startTime: currentTime, startTime: currentTime,
trimStart: 0, trimStart: 0,
@ -527,19 +525,19 @@ export function Timeline() {
}); });
} }
}); });
toast.success("Freeze frame added for selected clip(s)"); toast.success('Freeze frame added for selected clip(s)');
}; };
const handleDeleteSelected = () => { const handleDeleteSelected = () => {
if (selectedClips.length === 0) { if (selectedClips.length === 0) {
toast.error("No clips selected"); toast.error('No clips selected');
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
removeClipFromTrack(trackId, clipId); removeClipFromTrack(trackId, clipId);
}); });
clearSelectedClips(); clearSelectedClips();
toast.success("Deleted selected clip(s)"); toast.success('Deleted selected clip(s)');
}; };
// Prevent explorer zooming in/out when in timeline // Prevent explorer zooming in/out when in timeline
@ -555,16 +553,16 @@ export function Timeline() {
} }
}; };
document.addEventListener("wheel", preventZoom, { passive: false }); document.addEventListener('wheel', preventZoom, { passive: false });
return () => { return () => {
document.removeEventListener("wheel", preventZoom); document.removeEventListener('wheel', preventZoom);
}; };
}, [isInTimeline]); }, [isInTimeline]);
return ( return (
<div <div
className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? "bg-accent/30 border-accent" : ""}`} className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? 'bg-accent/30 border-accent' : ''}`}
{...dragProps} {...dragProps}
onMouseEnter={() => setIsInTimeline(true)} onMouseEnter={() => setIsInTimeline(true)}
onMouseLeave={() => setIsInTimeline(false)} onMouseLeave={() => setIsInTimeline(false)}
@ -590,14 +588,15 @@ export function Timeline() {
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{isPlaying ? "Pause (Space)" : "Play (Space)"} {isPlaying ? 'Pause (Space)' : 'Play (Space)'}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
<div className="w-px h-6 bg-border mx-1" /> <div className="w-px h-6 bg-border mx-1" />
{/* Time Display */} {/* Time Display */}
<div className="text-xs text-muted-foreground font-mono px-2" <div
className="text-xs text-muted-foreground font-mono px-2"
style={{ minWidth: '18ch', textAlign: 'center' }} style={{ minWidth: '18ch', textAlign: 'center' }}
> >
{currentTime.toFixed(1)}s / {duration.toFixed(1)}s {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
@ -613,10 +612,10 @@ export function Timeline() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => { onClick={() => {
const trackId = addTrack("video"); const trackId = addTrack('video');
addClipToTrack(trackId, { addClipToTrack(trackId, {
mediaId: "test", mediaId: 'test',
name: "Test Clip", name: 'Test Clip',
duration: 5, duration: 5,
startTime: 0, startTime: 0,
trimStart: 0, trimStart: 0,
@ -782,15 +781,15 @@ export function Timeline() {
<div <div
key={i} key={i}
className={`absolute top-0 bottom-0 ${isMainMarker className={`absolute top-0 bottom-0 ${isMainMarker
? "border-l border-muted-foreground/40" ? 'border-l border-muted-foreground/40'
: "border-l border-muted-foreground/20" : 'border-l border-muted-foreground/20'
}`} }`}
style={{ left: `${time * 50 * zoomLevel}px` }} style={{ left: `${time * 50 * zoomLevel}px` }}
> >
<span <span
className={`absolute top-1 left-1 text-xs ${isMainMarker className={`absolute top-1 left-1 text-xs ${isMainMarker
? "text-muted-foreground font-medium" ? 'text-muted-foreground font-medium'
: "text-muted-foreground/70" : 'text-muted-foreground/70'
}`} }`}
> >
{(() => { {(() => {
@ -800,9 +799,9 @@ export function Timeline() {
const secs = seconds % 60; const secs = seconds % 60;
if (hours > 0) { if (hours > 0) {
return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; return `${hours}:${minutes.toString().padStart(2, '0')}:${Math.floor(secs).toString().padStart(2, '0')}`;
} else if (minutes > 0) { } else if (minutes > 0) {
return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`; return `${minutes}:${Math.floor(secs).toString().padStart(2, '0')}`;
} else if (interval >= 1) { } else if (interval >= 1) {
return `${Math.floor(secs)}s`; return `${Math.floor(secs)}s`;
} else { } else {
@ -843,7 +842,7 @@ export function Timeline() {
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu({ setContextMenu({
type: "track", type: 'track',
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -852,11 +851,11 @@ export function Timeline() {
> >
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
<div <div
className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video" className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === 'video'
? "bg-blue-500" ? 'bg-blue-500'
: track.type === "audio" : track.type === 'audio'
? "bg-green-500" ? 'bg-green-500'
: "bg-purple-500" : 'bg-purple-500'
}`} }`}
/> />
<span className="ml-2 text-sm font-medium truncate"> <span className="ml-2 text-sm font-medium truncate">
@ -879,7 +878,7 @@ export function Timeline() {
<div <div
className="w-full h-full overflow-hidden flex" className="w-full h-full overflow-hidden flex"
ref={timelineRef} ref={timelineRef}
style={{ position: "relative" }} style={{ position: 'relative' }}
> >
{/* Timeline grid and clips area (with left margin for sifdebar) */} {/* Timeline grid and clips area (with left margin for sifdebar) */}
<div <div
@ -910,13 +909,13 @@ export function Timeline() {
className="absolute left-0 right-0 border-b border-muted/30" className="absolute left-0 right-0 border-b border-muted/30"
style={{ style={{
top: `${index * 60}px`, top: `${index * 60}px`,
height: "60px", height: '60px',
}} }}
// Show context menu on right click // Show context menu on right click
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu({ setContextMenu({
type: "track", type: 'track',
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -950,7 +949,7 @@ export function Timeline() {
className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground" className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"
style={{ style={{
top: `${tracks.length * 60}px`, top: `${tracks.length * 60}px`,
height: "60px", height: '60px',
}} }}
> >
<div>Drop media here to add a new track</div> <div>Drop media here to add a new track</div>
@ -969,7 +968,7 @@ export function Timeline() {
style={{ left: contextMenu.x, top: contextMenu.y }} style={{ left: contextMenu.x, top: contextMenu.y }}
onContextMenu={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()}
> >
{contextMenu.type === "track" ? ( {contextMenu.type === 'track' ? (
// Track context menu // Track context menu
<> <>
<button <button
@ -1005,7 +1004,7 @@ export function Timeline() {
onClick={() => { onClick={() => {
removeTrack(contextMenu.trackId); removeTrack(contextMenu.trackId);
setContextMenu(null); setContextMenu(null);
toast.success("Track deleted"); toast.success('Track deleted');
}} }}
> >
<Trash2 className="h-4 w-4 mr-2" /> <Trash2 className="h-4 w-4 mr-2" />
@ -1044,16 +1043,16 @@ export function Timeline() {
); );
useTimelineStore.getState().addClipToTrack(track.id, { useTimelineStore.getState().addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (split)", name: clip.name + ' (split)',
duration: clip.duration, duration: clip.duration,
startTime: splitTime, startTime: splitTime,
trimStart: trimStart:
clip.trimStart + (splitTime - effectiveStart), clip.trimStart + (splitTime - effectiveStart),
trimEnd: clip.trimEnd, trimEnd: clip.trimEnd,
}); });
toast.success("Clip split successfully"); toast.success('Clip split successfully');
} else { } else {
toast.error("Playhead must be within clip to split"); toast.error('Playhead must be within clip to split');
} }
} }
} }
@ -1076,7 +1075,7 @@ export function Timeline() {
if (clip && track) { if (clip && track) {
useTimelineStore.getState().addClipToTrack(track.id, { useTimelineStore.getState().addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (copy)", name: clip.name + ' (copy)',
duration: clip.duration, duration: clip.duration,
startTime: startTime:
clip.startTime + clip.startTime +
@ -1085,7 +1084,7 @@ export function Timeline() {
trimStart: clip.trimStart, trimStart: clip.trimStart,
trimEnd: clip.trimEnd, trimEnd: clip.trimEnd,
}); });
toast.success("Clip duplicated"); toast.success('Clip duplicated');
} }
} }
setContextMenu(null); setContextMenu(null);
@ -1103,7 +1102,7 @@ export function Timeline() {
contextMenu.trackId, contextMenu.trackId,
contextMenu.clipId contextMenu.clipId
); );
toast.success("Clip deleted"); toast.success('Clip deleted');
} }
setContextMenu(null); setContextMenu(null);
}} }}
@ -1129,7 +1128,7 @@ function TimelineTrackContent({
zoomLevel: number; zoomLevel: number;
setContextMenu: ( setContextMenu: (
menu: { menu: {
type: "track" | "clip"; type: 'track' | 'clip';
trackId: string; trackId: string;
clipId?: string; clipId?: string;
x: number; x: number;
@ -1137,7 +1136,7 @@ function TimelineTrackContent({
} | null } | null
) => void; ) => void;
contextMenu: { contextMenu: {
type: "track" | "clip"; type: 'track' | 'clip';
trackId: string; trackId: string;
clipId?: string; clipId?: string;
x: number; x: number;
@ -1164,7 +1163,7 @@ function TimelineTrackContent({
const [wouldOverlap, setWouldOverlap] = useState(false); const [wouldOverlap, setWouldOverlap] = useState(false);
const [resizing, setResizing] = useState<{ const [resizing, setResizing] = useState<{
clipId: string; clipId: string;
side: "left" | "right"; side: 'left' | 'right';
startX: number; startX: number;
initialTrimStart: number; initialTrimStart: number;
initialTrimEnd: number; initialTrimEnd: number;
@ -1180,7 +1179,7 @@ function TimelineTrackContent({
const handleResizeStart = ( const handleResizeStart = (
e: React.MouseEvent, e: React.MouseEvent,
clipId: string, clipId: string,
side: "left" | "right" side: 'left' | 'right'
) => { ) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -1206,7 +1205,7 @@ function TimelineTrackContent({
const deltaX = e.clientX - resizing.startX; const deltaX = e.clientX - resizing.startX;
const deltaTime = deltaX / (50 * zoomLevel); const deltaTime = deltaX / (50 * zoomLevel);
if (resizing.side === "left") { if (resizing.side === 'left') {
const newTrimStart = Math.max( const newTrimStart = Math.max(
0, 0,
Math.min( Math.min(
@ -1239,22 +1238,22 @@ function TimelineTrackContent({
const dragData = { clipId: clip.id, trackId: track.id, name: clip.name }; const dragData = { clipId: clip.id, trackId: track.id, name: clip.name };
e.dataTransfer.setData( e.dataTransfer.setData(
"application/x-timeline-clip", 'application/x-timeline-clip',
JSON.stringify(dragData) JSON.stringify(dragData)
); );
e.dataTransfer.effectAllowed = "move"; e.dataTransfer.effectAllowed = 'move';
// Add visual feedback to the dragged element // Add visual feedback to the dragged element
const target = e.currentTarget.parentElement as HTMLElement; const target = e.currentTarget.parentElement as HTMLElement;
target.style.opacity = "0.5"; target.style.opacity = '0.5';
target.style.transform = "scale(0.95)"; target.style.transform = 'scale(0.95)';
}; };
const handleClipDragEnd = (e: React.DragEvent) => { const handleClipDragEnd = (e: React.DragEvent) => {
// Reset visual feedback // Reset visual feedback
const target = e.currentTarget.parentElement as HTMLElement; const target = e.currentTarget.parentElement as HTMLElement;
target.style.opacity = ""; target.style.opacity = '';
target.style.transform = ""; target.style.transform = '';
}; };
const handleTrackDragOver = (e: React.DragEvent) => { const handleTrackDragOver = (e: React.DragEvent) => {
@ -1262,10 +1261,10 @@ function TimelineTrackContent({
// Handle both timeline clips and media items // Handle both timeline clips and media items
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
const hasMediaItem = e.dataTransfer.types.includes( const hasMediaItem = e.dataTransfer.types.includes(
"application/x-media-item" 'application/x-media-item'
); );
if (!hasTimelineClip && !hasMediaItem) return; if (!hasTimelineClip && !hasMediaItem) return;
@ -1273,28 +1272,28 @@ function TimelineTrackContent({
if (hasMediaItem) { if (hasMediaItem) {
try { try {
const mediaItemData = e.dataTransfer.getData( const mediaItemData = e.dataTransfer.getData(
"application/x-media-item" 'application/x-media-item'
); );
if (mediaItemData) { if (mediaItemData) {
const { type } = JSON.parse(mediaItemData); const { type } = JSON.parse(mediaItemData);
const isCompatible = const isCompatible =
(track.type === "video" && (track.type === 'video' &&
(type === "video" || type === "image")) || (type === 'video' || type === 'image')) ||
(track.type === "audio" && type === "audio"); (track.type === 'audio' && type === 'audio');
if (!isCompatible) { if (!isCompatible) {
e.dataTransfer.dropEffect = "none"; e.dataTransfer.dropEffect = 'none';
return; return;
} }
} }
} catch (error) { } catch (error) {
console.error("Error parsing dropped media item:", error); console.error('Error parsing dropped media item:', error);
} }
} }
// Calculate drop position for overlap checking // Calculate drop position for overlap checking
const trackContainer = e.currentTarget.querySelector( const trackContainer = e.currentTarget.querySelector(
".track-clips-container" '.track-clips-container'
) as HTMLElement; ) as HTMLElement;
let dropTime = 0; let dropTime = 0;
if (trackContainer) { if (trackContainer) {
@ -1309,7 +1308,7 @@ function TimelineTrackContent({
if (hasMediaItem) { if (hasMediaItem) {
try { try {
const mediaItemData = e.dataTransfer.getData( const mediaItemData = e.dataTransfer.getData(
"application/x-media-item" 'application/x-media-item'
); );
if (mediaItemData) { if (mediaItemData) {
const { id } = JSON.parse(mediaItemData); const { id } = JSON.parse(mediaItemData);
@ -1336,7 +1335,7 @@ function TimelineTrackContent({
} else if (hasTimelineClip) { } else if (hasTimelineClip) {
try { try {
const timelineClipData = e.dataTransfer.getData( const timelineClipData = e.dataTransfer.getData(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
if (timelineClipData) { if (timelineClipData) {
const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData); const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData);
@ -1373,14 +1372,14 @@ function TimelineTrackContent({
} }
if (wouldOverlap) { if (wouldOverlap) {
e.dataTransfer.dropEffect = "none"; e.dataTransfer.dropEffect = 'none';
setIsDraggedOver(true); setIsDraggedOver(true);
setWouldOverlap(true); setWouldOverlap(true);
setDropPosition(Math.round(dropTime * 10) / 10); setDropPosition(Math.round(dropTime * 10) / 10);
return; return;
} }
e.dataTransfer.dropEffect = hasTimelineClip ? "move" : "copy"; e.dataTransfer.dropEffect = hasTimelineClip ? 'move' : 'copy';
setIsDraggedOver(true); setIsDraggedOver(true);
setWouldOverlap(false); setWouldOverlap(false);
setDropPosition(Math.round(dropTime * 10) / 10); setDropPosition(Math.round(dropTime * 10) / 10);
@ -1390,10 +1389,10 @@ function TimelineTrackContent({
e.preventDefault(); e.preventDefault();
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
const hasMediaItem = e.dataTransfer.types.includes( const hasMediaItem = e.dataTransfer.types.includes(
"application/x-media-item" 'application/x-media-item'
); );
if (!hasTimelineClip && !hasMediaItem) return; if (!hasTimelineClip && !hasMediaItem) return;
@ -1407,10 +1406,10 @@ function TimelineTrackContent({
e.preventDefault(); e.preventDefault();
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
const hasMediaItem = e.dataTransfer.types.includes( const hasMediaItem = e.dataTransfer.types.includes(
"application/x-media-item" 'application/x-media-item'
); );
if (!hasTimelineClip && !hasMediaItem) return; if (!hasTimelineClip && !hasMediaItem) return;
@ -1438,16 +1437,16 @@ function TimelineTrackContent({
setDropPosition(null); setDropPosition(null);
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
const hasMediaItem = e.dataTransfer.types.includes( const hasMediaItem = e.dataTransfer.types.includes(
"application/x-media-item" 'application/x-media-item'
); );
if (!hasTimelineClip && !hasMediaItem) return; if (!hasTimelineClip && !hasMediaItem) return;
const trackContainer = e.currentTarget.querySelector( const trackContainer = e.currentTarget.querySelector(
".track-clips-container" '.track-clips-container'
) as HTMLElement; ) as HTMLElement;
if (!trackContainer) return; if (!trackContainer) return;
@ -1460,7 +1459,7 @@ function TimelineTrackContent({
if (hasTimelineClip) { if (hasTimelineClip) {
// Handle timeline clip movement // Handle timeline clip movement
const timelineClipData = e.dataTransfer.getData( const timelineClipData = e.dataTransfer.getData(
"application/x-timeline-clip" 'application/x-timeline-clip'
); );
if (!timelineClipData) return; if (!timelineClipData) return;
@ -1473,7 +1472,7 @@ function TimelineTrackContent({
const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId); const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId);
if (!movingClip) { if (!movingClip) {
toast.error("Clip not found"); toast.error('Clip not found');
return; return;
} }
@ -1500,7 +1499,7 @@ function TimelineTrackContent({
if (hasOverlap) { if (hasOverlap) {
toast.error( toast.error(
"Cannot move clip here - it would overlap with existing clips" 'Cannot move clip here - it would overlap with existing clips'
); );
return; return;
} }
@ -1518,7 +1517,7 @@ function TimelineTrackContent({
} else if (hasMediaItem) { } else if (hasMediaItem) {
// Handle media item drop // Handle media item drop
const mediaItemData = e.dataTransfer.getData( const mediaItemData = e.dataTransfer.getData(
"application/x-media-item" 'application/x-media-item'
); );
if (!mediaItemData) return; if (!mediaItemData) return;
@ -1526,14 +1525,14 @@ function TimelineTrackContent({
const mediaItem = mediaItems.find((item) => item.id === id); const mediaItem = mediaItems.find((item) => item.id === id);
if (!mediaItem) { if (!mediaItem) {
toast.error("Media item not found"); toast.error('Media item not found');
return; return;
} }
// Check if track type is compatible // Check if track type is compatible
const isCompatible = const isCompatible =
(track.type === "video" && (type === "video" || type === "image")) || (track.type === 'video' && (type === 'video' || type === 'image')) ||
(track.type === "audio" && type === "audio"); (track.type === 'audio' && type === 'audio');
if (!isCompatible) { if (!isCompatible) {
toast.error(`Cannot add ${type} to ${track.type} track`); toast.error(`Cannot add ${type} to ${track.type} track`);
@ -1558,7 +1557,7 @@ function TimelineTrackContent({
if (hasOverlap) { if (hasOverlap) {
toast.error( toast.error(
"Cannot place clip here - it would overlap with existing clips" 'Cannot place clip here - it would overlap with existing clips'
); );
return; return;
} }
@ -1575,21 +1574,21 @@ function TimelineTrackContent({
toast.success(`Added ${mediaItem.name} to ${track.name}`); toast.success(`Added ${mediaItem.name} to ${track.name}`);
} }
} catch (error) { } catch (error) {
console.error("Error handling drop:", error); console.error('Error handling drop:', error);
toast.error("Failed to add media to track"); toast.error('Failed to add media to track');
} }
}; };
const getTrackColor = (type: string) => { const getTrackColor = (type: string) => {
switch (type) { switch (type) {
case "video": case 'video':
return "bg-blue-500/20 border-blue-500/30"; return 'bg-blue-500/20 border-blue-500/30';
case "audio": case 'audio':
return "bg-green-500/20 border-green-500/30"; return 'bg-green-500/20 border-green-500/30';
case "effects": case 'effects':
return "bg-purple-500/20 border-purple-500/30"; return 'bg-purple-500/20 border-purple-500/30';
default: default:
return "bg-gray-500/20 border-gray-500/30"; return 'bg-gray-500/20 border-gray-500/30';
} }
}; };
@ -1602,7 +1601,7 @@ function TimelineTrackContent({
); );
} }
if (mediaItem.type === "image") { if (mediaItem.type === 'image') {
return ( return (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<img <img
@ -1614,7 +1613,7 @@ function TimelineTrackContent({
); );
} }
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) { if (mediaItem.type === 'video' && mediaItem.thumbnailUrl) {
return ( return (
<div className="w-full h-full flex items-center gap-2"> <div className="w-full h-full flex items-center gap-2">
<div className="w-8 h-8 flex-shrink-0"> <div className="w-8 h-8 flex-shrink-0">
@ -1631,19 +1630,19 @@ function TimelineTrackContent({
); );
} }
if (mediaItem.type === "audio") { if (mediaItem.type === 'audio') {
return ( return (
<div className="w-full h-full flex items-center gap-2"> <div className="w-full h-full flex items-center gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<AudioWaveform <AudioWaveform
audioUrl={mediaItem.url} audioUrl={mediaItem.url}
height={24} height={24}
className="w-full" className="w-full"
/> />
</div>
</div> </div>
</div> );
); }
}
// Fallback for videos without thumbnails // Fallback for videos without thumbnails
return ( return (
@ -1671,7 +1670,7 @@ function TimelineTrackContent({
// Second part: add new clip after split // Second part: add new clip after split
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (cut)", name: clip.name + ' (cut)',
duration: clip.duration, duration: clip.duration,
startTime: splitTime, startTime: splitTime,
trimStart: clip.trimStart + firstDuration, trimStart: clip.trimStart + firstDuration,
@ -1682,17 +1681,17 @@ function TimelineTrackContent({
return ( return (
<div <div
className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
? wouldOverlap ? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg" ? 'bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg'
: "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg" : 'bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg'
: "hover:bg-muted/20" : 'hover:bg-muted/20'
}`} }`}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
// Only show track menu if we didn't click on a clip // Only show track menu if we didn't click on a clip
if (!(e.target as HTMLElement).closest(".timeline-clip")) { if (!(e.target as HTMLElement).closest('.timeline-clip')) {
setContextMenu({ setContextMenu({
type: "track", type: 'track',
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -1711,17 +1710,17 @@ function TimelineTrackContent({
{track.clips.length === 0 ? ( {track.clips.length === 0 ? (
<div <div
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
? wouldOverlap ? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600" ? 'border-red-500 bg-red-500/10 text-red-600'
: "border-blue-500 bg-blue-500/10 text-blue-600" : 'border-blue-500 bg-blue-500/10 text-blue-600'
: "border-muted/30" : 'border-muted/30'
}`} }`}
> >
{isDropping {isDropping
? wouldOverlap ? wouldOverlap
? "Cannot drop - would overlap" ? 'Cannot drop - would overlap'
: "Drop clip here" : 'Drop clip here'
: "Drop media here"} : 'Drop media here'}
</div> </div>
) : ( ) : (
<> <>
@ -1739,7 +1738,7 @@ function TimelineTrackContent({
return ( return (
<div <div
key={clip.id} key={clip.id}
className={`timeline-clip absolute h-full border transition-all-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`} className={`timeline-clip absolute h-full border transition-all-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? 'ring-2 ring-blue-500 z-10' : ''}`}
style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }} style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -1770,7 +1769,7 @@ function TimelineTrackContent({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setContextMenu({ setContextMenu({
type: "clip", type: 'clip',
trackId: track.id, trackId: track.id,
clipId: clip.id, clipId: clip.id,
x: e.clientX, x: e.clientX,
@ -1781,7 +1780,7 @@ function TimelineTrackContent({
{/* Left trim handle */} {/* Left trim handle */}
<div <div
className="absolute left-0 top-0 bottom-0 w-2 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500" className="absolute left-0 top-0 bottom-0 w-2 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
onMouseDown={(e) => handleResizeStart(e, clip.id, "left")} onMouseDown={(e) => handleResizeStart(e, clip.id, 'left')}
/> />
{/* Clip content */} {/* Clip content */}
<div <div
@ -1791,41 +1790,11 @@ function TimelineTrackContent({
onDragEnd={handleClipDragEnd} onDragEnd={handleClipDragEnd}
> >
{renderClipContent(clip)} {renderClipContent(clip)}
{/* Clip options menu */}
<div className="absolute top-1 right-1 z-10">
<Button
variant="text"
size="icon"
className="opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => setClipMenuOpen(clip.id)}
>
<MoreVertical className="h-4 w-4" />
</Button>
{clipMenuOpen === clip.id && (
<div className="absolute right-0 mt-2 w-32 bg-white text-black border rounded shadow z-50">
<button
className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
onClick={() => {
handleSplitClip(clip);
setClipMenuOpen(null);
}}
>
<Scissors className="h-4 w-4 mr-2" /> Split
</button>
<button
className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
onClick={() => handleDeleteClip(clip.id)}
>
<Trash2 className="h-4 w-4 mr-2" /> Delete
</button>
</div>
)}
</div>
</div> </div>
{/* Right trim handle */} {/* Right trim handle */}
<div <div
className="absolute right-0 top-0 bottom-0 w-2 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500" className="absolute right-0 top-0 bottom-0 w-2 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
onMouseDown={(e) => handleResizeStart(e, clip.id, "right")} onMouseDown={(e) => handleResizeStart(e, clip.id, 'right')}
/> />
</div> </div>
); );
@ -1834,22 +1803,22 @@ function TimelineTrackContent({
{/* Drop position indicator */} {/* Drop position indicator */}
{isDraggedOver && dropPosition !== null && ( {isDraggedOver && dropPosition !== null && (
<div <div
className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`} className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? 'bg-red-500' : 'bg-blue-500'}`}
style={{ style={{
left: `${dropPosition * 50 * zoomLevel}px`, left: `${dropPosition * 50 * zoomLevel}px`,
transform: "translateX(-50%)", transform: 'translateX(-50%)',
}} }}
> >
<div <div
className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`} className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? 'bg-red-500' : 'bg-blue-500'}`}
/> />
<div <div
className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`} className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? 'bg-red-500' : 'bg-blue-500'}`}
/> />
<div <div
className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`} className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? 'bg-red-500' : 'bg-blue-500'}`}
> >
{wouldOverlap ? "⚠️" : ""} {wouldOverlap ? '⚠️' : ''}
{dropPosition.toFixed(1)}s {dropPosition.toFixed(1)}s
</div> </div>
</div> </div>
@ -1860,4 +1829,3 @@ function TimelineTrackContent({
</div> </div>
); );
} }