Fix trimming behavior

apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx

@@ -8,6 +8,7 @@ import {
 	createEffect,
 	createMemo,
 	createRoot,
+	createSignal,
 	For,
 	Match,
 	mergeProps,
@@ -204,20 +205,37 @@ export function ClipTrack(
 		>
 			<For each={segments()}>
 				{(segment, i) => {
-					const prevDuration = () =>
-						segments()
-							.slice(0, i())
-							.reduce((t, s) => t + (s.end - s.start) / s.timescale, 0);
-
-					const relativeSegment = mergeProps(segment, () => ({
-						start: prevDuration(),
-						end: segment.end - segment.start + prevDuration(),
-					}));
+				const [isDragging, setIsDragging] = createSignal(false);
+				const [dragOffset, setDragOffset] = createSignal(0);
+				const [initialStart, setInitialStart] = createSignal(segment.start);
+
+				const prefixOffsets = createMemo(() => {
+					const segs = segments();
+					const out: number[] = new Array(segs.length);
+					let sum = 0;
+					for (let k = 0; k < segs.length; k++) {
+						out[k] = sum;
+						sum += (segs[k].end - segs[k].start) / segs[k].timescale;
+					}
+					return out;
+				});
+				const prevDuration = createMemo(() => prefixOffsets()[i()] ?? 0);
+
+				const relativeSegment = createMemo(() => {
+					const offset = isDragging() ? dragOffset() / (segment.timescale || 1) : 0;
+
+					return {
+						start: prevDuration() + offset,
+						end: prevDuration() + offset + (segment.end - segment.start) / segment.timescale,
+						timescale: segment.timescale,
+						recordingSegment: segment.recordingSegment,
+					};
+				});
 
-					const segmentX = useSegmentTranslateX(() => relativeSegment);
-					const segmentWidth = useSegmentWidth(() => relativeSegment);
+				const segmentX = useSegmentTranslateX(relativeSegment);
+				const segmentWidth = useSegmentWidth(relativeSegment);
 
-					const segmentRecording = (s = i()) =>
+				const segmentRecording = (s = i()) =>
 						editorInstance.recordings.segments[
 							segments()[s].recordingSegment ?? 0
 						];
@@ -358,7 +376,7 @@ export function ClipTrack(
 										: "border-transparent",
 								)}
 								innerClass="ring-blue-9"
-								segment={relativeSegment}
+								segment={relativeSegment()}
 								onMouseDown={(e) => {
 									e.stopPropagation();
 
@@ -399,6 +417,8 @@ export function ClipTrack(
 									class="opacity-0 group-hover:opacity-100"
 									onMouseDown={(downEvent) => {
 										const start = segment.start;
+										setInitialStart(start);
+										setIsDragging(true);
 
 										if (split()) return;
 										const maxSegmentDuration =
@@ -432,7 +452,9 @@ export function ClipTrack(
 										function update(event: MouseEvent) {
 											const newStart =
 												start +
-												(event.clientX - downEvent.clientX) * secsPerPixel();
+												(event.clientX - downEvent.clientX) * secsPerPixel() * segment.timescale;
+
+											setDragOffset(newStart - initialStart());
 
 											setProject(
 												"timeline",
@@ -458,6 +480,24 @@ export function ClipTrack(
 													dispose();
 													resumeHistory();
 													update(e);
+
+													setIsDragging(false);
+													setDragOffset(0);
+
+													onHandleReleased();
+												},
+												blur: () => {
+													dispose();
+													resumeHistory();
+													setIsDragging(false);
+													setDragOffset(0);
+													onHandleReleased();
+												},
+												mouseleave: () => {
+													dispose();
+													resumeHistory();
+													setIsDragging(false);
+													setDragOffset(0);
 													onHandleReleased();
 												},
 											});
@@ -548,6 +588,16 @@ export function ClipTrack(
 													update(e);
 													onHandleReleased();
 												},
+												blur: () => {
+													dispose();
+													resumeHistory();
+													onHandleReleased();
+												},
+												mouseleave: () => {
+													dispose();
+													resumeHistory();
+													onHandleReleased();
+												},
 											});
 										});
 									}}