From d898efbe1f56834c27fd3b5fdc2f6b010f0b0429 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 22 Oct 2026 10:03:16 -0700 Subject: 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 --- src/features/messages.js | 9 ++++++--- tools/media-grid-dups-test.js | 15 ++++++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/features/messages.js b/src/features/messages.js index 6122ade..32d23a9 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -13958,7 +13958,10 @@ export function messagesFeature(ctx) { // or the same words from the same person posted again with another upload. const sameFile = (url) => { const m = /\/([0-9a-f]{64})(?:\.\w+)?(?:[?#]|$)/i.exec(url); return m ? m[1].toLowerCase() : url.replace(/[?#].*$/, ''); }; const saidAgain = (ev) => { const w = String(ev.content || '').replace(/https?:\/\/\S+/g, '').replace(/\s+/g, ' ').trim(); return w.length >= 8 ? ev.pubkey + '|' + w : null; }; - function mediaItems(c, kind) { + // (anyShape: the pager's list — every clip, the ones the wrong way round + // for the screen held out of sight by pagerFit, so "All shapes" there has + // them to show) + function mediaItems(c, kind, anyShape = false) { const out = [], seen = new Set(), said = new Map(); const r = mediaIndex(c.id); indexMedia(r, c.notes); @@ -13972,7 +13975,7 @@ export function messagesFeature(ctx) { if (again && said.has(again) && said.get(again) !== ev.id) continue; if (kind === 'videos') learnVideoMeta(ev); // (a clip whose host says it's deleted has nothing to show: a blank tile) - const urls = kind === 'videos' ? clipUrlsOf(ev).filter((u) => !clipGone(u)).filter(fitClip) + const urls = kind === 'videos' ? clipUrlsOf(ev).filter((u) => !clipGone(u) && (anyShape || fitClip(u))) : noteMediaUrls(ev.content).filter((u) => !u.startsWith('https://i.ytimg.com/')); // (the words are taken by a post that shows: one whose clip doesn't fit // the screen leaves them to the next) @@ -15594,7 +15597,7 @@ export function messagesFeature(ctx) { const c = feedNow(); pager.groups ||= new Map(); const src = pagerSource(); - for (const it of (src ? src.items(pager.kind) : mediaItems(c, pager.kind))) { + for (const it of (src ? src.items(pager.kind) : mediaItems(c, pager.kind, true))) { const k = mediaKey(it); if (pager.keys.has(k)) continue; pager.keys.add(k); 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(); -- cgit v1.2.3