Add support for prefers-reduced-motion

Author: strange-v

README.md

@@ -57,6 +57,7 @@ services:
       WS_PORT: 8081
       DEBUG_PORT: 9221 # internal debug port
       HEALTH_PORT: 18080
+      PREFERS_REDUCED_MOTION: false
       USER_DATA_DIR: /pw-data
     ports:
       - "8081:8081"                   # WebSocket stream

docker-compose.rwv.yml

@@ -18,6 +18,7 @@ services:
       WS_PORT: 8081
       DEBUG_PORT: 9221 # internal debug port
       HEALTH_PORT: 18080
+      PREFERS_REDUCED_MOTION: true
       USER_DATA_DIR: /pw-data
     ports:
       - "8081:8081"

dockerfile

@@ -1,8 +1,8 @@
 FROM mcr.microsoft.com/playwright:v1.55.0-jammy AS deps
 WORKDIR /app
 ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 \
-  PLAYWRIGHT_BROWSERS_PATH=/ms-playwright \
-  NODE_OPTIONS="--unhandled-rejections=strict"
+    PLAYWRIGHT_BROWSERS_PATH=/ms-playwright \
+    NODE_OPTIONS="--unhandled-rejections=strict"
 COPY package.json package-lock.json ./
 RUN npm ci --no-audit --no-fund
 
@@ -15,15 +15,12 @@ FROM build AS prod-deps
 RUN npm prune --omit=dev
 
 FROM mcr.microsoft.com/playwright:v1.55.0-jammy AS runner
-ENV NODE_ENV=production
 WORKDIR /app
-
-# USER pwuser
-
+ENV NODE_ENV=production \
+    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 \
+    PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 COPY --from=prod-deps /app/node_modules ./node_modules
 COPY --from=build /app/dist ./dist
 COPY self-test ./self-test
-
 EXPOSE 8080 8081 9221
 CMD ["node", "dist/index.js"]
-

src/antiAnim.ts

@@ -3,6 +3,7 @@ import { chromium } from 'playwright-core';
 import { initCdpRootAsync, waitForCdpReadyAsync } from './cdpRoot.js';
 
 const DEBUG_PORT = +(process.env.DEBUG_PORT || 9221);
+const PREFERS_REDUCED_MOTION = /^(1|true|yes|on)$/i.test(process.env.PREFERS_REDUCED_MOTION ?? '');
 const USER_DATA_DIR = process.env.USER_DATA_DIR || (process.platform === 'win32'
   ? 'C:\\Temp\\remotewebview-profile'
   : '/var/temp/remotewebview-profile');
@@ -22,15 +23,20 @@ async function startHeadlessIfNeededAsync(): Promise<void> {
   if (info?.webSocketDebuggerUrl) return;
 
   await mkdir(USER_DATA_DIR, { recursive: true });
+  const args = [
+    `--remote-debugging-port=${DEBUG_PORT}`,
+    '--no-sandbox',
+    '--force-device-scale-factor=1',
+    '--headless=new',
+    ...(PREFERS_REDUCED_MOTION ? ['--force-prefers-reduced-motion'] : []),
+  ];
+
+  if (PREFERS_REDUCED_MOTION)
+    console.log('[browser] Launching with prefers-reduced-motion');
 
   await chromium.launchPersistentContext(USER_DATA_DIR, {
     headless: true,
-    args: [
-      `--remote-debugging-port=${DEBUG_PORT}`,
-      '--no-sandbox',
-      '--force-device-scale-factor=1',
-      '--headless=new',
-    ],
+    args,
   });
 
   const t0 = Date.now();

src/browser.ts

@@ -4,7 +4,6 @@ import { DeviceConfig, deviceConfigsEqual } from "./config.js";
 import { getRoot } from "./cdpRoot.js";
 import { FrameProcessor } from "./frameProcessor.js";
 import { DeviceBroadcaster } from "./broadcaster.js";
-import { installAntiAnimCSSAsync } from "./antiAnim.js";
 import { hash32 } from "./util.js";
 import { SelfTestRunner } from "./selfTest.js";
 
@@ -26,6 +25,8 @@ export type DeviceSession = {
   lastProcessedMs?: number;
 };
 
+const PREFERS_REDUCED_MOTION = /^(1|true|yes|on)$/i.test(process.env.PREFERS_REDUCED_MOTION ?? '');
+
 const devices = new Map<string, DeviceSession>();
 let _cleanupRunning = false;
 export const broadcaster = new DeviceBroadcaster();
@@ -65,7 +66,12 @@ export async function ensureDeviceAsync(id: string, cfg: DeviceConfig): Promise<
     deviceScaleFactor: 1,
     mobile: true
   });
-  await installAntiAnimCSSAsync(session);
+  if (PREFERS_REDUCED_MOTION) {
+    await session.send('Emulation.setEmulatedMedia', {
+      media: 'screen',
+      features: [{ name: 'prefers-reduced-motion', value: 'reduce' }],
+    });
+  }
 
   await session.send('Page.startScreencast', {
     format: 'png',