Videos: "All shapes" in a pager opened from the grid brings in the clips the other way round (the pager now holds every clip, pagerFit keeping the wrong-shaped ones out of sight until asked)

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

1 files changed, 12 insertions, 3 deletions

diff --git a/tools/media-grid-dups-test.js b/tools/media-grid-dups-test.js
index 0077f48..31ddb9d 100644
--- a/tools/media-grid-dups-test.js
+++ b/tools/media-grid-dups-test.js
@@ -17,13 +17,13 @@ const clip = (name, size) => {
   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'), again: clip('wide', '320x180'), other: clip('wide', '320x180'), last: clip('last', '240x240') };
+const CLIPS = { wide: clip('wide', '320x180'), again: clip('wide', '320x180'), other: 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 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|again|other|last)\.webm$/.exec(path);
+  const m = /^\/(wide|again|other|tall|last)\.webm$/.exec(path);
   if (m) {
     const f = Bun.file(CLIPS[m[1]]), range = /^bytes=(\d+)-(\d*)$/.exec(req.headers.get('range') || '');
     if (!range) return new Response(f, { headers: { 'content-type': 'video/webm', 'accept-ranges': 'bytes' } });
@@ -46,6 +46,8 @@ const seeded = [
   post('Transylvania lightning conference 2026 ' + U('again'), U('again'), 200),
   post('Transylvania lightning conference 2026 ' + U('other'), U('other'), 300),
   post('the last clip ' + U('last'), U('last'), 400),
+  // a tall one: out of a wide screen's grid until "All shapes"
+  finalizeEvent({ kind: 1, created_at: now - 450, tags: [['imeta', 'url ' + U('tall'), 'm video/webm', 'dim 180x320']], content: 'standing up ' + U('tall') }, SK),
   // a clip its host has since deleted (it says so: 404) — no blank tile for it
   finalizeEvent({ kind: 1, created_at: now - 500, tags: [['imeta', 'url ' + U('dead'), 'm video/webm', 'dim 320x180']], content: 'deleted since ' + U('dead') }, SK),
 ];
@@ -83,7 +85,7 @@ try {
   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 >= 7, null, 20000));
+  check('the clips are in the feed', await waitFor(() => document.querySelectorAll('.notes-feed video.note-video').length >= 8, null, 20000));
   await page.evaluate(() => document.querySelector('.media-mode[data-mode="videos"]').click());
   await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length >= 3, null, 15000);
   await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length === 3, null, 8000);
@@ -94,6 +96,13 @@ try {
   check('the pager opens', await waitFor(() => !!document.querySelector('.mp-slide.mp-cur video.mp-media'), null, 6000));
   check('the clip is drawn no bigger than 1.5× its pixels', await waitFor(() => { const v = document.querySelector('.mp-slide.mp-cur video.mp-media'); return v && v.videoWidth && v.getBoundingClientRect().width <= v.videoWidth * 1.5 + 1 && v.style.maxWidth; }, null, 8000),
     JSON.stringify(await page.evaluate(() => { const v = document.querySelector('.mp-slide.mp-cur video.mp-media'); return v && { vw: v.videoWidth, w: v.getBoundingClientRect().width, max: v.style.maxWidth }; })));
+  // "All shapes", from the pager's top bar: the tall clip is there to flick to
+  const tallShown = () => page.evaluate(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/tall.webm')); return !!s && !s.closest('.mp-group').classList.contains('mp-off'); });
+  check('in the pager, the tall clip is held out on a wide screen', !(await tallShown()));
+  await page.evaluate(() => document.querySelector('.mp-fit').click());
+  check('…and "All shapes" brings it in', await waitFor(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/tall.webm')); return !!s && !s.closest('.mp-group').classList.contains('mp-off'); }, null, 3000));
+  await page.keyboard.press('Escape');
+  check('the grid has it too', await waitFor(() => [...document.querySelectorAll('.media-grid .media-tile')].some((t) => t.getAttribute('data-key').endsWith('/tall.webm')), null, 5000));
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } finally {
   await browser.close();