fix: model editor time as wasm MediaTime ticks end-to-end

apps/web/src/timeline/components/timeline-playhead.tsx

@@ -7,7 +7,14 @@ import {
 	timelineTimeToSnappedPixels,
 } from "@/timeline";
 import { useTimelinePlayhead } from "@/timeline/hooks/use-timeline-playhead";
-import { TICKS_PER_SECOND } from "@/wasm";
+import {
+	addMediaTime,
+	maxMediaTime,
+	mediaTime,
+	subMediaTime,
+	TICKS_PER_SECOND,
+	ZERO_MEDIA_TIME,
+} from "@/wasm";
 import { useEditor } from "@/editor/use-editor";
 import { TIMELINE_SCROLLBAR_SIZE_PX } from "./layout";
 import { TIMELINE_LAYERS } from "./layers";
@@ -72,17 +79,24 @@ export function TimelinePlayhead({
 
 		event.preventDefault();
 		const fps = editor.project.getActive().settings.fps;
-		const ticksPerFrame = Math.round(
-			(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
-		);
+		const ticksPerFrame = mediaTime({
+			ticks: Math.round(
+				(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
+			),
+		});
 		const direction = event.key === "ArrowRight" ? 1 : -1;
 		const now = editor.playback.getCurrentTime();
-		const nextTime = Math.max(
-			0,
-			Math.min(duration, now + direction * ticksPerFrame),
-		);
+		const nextTime =
+			direction > 0
+				? addMediaTime({ a: now, b: ticksPerFrame })
+				: subMediaTime({ a: now, b: ticksPerFrame });
 
-		editor.playback.seek({ time: nextTime });
+		editor.playback.seek({
+			time: maxMediaTime({
+				a: ZERO_MEDIA_TIME,
+				b: duration < nextTime ? duration : nextTime,
+			}),
+		});
 	};
 
 	return (