The video pager never lands on a black slide: a post joins the carousel once its clip is ready to play; and the carousel shows the clips the screen's way round, with a toggle for all shapes.HEADmaster

Ready to play: the clip's first frame on its slide and its opening in the cache (the head start done). Until then the post waits out of the carousel — parked off screen, no height, no snap point — and a swipe or a flight passes over it to the next post that is ready; it joins when ready, and a post joining above the clip on screen moves the scroll by its height in the same frame (snapping off for it, and never while the pager is in motion: then once it has settled), so the reader doesn't feel it. The post tapped to open the pager is in whatever its state. Seen on Adam's phone before this: 17 of 18 landings had their frame, the 18th was black for a second while the server was still making its frame. (Adam, 2026-10-16: "i never want to land on a black screen i'd rather just not have a video in carousel yet if it's not ready to play".) A local http clip, which can have no server frame, waits only for its opening. Data Saver is unchanged (nothing waits: heavy clips sit under their tap-to-play cover).

The screen's way round: the Videos view used to show tall clips only, everywhere. Now it and the pager show tall clips on a screen taller than wide and wide clips on one wider than tall — a square either way — unless the reader asks for all shapes: a toggle over the Videos grid and in the pager's top bar ("Tall only" / "Wide only" / "All shapes"), remembered on the device. A post the wrong way round is kept out of the carousel the same way (not the one opened on, and never the clip on screen: a turn of the phone doesn't pull it away; shapes not yet known are let in, and a shape is learned from the server frame as it loads). Turning the phone re-sorts them. (Adam: "only show vertical videos by default on a phone that's in vertical orientation and only horizontal videos if the phone is in landscape but have some kind of control to toggle the ability to see all videos".) The posts prepared ahead (frames for five ahead and three behind, head starts for the next two and the one before) skip the ones kept out for shape.

tools/pager-ready-gate-test.js: the grid shows four of five clips (not the wide one) with the toggle, and all five after a tap; in the carousel the next clip, its frame delayed, waits while the one after (ready) has joined; a step lands past it on a clip with its frame; the waiting post joins above the clip on screen without moving it, the counter grows, a step back lands on it; the pager's toggle lets the wide post in and out. pager-tap-slop-test keeps all shapes on (its path has a wide clip before a tall one in a portrait window). Every other pager test passes; feed-pager-ahead and feed-video-pager fail the same checks on a clean checkout.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

5 files changed, 277 insertions, 17 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index ce578e4..3789f93 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -12169,11 +12169,41 @@ export function messagesFeature(ctx) {
   // stand taller than they're wide. A clip of unknown shape is measured
   // (the header probe, or a player when the index sits at the end of a
   // file a server serves in ranges) and joins once it's known to qualify.
-  function verticalClip(url) {
+  // ---- which clips fit the screen -----------------------------------------
+  // The Videos view and the pager show the clips the screen's way round: tall
+  // ones on a phone held upright, wide ones held sideways (or on a desktop
+  // window), a square either way — unless the reader asks for all shapes
+  // (remembered on this device). (Adam, 2026-10-16: "only show vertical
+  // videos by default on a phone that's in vertical orientation and only
+  // horizontal videos if the phone is in landscape but have some kind of
+  // control to toggle the ability to see all videos".)
+  const CLIPS_FIT_KEY = 'coinos-clips-fit'; // 'all', or unset: the screen's way round
+  const clipsAll = () => { try { return localStorage.getItem(CLIPS_FIT_KEY) === 'all'; } catch { return false; } };
+  const setClipsAll = (all) => { try { if (all) localStorage.setItem(CLIPS_FIT_KEY, 'all'); else localStorage.removeItem(CLIPS_FIT_KEY); } catch {} };
+  const screenTall = () => window.innerHeight >= window.innerWidth;
+  const clipShape = (url) => {
     const d = videoInfo.get(url) || {};
     const k = d.w && d.h ? d : videoDims.get(url) || mediaReady.get(url);
     const w = k && (k.w || k.width), hh = k && (k.h || k.height);
-    if (w && hh) return hh > w;
+    return w && hh ? (hh > w ? 'tall' : hh < w ? 'wide' : 'square') : null;
+  };
+  // true/false, or null while the clip's shape isn't known
+  const clipFits = (url) => { if (clipsAll()) return true; const sh = clipShape(url); return sh === null ? null : sh === 'square' || sh === (screenTall() ? 'tall' : 'wide'); };
+  const clipsLabel = () => t(clipsAll() ? 'clipsAll' : screenTall() ? 'clipsTall' : 'clipsWide');
+  // the toggle: in the pager's top bar and over the Videos grid
+  function clipsToggle(cls, after) {
+    return h('button', { class: cls, type: 'button', title: t('clipsToggleTitle'), onClick: (e) => {
+      e.stopPropagation();
+      setClipsAll(!clipsAll());
+      for (const b of document.querySelectorAll('.mp-fit, .media-fit-btn')) b.textContent = clipsLabel();
+      if (after) after();
+      if (mediaMode === 'videos') scheduleRepaint();
+    } }, clipsLabel());
+  }
+  function fitClip(url) {
+    const f = clipFits(url);
+    if (f !== null) return f;
+    const d = videoInfo.get(url) || {};
     if (!probeFailedLately(d) && !(d.probed && (!d.ranges || videoUnknown.has(url)))) measureClip(url);
     return false;
   }
@@ -12196,7 +12226,7 @@ export function messagesFeature(ctx) {
       // a grid shows the picture itself — no warning to fold it behind
       if (curated ? notForPublic(ev) : modOn('sensitive') && sensitiveWhy(ev) !== null && !isMe(ev.pubkey)) continue;
       if (kind === 'videos') learnVideoMeta(ev);
-      const urls = kind === 'videos' ? clipUrlsOf(ev).filter(verticalClip)
+      const urls = kind === 'videos' ? clipUrlsOf(ev).filter(fitClip)
         : noteMediaUrls(ev.content).filter((u) => !u.startsWith('https://i.ytimg.com/'));
       for (const url of urls) {
         const it = { ev, url };
@@ -12408,6 +12438,7 @@ export function messagesFeature(ctx) {
       if (missing.length) warmTileThumbs(missing).then(() => queueTileThumbs(missing.filter((u) => !tileThumbs.has(u))));
     }
     return h('div', { class: 'media-grid', 'data-key': 'media-grid:' + mediaMode },
+      mediaMode === 'videos' ? h('div', { class: 'media-fit', 'data-key': 'media-fit' }, clipsToggle('media-fit-btn')) : null,
       ...items.map((it) => {
         const k = mediaKey(it);
         // a video tile shows a still at once: kept, given, or the server's
@@ -12754,7 +12785,11 @@ export function messagesFeature(ctx) {
   // post), each a row of its pictures or clips — its quotes' too — side by
   // side (left and right go within it). Its slides, in reading order:
   const pagerSlides = () => (pager ? [...pager.scroller.querySelectorAll('.mp-slide')] : []);
-  const pagerGroups = () => (pager ? [...pager.scroller.querySelectorAll(':scope > .mp-group')] : []);
+  // the posts in the carousel: those on offer (a clip's post waits out of it
+  // until it is ready to play, and a clip the wrong way round for the screen
+  // is kept out — see pagerReveal, pagerFit), or every one built (all)
+  const PAGER_ON = '.mp-group:not(.mp-wait):not(.mp-off)';
+  const pagerGroups = (all = false) => (pager ? [...pager.scroller.querySelectorAll(':scope > ' + (all ? '.mp-group' : PAGER_ON))] : []);
   // the slide a post's row rests on
   const rowSlide = (g) => { const row = g && g._row; if (!row || !row.children.length) return null; return row.children[Math.min(row.children.length - 1, Math.round(row.scrollLeft / (row.clientWidth || 1)))]; };
   // bring a slide to the screen: its post, and within it, the slide
@@ -12768,13 +12803,17 @@ export function messagesFeature(ctx) {
   // along (the next in this post), and the post after next
   function pagerAhead(slide) {
     const out = [];
-    const nextGroup = (g) => { let n = g && g.nextElementSibling; while (n && !n.classList.contains('mp-group')) n = n.nextElementSibling; return n; };
+    // (a post kept out for its shape is passed over: nothing to ready there)
+    const nextGroup = (g) => { let n = g && g.nextElementSibling; while (n && (!n.classList.contains('mp-group') || n.classList.contains('mp-off'))) n = n.nextElementSibling; return n; };
     const g1 = nextGroup(slide.closest('.mp-group')), g2 = nextGroup(g1);
     const down = g1 && rowSlide(g1);
     if (down) out.push(down);
     if (slide.nextElementSibling) out.push(slide.nextElementSibling);
     const down2 = g2 && rowSlide(g2);
     if (down2) out.push(down2);
+    const prevGroup = (g) => { let n = g && g.previousElementSibling; while (n && (!n.classList.contains('mp-group') || n.classList.contains('mp-off'))) n = n.previousElementSibling; return n; };
+    const up = prevGroup(slide.closest('.mp-group')), back = up && rowSlide(up);
+    if (back) out.push(back); // (the one before: ready again for the swipe back)
     return out;
   }
   function pagerAttach(slide) {
@@ -12823,7 +12862,7 @@ export function messagesFeature(ctx) {
       const k = ahead.indexOf(s);
       if (Math.abs(j - i) <= 2 || k >= 0) slidePoster(s);
       // the slides around the reader (and the one landed on) hold their clip's first frame
-      if (eager && (Math.abs(j - i) <= 3 || k >= 0) && !(j === i && pager.at && slide.getAttribute('data-k') === pager.start)) slideFrame(s, k);
+      if (eager && ((j > i && j - i <= 5) || (j < i && i - j <= 3) || k >= 0) && !(j === i && pager.at && slide.getAttribute('data-k') === pager.start)) slideFrame(s, k);
       if (j === i) return;
       const v = s.querySelector('video.mp-media');
       if (eager && k >= 0) {
@@ -12865,6 +12904,7 @@ export function messagesFeature(ctx) {
       if (!p || !pager || !s.isConnected || v._frame === 'first') return false;
       if (kind === 'soft' && (v._frame || pager.cur === s)) return false; // never a soft still under the clip on screen
       v.setAttribute('poster', p); v._frame = kind;
+      pagerReveal();
       return true;
     };
     const soft = () => put(videoThumbs.get(url) || posterOf(s._ev, url), 'soft');
@@ -12873,7 +12913,11 @@ export function messagesFeature(ctx) {
       v._frameBusy = true;
       const im = new Image();
       im.decoding = 'async';
-      const ok = () => { v._frameBusy = false; put(first, 'first'); };
+      const ok = () => {
+        v._frameBusy = false;
+        if (im.naturalWidth && im.naturalHeight && !clipShape(url)) { rememberVideo(url, im.naturalWidth, im.naturalHeight); pagerFit(); } // its shape, from the frame
+        put(first, 'first');
+      };
       im.onload = () => (im.decode ? im.decode().then(ok, ok) : ok());
       im.onerror = () => { v._frameBusy = false; serverFirstFailed.add(url); slideFrame(s, k); };
       im.src = first;
@@ -12919,14 +12963,14 @@ export function messagesFeature(ctx) {
     if (d.size && d.size <= 3e6 && d.size <= 2 * n) n = d.size;
     return Math.round(Math.min(Math.max(n, HEAD_MIN), HEAD_MAX, d.size || Infinity));
   }
-  const headStarted = new Set();
+  const headStarted = new Map(); // url -> its promise
+  const headDone = new Set(); // head starts finished (or given up: a host that won't allow the read)
   function headStart(url, share = 1) {
-    if (!url || url.startsWith('blob:') || headStarted.has(url) || frugalData()) return Promise.resolve();
-    headStarted.add(url);
-    if (headStarted.size > 300) headStarted.delete(headStarted.values().next().value);
+    if (!url || url.startsWith('blob:') || frugalData()) return Promise.resolve();
+    if (headStarted.has(url)) return headStarted.get(url);
     const want = Math.max(HEAD_MIN, Math.round(headStartBytes(url) * share));
     const t0 = performance.now();
-    return fetch(url, { headers: { Range: 'bytes=0-' + (want - 1) } }).then(async (r) => {
+    const task = fetch(url, { headers: { Range: 'bytes=0-' + (want - 1) } }).then(async (r) => {
       const reader = r.ok && r.body ? r.body.getReader() : null;
       if (!reader) return;
       let got = 0;
@@ -12938,7 +12982,10 @@ export function messagesFeature(ctx) {
       }
       const secs = (performance.now() - t0) / 1000;
       if (got >= 128 * 1024 && secs > 0) { const rate = got / secs; netRate = netRate ? netRate * 0.6 + rate * 0.4 : rate; }
-    }).catch(() => {});
+    }).catch(() => {}).finally(() => { headDone.add(url); pagerReveal(); });
+    headStarted.set(url, task);
+    if (headStarted.size > 300) { const k = headStarted.keys().next().value; headStarted.delete(k); headDone.delete(k); }
+    return task;
   }
   function playSlide(slide) {
     const v = slide.querySelector('video.mp-media');
@@ -13163,8 +13210,10 @@ export function messagesFeature(ctx) {
       h('div', { class: 'mp-position', role: 'status' }, '0 / 0'),
       h('div', { class: 'mp-top' },
         h('button', { class: 'mp-x', type: 'button', 'aria-label': t('close'), onClick: (e) => { e.stopPropagation(); dismissPager(); } }, '×'),
-        video ? h('button', { class: 'mp-sound', type: 'button', onClick: (e) => { e.stopPropagation(); pagerSound(!pagerLoud); } },
-          h('span', { class: 'on' }, '\u{1F50A}'), h('span', { class: 'off' }, '\u{1F507} ' + t('videoUnmute'))) : null),
+        video ? h('div', { class: 'mp-top-r' },
+          clipsToggle('mp-fit', () => pagerFit()),
+          h('button', { class: 'mp-sound', type: 'button', onClick: (e) => { e.stopPropagation(); pagerSound(!pagerLoud); } },
+            h('span', { class: 'on' }, '\u{1F50A}'), h('span', { class: 'off' }, '\u{1F507} ' + t('videoUnmute')))) : null),
       // a mouse's way through (shown where there is a pointer to hover with,
       // style.css): up and down the posts at the right edge, left and right
       // along a post's pictures when it has more than one (has-left/right)
@@ -13264,7 +13313,7 @@ export function messagesFeature(ctx) {
     // let go of a drag: on to the next (or the one before), or back
     function settle(d, step, vel = 0) {
       const box = d.box, y = d.axis === 'y';
-      const stops = [...box.children].filter((c) => c.matches(y ? '.mp-group' : '.mp-slide')).map((c) => pagerAt(box, c, y));
+      const stops = [...box.children].filter((c) => c.matches(y ? PAGER_ON : '.mp-slide')).map((c) => pagerAt(box, c, y));
       if (!stops.length) return;
       // the stop it set off from, then one along (or back) — or, flung, several
       const from = stops.reduce((bi, p, i) => (Math.abs(p - d.start) < Math.abs(stops[bi] - d.start) ? i : bi), 0);
@@ -13413,6 +13462,7 @@ export function messagesFeature(ctx) {
         if (bar) bar._paint();
         const r = p.cur && p.cur.getBoundingClientRect();
         p.el.classList.toggle('moving', !!r && (Math.abs(r.top) > 2 || Math.abs(r.left) > 2));
+        if (p.later && p.later.length && !pagerMoving()) { const l = p.later; p.later = []; for (const [g, cls, on] of l) pagerToggleGroup(g, cls, on); }
         p.raf = requestAnimationFrame(frame);
       };
       p.raf = requestAnimationFrame(frame);
@@ -13430,6 +13480,8 @@ export function messagesFeature(ctx) {
       if (!pager) return;
       pager.screenH = pager.scroller.clientHeight;
       if (pager.anchor) pagerShow(pager.anchor);
+      for (const b of el.querySelectorAll('.mp-fit')) b.textContent = clipsLabel();
+      pagerFit();
     };
     window.addEventListener('resize', pager.onResize);
     // new posts land in the feed while the pager is open; counts move
@@ -13459,7 +13511,7 @@ export function messagesFeature(ctx) {
   async function pagerLoadAhead() {
     const p = pager;
     if (!p) return;
-    const groups = pagerGroups();
+    const groups = pagerGroups(true);
     const slide = p.cur || p.anchor;
     p.furthest = Math.max(p.furthest ?? -1, groups.indexOf(slide && slide.closest('.mp-group')));
     if (p.loadingAhead || Date.now() < (p.retryAheadAt || 0)) return;
@@ -13500,16 +13552,66 @@ export function messagesFeature(ctx) {
       let g = pager.groups.get(gk);
       if (!g) {
         g = pagerGroup();
+        if (pager.kind === 'videos' && !frugalData()) g.classList.add('mp-wait'); // out of the carousel until its clip is ready to play
         pager.groups.set(gk, g);
         pager.scroller.append(g);
       }
+      if (k === pager.start) { g.classList.remove('mp-wait'); g._opened = true; } // the clip tapped: in, whatever its state
       g._row.append(s);
       pagerDots(g);
       pager.near.observe(s);
       pager.io.observe(s);
     }
+    pagerFit();
+    pagerPosition();
+  }
+  // A post's clip is ready to play when its first frame is on the slide and
+  // its opening is in the cache (the head start done): only then does the
+  // post join the carousel, so the reader never lands on a black slide
+  // (Adam, 2026-10-16: "i never want to land on a black screen i'd rather
+  // just not have a video in carousel yet if it's not ready to play"). A
+  // post joining above the one on screen would push it down: the scroll
+  // moves by the post's height in the same frame, snapping off meanwhile,
+  // and not while the pager is in motion (then, once it has settled).
+  function pagerReveal() {
+    if (!pager || pager.kind !== 'videos') return;
+    const eager = !frugalData();
+    for (const g of pager.scroller.querySelectorAll(':scope > .mp-group.mp-wait')) {
+      const v = g._row.firstElementChild && g._row.firstElementChild.querySelector('video.mp-media');
+      if (!v) continue;
+      const url = v.getAttribute('data-src');
+      // the frame is asked of a clip that can have one (the server's: an https
+      // clip); a local http clip (a dev setup) waits only for its opening
+      if ((serverFirst(url) && !v._frame) || (eager && !headDone.has(playSrc(url)))) continue;
+      pagerToggleGroup(g, 'mp-wait', false);
+    }
+  }
+  // the posts whose clips are the wrong way round for the screen stay out
+  // (not the one opened on; a shape not yet known is let in)
+  function pagerFit() {
+    if (!pager || pager.kind !== 'videos') return;
+    const cur = pager.cur || pager.anchor, cg = cur && cur.closest('.mp-group');
+    for (const g of pagerGroups(true)) {
+      const fits = g._opened || g === cg || [...g._row.children].some((s) => { const v = s.querySelector('video.mp-media'); return !v || clipFits(v.getAttribute('data-src')) !== false; });
+      pagerToggleGroup(g, 'mp-off', !fits);
+    }
+  }
+  function pagerToggleGroup(g, cls, on) {
+    if (!pager || g.classList.contains(cls) === on) return;
+    const cur = pager.cur || pager.anchor, cg = cur && cur.closest('.mp-group');
+    const above = !!cg && cg !== g && !!(g.compareDocumentPosition(cg) & Node.DOCUMENT_POSITION_FOLLOWING);
+    if (above && pagerMoving()) { (pager.later ||= []).push([g, cls, on]); return; } // once it has settled (the frame loop)
+    const box = pager.scroller;
+    const shown = g.offsetParent !== null; // (a group hidden the other way stays hidden: no height to count)
+    const h0 = shown ? g.offsetHeight : 0;
+    box.style.scrollSnapType = 'none';
+    g.classList.toggle(cls, on);
+    if (above) box.scrollTop += (g.offsetParent !== null ? g.offsetHeight : 0) - h0;
+    requestAnimationFrame(() => { if (pager && !box._glide) box.style.scrollSnapType = ''; });
     pagerPosition();
+    if (cg === g && on) { const s = pagerHere(); if (s && s !== pager.cur) pagerArrive(s); } // the one on screen went out (turned the phone): whoever is there now
   }
+  const pagerMoving = () => !!pager && (pager.flying || !!pager.scroller._glide || pager.el.classList.contains('moving'));
   // A post in the pager: its row of slides, side by side, and — with more
   // than one — dots saying how many and which.
   function pagerGroup() {
diff --git a/src/i18n.js b/src/i18n.js
index 03cb921..ef56389 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -270,6 +270,10 @@ const STR = {
     close: 'Close',
     playVideo: 'Play',
     videoUnmute: 'Unmute',
+    clipsTall: 'Tall only',
+    clipsWide: 'Wide only',
+    clipsAll: 'All shapes',
+    clipsToggleTitle: 'Which clips to show: the ones that fit the screen, or all',
     videoTapToPlay: "Tap to play",
     pagerFetchingVideo: "Fetching the next video…",
     pagerFetchingPictures: "Fetching more pictures…",
diff --git a/src/style.css b/src/style.css
index cf32b4b..c621b13 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1574,6 +1574,19 @@ body::after {
 }
 .mp-sound { font-size: 15px; }
 .mp-sound .off { display: none; }
+.mp-top-r { display: flex; align-items: center; gap: 8px; }
+.mp-fit { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: 999px; border: 0; color: #fff; background: rgba(255, 255, 255, .16); }
+.media-pager.quiet .mp-top .mp-fit { pointer-events: auto; }
+/* a post out of the carousel: its clip not ready to play yet (mp-wait), or
+   the wrong way round for the screen (mp-off). Parked far above the screen
+   (fixed: out of the scroller's flow and its snap points, no height to
+   count) rather than display:none, so its box isn't a zero rect at the
+   origin that a "what's at the top left" lookup takes for the slide on
+   screen; its clip's poster still loads there. */
+.mp-group.mp-wait, .mp-group.mp-off { position: fixed; top: -400vh; left: 0; height: 0; visibility: hidden; pointer-events: none; }
+/* over the Videos grid: which shapes */
+.media-fit { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 2px 8px 0; }
+.media-fit-btn { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600; border-radius: 999px; border: 0; color: var(--text, inherit); background: var(--chip-bg, rgba(127, 127, 127, .15)); }
 /* A mouse's way through the pager: arrows, where there is a pointer to
    hover with (a phone swipes). Faint until the pointer is over the pager;
    the sideways pair only when the post has a picture that way. */
diff --git a/tools/pager-ready-gate-test.js b/tools/pager-ready-gate-test.js
new file mode 100644
index 0000000..ab2bcaf
--- /dev/null
+++ b/tools/pager-ready-gate-test.js
@@ -0,0 +1,140 @@
+// The video pager never lands on a black slide: a post joins the carousel
+// only once its clip is ready to play (its first frame on the slide, its
+// opening in the cache), the one tapped excepted; a post that joins above
+// the clip on screen doesn't move it. And the carousel — like the Videos
+// grid — shows the clips the screen's way round (tall ones on a phone held
+// upright), a square either way, until the toggle asks for all shapes.
+// Run: bun tools/pager-ready-gate-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 jpg = (c, size) => Bun.spawnSync(['ffmpeg', '-loglevel', 'error', '-f', 'lavfi', '-i', 'color=c=' + c + ':s=' + size, '-frames:v', '1', '-f', 'image2', '-c:v', 'mjpeg', 'pipe:1']).stdout;
+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 Buffer.from(Bun.spawnSync(['cat', f]).stdout);
+};
+// name → [shape, dims, first-frame delay ms]
+const SHAPES = { tall1: ['180x320', 0], wide: ['320x180', 0], tall2: ['180x320', 3000], tall3: ['180x320', 0], sq: ['240x240', 0] };
+const CLIPS = Object.fromEntries(Object.entries(SHAPES).map(([n, [size]]) => [n, clip(size === '180x320' ? 'tall' : size === '320x180' ? 'wide' : 'last', size)]));
+const FIRST = Object.fromEntries(Object.entries(SHAPES).map(([n, [size]]) => [n, jpg('green', size.split('x').map((x) => x * 4).join('x'))]));
+const SK = generateSecretKey(), AUTHOR = getPublicKey(SK);
+const now = Math.floor(Date.now() / 1000);
+const html = await buildHtml({ minify: true, pwa: false });
+const server = Bun.serve({ port: 0, fetch: (req) => {
+  const path = new URL(req.url).pathname;
+  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) => 'https://media.test/' + n + '.webm';
+const post = (n, ago) => finalizeEvent({ kind: 1, created_at: now - ago, tags: [['imeta', 'url ' + U(n), 'm video/webm', 'dim ' + SHAPES[n][0]]], content: 'clip ' + n + ' ' + U(n) }, SK);
+const seeded = ['tall1', 'wide', 'tall2', 'tall3', 'sq'].map((n, i) => post(n, 100 + i * 100));
+
+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.setRequestInterception(true);
+const asked = [];
+page.on('request', (r) => {
+  const u = new URL(r.url());
+  if (u.pathname === '/vmedia/first.jpg') {
+    const name = /\/(\w+)\.webm$/.exec(u.searchParams.get('u') || '')?.[1];
+    asked.push('first:' + name);
+    const go = () => r.respond({ status: 200, contentType: 'image/jpeg', body: FIRST[name], headers: { 'access-control-allow-origin': '*' } });
+    return SHAPES[name][1] ? void setTimeout(go, SHAPES[name][1]) : go();
+  }
+  if (u.pathname.startsWith('/vmedia/')) return r.respond({ status: 404, body: 'no' });
+  if (u.host === 'media.test') {
+    const name = /\/(\w+)\.webm$/.exec(u.pathname)[1], f = CLIPS[name];
+    asked.push('clip:' + name);
+    const range = /^bytes=(\d+)-(\d*)$/.exec(r.headers().range || '');
+    const cors = { 'access-control-allow-origin': '*', 'accept-ranges': 'bytes', 'access-control-expose-headers': 'content-range, content-length' };
+    if (!range) return r.respond({ status: 200, contentType: 'video/webm', body: f, headers: cors });
+    const a = +range[1], b = range[2] ? Math.min(+range[2], f.length - 1) : f.length - 1;
+    return r.respond({ status: 206, contentType: 'video/webm', body: f.subarray(a, b + 1), headers: { ...cors, 'content-range': 'bytes ' + a + '-' + b + '/' + f.length } });
+  }
+  r.continue();
+});
+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);
+});
+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 groups = () => page.evaluate(() => [...document.querySelectorAll('.mp-scroll > .mp-group')].map((g) => { const s = g.querySelector('.mp-slide'), v = s.querySelector('video.mp-media'); const r = s.getBoundingClientRect(); return { clip: s.getAttribute('data-k').split('/').pop().replace('.webm', ''), wait: g.classList.contains('mp-wait'), off: g.classList.contains('mp-off'), cur: s.classList.contains('mp-cur'), top: Math.round(r.top), poster: !!v.getAttribute('poster'), playing: !v.paused }; }));
+const curClip = async () => (await groups()).find((g) => g.cur)?.clip;
+const inCarousel = async () => (await groups()).filter((g) => !g.wait && !g.off).map((g) => g.clip).join(' ');
+const counter = () => page.evaluate(() => document.querySelector('.mp-position').textContent);
+
+try {
+  await page.setViewport({ width: 390, height: 844 });
+  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());
+  check('the clips are in the feed', await waitFor(() => document.querySelectorAll('.notes-feed video.note-video').length >= 3, null, 20000));
+
+  console.log('\n[the Videos grid: the clips the screen\'s way round]');
+  await click('videos');
+  check('the grid shows the tall clips and the square one, not the wide one', await waitFor(() => { const t = [...document.querySelectorAll('.media-tile.video')].map((x) => x.getAttribute('data-key')); return t.length === 4 && !t.some((k) => /wide/.test(k)); }, null, 8000), String(await page.evaluate(() => document.querySelectorAll('.media-tile.video').length)));
+  check('…with a toggle over it saying so', (await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent)) === 'Tall only', await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent));
+  await page.evaluate(() => document.querySelector('.media-fit-btn').click());
+  check('tapped: all five, the wide one too', await waitFor(() => document.querySelectorAll('.media-tile.video').length === 5, null, 4000));
+  check('…and the toggle says all shapes', (await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent)) === 'All shapes');
+  await page.evaluate(() => document.querySelector('.media-fit-btn').click());
+  check('tapped again: back to the four', await waitFor(() => document.querySelectorAll('.media-tile.video').length === 4, null, 4000));
+
+  console.log('\n[the carousel: a post joins once its clip is ready to play]');
+  await page.evaluate(() => [...document.querySelectorAll('.media-tile.video')].find((x) => /tall1/.test(x.getAttribute('data-key'))).click());
+  check('the pager opens on the clip tapped', await waitFor(() => { const s = document.querySelector('.media-pager.videos .mp-slide.mp-cur'); return !!s && /tall1/.test(s.getAttribute('data-k')); }, null, 6000));
+  check('…and it plays', await waitFor(() => !document.querySelector('.mp-slide.mp-cur video').paused, null, 8000));
+  check('the wide clip is not in this carousel at all (the grid\'s list is the screen\'s way round)', !(await groups()).some((g) => g.clip === 'wide'), JSON.stringify(await groups()));
+  check('the next tall clip, its first frame still on its way, waits out of the carousel', await waitFor(() => { const g = [...document.querySelectorAll('.mp-scroll > .mp-group')].find((x) => /tall2/.test(x.querySelector('.mp-slide').getAttribute('data-k'))); return g && g.classList.contains('mp-wait'); }, null, 1000), await inCarousel());
+  check('the one after, ready, has joined', await waitFor(() => { const g = [...document.querySelectorAll('.mp-scroll > .mp-group')].find((x) => /tall3/.test(x.querySelector('.mp-slide').getAttribute('data-k'))); return g && !g.classList.contains('mp-wait') && !!g.querySelector('video').getAttribute('poster'); }, null, 8000), await inCarousel());
+  const before = await inCarousel();
+  await page.keyboard.press('ArrowDown');
+  check('a step down lands on it, past the one not ready', await waitFor(() => { const s = document.querySelector('.mp-slide.mp-cur'); return !!s && /tall3/.test(s.getAttribute('data-k')); }, null, 4000), (await curClip()) + ' (carousel was: ' + before + ')');
+  check('…never a black slide: the clip landed on had its frame', (await groups()).find((g) => g.clip === 'tall3')?.poster === true);
+  const n0 = await counter();
+  check('the waiting post joins once its frame comes', await waitFor(() => { const g = [...document.querySelectorAll('.mp-scroll > .mp-group')].find((x) => /tall2/.test(x.querySelector('.mp-slide').getAttribute('data-k'))); return g && !g.classList.contains('mp-wait'); }, null, 8000), await inCarousel());
+  await sleep(300);
+  const g = await groups();
+  check('…joining above the clip on screen without moving it', g.find((x) => x.cur)?.clip === 'tall3' && Math.abs(g.find((x) => x.cur).top) <= 1, JSON.stringify(g.map((x) => x.clip + ':' + x.top + (x.cur ? '*' : ''))));
+  check('…and the counter grew', (await counter()) !== n0, n0 + ' → ' + (await counter()));
+  await page.keyboard.press('ArrowUp');
+  check('a step back up lands on the one that joined', await waitFor(() => { const s = document.querySelector('.mp-slide.mp-cur'); return !!s && /tall2/.test(s.getAttribute('data-k')) && !s.querySelector('video').paused; }, null, 6000), String(await curClip()));
+
+  console.log('\n[the toggle in the pager]');
+  check('the pager\'s toggle says tall only', (await page.evaluate(() => document.querySelector('.mp-fit')?.textContent)) === 'Tall only');
+  await page.evaluate(() => document.querySelector('.mp-fit').click());
+  check('tapped: the wide clip\'s post is built (it joins once ready)', await waitFor(() => { const g = [...document.querySelectorAll('.mp-scroll > .mp-group')].find((x) => /wide/.test(x.querySelector('.mp-slide').getAttribute('data-k'))); return g && !g.classList.contains('mp-off'); }, null, 4000), await inCarousel());
+  check('…the clip on screen stayed put', (await curClip()) === 'tall2' && Math.abs((await groups()).find((x) => x.cur).top) <= 1, JSON.stringify((await groups()).map((x) => x.clip + ':' + x.top + (x.cur ? '*' : ''))));
+  await page.evaluate(() => document.querySelector('.mp-fit').click());
+  check('tapped again: kept out for its shape', await waitFor(() => { const g = [...document.querySelectorAll('.mp-scroll > .mp-group')].find((x) => /wide/.test(x.querySelector('.mp-slide').getAttribute('data-k'))); return g && g.classList.contains('mp-off'); }, null, 2000));
+  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✅ posts join the carousel ready to play, the screen\'s way round' : '\n❌ failed');
+process.exit(ok ? 0 : 1);
diff --git a/tools/pager-tap-slop-test.js b/tools/pager-tap-slop-test.js
index 09f761a..4de87df 100644
--- a/tools/pager-tap-slop-test.js
+++ b/tools/pager-tap-slop-test.js
@@ -76,6 +76,7 @@ try {
     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');
+    localStorage.setItem('coinos-clips-fit', 'all'); // (the wide clip stays in: this test is about the finger, not the shapes)
   }, [base, AUTHOR, seeded]);
   await page.reload({ waitUntil: 'domcontentloaded' });
   await waitText('receive', 20000);