@hyperframes/producer 0.4.5 → 0.4.6

package/dist/index.js

@@ -101071,6 +101071,15 @@ function isFontResourceError(type, text, locationUrl) {
     `${locationUrl} ${text}`
   );
 }
+async function pollPageExpression(page, expression, timeoutMs, intervalMs = 100) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    const ready = Boolean(await page.evaluate(expression));
+    if (ready) return true;
+    await new Promise((resolve13) => setTimeout(resolve13, intervalMs));
+  }
+  return Boolean(await page.evaluate(expression));
+}
 async function initializeSession(session) {
   const { page, serverUrl } = session;
   page.on("console", (msg) => {
@@ -101100,14 +101109,26 @@ async function initializeSession(session) {
   if (session.captureMode === "screenshot") {
     await page.goto(url, { waitUntil: "domcontentloaded", timeout: 6e4 });
     const pageReadyTimeout2 = session.config?.playerReadyTimeout ?? DEFAULT_CONFIG.playerReadyTimeout;
-    await page.waitForFunction(
+    const pageReady2 = await pollPageExpression(
+      page,
       `!!(window.__hf && typeof window.__hf.seek === "function" && window.__hf.duration > 0)`,
-      { timeout: pageReadyTimeout2 }
+      pageReadyTimeout2
     );
-    await page.waitForFunction(
+    if (!pageReady2) {
+      throw new Error(
+        `[FrameCapture] window.__hf not ready after ${pageReadyTimeout2}ms. Page must expose window.__hf = { duration, seek }.`
+      );
+    }
+    const videosReady = await pollPageExpression(
+      page,
       `document.querySelectorAll("video").length === 0 || Array.from(document.querySelectorAll("video")).every(v => v.readyState >= 1)`,
-      { timeout: pageReadyTimeout2 }
+      pageReadyTimeout2
     );
+    if (!videosReady) {
+      throw new Error(
+        `[FrameCapture] video metadata not ready after ${pageReadyTimeout2}ms. Video elements must load metadata before capture starts.`
+      );
+    }
     await page.evaluate(`document.fonts?.ready`);
     session.isInitialized = true;
     return;
@@ -105871,6 +105892,102 @@ var MIME_TYPES = {
   ".ttf": "font/ttf",
   ".otf": "font/otf"
 };
+var VIRTUAL_TIME_SHIM = String.raw`(function() {
+  if (window.__HF_VIRTUAL_TIME__) return;
+
+  var virtualNowMs = 0;
+  var rafId = 1;
+  var rafQueue = [];
+  var OriginalDate = Date;
+  var originalSetTimeout = window.setTimeout.bind(window);
+  var originalClearTimeout = window.clearTimeout.bind(window);
+  var originalSetInterval = window.setInterval.bind(window);
+  var originalClearInterval = window.clearInterval.bind(window);
+  var originalRequestAnimationFrame = window.requestAnimationFrame
+    ? window.requestAnimationFrame.bind(window)
+    : null;
+  var originalCancelAnimationFrame = window.cancelAnimationFrame
+    ? window.cancelAnimationFrame.bind(window)
+    : null;
+
+  function flushAnimationFrame() {
+    if (!rafQueue.length) return;
+    var current = rafQueue.slice();
+    rafQueue.length = 0;
+    for (var i = 0; i < current.length; i++) {
+      var entry = current[i];
+      if (entry.cancelled) continue;
+      try {
+        entry.callback(virtualNowMs);
+      } catch {}
+    }
+  }
+
+  function VirtualDate() {
+    var args = Array.prototype.slice.call(arguments);
+    if (!(this instanceof VirtualDate)) {
+      return OriginalDate.apply(null, args.length ? args : [virtualNowMs]);
+    }
+    var instance = args.length ? new (Function.prototype.bind.apply(OriginalDate, [null].concat(args)))() : new OriginalDate(virtualNowMs);
+    Object.setPrototypeOf(instance, VirtualDate.prototype);
+    return instance;
+  }
+
+  VirtualDate.prototype = OriginalDate.prototype;
+  Object.setPrototypeOf(VirtualDate, OriginalDate);
+  VirtualDate.now = function() { return virtualNowMs; };
+  VirtualDate.parse = OriginalDate.parse.bind(OriginalDate);
+  VirtualDate.UTC = OriginalDate.UTC.bind(OriginalDate);
+
+  try {
+    Object.defineProperty(window, "Date", {
+      configurable: true,
+      writable: true,
+      value: VirtualDate,
+    });
+  } catch {}
+
+  if (window.performance && typeof window.performance.now === "function") {
+    try {
+      Object.defineProperty(window.performance, "now", {
+        configurable: true,
+        value: function() { return virtualNowMs; },
+      });
+    } catch {}
+  }
+
+  window.requestAnimationFrame = function(callback) {
+    if (typeof callback !== "function") return 0;
+    var entry = { id: rafId++, callback: callback, cancelled: false };
+    rafQueue.push(entry);
+    return entry.id;
+  };
+  window.cancelAnimationFrame = function(id) {
+    for (var i = 0; i < rafQueue.length; i++) {
+      if (rafQueue[i].id === id) {
+        rafQueue[i].cancelled = true;
+      }
+    }
+  };
+
+  window.__HF_VIRTUAL_TIME__ = {
+    originalSetTimeout: originalSetTimeout,
+    originalClearTimeout: originalClearTimeout,
+    originalSetInterval: originalSetInterval,
+    originalClearInterval: originalClearInterval,
+    originalRequestAnimationFrame: originalRequestAnimationFrame,
+    originalCancelAnimationFrame: originalCancelAnimationFrame,
+    seekToTime: function(nextTimeMs) {
+      var safeTimeMs = Math.max(0, Number(nextTimeMs) || 0);
+      virtualNowMs = safeTimeMs;
+      flushAnimationFrame();
+      return virtualNowMs;
+    },
+    getTime: function() {
+      return virtualNowMs;
+    },
+  };
+})();`;
 var RENDER_SEEK_MODE = process.env.PRODUCER_RUNTIME_RENDER_SEEK_MODE === "strict-boundary" ? "strict-boundary" : "preview-phase";
 var RENDER_SEEK_DIAGNOSTICS = process.env.PRODUCER_DEBUG_SEEK_DIAGNOSTICS === "true";
 var RENDER_SEEK_STEP = Math.max(
@@ -105882,6 +105999,10 @@ var RENDER_SEEK_OFFSET_FRACTION = Math.max(
   Math.min(0.95, Number(process.env.PRODUCER_RUNTIME_RENDER_SEEK_OFFSET_FRACTION || 0.5))
 );
 var RENDER_MODE_SCRIPT = `(function() {
+  var __realSetTimeout =
+    window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.originalSetTimeout === "function"
+      ? window.__HF_VIRTUAL_TIME__.originalSetTimeout
+      : window.setTimeout.bind(window);
   var __seekMode = ${JSON.stringify(RENDER_SEEK_MODE)};
   var __seekDiagnostics = ${RENDER_SEEK_DIAGNOSTICS ? "true" : "false"};
   var __seekStep = ${RENDER_SEEK_STEP};
@@ -105975,23 +106096,56 @@ var RENDER_MODE_SCRIPT = `(function() {
         window.__renderReady = true;
         return;
       }
-      setTimeout(waitForPlayer, 50);
+      __realSetTimeout(waitForPlayer, 50);
       return;
     }
     if (installMediaFallbackPlayer()) {
       return;
     }
-    setTimeout(waitForPlayer, 50);
+    __realSetTimeout(waitForPlayer, 50);
   }
   waitForPlayer();
 })();`;
 var HF_BRIDGE_SCRIPT = `(function() {
+  var __realSetInterval =
+    window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.originalSetInterval === "function"
+      ? window.__HF_VIRTUAL_TIME__.originalSetInterval
+      : window.setInterval.bind(window);
+  var __realClearInterval =
+    window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.originalClearInterval === "function"
+      ? window.__HF_VIRTUAL_TIME__.originalClearInterval
+      : window.clearInterval.bind(window);
   function getDeclaredDuration() {
     var root = document.querySelector('[data-composition-id]');
     if (!root) return 0;
     var d = Number(root.getAttribute('data-duration'));
     return Number.isFinite(d) && d > 0 ? d : 0;
   }
+  function seekSameOriginChildFrames(frameWindow, nextTimeMs) {
+    var frames;
+    try {
+      frames = frameWindow.frames;
+    } catch (_error) {
+      return;
+    }
+    if (!frames || typeof frames.length !== "number") return;
+    for (var i = 0; i < frames.length; i++) {
+      var childWindow = null;
+      try {
+        childWindow = frames[i];
+        if (!childWindow || childWindow === frameWindow) continue;
+        if (
+          childWindow.__HF_VIRTUAL_TIME__ &&
+          typeof childWindow.__HF_VIRTUAL_TIME__.seekToTime === "function"
+        ) {
+          childWindow.__HF_VIRTUAL_TIME__.seekToTime(nextTimeMs);
+        }
+      } catch (_error) {
+        continue;
+      }
+      seekSameOriginChildFrames(childWindow, nextTimeMs);
+    }
+  }
   function bridge() {
     var p = window.__player;
     if (!p || typeof p.renderSeek !== "function" || typeof p.getDuration !== "function") {
@@ -106002,13 +106156,20 @@ var HF_BRIDGE_SCRIPT = `(function() {
         var d = p.getDuration();
         return d > 0 ? d : getDeclaredDuration();
       },
-      seek: function(t) { p.renderSeek(t); },
+      seek: function(t) {
+        p.renderSeek(t);
+        var nextTimeMs = (Math.max(0, Number(t) || 0)) * 1000;
+        if (window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.seekToTime === "function") {
+          window.__HF_VIRTUAL_TIME__.seekToTime(nextTimeMs);
+        }
+        seekSameOriginChildFrames(window, nextTimeMs);
+      },
     };
     return true;
   }
   if (bridge()) return;
-  var iv = setInterval(function() {
-    if (bridge()) clearInterval(iv);
+  var iv = __realSetInterval(function() {
+    if (bridge()) __realClearInterval(iv);
   }, 50);
 })();`;
 function stripEmbeddedRuntimeScripts(html) {
@@ -106070,8 +106231,22 @@ function injectScriptsIntoHtml(html, headScripts, bodyScripts, stripEmbedded) {
   }
   return html;
 }
+function injectScriptsAtHeadStart(html, scripts) {
+  if (scripts.length === 0) return html;
+  const headTags = scripts.map((src) => `<script>${src}</script>`).join("\n");
+  if (html.includes("<head")) {
+    return html.replace(/<head\b[^>]*>/i, (match2) => `${match2}
+${headTags}`);
+  }
+  if (html.includes("<body")) {
+    return html.replace("<body", () => `${headTags}
+<body`);
+  }
+  return headTags + "\n" + html;
+}
 function createFileServer2(options) {
   const { projectDir, compiledDir, port = 0, stripEmbeddedRuntime = true } = options;
+  const preHeadScripts = options.preHeadScripts ?? [];
   const headScripts = options.headScripts ?? [getVerifiedHyperframeRuntimeSource()];
   const bodyScripts = options.bodyScripts ?? [RENDER_MODE_SCRIPT, HF_BRIDGE_SCRIPT];
   const app = new Hono2();
@@ -106095,7 +106270,11 @@ function createFileServer2(options) {
     if (ext === ".html") {
       const rawHtml = readFileSync6(filePath, "utf-8");
       const isIndex = relativePath === "index.html";
-      const html = isIndex ? injectScriptsIntoHtml(rawHtml, headScripts, bodyScripts, stripEmbeddedRuntime) : rawHtml;
+      let html = rawHtml;
+      if (preHeadScripts.length > 0) {
+        html = injectScriptsAtHeadStart(html, preHeadScripts);
+      }
+      html = isIndex ? injectScriptsIntoHtml(html, headScripts, bodyScripts, stripEmbeddedRuntime) : html;
       return c.text(html, 200, { "Content-Type": contentType });
     }
     const content = readFileSync6(filePath);
@@ -106543,6 +106722,37 @@ function dedupeElementsById(elements) {
   }
   return Array.from(deduped.values());
 }
+var INLINE_SCRIPT_PATTERN = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+function stripJsComments(source2) {
+  return source2.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+}
+function detectRenderModeHints(html) {
+  const reasons = [];
+  const { document: document2 } = parseHTML(html);
+  if (document2.querySelector("iframe")) {
+    reasons.push({
+      code: "iframe",
+      message: "Detected <iframe> in the composition DOM. Nested iframe animation is routed through screenshot capture mode for compatibility."
+    });
+  }
+  let scriptMatch;
+  const scriptPattern = new RegExp(INLINE_SCRIPT_PATTERN.source, INLINE_SCRIPT_PATTERN.flags);
+  while ((scriptMatch = scriptPattern.exec(html)) !== null) {
+    const attrs = scriptMatch[1] || "";
+    if (/\bsrc\s*=/i.test(attrs)) continue;
+    const content = stripJsComments(scriptMatch[2] || "");
+    if (!/requestAnimationFrame\s*\(/.test(content)) continue;
+    reasons.push({
+      code: "requestAnimationFrame",
+      message: "Detected raw requestAnimationFrame() in an inline script. This render is routed through screenshot capture mode with virtual time enabled."
+    });
+    break;
+  }
+  return {
+    recommendScreenshot: reasons.length > 0,
+    reasons
+  };
+}
 async function resolveMediaDuration(src, mediaStart, baseDir, downloadDir, tagName19) {
   let filePath = src;
   if (isHttpUrl(src)) {
@@ -107106,6 +107316,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir) {
     /(<(?:video|audio)\b[^>]*?)\s+preload\s*=\s*["']none["']/gi,
     "$1"
   );
+  const renderModeHints = detectRenderModeHints(sanitizedHtml);
   const coalescedHtml = await injectDeterministicFontFaces(
     coalesceHeadStylesAndBodyScripts(promoteCssImportsToLinkTags(sanitizedHtml))
   );
@@ -107149,7 +107360,8 @@ async function compileForRender(projectDir, htmlPath, downloadDir) {
     externalAssets,
     width,
     height,
-    staticDuration
+    staticDuration,
+    renderModeHints
   };
 }
 async function discoverMediaFromBrowser(page) {
@@ -107243,7 +107455,8 @@ async function recompileWithResolutions(compiled, resolutions, projectDir, downl
     subCompositions,
     videos,
     audios,
-    unresolvedCompositions: remaining
+    unresolvedCompositions: remaining,
+    renderModeHints: compiled.renderModeHints
   };
 }
 
@@ -107380,11 +107593,20 @@ function writeCompiledArtifacts(compiled, workDir, includeSummary) {
         end: a.end,
         mediaStart: a.mediaStart
       })),
-      subCompositions: Array.from(compiled.subCompositions.keys())
+      subCompositions: Array.from(compiled.subCompositions.keys()),
+      renderModeHints: compiled.renderModeHints
     };
     writeFileSync4(join15(compileDir, "summary.json"), JSON.stringify(summary, null, 2), "utf-8");
   }
 }
+function applyRenderModeHints(cfg, compiled, log = defaultLogger) {
+  if (cfg.forceScreenshot || !compiled.renderModeHints.recommendScreenshot) return;
+  cfg.forceScreenshot = true;
+  log.warn("Auto-selected screenshot capture mode for render compatibility", {
+    reasonCodes: compiled.renderModeHints.reasons.map((reason) => reason.code),
+    reasons: compiled.renderModeHints.reasons.map((reason) => reason.message)
+  });
+}
 function createRenderJob(config2) {
   return {
     id: randomUUID(),
@@ -107497,6 +107719,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     let compiled = await compileForRender(projectDir, htmlPath, join15(workDir, "downloads"));
     assertNotAborted();
     perfStages.compileOnlyMs = Date.now() - compileStart;
+    applyRenderModeHints(cfg, compiled, log);
     writeCompiledArtifacts(compiled, workDir, Boolean(job.config.debug));
     log.info("Compiled composition metadata", {
       entryFile,
@@ -107504,7 +107727,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       width: compiled.width,
       height: compiled.height,
       videoCount: compiled.videos.length,
-      audioCount: compiled.audios.length
+      audioCount: compiled.audios.length,
+      renderModeHints: compiled.renderModeHints
     });
     const composition = {
       duration: compiled.staticDuration,
@@ -107524,7 +107748,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       fileServer = await createFileServer2({
         projectDir,
         compiledDir: join15(workDir, "compiled"),
-        port: 0
+        port: 0,
+        preHeadScripts: [VIRTUAL_TIME_SHIM]
       });
       assertNotAborted();
       const captureOpts = {
@@ -107767,7 +107992,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       fileServer = await createFileServer2({
         projectDir,
         compiledDir: join15(workDir, "compiled"),
-        port: 0
+        port: 0,
+        preHeadScripts: [VIRTUAL_TIME_SHIM]
       });
       assertNotAborted();
     }