From cc84dd0c6c852b46b309079a5a90a54080fc049c Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 22 Oct 2026 10:12:49 -0700 Subject: Images grid in justified rows too: tiles in each picture's own shape (the tile thumbnail is no longer a square crop: 360px tall, its middle cut to 1:2–2:1; vmedia pic.webp?s=row for hosts without CORS; tile cache v2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- src/features/messages.js | 31 ++++++++++++++++++++++++------- src/image-thumbnails.js | 19 ++++++++++++------- src/style.css | 2 +- tools/image-thumbnails-test.js | 19 ++++++++++++------- tools/media-grid-dups-test.js | 12 ++++++++++++ 5 files changed, 61 insertions(+), 22 deletions(-) diff --git a/src/features/messages.js b/src/features/messages.js index 34bc815..c8b5683 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -13723,12 +13723,17 @@ export function messagesFeature(ctx) { // of the original (or the 1100px column copy) to fetch and decode, // and the browser's lazy margin is a screen or two. These are local and a // few KB, so every tile loads at once and decodes in no time. - const TILE_CACHE = 'coinos-tile-thumbs-v1', TILE_PX = 360, TILE_MAX = 1200; + const TILE_CACHE = 'coinos-tile-thumbs-v2', TILE_PX = 360, TILE_MAX = 1200; const tileThumbs = new Map(); // url -> object URL const tileKey = (url) => 'https://tile-thumb.invalid/?u=' + encodeURIComponent(url); const tileQueue = [], tileTried = new Set(), tileLooked = new Set(); let tileBusy = 0, tileRepaint = null; - const tileStore = () => caches.open(TILE_CACHE); + let tileOldGone = false; + const tileStore = () => { + // the square tiles of before (v1) go: the grid's rows want each shape + if (!tileOldGone) { tileOldGone = true; caches.delete('coinos-tile-thumbs-v1').catch(() => {}); } + return caches.open(TILE_CACHE); + }; async function warmTileThumbs(urls) { if (typeof caches === 'undefined') return; let found = 0; @@ -13748,7 +13753,7 @@ export function messagesFeature(ctx) { const kept = mediaReady.get(url)?.thumb; if (!kept && (noCorsHost(url) || corsRefused.has(url))) { // the host keeps its bytes: the server cuts the tile - const tile = await serverPicBlob(url, 'tile'); + const tile = await serverPicBlob(url, 'row'); if (tile) await saveTileThumb(url, tile); return; } @@ -13758,7 +13763,7 @@ export function messagesFeature(ctx) { if (!res.ok) return; blob = await res.blob(); } catch (e) { - if (e && e.corsRefused) { corsRefused.add(url); const tile = await serverPicBlob(url, 'tile'); if (tile) await saveTileThumb(url, tile); } + if (e && e.corsRefused) { corsRefused.add(url); const tile = await serverPicBlob(url, 'row'); if (tile) await saveTileThumb(url, tile); } return; } if (/gif/i.test(blob.type)) return; // animated: the tile shows the original @@ -13931,6 +13936,17 @@ export function messagesFeature(ctx) { const posterAr = new Map(); const clampAr = (r) => Math.min(2, Math.max(0.5, r)); const clipRatio = (url) => { const z = clipSize(url); return z ? clampAr(z.w / z.h) : posterAr.get(url) || 1; }; + // a grid item's: the file's measured size, the post's word for it (NIP-92 + // dim), or its still once that has loaded + function itemRatio(it) { + if (clipSize(it.url)) return clipRatio(it.url); + for (const tag of it.ev.tags || []) { + if (tag[0] !== 'imeta' || !tag.includes('url ' + it.url)) continue; + const m = /^(\d+)(?:\.0+)?x(\d+)(?:\.0+)?$/.exec(imetaFields(tag).dim || ''); + if (m && +m[1] && +m[2]) return clampAr(+m[1] / +m[2]); + } + return posterAr.get(it.url) || 1; + } function arFromStill(img, url) { if (clipSize(url) || !img.naturalWidth || !img.naturalHeight) return; const r = clampAr(img.naturalWidth / img.naturalHeight); @@ -14226,7 +14242,8 @@ export function messagesFeature(ctx) { // rows, each tile its clip's own proportions and each row as tall as it // takes to fill the width; tall ones only (a phone held upright) keep // the tall tiles three across. - const shape = mediaMode !== 'videos' ? '' : clipsAll() ? ' justified' : screenTall() ? '' : ' wide'; + // Pictures go in justified rows too, in their own shapes. + const shape = mediaMode === 'images' ? ' justified' : mediaMode !== 'videos' ? '' : clipsAll() ? ' justified' : screenTall() ? '' : ' wide'; return h('div', { class: 'media-grid' + shape, 'data-key': 'media-grid:' + mediaMode }, ...items.map((it) => { const k = mediaKey(it); @@ -14240,14 +14257,14 @@ export function messagesFeature(ctx) { const fromServer = mediaMode === 'videos' && poster && poster === serverThumb(it.url); return h('button', { class: 'media-tile' + (mediaMode === 'videos' ? ' video' : ''), type: 'button', 'data-key': 'tile:' + k, - style: shape === ' justified' ? '--ar:' + clipRatio(it.url).toFixed(3) : undefined, + style: shape === ' justified' ? '--ar:' + itemRatio(it).toFixed(3) : undefined, 'aria-label': displayName(it.ev.pubkey), onClick: () => openMediaPager(mediaMode, k), onPointerDown: mediaMode === 'videos' ? () => earlyPlayer(it.url) : undefined, }, mediaMode === 'images' || poster ? h('img', { src: poster || tileThumbs.get(it.url) || mediaSrc(it.url), alt: '', draggable: 'false', loading: poster || tileThumbs.has(it.url) ? 'eager' : 'lazy', decoding: 'async', - onLoad: mediaMode === 'videos' ? (e) => arFromStill(e.currentTarget, it.url) : undefined, + onLoad: (e) => arFromStill(e.currentTarget, it.url), onError: (e) => { if (fromServer) { serverThumbFailed.add(it.url); render(); return; } // the frame grab's turn const b = e.target.closest('.media-tile'); if (b) b.classList.add('broken'); diff --git a/src/image-thumbnails.js b/src/image-thumbnails.js index ffac4b9..2686dac 100644 --- a/src/image-thumbnails.js +++ b/src/image-thumbnails.js @@ -14,16 +14,21 @@ function thumbnailWorker() { const result = { width: bitmap.width, height: bitmap.height, media: null, tile: null }; // GIFs must keep animating; a canvas copy would freeze their first frame. if (!/gif/i.test(blob.type)) { + // The grid's tile: the picture in its own shape (justified rows), + // tileSize tall, its middle cut to between 1:2 and 2:1 — the most a + // tile stretches either way. if (tileSize) { - const side = Math.min(bitmap.width, bitmap.height), px = Math.min(tileSize, side); - let square; + const W = bitmap.width, H = bitmap.height; + const cw = Math.min(W, H * 2), ch = Math.min(H, W * 2); + const th = Math.min(tileSize, ch), tw = Math.max(1, Math.round(th * cw / ch)); + let cut; try { - square = await createImageBitmap(bitmap, (bitmap.width - side) / 2, (bitmap.height - side) / 2, side, side, - { resizeWidth: px, resizeHeight: px, resizeQuality: 'high' }); - const canvas = new OffscreenCanvas(px, px); - canvas.getContext('2d').drawImage(square, 0, 0); + cut = await createImageBitmap(bitmap, (W - cw) / 2, (H - ch) / 2, cw, ch, + { resizeWidth: tw, resizeHeight: th, resizeQuality: 'high' }); + const canvas = new OffscreenCanvas(tw, th); + canvas.getContext('2d').drawImage(cut, 0, 0); result.tile = await encode(canvas, 0.8); - } catch {} finally { square?.close(); } + } catch {} finally { cut?.close(); } } if (width && bitmap.width > width * 1.25) { try { diff --git a/src/style.css b/src/style.css index 3dcbf17..61d6f01 100644 --- a/src/style.css +++ b/src/style.css @@ -1546,7 +1546,7 @@ body::after { height and fill the width; the filler takes the last row's slack instead of stretching its few tiles. */ .media-grid.justified { display: flex; flex-wrap: wrap; --row-h: 140px; } -.media-grid.justified .media-tile.video { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; } +.media-grid.justified .media-tile { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; } .media-grid.justified::after { content: ''; flex: 1000 1 0; } @media (max-width: 600px) { .media-grid.justified { --row-h: 100px; } } .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } diff --git a/tools/image-thumbnails-test.js b/tools/image-thumbnails-test.js index ede7e11..6ece275 100644 --- a/tools/image-thumbnails-test.js +++ b/tools/image-thumbnails-test.js @@ -1,4 +1,4 @@ -// Real minified blob worker: both thumbnail sizes, animated originals, +// Real minified blob worker: both thumbnail sizes (the tile in the picture's own shape), animated originals, // bounded concurrency and graceful fallback, with no page-thread encoding. import assert from 'node:assert/strict'; import puppeteer from './puppeteer.js'; @@ -30,25 +30,30 @@ try { thumbnails(new Blob(['broken'],{type:'image/jpeg'}),{width:1100}), thumbnails(blob,{width:1100}), ]); const media = await decode(big.media), tile = await decode(big.tile); - const square = new OffscreenCanvas(360,360);square.getContext('2d').drawImage(tile,0,0); - const pixel=[...square.getContext('2d').getImageData(0,180,1,1).data]; + const whole = new OffscreenCanvas(tile.width,tile.height);whole.getContext('2d').drawImage(tile,0,0); + const pixel=[...whole.getContext('2d').getImageData(tile.width>>1,180,1,1).data], edge=[...whole.getContext('2d').getImageData(2,180,1,1).data]; + // a panorama past 2:1 keeps its middle, 2:1 + const pano=new OffscreenCanvas(4000,1000);pano.getContext('2d').fillStyle='green';pano.getContext('2d').fillRect(0,0,4000,1000); + const panoTile=await decode((await thumbnails(await encode.call(pano,{type:'image/png'}),{tileSize:360})).tile); const smallCanvas=new OffscreenCanvas(32,20);smallCanvas.getContext('2d'); const smallBlob=await encode.call(smallCanvas,{type:'image/png'}); const small=await thumbnails(smallBlob,{width:1100,tileSize:360}); const smallTile=await decode(small.tile); const gif=new Blob([Uint8Array.from(atob('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'),c=>c.charCodeAt(0))],{type:'image/gif'}); const animated=await thumbnails(gif,{width:1100,tileSize:360}); - const out={mainCalls,maxPending,big:[big.width,big.height],media:[media.width,media.height],tile:[tile.width,tile.height],pixel, + const out={mainCalls,maxPending,big:[big.width,big.height],media:[media.width,media.height],tile:[tile.width,tile.height],pixel,edge,pano:[panoTile.width,panoTile.height], tileOnly:!tiles.media&&!!tiles.tile,bad,recovered:!!recovered.media,smallOriginal:small.media===null,smallTile:[smallTile.width,smallTile.height], animated: animated && [animated.width,animated.height,animated.media,animated.tile]}; media.close();tile.close();smallTile.close();return out; }); console.log(result); assert.equal(result.mainCalls,0);assert.equal(result.maxPending,1); - assert.deepEqual(result.big,[3000,2000]);assert.deepEqual(result.media,[1100,733]);assert.deepEqual(result.tile,[360,360]); - assert(result.pixel[2]>200&&result.pixel[0]<30,'tile crops the center'); + assert.deepEqual(result.big,[3000,2000]);assert.deepEqual(result.media,[1100,733]);assert.deepEqual(result.tile,[540,360]); + // the grid's justified rows: a tile in the picture's own shape, 360 tall, uncut up to 2:1 + assert(result.pixel[2]>200&&result.pixel[0]<30&&result.edge[0]>200,'tile keeps the whole picture'); + assert.deepEqual(result.pano,[720,360]); assert(result.tileOnly&&result.recovered&&result.smallOriginal);assert.equal(result.bad,null); - assert.deepEqual(result.smallTile,[20,20]);assert.deepEqual(result.animated,[1,1,null,null]); + assert.deepEqual(result.smallTile,[32,20]);assert.deepEqual(result.animated,[1,1,null,null]); const fallback=await browser.newPage();await fallback.goto(server.url.href);await fallback.waitForFunction(()=>window.thumbnails); assert.equal(await fallback.evaluate(async()=>{window.Worker=class {constructor(){throw Error('blocked');}};return thumbnails(new Blob(['x']),{width:1100});}),null); console.log('✓ thumbnails stay off the page thread; sizes, crop, originals, queue, bad-image recovery and worker fallback pass'); diff --git a/tools/media-grid-dups-test.js b/tools/media-grid-dups-test.js index eeb105e..948e727 100644 --- a/tools/media-grid-dups-test.js +++ b/tools/media-grid-dups-test.js @@ -18,6 +18,8 @@ const clip = (name, size) => { return f; }; const CLIPS = { wide: clip('wide', '320x180'), again: clip('wide', '320x180'), other: clip('wide', '320x180'), tall: clip('tall', '180x320'), last: clip('last', '240x240') }; +const pic = (size) => Bun.spawnSync(['ffmpeg', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=' + size, '-frames:v', '1', '-f', 'image2', '-c:v', 'png', 'pipe:1']).stdout; +const picWide = pic('640x360'), picTall = pic('360x640'); const SK = generateSecretKey(), AUTHOR = getPublicKey(SK); const now = Math.floor(Date.now() / 1000); const html = await buildHtml({ minify: true, pwa: false }); @@ -30,6 +32,8 @@ const server = Bun.serve({ port: 0, fetch: (req) => { const a = +range[1], b = range[2] ? Math.min(+range[2], f.size - 1) : f.size - 1; return new Response(f.slice(a, b + 1), { status: 206, headers: { 'content-type': 'video/webm', 'accept-ranges': 'bytes', 'content-range': 'bytes ' + a + '-' + b + '/' + f.size, 'content-length': String(b - a + 1) } }); } + const pm = /^\/pic-(wide|tall)\.png$/.exec(path); + if (pm) return new Response(pm[1] === 'wide' ? picWide : picTall, { headers: { 'content-type': 'image/png', 'access-control-allow-origin': '*' } }); if (path === '/dead.webm') return new Response('gone', { status: 404 }); if (path === '/still.png') return new Response(png, { headers: { 'content-type': 'image/png' } }); if (path.startsWith('/punks') || path === '/verify-worker.js') return new Response(Bun.file('dist' + path)); @@ -46,6 +50,9 @@ 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), + // pictures, one wide and one tall, the post saying nothing of their size + finalizeEvent({ kind: 1, created_at: now - 120, tags: [], content: 'a wide view ' + server.url.origin + '/pic-wide.png' }, SK), + finalizeEvent({ kind: 1, created_at: now - 130, tags: [], content: 'a tall view ' + server.url.origin + '/pic-tall.png' }, SK), // 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 @@ -115,6 +122,11 @@ try { const tallT = R.rows.flatMap((r) => r.ks.map((k, i) => ({ k, ar: r.ars[i] }))).find((x) => x.k === 'tall.webm'); check('…in justified rows: every tile its clip\'s shape (the tall one tall, the wide ones wide)', R.justified && tallT && Math.abs(tallT.ar - 0.5625) < 0.03 && R.rows.flatMap((r) => r.ks.map((k, i) => ({ k, ar: r.ars[i] }))).filter((x) => x.k !== 'tall.webm' && x.k !== 'last.webm').every((x) => Math.abs(x.ar - 16 / 9) < 0.03), JSON.stringify(R)); check('…one height across each row', R.rows.every((r) => Math.max(...r.hs) - Math.min(...r.hs) <= 1), JSON.stringify(R.rows.map((r) => r.hs))); + // the Images grid: justified rows too, each picture in its own shape + await page.evaluate(() => document.querySelector('.media-mode[data-mode="images"]').click()); + const picAr = (name) => page.evaluate((n) => { const t = [...document.querySelectorAll('.media-grid .media-tile')].find((x) => x.getAttribute('data-key').endsWith(n)); if (!t) return null; const r = t.getBoundingClientRect(); return +(r.width / r.height).toFixed(2); }, name); + check('the Images grid lays pictures out in justified rows, each its own shape', await waitFor(() => { const g = document.querySelector('.media-grid.justified'); if (!g) return false; const ar = (n) => { const t = [...g.querySelectorAll('.media-tile')].find((x) => x.getAttribute('data-key').endsWith(n)); if (!t) return 0; const r = t.getBoundingClientRect(); return r.width / r.height; }; return Math.abs(ar('pic-wide.png') - 16 / 9) < 0.05 && Math.abs(ar('pic-tall.png') - 9 / 16) < 0.05; }, null, 10000), + JSON.stringify({ wide: await picAr('pic-wide.png'), tall: await picAr('pic-tall.png') })); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } finally { await browser.close(); -- cgit v1.2.3