Initial commit 🚀

scripts/hero-video-test.mjs

@@ -0,0 +1,39 @@
+import { chromium } from 'playwright';
+/* Checks the hero video: does it load and play, is it gated off on phones and under reduced
+   motion, and does the hero fill the viewport. */
+const [,, url, prefix] = process.argv;
+const browser = await chromium.launch();
+
+async function probe(label, opts, shots = []) {
+  const ctx = await browser.newContext(opts);
+  const page = await ctx.newPage();
+  const requested = [];
+  page.on('request', (r) => { if (/\.(mp4|webm)$/.test(r.url())) requested.push(r.url().split('/').pop()); });
+  await page.goto(url, { waitUntil: 'networkidle' });
+  await page.waitForTimeout(2500);
+  const info = await page.evaluate(() => {
+    const v = document.querySelector('video');
+    const hero = document.querySelector('.hero');
+    return {
+      hasVideo: !!v,
+      ready: v?.hasAttribute('data-ready') ?? null,
+      paused: v?.paused ?? null,
+      currentTime: v ? Math.round(v.currentTime * 10) / 10 : null,
+      videoSize: v ? `${v.videoWidth}x${v.videoHeight}` : null,
+      heroHeight: Math.round(hero.getBoundingClientRect().height),
+      viewport: window.innerHeight,
+      headerH: Math.round(document.querySelector('header').getBoundingClientRect().height),
+    };
+  });
+  for (const t of shots) {
+    await page.waitForTimeout(t);
+    await page.screenshot({ path: `${prefix}-${label}-${t}.png` });
+  }
+  console.log(label, JSON.stringify({ ...info, requested }));
+  await ctx.close();
+}
+
+await probe('desktop', { viewport: { width: 1440, height: 900 } }, [0, 2500]);
+await probe('mobile', { viewport: { width: 390, height: 844 } });
+await probe('reduced', { viewport: { width: 1440, height: 900 }, reducedMotion: 'reduce' });
+await browser.close();