import {chromium} from 'playwright';
const b = await chromium.launch({channel: 'chrome'});
for (const vp of [{width: 1280, height: 900, tag: 'desktop'}, {width: 390, height: 780, tag: 'mobile'}]) {
  const p = await b.newPage({viewport: {width: vp.width, height: vp.height}, isMobile: vp.tag === 'mobile', hasTouch: vp.tag === 'mobile'});
  await p.goto('http://localhost/s/stay', {waitUntil: 'domcontentloaded'});
  await p.waitForTimeout(5000);
  await p.click('#w4d-toggle');
  await p.waitForTimeout(400);
  await p.click('.w4d-item');
  await p.waitForTimeout(1800);
  const r = await p.evaluate(() => {
    const panel = document.getElementById('w4d-panel');
    const box = panel.getBoundingClientRect();
    const rows = [...panel.querySelectorAll('.w4d-item')].map((el) => {
      const b = el.getBoundingClientRect();
      return {h: Math.round(b.height), title: el.querySelector('.w4d-t').textContent,
        sub: el.querySelector('.w4d-sub').textContent, time: el.querySelector('.w4d-time').textContent,
        playing: el.dataset.playing};
    });
    return {panel: {x: Math.round(box.x), w: Math.round(box.width), right: Math.round(window.innerWidth - box.right)},
      overflow: box.right > window.innerWidth || box.left < 0, rows};
  });
  console.log(vp.tag, JSON.stringify(r));
  await p.screenshot({path: `/tmp/p-${vp.tag}.png`, clip: {x: 0, y: 0, width: vp.width, height: Math.min(620, vp.height)}});
  await p.close();
}
await b.close();