diff options
Diffstat (limited to 'tools')
| -rw-r--r-- | tools/feed-media-cache-test.js | 4 | ||||
| -rw-r--r-- | tools/feed-media-views-test.js | 9 | ||||
| -rw-r--r-- | tools/grid-early-player-test.js | 14 | ||||
| -rw-r--r-- | tools/image-thumbnails-test.js | 19 | ||||
| -rw-r--r-- | tools/media-grid-dups-test.js | 90 | ||||
| -rw-r--r-- | tools/push-resubscribe-test.js | 103 | ||||
| -rw-r--r-- | tools/video-tile-poster-test.js | 40 |
7 files changed, 246 insertions, 33 deletions
diff --git a/tools/feed-media-cache-test.js b/tools/feed-media-cache-test.js index eee88c5..5a26ca2 100644 --- a/tools/feed-media-cache-test.js +++ b/tools/feed-media-cache-test.js @@ -14,7 +14,9 @@ let ok = true; const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; const dir = mkdtempSync(tmpdir() + '/mcache-'); const ff = (args) => { const p = Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', ...args]); if (p.exitCode !== 0) throw new Error('ffmpeg failed'); }; -for (const n of ['v1', 'v2', 'v3', 'h4', 'n5', 'r6']) ff(['-f', 'lavfi', '-i', 'testsrc=size=360x640:rate=10', '-t', '2', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', `${dir}/${n}.mp4`]); +// (six different files: one person's clips of one size to the byte are taken +// for one clip uploaded twice) +for (const [i, n] of ['v1', 'v2', 'v3', 'h4', 'n5', 'r6'].entries()) ff(['-f', 'lavfi', '-i', 'testsrc=size=360x640:rate=10', '-t', String(2 + i / 4), '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', `${dir}/${n}.mp4`]); ff(['-f', 'lavfi', '-i', 'testsrc=size=800x600', '-frames:v', '1', `${dir}/slow.jpg`]); const html = await buildHtml({ minify: true, pwa: false }); diff --git a/tools/feed-media-views-test.js b/tools/feed-media-views-test.js index 87bf3cf..dac9804 100644 --- a/tools/feed-media-views-test.js +++ b/tools/feed-media-views-test.js @@ -16,7 +16,9 @@ let ok = true; const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; const dir = mkdtempSync(tmpdir() + '/media-'); const ff = (args) => { const p = Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', ...args]); if (p.exitCode !== 0) throw new Error('ffmpeg failed'); }; -for (const n of ['a', 'b', 'c']) ff(['-f', 'lavfi', '-i', 'testsrc=size=360x640:rate=10', '-t', '2', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', `${dir}/${n}.mp4`]); +// (three different files: one person's clips of one size to the byte are +// taken for one clip uploaded twice) +for (const [n, t] of [['a', '2'], ['b', '2.5'], ['c', '3']]) ff(['-f', 'lavfi', '-i', 'testsrc=size=360x640:rate=10', '-t', t, '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', `${dir}/${n}.mp4`]); // index last (no faststart), from a server that ignores ranges ff(['-f', 'lavfi', '-i', 'testsrc=size=480x270:rate=10', '-t', '2', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', `${dir}/slow.mp4`]); for (const n of ['p1', 'p2', 'p3']) ff(['-f', 'lavfi', '-i', 'testsrc=size=800x600', '-frames:v', '1', `${dir}/${n}.jpg`]); @@ -95,7 +97,8 @@ const pagerState = () => page.evaluate(() => { const p = document.querySelector('.media-pager'); if (!p) return null; const sc = p.querySelector('.mp-scroll'); - const slides = [...sc.querySelectorAll('.mp-slide')]; // (not the loading screen at the end) + // (not the loading screen at the end, nor a clip held out for its shape) + const slides = [...sc.querySelectorAll('.mp-slide')].filter((x) => !x.closest('.mp-off')); const i = slides.findIndex((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); // the slide on screen const vids = slides.map((s) => s.querySelector('video')); return { n: slides.length, i, src: (slides[i]?.querySelector('.mp-media')?.getAttribute('data-src') || '').split('/').pop(), @@ -201,7 +204,7 @@ try { const vi = await info(); check('a probe reads the size, ranges, layout and picture size from 64 KB', vi['a.mp4']?.probed && vi['a.mp4'].ranges && vi['a.mp4'].faststart && vi['a.mp4'].size > 1000 && vi['a.mp4'].w === 360 && vi['a.mp4'].h === 640, JSON.stringify(vi['a.mp4'])); - check('the landscape clip is left out of Videos', !(await page.evaluate(() => [...document.querySelectorAll('.media-pager video')].some((v) => /slow/.test(v.getAttribute('data-src')))))); + check('the landscape clip is left out of Videos', !(await page.evaluate(() => [...document.querySelectorAll('.media-pager video')].some((v) => /slow/.test(v.getAttribute('data-src')) && !v.closest('.mp-off'))))); check('an index-last file from a server without ranges is seen for what it is', vi['slow.mp4']?.probed && vi['slow.mp4'].faststart === false && vi['slow.mp4'].ranges === false, JSON.stringify(vi['slow.mp4'])); check('the 50 MB clip is known as such before any of it plays', vi['c.mp4']?.size === 50000000, JSON.stringify(vi['c.mp4'])); await page.keyboard.press('ArrowDown'); await sleep(1200); diff --git a/tools/grid-early-player-test.js b/tools/grid-early-player-test.js index e6dd540..0ab1c1e 100644 --- a/tools/grid-early-player-test.js +++ b/tools/grid-early-player-test.js @@ -29,6 +29,9 @@ if (!existsSync(BIG)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', const SIZE = statSync(BIG).size; const FILE = new Uint8Array(await Bun.file(BIG).arrayBuffer()); const NAMES = ['c0', 'c1', 'c2', 'c3', 'c4']; +// one file each, a byte or two apart (trailing padding): one person's clips of +// one size to the byte are taken for one clip uploaded twice +const FILES = Object.fromEntries(NAMES.map((n, i) => { const f = new Uint8Array(SIZE + i); f.set(FILE); return [n, f]; })); const SK = generateSecretKey(), AUTHOR = getPublicKey(SK); const now = Math.floor(Date.now() / 1000); @@ -43,9 +46,10 @@ const server = Bun.serve({ port: 0, idleTimeout: 60, fetch: (req) => { const m = /^\/(c\d)\.webm$/.exec(path); if (m) { const headers = { 'access-control-allow-origin': '*', 'access-control-expose-headers': 'content-range, content-length', 'content-type': 'video/webm', 'accept-ranges': 'bytes', etag: '"' + m[1] + '-v1"', 'last-modified': 'Mon, 05 Oct 2026 00:00:00 GMT', 'cache-control': 'public, max-age=3600' }; - if (req.method === 'HEAD') return new Response(null, { headers: { ...headers, 'content-length': String(SIZE) } }); + const F = FILES[m[1]], S = F.length; + if (req.method === 'HEAD') return new Response(null, { headers: { ...headers, 'content-length': String(S) } }); const rg = /bytes=(\d+)-(\d*)/.exec(req.headers.get('range') || ''); - const start = rg ? +rg[1] : 0, end = rg && rg[2] ? Math.min(+rg[2], SIZE - 1) : SIZE - 1; + const start = rg ? +rg[1] : 0, end = rg && rg[2] ? Math.min(+rg[2], S - 1) : S - 1; const entry = { clip: m[1], dest: req.headers.get('sec-fetch-dest') || '', start, end, sent: 0 }; log.push(entry); let at = start; @@ -54,9 +58,9 @@ const server = Bun.serve({ port: 0, idleTimeout: 60, fetch: (req) => { if (at > end) { ctl.close(); return; } if (pace) { const due = t0 + ((at - start) / pace) * 1000; if (due > Date.now()) await new Promise((r) => setTimeout(r, due - Date.now())); } const n = Math.min(65536, end - at + 1); - ctl.enqueue(FILE.subarray(at, at + n)); at += n; entry.sent += n; + ctl.enqueue(F.subarray(at, at + n)); at += n; entry.sent += n; } }, { highWaterMark: 0 }); - return new Response(body, { status: rg ? 206 : 200, headers: { ...headers, 'content-length': String(end - start + 1), ...(rg ? { 'content-range': `bytes ${start}-${end}/${SIZE}` } : {}) } }); + return new Response(body, { status: rg ? 206 : 200, headers: { ...headers, 'content-length': String(end - start + 1), ...(rg ? { 'content-range': `bytes ${start}-${end}/${S}` } : {}) } }); } if (path.startsWith('/punks') || path === '/verify-worker.js') return new Response(Bun.file('dist' + path)); return new Response(html, { headers: { 'content-type': 'text/html' } }); @@ -64,7 +68,7 @@ const server = Bun.serve({ port: 0, idleTimeout: 60, fetch: (req) => { const U = (n) => server.url.origin.replace('localhost', '127.0.0.1') + '/' + n + '.webm'; // another origin than the page's: one to preconnect to const seeded = [ // each says its size and length (as Primal's and others' imeta do): a bitrate of SIZE / 50 bytes a second - ...NAMES.map((n, i) => finalizeEvent({ kind: 1, created_at: now - 100 - i * 100, tags: [['imeta', 'url ' + U(n), 'm video/webm', 'size ' + SIZE, 'duration 50', 'dim 180x320']], content: 'clip ' + n + ' here ' + U(n) }, SK)), + ...NAMES.map((n, i) => finalizeEvent({ kind: 1, created_at: now - 100 - i * 100, tags: [['imeta', 'url ' + U(n), 'm video/webm', 'size ' + (SIZE + i), 'duration 50', 'dim 180x320']], content: 'clip ' + n + ' here ' + U(n) }, SK)), ...Array.from({ length: 6 }, (_, i) => post('filler ' + i + ' ' + 'lorem ipsum dolor sit amet. '.repeat(5), 900 + i * 60)), ]; const sent = (clip, dest) => log.filter((e) => e.clip === clip && (!dest || e.dest === dest)).reduce((a, e) => a + e.sent, 0); 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 360ae0c..e7b67da 100644 --- a/tools/media-grid-dups-test.js +++ b/tools/media-grid-dups-test.js @@ -1,6 +1,8 @@ // The Videos grid shows a clip once, however many posts carry it: the same // file (or a Blossom hash's mirror), or the same words from the same person -// with a fresh upload (Adam, 2026-10-22). And on a big screen with a mouse, a +// with a fresh upload, or the same file uploaded twice under two hashes (a +// note and a video event: one size to the byte) (Adam, 2026-10-22). A picture +// that won't load leaves the Images grid instead of a broken-picture glyph. And on a big screen with a mouse, a // small clip opened in the pager is drawn at most 1.5× its own pixels, not // blown up across the monitor. Run: bun tools/media-grid-dups-test.js import puppeteer from './puppeteer.js'; @@ -12,24 +14,35 @@ 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 png = Bun.spawnSync(['ffmpeg', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=320x180', '-frames:v', '1', '-f', 'image2', '-c:v', 'png', '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]); +const clip = (name, size, t = 30) => { + const f = '/tmp/coinos-vpager-' + name + (t === 30 ? '' : '-' + t) + '.webm'; + if (!existsSync(f)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=' + size + ':rate=10', '-t', String(t), '-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') }; +// (the re-uploaded post's files differ from the reposted one's: one size from +// one person is taken for one file) +const CLIPS = { wide: clip('wide', '320x180'), again: clip('wide', '320x180', 25), other: clip('wide', '320x180', 26), tall: clip('tall', '180x320'), last: clip('last', '240x240') }; +// the twice-uploaded clip: its own file (the ones above are all one file, so a +// size match would take them for one clip too) +const TWIN = '/tmp/coinos-vpager-twin.webm'; +if (!existsSync(TWIN)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=320x180:rate=10', '-t', '20', '-c:v', 'libvpx', '-b:v', '100k', TWIN]); +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 }); 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|twina|twinb)\.webm$/.exec(path); if (m) { - const f = Bun.file(CLIPS[m[1]]), range = /^bytes=(\d+)-(\d*)$/.exec(req.headers.get('range') || ''); + const f = Bun.file(CLIPS[m[1]] || TWIN), range = /^bytes=(\d+)-(\d*)$/.exec(req.headers.get('range') || ''); if (!range) return new Response(f, { headers: { 'content-type': 'video/webm', 'accept-ranges': 'bytes' } }); 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' || path === '/deadpic.png') 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)); return new Response(html, { headers: { 'content-type': 'text/html' } }); @@ -45,6 +58,19 @@ 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), + // one person's clip twice, as a note and as a video event, a fresh hash + // each (the server stores it again): different words, same bytes + finalizeEvent({ kind: 1, created_at: now - 410, tags: [['imeta', 'url ' + U('twina'), 'm video/webm', 'dim 320x180', 'size ' + Bun.file(TWIN).size]], content: '#goodmorning another beat ' + U('twina') }, SK), + finalizeEvent({ kind: 22, created_at: now - 420, tags: [['imeta', 'url ' + U('twinb'), 'm video/webm', 'dim 320x180', 'size ' + Bun.file(TWIN).size], ['title', 'Random Beat']], content: 'Random Beat' }, SK), + // a picture its host has deleted + finalizeEvent({ kind: 1, created_at: now - 125, tags: [], content: 'gone now ' + server.url.origin + '/deadpic.png' }, SK), + // 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 + finalizeEvent({ kind: 1, created_at: now - 500, tags: [['imeta', 'url ' + U('dead'), 'm video/webm', 'dim 320x180']], content: 'deleted since ' + U('dead') }, SK), ]; const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required'] }); @@ -80,16 +106,60 @@ 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 >= 6, null, 20000)); + // (the feed paints its first rows: seven of the clips' posts are among them) + check('the clips are in the feed', await waitFor(() => document.querySelectorAll('.notes-feed video.note-video').length >= 7, null, 20000), String(await page.evaluate(() => document.querySelectorAll('.notes-feed video.note-video').length))); await page.evaluate(() => document.querySelector('.media-mode[data-mode="videos"]').click()); - await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length >= 3, null, 15000); + // a desktop-sized window starts on every shape (justified rows, the tall clip in) + check('a desktop starts on every shape', await waitFor(() => !!document.querySelector('.media-grid.justified') && [...document.querySelectorAll('.media-grid .media-tile')].some((t) => t.getAttribute('data-key').endsWith('/tall.webm')), null, 15000)); + // the rest starts from the screen's way round: wide only + await page.evaluate(() => { localStorage.setItem('coinos-clips-fit', 'fit'); document.querySelector('.media-mode[data-mode="images"]').click(); }); + await sleep(300); + await page.evaluate(() => document.querySelector('.media-mode[data-mode="videos"]').click()); + await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length >= 4, null, 15000); + await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length === 4, null, 8000); await sleep(1500); const tiles = await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile').length); - check('one tile per clip: the reposted file once, the re-uploaded post once, the other one', tiles === 3, tiles + ' tiles'); + 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 twice-uploaded file once, the other one, none for the deleted one', tiles === 4, tiles + ' tiles: ' + (await page.evaluate(() => [...document.querySelectorAll('.media-grid .media-tile')].map((t) => t.getAttribute('data-key').split('/').pop()).join(' ')))); 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)); 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('…which, being the desktop\'s default, is kept as no setting at all', await page.evaluate(() => localStorage.getItem('coinos-clips-fit') === null)); + 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)); + const rows = () => page.evaluate(() => { + const g = document.querySelector('.media-grid'), gw = g.getBoundingClientRect().width; + const ts = [...g.querySelectorAll('.media-tile')].map((t) => ({ k: t.getAttribute('data-key').split('/').pop(), r: t.getBoundingClientRect() })); + const by = new Map(); for (const t of ts) { const y = Math.round(t.r.top); (by.get(y) || by.set(y, []).get(y)).push(t); } + return { justified: g.classList.contains('justified'), gw, rows: [...by.values()].map((row) => ({ ks: row.map((t) => t.k), hs: row.map((t) => Math.round(t.r.height)), ars: row.map((t) => +(t.r.width / t.r.height).toFixed(2)), w: Math.round(row.reduce((a, t) => a + t.r.width, 0) + 3 * (row.length - 1)) })) }; + }); + await waitFor(() => { const t = [...document.querySelectorAll('.media-grid .media-tile')].find((x) => x.getAttribute('data-key').endsWith('/tall.webm')); return t && t.getBoundingClientRect().width < t.getBoundingClientRect().height; }, null, 5000); + const R = await rows(); + 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') })); + // the deleted picture: gone from the grid, and still gone after repaints + // (they rewrite each tile's class list) + await sleep(1500); + await page.evaluate(() => { document.querySelector('.media-mode[data-mode="videos"]').click(); }); + await sleep(300); + await page.evaluate(() => { document.querySelector('.media-mode[data-mode="images"]').click(); }); + await sleep(1500); + check('a picture that won\'t load leaves the grid for good', await page.evaluate(() => { + const ts = [...document.querySelectorAll('.media-grid .media-tile')]; + return ts.length >= 2 && !ts.some((t) => t.getAttribute('data-key').endsWith('deadpic.png') && getComputedStyle(t).display !== 'none'); + }), await page.evaluate(() => [...document.querySelectorAll('.media-grid .media-tile')].map((t) => t.getAttribute('data-key').split('/').pop() + (getComputedStyle(t).display === 'none' ? '(hidden)' : '')).join(' '))); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } finally { await browser.close(); diff --git a/tools/push-resubscribe-test.js b/tools/push-resubscribe-test.js new file mode 100644 index 0000000..19998b2 --- /dev/null +++ b/tools/push-resubscribe-test.js @@ -0,0 +1,103 @@ +// iOS drops a web push subscription after three pushes that showed no +// notification, and nothing used to make a new one: the wallet's background +// switch stayed on, getSubscription() came back empty, and the notifier kept +// a dead endpoint, so NWC requests stopped waking the closed app until the +// user toggled it off and on (reported by PullCap). Opening the app, or +// coming back to it, must subscribe again and tell the notifier. +// +// Run: bun tools/push-resubscribe-test.js +import puppeteer from './puppeteer.js'; +import { generateMnemonic } from '@scure/bip39'; +import { wordlist } from '@scure/bip39/wordlists/english'; +import { cacheKeyFor } from '../src/wallet.js'; +import { buildHtml } from '../build.js'; +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 html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 5263, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) }); +const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); +const page = await browser.newPage(); +const KEY = 'BP' + 'A'.repeat(85); // any 65-byte key, base64url +await page.evaluateOnNewDocument((KEY) => { + const bytes = () => Uint8Array.from(atob(KEY.replace(/-/g, '+').replace(/_/g, '/')), (c) => c.charCodeAt(0)); + window.__subs = 0; window.__regs = []; + let sub = null; // iOS has already dropped it + const make = () => ({ + endpoint: 'https://web.push.apple.com/sub' + window.__subs, + options: { applicationServerKey: bytes().buffer }, + toJSON() { return { endpoint: this.endpoint, keys: { p256dh: 'x', auth: 'y' } }; }, + unsubscribe: () => { sub = null; return Promise.resolve(true); }, + }); + window.__drop = () => { sub = null; }; + const reg = { + pushManager: { + getSubscription: () => Promise.resolve(sub), + subscribe: () => { window.__subs++; sub = make(); return Promise.resolve(sub); }, + }, + showNotification: () => Promise.resolve(), + }; + Object.defineProperty(navigator.serviceWorker, 'ready', { get: () => Promise.resolve(reg) }); + Notification.requestPermission = () => Promise.resolve('granted'); + Object.defineProperty(Notification, 'permission', { get: () => 'granted' }); + const f = window.fetch; + window.fetch = async (u, o) => { + const url = String(u); + if (url.startsWith('https://nwcpush.coinos.io/vapid')) return new Response(JSON.stringify({ publicKey: KEY })); + if (url.startsWith('https://nwcpush.coinos.io/register')) { + const b = JSON.parse(o.body); + if (b.servicePubkeys) window.__regs.push(b.subscription.endpoint); + return new Response('{"ok":true}'); + } + return f(u, o); + }; +}, KEY); +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; }; +try { + await page.setViewport({ width: 390, height: 844 }); + await page.goto('http://localhost:5263/', { 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(500); + await click('to import'); await sleep(400); + await page.waitForSelector('textarea'); + const mn = generateMnemonic(wordlist); + await page.type('textarea', mn); + await click('open wallet'); + await waitText('receive', 20000); + const base = cacheKeyFor(mn + '\n'); + + // a wallet answering in the background, whose subscription iOS took away + await page.evaluate((k) => localStorage.setItem(k + ':nwc', JSON.stringify({ + conns: [{ id: 'x', name: 'test', servicePk: 'a'.repeat(64), sk: 'b'.repeat(64), maxSat: 1000, budget: {} }], + background: true, + })), base); + await page.reload({ waitUntil: 'domcontentloaded' }); + await waitText('receive', 20000); + await sleep(3000); + let s = await page.evaluate(() => ({ subs: window.__subs, regs: window.__regs })); + check('opening the app subscribes again', s.subs >= 1, `${s.subs} subscribe()`); + check('...and registers the new endpoint for the connection', s.regs.includes('https://web.push.apple.com/sub' + s.subs), s.regs.join(' ')); + + // dropped again while the app sat in the background; it resumes, no reload + await page.evaluate(() => { window.__drop(); window.__regs.length = 0; }); + await page.evaluate(() => { + Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => 'visible' }); + document.dispatchEvent(new Event('visibilitychange')); + }); + await sleep(3000); + const before = s.subs; + s = await page.evaluate(() => ({ subs: window.__subs, regs: window.__regs })); + check('coming back to the app subscribes again', s.subs > before, `${s.subs} subscribe()`); + check('...and registers it', s.regs.includes('https://web.push.apple.com/sub' + s.subs), s.regs.join(' ')); + + // a live subscription is left alone + await page.evaluate(() => { window.__regs.length = 0; document.dispatchEvent(new Event('visibilitychange')); }); + await sleep(3000); + const again = await page.evaluate(() => ({ subs: window.__subs, regs: window.__regs })); + check('a subscription still there is reused', again.subs === s.subs && again.regs.length >= 1); +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ a dropped push subscription comes back' : '\n❌ failed'); +process.exit(ok ? 0 : 1); diff --git a/tools/video-tile-poster-test.js b/tools/video-tile-poster-test.js index 3b5fe93..48385fe 100644 --- a/tools/video-tile-poster-test.js +++ b/tools/video-tile-poster-test.js @@ -1,7 +1,8 @@ // Videos grid: a tile shows the server's still (vmedia thumb.jpg, cached at // the CDN) at once, instead of waiting on the browser's own probe and frame // grab — and never touches the clip itself for it. A clip the server has no -// picture for falls back to the frame grab. +// picture for falls back to the frame grab, and one the browser can't load +// either (deleted, its 404 without CORS headers) leaves the grid. // Run: bun tools/video-tile-poster-test.js import puppeteer from './puppeteer.js'; import { cacheKeyFor } from '../src/wallet.js'; @@ -13,12 +14,17 @@ const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' const JPG = '/tmp/coinos-video-tile-poster.jpg'; Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'color=c=orange:s=270x480', '-frames:v', '1', JPG]); const JPEG = Buffer.from(await Bun.file(JPG).arrayBuffer()); +const MP4 = '/tmp/coinos-video-tile-poster.mp4'; +Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'color=c=blue:s=360x640:d=1', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', MP4]); +const CLIPBYTES = Buffer.from(await Bun.file(MP4).arrayBuffer()); const AUTHOR = (() => { const sk = generateSecretKey(); return { sk, pk: getPublicKey(sk) }; })(); const now = Math.floor(Date.now() / 1000); const CLIP = (n) => 'https://media.test/' + n + '.mp4'; +// (each its own size: one person's clips of one size to the byte are taken +// for one clip uploaded twice) const post = (n, ago) => finalizeEvent({ kind: 1, created_at: now - ago, content: 'clip ' + n + ' ' + CLIP(n), - tags: [['imeta', 'url ' + CLIP(n), 'm video/mp4', 'size 900000', 'dim 360x640']] }, AUTHOR.sk); -const POSTS = [post('a', 100), post('b', 200), post('nopic', 300)]; + tags: [['imeta', 'url ' + CLIP(n), 'm video/mp4', 'size ' + (900000 + ago), 'dim 360x640']] }, AUTHOR.sk); +const POSTS = [post('a', 100), post('b', 200), post('nopic', 300), post('dead', 400)]; const html = await buildHtml({ minify: true, pwa: false }); const server = Bun.serve({ port: 0, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) }); @@ -31,10 +37,16 @@ page.on('request', (r) => { if (u.pathname.startsWith('/vmedia/thumb.jpg')) { const src = u.searchParams.get('u'); asked.push(['thumb', src]); - if (src === CLIP('nopic')) return r.respond({ status: 404, body: 'No picture' }); + if (src === CLIP('nopic') || src === CLIP('dead')) return r.respond({ status: 404, body: 'No picture' }); return r.respond({ status: 200, contentType: 'image/jpeg', body: JPEG, headers: { 'access-control-allow-origin': '*' } }); } - if (u.host === 'media.test') { asked.push(['clip', r.url()]); return r.abort(); } + if (u.host === 'media.test') { + asked.push(['clip', r.url()]); + // deleted, and the host's 404 says nothing to scripts (Primal's blossom) + if (u.pathname === '/dead.mp4') return r.respond({ status: 404, body: 'not found' }); + if (u.pathname === '/nopic.mp4') return r.respond({ status: 200, contentType: 'video/mp4', body: CLIPBYTES, headers: { 'access-control-allow-origin': '*' } }); + return r.abort(); + } r.continue(); }); await page.evaluateOnNewDocument(() => { @@ -79,17 +91,31 @@ try { await waitText('receive', 20000); await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]')?.click()); - check('the Videos grid has the three clips', await waitFor(() => document.querySelectorAll('.media-grid .media-tile.video').length === 3, 15000), + check('the Videos grid has the clips', await waitFor(() => document.querySelectorAll('.media-grid .media-tile.video').length >= 3, 15000), String(await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile.video').length))); check('two tiles show the server\'s still, loaded', await waitFor(() => [...document.querySelectorAll('.media-tile.video img')] .filter((i) => i.src.includes('/vmedia/thumb.jpg') && i.naturalWidth > 0).length === 2, 8000), JSON.stringify(await page.evaluate(() => [...document.querySelectorAll('.media-tile.video')].map((t) => (t.querySelector('img')?.src || t.querySelector('video') ? 'video' : t.innerHTML).slice(-40))))); check('the clip without one falls back to the frame grab', await waitFor(() => [...document.querySelectorAll('.media-tile.video')] .some((t) => !t.querySelector('img') && (t.querySelector('video') || t.querySelector('.media-tile-cost'))), 8000)); + check('the deleted clip leaves the grid instead of sitting there blank', await waitFor(() => { + const tiles = [...document.querySelectorAll('.media-grid .media-tile.video')].filter((t) => getComputedStyle(t).display !== 'none'); + return tiles.length === 3 && !document.querySelector('.media-grid video[src*="dead"]'); + }, 10000), String(await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile.video').length))); await sleep(1500); - const clipHits = asked.filter(([k, u]) => k === 'clip' && !u.includes('nopic')); + const clipHits = asked.filter(([k, u]) => k === 'clip' && !u.includes('nopic') && !u.includes('dead')); check('the pictured clips themselves were never fetched for a still', clipHits.length === 0, clipHits.map((x) => x[1]).join(', ')); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); + // remembered: the next visit leaves it out from the start + await sleep(2000); + asked.length = 0; + await page.reload({ waitUntil: 'domcontentloaded' }); + await waitText('receive', 20000); + await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]')?.click()); + await waitFor(() => document.querySelectorAll('.media-grid .media-tile.video').length >= 3, 15000); + await sleep(3000); + check('...and stays out after a reload', await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile.video').length) === 3 + && !asked.some(([k, u]) => k === 'clip' && u.includes('dead')), String(await page.evaluate(() => document.querySelectorAll('.media-grid .media-tile.video').length))); } finally { await browser.close(); server.stop(true); } console.log(ok ? '\n✅ video tiles show the server\'s still at once' : '\n❌ failed'); process.exit(ok ? 0 : 1); |