fix: ripple timeline to drop removed ranges instead of leaving dead zones

src/components/video-editor/hooks/useClipRegionCommands.ts

@@ -2,13 +2,14 @@ import type { Span } from "dnd-timeline";
 import { type Dispatch, type MutableRefObject, type SetStateAction, useCallback } from "react";
 import { toast } from "sonner";
 import { planClipSpeedChange } from "../clipSpeedChange";
-import type {
-	AnnotationRegion,
-	AudioRegion,
-	ClipRegion,
-	EditorEffectSection,
-	SpeedRegion,
-	ZoomRegion,
+import {
+	getClipTimelineStartMs,
+	type AnnotationRegion,
+	type AudioRegion,
+	type ClipRegion,
+	type EditorEffectSection,
+	type SpeedRegion,
+	type ZoomRegion,
 } from "../types";
 
 type Translator = (
@@ -79,15 +80,25 @@ export function useClipRegionCommands({
 
 	const handleClipSplit = useCallback(
 		(splitMs: number) => {
-			const target = clipRegions.find(
-				(clip) => splitMs > clip.startMs && splitMs < clip.endMs,
-			);
+			const target = clipRegions.find((clip) => {
+				const timelineStart = getClipTimelineStartMs(clip, clipRegions);
+				const timelineEnd = timelineStart + Math.max(0, clip.endMs - clip.startMs);
+				return splitMs > timelineStart && splitMs < timelineEnd;
+			});
 			if (!target) return;
 			const leftId = `clip-${nextClipIdRef.current++}`;
 			const rightId = `clip-${nextClipIdRef.current++}`;
+			const timelineStart = getClipTimelineStartMs(target, clipRegions);
 			const splitAt = Math.round(splitMs);
-			const left: ClipRegion = { ...target, id: leftId, endMs: splitAt };
-			const right: ClipRegion = { ...target, id: rightId, startMs: splitAt };
+			const splitOffset = splitAt - timelineStart;
+			const newSourceStart = Math.round(target.startMs + splitOffset * target.speed);
+			const left: ClipRegion = { ...target, id: leftId, endMs: newSourceStart };
+			const right: ClipRegion = {
+				...target,
+				id: rightId,
+				startMs: newSourceStart,
+				endMs: newSourceStart + Math.max(0, target.endMs - target.startMs - splitOffset),
+			};
 			setClipRegions((current) =>
 				current.flatMap((clip) => (clip.id === target.id ? [left, right] : [clip])),
 			);
@@ -99,30 +110,41 @@ export function useClipRegionCommands({
 	const handleClipSpanChange = useCallback(
 		(id: string, span: Span) => {
 			const oldClip = clipRegions.find((clip) => clip.id === id);
-			const newStart = Math.round(span.start);
-			const newEnd = Math.round(span.end);
+			const newTimelineStart = Math.round(span.start);
+			const newTimelineEnd = Math.round(span.end);
+			const oldTimelineStart = oldClip
+				? getClipTimelineStartMs(oldClip, clipRegions)
+				: 0;
+			const oldTimelineEnd =
+				oldTimelineStart + Math.max(0, (oldClip?.endMs ?? 0) - (oldClip?.startMs ?? 0));
+			const newTimelineDuration = Math.max(0, newTimelineEnd - newTimelineStart);
+			const speed = oldClip && oldClip.speed > 0 ? oldClip.speed : 1;
+			const newSourceStart = oldClip
+				? Math.round(oldClip.startMs + (newTimelineStart - oldTimelineStart) * speed)
+				: 0;
+			const newEndMs = newSourceStart + newTimelineDuration;
 			const removedSegments = oldClip
 				? [
-						...(newStart > oldClip.startMs
-							? [{ startMs: oldClip.startMs, endMs: newStart }]
+						...(newTimelineStart > oldTimelineStart
+							? [{ startMs: oldTimelineStart, endMs: newTimelineStart }]
 							: []),
-						...(newEnd < oldClip.endMs
-							? [{ startMs: newEnd, endMs: oldClip.endMs }]
+						...(newTimelineEnd < oldTimelineEnd
+							? [{ startMs: newTimelineEnd, endMs: oldTimelineEnd }]
 							: []),
 					]
 				: [];
 
 			if (oldClip) {
-				const startDelta = newStart - oldClip.startMs;
-				const endDelta = newEnd - oldClip.endMs;
-				if (Math.abs(startDelta - endDelta) < 1 && Math.abs(startDelta) > 0) {
+				const timelineStartDelta = newTimelineStart - oldTimelineStart;
+				const timelineEndDelta = newTimelineEnd - oldTimelineEnd;
+				if (Math.abs(timelineStartDelta - timelineEndDelta) < 1 && Math.abs(timelineStartDelta) > 0) {
 					setZoomRegions((current) =>
 						current.map((zoom) =>
-							zoom.startMs < oldClip.endMs && zoom.endMs > oldClip.startMs
+							zoom.startMs < oldTimelineEnd && zoom.endMs > oldTimelineStart
 								? {
 										...zoom,
-										startMs: zoom.startMs + startDelta,
-										endMs: zoom.endMs + startDelta,
+										startMs: zoom.startMs + timelineStartDelta,
+										endMs: zoom.endMs + timelineStartDelta,
 									}
 								: zoom,
 						),
@@ -150,7 +172,9 @@ export function useClipRegionCommands({
 
 			setClipRegions((current) =>
 				current.map((clip) =>
-					clip.id === id ? { ...clip, startMs: newStart, endMs: newEnd } : clip,
+					clip.id === id
+						? { ...clip, startMs: newSourceStart, endMs: newEndMs }
+						: clip,
 				),
 			);
 		},

src/components/video-editor/timeline/model/timelineModel.ts

@@ -16,6 +16,7 @@ import {
 	isAudioTrackRowId,
 } from "../core/rows";
 import type { TimelineRegionSpan, TimelineRenderItem } from "../core/timelineTypes";
+import { getKeptTimelineSpans } from "../../types";
 
 export function getAnnotationLabel(region: AnnotationRegion): string {
 	if (region.type === "text") {
@@ -60,16 +61,22 @@ export function buildTimelineItems(params: {
 		variant: "zoom",
 	}));
 
+	const keptSpansById = new Map(
+		getKeptTimelineSpans(clipRegions).map((span) => [span.clip.id, span]),
+	);
 	const clips: TimelineRenderItem[] = clipRegions.map((region, index) => {
 		const displayDurationMs = Math.max(0, region.endMs - region.startMs);
 		const speed = Number.isFinite(region.speed) && region.speed > 0 ? region.speed : 1;
 		const sourceEndMs = region.startMs + displayDurationMs * speed;
 		const speedLabel = formatClipSpeedLabel(speed);
+		const keptSpan = keptSpansById.get(region.id);
+		const timelineStartMs = keptSpan?.timelineStartMs ?? region.startMs;
+		const timelineEndMs = keptSpan?.timelineEndMs ?? region.endMs;
 
 		return {
 			id: region.id,
 			rowId: CLIP_ROW_ID,
-			span: { start: region.startMs, end: region.endMs },
+			span: { start: timelineStartMs, end: timelineEndMs },
 			sourceSpan: { start: region.startMs, end: sourceEndMs },
 			label: speedLabel ? `Clip ${index + 1} ${speedLabel}` : `Clip ${index + 1}`,
 			speedValue: speedLabel ? speed : undefined,

src/components/video-editor/types.test.ts

@@ -114,35 +114,49 @@ describe("extendAutoFullTrackClip", () => {
 	});
 });
 
-describe("clip timeline mapping", () => {
+describe("clip timeline mapping (ripple)", () => {
 	const clips = [
 		{ id: "clip-1", startMs: 0, endMs: 4_000, speed: 1 },
 		{ id: "clip-2", startMs: 6_000, endMs: 8_000, speed: 2 },
 	];
 
-	it("maps kept timeline time into source time", () => {
+	it("compacts adjacent clips by removing the inter-clip source gap", () => {
+		// clip-1 display: 4_000ms, clip-2 display: (8_000 - 6_000) = 2_000ms
+		// (speed is embedded in endMs via getClipSourceEndMs, so display = end - start)
+		// total timeline length: 6_000ms — the source gap [4000, 6000] contributes nothing
+		expect(getTimelineDurationMs(clips, 10_000)).toBe(6_000);
+	});
+
+	it("maps kept timeline time into source time inside each kept span", () => {
+		// timeline [0, 4000] → source [0, 4000] at speed 1
 		expect(mapTimelineTimeToSourceTime(1_500, clips)).toBe(1_500);
-		expect(mapTimelineTimeToSourceTime(7_000, clips)).toBe(8_000);
+		// timeline [4000, 6000] → source [6000, 10000] at speed 2
+		expect(mapTimelineTimeToSourceTime(5_000, clips)).toBe(8_000);
 	});
 
-	it("snaps timeline gaps to the nearest clip edge", () => {
-		expect(mapTimelineTimeToSourceTime(4_300, clips)).toBe(4_000);
-		expect(mapTimelineTimeToSourceTime(5_700, clips)).toBe(6_000);
+	it("clamps timeline positions that fall outside the compacted range", () => {
+		// far before first kept span → source origin of clip-1
+		expect(mapTimelineTimeToSourceTime(-100, clips)).toBe(0);
+		// far after last kept span → source end of clip-2 (= 6000 + 4000 source ms)
+		expect(mapTimelineTimeToSourceTime(7_000, clips)).toBe(10_000);
 	});
 
-	it("maps kept source time back into timeline time", () => {
+	it("maps source time back into compacted timeline time", () => {
 		expect(mapSourceTimeToTimelineTime(1_500, clips)).toBe(1_500);
-		expect(mapSourceTimeToTimelineTime(8_000, clips)).toBe(7_000);
+		expect(mapSourceTimeToTimelineTime(8_000, clips)).toBe(5_000);
 	});
 
-	it("snaps removed source gaps to the nearest kept boundary", () => {
-		expect(mapSourceTimeToTimelineTime(4_200, clips)).toBe(4_000);
-		expect(mapSourceTimeToTimelineTime(5_900, clips)).toBe(6_000);
+	it("clamps source positions inside removed gaps to the nearest kept boundary", () => {
+		// source [4000, 6000] is removed; both sides collapse onto the timeline splice at 4_000ms.
+		expect(mapSourceTimeToTimelineTime(4_100, clips)).toBe(4_000);
+		expect(mapSourceTimeToTimelineTime(5_900, clips)).toBe(4_000);
 	});
 
 	it("finds clips only inside visible kept spans", () => {
 		expect(findClipAtTimelineTime(500, clips)?.id).toBe("clip-1");
-		expect(findClipAtTimelineTime(5_000, clips)).toBeNull();
+		expect(findClipAtTimelineTime(5_000, clips)?.id).toBe("clip-2");
+		// exactly on the right boundary of clip-2 → no clip owns the open end
+		expect(findClipAtTimelineTime(6_000, clips)).toBeNull();
 	});
 
 	it("derives the next clip id after converting trim gaps into clip ids", () => {
@@ -174,9 +188,22 @@ describe("getTimelineDurationMs", () => {
 		).toBe(20_000);
 	});
 
-	it("keeps the source duration when speed edits make clips shorter", () => {
+	it("uses the display duration of clips, ignoring the source duration", () => {
+		// speed=2 halves the apparent length: display = 5_000ms regardless of source 10_000ms
 		expect(
 			getTimelineDurationMs([{ id: "clip-1", startMs: 0, endMs: 5_000, speed: 2 }], 10_000),
-		).toBe(10_000);
+		).toBe(5_000);
+	});
+
+	it("sums all clip display durations and ignores inter-clip source gaps", () => {
+		expect(
+			getTimelineDurationMs(
+				[
+					{ id: "clip-1", startMs: 0, endMs: 4_000, speed: 1 },
+					{ id: "clip-2", startMs: 6_000, endMs: 8_000, speed: 2 },
+				],
+				10_000,
+			),
+		).toBe(6_000);
 	});
 });