@t3lnet/sceneforge 1.0.18 → 1.0.20

package/cli/commands/concat-final-videos.js

@@ -111,8 +111,10 @@ async function buildConcatWithIntroOutro(stepFiles, demoDir, introPath, outroPat
 
   const concatInputs = inputPaths.map(({ index }) => `[${index}:v:0][${index}:a:0]`).join("");
   const scaleFilter = buildScaleFilter(outputDimensions);
-  const scaleChain = scaleFilter ? `,${scaleFilter}` : "";
-  const filterGraph = `${concatInputs}concat=n=${inputPaths.length}:v=1:a=1${scaleChain}[outv][outa]`;
+  // If scaling, we need to output concat to temp labels, then apply scale to video only
+  const filterGraph = scaleFilter
+    ? `${concatInputs}concat=n=${inputPaths.length}:v=1:a=1[tmpv][outa];[tmpv]${scaleFilter}[outv]`
+    : `${concatInputs}concat=n=${inputPaths.length}:v=1:a=1[outv][outa]`;
   const encodingArgs = getVideoEncodingArgs(qualityOptions);
 
   await runFFmpeg([
@@ -337,8 +339,10 @@ async function concatDemo(demoName, paths, options = {}) {
       const inputArgs = stepFiles.flatMap((file) => ["-i", path.join(demoDir, file)]);
       const concatInputs = stepFiles.map((_, index) => `[${index}:v:0][${index}:a:0]`).join("");
       const scaleFilter = buildScaleFilter(outputDimensions);
-      const scaleChain = scaleFilter ? `,${scaleFilter}` : "";
-      const filterGraph = `${concatInputs}concat=n=${stepFiles.length}:v=1:a=1${scaleChain}[outv][outa]`;
+      // If scaling, we need to output concat to temp labels, then apply scale to video only
+      const filterGraph = scaleFilter
+        ? `${concatInputs}concat=n=${stepFiles.length}:v=1:a=1[tmpv][outa];[tmpv]${scaleFilter}[outv]`
+        : `${concatInputs}concat=n=${stepFiles.length}:v=1:a=1[outv][outa]`;
       const encodingArgs = getVideoEncodingArgs(qualityOptions);
 
       await runFFmpeg([

package/cli/commands/record-demo.js

@@ -19,7 +19,6 @@ import {
   parseViewportArgs,
   parseDeviceScaleFactor,
   getViewportHelpText,
-  logViewportSettings,
 } from "../utils/dimensions.js";
 
 function printHelp() {
@@ -213,17 +212,37 @@ export async function runRecordDemoCommand(argv) {
   await ensureDir(outputPaths.outputDir);
   await ensureDir(outputPaths.videosDir);
 
-  const viewport = parseViewportArgs(args, getFlagValue);
-  const deviceScaleFactor = parseDeviceScaleFactor(args, getFlagValue);
-
-  logViewportSettings(viewport, deviceScaleFactor, "[record]");
-
-  // Calculate video recording size (viewport * scale factor for high-DPI capture)
+  const requestedViewport = parseViewportArgs(args, getFlagValue);
+  const zoomFactor = parseDeviceScaleFactor(args, getFlagValue);
+
+  // To achieve "zoom", we use a smaller viewport but record at the requested resolution.
+  // This makes content appear larger (zoomed in) in the final video.
+  // Example: --viewport 1080p --zoom 150 means:
+  //   - User wants 1920x1080 output video
+  //   - Content should appear 1.5x larger (zoomed)
+  //   - So we set viewport to 1280x720 (1920/1.5 x 1080/1.5)
+  //   - Record at 1920x1080
+  const viewport = zoomFactor !== 1
+    ? {
+        width: Math.round(requestedViewport.width / zoomFactor),
+        height: Math.round(requestedViewport.height / zoomFactor),
+      }
+    : requestedViewport;
+
+  // Recording size is the requested viewport (the final video dimensions)
   const recordVideoSize = {
-    width: Math.round(viewport.width * deviceScaleFactor),
-    height: Math.round(viewport.height * deviceScaleFactor),
+    width: requestedViewport.width,
+    height: requestedViewport.height,
   };
 
+  // Log what's happening
+  if (zoomFactor !== 1) {
+    console.log(`[record] Viewport: ${viewport.width}x${viewport.height} (zoomed ${Math.round(zoomFactor * 100)}%)`);
+    console.log(`[record] Output video: ${recordVideoSize.width}x${recordVideoSize.height}`);
+  } else {
+    console.log(`[record] Viewport: ${viewport.width}x${viewport.height}`);
+  }
+
   const recordDir = path.join(outputPaths.videosDir, ".recordings", definition.name);
   if (!noVideo) {
     await ensureDir(recordDir);
@@ -236,7 +255,8 @@ export async function runRecordDemoCommand(argv) {
 
   const context = await browser.newContext({
     viewport,
-    deviceScaleFactor,
+    // Note: we achieve "zoom" by using a smaller viewport, not deviceScaleFactor
+    // deviceScaleFactor only affects pixel density, not content size
     recordVideo: noVideo ? undefined : { dir: recordDir, size: recordVideoSize },
     storageState: storageState ? toAbsolute(rootDir, storageState) : undefined,
     locale: locale || undefined,

package/cli/utils/dimensions.js

@@ -188,13 +188,15 @@ export function getScaleFilterArgs(dimensions) {
 export function getViewportHelpText() {
   return `
 Viewport Options (Recording):
-  --viewport <WxH|preset>  Browser viewport size (default: 1440x900)
+  --viewport <WxH|preset>  Target video resolution (default: 1440x900)
                            Presets: 720p, 1080p, 1440p, 4k
                            Example: --viewport 1920x1080 or --viewport 1080p
-  --width <px>             Viewport width (overrides --viewport)
-  --height <px>            Viewport height (overrides --viewport)
-  --zoom <percent>         Browser zoom level: 100, 150, 200 (default: 100)
-  --device-scale-factor <n> Device pixel ratio: 1, 1.5, 2 (alternative to --zoom)`;
+  --width <px>             Video width (overrides --viewport)
+  --height <px>            Video height (overrides --viewport)
+  --zoom <percent>         Content zoom level: 100, 150, 200 (default: 100)
+                           Makes UI elements appear larger in the video
+                           Example: --viewport 1080p --zoom 150 records at
+                           1920x1080 with content appearing 1.5x larger`;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t3lnet/sceneforge",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "SceneForge runner and generation utilities for YAML-driven demos",
   "license": "MIT",
   "author": "T3LNET",