refactor: split effects and masks into dedicated rust crates, introduce MediaTime and FrameRate

5 files changed, 71 insertions, 63 deletions

diff --git a/apps/web/src/components/editor/panels/timeline/bookmarks.tsx b/apps/web/src/components/editor/panels/timeline/bookmarks.tsx
index d4b1657e..9342c30e 100644
--- a/apps/web/src/components/editor/panels/timeline/bookmarks.tsx
+++ b/apps/web/src/components/editor/panels/timeline/bookmarks.tsx
@@ -4,13 +4,12 @@ import { useEffect, useState } from "react";
 import type { EditorCore } from "@/core";
 import { useEditor } from "@/hooks/use-editor";
 import type { BookmarkDragState } from "@/hooks/timeline/use-bookmark-drag";
-import { BOOKMARK_TIME_EPSILON } from "@/lib/timeline/bookmarks";
 import {
 	DEFAULT_TIMELINE_BOOKMARK_COLOR,
 } from "./theme";
 import { TIMELINE_BOOKMARK_ROW_HEIGHT_PX } from "./layout";
 import { DEFAULT_FPS } from "@/lib/fps/constants";
-import { getSnappedSeekTime } from "opencut-wasm";
+import { snappedSeekTime } from "opencut-wasm";
 import {
 	ArrowTurnBackwardIcon,
 	Delete02Icon,
@@ -49,8 +48,8 @@ function seekToBookmarkTime({
 }) {
 	const activeProject = editor.project.getActive();
 	const duration = editor.timeline.getTotalDuration();
-	const fps = activeProject?.settings.fps ?? DEFAULT_FPS;
-	const snappedTime = getSnappedSeekTime({ rawTime: time, duration, fps });
+	const rate = activeProject?.settings.fps ?? DEFAULT_FPS;
+	const snappedTime = snappedSeekTime({ time, duration, rate }) ?? time;
 	editor.playback.seek({ time: snappedTime });
 }
 
@@ -139,7 +138,7 @@ function TimelineBookmark({
 	const isDragging =
 		dragState.isDragging &&
 		dragState.bookmarkTime !== null &&
-		Math.abs(dragState.bookmarkTime - bookmark.time) < BOOKMARK_TIME_EPSILON;
+		dragState.bookmarkTime === bookmark.time;
 
 	const displayTime = isDragging ? dragState.currentTime : bookmark.time;
 	const time = bookmark.time;
diff --git a/apps/web/src/components/editor/panels/timeline/selection-hit-testing.ts b/apps/web/src/components/editor/panels/timeline/selection-hit-testing.ts
index 6488e29a..551393e9 100644
--- a/apps/web/src/components/editor/panels/timeline/selection-hit-testing.ts
+++ b/apps/web/src/components/editor/panels/timeline/selection-hit-testing.ts
@@ -1,5 +1,5 @@
 import type { TimelineTrack } from "@/lib/timeline";
-import { getTimelinePixelsPerSecond } from "@/lib/timeline/pixel-utils";
+import { timelineTimeToPixels } from "@/lib/timeline/pixel-utils";
 import {
 	TIMELINE_CONTENT_TOP_PADDING_PX,
 } from "./layout";
@@ -96,7 +96,6 @@ export function resolveTimelineElementIntersections({
 		startPos,
 		endPos: currentPos,
 	});
-	const pixelsPerSecond = getTimelinePixelsPerSecond({ zoomLevel });
 	const selectedElements: TimelineElementRef[] = [];
 
 	for (const [trackIndex, track] of tracks.entries()) {
@@ -109,8 +108,8 @@ export function resolveTimelineElementIntersections({
 		const elementBottom = elementTop + trackHeight;
 
 		for (const element of track.elements) {
-			const elementLeft = element.startTime * pixelsPerSecond;
-			const elementRight = elementLeft + element.duration * pixelsPerSecond;
+			const elementLeft = timelineTimeToPixels({ time: element.startTime, zoomLevel });
+			const elementRight = timelineTimeToPixels({ time: element.startTime + element.duration, zoomLevel });
 			const elementRectangle = {
 				left: elementLeft,
 				top: elementTop,
diff --git a/apps/web/src/components/editor/panels/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/panels/timeline/timeline-playhead.tsx
index 361f1398..d9218371 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-playhead.tsx
@@ -7,6 +7,7 @@ import {
 	timelineTimeToSnappedPixels,
 } from "@/lib/timeline";
 import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
+import { TICKS_PER_SECOND } from "@/lib/wasm";
 import { useEditor } from "@/hooks/use-editor";
 import {
 	TIMELINE_SCROLLBAR_SIZE_PX,
@@ -72,10 +73,11 @@ export function TimelinePlayhead({
 		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
 
 		event.preventDefault();
-		const step = 1 / Math.max(1, editor.project.getActive().settings.fps);
+		const fps = editor.project.getActive().settings.fps;
+		const ticksPerFrame = 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 * step));
+		const nextTime = Math.max(0, Math.min(duration, now + direction * ticksPerFrame));
 
 		editor.playback.seek({ time: nextTime });
 	};
diff --git a/apps/web/src/components/editor/panels/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/panels/timeline/timeline-ruler.tsx
index 9e49bf6c..8b8dab32 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-ruler.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-ruler.tsx
@@ -2,6 +2,8 @@ import { type JSX, useLayoutEffect, useRef } from "react";
 import {
 	BASE_TIMELINE_PIXELS_PER_SECOND,
 } from "@/lib/timeline/scale";
+import { mediaTimeToSeconds } from "opencut-wasm";
+import { TICKS_PER_SECOND } from "@/lib/wasm";
 import { TIMELINE_RULER_HEIGHT_PX } from "./layout";
 import { DEFAULT_FPS } from "@/lib/fps/constants";
 import { useEditor } from "@/hooks/use-editor";
@@ -30,17 +32,18 @@ export function TimelineRuler({
 	handleRulerTrackingMouseDown,
 	handleRulerMouseDown,
 }: TimelineRulerProps) {
-	const duration = useEditor((e) => e.timeline.getTotalDuration());
+	const durationTicks = useEditor((e) => e.timeline.getTotalDuration());
+	const durationSeconds = mediaTimeToSeconds({ time: durationTicks });
 	const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
-	const visibleDuration = dynamicTimelineWidth / pixelsPerSecond;
-	const effectiveDuration = Math.max(duration, visibleDuration);
+	const visibleDurationSeconds = dynamicTimelineWidth / pixelsPerSecond;
+	const effectiveDurationSeconds = Math.max(durationSeconds, visibleDurationSeconds);
 	const fps =
 		useEditor((e) => e.project.getActiveOrNull()?.settings.fps) ?? DEFAULT_FPS;
 	const { labelIntervalSeconds, tickIntervalSeconds } = getRulerConfig({
 		zoomLevel,
 		fps,
 	});
-	const tickCount = Math.ceil(effectiveDuration / tickIntervalSeconds) + 1;
+	const tickCount = Math.ceil(effectiveDurationSeconds / tickIntervalSeconds) + 1;
 
 	const { scrollLeft, viewportWidth } = useScrollPosition({
 		scrollRef: tracksScrollRef,
@@ -61,20 +64,20 @@ export function TimelineRuler({
 		prevZoomRef.current = zoomLevel;
 	}, [zoomLevel]);
 
-	const visibleStartTime = Math.max(
+	const visibleStartTimeSeconds = Math.max(
 		0,
 		(scrollLeft - bufferPx) / pixelsPerSecond,
 	);
-	const visibleEndTime =
+	const visibleEndTimeSeconds =
 		(scrollLeft + viewportWidth + bufferPx) / pixelsPerSecond;
 
 	const startTickIndex = Math.max(
 		0,
-		Math.floor(visibleStartTime / tickIntervalSeconds),
+		Math.floor(visibleStartTimeSeconds / tickIntervalSeconds),
 	);
 	const endTickIndex = Math.min(
 		tickCount - 1,
-		Math.ceil(visibleEndTime / tickIntervalSeconds),
+		Math.ceil(visibleEndTimeSeconds / tickIntervalSeconds),
 	);
 
 	const timelineTicks: Array<JSX.Element> = [];
@@ -83,14 +86,16 @@ export function TimelineRuler({
 		tickIndex <= endTickIndex;
 		tickIndex += 1
 	) {
-		const time = tickIndex * tickIntervalSeconds;
-		if (time > effectiveDuration) break;
+		const timeSeconds = tickIndex * tickIntervalSeconds;
+		if (timeSeconds > effectiveDurationSeconds) break;
 
-		const showLabel = shouldShowLabel({ time, labelIntervalSeconds });
+		const timeTicks = Math.round(timeSeconds * TICKS_PER_SECOND);
+		const showLabel = shouldShowLabel({ time: timeSeconds, labelIntervalSeconds });
 		timelineTicks.push(
 			<TimelineTick
 				key={tickIndex}
-				time={time}
+				time={timeTicks}
+				timeInSeconds={timeSeconds}
 				zoomLevel={zoomLevel}
 				fps={fps}
 				showLabel={showLabel}
@@ -104,7 +109,7 @@ export function TimelineRuler({
 			tabIndex={0}
 			aria-label="Timeline ruler"
 			aria-valuemin={0}
-			aria-valuemax={effectiveDuration}
+			aria-valuemax={effectiveDurationSeconds}
 			aria-valuenow={0}
 			className="relative flex-1 overflow-x-visible"
 			style={{ height: TIMELINE_RULER_HEIGHT_PX }}
diff --git a/apps/web/src/components/editor/panels/timeline/timeline-tick.tsx b/apps/web/src/components/editor/panels/timeline/timeline-tick.tsx
index 7d9a4bc2..fca55752 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-tick.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-tick.tsx
@@ -1,39 +1,42 @@
-"use client";

-

-import { timelineTimeToSnappedPixels } from "@/lib/timeline";

-import { formatRulerLabel } from "@/lib/timeline/ruler-utils";

-

-interface TimelineTickProps {

-	time: number;

-	zoomLevel: number;

-	fps: number;

-	showLabel: boolean;

-}

-

-export function TimelineTick({

-	time,

-	zoomLevel,

-	fps,

-	showLabel,

-}: TimelineTickProps) {

-	const leftPosition = timelineTimeToSnappedPixels({ time, zoomLevel });

-

-	if (showLabel) {

-		const label = formatRulerLabel({ timeInSeconds: time, fps });

-		return (

-			<span

-				className="text-muted-foreground/85 absolute top-1 select-none text-[10px] leading-none"

-				style={{ left: `${leftPosition}px` }}

-			>

-				{label}

-			</span>

-		);

-	}

-

-	return (

-		<div

-			className="border-muted-foreground/25 absolute top-1.5 h-1.5 border-l"

-			style={{ left: `${leftPosition}px` }}

-		/>

-	);

-}

+"use client";
+
+import type { FrameRate } from "opencut-wasm";
+import { timelineTimeToSnappedPixels } from "@/lib/timeline";
+import { formatRulerLabel } from "@/lib/timeline/ruler-utils";
+
+interface TimelineTickProps {
+	time: number;
+	timeInSeconds: number;
+	zoomLevel: number;
+	fps: FrameRate;
+	showLabel: boolean;
+}
+
+export function TimelineTick({
+	time,
+	timeInSeconds,
+	zoomLevel,
+	fps,
+	showLabel,
+}: TimelineTickProps) {
+	const leftPosition = timelineTimeToSnappedPixels({ time, zoomLevel });
+
+	if (showLabel) {
+		const label = formatRulerLabel({ timeInSeconds, fps });
+		return (
+			<span
+				className="text-muted-foreground/85 absolute top-1 select-none text-[10px] leading-none"
+				style={{ left: `${leftPosition}px` }}
+			>
+				{label}
+			</span>
+		);
+	}
+
+	return (
+		<div
+			className="border-muted-foreground/25 absolute top-1.5 h-1.5 border-l"
+			style={{ left: `${leftPosition}px` }}
+		/>
+	);
+}