@t3lnet/sceneforge 1.0.21 → 1.0.22

package/cli/commands/record-demo.js

@@ -212,33 +212,19 @@ export async function runRecordDemoCommand(argv) {
   await ensureDir(outputPaths.outputDir);
   await ensureDir(outputPaths.videosDir);
 
-  const requestedViewport = parseViewportArgs(args, getFlagValue);
+  const viewport = 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: requestedViewport.width,
-    height: requestedViewport.height,
-  };
+  // To achieve "zoom", we use CSS zoom to make content appear larger.
+  // The viewport stays at the requested size, and we inject CSS zoom after page load.
+  // Example: --viewport 4k --zoom 200 means:
+  //   - Viewport is 3840x2160 (4K)
+  //   - CSS zoom: 2 makes content appear 2x larger
+  //   - User sees the equivalent of 1920x1080 content filling the 4K frame
 
   // 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}`);
+    console.log(`[record] Viewport: ${viewport.width}x${viewport.height} with ${Math.round(zoomFactor * 100)}% CSS zoom`);
   } else {
     console.log(`[record] Viewport: ${viewport.width}x${viewport.height}`);
   }
@@ -255,9 +241,7 @@ export async function runRecordDemoCommand(argv) {
 
   const context = await browser.newContext({
     viewport,
-    // 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 },
+    recordVideo: noVideo ? undefined : { dir: recordDir, size: viewport },
     storageState: storageState ? toAbsolute(rootDir, storageState) : undefined,
     locale: locale || undefined,
     extraHTTPHeaders: locale
@@ -268,12 +252,32 @@ export async function runRecordDemoCommand(argv) {
   });
 
   const page = await context.newPage();
+
+  // Apply CSS zoom if requested (must be done before navigation to affect all content)
+  if (zoomFactor !== 1) {
+    await page.addInitScript((zoom) => {
+      document.addEventListener('DOMContentLoaded', () => {
+        document.documentElement.style.zoom = String(zoom);
+      });
+      // Also set immediately in case DOMContentLoaded already fired
+      if (document.documentElement) {
+        document.documentElement.style.zoom = String(zoom);
+      }
+    }, zoomFactor);
+  }
+
   const video = page.video();
   const videoRecordingStartTime = Date.now();
   const startUrl = resolveStartUrl(startPath, baseUrl);
 
   if (startUrl) {
     await page.goto(startUrl, { waitUntil: "networkidle" });
+    // Ensure zoom is applied after navigation
+    if (zoomFactor !== 1) {
+      await page.evaluate((zoom) => {
+        document.documentElement.style.zoom = String(zoom);
+      }, zoomFactor);
+    }
   }
   const result = await runDemo(
     definition,

package/package.json

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