Separate width, height, and scale between screenshot and screencast

Author: yuanchuan

lib/handler.js

@@ -17,17 +17,18 @@ export async function handleRender(source, options) {
     options.type = type;
     options.delay = readTime(options.delay, { max: 30 * 1000 }) || 0;
     options.time = readTime(options.time, { max: 60 * 1000 }) || 0;
-    options.scale = Number(options.scale) || (options.time ? 1 : 2);
     options.selector ??= 'css-doodle';
 
-    options.windowWidth = 1600;
-    options.windowHeight = 900;
     if (options.windowSize) {
         const [w, h = w] = options.windowSize.split(/[,x]/);
         options.windowWidth = Number(w);
         options.windowHeight = Number(h);
     }
 
+    if (options.scale) {
+        options.scale = Number(options.scale);
+    }
+
     if (/\.(mp4|webm)$/.test(options.output) && !options.time) {
         options.time = 5 * 1000;
     }

lib/render/screencast.js

@@ -4,13 +4,20 @@ import { randomUUID } from 'node:crypto';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
+const defaultWindowWidth = 1200;
+const defaultWindowHeight = 900;
+const defaultScale = 1;
+
 export async function screencast(page, options) {
     const { scale, output, selector, windowWidth, windowHeight } = options;
+    const WIDTH = windowWidth || defaultWindowWidth;
+    const HEIGHT = windowHeight || defaultWindowHeight;
+    const SCALE = scale || defaultScale;
 
     await page.setViewport({
-        width: windowWidth,
-        height: windowHeight,
-        defaultScaleFactor: scale
+        width: WIDTH,
+        height: HEIGHT,
+        defaultScaleFactor: SCALE
     });
 
     const crop = await page.evaluate(selector => {

lib/render/screenshot.js

@@ -1,10 +1,17 @@
+const defaultWindowWidth = 1600;
+const defaultWindowHeight = 1200;
+const defaultScale = 2;
+
 export async function screenshot(page, options = {}) {
     const { scale, output, selector, windowWidth, windowHeight } = options;
+    const WIDTH = windowWidth || defaultWindowWidth;
+    const HEIGHT = windowHeight || defaultWindowHeight;
+    const SCALE = scale || defaultScale;
 
     await page.setViewport({
-        width: windowWidth,
-        height: windowHeight,
-        deviceScaleFactor: scale
+        width: WIDTH,
+        height: HEIGHT,
+        deviceScaleFactor: SCALE
     });
 
     const info = await page.evaluate(selector => {
@@ -27,9 +34,9 @@ export async function screenshot(page, options = {}) {
     }, selector);
 
     await page.setViewport({
-        width: Math.ceil(info.width) || windowWidth,
-        height: Math.ceil(info.height) || windowHeight,
-        deviceScaleFactor: scale
+        width: Math.ceil(info.width) || WIDTH,
+        height: Math.ceil(info.height) || HEIGHT,
+        deviceScaleFactor: SCALE
     });
 
     if (info.node) {