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

1 files changed, 6 insertions, 5 deletions

diff --git a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
index b66bbea8..24bff26a 100644
--- a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
+++ b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
@@ -8,9 +8,10 @@ import {
 import { useEditor } from "@/hooks/use-editor";
 import { getKeyframeById } from "@/lib/animation";
 import { useKeyframeSelection } from "./use-keyframe-selection";
-import { snapTimeToFrame, getSnappedSeekTime } from "opencut-wasm";
+import { roundToFrame, snappedSeekTime } from "opencut-wasm";
 import { timelineTimeToSnappedPixels } from "@/lib/timeline";
 import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
+import { TICKS_PER_SECOND } from "@/lib/wasm";
 import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction";
 import { RetimeKeyframeCommand } from "@/lib/commands/timeline/element/keyframes/retime-keyframe";
 import { BatchCommand } from "@/lib/commands";
@@ -144,9 +145,9 @@ export function useKeyframeDrag({
 
 			if (!dragState.isDragging) return;
 
-			const startX = mouseDownXRef.current ?? clientX;
-			const rawDelta = (clientX - startX) / pixelsPerSecond;
-			const snappedDelta = snapTimeToFrame({ time: rawDelta, fps });
+		const startX = mouseDownXRef.current ?? clientX;
+		const rawDelta = Math.round(((clientX - startX) / pixelsPerSecond) * TICKS_PER_SECOND);
+		const snappedDelta = roundToFrame({ time: rawDelta, rate: fps }) ?? rawDelta;
 
 			setDragState((previous) => ({ ...previous, deltaTime: snappedDelta }));
 		};
@@ -255,7 +256,7 @@ export function useKeyframeDrag({
 			if (wasDrag) return;
 
 			const duration = editor.timeline.getTotalDuration();
-			const seekTime = getSnappedSeekTime({ rawTime: displayedStartTime + indicatorTime, duration, fps });
+			const seekTime = snappedSeekTime({ time: displayedStartTime + indicatorTime, duration, rate: fps }) ?? displayedStartTime + indicatorTime;
 			editor.playback.seek({ time: seekTime });
 
 			if (event.shiftKey) {