diff options
| -rw-r--r-- | src/features/messages.js | 16 | ||||
| -rw-r--r-- | tools/video-tile-poster-test.js | 95 | ||||
| -rw-r--r-- | vmedia/server.js | 2 |
3 files changed, 110 insertions, 3 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index ae976a6..ed4136a 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -7181,6 +7181,7 @@ export function messagesFeature(ctx) { const serverThumb = (url) => (vmediaOk(url) ? VMEDIA + 'thumb.jpg?u=' + encodeURIComponent(url) : undefined); const h264Of = (url) => VMEDIA + 'h264.mp4?u=' + encodeURIComponent(url); const noPicture = new Set(), h264Failed = new Set(); + const serverThumbFailed = new Set(); // clips vmedia had no picture for (this session) let hevcPlays; const canHevc = () => hevcPlays ??= (() => { try { return !!document.createElement('video').canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"'); } catch { return true; } @@ -11121,7 +11122,14 @@ export function messagesFeature(ctx) { return h('div', { class: 'media-grid', 'data-key': 'media-grid:' + mediaMode }, ...items.map((it) => { const k = mediaKey(it); - const poster = mediaMode === 'videos' ? videoThumbs.get(it.url) || posterOf(it.ev, it.url) || (videoInfo.get(it.url) || {}).image : null; + // a video tile shows a still at once: kept, given, or the server's + // (vmedia, cached at the CDN — about a second the first time anyone + // asks, instant after). The browser's own frame grab — a probe, then + // a megabyte of the clip, decoded — is left for clips the server + // couldn't picture. + const poster = mediaMode === 'videos' ? videoThumbs.get(it.url) || posterOf(it.ev, it.url) || (videoInfo.get(it.url) || {}).image + || (serverThumbFailed.has(it.url) ? null : serverThumb(it.url)) : null; + const fromServer = mediaMode === 'videos' && poster && poster === serverThumb(it.url); return h('button', { class: 'media-tile' + (mediaMode === 'videos' ? ' video' : ''), type: 'button', 'data-key': 'tile:' + k, 'aria-label': displayName(it.ev.pubkey), onClick: () => openMediaPager(mediaMode, k), @@ -11129,9 +11137,13 @@ export function messagesFeature(ctx) { 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', - onError: (e) => { const b = e.target.closest('.media-tile'); if (b) b.classList.add('broken'); } }) + 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'); + } }) // no still to show: the clip's first frame, fetched once the tile is near : h('video', { 'data-src': it.url + '#t=0.1', muted: true, playsinline: true, preload: 'metadata' }), + mediaMode === 'videos' && poster && videoInfo.get(it.url)?.size && videoHeavy(it.url) ? h('span', { class: 'media-tile-badge' }, heavyLabel(it.url)) : null, mediaMode === 'videos' ? h('span', { class: 'media-tile-play', 'aria-hidden': 'true' }, '▶') : null); })); } diff --git a/tools/video-tile-poster-test.js b/tools/video-tile-poster-test.js new file mode 100644 index 0000000..3b5fe93 --- /dev/null +++ b/tools/video-tile-poster-test.js @@ -0,0 +1,95 @@ +// 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. +// Run: bun tools/video-tile-poster-test.js +import puppeteer from './puppeteer.js'; +import { cacheKeyFor } from '../src/wallet.js'; +import { generateSecretKey, getPublicKey, finalizeEvent } from 'nostr-tools/pure'; +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 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 AUTHOR = (() => { const sk = generateSecretKey(); return { sk, pk: getPublicKey(sk) }; })(); +const now = Math.floor(Date.now() / 1000); +const CLIP = (n) => 'https://media.test/' + n + '.mp4'; +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)]; + +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 0, 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(); +await page.setRequestInterception(true); +const asked = []; +page.on('request', (r) => { + const u = new URL(r.url()); + 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' }); + 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(); } + r.continue(); +}); +await page.evaluateOnNewDocument(() => { + const Real = window.WebSocket; + window.WebSocket = function (...a) { + const ws = new Real(...a); + const send = ws.send.bind(ws); + ws.send = (data) => { + try { const m = JSON.parse(data); if (m[0] === 'REQ') { setTimeout(() => ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EOSE', m[1]]) })), 0); return; } if (m[0] === 'EVENT') return; } catch {} + return send(data); + }; + return ws; + }; + window.WebSocket.prototype = Real.prototype; Object.assign(window.WebSocket, Real); +}); +const errs = []; +page.on('pageerror', (e) => errs.push(String(e))); +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; }; +const waitFor = async (fn, ms = 10000) => { for (let i = 0; i < ms / 200; i++) { if (await page.evaluate(fn)) return true; await sleep(200); } return false; }; + +try { + await page.setViewport({ width: 390, height: 844 }); + await page.goto(server.url.href, { 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(600); + await page.waitForSelector('.words .w .t'); + const mn = (await page.$$eval('.words .w .t', (l) => l.map((e) => e.textContent.trim()))).join(' '); + await click('skip verification'); + await waitText('receive', 20000); + const base = cacheKeyFor(mn + '\n'); + await page.evaluate(([k, pk, ns]) => { + localStorage.setItem(k + ':follows', JSON.stringify({ tags: [['p', pk]], c: '', at: Math.floor(Date.now() / 1000) })); + localStorage.setItem(k + ':feedNotes', JSON.stringify(ns)); + localStorage.setItem(k + ':profiles', JSON.stringify({ [pk]: { name: 'Clipper', t: Date.now() } })); + localStorage.setItem('btc-wallet-feed:' + k, 'following'); + localStorage.setItem('coinos-feed-media', 'videos'); + }, [base, AUTHOR.pk, POSTS]); + await page.reload({ waitUntil: 'domcontentloaded' }); + 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), + 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)); + await sleep(1500); + const clipHits = asked.filter(([k, u]) => k === 'clip' && !u.includes('nopic')); + 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(' | ')); +} 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); diff --git a/vmedia/server.js b/vmedia/server.js index d1b7a8a..bf92c6b 100644 --- a/vmedia/server.js +++ b/vmedia/server.js @@ -22,7 +22,7 @@ const DATA = process.env.DATA || '/data'; const THUMBS = DATA + '/thumbs', CLIPS = DATA + '/h264', WORK = DATA + '/work'; for (const d of [THUMBS, CLIPS, WORK]) mkdirSync(d, { recursive: true }); const THUMB_CAP = 2e9, CLIP_CAP = 25e9; -const THUMB_JOBS = 4, CLIP_JOBS = 2, CLIP_QUEUE = 6; +const THUMB_JOBS = 8, CLIP_JOBS = 2, CLIP_QUEUE = 6; const CLIP_PER_HOUR = 12; // new transcodes per address const MAX_SECONDS = 900; const FAIL_TTL = 3_600_000; |