feat: ripple editing mode on timeline
This commit is contained in:
Maze Winther
parent
42ae8a7530
commit
5266aed5eb
|
|
@ -1,386 +1,392 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
MoreVertical,
|
||||
Scissors,
|
||||
Trash2,
|
||||
SplitSquareHorizontal,
|
||||
Music,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Type,
|
||||
Copy,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { useMediaStore } from "@/stores/media-store";
|
||||
import { useTimelineStore } from "@/stores/timeline-store";
|
||||
import { usePlaybackStore } from "@/stores/playback-store";
|
||||
import AudioWaveform from "./audio-waveform";
|
||||
import { toast } from "sonner";
|
||||
import { TimelineElementProps, TrackType } from "@/types/timeline";
|
||||
import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
|
||||
import {
|
||||
getTrackElementClasses,
|
||||
TIMELINE_CONSTANTS,
|
||||
getTrackHeight,
|
||||
} from "@/constants/timeline-constants";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from "../ui/context-menu";
|
||||
|
||||
export function TimelineElement({
|
||||
element,
|
||||
track,
|
||||
zoomLevel,
|
||||
isSelected,
|
||||
onElementMouseDown,
|
||||
onElementClick,
|
||||
}: TimelineElementProps) {
|
||||
const { mediaItems } = useMediaStore();
|
||||
const {
|
||||
updateElementTrim,
|
||||
updateElementDuration,
|
||||
removeElementFromTrack,
|
||||
dragState,
|
||||
splitElement,
|
||||
splitAndKeepLeft,
|
||||
splitAndKeepRight,
|
||||
separateAudio,
|
||||
addElementToTrack,
|
||||
replaceElementMedia,
|
||||
} = useTimelineStore();
|
||||
const { currentTime } = usePlaybackStore();
|
||||
|
||||
const [elementMenuOpen, setElementMenuOpen] = useState(false);
|
||||
|
||||
const {
|
||||
resizing,
|
||||
isResizing,
|
||||
handleResizeStart,
|
||||
handleResizeMove,
|
||||
handleResizeEnd,
|
||||
} = useTimelineElementResize({
|
||||
element,
|
||||
track,
|
||||
zoomLevel,
|
||||
onUpdateTrim: updateElementTrim,
|
||||
onUpdateDuration: updateElementDuration,
|
||||
});
|
||||
|
||||
const effectiveDuration =
|
||||
element.duration - element.trimStart - element.trimEnd;
|
||||
const elementWidth = Math.max(
|
||||
TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,
|
||||
effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel
|
||||
);
|
||||
|
||||
// Use real-time position during drag, otherwise use stored position
|
||||
const isBeingDragged = dragState.elementId === element.id;
|
||||
const elementStartTime =
|
||||
isBeingDragged && dragState.isDragging
|
||||
? dragState.currentTime
|
||||
: element.startTime;
|
||||
|
||||
// Element should always be positioned at startTime - trimStart only affects content, not position
|
||||
const elementLeft = elementStartTime * 50 * zoomLevel;
|
||||
|
||||
const handleElementSplitContext = () => {
|
||||
const effectiveStart = element.startTime;
|
||||
const effectiveEnd =
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd);
|
||||
|
||||
if (currentTime > effectiveStart && currentTime < effectiveEnd) {
|
||||
const secondElementId = splitElement(track.id, element.id, currentTime);
|
||||
if (!secondElementId) {
|
||||
toast.error("Failed to split element");
|
||||
}
|
||||
} else {
|
||||
toast.error("Playhead must be within element to split");
|
||||
}
|
||||
};
|
||||
|
||||
const handleElementDuplicateContext = () => {
|
||||
const { id, ...elementWithoutId } = element;
|
||||
addElementToTrack(track.id, {
|
||||
...elementWithoutId,
|
||||
name: element.name + " (copy)",
|
||||
startTime:
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd) +
|
||||
0.1,
|
||||
});
|
||||
};
|
||||
|
||||
const handleElementDeleteContext = () => {
|
||||
removeElementFromTrack(track.id, element.id);
|
||||
};
|
||||
|
||||
const handleReplaceClip = () => {
|
||||
if (element.type !== "media") {
|
||||
toast.error("Replace is only available for media clips");
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a file input to select replacement media
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "video/*,audio/*,image/*";
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const success = await replaceElementMedia(track.id, element.id, file);
|
||||
if (success) {
|
||||
toast.success("Clip replaced successfully");
|
||||
} else {
|
||||
toast.error("Failed to replace clip");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to replace clip");
|
||||
console.log(
|
||||
JSON.stringify({ error: "Failed to replace clip", details: error })
|
||||
);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const renderElementContent = () => {
|
||||
if (element.type === "text") {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-start pl-2">
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.content}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render media element ->
|
||||
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
|
||||
if (!mediaItem) {
|
||||
return (
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const TILE_ASPECT_RATIO = 16 / 9;
|
||||
|
||||
if (mediaItem.type === "image") {
|
||||
// Calculate tile size based on 16:9 aspect ratio
|
||||
const trackHeight = getTrackHeight(track.type);
|
||||
const tileHeight = trackHeight - 8; // Account for padding
|
||||
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="bg-[#004D52] py-3 w-full h-full relative">
|
||||
{/* Background with tiled images */}
|
||||
<div
|
||||
className="absolute top-3 bottom-3 left-0 right-0"
|
||||
style={{
|
||||
backgroundImage: mediaItem.url
|
||||
? `url(${mediaItem.url})`
|
||||
: "none",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: `${tileWidth}px ${tileHeight}px`,
|
||||
backgroundPosition: "left center",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
aria-label={`Tiled background of ${mediaItem.name}`}
|
||||
/>
|
||||
{/* Overlay with vertical borders */}
|
||||
<div
|
||||
className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
to right,
|
||||
transparent 0px,
|
||||
transparent ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth}px
|
||||
)`,
|
||||
backgroundPosition: "left center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const VIDEO_TILE_PADDING = 16;
|
||||
const OVERLAY_SPACE_MULTIPLIER = 1.5;
|
||||
|
||||
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
|
||||
const trackHeight = getTrackHeight(track.type);
|
||||
const tileHeight = trackHeight - VIDEO_TILE_PADDING;
|
||||
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center gap-2">
|
||||
<div className="flex-1 h-full relative overflow-hidden">
|
||||
{/* Background with tiled thumbnails */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: mediaItem.thumbnailUrl
|
||||
? `url(${mediaItem.thumbnailUrl})`
|
||||
: "none",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: `${tileWidth}px ${tileHeight}px`,
|
||||
backgroundPosition: "left center",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
aria-label={`Tiled thumbnail of ${mediaItem.name}`}
|
||||
/>
|
||||
{/* Overlay with vertical borders */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
to right,
|
||||
transparent 0px,
|
||||
transparent ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth}px
|
||||
)`,
|
||||
backgroundPosition: "left center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
|
||||
{element.name}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">
|
||||
{element.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render audio element ->
|
||||
if (mediaItem.type === "audio") {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<AudioWaveform
|
||||
audioUrl={mediaItem.url || ""}
|
||||
height={24}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.name}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const handleElementMouseDown = (e: React.MouseEvent) => {
|
||||
if (onElementMouseDown) {
|
||||
onElementMouseDown(e, element);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div
|
||||
className={`absolute top-0 h-full select-none timeline-element ${
|
||||
isBeingDragged ? "z-50" : "z-10"
|
||||
}`}
|
||||
style={{
|
||||
left: `${elementLeft}px`,
|
||||
width: `${elementWidth}px`,
|
||||
}}
|
||||
data-element-id={element.id}
|
||||
data-track-id={track.id}
|
||||
onMouseMove={resizing ? handleResizeMove : undefined}
|
||||
onMouseUp={resizing ? handleResizeEnd : undefined}
|
||||
onMouseLeave={resizing ? handleResizeEnd : undefined}
|
||||
>
|
||||
<div
|
||||
className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
|
||||
track.type
|
||||
)} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
|
||||
isBeingDragged ? "z-50" : "z-10"
|
||||
}`}
|
||||
onClick={(e) => onElementClick && onElementClick(e, element)}
|
||||
onMouseDown={handleElementMouseDown}
|
||||
onContextMenu={(e) =>
|
||||
onElementMouseDown && onElementMouseDown(e, element)
|
||||
}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center h-full">
|
||||
{renderElementContent()}
|
||||
</div>
|
||||
|
||||
{isSelected && (
|
||||
<>
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
|
||||
onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
|
||||
/>
|
||||
<div
|
||||
className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
|
||||
onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem onClick={handleElementSplitContext}>
|
||||
<Scissors className="h-4 w-4 mr-2" />
|
||||
Split at playhead
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={handleElementDuplicateContext}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Duplicate {element.type === "text" ? "text" : "clip"}
|
||||
</ContextMenuItem>
|
||||
{element.type === "media" && (
|
||||
<ContextMenuItem onClick={handleReplaceClip}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Replace clip
|
||||
</ContextMenuItem>
|
||||
)}
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
onClick={handleElementDeleteContext}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete {element.type === "text" ? "text" : "clip"}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
MoreVertical,
|
||||
Scissors,
|
||||
Trash2,
|
||||
SplitSquareHorizontal,
|
||||
Music,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Type,
|
||||
Copy,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { useMediaStore } from "@/stores/media-store";
|
||||
import { useTimelineStore } from "@/stores/timeline-store";
|
||||
import { usePlaybackStore } from "@/stores/playback-store";
|
||||
import AudioWaveform from "./audio-waveform";
|
||||
import { toast } from "sonner";
|
||||
import { TimelineElementProps, TrackType } from "@/types/timeline";
|
||||
import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
|
||||
import {
|
||||
getTrackElementClasses,
|
||||
TIMELINE_CONSTANTS,
|
||||
getTrackHeight,
|
||||
} from "@/constants/timeline-constants";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from "../ui/context-menu";
|
||||
|
||||
export function TimelineElement({
|
||||
element,
|
||||
track,
|
||||
zoomLevel,
|
||||
isSelected,
|
||||
onElementMouseDown,
|
||||
onElementClick,
|
||||
}: TimelineElementProps) {
|
||||
const { mediaItems } = useMediaStore();
|
||||
const {
|
||||
updateElementTrim,
|
||||
updateElementDuration,
|
||||
removeElementFromTrack,
|
||||
removeElementFromTrackWithRipple,
|
||||
dragState,
|
||||
splitElement,
|
||||
splitAndKeepLeft,
|
||||
splitAndKeepRight,
|
||||
separateAudio,
|
||||
addElementToTrack,
|
||||
replaceElementMedia,
|
||||
rippleEditingEnabled,
|
||||
} = useTimelineStore();
|
||||
const { currentTime } = usePlaybackStore();
|
||||
|
||||
const [elementMenuOpen, setElementMenuOpen] = useState(false);
|
||||
|
||||
const {
|
||||
resizing,
|
||||
isResizing,
|
||||
handleResizeStart,
|
||||
handleResizeMove,
|
||||
handleResizeEnd,
|
||||
} = useTimelineElementResize({
|
||||
element,
|
||||
track,
|
||||
zoomLevel,
|
||||
onUpdateTrim: updateElementTrim,
|
||||
onUpdateDuration: updateElementDuration,
|
||||
});
|
||||
|
||||
const effectiveDuration =
|
||||
element.duration - element.trimStart - element.trimEnd;
|
||||
const elementWidth = Math.max(
|
||||
TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,
|
||||
effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel
|
||||
);
|
||||
|
||||
// Use real-time position during drag, otherwise use stored position
|
||||
const isBeingDragged = dragState.elementId === element.id;
|
||||
const elementStartTime =
|
||||
isBeingDragged && dragState.isDragging
|
||||
? dragState.currentTime
|
||||
: element.startTime;
|
||||
|
||||
// Element should always be positioned at startTime - trimStart only affects content, not position
|
||||
const elementLeft = elementStartTime * 50 * zoomLevel;
|
||||
|
||||
const handleElementSplitContext = () => {
|
||||
const effectiveStart = element.startTime;
|
||||
const effectiveEnd =
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd);
|
||||
|
||||
if (currentTime > effectiveStart && currentTime < effectiveEnd) {
|
||||
const secondElementId = splitElement(track.id, element.id, currentTime);
|
||||
if (!secondElementId) {
|
||||
toast.error("Failed to split element");
|
||||
}
|
||||
} else {
|
||||
toast.error("Playhead must be within element to split");
|
||||
}
|
||||
};
|
||||
|
||||
const handleElementDuplicateContext = () => {
|
||||
const { id, ...elementWithoutId } = element;
|
||||
addElementToTrack(track.id, {
|
||||
...elementWithoutId,
|
||||
name: element.name + " (copy)",
|
||||
startTime:
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd) +
|
||||
0.1,
|
||||
});
|
||||
};
|
||||
|
||||
const handleElementDeleteContext = () => {
|
||||
if (rippleEditingEnabled) {
|
||||
removeElementFromTrackWithRipple(track.id, element.id);
|
||||
} else {
|
||||
removeElementFromTrack(track.id, element.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReplaceClip = () => {
|
||||
if (element.type !== "media") {
|
||||
toast.error("Replace is only available for media clips");
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a file input to select replacement media
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "video/*,audio/*,image/*";
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const success = await replaceElementMedia(track.id, element.id, file);
|
||||
if (success) {
|
||||
toast.success("Clip replaced successfully");
|
||||
} else {
|
||||
toast.error("Failed to replace clip");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to replace clip");
|
||||
console.log(
|
||||
JSON.stringify({ error: "Failed to replace clip", details: error })
|
||||
);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const renderElementContent = () => {
|
||||
if (element.type === "text") {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-start pl-2">
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.content}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render media element ->
|
||||
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
|
||||
if (!mediaItem) {
|
||||
return (
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const TILE_ASPECT_RATIO = 16 / 9;
|
||||
|
||||
if (mediaItem.type === "image") {
|
||||
// Calculate tile size based on 16:9 aspect ratio
|
||||
const trackHeight = getTrackHeight(track.type);
|
||||
const tileHeight = trackHeight - 8; // Account for padding
|
||||
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="bg-[#004D52] py-3 w-full h-full relative">
|
||||
{/* Background with tiled images */}
|
||||
<div
|
||||
className="absolute top-3 bottom-3 left-0 right-0"
|
||||
style={{
|
||||
backgroundImage: mediaItem.url
|
||||
? `url(${mediaItem.url})`
|
||||
: "none",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: `${tileWidth}px ${tileHeight}px`,
|
||||
backgroundPosition: "left center",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
aria-label={`Tiled background of ${mediaItem.name}`}
|
||||
/>
|
||||
{/* Overlay with vertical borders */}
|
||||
<div
|
||||
className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
to right,
|
||||
transparent 0px,
|
||||
transparent ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth}px
|
||||
)`,
|
||||
backgroundPosition: "left center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const VIDEO_TILE_PADDING = 16;
|
||||
const OVERLAY_SPACE_MULTIPLIER = 1.5;
|
||||
|
||||
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
|
||||
const trackHeight = getTrackHeight(track.type);
|
||||
const tileHeight = trackHeight - VIDEO_TILE_PADDING;
|
||||
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center gap-2">
|
||||
<div className="flex-1 h-full relative overflow-hidden">
|
||||
{/* Background with tiled thumbnails */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: mediaItem.thumbnailUrl
|
||||
? `url(${mediaItem.thumbnailUrl})`
|
||||
: "none",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: `${tileWidth}px ${tileHeight}px`,
|
||||
backgroundPosition: "left center",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
aria-label={`Tiled thumbnail of ${mediaItem.name}`}
|
||||
/>
|
||||
{/* Overlay with vertical borders */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
to right,
|
||||
transparent 0px,
|
||||
transparent ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
|
||||
rgba(255, 255, 255, 0.6) ${tileWidth}px
|
||||
)`,
|
||||
backgroundPosition: "left center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
|
||||
{element.name}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">
|
||||
{element.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render audio element ->
|
||||
if (mediaItem.type === "audio") {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<AudioWaveform
|
||||
audioUrl={mediaItem.url || ""}
|
||||
height={24}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="text-xs text-foreground/80 truncate">
|
||||
{element.name}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const handleElementMouseDown = (e: React.MouseEvent) => {
|
||||
if (onElementMouseDown) {
|
||||
onElementMouseDown(e, element);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div
|
||||
className={`absolute top-0 h-full select-none timeline-element ${
|
||||
isBeingDragged ? "z-50" : "z-10"
|
||||
}`}
|
||||
style={{
|
||||
left: `${elementLeft}px`,
|
||||
width: `${elementWidth}px`,
|
||||
}}
|
||||
data-element-id={element.id}
|
||||
data-track-id={track.id}
|
||||
onMouseMove={resizing ? handleResizeMove : undefined}
|
||||
onMouseUp={resizing ? handleResizeEnd : undefined}
|
||||
onMouseLeave={resizing ? handleResizeEnd : undefined}
|
||||
>
|
||||
<div
|
||||
className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
|
||||
track.type
|
||||
)} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
|
||||
isBeingDragged ? "z-50" : "z-10"
|
||||
}`}
|
||||
onClick={(e) => onElementClick && onElementClick(e, element)}
|
||||
onMouseDown={handleElementMouseDown}
|
||||
onContextMenu={(e) =>
|
||||
onElementMouseDown && onElementMouseDown(e, element)
|
||||
}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center h-full">
|
||||
{renderElementContent()}
|
||||
</div>
|
||||
|
||||
{isSelected && (
|
||||
<>
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
|
||||
onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
|
||||
/>
|
||||
<div
|
||||
className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
|
||||
onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem onClick={handleElementSplitContext}>
|
||||
<Scissors className="h-4 w-4 mr-2" />
|
||||
Split at playhead
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={handleElementDuplicateContext}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Duplicate {element.type === "text" ? "text" : "clip"}
|
||||
</ContextMenuItem>
|
||||
{element.type === "media" && (
|
||||
<ContextMenuItem onClick={handleReplaceClip}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Replace clip
|
||||
</ContextMenuItem>
|
||||
)}
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
onClick={handleElementDeleteContext}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete {element.type === "text" ? "text" : "clip"}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export function TimelineTrackContent({
|
|||
addTrack,
|
||||
moveElementToTrack,
|
||||
updateElementStartTime,
|
||||
updateElementStartTimeWithRipple,
|
||||
addElementToTrack,
|
||||
selectedElements,
|
||||
selectElement,
|
||||
|
|
@ -49,6 +50,7 @@ export function TimelineTrackContent({
|
|||
clearSelectedElements,
|
||||
insertTrackAt,
|
||||
snappingEnabled,
|
||||
rippleEditingEnabled,
|
||||
} = useTimelineStore();
|
||||
|
||||
const { currentTime } = usePlaybackStore();
|
||||
|
|
@ -221,11 +223,19 @@ export function TimelineTrackContent({
|
|||
const timelineRect = timelineRef.current?.getBoundingClientRect();
|
||||
if (!timelineRect) {
|
||||
if (isTrackThatStartedDrag) {
|
||||
updateElementStartTime(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
dragState.currentTime
|
||||
);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
dragState.currentTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
dragState.currentTime
|
||||
);
|
||||
}
|
||||
endDragAction();
|
||||
// Clear snap point when drag ends
|
||||
onSnapPointChange?.(null);
|
||||
|
|
@ -272,7 +282,19 @@ export function TimelineTrackContent({
|
|||
|
||||
if (!hasOverlap) {
|
||||
if (dragState.trackId === track.id) {
|
||||
updateElementStartTime(track.id, dragState.elementId, finalTime);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
finalTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
finalTime
|
||||
);
|
||||
}
|
||||
} else {
|
||||
moveElementToTrack(
|
||||
dragState.trackId,
|
||||
|
|
@ -280,11 +302,19 @@ export function TimelineTrackContent({
|
|||
dragState.elementId
|
||||
);
|
||||
requestAnimationFrame(() => {
|
||||
updateElementStartTime(
|
||||
track.id,
|
||||
dragState.elementId!,
|
||||
finalTime
|
||||
);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
dragState.elementId!,
|
||||
finalTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(
|
||||
track.id,
|
||||
dragState.elementId!,
|
||||
finalTime
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -318,7 +348,15 @@ export function TimelineTrackContent({
|
|||
});
|
||||
|
||||
if (!hasOverlap) {
|
||||
updateElementStartTime(track.id, dragState.elementId, finalTime);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
dragState.elementId,
|
||||
finalTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(track.id, dragState.elementId, finalTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -743,12 +781,28 @@ export function TimelineTrackContent({
|
|||
|
||||
if (fromTrackId === track.id) {
|
||||
// Moving within same track
|
||||
updateElementStartTime(track.id, elementId, finalStartTime);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
elementId,
|
||||
finalStartTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(track.id, elementId, finalStartTime);
|
||||
}
|
||||
} else {
|
||||
// Moving to different track
|
||||
moveElementToTrack(fromTrackId, track.id, elementId);
|
||||
requestAnimationFrame(() => {
|
||||
updateElementStartTime(track.id, elementId, finalStartTime);
|
||||
if (rippleEditingEnabled) {
|
||||
updateElementStartTimeWithRipple(
|
||||
track.id,
|
||||
elementId,
|
||||
finalStartTime
|
||||
);
|
||||
} else {
|
||||
updateElementStartTime(track.id, elementId, finalStartTime);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (hasMediaItem) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,54 @@
|
|||
import { TimelineElement } from "@/types/timeline";
|
||||
|
||||
// Helper function to check for element overlaps and prevent invalid timeline states
|
||||
export const checkElementOverlaps = (elements: TimelineElement[]): boolean => {
|
||||
// Sort elements by start time
|
||||
const sortedElements = [...elements].sort(
|
||||
(a, b) => a.startTime - b.startTime
|
||||
);
|
||||
|
||||
for (let i = 0; i < sortedElements.length - 1; i++) {
|
||||
const current = sortedElements[i];
|
||||
const next = sortedElements[i + 1];
|
||||
|
||||
const currentEnd =
|
||||
current.startTime +
|
||||
(current.duration - current.trimStart - current.trimEnd);
|
||||
|
||||
// Check if current element overlaps with next element
|
||||
if (currentEnd > next.startTime) return true; // Overlap detected
|
||||
}
|
||||
|
||||
return false; // No overlaps
|
||||
};
|
||||
|
||||
// Helper function to resolve overlaps by adjusting element positions
|
||||
export const resolveElementOverlaps = (
|
||||
elements: TimelineElement[]
|
||||
): TimelineElement[] => {
|
||||
// Sort elements by start time
|
||||
const sortedElements = [...elements].sort(
|
||||
(a, b) => a.startTime - b.startTime
|
||||
);
|
||||
const resolvedElements: TimelineElement[] = [];
|
||||
|
||||
for (let i = 0; i < sortedElements.length; i++) {
|
||||
const current = { ...sortedElements[i] };
|
||||
|
||||
if (resolvedElements.length > 0) {
|
||||
const previous = resolvedElements[resolvedElements.length - 1];
|
||||
const previousEnd =
|
||||
previous.startTime +
|
||||
(previous.duration - previous.trimStart - previous.trimEnd);
|
||||
|
||||
// If current element would overlap with previous, push it after previous ends
|
||||
if (current.startTime < previousEnd) {
|
||||
current.startTime = previousEnd;
|
||||
}
|
||||
}
|
||||
|
||||
resolvedElements.push(current);
|
||||
}
|
||||
|
||||
return resolvedElements;
|
||||
};
|
||||
|
|
@ -21,6 +21,7 @@ import { useProjectStore } from "./project-store";
|
|||
import { generateUUID } from "@/lib/utils";
|
||||
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
|
||||
import { toast } from "sonner";
|
||||
import { checkElementOverlaps, resolveElementOverlaps } from "@/lib/timeline";
|
||||
|
||||
// Helper function to manage element naming with suffixes
|
||||
const getElementNameWithSuffix = (
|
||||
|
|
@ -55,6 +56,10 @@ interface TimelineStore {
|
|||
// Snapping actions
|
||||
toggleSnapping: () => void;
|
||||
|
||||
// Ripple editing mode
|
||||
rippleEditingEnabled: boolean;
|
||||
toggleRippleEditing: () => void;
|
||||
|
||||
// Multi-selection
|
||||
selectedElements: { trackId: string; elementId: string }[];
|
||||
selectElement: (trackId: string, elementId: string, multi?: boolean) => void;
|
||||
|
|
@ -89,6 +94,7 @@ interface TimelineStore {
|
|||
addTrack: (type: TrackType) => string;
|
||||
insertTrackAt: (type: TrackType, index: number) => string;
|
||||
removeTrack: (trackId: string) => void;
|
||||
removeTrackWithRipple: (trackId: string) => void;
|
||||
addElementToTrack: (trackId: string, element: CreateTimelineElement) => void;
|
||||
removeElementFromTrack: (trackId: string, elementId: string) => void;
|
||||
moveElementToTrack: (
|
||||
|
|
@ -139,6 +145,17 @@ interface TimelineStore {
|
|||
newFile: File
|
||||
) => Promise<boolean>;
|
||||
|
||||
// Ripple editing functions
|
||||
updateElementStartTimeWithRipple: (
|
||||
trackId: string,
|
||||
elementId: string,
|
||||
newStartTime: number
|
||||
) => void;
|
||||
removeElementFromTrackWithRipple: (
|
||||
trackId: string,
|
||||
elementId: string
|
||||
) => void;
|
||||
|
||||
// Computed values
|
||||
getTotalDuration: () => number;
|
||||
|
||||
|
|
@ -226,6 +243,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
|
|||
history: [],
|
||||
redoStack: [],
|
||||
selectedElements: [],
|
||||
rippleEditingEnabled: false,
|
||||
|
||||
// Snapping settings defaults
|
||||
snappingEnabled: true,
|
||||
|
|
@ -346,10 +364,107 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
|
|||
},
|
||||
|
||||
removeTrack: (trackId) => {
|
||||
const { rippleEditingEnabled } = get();
|
||||
|
||||
if (rippleEditingEnabled) {
|
||||
get().removeTrackWithRipple(trackId);
|
||||
} else {
|
||||
get().pushHistory();
|
||||
updateTracksAndSave(
|
||||
get()._tracks.filter((track) => track.id !== trackId)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
removeTrackWithRipple: (trackId) => {
|
||||
const { _tracks } = get();
|
||||
const trackToRemove = _tracks.find((t) => t.id === trackId);
|
||||
|
||||
if (!trackToRemove) return;
|
||||
|
||||
get().pushHistory();
|
||||
updateTracksAndSave(
|
||||
get()._tracks.filter((track) => track.id !== trackId)
|
||||
);
|
||||
|
||||
// If track has no elements, just remove it normally
|
||||
if (trackToRemove.elements.length === 0) {
|
||||
updateTracksAndSave(_tracks.filter((track) => track.id !== trackId));
|
||||
return;
|
||||
}
|
||||
|
||||
// Find all the time ranges occupied by elements in the track being removed
|
||||
const occupiedRanges = trackToRemove.elements.map((element) => ({
|
||||
startTime: element.startTime,
|
||||
endTime:
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd),
|
||||
}));
|
||||
|
||||
// Sort ranges by start time
|
||||
occupiedRanges.sort((a, b) => a.startTime - b.startTime);
|
||||
|
||||
// Merge overlapping ranges to get consolidated gaps
|
||||
const mergedRanges: Array<{
|
||||
startTime: number;
|
||||
endTime: number;
|
||||
duration: number;
|
||||
}> = [];
|
||||
|
||||
for (const range of occupiedRanges) {
|
||||
if (mergedRanges.length === 0) {
|
||||
mergedRanges.push({
|
||||
startTime: range.startTime,
|
||||
endTime: range.endTime,
|
||||
duration: range.endTime - range.startTime,
|
||||
});
|
||||
} else {
|
||||
const lastRange = mergedRanges[mergedRanges.length - 1];
|
||||
if (range.startTime <= lastRange.endTime) {
|
||||
// Overlapping or adjacent ranges, merge them
|
||||
lastRange.endTime = Math.max(lastRange.endTime, range.endTime);
|
||||
lastRange.duration = lastRange.endTime - lastRange.startTime;
|
||||
} else {
|
||||
// Non-overlapping range, add as new
|
||||
mergedRanges.push({
|
||||
startTime: range.startTime,
|
||||
endTime: range.endTime,
|
||||
duration: range.endTime - range.startTime,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the track and apply ripple effects to remaining tracks
|
||||
const updatedTracks = _tracks
|
||||
.filter((track) => track.id !== trackId)
|
||||
.map((track) => {
|
||||
const updatedElements = track.elements.map((element) => {
|
||||
let newStartTime = element.startTime;
|
||||
|
||||
// Process gaps from right to left (latest to earliest) to avoid cumulative shifts
|
||||
for (let i = mergedRanges.length - 1; i >= 0; i--) {
|
||||
const gap = mergedRanges[i];
|
||||
// If this element starts after the gap, shift it left by the gap duration
|
||||
if (newStartTime >= gap.endTime) {
|
||||
newStartTime -= gap.duration;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...element,
|
||||
startTime: Math.max(0, newStartTime),
|
||||
};
|
||||
});
|
||||
|
||||
// Check for overlaps and resolve them if necessary
|
||||
const hasOverlaps = checkElementOverlaps(updatedElements);
|
||||
if (hasOverlaps) {
|
||||
const resolvedElements = resolveElementOverlaps(updatedElements);
|
||||
return { ...track, elements: resolvedElements };
|
||||
}
|
||||
|
||||
return { ...track, elements: updatedElements };
|
||||
});
|
||||
|
||||
updateTracksAndSave(updatedTracks);
|
||||
},
|
||||
|
||||
addElementToTrack: (trackId, elementData) => {
|
||||
|
|
@ -434,21 +549,99 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
|
|||
},
|
||||
|
||||
removeElementFromTrack: (trackId, elementId) => {
|
||||
const { rippleEditingEnabled } = get();
|
||||
|
||||
if (rippleEditingEnabled) {
|
||||
get().removeElementFromTrackWithRipple(trackId, elementId);
|
||||
} else {
|
||||
get().pushHistory();
|
||||
updateTracksAndSave(
|
||||
get()
|
||||
._tracks.map((track) =>
|
||||
track.id === trackId
|
||||
? {
|
||||
...track,
|
||||
elements: track.elements.filter(
|
||||
(element) => element.id !== elementId
|
||||
),
|
||||
}
|
||||
: track
|
||||
)
|
||||
.filter((track) => track.elements.length > 0)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
removeElementFromTrackWithRipple: (trackId, elementId) => {
|
||||
const { _tracks, rippleEditingEnabled } = get();
|
||||
|
||||
if (!rippleEditingEnabled) {
|
||||
// If ripple editing is disabled, use regular removal
|
||||
get().removeElementFromTrack(trackId, elementId);
|
||||
return;
|
||||
}
|
||||
|
||||
const track = _tracks.find((t) => t.id === trackId);
|
||||
const element = track?.elements.find((e) => e.id === elementId);
|
||||
|
||||
if (!element || !track) return;
|
||||
|
||||
get().pushHistory();
|
||||
updateTracksAndSave(
|
||||
get()
|
||||
._tracks.map((track) =>
|
||||
track.id === trackId
|
||||
? {
|
||||
...track,
|
||||
elements: track.elements.filter(
|
||||
(element) => element.id !== elementId
|
||||
|
||||
const elementStartTime = element.startTime;
|
||||
const elementDuration =
|
||||
element.duration - element.trimStart - element.trimEnd;
|
||||
const elementEndTime = elementStartTime + elementDuration;
|
||||
|
||||
// Remove the element and shift all elements that come after it
|
||||
const updatedTracks = _tracks
|
||||
.map((currentTrack) => {
|
||||
// Only apply ripple effects to the same track unless multi-track ripple is enabled
|
||||
const shouldApplyRipple = currentTrack.id === trackId;
|
||||
|
||||
const updatedElements = currentTrack.elements
|
||||
.filter((currentElement) => {
|
||||
// Remove the target element
|
||||
if (
|
||||
currentElement.id === elementId &&
|
||||
currentTrack.id === trackId
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((currentElement) => {
|
||||
// Only apply ripple effects if we should process this track
|
||||
if (!shouldApplyRipple) {
|
||||
return currentElement;
|
||||
}
|
||||
|
||||
// Shift elements that start after the removed element
|
||||
if (currentElement.startTime >= elementEndTime) {
|
||||
return {
|
||||
...currentElement,
|
||||
startTime: Math.max(
|
||||
0,
|
||||
currentElement.startTime - elementDuration
|
||||
),
|
||||
}
|
||||
: track
|
||||
)
|
||||
.filter((track) => track.elements.length > 0)
|
||||
);
|
||||
};
|
||||
}
|
||||
return currentElement;
|
||||
});
|
||||
|
||||
// Check for overlaps and resolve them if necessary
|
||||
const hasOverlaps = checkElementOverlaps(updatedElements);
|
||||
if (hasOverlaps) {
|
||||
// Resolve overlaps by adjusting element positions
|
||||
const resolvedElements = resolveElementOverlaps(updatedElements);
|
||||
return { ...currentTrack, elements: resolvedElements };
|
||||
}
|
||||
|
||||
return { ...currentTrack, elements: updatedElements };
|
||||
})
|
||||
.filter((track) => track.elements.length > 0 || track.isMain);
|
||||
|
||||
updateTracksAndSave(updatedTracks);
|
||||
},
|
||||
|
||||
moveElementToTrack: (fromTrackId, toTrackId, elementId) => {
|
||||
|
|
@ -544,6 +737,95 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
|
|||
);
|
||||
},
|
||||
|
||||
updateElementStartTimeWithRipple: (trackId, elementId, newStartTime) => {
|
||||
const { _tracks, rippleEditingEnabled } = get();
|
||||
|
||||
if (!rippleEditingEnabled) {
|
||||
// If ripple editing is disabled, use regular update
|
||||
get().updateElementStartTime(trackId, elementId, newStartTime);
|
||||
return;
|
||||
}
|
||||
|
||||
const track = _tracks.find((t) => t.id === trackId);
|
||||
const element = track?.elements.find((e) => e.id === elementId);
|
||||
|
||||
if (!element || !track) return;
|
||||
|
||||
get().pushHistory();
|
||||
|
||||
const oldStartTime = element.startTime;
|
||||
const oldEndTime =
|
||||
element.startTime +
|
||||
(element.duration - element.trimStart - element.trimEnd);
|
||||
const newEndTime =
|
||||
newStartTime + (element.duration - element.trimStart - element.trimEnd);
|
||||
const timeDelta = newStartTime - oldStartTime;
|
||||
|
||||
// Update tracks based on multi-track ripple setting
|
||||
const updatedTracks = _tracks.map((currentTrack) => {
|
||||
// Only apply ripple effects to the same track unless multi-track ripple is enabled
|
||||
const shouldApplyRipple = currentTrack.id === trackId;
|
||||
|
||||
const updatedElements = currentTrack.elements.map((currentElement) => {
|
||||
if (currentElement.id === elementId && currentTrack.id === trackId) {
|
||||
// Update the moved element
|
||||
return { ...currentElement, startTime: newStartTime };
|
||||
}
|
||||
|
||||
// Only apply ripple effects if we should process this track
|
||||
if (!shouldApplyRipple) {
|
||||
return currentElement;
|
||||
}
|
||||
|
||||
// For ripple editing, we need to move elements that come after the moved element
|
||||
const currentElementStart = currentElement.startTime;
|
||||
const currentElementEnd =
|
||||
currentElement.startTime +
|
||||
(currentElement.duration -
|
||||
currentElement.trimStart -
|
||||
currentElement.trimEnd);
|
||||
|
||||
// If moving element to the right (positive delta)
|
||||
if (timeDelta > 0) {
|
||||
// Move elements that start after the original position of the moved element
|
||||
if (currentElementStart >= oldEndTime) {
|
||||
return {
|
||||
...currentElement,
|
||||
startTime: currentElementStart + timeDelta,
|
||||
};
|
||||
}
|
||||
}
|
||||
// If moving element to the left (negative delta)
|
||||
else if (timeDelta < 0) {
|
||||
// Move elements that start after the new position of the moved element
|
||||
if (
|
||||
currentElementStart >= newEndTime &&
|
||||
currentElementStart >= oldStartTime
|
||||
) {
|
||||
return {
|
||||
...currentElement,
|
||||
startTime: Math.max(0, currentElementStart + timeDelta),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return currentElement;
|
||||
});
|
||||
|
||||
// Check for overlaps and resolve them if necessary
|
||||
const hasOverlaps = checkElementOverlaps(updatedElements);
|
||||
if (hasOverlaps) {
|
||||
// Resolve overlaps by adjusting element positions
|
||||
const resolvedElements = resolveElementOverlaps(updatedElements);
|
||||
return { ...currentTrack, elements: resolvedElements };
|
||||
}
|
||||
|
||||
return { ...currentTrack, elements: updatedElements };
|
||||
});
|
||||
|
||||
updateTracksAndSave(updatedTracks);
|
||||
},
|
||||
|
||||
toggleTrackMute: (trackId) => {
|
||||
get().pushHistory();
|
||||
updateTracksAndSave(
|
||||
|
|
@ -982,6 +1264,13 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
|
|||
set((state) => ({ snappingEnabled: !state.snappingEnabled }));
|
||||
},
|
||||
|
||||
// Ripple editing functions
|
||||
toggleRippleEditing: () => {
|
||||
set((state) => ({
|
||||
rippleEditingEnabled: !state.rippleEditingEnabled,
|
||||
}));
|
||||
},
|
||||
|
||||
checkElementOverlap: (trackId, startTime, duration, excludeElementId) => {
|
||||
const track = get()._tracks.find((t) => t.id === trackId);
|
||||
if (!track) return false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue