Feed clips with a mouse: a big play/pause in the middle on hover that plays or pauses in place, a click on a playing clip pauses it (a paused one still opens the pager), and a tall clip is held to three quarters of a computer screen with its box narrowed to the clip's shapeHEADmaster

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4

1 files changed, 4 insertions, 0 deletions

diff --git a/tools/pager-caption-test.js b/tools/pager-caption-test.js
index 5952d81..50ffe4f 100644
--- a/tools/pager-caption-test.js
+++ b/tools/pager-caption-test.js
@@ -55,6 +55,8 @@ const openClip = async (word) => {
   await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); }, word);
   await sleep(400);
   const at = await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }, word);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   const opened = await waitFor(() => !!document.querySelector('.media-pager.videos .mp-slide'), null, 4000);
   // the caption and the counts show on a tap on the clip (details), as a reader sees them
@@ -72,6 +74,8 @@ const clickIn = async (sel, where) => {
     // the caption's first word sits at its left edge; a link in the middle
     return where === 'start' ? { x: r.left + 12, y: r.top + 9 } : { x: r.left + r.width / 2, y: r.top + r.height / 2 };
   }, ['(' + CAP + ')', sel, where]);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
 };
 const toFeed = async () => { await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click()); await waitFor(() => !!document.querySelector('.notes-feed video.note-video'), null, 8000); };