Skip to content

Commit eea6d43

Browse files
committed
fix: model editor time as wasm MediaTime ticks end-to-end
1 parent f1b45b4 commit eea6d43

79 files changed

Lines changed: 1589 additions & 511 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

apps/web/src/actions/use-editor-actions.ts

Lines changed: 68 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,16 @@ import { useTimelineStore } from "@/timeline/timeline-store";
55
import { useActionHandler } from "@/actions/use-action-handler";
66
import { useEditor } from "@/editor/use-editor";
77
import { useElementSelection } from "@/timeline/hooks/element/use-element-selection";
8-
import { TICKS_PER_SECOND } from "@/wasm";
8+
import {
9+
addMediaTime,
10+
maxMediaTime,
11+
mediaTime,
12+
mediaTimeFromSeconds,
13+
minMediaTime,
14+
subMediaTime,
15+
TICKS_PER_SECOND,
16+
ZERO_MEDIA_TIME,
17+
} from "@/wasm";
918
import { useKeyframeSelection } from "@/timeline/hooks/element/use-keyframe-selection";
1019
import { getElementsAtTime, hasMediaId } from "@/timeline";
1120
import { cancelInteraction } from "@/editor/cancel-interaction";
@@ -83,7 +92,7 @@ export function useEditorActions() {
8392
if (editor.playback.getIsPlaying()) {
8493
editor.playback.toggle();
8594
}
86-
editor.playback.seek({ time: 0 });
95+
editor.playback.seek({ time: ZERO_MEDIA_TIME });
8796
},
8897
undefined,
8998
);
@@ -92,11 +101,15 @@ export function useEditorActions() {
92101
"seek-forward",
93102
(args) => {
94103
const seconds = args?.seconds ?? 1;
104+
const delta = mediaTimeFromSeconds({ seconds });
95105
editor.playback.seek({
96-
time: Math.min(
97-
editor.timeline.getTotalDuration(),
98-
editor.playback.getCurrentTime() + seconds,
99-
),
106+
time: minMediaTime({
107+
a: editor.timeline.getTotalDuration(),
108+
b: addMediaTime({
109+
a: editor.playback.getCurrentTime(),
110+
b: delta,
111+
}),
112+
}),
100113
});
101114
},
102115
undefined,
@@ -106,8 +119,15 @@ export function useEditorActions() {
106119
"seek-backward",
107120
(args) => {
108121
const seconds = args?.seconds ?? 1;
122+
const delta = mediaTimeFromSeconds({ seconds });
109123
editor.playback.seek({
110-
time: Math.max(0, editor.playback.getCurrentTime() - seconds),
124+
time: maxMediaTime({
125+
a: ZERO_MEDIA_TIME,
126+
b: subMediaTime({
127+
a: editor.playback.getCurrentTime(),
128+
b: delta,
129+
}),
130+
}),
111131
});
112132
},
113133
undefined,
@@ -117,15 +137,20 @@ export function useEditorActions() {
117137
"frame-step-forward",
118138
() => {
119139
const fps = editor.project.getActive().settings.fps;
120-
const ticksPerFrame = Math.round(
121-
(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
122-
);
123-
editor.playback.seek({
124-
time: Math.min(
125-
editor.timeline.getTotalDuration(),
126-
editor.playback.getCurrentTime() + ticksPerFrame,
140+
const ticksPerFrame = mediaTime({
141+
ticks: Math.round(
142+
(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
127143
),
128144
});
145+
editor.playback.seek({
146+
time: minMediaTime({
147+
a: editor.timeline.getTotalDuration(),
148+
b: addMediaTime({
149+
a: editor.playback.getCurrentTime(),
150+
b: ticksPerFrame,
151+
}),
152+
}),
153+
});
129154
},
130155
undefined,
131156
);
@@ -134,11 +159,19 @@ export function useEditorActions() {
134159
"frame-step-backward",
135160
() => {
136161
const fps = editor.project.getActive().settings.fps;
137-
const ticksPerFrame = Math.round(
138-
(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
139-
);
162+
const ticksPerFrame = mediaTime({
163+
ticks: Math.round(
164+
(TICKS_PER_SECOND * fps.denominator) / fps.numerator,
165+
),
166+
});
140167
editor.playback.seek({
141-
time: Math.max(0, editor.playback.getCurrentTime() - ticksPerFrame),
168+
time: maxMediaTime({
169+
a: ZERO_MEDIA_TIME,
170+
b: subMediaTime({
171+
a: editor.playback.getCurrentTime(),
172+
b: ticksPerFrame,
173+
}),
174+
}),
142175
});
143176
},
144177
undefined,
@@ -148,11 +181,15 @@ export function useEditorActions() {
148181
"jump-forward",
149182
(args) => {
150183
const seconds = args?.seconds ?? 5;
184+
const delta = mediaTimeFromSeconds({ seconds });
151185
editor.playback.seek({
152-
time: Math.min(
153-
editor.timeline.getTotalDuration(),
154-
editor.playback.getCurrentTime() + seconds,
155-
),
186+
time: minMediaTime({
187+
a: editor.timeline.getTotalDuration(),
188+
b: addMediaTime({
189+
a: editor.playback.getCurrentTime(),
190+
b: delta,
191+
}),
192+
}),
156193
});
157194
},
158195
undefined,
@@ -162,8 +199,15 @@ export function useEditorActions() {
162199
"jump-backward",
163200
(args) => {
164201
const seconds = args?.seconds ?? 5;
202+
const delta = mediaTimeFromSeconds({ seconds });
165203
editor.playback.seek({
166-
time: Math.max(0, editor.playback.getCurrentTime() - seconds),
204+
time: maxMediaTime({
205+
a: ZERO_MEDIA_TIME,
206+
b: subMediaTime({
207+
a: editor.playback.getCurrentTime(),
208+
b: delta,
209+
}),
210+
}),
167211
});
168212
},
169213
undefined,
@@ -172,7 +216,7 @@ export function useEditorActions() {
172216
useActionHandler(
173217
"goto-start",
174218
() => {
175-
editor.playback.seek({ time: 0 });
219+
editor.playback.seek({ time: ZERO_MEDIA_TIME });
176220
},
177221
undefined,
178222
);

apps/web/src/animation/curve-bridge.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type {
77
NormalizedCubicBezier,
88
ScalarAnimationKey,
99
} from "@/animation/types";
10+
import { roundMediaTime } from "@/wasm";
1011

1112
const VALUE_EPSILON = 1e-6;
1213

@@ -84,11 +85,11 @@ export function getCurveHandlesForNormalizedCubicBezier({
8485

8586
return {
8687
rightHandle: {
87-
dt: spanTime * x1,
88+
dt: roundMediaTime({ time: spanTime * x1 }),
8889
dv: effectiveSpanValue * y1,
8990
},
9091
leftHandle: {
91-
dt: spanTime * (x2 - 1),
92+
dt: roundMediaTime({ time: spanTime * (x2 - 1) }),
9293
dv: effectiveSpanValue * (y2 - 1),
9394
},
9495
};

apps/web/src/animation/interpolation.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type {
99
ScalarSegmentType,
1010
} from "@/animation/types";
1111
import { clamp } from "@/utils/math";
12+
import { mediaTime } from "@/wasm";
1213
import {
1314
getBezierPoint,
1415
getDefaultLeftHandle,
@@ -63,9 +64,13 @@ function normalizeRightHandle({
6364
return undefined;
6465
}
6566

66-
const span = Math.max(1, rightKey.time - leftKey.time);
67+
const span = mediaTime({
68+
ticks: Math.max(1, rightKey.time - leftKey.time),
69+
});
6770
return {
68-
dt: Math.min(span, Math.max(0, handle.dt)),
71+
dt: mediaTime({
72+
ticks: Math.min(span, Math.max(0, handle.dt)),
73+
}),
6974
dv: handle.dv,
7075
};
7176
}
@@ -83,9 +88,13 @@ function normalizeLeftHandle({
8388
return undefined;
8489
}
8590

86-
const span = Math.max(1, rightKey.time - leftKey.time);
91+
const span = mediaTime({
92+
ticks: Math.max(1, rightKey.time - leftKey.time),
93+
});
8794
return {
88-
dt: Math.max(-span, Math.min(0, handle.dt)),
95+
dt: mediaTime({
96+
ticks: Math.max(-span, Math.min(0, handle.dt)),
97+
}),
8998
dv: handle.dv,
9099
};
91100
}

0 commit comments

Comments
 (0)