Media pager: a tap is a tap even if the finger moves a little, and a swipe has to mean it. Adam tapped a clip to pause it and it was taken for a swipe: the slides scrolled natively, and the browser takes a touch that moves a few pixels for a scroll — no click, so no pause — while a quick one flung the pager on to the next slide (reproduced: an 18px drift paged on). Holding the scroll back after the fact doesn't work (the fling comes after touchend), and stopping the first move stops the browser scrolling for the whole touch, so the pager now judges and moves touches itself: the slides hold still until a touch has gone 30px — short of that it's a tap, done here when the browser sent no click (a button under it is pressed), and a later click isn't counted twice — and past it they follow the finger the way it set off (up/down post to post, across within a post, snap off while dragging), going on to the next on letting go if the finger went a fifth of the screen or flicked (0.3 px/ms over at least 48px), else back. Touches on the seek bar, in an opened caption, or on a zoomed-in picture are left to those. And the arrow keys go to the slide or post next to the one on screen, by name, not "a screen further" — from a scroll still settling that landed short (quote-pager-test failed two runs in three). tools/pager-tap-slop-test.js (drifts of 18px and 14px and a quick 25px flick: taps — paused, played, not paged; a 320px swipe up and a 300px swipe down page; a slow 70px drag springs back; a quick 80px flick pages).

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

1 files changed, 129 insertions, 0 deletions

diff --git a/tools/pager-tap-slop-test.js b/tools/pager-tap-slop-test.js
new file mode 100644
index 0000000..c8d3609
--- /dev/null
+++ b/tools/pager-tap-slop-test.js
@@ -0,0 +1,129 @@
+// A tap on a clip in the pager is a tap even if the finger moves a little:
+// the browser takes a touch that moves a few pixels for a scroll (no click,
+// and a quick one could fling the pager on). A touch that travels less than
+// 30px pauses (or plays) the clip and leaves the pager where it was; only a
+// longer one pages.
+// Run: bun tools/pager-tap-slop-test.js
+import puppeteer from './puppeteer.js';
+import { cacheKeyFor } from '../src/wallet.js';
+import { generateSecretKey, getPublicKey, finalizeEvent } from 'nostr-tools/pure';
+import { buildHtml } from '../build.js';
+import { existsSync } from 'node:fs';
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+let ok = true;
+const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; };
+const clip = (name, size) => {
+  const f = '/tmp/coinos-vpager-' + name + '.webm';
+  if (!existsSync(f)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=' + size + ':rate=10', '-t', '30', '-c:v', 'libvpx', '-b:v', '100k', f]);
+  return f;
+};
+const CLIPS = { wide: clip('wide', '320x180'), tall: clip('tall', '180x320'), last: clip('last', '240x240') };
+
+const SK = generateSecretKey(), AUTHOR = getPublicKey(SK);
+const now = Math.floor(Date.now() / 1000);
+const post = (content, ago) => finalizeEvent({ kind: 1, created_at: now - ago, tags: [], content }, SK);
+const html = await buildHtml({ minify: true, pwa: false });
+const server = Bun.serve({ port: 0, fetch: (req) => {
+  const path = new URL(req.url).pathname;
+  const m = /^\/(wide|tall|last)\.webm$/.exec(path);
+  if (m) return new Response(Bun.file(CLIPS[m[1]]), { headers: { 'content-type': 'video/webm' } });
+  if (path.startsWith('/punks') || path === '/verify-worker.js') return new Response(Bun.file('dist' + path));
+  return new Response(html, { headers: { 'content-type': 'text/html' } });
+} });
+const U = (n) => server.url.origin + '/' + n + '.webm';
+const seeded = [
+  post('a wide one ' + U('wide'), 100),
+  post('a tall one ' + U('tall'), 200),
+  post('only words here, nothing to watch', 300),
+  post('the last clip ' + U('last'), 400),
+  ...Array.from({ length: 10 }, (_, i) => post('filler ' + i + ' ' + 'lorem ipsum dolor sit amet. '.repeat(5), 500 + i * 60)),
+];
+
+const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required'] });
+const page = await browser.newPage();
+await page.evaluateOnNewDocument(() => {
+  const Real = window.WebSocket;
+  window.WebSocket = function (...a) { const ws = new Real(...a); const send = ws.send.bind(ws); ws.send = (d) => { try { const m = JSON.parse(d); if (m[0] === 'REQ') { setTimeout(() => ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EOSE', m[1]]) })), 0); return; } if (m[0] === 'EVENT') return; } catch {} return send(d); }; return ws; };
+  window.WebSocket.prototype = Real.prototype; Object.assign(window.WebSocket, Real);
+  screen.orientation.lock = () => Promise.resolve(); screen.orientation.unlock = () => {};
+});
+const errs = [];
+page.on('pageerror', (e) => errs.push(String(e)));
+const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t);
+const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x)) return true; await sleep(250); } return false; };
+const waitFor = async (fn, arg, ms = 10000) => { for (let i = 0; i < ms / 100; i++) { if (await page.evaluate(fn, arg)) return true; await sleep(100); } return false; };
+const st = () => page.evaluate(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); const v = s && s.querySelector('video.mp-media'); return { on: s ? s.getAttribute('data-k').split('/').pop() : 'between', paused: v ? v.paused : null, show: !!document.querySelector('.media-pager.show') }; });
+// a touch from (x, y) that moves dy (and dx) over a few steps, quickly
+const drag = async (x, y, dx, dy, steps = 3) => {
+  await page.touchscreen.touchStart(x, y);
+  for (let i = 1; i <= steps; i++) { await page.touchscreen.touchMove(x + dx * i / steps, y + dy * i / steps); await sleep(16); }
+  await page.touchscreen.touchEnd();
+  await sleep(900);
+};
+try {
+  await page.setViewport({ width: 390, height: 844, hasTouch: true });
+  await page.goto(server.url.href, { waitUntil: 'domcontentloaded' });
+  await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
+  await page.reload({ waitUntil: 'domcontentloaded' }); await sleep(400);
+  await click('create a new wallet'); await sleep(600);
+  await page.waitForSelector('.words .w .t');
+  const mn = (await page.$$eval('.words .w .t', (l) => l.map((e) => e.textContent.trim()))).join(' ');
+  await click('skip verification');
+  await waitText('receive', 20000);
+  const base = cacheKeyFor(mn + '\n');
+  await page.evaluate(([k, pk, ns]) => {
+    localStorage.setItem(k + ':follows', JSON.stringify({ tags: [['p', pk]], c: '', at: Math.floor(Date.now() / 1000) }));
+    localStorage.setItem(k + ':feedNotes', JSON.stringify(ns));
+    localStorage.setItem(k + ':profiles', JSON.stringify({ [pk]: { name: 'Clip Poster', t: Date.now() } }));
+    localStorage.setItem('btc-wallet-feed:' + k, 'following');
+  }, [base, AUTHOR, seeded]);
+  await page.reload({ waitUntil: 'domcontentloaded' });
+  await waitText('receive', 20000);
+  await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click());
+  await page.waitForSelector('.notes-feed video.note-video', { timeout: 20000 });
+  await page.evaluate(() => [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a tall one')).querySelector('video.note-video').scrollIntoView({ block: 'center' }));
+  await sleep(1200);
+  const at = await page.evaluate(() => { const b = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a tall one')).querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
+  await page.touchscreen.tap(at.x, at.y);
+  check('the pager opens on the clip', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000));
+  await waitFor(() => { const v = document.querySelector('.media-pager video[src]'); return v && !v.paused && v.currentTime > 0.5; }, null, 8000);
+  await sleep(1000); // past the opening tap's own click
+  let s = await st();
+  check('it plays', s.on === 'tall.webm' && s.paused === false, JSON.stringify(s));
+
+  console.log('\n[a tap whose finger drifts]');
+  await drag(195, 420, 0, -18);
+  s = await st();
+  check('18px up: a tap — the clip pauses', s.paused === true, JSON.stringify(s));
+  check('…on the slide it was on', s.on === 'tall.webm', JSON.stringify(s));
+  await drag(195, 420, 6, 14);
+  s = await st();
+  check('14px down and a little across: a tap — it plays on, still there', s.paused === false && s.on === 'tall.webm', JSON.stringify(s));
+  await drag(195, 420, 0, -25, 1);
+  s = await st();
+  check('a quick 25px flick: still a tap — paused, not paged', s.paused === true && s.on === 'tall.webm', JSON.stringify(s));
+  await drag(195, 420, 0, 0, 1);
+  s = await st();
+  check('a still tap plays it again', s.paused === false && s.on === 'tall.webm', JSON.stringify(s));
+
+  console.log('\n[a swipe is still a swipe]');
+  await drag(195, 650, 0, -320, 8);
+  s = await st();
+  check('a 320px swipe up: the next post', s.on !== 'tall.webm' && s.on !== 'between', JSON.stringify(s));
+  const was = s.on;
+  await drag(195, 500, 0, 300, 8);
+  s = await st();
+  check('a 300px swipe down: back a post', s.on === 'tall.webm', JSON.stringify(s));
+  // a slow, short drag (past a tap, short of a fifth of the screen): back where it was
+  await page.touchscreen.touchStart(195, 500);
+  for (let i = 1; i <= 10; i++) { await page.touchscreen.touchMove(195, 500 - 7 * i); await sleep(60); }
+  await sleep(200); await page.touchscreen.touchEnd(); await sleep(900);
+  s = await st();
+  check('a slow 70px drag springs back', s.on === 'tall.webm', JSON.stringify(s));
+  await drag(195, 500, 0, -80, 2);
+  s = await st();
+  check('a quick 80px flick up: the next post', s.on === was, JSON.stringify(s));
+  check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
+} finally { await browser.close(); server.stop(true); }
+console.log(ok ? '\n✅ a little movement is still a tap' : '\n❌ failed');
+process.exit(ok ? 0 : 1);