import { chromium } from 'playwright';
import { rename } from 'fs/promises';

const [html, out, secs] = process.argv.slice(2);
const dur = parseFloat(secs || '13') * 1000;

const b = await chromium.launch();
const ctx = await b.newContext({
  viewport: { width: 1080, height: 1920 },
  recordVideo: { dir: '/tmp/pw-video', size: { width: 1080, height: 1920 } },
});
// Freeze every CSS animation from the very first paint so the timeline
// cannot advance while the web fonts are still loading.
await ctx.addInitScript(() => {
  const s = document.createElement('style');
  s.id = '__pause';
  s.textContent = '*{animation-play-state:paused !important}';
  document.documentElement.appendChild(s);
});
const page = await ctx.newPage();
await page.goto('file://' + html);
await page.evaluate(() => document.fonts.ready);
await page.waitForTimeout(300);
// Release: all animations now start together from 0%.
await page.evaluate(() => { const s = document.getElementById('__pause'); if (s) s.remove(); });
await page.waitForTimeout(dur);
const video = page.video();
await ctx.close();
await b.close();
const p = await video.path();
await rename(p, out);
console.log('saved', out);
