@hyperframes/producer 0.5.0-alpha.12 → 0.5.0-alpha.14

package/dist/index.js

@@ -98670,7 +98670,8 @@ var DEFAULT_CONFIG = {
   forceScreenshot: false,
   enableChunkedEncode: false,
   chunkSizeFrames: 360,
-  enableStreamingEncode: false,
+  enableStreamingEncode: true,
+  streamingEncodeMaxDurationSeconds: 240,
   ffmpegEncodeTimeout: 6e5,
   ffmpegProcessTimeout: 3e5,
   ffmpegStreamingTimeout: 6e5,
@@ -98732,6 +98733,13 @@ function resolveConfig(overrides) {
       "PRODUCER_ENABLE_STREAMING_ENCODE",
       DEFAULT_CONFIG.enableStreamingEncode
     ),
+    streamingEncodeMaxDurationSeconds: Math.max(
+      0,
+      envNum(
+        "PRODUCER_STREAMING_ENCODE_MAX_DURATION_SECONDS",
+        DEFAULT_CONFIG.streamingEncodeMaxDurationSeconds
+      )
+    ),
     ffmpegEncodeTimeout: envNum("FFMPEG_ENCODE_TIMEOUT_MS", DEFAULT_CONFIG.ffmpegEncodeTimeout),
     ffmpegProcessTimeout: envNum("FFMPEG_PROCESS_TIMEOUT_MS", DEFAULT_CONFIG.ffmpegProcessTimeout),
     ffmpegStreamingTimeout: envNum(
@@ -101674,6 +101682,44 @@ async function pollPageExpression(page, expression, timeoutMs, intervalMs = 100)
   }
   return Boolean(await page.evaluate(expression));
 }
+async function applyVideoMetadataHints(page, hints) {
+  if (!hints || hints.length === 0) return;
+  await page.evaluate(
+    (metadataHints) => {
+      for (const hint of metadataHints) {
+        if (!hint.id || !Number.isFinite(hint.width) || !Number.isFinite(hint.height) || hint.width <= 0 || hint.height <= 0) {
+          continue;
+        }
+        const video = document.getElementById(hint.id);
+        if (!video) continue;
+        if (!video.hasAttribute("width")) video.setAttribute("width", String(hint.width));
+        if (!video.hasAttribute("height")) video.setAttribute("height", String(hint.height));
+        const computed = window.getComputedStyle(video);
+        if (!video.style.aspectRatio && (!computed.aspectRatio || computed.aspectRatio === "auto")) {
+          video.style.aspectRatio = `${hint.width} / ${hint.height}`;
+        }
+      }
+    },
+    [...hints]
+  );
+}
+async function waitForOptionalTailwindReady(page, timeoutMs) {
+  const hasTailwindReady = await page.evaluate(
+    `(() => { const ready = window.__tailwindReady; return !!ready && typeof ready.then === "function"; })()`
+  );
+  if (!hasTailwindReady) return;
+  const ready = await Promise.race([
+    page.evaluate(
+      `Promise.resolve(window.__tailwindReady).then(() => true, () => false)`
+    ),
+    new Promise((resolve14) => setTimeout(() => resolve14(false), timeoutMs))
+  ]);
+  if (!ready) {
+    throw new Error(
+      `[FrameCapture] window.__tailwindReady not resolved after ${timeoutMs}ms. Tailwind browser runtime must finish before frame capture starts.`
+    );
+  }
+}
 async function initializeSession(session) {
   const { page, serverUrl } = session;
   page.on("console", (msg) => {
@@ -101717,6 +101763,7 @@ async function initializeSession(session) {
         `[FrameCapture] window.__hf not ready after ${pageReadyTimeout2}ms. Page must expose window.__hf = { duration, seek }.`
       );
     }
+    await applyVideoMetadataHints(page, session.options.videoMetadataHints);
     const skipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
     const videosReady = await pollPageExpression(
       page,
@@ -101729,6 +101776,7 @@ async function initializeSession(session) {
       );
     }
     await page.evaluate(`document.fonts?.ready`);
+    await waitForOptionalTailwindReady(page, pageReadyTimeout2);
     if (session.options.format === "png") {
       await initTransparentBackground(session.page);
     }
@@ -101783,6 +101831,7 @@ async function initializeSession(session) {
       `[FrameCapture] window.__hf not ready after ${pageReadyTimeout}ms. Page must expose window.__hf = { duration, seek }.`
     );
   }
+  await applyVideoMetadataHints(page, session.options.videoMetadataHints);
   const beginframeSkipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
   const videoDeadline = Date.now() + (session.config?.playerReadyTimeout ?? DEFAULT_CONFIG.playerReadyTimeout);
   while (Date.now() < videoDeadline) {
@@ -101793,6 +101842,7 @@ async function initializeSession(session) {
     await new Promise((r) => setTimeout(r, 100));
   }
   await page.evaluate(`document.fonts?.ready`);
+  await waitForOptionalTailwindReady(page, pageReadyTimeout);
   warmupRunning = false;
   session.beginFrameTimeTicks = (warmupTicks + 10) * session.beginFrameIntervalMs;
   if (session.options.format === "png") {
@@ -110764,6 +110814,24 @@ function applyRenderModeHints(cfg, compiled, log = defaultLogger) {
     reasons: compiled.renderModeHints.reasons.map((reason) => reason.message)
   });
 }
+function collectVideoReadinessSkipIds(nativeHdrVideoIds, extractedVideos) {
+  return Array.from(
+    /* @__PURE__ */ new Set([
+      ...nativeHdrVideoIds,
+      ...extractedVideos.filter((video) => hasUsableVideoDimensions(video.metadata)).map((video) => video.videoId)
+    ])
+  ).sort();
+}
+function hasUsableVideoDimensions(metadata) {
+  return Number.isFinite(metadata.width) && Number.isFinite(metadata.height) && metadata.width > 0 && metadata.height > 0;
+}
+function collectVideoMetadataHints(extractedVideos) {
+  return extractedVideos.filter((video) => hasUsableVideoDimensions(video.metadata)).map((video) => ({
+    id: video.videoId,
+    width: video.metadata.width,
+    height: video.metadata.height
+  })).sort((a, b) => a.id.localeCompare(b.id));
+}
 function resolveRenderWorkerCount(totalFrames, requestedWorkers, cfg, compiled, composition, log = defaultLogger, measuredCaptureCost) {
   const captureCost = combineCaptureCostEstimates(
     estimateCaptureCostMultiplier(compiled, composition),
@@ -111429,6 +111497,27 @@ function createRenderJob(config2) {
 function normalizeCompositionSrcPath(srcPath) {
   return srcPath.replace(/\\/g, "/").replace(/^\.\//, "");
 }
+function createStandaloneEntryRenderClone(root, host) {
+  const hostClone = host.cloneNode(true);
+  hostClone.setAttribute("data-start", "0");
+  if (root === host) return hostClone;
+  const rootClone = root.cloneNode(false);
+  rootClone.appendChild(hostClone);
+  return rootClone;
+}
+function replaceBodyWithRenderClone(body, renderClone) {
+  while (body.firstChild) {
+    body.removeChild(body.firstChild);
+  }
+  body.appendChild(renderClone);
+}
+function shouldUseStreamingEncode(cfg, outputFormat, workerCount, durationSeconds) {
+  if (!cfg.enableStreamingEncode) return false;
+  if (outputFormat === "png-sequence") return false;
+  if (!Number.isFinite(durationSeconds) || durationSeconds <= 0) return false;
+  if (durationSeconds > cfg.streamingEncodeMaxDurationSeconds) return false;
+  return workerCount === 1;
+}
 function extractStandaloneEntryFromIndex(indexHtml, entryFile) {
   const normalizedEntryFile = normalizeCompositionSrcPath(entryFile);
   const { document: document2 } = parseHTML(indexHtml);
@@ -111443,16 +111532,8 @@ function extractStandaloneEntryFromIndex(indexHtml, entryFile) {
     (candidate) => candidate.hasAttribute("data-composition-id")
   ) ?? null;
   if (!root) return null;
-  const hostClone = host.cloneNode(true);
-  hostClone.setAttribute("data-start", "0");
-  body.innerHTML = "";
-  if (root === host) {
-    body.appendChild(hostClone);
-    return document2.toString();
-  }
-  const rootClone = root.cloneNode(false);
-  rootClone.appendChild(hostClone);
-  body.appendChild(rootClone);
+  const renderClone = createStandaloneEntryRenderClone(root, host);
+  replaceBodyWithRenderClone(body, renderClone);
   return document2.toString();
 }
 async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSignal) {
@@ -111484,7 +111565,6 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
   }
   const enableChunkedEncode = cfg.enableChunkedEncode;
   const chunkedEncodeSize = cfg.chunkSizeFrames;
-  const enableStreamingEncode = cfg.enableStreamingEncode && !isPngSequence;
   let peakRssBytes = 0;
   let peakHeapUsedBytes = 0;
   const sampleMemory = () => {
@@ -111778,6 +111858,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     let frameLookup = null;
     const compiledDir = join16(workDir, "compiled");
     let extractionResult = null;
+    let videoReadinessSkipIds = [];
+    let videoMetadataHints = [];
     const nativeHdrVideoIds = /* @__PURE__ */ new Set();
     const videoTransfers = /* @__PURE__ */ new Map();
     if (job.config.hdrMode !== "force-sdr" && composition.videos.length > 0) {
@@ -111834,6 +111916,11 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       if (extractionResult.extracted.length > 0) {
         frameLookup = createFrameLookupTable(composition.videos, extractionResult.extracted);
       }
+      videoReadinessSkipIds = collectVideoReadinessSkipIds(
+        nativeHdrVideoIds,
+        extractionResult.extracted
+      );
+      videoMetadataHints = collectVideoMetadataHints(extractionResult.extracted);
       perfStages.videoExtractMs = Date.now() - stage2Start;
       const existingAudioSrcs = new Set(composition.audios.map((a) => a.src));
       for (const ext of extractionResult.extracted) {
@@ -111947,9 +112034,10 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       format: needsAlpha ? "png" : "jpeg",
       quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95
     };
-    const buildHdrCaptureOptions = () => ({
+    const buildCaptureOptions = () => ({
       ...captureOptions,
-      skipReadinessVideoIds: Array.from(nativeHdrVideoIds)
+      videoMetadataHints,
+      skipReadinessVideoIds: videoReadinessSkipIds
     });
     let captureCalibration;
     let switchedToScreenshotAfterCalibration = false;
@@ -111962,7 +112050,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         calibrationSession = await createCaptureSession(
           fileServer.url,
           calibrationDir,
-          buildHdrCaptureOptions(),
+          buildCaptureOptions(),
           videoInjector,
           calibrationCfg
         );
@@ -112045,6 +112133,15 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       await closeCaptureSession(probeSession);
       probeSession = null;
     }
+    let useStreamingEncode = shouldUseStreamingEncode(cfg, outputFormat, workerCount, job.duration);
+    log.info("streaming-encode gate", {
+      enabled: useStreamingEncode,
+      configFlag: cfg.enableStreamingEncode,
+      outputFormat,
+      workerCount,
+      durationSeconds: job.duration,
+      maxDurationSeconds: cfg.streamingEncodeMaxDurationSeconds
+    });
     const captureAttempts = [];
     const FORMAT_EXT = {
       mp4: ".mp4",
@@ -112086,7 +112183,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       const domSession = await createCaptureSession(
         fileServer.url,
         framesDir,
-        buildHdrCaptureOptions(),
+        buildCaptureOptions(),
         createVideoFrameInjector(frameLookup),
         cfg
       );
@@ -112584,28 +112681,47 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     } else {
       let streamingEncoder = null;
       let streamingEncoderClosed = false;
-      if (enableStreamingEncode) {
-        streamingEncoder = await spawnStreamingEncoder(
-          videoOnlyPath,
-          {
-            fps: job.config.fps,
-            width,
-            height,
-            codec: preset.codec,
-            preset: preset.preset,
-            quality: effectiveQuality,
-            bitrate: effectiveBitrate,
-            pixelFormat: preset.pixelFormat,
-            useGpu: job.config.useGpu,
-            imageFormat: captureOptions.format || "jpeg",
-            hdr: preset.hdr
-          },
-          abortSignal
-        );
-        assertNotAborted();
+      if (useStreamingEncode) {
+        try {
+          streamingEncoder = await spawnStreamingEncoder(
+            videoOnlyPath,
+            {
+              fps: job.config.fps,
+              width,
+              height,
+              codec: preset.codec,
+              preset: preset.preset,
+              quality: effectiveQuality,
+              bitrate: effectiveBitrate,
+              pixelFormat: preset.pixelFormat,
+              useGpu: job.config.useGpu,
+              imageFormat: captureOptions.format || "jpeg",
+              hdr: preset.hdr
+            },
+            abortSignal
+          );
+          assertNotAborted();
+        } catch (err) {
+          if (abortSignal?.aborted) {
+            if (streamingEncoder && !streamingEncoderClosed) {
+              await streamingEncoder.close().catch(() => {
+              });
+              streamingEncoderClosed = true;
+            }
+            throw err;
+          }
+          useStreamingEncode = false;
+          streamingEncoder = null;
+          log.warn("[Render] Streaming encoder spawn failed; falling back to disk-frame encode.", {
+            error: err instanceof Error ? err.message : String(err),
+            outputFormat,
+            workerCount,
+            durationSeconds: job.duration
+          });
+        }
       }
       try {
-        if (enableStreamingEncode && streamingEncoder) {
+        if (useStreamingEncode && streamingEncoder) {
           const reorderBuffer = createFrameReorderBuffer(0, totalFrames);
           const currentEncoder = streamingEncoder;
           if (workerCount > 1) {
@@ -112619,7 +112735,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
               fileServer.url,
               workDir,
               tasks,
-              buildHdrCaptureOptions(),
+              buildCaptureOptions(),
               () => createVideoFrameInjector(frameLookup),
               abortSignal,
               (progress) => {
@@ -112649,7 +112765,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             const session = probeSession ?? await createCaptureSession(
               fileServer.url,
               framesDir,
-              buildHdrCaptureOptions(),
+              buildCaptureOptions(),
               videoInjector,
               cfg
             );
@@ -112704,7 +112820,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
               initialWorkerCount: workerCount,
               allowRetry: job.config.workers === void 0,
               frameExt: needsAlpha ? "png" : "jpg",
-              captureOptions: buildHdrCaptureOptions(),
+              captureOptions: buildCaptureOptions(),
               createBeforeCaptureHook: () => createVideoFrameInjector(frameLookup),
               abortSignal,
               onProgress: (progress) => {
@@ -112739,7 +112855,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             const session = probeSession ?? await createCaptureSession(
               fileServer.url,
               framesDir,
-              buildHdrCaptureOptions(),
+              buildCaptureOptions(),
               videoInjector,
               cfg
             );