The video pager's position counter shows while the pager moves and fades out a moment after it settles.

It comes back the moment the pager is in motion again — a finger on the slides, a glide, a flight — keyed off the same `moving` flag that hides the seek bar, and fades out 1.2 s after landing (the fade restarts on every stop). Opening the pager shows it briefly, then it fades. Picture pagers are unchanged. (Adam, 2026-10-17: "the video position counter should fade out once you've stopped scrolling and re-appear when you scroll again".)

tools/pager-seek-hide-test.js checks it: faded at rest, back while a finger holds the slides, still there just after the snap back, then gone.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2 files changed, 15 insertions, 1 deletions

diff --git a/src/style.css b/src/style.css
index c621b13..f7d4774 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1856,3 +1856,9 @@ body::after {
 
 /* Always visible, including when the media controls are tucked away. */
 .mp-position { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 20px; background: #0009; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 5; }
+/* in the video pager the counter shows while the pager is in motion and
+   fades out a moment after it settles (the animation restarts each time
+   `moving` comes off) */
+.media-pager.videos .mp-position { animation: mp-position-out .4s 1.2s both; }
+.media-pager.videos.moving .mp-position { animation: none; opacity: 1; }
+@keyframes mp-position-out { from { opacity: 1; } to { opacity: 0; } }
diff --git a/tools/pager-seek-hide-test.js b/tools/pager-seek-hide-test.js
index 6c073c6..64ff7b5 100644
--- a/tools/pager-seek-hide-test.js
+++ b/tools/pager-seek-hide-test.js
@@ -2,7 +2,9 @@
 // while the pager is in motion — a glide to the next clip, a finger
 // dragging the slides, the snap back — no seek bar shows at all (it rode
 // along with the slide, a white line sliding up the screen), and it fades
-// back in once the clip has landed. Run: bun tools/pager-seek-hide-test.js
+// back in once the clip has landed. The position counter is the other way
+// round: it shows while the pager moves and fades out once it has settled.
+// Run: bun tools/pager-seek-hide-test.js
 import puppeteer from './puppeteer.js';
 import { cacheKeyFor } from '../src/wallet.js';
 import { generateSecretKey, getPublicKey, finalizeEvent } from 'nostr-tools/pure';
@@ -56,6 +58,7 @@ const seenBars = async () => (await bars()).filter((x) => x.seen).map((x) => x.c
 // a recorder, frame by frame: the scroll position, the pager's motion flag, and any bar that can be seen
 const record = () => page.evaluate(() => { const sc = document.querySelector('.mp-scroll'), el = document.querySelector('.media-pager'); window.__tr = []; const t0 = performance.now(); const rec = () => { window.__tr.push({ top: sc.scrollTop, moving: el.classList.contains('moving'), seen: [...document.querySelectorAll('.mp-seek')].filter((b) => { const cs = getComputedStyle(b); return cs.visibility === 'visible' && +cs.opacity > 0.01; }).length }); if (performance.now() - t0 < 1500) requestAnimationFrame(rec); }; requestAnimationFrame(rec); });
 const trace = () => page.evaluate(() => window.__tr);
+const counterOpacity = () => page.evaluate(() => +getComputedStyle(document.querySelector('.mp-position')).opacity);
 
 try {
   await page.setViewport({ width: 390, height: 844, hasTouch: true });
@@ -90,6 +93,7 @@ try {
   check('…and its seek bar shows', await waitFor(() => { const b = document.querySelector('.mp-slide.mp-cur .mp-seek'); return !!b && b.classList.contains('ready') && getComputedStyle(b).opacity === '1'; }, null, 6000), JSON.stringify(await bars()));
   check('…no other', (await seenBars()).length === 1, (await seenBars()).join(' '));
   check('the pager is not marked moving', await page.evaluate(() => !document.querySelector('.media-pager').classList.contains('moving')));
+  check('the position counter has faded out', await waitFor(() => +getComputedStyle(document.querySelector('.mp-position')).opacity < 0.01, null, 4000), String(await counterOpacity()));
 
   console.log('\n[a glide to the next clip: no seek bar on the way]');
   await record();
@@ -112,9 +116,13 @@ try {
   await page.touchscreen.touchMove(195, 500); await sleep(250);
   check('held 100px up, the pager is marked moving', await page.evaluate(() => document.querySelector('.media-pager').classList.contains('moving')));
   check('…and no seek bar shows', (await seenBars()).length === 0, (await seenBars()).join(' '));
+  check('…and the position counter is back', (await counterOpacity()) === 1, String(await counterOpacity()));
   await page.touchscreen.touchMove(195, 590); await sleep(30);
   await page.touchscreen.touchEnd();
   check('let go, it snaps back and the bar returns', await waitFor(() => { const b = document.querySelector('.mp-slide.mp-cur .mp-seek'); const el = document.querySelector('.media-pager'); return !!b && getComputedStyle(b).opacity === '1' && !el.classList.contains('moving') && document.querySelector('.mp-slide.mp-cur').getAttribute('data-k').endsWith('/tall.webm'); }, null, 4000), JSON.stringify(await bars()));
+  await sleep(500);
+  check('a moment after, the counter still shows', (await counterOpacity()) > 0.99, String(await counterOpacity()));
+  check('…then fades out', await waitFor(() => +getComputedStyle(document.querySelector('.mp-position')).opacity < 0.01, null, 4000), String(await counterOpacity()));
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } catch (e) { console.error(e); ok = false; } finally { await browser.close(); server.stop(true); }
 console.log(ok ? '\n✅ no seek bar while the pager moves; it fades in on landing' : '\n❌ failed');