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

4 files changed, 16 insertions, 10 deletions

diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
index 967156b3..83e31aec 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
@@ -1,22 +1,25 @@
 import { useEditor } from "@/editor/use-editor";
 import { getElementLocalTime } from "@/animation";
+import { addMediaTime, mediaTime, type MediaTime } from "@/wasm";
 
 export function useElementPlayhead({
 	startTime,
 	duration,
 }: {
-	startTime: number;
-	duration: number;
+	startTime: MediaTime;
+	duration: MediaTime;
 }) {
 	const playheadTime = useEditor((editor) => editor.playback.getCurrentTime());
-	const localTime = getElementLocalTime({
-		timelineTime: playheadTime,
-		elementStartTime: startTime,
-		elementDuration: duration,
+	const localTime = mediaTime({
+		ticks: getElementLocalTime({
+			timelineTime: playheadTime,
+			elementStartTime: startTime,
+			elementDuration: duration,
+		}),
 	});
 	const isPlayheadWithinElementRange =
 		playheadTime >= startTime &&
-		playheadTime <= startTime + duration;
+		playheadTime <= addMediaTime({ a: startTime, b: duration });
 
 	return { localTime, isPlayheadWithinElementRange };
 }
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
index 734b514f..f6216208 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
@@ -6,6 +6,7 @@ import {
 } from "@/animation";

 import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types";

 import type { TimelineElement } from "@/timeline";

+import type { MediaTime } from "@/wasm";

 

 export function useKeyframedColorProperty({

 	trackId,

@@ -21,7 +22,7 @@ export function useKeyframedColorProperty({
 	elementId: string;

 	animations: ElementAnimations | undefined;

 	propertyPath: AnimationPropertyPath;

-	localTime: number;

+	localTime: MediaTime;

 	isPlayheadWithinElementRange: boolean;

 	resolvedColor: string;

 	buildBaseUpdates: ({ value }: { value: string }) => Partial<TimelineElement>;

diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
index 9dd39768..d52f7d97 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
@@ -8,6 +8,7 @@ import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types
 import type { TimelineElement } from "@/timeline";

 import { snapToStep } from "@/utils/math";

 import { usePropertyDraft } from "./use-property-draft";

+import type { MediaTime } from "@/wasm";

 

 export function useKeyframedNumberProperty({

 	trackId,

@@ -27,7 +28,7 @@ export function useKeyframedNumberProperty({
 	elementId: string;

 	animations: ElementAnimations | undefined;

 	propertyPath: AnimationPropertyPath;

-	localTime: number;

+	localTime: MediaTime;

 	isPlayheadWithinElementRange: boolean;

 	displayValue: string;

 	parse: (input: string) => number | null;

diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
index b0b6f01a..e679f5c3 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
@@ -15,6 +15,7 @@ import type {
 } from "@/animation/types";
 import type { ParamDefinition } from "@/params";
 import type { TimelineElement } from "@/timeline";
+import type { MediaTime } from "@/wasm";
 
 export interface KeyframedParamPropertyResult {
 	hasAnimatedKeyframes: boolean;
@@ -39,7 +40,7 @@ export function useKeyframedParamProperty({
 	trackId: string;
 	elementId: string;
 	animations: ElementAnimations | undefined;
-	localTime: number;
+	localTime: MediaTime;
 	isPlayheadWithinElementRange: boolean;
 	resolvedValue: number | string | boolean;
 	buildBaseUpdates: ({