hyperframes 0.4.9 → 0.4.10

package/dist/cli.js

@@ -54,7 +54,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.4.9" : "0.0.0-dev";
+    VERSION = true ? "0.4.10" : "0.0.0-dev";
   }
 });
 
@@ -5411,8 +5411,8 @@ function flushSync() {
   eventQueue = [];
   const payload = JSON.stringify({ api_key: POSTHOG_API_KEY, batch });
   try {
-    const { spawn: spawn11 } = __require("child_process");
-    const child = spawn11(
+    const { spawn: spawn12 } = __require("child_process");
+    const child = spawn12(
       process.execPath,
       [
         "-e",
@@ -34137,9 +34137,60 @@ __export(snapshot_exports, {
   default: () => snapshot_default,
   examples: () => examples18
 });
-import { existsSync as existsSync45, readFileSync as readFileSync31, mkdirSync as mkdirSync24 } from "fs";
+import { spawn as spawn11 } from "child_process";
+import { existsSync as existsSync45, mkdtempSync as mkdtempSync2, readFileSync as readFileSync31, mkdirSync as mkdirSync24, rmSync as rmSync9 } from "fs";
+import { tmpdir as tmpdir4 } from "os";
 import { resolve as resolve32, join as join45, dirname as dirname20, relative as relative4, isAbsolute as isAbsolute4 } from "path";
 import { fileURLToPath as fileURLToPath8 } from "url";
+async function extractVideoFrameToBuffer(videoPath, timeSeconds) {
+  const tmp = mkdtempSync2(join45(tmpdir4(), "hf-snapshot-frame-"));
+  const outPath = join45(tmp, "frame.png");
+  try {
+    const result = await new Promise(
+      (resolvePromise) => {
+        const ff = spawn11("ffmpeg", [
+          "-hide_banner",
+          "-loglevel",
+          "error",
+          "-ss",
+          String(Math.max(0, timeSeconds)),
+          "-i",
+          videoPath,
+          "-frames:v",
+          "1",
+          "-q:v",
+          "2",
+          "-y",
+          outPath
+        ]);
+        let stderr = "";
+        let timedOut = false;
+        const timer = setTimeout(() => {
+          timedOut = true;
+          ff.kill("SIGTERM");
+        }, FFMPEG_EXTRACT_TIMEOUT_MS);
+        ff.stderr.on("data", (d) => {
+          stderr += d.toString();
+        });
+        ff.on("close", (code) => {
+          clearTimeout(timer);
+          resolvePromise({ code, stderr, timedOut });
+        });
+        ff.on("error", () => {
+          clearTimeout(timer);
+          resolvePromise({ code: null, stderr: "ffmpeg spawn failed", timedOut });
+        });
+      }
+    );
+    if (result.code !== 0 || result.timedOut || !existsSync45(outPath)) return null;
+    return readFileSync31(outPath);
+  } finally {
+    try {
+      rmSync9(tmp, { recursive: true, force: true });
+    } catch {
+    }
+  }
+}
 async function captureSnapshots(projectDir, opts) {
   const { bundleToSingleHtml: bundleToSingleHtml2 } = await Promise.resolve().then(() => (init_compiler(), compiler_exports));
   const { ensureBrowser: ensureBrowser2 } = await Promise.resolve().then(() => (init_manager2(), manager_exports2));
@@ -34254,6 +34305,14 @@ async function captureSnapshots(projectDir, opts) {
       const positions = opts.at?.length ? opts.at : numFrames === 1 ? [duration / 2] : Array.from({ length: numFrames }, (_2, i2) => i2 / (numFrames - 1) * duration);
       const snapshotDir = join45(projectDir, "snapshots");
       mkdirSync24(snapshotDir, { recursive: true });
+      let injectVideoFramesBatch2 = null;
+      let syncVideoFrameVisibility2 = null;
+      try {
+        const engine = await Promise.resolve().then(() => (init_src2(), src_exports));
+        injectVideoFramesBatch2 = engine.injectVideoFramesBatch;
+        syncVideoFrameVisibility2 = engine.syncVideoFrameVisibility;
+      } catch {
+      }
       for (let i2 = 0; i2 < positions.length; i2++) {
         const time = positions[i2];
         await page.evaluate((t3) => {
@@ -34276,6 +34335,59 @@ async function captureSnapshots(projectDir, opts) {
           () => new Promise((r2) => requestAnimationFrame(() => requestAnimationFrame(() => r2())))
         );
         await new Promise((r2) => setTimeout(r2, 200));
+        if (injectVideoFramesBatch2 && syncVideoFrameVisibility2) {
+          const active = await page.evaluate((t3) => {
+            return Array.from(document.querySelectorAll("video[data-start]")).map((el) => {
+              const v = el;
+              const start = parseFloat(v.dataset.start ?? "0") || 0;
+              const rawRate = v.defaultPlaybackRate;
+              const playbackRate = Number.isFinite(rawRate) && rawRate > 0 ? Math.max(0.1, Math.min(5, rawRate)) : 1;
+              const mediaStart = parseFloat(v.dataset.playbackStart ?? v.dataset.mediaStart ?? "0") || 0;
+              const rawDuration = parseFloat(v.dataset.duration ?? "");
+              const srcDur = Number.isFinite(v.duration) && v.duration > 0 ? v.duration : 0;
+              const duration2 = Number.isFinite(rawDuration) && rawDuration > 0 ? rawDuration : srcDur > 0 ? Math.max(0, (srcDur - mediaStart) / playbackRate) : Number.POSITIVE_INFINITY;
+              const relTime = (t3 - start) * playbackRate + mediaStart;
+              const activeNow = t3 >= start && t3 < start + duration2 && relTime >= 0 && !!v.id;
+              return {
+                id: v.id,
+                src: v.currentSrc || v.src,
+                relTime,
+                active: activeNow
+              };
+            }).filter((entry) => entry.active && entry.src);
+          }, time);
+          const updates = [];
+          for (const v of active) {
+            let filePath = null;
+            try {
+              const url = new URL(v.src);
+              const decodedPath = decodeURIComponent(url.pathname).replace(/^\//, "");
+              const candidate = resolve32(projectDir, decodedPath);
+              const rel = relative4(projectDir, candidate);
+              if (!rel.startsWith("..") && !isAbsolute4(rel) && existsSync45(candidate)) {
+                filePath = candidate;
+              }
+            } catch {
+            }
+            if (!filePath) continue;
+            const png = await extractVideoFrameToBuffer(filePath, Math.max(0, v.relTime));
+            if (!png) continue;
+            updates.push({
+              videoId: v.id,
+              dataUri: `data:image/png;base64,${png.toString("base64")}`
+            });
+          }
+          try {
+            if (updates.length > 0) {
+              await injectVideoFramesBatch2(page, updates);
+            }
+            await syncVideoFrameVisibility2(
+              page,
+              active.map((a) => a.id)
+            );
+          } catch {
+          }
+        }
         const timeLabel = opts.at?.length ? `${time.toFixed(1)}s` : `${Math.round(time / duration * 100)}pct`;
         const filename = `frame-${String(i2).padStart(2, "0")}-at-${timeLabel}.png`;
         const framePath = join45(snapshotDir, filename);
@@ -34290,7 +34402,7 @@ async function captureSnapshots(projectDir, opts) {
   }
   return savedPaths;
 }
-var __filename2, __dirname3, examples18, snapshot_default;
+var __filename2, __dirname3, FFMPEG_EXTRACT_TIMEOUT_MS, examples18, snapshot_default;
 var init_snapshot = __esm({
   "src/commands/snapshot.ts"() {
     "use strict";
@@ -34299,6 +34411,7 @@ var init_snapshot = __esm({
     init_colors();
     __filename2 = fileURLToPath8(import.meta.url);
     __dirname3 = dirname20(__filename2);
+    FFMPEG_EXTRACT_TIMEOUT_MS = 3e4;
     examples18 = [
       ["Capture 5 key frames from a composition", "snapshot captures/stripe"],
       ["Capture 10 evenly-spaced frames", "snapshot captures/stripe --frames 10"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperframes",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
   "repository": {
     "type": "git",