feat: add comments for drag handling and resizing in timeline clip component

This commit is contained in:
DevloperAmanSingh
2025-06-26 23:46:33 +05:30
parent efdd2aa6ed
commit 7ca5bcfa50

View File

@ -58,6 +58,7 @@ export function TimelineClip({
const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd; const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel); const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
// Use real-time position during drag, otherwise use stored position
const isBeingDragged = dragState.clipId === clip.id; const isBeingDragged = dragState.clipId === clip.id;
const clipStartTime = const clipStartTime =
isBeingDragged && dragState.isDragging isBeingDragged && dragState.isDragging
@ -78,6 +79,7 @@ export function TimelineClip({
} }
}; };
// Resize handles for trimming clips
const handleResizeStart = ( const handleResizeStart = (
e: React.MouseEvent, e: React.MouseEvent,
clipId: string, clipId: string,
@ -329,6 +331,7 @@ export function TimelineClip({
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56"> <DropdownMenuContent align="end" className="w-56">
{/* Split operations - only available when playhead is within clip */}
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}> <DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}>
<Scissors className="mr-2 h-4 w-4" /> <Scissors className="mr-2 h-4 w-4" />
@ -350,6 +353,7 @@ export function TimelineClip({
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuSub> </DropdownMenuSub>
{/* Audio separation - only available for video clips */}
{canSeparateAudio() && ( {canSeparateAudio() && (
<> <>
<DropdownMenuSeparator /> <DropdownMenuSeparator />