From 9e48c1513bccdd1bd9cb59736d9efe7676353f6b Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 22 Oct 2026 10:05:15 -0700 Subject: Videos grid on a wide screen (wide clips only): one clip to a row with its 16:9 poster whole, instead of portrait slivers three across Co-Authored-By: Claude Opus 5.5 --- src/features/messages.js | 5 ++++- src/style.css | 3 +++ tools/media-grid-dups-test.js | 2 ++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/features/messages.js b/src/features/messages.js index 32d23a9..0f8c78a 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -14205,7 +14205,10 @@ export function messagesFeature(ctx) { if (missing.length) warmTileThumbs(missing).then(() => queueTileThumbs(missing.filter((u) => !tileThumbs.has(u)))); } if (mediaMode === 'videos') for (const it of items.slice(0, 24)) preconnect(playSrc(it.url)); - return h('div', { class: 'media-grid', 'data-key': 'media-grid:' + mediaMode }, + // wide clips only (a wide screen, not "All shapes"): one to a row, wide + // posters, not slivers of them cut to portrait tiles (Adam, 2026-10-22) + const wideRows = mediaMode === 'videos' && !clipsAll() && !screenTall(); + return h('div', { class: 'media-grid' + (wideRows ? ' wide' : ''), 'data-key': 'media-grid:' + mediaMode }, ...items.map((it) => { const k = mediaKey(it); // a video tile shows a still at once: kept, given, or the server's diff --git a/src/style.css b/src/style.css index 4fbe96b..25f3bed 100644 --- a/src/style.css +++ b/src/style.css @@ -1538,6 +1538,9 @@ body::after { background: var(--surface2); overflow: hidden; cursor: pointer; } .media-tile.video { aspect-ratio: 9 / 16; } +/* only wide clips in it: one to a row, the poster whole */ +.media-grid.wide { grid-template-columns: 1fr; gap: 6px; } +.media-grid.wide .media-tile.video { aspect-ratio: 16 / 9; } .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .media-tile.broken { display: none; } .media-tile-play { diff --git a/tools/media-grid-dups-test.js b/tools/media-grid-dups-test.js index 31ddb9d..2181f69 100644 --- a/tools/media-grid-dups-test.js +++ b/tools/media-grid-dups-test.js @@ -91,6 +91,7 @@ try { await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length === 3, null, 8000); await sleep(1500); const tiles = await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile').length); + check('a wide screen lays the clips out one to a row, wide', await page.evaluate(() => { const g = document.querySelector('.media-grid'), t = g.querySelector('.media-tile').getBoundingClientRect(); return g.classList.contains('wide') && Math.abs(t.width / t.height - 16 / 9) < 0.05 && t.width > g.getBoundingClientRect().width * 0.95; })); check('one tile per clip: the reposted file once, the re-uploaded post once, the other one, none for the deleted one', tiles === 3, tiles + ' tiles'); await page.evaluate(() => document.querySelector('.media-grid .media-tile').click()); check('the pager opens', await waitFor(() => !!document.querySelector('.mp-slide.mp-cur video.mp-media'), null, 6000)); @@ -103,6 +104,7 @@ try { 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('…in the 3-across grid of tall tiles again', await page.evaluate(() => !document.querySelector('.media-grid').classList.contains('wide'))); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } finally { await browser.close(); -- cgit v1.2.3