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 shape

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

1 files changed, 19 insertions, 21 deletions

diff --git a/tools/video-tap-test.js b/tools/video-tap-test.js
index f82238b..50e5a69 100644
--- a/tools/video-tap-test.js
+++ b/tools/video-tap-test.js
@@ -1,8 +1,7 @@
-// Tapping a video: in the feed it opens the media pager (feed-video-pager-
-// test.js has the rest). In a thread, anywhere on the picture (not the
-// player's own play button or control bar) goes full screen — the corner
-// button is a reach on a phone. Full screen, a tap pauses a playing clip; a
-// tap on a paused one comes back out. Taps on the controls stay the player's.
+// Tapping a video: inline, a playing clip pauses. A paused one, in the feed,
+// and in a thread opens the media pager (feed-video-pager-test.js has the
+// rest). With a mouse the middle of the clip is a big play/pause button that
+// never goes full screen.
 // Run: bun tools/video-tap-test.js
 import puppeteer from './puppeteer.js';
 import { cacheKeyFor } from '../src/wallet.js';
@@ -69,8 +68,18 @@ try {
   for (let i = 0; i < 40 && (await st()).paused; i++) await sleep(250);
   check('the clip autoplays in the feed', !(await st()).paused);
 
+  // the hover button: pauses and plays in place
+  const pp = async () => { const b = await page.evaluate(() => { const r = document.querySelector('.notes-feed .note-video-box').getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; }); await page.mouse.move(b.x - 40, b.y); await page.mouse.move(b.x, b.y, { steps: 3 }); await sleep(250); if (!(await page.evaluate(() => getComputedStyle(document.querySelector('.notes-feed .vid-pp')).display === 'flex'))) check('a mouse over the clip brings up the middle button', false); await page.mouse.click(b.x, b.y); await sleep(700); };
+  check('no middle button until a mouse comes over the clip', await page.evaluate(() => getComputedStyle(document.querySelector('.notes-feed .vid-pp')).display === 'none'));
+  await pp();
+  check('the middle button pauses the clip in place', await page.evaluate(() => document.querySelector('video.note-video').paused && !document.querySelector('.media-pager') && !document.fullscreenElement));
+  check('...and shows play while paused', await page.evaluate(() => !document.querySelector('.vid-pp').classList.contains('playing')));
+  await pp();
+  check('the middle button plays it again, still inline', await page.evaluate(() => !document.querySelector('video.note-video').paused && !document.querySelector('.media-pager') && !document.fullscreenElement));
   await tap(0.2, 0.3);
-  check('in the feed, a tap opens the media pager', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
+  check('in the feed, a tap on a playing clip pauses it, no pager', await page.evaluate(() => document.querySelector('video.note-video').paused && !document.querySelector('.media-pager')));
+  await tap(0.2, 0.3);
+  check('a tap on the paused clip opens the media pager', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
   await page.keyboard.press('Escape'); await sleep(700);
   check('...which Escape closes', await page.evaluate(() => !document.querySelector('.media-pager') && !document.fullscreenElement));
   // the thread: the post's words open it
@@ -87,22 +96,11 @@ try {
   for (let i = 0; i < 40 && (await st()).paused; i++) await sleep(250);
   await tap(0.2, 0.3);
   let s = await st();
-  check('in a thread, a tap on the picture goes full screen', s.fs, JSON.stringify(s));
-  check('...and not the pager', await page.evaluate(() => !document.querySelector('.media-pager')));
-  await tap(0.25, 0.3);
-  s = await st();
-  check('full screen, a tap pauses the playing clip', s.fs && s.paused, JSON.stringify(s));
-  await tap(0.5, 0.5);
-  s = await st();
-  check('a tap on the paused clip\'s play button is left to the player', s.fs, JSON.stringify(s));
-  await page.evaluate(() => document.querySelector('.thread-card video.note-video').pause()); await sleep(300);
+  check('in a thread, a tap on the playing clip pauses it in place', !s.fs && s.paused, JSON.stringify(s));
   await tap(0.2, 0.3);
-  s = await st();
-  check('a tap elsewhere on the paused clip comes out of full screen', !s.fs, JSON.stringify(s));
-  await tap(0.3, 0.97);
-  s = await st();
-  check('a tap on the control bar stays the player\'s', !s.fs, JSON.stringify(s));
+  check('a tap on the paused clip opens the media pager there too', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
+  await page.keyboard.press('Escape'); await sleep(700);
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } finally { await browser.close(); server.stop(true); }
-console.log(ok ? '\n✅ video taps: full screen, pause, back out' : '\n❌ failed');
+console.log(ok ? '\n✅ video taps: pause in place, pager when paused, middle button' : '\n❌ failed');
 process.exit(ok ? 0 : 1);