From bdb8c3878df0439e3ebbcede5e2555f949a0cd7a Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 29 Sep 2026 08:33:28 -0700 Subject: Fix public media uploads and feed tab navigation --- src/media-upload.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 src/media-upload.js (limited to 'src/media-upload.js') diff --git a/src/media-upload.js b/src/media-upload.js new file mode 100644 index 0000000..686fec5 --- /dev/null +++ b/src/media-upload.js @@ -0,0 +1,86 @@ +import { sha256 } from '@noble/hashes/sha256'; +import { bytesToHex } from '@noble/hashes/utils'; + +// Independent public hosts: a phone upload should not fail just because one +// provider is down or rejects a particular container. nostr.download's NIP-96 +// document currently advertises large image/video/audio uploads; nostr.build +// is the second, widely-used Blossom home. +export const PUBLIC_MEDIA_SERVERS = ['https://nostr.download', 'https://blossom.nostr.build']; + +export class MediaUploadError extends Error { + constructor(code, details = '') { + super(code); + this.name = 'MediaUploadError'; + this.code = code; + this.details = details; + } +} + +async function fileHash(file) { + const hash = sha256.create(); + const chunk = 4 * 1024 * 1024; + for (let at = 0; at < file.size; at += chunk) + hash.update(new Uint8Array(await file.slice(at, at + chunk).arrayBuffer())); + return bytesToHex(hash.digest()); +} + +const responseUrl = (body) => body?.url + || body?.data?.[0]?.url + || (body?.tags || []).find((x) => x?.[0] === 'url')?.[1] + || null; + +function mediaUrl(url, server, file) { + const out = new URL(url, server); + const tail = out.pathname.split('/').at(-1) || ''; + if (/^[0-9a-f]{64}$/i.test(tail)) { + const named = String(file.name || '').match(/\.([a-z0-9]{1,8})$/i)?.[1]; + const byType = { 'video/quicktime': 'mov', 'video/mp4': 'mp4', 'video/webm': 'webm', + 'image/jpeg': 'jpg', 'image/png': 'png', 'image/webp': 'webp', 'image/gif': 'gif', 'image/avif': 'avif' }[file.type]; + const ext = (named || byType || '').toLowerCase(); + if (ext) out.pathname += '.' + ext; + } + return out.href; +} + +// BUD-02 upload. `signEvent` is deliberately injected: the app can use its +// always-available wallet identity, while tests need no secret key. +export async function uploadPublicMedia(file, signEvent, { + servers = PUBLIC_MEDIA_SERVERS, + fetcher = globalThis.fetch, + timeoutMs = 5 * 60_000, +} = {}) { + if (!file || !file.size || typeof signEvent !== 'function') throw new MediaUploadError('failed'); + const x = await fileHash(file); + const now = Math.floor(Date.now() / 1000); + const auth = await signEvent({ + kind: 24242, created_at: now - 5, content: 'upload', + tags: [['t', 'upload'], ['x', x], ['expiration', String(now + Math.ceil(timeoutMs / 1000) + 120)]], + }); + if (!auth) throw new MediaUploadError('failed'); + const authorization = 'Nostr ' + btoa(JSON.stringify(auth)); + const failures = []; + for (const server of servers) { + try { + const response = await fetcher(server.replace(/\/$/, '') + '/upload', { + method: 'PUT', body: file, signal: AbortSignal.timeout(timeoutMs), + headers: { + authorization, + 'content-type': file.type || 'application/octet-stream', + 'x-sha-256': x, + 'x-content-length': String(file.size), + }, + }); + let body = null; + try { body = await response.json(); } catch {} + const url = response.ok && responseUrl(body); + if (url) return mediaUrl(url, server, file); + failures.push({ status: response.status, reason: response.headers.get('x-reason') || body?.message || '' }); + } catch (error) { + failures.push({ status: 0, reason: error?.message || '' }); + } + } + const details = failures.map((x) => [x.status, x.reason].filter(Boolean).join(' ')).filter(Boolean).join('; '); + if (failures.length && failures.every((x) => x.status === 413)) throw new MediaUploadError('too-big', details); + if (failures.length && failures.every((x) => x.status === 415)) throw new MediaUploadError('unsupported', details); + throw new MediaUploadError('failed', details); +} -- cgit v1.2.3 From 505cd84813a80e0a69b2cc95aa93c68cf2856cb2 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 30 Sep 2026 10:10:10 -0700 Subject: Videos are shrunk on the phone before upload; nostr.build is the first media host. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit No public Blossom host transcodes (nostr.build's and primal's BUD-05 /media return the same bitrate), so a 15-20 Mbps phone clip stalled on playback. src/video-compress.js re-encodes on the device with WebCodecs via Mediabunny (a lazily loaded chunk, left out of the SW precache and the standalone file): H.264, short edge 720, ~2.5 Mbps, moov first, audio passed through, rotation baked in. Anything short of a clear win uploads the original. A toast counts the shrinking down. Media hosts: blossom.nostr.build first, nostr.download second (it was unreachable for hours); a HEAD probe skips a host that doesn't answer within 5 s instead of waiting out the whole upload timeout. video-compress-test: 1080p 20 Mbps 5 s (landscape and rotated portrait) → 1.6 MB H.264 720p 2.49 Mbps with audio, moov first, in 2-3 s. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Du1qT1wbkYwYK6zkGH79Rp --- build.js | 13 +++++- bun.lock | 7 +++ package.json | 1 + src/app.js | 11 +++++ src/i18n.js | 2 + src/media-upload.js | 17 +++++--- src/video-compress.js | 54 +++++++++++++++++++++++ tools/media-upload-test.js | 18 ++++++++ tools/video-compress-test.js | 101 +++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 217 insertions(+), 7 deletions(-) create mode 100644 src/video-compress.js create mode 100644 tools/video-compress-test.js (limited to 'src/media-upload.js') diff --git a/build.js b/build.js index c90e527..2bc5361 100644 --- a/build.js +++ b/build.js @@ -332,7 +332,13 @@ async function bundleApp({ minify, features, staging, splitting = false }) { // The split build emits real ESM chunks (deferred features arrive as their // own files); the single-file build inlines the dynamic imports instead. ...(splitting ? { splitting: true, format: 'esm', naming: { chunk: 'chunk-[hash].[ext]' } } : {}), - plugins: [featurePlugin(enabledFeatures(features)), flagsPlugin(staging)], + plugins: [featurePlugin(enabledFeatures(features)), flagsPlugin(staging), + // the single file inlines every dynamic import: the video compressor + // (Mediabunny, ~700 KB) would ride along in a file meant to be small + // and offline — there it uploads the original, as before + ...(splitting ? [] : [{ name: 'no-video-compress', setup(build) { + build.onLoad({ filter: /src\/video-compress\.js$/ }, () => ({ loader: 'js', contents: 'export async function compressVideo(f) { return f; }' })); + } }])], }); if (!result.success) { for (const log of result.logs) console.error(log); @@ -470,7 +476,10 @@ if (import.meta.main) { const nwcSw = feats.includes('nwc') && feats.includes('ark'); const swBody = SW .replaceAll('{{VERSION}}', version) - .replaceAll('{{EXTRA_SHELL}}', chunks.map((c) => `, '${c.name}'`).join('')) + // precached for offline use — except what only works online anyway: + // the video compressor (Mediabunny, ~700 KB) loads when a video is + // picked for upload, not on every install + .replaceAll('{{EXTRA_SHELL}}', chunks.filter((c) => !c.text.includes('Mediabunny Codec Registry')).map((c) => `, '${c.name}'`).join('')) .replaceAll('{{NWC_WAKE_FALLBACK}}', nwcSw ? '' : SW_WAKE_ONLY); await Bun.write('dist/sw.js', nwcSw ? swBody + '\n' + await buildSwNwc() : swBody); for (const f of STATIC) await Bun.write('dist/' + f, Bun.file('static/' + f)); diff --git a/bun.lock b/bun.lock index 658bc63..10e82e2 100644 --- a/bun.lock +++ b/bun.lock @@ -12,6 +12,7 @@ "@scure/bip39": "^1.6.0", "@scure/btc-signer": "^1.8.1", "jsqr": "^1.4.0", + "mediabunny": "^1.61.0", "nostr-tools": "^2.23.5", "qrcode-generator": "^2.0.4", }, @@ -43,6 +44,10 @@ "@scure/btc-signer": ["@scure/btc-signer@1.8.1", "", { "dependencies": { "@noble/curves": "~1.9.0", "@noble/hashes": "~1.8.0", "@scure/base": "~1.2.5", "micro-packed": "~0.7.3" } }, "sha512-8nX9T++dFyKpvqksNHfSi9CgRsGnHAQtCdIQ1y1GmbCGLpV97v4MUyemUUT6uDumKL3oo3m4niyY6A32nmdLuQ=="], + "@types/dom-mediacapture-transform": ["@types/dom-mediacapture-transform@0.1.12", "", { "dependencies": { "@types/dom-webcodecs": "*" } }, "sha512-d7/QsLRwF864A5mgIM/YrfiglHoYn7zgCcAoJgW404r+2DwnNr7EBbLnCWpmOMgH8y0te73L1AV6H1bmauaWFw=="], + + "@types/dom-webcodecs": ["@types/dom-webcodecs@0.1.13", "", {}, "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="], + "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], @@ -67,6 +72,8 @@ "jsqr": ["jsqr@1.4.0", "", {}, "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="], + "mediabunny": ["mediabunny@1.61.0", "", { "dependencies": { "@types/dom-mediacapture-transform": "^0.1.11", "@types/dom-webcodecs": "0.1.13" } }, "sha512-WciPOYwKZwgYkoBKcEK6JzzIf+w5whypPzFdOihOylZ/5Qv19FmNfRnTcaprH+jD136YpEASU30Eb6VNCJiz3A=="], + "micro-packed": ["micro-packed@0.7.3", "", { "dependencies": { "@scure/base": "~1.2.5" } }, "sha512-2Milxs+WNC00TRlem41oRswvw31146GiSaoCT7s3Xi2gMUglW5QBeqlQaZeHr5tJx9nm3i57LNXPqxOOaWtTYg=="], "mitt": ["mitt@3.0.1", "", {}, "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="], diff --git a/package.json b/package.json index 6783bf9..1d12b14 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@scure/bip39": "^1.6.0", "@scure/btc-signer": "^1.8.1", "jsqr": "^1.4.0", + "mediabunny": "^1.61.0", "nostr-tools": "^2.23.5", "qrcode-generator": "^2.0.4" }, diff --git a/src/app.js b/src/app.js index 0bf3086..5b0bdb6 100644 --- a/src/app.js +++ b/src/app.js @@ -3483,6 +3483,17 @@ async function onbUpload(file) { } async function publicMediaUpload(file) { + // a phone video is shrunk on the device first (see video-compress.js); + // the toast counts it down, since a long clip takes a while + if (/^video\//.test(file?.type || '')) { + let shown = -1; + const { compressVideo } = await import('./video-compress.js'); + file = await compressVideo(file, (p) => { + const pct = Math.floor(p * 100); + if (pct !== shown && pct % 5 === 0) { shown = pct; toast(t('mediaShrinking', { pct }), 60_000); } + }); + if (shown >= 0) toast(t('mediaUploading'), 4000); + } try { return await uploadPublicMedia(file, (event) => wallet.nostrSign(event)); } catch (error) { diff --git a/src/i18n.js b/src/i18n.js index 41ccb36..f54e760 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -245,6 +245,8 @@ const STR = { feedDelete: 'Delete feed', feedSaveAdhoc: 'Save feed', feedSaved: 'Feed saved', + mediaShrinking: 'Shrinking the video for streaming… {pct}%', + mediaUploading: 'Uploading…', feedNoQuery: 'Add people or topics to this feed.', feedOfTitle: '{name}’s timeline', feedOfLoading: 'Reading who they follow…', diff --git a/src/media-upload.js b/src/media-upload.js index 686fec5..8e5e8ed 100644 --- a/src/media-upload.js +++ b/src/media-upload.js @@ -2,10 +2,11 @@ import { sha256 } from '@noble/hashes/sha256'; import { bytesToHex } from '@noble/hashes/utils'; // Independent public hosts: a phone upload should not fail just because one -// provider is down or rejects a particular container. nostr.download's NIP-96 -// document currently advertises large image/video/audio uploads; nostr.build -// is the second, widely-used Blossom home. -export const PUBLIC_MEDIA_SERVERS = ['https://nostr.download', 'https://blossom.nostr.build']; +// provider is down or rejects a particular container. nostr.build is the +// widely-used Blossom home and goes first; nostr.download (which advertises +// large image/video/audio uploads) is the fallback — it was unreachable for +// hours on 2026-09-30, and every upload waited on it. +export const PUBLIC_MEDIA_SERVERS = ['https://blossom.nostr.build', 'https://nostr.download']; export class MediaUploadError extends Error { constructor(code, details = '') { @@ -59,7 +60,13 @@ export async function uploadPublicMedia(file, signEvent, { if (!auth) throw new MediaUploadError('failed'); const authorization = 'Nostr ' + btoa(JSON.stringify(auth)); const failures = []; - for (const server of servers) { + for (const [i, server] of servers.entries()) { + // A host that doesn't answer at all costs a few seconds, not the whole + // upload timeout. Any HTTP answer, even an error, means it's there. + if (i < servers.length - 1) { + try { await fetcher(server.replace(/\/$/, '') + '/upload', { method: 'HEAD', signal: AbortSignal.timeout(5000) }); } + catch (error) { failures.push({ status: 0, reason: 'unreachable' }); continue; } + } try { const response = await fetcher(server.replace(/\/$/, '') + '/upload', { method: 'PUT', body: file, signal: AbortSignal.timeout(timeoutMs), diff --git a/src/video-compress.js b/src/video-compress.js new file mode 100644 index 0000000..53d4eb0 --- /dev/null +++ b/src/video-compress.js @@ -0,0 +1,54 @@ +// A phone's video, made light enough to stream before it's uploaded. +// +// A phone records 1080p–4K at 15–20 Mbps; played back from a Blossom host +// over mobile data that stalls every few seconds, and none of the public +// hosts transcode (nostr.build's and primal's BUD-05 /media endpoints hand +// back the same bitrate — measured 2026-09-30). So the phone does it: +// WebCodecs on the device's hardware encoder, via Mediabunny (loaded only +// when a video is picked), to H.264 at 720p and ~2.5 Mbps, the moov atom up +// front so playback starts before the download ends. Audio passes through +// untouched when the container allows (phones record AAC already). +// +// Anything short of a clear win — no WebCodecs, an unreadable file, an +// encoder error, a result not meaningfully smaller — uploads the original, +// exactly as before. + +const SHORT_EDGE = 720; +const VIDEO_BPS = 2_500_000; + +export async function compressVideo(file, onProgress = () => {}) { + if (!file || !/^video\//.test(file.type || '')) return file; + if (typeof VideoEncoder === 'undefined' || typeof VideoDecoder === 'undefined') return file; + let mb; + try { mb = await import('mediabunny'); } catch { return file; } + const { Input, Output, Conversion, BlobSource, BufferTarget, Mp4OutputFormat, ALL_FORMATS } = mb; + const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS }); + try { + const video = await input.getPrimaryVideoTrack(); + if (!video) return file; + const seconds = await input.computeDuration(); + const w = video.displayWidth, h = video.displayHeight; + const short = Math.min(w, h); + const bps = seconds > 0 ? (file.size * 8) / seconds : Infinity; + // already light: nothing to gain, and a re-encode only loses quality + if (short <= SHORT_EDGE && bps <= VIDEO_BPS * 1.4) return file; + const size = short > SHORT_EDGE ? (w >= h ? { height: SHORT_EDGE } : { width: SHORT_EDGE }) : {}; + const output = new Output({ format: new Mp4OutputFormat({ fastStart: 'in-memory' }), target: new BufferTarget() }); + const conversion = await Conversion.init({ + input, output, + video: { ...size, codec: 'avc', bitrate: VIDEO_BPS, forceTranscode: true }, + }); + if (!conversion.isValid) return file; + conversion.onProgress = (p) => { try { onProgress(p); } catch {} }; + await conversion.execute(); + const buf = output.target.buffer; + // not worth it unless it's clearly smaller + if (!buf || buf.byteLength > file.size * 0.8) return file; + const name = String(file.name || 'video').replace(/\.[a-z0-9]{1,8}$/i, '') + '.mp4'; + return new File([buf], name, { type: 'video/mp4' }); + } catch { + return file; + } finally { + try { input.dispose?.(); } catch {} + } +} diff --git a/tools/media-upload-test.js b/tools/media-upload-test.js index f9cc56a..e19cac7 100644 --- a/tools/media-upload-test.js +++ b/tools/media-upload-test.js @@ -10,6 +10,7 @@ let signed = null; const sign = async (event) => (signed = { ...event, id: '1'.repeat(64), pubkey: '2'.repeat(64), sig: '3'.repeat(128) }); const calls = []; const fetcher = async (url, init) => { + if (init?.method === 'HEAD') return new Response('', { status: 200 }); // the reachability probe calls.push({ url, init }); if (url.startsWith('https://first')) return new Response(JSON.stringify({ message: 'temporarily unavailable' }), { status: 503 }); return new Response(JSON.stringify({ url: 'https://cdn.example/clip.mov' }), { status: 201, headers: { 'content-type': 'application/json' } }); @@ -23,6 +24,23 @@ check('hashes the file and binds the hash into Blossom auth', calls[1].init.head && signed.tags.some((tag) => tag[0] === 'x' && tag[1] === calls[1].init.headers['x-sha-256'])); check('sends signed Blossom authorization', calls[1].init.headers.authorization.startsWith('Nostr ')); +// a host that never answers is skipped after the probe, not waited on +{ + const puts = []; + const t0 = Date.now(); + const u = await uploadPublicMedia(file, sign, { + servers: ['https://dead.example', 'https://alive.example'], timeoutMs: 60_000, + fetcher: async (url, init) => { + if (url.startsWith('https://dead')) return new Promise((_, reject) => init.signal.addEventListener('abort', () => reject(new Error('timeout')))); + if (init.method === 'HEAD') return new Response('', { status: 404 }); + puts.push(url); + return new Response(JSON.stringify({ url: 'https://alive.example/x.mov' }), { status: 201 }); + }, + }); + check('an unreachable host is skipped within seconds', u === 'https://alive.example/x.mov' && Date.now() - t0 < 7000 && puts.length === 1); +} +check('nostr.build is the first host', (await import('../src/media-upload.js')).PUBLIC_MEDIA_SERVERS[0] === 'https://blossom.nostr.build'); + const bareHashUrl = await uploadPublicMedia(file, sign, { servers: ['https://media.example'], timeoutMs: 1000, fetcher: async () => new Response(JSON.stringify({ url: '/' + 'a'.repeat(64) }), { status: 201 }), diff --git a/tools/video-compress-test.js b/tools/video-compress-test.js new file mode 100644 index 0000000..dc17036 --- /dev/null +++ b/tools/video-compress-test.js @@ -0,0 +1,101 @@ +// A phone video is shrunk on the device before upload: 1080p at 20 Mbps in, +// H.264 720p around 2.5 Mbps out, moov first (streams while downloading), +// audio kept. Pasted into the reply box like a keyboard/gallery pick; the +// upload is caught and its bytes checked with ffprobe. +// +// Run: bun tools/video-compress-test.js +import puppeteer from 'puppeteer-core'; +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 SRC = '/tmp/coinos-video-compress-src.mp4', OUT = '/tmp/coinos-video-compress-out.mp4'; +// --portrait: the way phones record upright video — landscape frames plus a +// 90° rotation flag in the container +const PORTRAIT = process.argv.includes('--portrait'); +Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc2=size=1920x1080:rate=30', '-f', 'lavfi', '-i', 'sine=frequency=440', + '-t', '5', '-c:v', 'libx264', '-b:v', '20M', '-maxrate', '20M', '-bufsize', '20M', '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-shortest', SRC]); +if (PORTRAIT) { + // (ffmpeg 4 writes the flag only on a remux) + Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-i', SRC, '-c', 'copy', '-metadata:s:v:0', 'rotate=90', SRC + '.rot.mp4']); + Bun.spawnSync(['mv', SRC + '.rot.mp4', SRC]); + const r = JSON.parse(new TextDecoder().decode(Bun.spawnSync(['ffprobe', '-v', 'error', '-show_streams', '-of', 'json', SRC]).stdout)).streams[0]; + console.log(' source rotation:', JSON.stringify(r.side_data_list || r.tags?.rotate || 'none')); +} +const srcSize = Bun.file(SRC).size; +// the split build: the compressor and Mediabunny are chunks loaded on demand +const built = Bun.spawnSync(['bun', 'run', 'build.js'], { stdout: 'pipe', stderr: 'pipe' }); +if (built.exitCode) { console.log(new TextDecoder().decode(built.stderr)); process.exit(1); } +const dist = 'dist'; +const server = Bun.serve({ port: 5287, fetch: async (req) => { + const p = new URL(req.url).pathname; + if (p === '/src.mp4') return new Response(Bun.file(SRC), { headers: { 'content-type': 'video/mp4' } }); + const f = Bun.file(dist + (p === '/' || !p.includes('.') ? '/index.html' : p)); + return (await f.exists()) ? new Response(f) : new Response(Bun.file(dist + '/index.html')); +} }); +const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); +const page = await browser.newPage(); +await page.evaluateOnNewDocument(() => { + const f = window.fetch; + window.fetch = async (url, init) => { + if (init && init.method === 'PUT' && /nostr\.build|nostr\.download/.test(String(url))) { + window.__put = { size: init.body.size, type: init.body.type, buf: await init.body.arrayBuffer() }; + return new Response(JSON.stringify({ url: 'https://blossom.nostr.build/' + 'f'.repeat(64) + '.mp4' }), { status: 201 }); + } + if (init && init.method === 'HEAD' && /nostr\.build|nostr\.download/.test(String(url))) return new Response('', { status: 200 }); + return f(url, init); + }; +}); +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 = 15000) => { 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('http://localhost:5287/', { waitUntil: 'domcontentloaded' }); + await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest')); + await page.reload({ waitUntil: 'domcontentloaded' }); + await sleep(600); + await click('create a new wallet'); await sleep(600); + await page.waitForSelector('.words .w .t'); + await click('skip verification'); + await waitText('receive', 20000); + check('the browser can encode H.264 (WebCodecs)', await page.evaluate(async () => (await VideoEncoder.isConfigSupported({ codec: 'avc1.42001f', width: 1280, height: 720, bitrate: 2.5e6 })).supported)); + // the post composer: the pencil on the feed + await page.evaluate(() => document.querySelector('.app-bottom-nav .app-nav-button').click()); + await sleep(1500); + await page.evaluate(() => document.querySelector('button[aria-label="New post"], button[title="New post"]')?.click()); + const box = await waitFor(() => !!document.querySelector('.post-input'), 8000); + check('the post composer opens', box); + const t0 = Date.now(); + await page.evaluate(async () => { + const b = await (await fetch('/src.mp4')).blob(); + const dt = new DataTransfer(); + dt.items.add(new File([b], 'phone.mp4', { type: 'video/mp4' })); + document.querySelector('.post-input').dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })); + }); + const sawShrink = await waitText('shrinking the video', 15000); + check('the toast says it is shrinking the video', sawShrink); + const done = await waitFor(() => !!window.__put, 120000); + const put = done && await page.evaluate(() => ({ size: window.__put.size, type: window.__put.type })); + const secs = ((Date.now() - t0) / 1000).toFixed(1); + check('the upload is the shrunk video', !!put && put.type === 'video/mp4' && put.size < srcSize * 0.35, + put ? `${(srcSize / 1e6).toFixed(1)} MB → ${(put.size / 1e6).toFixed(1)} MB in ${secs}s` : 'no upload'); + if (put) { + const b64 = await page.evaluate(() => { let s = ''; const u = new Uint8Array(window.__put.buf); for (let i = 0; i < u.length; i += 0x8000) s += String.fromCharCode(...u.subarray(i, i + 0x8000)); return btoa(s); }); + await Bun.write(OUT, Buffer.from(b64, 'base64')); + const probe = JSON.parse(new TextDecoder().decode(Bun.spawnSync(['ffprobe', '-v', 'error', '-show_streams', '-show_format', '-of', 'json', OUT]).stdout)); + const v = probe.streams.find((s) => s.codec_type === 'video'), a = probe.streams.find((s) => s.codec_type === 'audio'); + check('...H.264 at 720p', v?.codec_name === 'h264' && Math.min(v.width, v.height) === 720, `${v?.codec_name} ${v?.width}x${v?.height}`); + if (PORTRAIT) { + // upright on screen: either the frames are portrait, or they keep the rotation flag + const rot = Math.abs(+((v.side_data_list || []).find((d) => d.rotation != null)?.rotation ?? v.tags?.rotate ?? 0)); + check('...still upright (portrait)', (v.height > v.width) !== (rot === 90 || rot === 270), `${v.width}x${v.height} rotation ${rot}`); + } + check('...around 2.5 Mbps', v && +v.bit_rate < 3.5e6, (+v?.bit_rate / 1e6).toFixed(2) + ' Mbps'); + check('...the whole clip, with its sound', Math.abs(+probe.format.duration - 5) < 0.3 && !!a, probe.format.duration + 's, audio ' + a?.codec_name); + const head = new Uint8Array(await Bun.file(OUT).slice(0, 4096).arrayBuffer()); + const txt = new TextDecoder('latin1').decode(head); + check('...moov before mdat, so it plays while downloading', txt.indexOf('moov') >= 0 && (txt.indexOf('mdat') < 0 || txt.indexOf('moov') < txt.indexOf('mdat'))); + } +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ videos are shrunk before upload' : '\n❌ failed'); +process.exit(ok ? 0 : 1); -- cgit v1.2.3 From 0076c591df9432e2bb5b2281afc1fb4106500297 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 30 Sep 2026 10:23:20 -0700 Subject: A picture or video on its way shows a bar with its percentage — shrinking, then uploading; the pencil reads "New post". MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ui.mediaProgress { stage, pct } (a render per whole percent) drawn as a labelled bar under the reply and post composers, instead of only the paperclip turning into a spinner. Upload progress comes from XMLHttpRequest upload events (fetch() has none) in uploadPublicMedia's new onProgress; injected fetchers (tests) keep the fetch path. upload-progress-test: 1.2 MB at 400 KB/s climbs 0→100 in steps. video-compress-test: the bar counts the shrink, then the upload. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Du1qT1wbkYwYK6zkGH79Rp --- src/app.js | 32 ++++++++++++++++++++------------ src/features/messages.js | 18 ++++++++++++++++-- src/i18n.js | 4 ++-- src/media-upload.js | 26 ++++++++++++++++++++++++-- src/style.css | 5 +++++ tools/upload-progress-test.js | 37 +++++++++++++++++++++++++++++++++++++ tools/video-compress-test.js | 43 ++++++++++++++++++++++++++++++++++--------- 7 files changed, 138 insertions(+), 27 deletions(-) create mode 100644 tools/upload-progress-test.js (limited to 'src/media-upload.js') diff --git a/src/app.js b/src/app.js index 5b0bdb6..b6721da 100644 --- a/src/app.js +++ b/src/app.js @@ -3482,24 +3482,32 @@ async function onbUpload(file) { return url; } +// ui.mediaProgress = { stage: 'shrink' | 'upload', pct } while a picture or +// video is on its way; the composers draw it as a bar under the field. +// A render per whole percent, no more. +function mediaProgress(stage, fraction) { + const pct = Math.max(0, Math.min(100, Math.floor(fraction * 100))); + const cur = ui.mediaProgress; + if (cur && cur.stage === stage && cur.pct === pct) return; + ui.mediaProgress = { stage, pct }; + render(); +} async function publicMediaUpload(file) { - // a phone video is shrunk on the device first (see video-compress.js); - // the toast counts it down, since a long clip takes a while - if (/^video\//.test(file?.type || '')) { - let shown = -1; - const { compressVideo } = await import('./video-compress.js'); - file = await compressVideo(file, (p) => { - const pct = Math.floor(p * 100); - if (pct !== shown && pct % 5 === 0) { shown = pct; toast(t('mediaShrinking', { pct }), 60_000); } - }); - if (shown >= 0) toast(t('mediaUploading'), 4000); - } try { - return await uploadPublicMedia(file, (event) => wallet.nostrSign(event)); + // a phone video is shrunk on the device first (see video-compress.js) + if (/^video\//.test(file?.type || '')) { + mediaProgress('shrink', 0); + const { compressVideo } = await import('./video-compress.js'); + file = await compressVideo(file, (p) => mediaProgress('shrink', p)); + } + mediaProgress('upload', 0); + return await uploadPublicMedia(file, (event) => wallet.nostrSign(event), { onProgress: (p) => mediaProgress('upload', p) }); } catch (error) { if (error instanceof MediaUploadError && error.code === 'too-big') throw new Error(t('mediaUploadTooBig')); if (error instanceof MediaUploadError && error.code === 'unsupported') throw new Error(t('mediaUploadUnsupported')); throw new Error(t('msgUploadFailed')); + } finally { + ui.mediaProgress = null; } } diff --git a/src/features/messages.js b/src/features/messages.js index 6a68c38..0c0acf4 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -7127,6 +7127,7 @@ export function messagesFeature(ctx) { style: 'gap:8px;margin:0 -8px;padding:' + (joined ? '2px' : '8px') + ' 8px 10px;background:var(--accent-soft,rgba(128,128,128,.08));border-radius:' + (joined ? '0 0 8px 8px' : '8px'), }, s.preview ? draftPreview(s.draft) : null, + mediaBar(), // A textarea that grows with the reply, like the chat composer: Enter // sends, Shift+Enter (or Ctrl+J) breaks the line — a reply used to be // a one-line field with no way to write a paragraph. @@ -7833,6 +7834,16 @@ export function messagesFeature(ctx) { ? h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...noteBody(body)) : h('div', { class: 'small faint' }, t('composePreviewEmpty'))); } + // Shrinking, then uploading, as a labelled bar with its percentage — the + // paperclip's spinner said only "busy", however long a video took. + function mediaBar() { + const m = ui.mediaProgress; + if (!m) return null; + const label = t(m.stage === 'shrink' ? 'mediaShrinking' : 'mediaUploading'); + return h('div', { class: 'media-progress', role: 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(m.pct), 'aria-label': label }, + h('div', { class: 'row between small' }, h('span', { class: 'muted' }, label + '…'), h('span', { class: 'media-progress-pct' }, m.pct + '%')), + h('div', { class: 'media-progress-track' }, h('div', { class: 'media-progress-fill', style: 'width:' + m.pct + '%' }))); + } const previewBtn = (on, toggle) => h('button', { class: 'attach-btn' + (on ? ' on' : ''), title: on ? t('composePreviewHide') : t('composePreview'), @@ -7859,6 +7870,7 @@ export function messagesFeature(ctx) { }, }), ui.postPreview ? draftPreview(text) : null, + mediaBar(), h('div', { class: 'row gap6' }, h('button', { class: 'btn-primary grow', disabled: !!ui.postUploading, onClick: async () => { const body = composeText().trim(); @@ -8105,9 +8117,11 @@ export function messagesFeature(ctx) { onClick: () => { ui.feedMenu = true; render(); }, }, '\u22ef'), visitor ? null : h('button', { - class: 'btn-sm', style: 'flex-shrink:0', title: t('profNewPost'), 'aria-label': t('profNewPost'), + // the pencil alone wasn't read as "write a post": it says so + class: 'btn-sm feed-new-post', style: 'flex-shrink:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap', title: t('profNewPost'), 'aria-label': t('profNewPost'), onClick: () => { ui.profCompose = ui.profCompose == null ? (draftFor(POST_DRAFT) || '') : null; render(); }, - html: '' })), + }, h('span', { style: 'display:flex', html: '' }), + h('span', {}, t('profNewPost')))), ui.feedRelayEdit && ui.feedRelayEdit.id === def.id ? relayPanel(def) : null, visitor ? null : feedChips(), visitor ? null : postComposer(), diff --git a/src/i18n.js b/src/i18n.js index f54e760..9932ced 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -245,8 +245,8 @@ const STR = { feedDelete: 'Delete feed', feedSaveAdhoc: 'Save feed', feedSaved: 'Feed saved', - mediaShrinking: 'Shrinking the video for streaming… {pct}%', - mediaUploading: 'Uploading…', + mediaShrinking: 'Shrinking video for streaming', + mediaUploading: 'Uploading', feedNoQuery: 'Add people or topics to this feed.', feedOfTitle: '{name}’s timeline', feedOfLoading: 'Reading who they follow…', diff --git a/src/media-upload.js b/src/media-upload.js index 8e5e8ed..9301939 100644 --- a/src/media-upload.js +++ b/src/media-upload.js @@ -43,13 +43,32 @@ function mediaUrl(url, server, file) { return out.href; } +// A PUT that reports how much of the body has gone out: fetch() can't, so in +// the browser (with the real fetch) it's XMLHttpRequest. Answers like fetch. +function putWithProgress(url, { body, headers, signal }, onProgress) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('PUT', url); + for (const [k, v] of Object.entries(headers)) xhr.setRequestHeader(k, v); + xhr.upload.onprogress = (e) => { if (e.lengthComputable) onProgress(e.loaded / e.total); }; + xhr.onload = () => resolve(new Response(xhr.responseText, { + status: xhr.status, headers: { 'x-reason': xhr.getResponseHeader('x-reason') || '' } })); + xhr.onerror = () => reject(new Error('network error')); + xhr.ontimeout = () => reject(new Error('timeout')); + if (signal) signal.addEventListener('abort', () => { xhr.abort(); reject(new Error('timeout')); }); + xhr.send(body); + }); +} + // BUD-02 upload. `signEvent` is deliberately injected: the app can use its // always-available wallet identity, while tests need no secret key. export async function uploadPublicMedia(file, signEvent, { servers = PUBLIC_MEDIA_SERVERS, fetcher = globalThis.fetch, timeoutMs = 5 * 60_000, + onProgress = null, // (fraction 0..1) as the bytes go out } = {}) { + const tracked = onProgress && typeof XMLHttpRequest !== 'undefined' && fetcher === globalThis.fetch; if (!file || !file.size || typeof signEvent !== 'function') throw new MediaUploadError('failed'); const x = await fileHash(file); const now = Math.floor(Date.now() / 1000); @@ -68,7 +87,7 @@ export async function uploadPublicMedia(file, signEvent, { catch (error) { failures.push({ status: 0, reason: 'unreachable' }); continue; } } try { - const response = await fetcher(server.replace(/\/$/, '') + '/upload', { + const init = { method: 'PUT', body: file, signal: AbortSignal.timeout(timeoutMs), headers: { authorization, @@ -76,7 +95,10 @@ export async function uploadPublicMedia(file, signEvent, { 'x-sha-256': x, 'x-content-length': String(file.size), }, - }); + }; + if (onProgress) onProgress(0); + const target = server.replace(/\/$/, '') + '/upload'; + const response = tracked ? await putWithProgress(target, init, onProgress) : await fetcher(target, init); let body = null; try { body = await response.json(); } catch {} const url = response.ok && responseUrl(body); diff --git a/src/style.css b/src/style.css index 9bdaf3c..60d850c 100644 --- a/src/style.css +++ b/src/style.css @@ -256,6 +256,11 @@ coinos-text { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; line-height: 1.4; cursor: text; } coinos-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } +/* a picture or video on its way: shrinking, then uploading (mediaBar) */ +.media-progress { display: flex; flex-direction: column; gap: 4px; } +.media-progress-pct { font-variant-numeric: tabular-nums; } +.media-progress-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } +.media-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s linear; } coinos-text[data-empty]::before { content: attr(placeholder); color: var(--muted); pointer-events: none; } .chat-compose coinos-text { flex: 1; min-width: 0; padding: 10px 13px; max-height: 120px; } .mono-input { font-family: var(--mono); } diff --git a/tools/upload-progress-test.js b/tools/upload-progress-test.js new file mode 100644 index 0000000..25bf91c --- /dev/null +++ b/tools/upload-progress-test.js @@ -0,0 +1,37 @@ +// uploadPublicMedia reports how much of the file has gone out (XMLHttpRequest +// upload events — fetch() can't), from 0 to 1, on a slow uplink. +// +// Run: bun tools/upload-progress-test.js +import puppeteer from 'puppeteer-core'; +let ok = true; +const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; +const js = await Bun.build({ entrypoints: ['src/media-upload.js'], target: 'browser' }).then((b) => b.outputs[0].text()); +let got = 0; +const server = Bun.serve({ port: 5289, async fetch(req) { + const cors = { 'access-control-allow-origin': '*', 'access-control-allow-methods': 'PUT, HEAD', 'access-control-allow-headers': '*', 'access-control-expose-headers': 'x-reason' }; + const p = new URL(req.url).pathname; + if (req.method === 'OPTIONS') return new Response(null, { status: 204, headers: cors }); + if (p === '/upload' && req.method === 'PUT') { got = (await req.arrayBuffer()).byteLength; return Response.json({ url: 'http://localhost:5289/' + 'a'.repeat(64) }, { status: 201, headers: cors }); } + if (p === '/m.js') return new Response(js, { headers: { 'content-type': 'text/javascript' } }); + return new Response('', { 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(); +try { + await page.goto('http://localhost:5289/'); + await page.waitForFunction(() => !!window.m); + const cdp = await page.createCDPSession(); + await cdp.send('Network.emulateNetworkConditions', { offline: false, latency: 20, downloadThroughput: 5e6, uploadThroughput: 400e3 }); + const r = await page.evaluate(async () => { + const seen = []; + const file = new File([new Uint8Array(1_200_000)], 'v.mp4', { type: 'video/mp4' }); + const sign = async (e) => ({ ...e, id: '1'.repeat(64), pubkey: '2'.repeat(64), sig: '3'.repeat(128) }); + const url = await window.m.uploadPublicMedia(file, sign, { servers: ['http://localhost:5289'], onProgress: (p) => seen.push(Math.round(p * 100)) }); + return { url, seen }; + }); + check('the upload lands', r.url.startsWith('http://localhost:5289/') && got === 1_200_000, got + ' bytes'); + check('progress climbs from 0 to 100 as the bytes go', r.seen[0] === 0 && r.seen.at(-1) === 100 && r.seen.filter((p) => p > 0 && p < 100).length >= 3 + && r.seen.every((p, i) => !i || p >= r.seen[i - 1]), JSON.stringify(r.seen.slice(0, 15)) + (r.seen.length > 15 ? '…' : '')); +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ uploads report their progress' : '\n❌ failed'); +process.exit(ok ? 0 : 1); diff --git a/tools/video-compress-test.js b/tools/video-compress-test.js index dc17036..ce1a936 100644 --- a/tools/video-compress-test.js +++ b/tools/video-compress-test.js @@ -34,16 +34,34 @@ const server = Bun.serve({ port: 5287, fetch: async (req) => { } }); const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); const page = await browser.newPage(); +// the upload goes out by XMLHttpRequest (for its progress events): keep a +// copy of the body, and answer at the network layer — nothing leaves await page.evaluateOnNewDocument(() => { - const f = window.fetch; - window.fetch = async (url, init) => { - if (init && init.method === 'PUT' && /nostr\.build|nostr\.download/.test(String(url))) { - window.__put = { size: init.body.size, type: init.body.type, buf: await init.body.arrayBuffer() }; - return new Response(JSON.stringify({ url: 'https://blossom.nostr.build/' + 'f'.repeat(64) + '.mp4' }), { status: 201 }); + const open = XMLHttpRequest.prototype.open, send = XMLHttpRequest.prototype.send; + XMLHttpRequest.prototype.open = function (m, url) { this.__m = m; this.__url = String(url); return open.apply(this, arguments); }; + XMLHttpRequest.prototype.send = function (body) { + if (this.__m === 'PUT' && /nostr\.build|nostr\.download/.test(this.__url) && body instanceof Blob) { + body.arrayBuffer().then((buf) => { window.__put = { size: body.size, type: body.type, buf }; }); } - if (init && init.method === 'HEAD' && /nostr\.build|nostr\.download/.test(String(url))) return new Response('', { status: 200 }); - return f(url, init); + return send.apply(this, arguments); }; + // every state the progress bar shows + window.__prog = []; + new MutationObserver(() => { + const m = document.querySelector('.media-progress'); + const s = m ? m.innerText.replace(/\s+/g, ' ').trim() : null; + if (s && window.__prog.at(-1) !== s) window.__prog.push(s); + }).observe(document, { childList: true, subtree: true, characterData: true, attributes: true }); +}); +await page.setRequestInterception(true); +page.on('request', (req) => { + const u = req.url(); + if (!/nostr\.build|nostr\.download/.test(u)) return req.continue(); + const cors = { 'access-control-allow-origin': '*', 'access-control-allow-methods': 'PUT, HEAD, GET', 'access-control-allow-headers': '*' }; + if (req.method() === 'OPTIONS') return req.respond({ status: 204, headers: cors }); + if (req.method() === 'HEAD') return req.respond({ status: 200, headers: cors }); + return req.respond({ status: 201, headers: cors, contentType: 'application/json', + body: JSON.stringify({ url: 'https://blossom.nostr.build/' + 'f'.repeat(64) + '.mp4' }) }); }); 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; }; @@ -72,9 +90,16 @@ try { dt.items.add(new File([b], 'phone.mp4', { type: 'video/mp4' })); document.querySelector('.post-input').dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })); }); - const sawShrink = await waitText('shrinking the video', 15000); - check('the toast says it is shrinking the video', sawShrink); const done = await waitFor(() => !!window.__put, 120000); + await waitFor(() => !document.querySelector('.media-progress'), 10000); + const prog = await page.evaluate(() => window.__prog); + const pcts = (stage) => prog.filter((x) => x.startsWith(stage)).map((x) => +x.match(/(\d+)%/)[1]); + const shrink = pcts('Shrinking video'), up = pcts('Uploading'); + check('a bar shows the shrinking with its percentage', shrink.length >= 3 && shrink.some((p) => p > 0 && p < 100), JSON.stringify(shrink.slice(0, 12))); + // (the answer here is instant, so only its start shows — the percentages + // themselves are upload-progress-test's) + check('...then the upload with its own', up.length >= 1 && prog.findIndex((x) => x.startsWith('Uploading')) > prog.findIndex((x) => x.startsWith('Shrinking')), JSON.stringify(up)); + check('...and goes away when it is done', await page.evaluate(() => !document.querySelector('.media-progress'))); const put = done && await page.evaluate(() => ({ size: window.__put.size, type: window.__put.type })); const secs = ((Date.now() - t0) / 1000).toFixed(1); check('the upload is the shrunk video', !!put && put.type === 'video/mp4' && put.size < srcSize * 0.35, -- cgit v1.2.3