Files
hyperframes/packages/core/scripts/test-hyperframe-runtime-seek.ts
T
Miguel Ángel 02775c716f fix(core): render GSAP set steps on the frame they land on (#4911)
* fix(core): render tl.set steps on the frame they land on

The runtime re-rendered a seek by stepping just past the target and back.
Arriving backwards, GSAP applies same-time zero-duration steps in reverse,
so a film that hides every frame then shows one, on its frame grid, lost
that layer on every step: in renders, previews and thumbnails. It also
fired a tl.call on the target time again on each repeated seek. Both seek
paths now re-render from just below the target, silently.

* test(core): expect the seek re-render to arrive from below

* test(core): pin the seek re-render from below in the runtime seek script

* fix(core): keep re-rendering a seek to 0 from above

* test(producer): rebase style-4-prod on caption frames that render forward
2026-10-02 18:43:08 +00:00

135 lines
4.2 KiB
TypeScript

import assert from "node:assert/strict";
import { createGsapAdapter } from "../src/runtime/adapters/gsap";
import { createRuntimePlayer } from "../src/runtime/player";
import type { RuntimeTimelineLike } from "../src/runtime/types";
type Call = {
method: "pause" | "seek" | "totalTime";
time?: number;
suppressEvents?: boolean;
};
function createTimeline(withTotalTime: boolean): { calls: Call[]; timeline: RuntimeTimelineLike } {
const calls: Call[] = [];
const timeline: RuntimeTimelineLike = {
play: () => undefined,
pause: () => {
calls.push({ method: "pause" });
},
seek: (timeSeconds: number, suppressEvents?: boolean) => {
calls.push({ method: "seek", time: timeSeconds, suppressEvents });
},
time: () => 0,
duration: () => 12,
add: () => undefined,
paused: () => undefined,
set: () => undefined,
};
if (withTotalTime) {
timeline.totalTime = (timeSeconds: number, suppressEvents?: boolean) => {
calls.push({ method: "totalTime", time: timeSeconds, suppressEvents });
};
}
return { calls, timeline };
}
function createPlayer(timeline: RuntimeTimelineLike) {
const deterministicSeekCalls: number[] = [];
const syncMediaCalls: number[] = [];
const renderFrameSeekCalls: number[] = [];
const player = createRuntimePlayer({
getTimeline: () => timeline,
setTimeline: () => undefined,
getIsPlaying: () => false,
setIsPlaying: () => undefined,
getPlaybackRate: () => 1,
setPlaybackRate: () => undefined,
getCanonicalFps: () => 30,
onSyncMedia: (timeSeconds) => {
syncMediaCalls.push(timeSeconds);
},
onStatePost: () => undefined,
onDeterministicSeek: (timeSeconds) => {
deterministicSeekCalls.push(timeSeconds);
},
onDeterministicPause: () => undefined,
onDeterministicPlay: () => undefined,
onRenderFrameSeek: (timeSeconds) => {
renderFrameSeekCalls.push(timeSeconds);
},
onShowNativeVideos: () => undefined,
getSafeDuration: () => 12,
});
return { player, deterministicSeekCalls, syncMediaCalls, renderFrameSeekCalls };
}
function testSeekUsesDeterministicGsapPath(): void {
const { calls, timeline } = createTimeline(true);
const { player, deterministicSeekCalls, syncMediaCalls, renderFrameSeekCalls } =
createPlayer(timeline);
const quantizedTime = 2;
player.seek(2.017);
assert.deepEqual(
calls,
[{ method: "pause" }, { method: "totalTime", time: quantizedTime, suppressEvents: false }],
"player.seek() should use quantized totalTime() when available",
);
assert.deepEqual(
deterministicSeekCalls,
[quantizedTime],
"player.seek() should notify adapters with the quantized time",
);
assert.deepEqual(syncMediaCalls, [quantizedTime], "media sync should use quantized time");
assert.deepEqual(
renderFrameSeekCalls,
[quantizedTime],
"render frame seek should use quantized time",
);
}
function testGsapAdapterPreservesTotalTime(): void {
const { calls, timeline } = createTimeline(true);
const adapter = createGsapAdapter({ getTimeline: () => timeline });
const seekTime = 2.033333333333333;
adapter.seek({ time: seekTime });
assert.deepEqual(
calls,
[
{ method: "pause" },
{ method: "totalTime", time: seekTime, suppressEvents: false },
// Silent re-render arriving from below, so same-time steps apply in authored order
{ method: "totalTime", time: seekTime - 0.001, suppressEvents: true },
{ method: "totalTime", time: seekTime, suppressEvents: true },
],
"GSAP adapter should seek via totalTime() then re-render from just below",
);
}
function testGsapAdapterFallsBackToSeek(): void {
const { calls, timeline } = createTimeline(false);
const adapter = createGsapAdapter({ getTimeline: () => timeline });
adapter.seek({ time: 1.5 });
assert.deepEqual(
calls,
[{ method: "pause" }, { method: "seek", time: 1.5, suppressEvents: false }],
"GSAP adapter should keep working with timelines that only expose seek()",
);
}
testSeekUsesDeterministicGsapPath();
testGsapAdapterPreservesTotalTime();
testGsapAdapterFallsBackToSeek();
console.log(
JSON.stringify({
event: "hyperframe_runtime_seek_verified",
assertions: 3,
}),
);