Optimize waveform rendering and timeline preview updates

Improves waveform rendering in ClipTrack by adjusting sample stepping and using requestAnimationFrame for smoother updates. Timeline preview time updates are now throttled to reduce unnecessary state changes and improve performance during mouse movement.

Author: richiemcilroy

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

@@ -53,6 +53,7 @@ function WaveformCanvas(props: {
 	const { project } = useEditorContext();
 
 	let canvas: HTMLCanvasElement | undefined;
+	let rafId: number | null = null;
 	const { width } = useSegmentContext();
 	const { secsPerPixel } = useTimelineContext();
 
@@ -65,11 +66,22 @@ function WaveformCanvas(props: {
 	) => {
 		const maxAmplitude = h;
 
-		// yellow please
 		ctx.fillStyle = color;
 		ctx.beginPath();
 
 		const step = 0.05 / secsPerPixel();
+		const samplesPerSecond = 10;
+		
+		const startTime = props.segment.start;
+		const endTime = props.segment.end;
+		
+		const pixelsPerSecond = 1 / secsPerPixel();
+		const samplesPerPixel = samplesPerSecond / pixelsPerSecond;
+		
+		let sampleStep = 0.1;
+		if (samplesPerPixel < 0.5) {
+			sampleStep = Math.max(0.1, Math.ceil(1 / samplesPerPixel) * 0.1);
+		}
 
 		ctx.moveTo(0, h);
 
@@ -78,35 +90,39 @@ function WaveformCanvas(props: {
 			return 1.0 - Math.max(ww + gain, -60) / -60;
 		};
 
+		let prevX = 0;
+		let prevY = h;
+
 		for (
-			let segmentTime = props.segment.start;
-			segmentTime <= props.segment.end + 0.1;
-			segmentTime += 0.1
+			let segmentTime = startTime;
+			segmentTime <= endTime + 0.1;
+			segmentTime += sampleStep
 		) {
-			const index = Math.floor(segmentTime * 10);
-			const xTime = index / 10;
+			const index = Math.floor(segmentTime * samplesPerSecond);
+			if (index < 0 || index >= waveform.length) continue;
+			
+			const xTime = index / samplesPerSecond;
 
 			const currentDb =
 				typeof waveform[index] === "number" ? waveform[index] : -60;
 			const amplitude = norm(currentDb) * maxAmplitude;
 
-			const x = (xTime - props.segment.start) / secsPerPixel();
+			const x = (xTime - startTime) / secsPerPixel();
 			const y = h - amplitude;
 
-			const prevX = (xTime - 0.1 - props.segment.start) / secsPerPixel();
-			const prevDb =
-				typeof waveform[index - 1] === "number" ? waveform[index - 1] : -60;
-			const prevAmplitude = norm(prevDb) * maxAmplitude;
-			const prevY = h - prevAmplitude;
-
-			const cpX1 = prevX + step / 2;
-			const cpX2 = x - step / 2;
+			if (prevX !== x) {
+				const cpX1 = prevX + step / 2;
+				const cpX2 = x - step / 2;
 
-			ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
+				ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
+				
+				prevX = x;
+				prevY = y;
+			}
 		}
 
 		ctx.lineTo(
-			(props.segment.end + 0.3 - props.segment.start) / secsPerPixel(),
+			(endTime + 0.3 - startTime) / secsPerPixel(),
 			h,
 		);
 
@@ -146,14 +162,25 @@ function WaveformCanvas(props: {
 	}
 
 	createEffect(() => {
-		renderWaveforms();
+		// track reactive deps
+		void width();
+		void secsPerPixel();
+		void project.audio.micVolumeDb;
+		void project.audio.systemVolumeDb;
+		if (rafId !== null) cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(renderWaveforms);
+	});
+
+	onCleanup(() => {
+		if (rafId !== null) cancelAnimationFrame(rafId);
 	});
 
 	return (
 		<canvas
 			ref={(el) => {
 				canvas = el;
-				renderWaveforms();
+				if (rafId !== null) cancelAnimationFrame(rafId);
+				rafId = requestAnimationFrame(renderWaveforms);
 			}}
 			class="absolute inset-0 w-full h-full pointer-events-none"
 			height={52}

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

@@ -1,5 +1,6 @@
 import { createElementBounds } from "@solid-primitives/bounds";
 import { createEventListener } from "@solid-primitives/event-listener";
+import { throttle } from "@solid-primitives/scheduled";
 import { platform } from "@tauri-apps/plugin-os";
 import { cx } from "cva";
 import { batch, createRoot, createSignal, For, onMount, Show } from "solid-js";
@@ -38,6 +39,10 @@ export function Timeline() {
 
 	const secsPerPixel = () => transform().zoom / (timelineBounds.width ?? 1);
 
+	const setPreviewTimeThrottled = throttle((time: number) => {
+		setEditorState("previewTime", time);
+	}, 16);
+
 	onMount(() => {
 		if (!project.timeline) {
 			const resume = projectHistory.pause();
@@ -194,14 +199,13 @@ export function Timeline() {
 						});
 					});
 				}}
-				onMouseMove={(e) => {
-					const { left } = timelineBounds;
-					if (editorState.playing) return;
-					setEditorState(
-						"previewTime",
-						transform().position + secsPerPixel() * (e.clientX - left!),
-					);
-				}}
+			onMouseMove={(e) => {
+				const { left } = timelineBounds;
+				if (editorState.playing || left == null) return;
+				setPreviewTimeThrottled(
+					transform().position + secsPerPixel() * (e.clientX - left),
+				);
+			}}
 				onMouseEnter={() => setEditorState("timeline", "hoveredTrack", null)}
 				onMouseLeave={() => {
 					setEditorState("previewTime", null);