clipwise 0.10.0 → 0.10.1

package/dist/cli/index.js

@@ -3978,6 +3978,7 @@ __export(runner_exports, {
 });
 import { chromium as chromium2 } from "playwright";
 import { createServer } from "http";
+import { createHash } from "crypto";
 import { execSync } from "child_process";
 import { readFile as readFile4, writeFile as writeFile2, mkdtemp, rm as rm2 } from "fs/promises";
 import { existsSync as existsSync2 } from "fs";
@@ -4119,21 +4120,21 @@ async function recordFootageTake(scenario, scene, selectors) {
   const recorder = new ClipwiseRecorder();
   const session = await recorder.record(takeScenario);
   const renderer = new CanvasRenderer(takeScenario.effects, segmentOutput(scenario), scene.steps);
-  const composed = [];
-  for await (const f of renderer.composeStream(session.frames)) composed.push(f);
-  const frames = await Promise.all(
-    composed.map(
-      (f) => f.rawInfo ? sharp10(f.buffer, {
-        raw: { width: f.rawInfo.width, height: f.rawInfo.height, channels: f.rawInfo.channels }
-      }).png().toBuffer() : Promise.resolve(f.buffer)
-    )
-  );
+  const framesDir = await mkdtemp(join2(tmpdir2(), `clipwise-footage-${scene.id}-`));
+  let count = 0;
+  for await (const f of renderer.composeStream(session.frames)) {
+    const png = f.rawInfo ? await sharp10(f.buffer, {
+      raw: { width: f.rawInfo.width, height: f.rawInfo.height, channels: f.rawInfo.channels }
+    }).png().toBuffer() : f.buffer;
+    await writeFile2(join2(framesDir, `${count}.png`), png);
+    count++;
+  }
   const anchors = [];
   for (let k = 0; k < scene.steps.length; k++) {
     const idx = session.frames.findIndex((f) => (f.stepIndex ?? 0) >= k);
     anchors.push(Math.max(0, idx) / scenario.output.fps);
   }
-  return { frames, anchors, boxes };
+  return { framesDir, count, anchors, boxes };
 }
 function fitCardW(cw, ch, maxW = 940, maxH = 540) {
   return Math.round(Math.min(maxW, maxH * cw / ch));
@@ -4193,7 +4194,7 @@ function vignetteProps(scene, take, serverBase, scenario, brand, durMs) {
     label: scene.label ?? "",
     caption: scene.caption ?? "",
     base: serverBase,
-    count: take.frames.length,
+    count: take.count,
     fps: scenario.output.fps,
     start,
     rate: scene.rate,
@@ -4251,9 +4252,14 @@ async function renderScenesTimeline(scenario, scenarioDir, onProgress) {
     const m = req.url?.match(/^\/([\w-]+)\/(\d+)\.png$/);
     const take = m ? takes.get(m[1]) : void 0;
     if (take) {
-      const idx = Math.min(take.frames.length - 1, parseInt(m[2], 10));
-      res.writeHead(200, { "content-type": "image/png", "cache-control": "max-age=3600" });
-      res.end(take.frames[idx]);
+      const idx = Math.min(take.count - 1, parseInt(m[2], 10));
+      readFile4(join2(take.framesDir, `${idx}.png`)).then((png) => {
+        res.writeHead(200, { "content-type": "image/png", "cache-control": "max-age=3600" });
+        res.end(png);
+      }).catch(() => {
+        res.writeHead(404);
+        res.end();
+      });
     } else {
       res.writeHead(404);
       res.end();
@@ -4311,24 +4317,37 @@ async function renderScenesTimeline(scenario, scenarioDir, onProgress) {
   const outPath = join2(tmp, "timeline.mp4");
   let audioInput = "";
   let audioMap = "";
+  const totalSec = totalMs / 1e3;
   if (scenario.audio) {
     const a = scenario.audio;
-    const audioPath = isAbsolute2(a.file) ? a.file : resolve2(scenarioDir, a.file);
-    const totalSec = totalMs / 1e3;
+    let audioPath;
+    if (/^https?:\/\//.test(a.file)) {
+      const hash = createHash("sha256").update(a.file).digest("hex").slice(0, 16);
+      audioPath = join2(tmpdir2(), `clipwise-audio-${hash}${a.file.match(/\.\w{2,4}$/)?.[0] ?? ".mp3"}`);
+      if (!existsSync2(audioPath)) {
+        execSync(`curl -sL -o "${audioPath}" "${a.file}"`, { stdio: ["ignore", "ignore", "pipe"] });
+      }
+    } else {
+      audioPath = isAbsolute2(a.file) ? a.file : resolve2(scenarioDir, a.file);
+    }
     const af = [];
     if (a.volume !== 1) af.push(`volume=${a.volume}`);
     if (a.fadeIn > 0) af.push(`afade=t=in:d=${a.fadeIn / 1e3}`);
     if (a.fadeOut > 0) af.push(`afade=t=out:st=${Math.max(0, totalSec - a.fadeOut / 1e3)}:d=${a.fadeOut / 1e3}`);
-    audioInput = `-i "${audioPath}" `;
-    audioMap = `-map ${segments.length}:a ${af.length ? `-af "${af.join(",")}" ` : ""}-c:a aac -b:a 192k -shortest `;
+    audioInput = `-stream_loop -1 -i "${audioPath}" `;
+    audioMap = `-map ${segments.length}:a ${af.length ? `-af "${af.join(",")}" ` : ""}-c:a aac -b:a 192k `;
   }
   execSync(
-    `ffmpeg -y ${segments.map((s) => `-i "${s.path}"`).join(" ")} ${audioInput}-filter_complex "${filters};${concatInputs}concat=n=${segments.length}:v=1:a=0[v]" -map "[v]" ${audioMap}-c:v libx264 -crf 16 -preset slow -movflags +faststart "${outPath}"`,
+    `ffmpeg -y ${segments.map((s) => `-i "${s.path}"`).join(" ")} ${audioInput}-filter_complex "${filters};${concatInputs}concat=n=${segments.length}:v=1:a=0[v]" -map "[v]" ${audioMap}-t ${totalSec.toFixed(3)} -c:v libx264 -crf 16 -preset slow -movflags +faststart "${outPath}"`,
     { stdio: ["ignore", "ignore", "pipe"] }
   );
   const buffer = await readFile4(outPath);
   await rm2(tmp, { recursive: true, force: true }).catch(() => {
   });
+  for (const take of takes.values()) {
+    await rm2(take.framesDir, { recursive: true, force: true }).catch(() => {
+    });
+  }
   return buffer;
 }
 var init_runner = __esm({
@@ -4566,7 +4585,7 @@ import { homedir } from "os";
 var program = new Command();
 program.name("clipwise").description(
   "Playwright-based cinematic screen recorder for product demos"
-).version("0.10.0");
+).version("0.10.1");
 program.command("record").description("Record a demo from a YAML scenario file").argument("<scenario>", "Path to YAML scenario file").option("-o, --output <dir>", "Output directory (default: scenario outputDir or .clipwise/output)").option(
   "-f, --format <format>",
   "Output format (gif|mp4|png-sequence)"

package/dist/index.js

@@ -3524,6 +3524,7 @@ var StreamingSession = class extends EventEmitter {
 // src/scenes/runner.ts
 import { chromium as chromium2 } from "playwright";
 import { createServer } from "http";
+import { createHash } from "crypto";
 import { execSync } from "child_process";
 import { readFile as readFile3, writeFile as writeFile2, mkdtemp, rm as rm2 } from "fs/promises";
 import { existsSync as existsSync2 } from "fs";
@@ -3665,21 +3666,21 @@ async function recordFootageTake(scenario, scene, selectors) {
   const recorder = new ClipwiseRecorder();
   const session = await recorder.record(takeScenario);
   const renderer = new CanvasRenderer(takeScenario.effects, segmentOutput(scenario), scene.steps);
-  const composed = [];
-  for await (const f of renderer.composeStream(session.frames)) composed.push(f);
-  const frames = await Promise.all(
-    composed.map(
-      (f) => f.rawInfo ? sharp10(f.buffer, {
-        raw: { width: f.rawInfo.width, height: f.rawInfo.height, channels: f.rawInfo.channels }
-      }).png().toBuffer() : Promise.resolve(f.buffer)
-    )
-  );
+  const framesDir = await mkdtemp(join2(tmpdir2(), `clipwise-footage-${scene.id}-`));
+  let count = 0;
+  for await (const f of renderer.composeStream(session.frames)) {
+    const png = f.rawInfo ? await sharp10(f.buffer, {
+      raw: { width: f.rawInfo.width, height: f.rawInfo.height, channels: f.rawInfo.channels }
+    }).png().toBuffer() : f.buffer;
+    await writeFile2(join2(framesDir, `${count}.png`), png);
+    count++;
+  }
   const anchors = [];
   for (let k = 0; k < scene.steps.length; k++) {
     const idx = session.frames.findIndex((f) => (f.stepIndex ?? 0) >= k);
     anchors.push(Math.max(0, idx) / scenario.output.fps);
   }
-  return { frames, anchors, boxes };
+  return { framesDir, count, anchors, boxes };
 }
 function fitCardW(cw, ch, maxW = 940, maxH = 540) {
   return Math.round(Math.min(maxW, maxH * cw / ch));
@@ -3739,7 +3740,7 @@ function vignetteProps(scene, take, serverBase, scenario, brand, durMs) {
     label: scene.label ?? "",
     caption: scene.caption ?? "",
     base: serverBase,
-    count: take.frames.length,
+    count: take.count,
     fps: scenario.output.fps,
     start,
     rate: scene.rate,
@@ -3797,9 +3798,14 @@ async function renderScenesTimeline(scenario, scenarioDir, onProgress) {
     const m = req.url?.match(/^\/([\w-]+)\/(\d+)\.png$/);
     const take = m ? takes.get(m[1]) : void 0;
     if (take) {
-      const idx = Math.min(take.frames.length - 1, parseInt(m[2], 10));
-      res.writeHead(200, { "content-type": "image/png", "cache-control": "max-age=3600" });
-      res.end(take.frames[idx]);
+      const idx = Math.min(take.count - 1, parseInt(m[2], 10));
+      readFile3(join2(take.framesDir, `${idx}.png`)).then((png) => {
+        res.writeHead(200, { "content-type": "image/png", "cache-control": "max-age=3600" });
+        res.end(png);
+      }).catch(() => {
+        res.writeHead(404);
+        res.end();
+      });
     } else {
       res.writeHead(404);
       res.end();
@@ -3857,24 +3863,37 @@ async function renderScenesTimeline(scenario, scenarioDir, onProgress) {
   const outPath = join2(tmp, "timeline.mp4");
   let audioInput = "";
   let audioMap = "";
+  const totalSec = totalMs / 1e3;
   if (scenario.audio) {
     const a = scenario.audio;
-    const audioPath = isAbsolute(a.file) ? a.file : resolve(scenarioDir, a.file);
-    const totalSec = totalMs / 1e3;
+    let audioPath;
+    if (/^https?:\/\//.test(a.file)) {
+      const hash = createHash("sha256").update(a.file).digest("hex").slice(0, 16);
+      audioPath = join2(tmpdir2(), `clipwise-audio-${hash}${a.file.match(/\.\w{2,4}$/)?.[0] ?? ".mp3"}`);
+      if (!existsSync2(audioPath)) {
+        execSync(`curl -sL -o "${audioPath}" "${a.file}"`, { stdio: ["ignore", "ignore", "pipe"] });
+      }
+    } else {
+      audioPath = isAbsolute(a.file) ? a.file : resolve(scenarioDir, a.file);
+    }
     const af = [];
     if (a.volume !== 1) af.push(`volume=${a.volume}`);
     if (a.fadeIn > 0) af.push(`afade=t=in:d=${a.fadeIn / 1e3}`);
     if (a.fadeOut > 0) af.push(`afade=t=out:st=${Math.max(0, totalSec - a.fadeOut / 1e3)}:d=${a.fadeOut / 1e3}`);
-    audioInput = `-i "${audioPath}" `;
-    audioMap = `-map ${segments.length}:a ${af.length ? `-af "${af.join(",")}" ` : ""}-c:a aac -b:a 192k -shortest `;
+    audioInput = `-stream_loop -1 -i "${audioPath}" `;
+    audioMap = `-map ${segments.length}:a ${af.length ? `-af "${af.join(",")}" ` : ""}-c:a aac -b:a 192k `;
   }
   execSync(
-    `ffmpeg -y ${segments.map((s) => `-i "${s.path}"`).join(" ")} ${audioInput}-filter_complex "${filters};${concatInputs}concat=n=${segments.length}:v=1:a=0[v]" -map "[v]" ${audioMap}-c:v libx264 -crf 16 -preset slow -movflags +faststart "${outPath}"`,
+    `ffmpeg -y ${segments.map((s) => `-i "${s.path}"`).join(" ")} ${audioInput}-filter_complex "${filters};${concatInputs}concat=n=${segments.length}:v=1:a=0[v]" -map "[v]" ${audioMap}-t ${totalSec.toFixed(3)} -c:v libx264 -crf 16 -preset slow -movflags +faststart "${outPath}"`,
     { stdio: ["ignore", "ignore", "pipe"] }
   );
   const buffer = await readFile3(outPath);
   await rm2(tmp, { recursive: true, force: true }).catch(() => {
   });
+  for (const take of takes.values()) {
+    await rm2(take.framesDir, { recursive: true, force: true }).catch(() => {
+    });
+  }
   return buffer;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipwise",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Scriptable cinematic screen recorder for product demos — YAML in, polished MP4 out",
   "type": "module",
   "main": "dist/index.js",

package/skills/clipwise.md

@@ -400,7 +400,10 @@ scenes:
 7. **Sensitive data**: `prepare.mask: [".email", ".amount"]` blurs elements at record time
    (follows scrolling — never ask the user to fake their data)
 8. **Music**: `audio: { file: bgm.mp3, bpm: 122, fadeOut: 1500 }` muxes BGM into the final
-   video AND snaps every scene cut onto the beat grid (beat-synced cuts)
+   video AND snaps every scene cut onto the beat grid (beat-synced cuts).
+   `file:` also accepts a URL (downloaded+cached on the user's machine — use license-free
+   sources like Mixkit, e.g. `https://assets.mixkit.co/music/132/132.mp3`, ~120bpm).
+   Track shorter than the video loops automatically; video length is always authoritative
 
 ## Critical Rules