diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts index 54d55d6e1..83d3bab5c 100644 --- a/packages/core/src/runtime/init.ts +++ b/packages/core/src/runtime/init.ts @@ -1834,6 +1834,10 @@ export function initSandboxRuntimeModular(): void { state.capturedTimeline, getSafeTimelineDurationSeconds(state.capturedTimeline, 0), volumeKeyframeCache, + { + allowLiveTimelineSeek: !(window as Window & { __HF_RENDER_CAPTURE_MODE?: boolean }) + .__HF_RENDER_CAPTURE_MODE, + }, ); }; diff --git a/packages/core/src/runtime/mediaVolumeEnvelope.test.ts b/packages/core/src/runtime/mediaVolumeEnvelope.test.ts index a7b0350c5..87ea462c3 100644 --- a/packages/core/src/runtime/mediaVolumeEnvelope.test.ts +++ b/packages/core/src/runtime/mediaVolumeEnvelope.test.ts @@ -3,6 +3,32 @@ import { describe, expect, it } from "vitest"; import { probeAndCacheElementVolume } from "./mediaVolumeEnvelope"; describe("probeAndCacheElementVolume", () => { + it("does not seek or cache when live timeline probing is disabled", () => { + const audio = document.createElement("audio"); + audio.dataset.volume = "1"; + document.body.append(audio); + + let seekCount = 0; + const timeline = { + totalTime(next?: number) { + if (next !== undefined) { + seekCount += 1; + audio.volume = next >= 1 ? 0 : 1; + } + return 0.75; + }, + }; + const cache = new WeakMap
(); + + probeAndCacheElementVolume(audio, timeline, 1, cache, { + allowLiveTimelineSeek: false, + }); + + expect(seekCount).toBe(0); + expect(audio.volume).toBe(1); + expect(cache.has(audio)).toBe(false); + }); + it("restores the timeline playhead after sampling volume automation", () => { const audio = document.createElement("audio"); audio.dataset.volume = "1"; diff --git a/packages/core/src/runtime/mediaVolumeEnvelope.ts b/packages/core/src/runtime/mediaVolumeEnvelope.ts index 94856bb04..f32c12549 100644 --- a/packages/core/src/runtime/mediaVolumeEnvelope.ts +++ b/packages/core/src/runtime/mediaVolumeEnvelope.ts @@ -129,6 +129,18 @@ export function probeElementVolumeKeyframes( export type RuntimeTimelineRef = Partial
>; +export interface VolumeProbeOptions { + /** + * Render/probe pages must not sample the live visual timeline during runtime + * initialization. The producer discovers audio automation in its own + * isolated pass and bakes it before frame capture, so seeking here is both + * redundant and capable of materializing future zero-duration GSAP state. + * + * Preview callers omit this option and retain live automation discovery. + */ + allowLiveTimelineSeek?: boolean; +} + /** * Probe a media element and, if volume automation is detected, store the * keyframes in `cache`. Safe to call with a null timeline — returns early. @@ -138,7 +150,9 @@ export function probeAndCacheElementVolume( timeline: RuntimeTimelineRef | null | undefined, compositionDuration: number, cache: WeakMap
, + options: VolumeProbeOptions = {}, ): void { + if (options.allowLiveTimelineSeek === false) return; if (!timeline) return; if (!(mediaEl instanceof HTMLAudioElement) && !(mediaEl instanceof HTMLVideoElement)) return; if (compositionDuration <= 0) return; diff --git a/packages/producer/src/services/fileServer.test.ts b/packages/producer/src/services/fileServer.test.ts index 8d77b524c..dd5170875 100644 --- a/packages/producer/src/services/fileServer.test.ts +++ b/packages/producer/src/services/fileServer.test.ts @@ -5,6 +5,7 @@ import { tmpdir } from "node:os"; import { closeFileServerSafely, createFileServer, + RENDER_CAPTURE_MODE_SHIM, HF_BRIDGE_SCRIPT, HF_EARLY_STUB, injectScriptsAtHeadStart, @@ -315,6 +316,33 @@ describe("parseRangeHeader", () => { }); describe("createFileServer", () => { + it("marks producer pages as render capture before the runtime loads", async () => { + const projectDir = mkdtempSync(join(tmpdir(), "hf-file-server-render-mode-")); + try { + writeFileSync( + join(projectDir, "index.html"), + "", + ); + const runtimeScript = "globalThis.__hfRuntimeLoaded = true;"; + const server = await createFileServer({ + projectDir, + preHeadScripts: [], + headScripts: [runtimeScript], + }); + try { + const response = await fetch(`${server.url}/index.html`); + expect(response.status).toBe(200); + const html = await response.text(); + expect(html).toContain(RENDER_CAPTURE_MODE_SHIM); + expect(html.indexOf(RENDER_CAPTURE_MODE_SHIM)).toBeLessThan(html.indexOf(runtimeScript)); + } finally { + server.close(); + } + } finally { + rmSync(projectDir, { recursive: true, force: true }); + } + }); + it("serves ES modules with a JavaScript MIME type", async () => { const projectDir = mkdtempSync(join(tmpdir(), "hf-file-server-mjs-")); try { diff --git a/packages/producer/src/services/fileServer.ts b/packages/producer/src/services/fileServer.ts index 4760de574..007e59e44 100644 --- a/packages/producer/src/services/fileServer.ts +++ b/packages/producer/src/services/fileServer.ts @@ -677,6 +677,14 @@ export interface FileServerHandle { addPreHeadScript: (script: string) => void; } +/** + * Set before the Hyperframes runtime executes so render/probe pages can avoid + * preview-only initialization work that mutates the live visual timeline. + * Audio automation is discovered by the producer in an isolated pass and + * baked before frame capture. + */ +export const RENDER_CAPTURE_MODE_SHIM = "globalThis.__HF_RENDER_CAPTURE_MODE = true;"; + /** * Close a file server handle, swallowing and logging any error. * @@ -710,7 +718,11 @@ export function createFileServer(options: FileServerOptions): Promise
, render mode in