@t3lnet/sceneforge 1.0.19 → 1.0.20

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.19",
+  "version": "1.0.20",
   "description": "SceneForge runner and generation utilities for YAML-driven demos",
   "license": "MIT",
   "author": "T3LNET",