diff options
| -rw-r--r-- | src/app.js | 40 | ||||
| -rw-r--r-- | src/features/messages.js | 2 | ||||
| -rw-r--r-- | tools/image-zoom-test.js | 1 | ||||
| -rw-r--r-- | tools/pager-close-test.js | 140 |
4 files changed, 179 insertions, 4 deletions
@@ -600,7 +600,7 @@ function imageViewer() { // mounted viewer: morphing can replace handlers with a new render's ones. document.querySelector('.lightbox')?.remove(); document.documentElement.classList.remove('no-scroll'); - goBack(() => { ui.lightbox = null; }); + closeLayer('lightbox'); }; // A tap on the picture closes it at every zoom level; gestures are filtered // by attachZoom before this click handler runs. @@ -702,7 +702,7 @@ function attachZoom(box, img, { wheel = true } = {}) { }, { passive: false }); } if (typeof window !== 'undefined') { - window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && ui.lightbox) goBack(() => { ui.lightbox = null; }); }); + window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && ui.lightbox) closeLayer('lightbox'); }); // Enter walks the Send flow: from an amount (or any field) it presses the // screen's main button — Review, Pay, Send — and with nothing focused it // presses it again, so amount ⏎ reviews and ⏎ again confirms. A held key @@ -1031,11 +1031,23 @@ window.addEventListener('popstate', (e) => { snap.screen = 'wallet'; snap.tab = ui.tab ?? null; try { history.replaceState({ nav: snap, i: st && typeof st.i === 'number' ? st.i : navIndex }, ''); } catch {} } + let corrected = false; + if (layerClose) { + const want = layerClose.expect; + clearTimeout(layerClose.timer); + layerClose = null; + if (navSig(snap) !== navSig(want)) { + snap = want; + corrected = true; + try { history.replaceState({ nav: snap, i: st && typeof st.i === 'number' ? st.i : navIndex }, '', navUrl(snap)); } catch {} + } + } restoringHistory = true; try { for (const f of NAV_FIELDS) ui[f] = (f === 'profEdit' || f === 'feedEdit') && snap[f] ? structuredClone(snap[f]) : f in snap ? snap[f] : null; if (st && typeof st.i === 'number') navIndex = st.i; else { const i = navStack.findIndex((s) => navSig(s) === navSig(snap)); if (i >= 0) navIndex = i; } + if (corrected && navIndex >= 0) navStack[navIndex] = snap; render(); } finally { restoringHistory = false; @@ -1050,6 +1062,28 @@ function goBack(toParent) { if (navIndex > 0) history.back(); else { toParent(); render(); } } +// Close something laid over the page (the media pager, the lightbox): Back, +// so the browser's Back doesn't reopen it — but landing on the page that +// was under it, whatever the entry Back reaches says. The entry under isn't +// always that page (after the app was reloaded in the background the +// browser's older entries are still there, or entries merged at boot), and +// blind Back walked off to the wallet, the chat list. That entry becomes the +// page under the layer. No Back to take (nothing of ours under it): shut in place. +let layerClose = null; // { expect: the snapshot to land on, timer } +function closeLayer(field) { + const cur = navStack[navIndex] || navSnapshot(); + const expect = { ...navSnapshot(), [field]: null }; + if (navIndex > 0 && cur) { + clearTimeout(layerClose && layerClose.timer); + // (the layer stays up until Back lands, as before; no popstate in time: + // a Back that went nowhere — shut where we are) + layerClose = { expect, timer: setTimeout(() => { if (layerClose && layerClose.expect === expect) { layerClose = null; ui[field] = null; render(); } }, 600) }; + history.back(); + return; + } + ui[field] = null; + render(); +} // Whether an in-app Back has anywhere of ours to go. A page opened straight // from a link has nothing under it; its Back would invent a parent. const canGoBack = () => navIndex > 0; @@ -6236,7 +6270,7 @@ async function importSnapshotFile(e) { // sits just before boot so every helper it captures is defined; the hooks are // only invoked at runtime (first render happens after loadLocale below). const ctx = { - h, ui, render, wallet, toast, copy, copyBtn, pasteBtn, blankSend, goBack, canGoBack, goHome, openExternal, showSend, + h, ui, render, wallet, toast, copy, copyBtn, pasteBtn, blankSend, goBack, canGoBack, closeLayer, goHome, openExternal, showSend, openWalletSettings: (view) => openWalletSettings(view), // one page of the Settings hub, from anywhere (Notifications' gear) openSettingsPage: (page) => { clearFeatureNav(); ui.screen = 'wallet'; ui.tab = 'settings'; ui.settingsPage = page; render(); try { window.scrollTo(0, 0); } catch {} }, diff --git a/src/features/messages.js b/src/features/messages.js index 16ae3a2..8f5adcb 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -12040,7 +12040,7 @@ export function messagesFeature(ctx) { ui.mediaPager = { kind, start, feed: curFeedId, fromFeed, at }; render(); } - const closeMediaPager = () => ctx.goBack(() => { ui.mediaPager = null; }); + const closeMediaPager = () => ctx.closeLayer('mediaPager'); // still on the picture that opened the pager (nothing swiped to yet) const pagerOnStart = () => !pager || !pager.cur || pager.cur.getAttribute('data-k') === pager.start; // Dismissing a pager opened from the feed after moving through it lands diff --git a/tools/image-zoom-test.js b/tools/image-zoom-test.js index 3ada708..0a11f0c 100644 --- a/tools/image-zoom-test.js +++ b/tools/image-zoom-test.js @@ -19,6 +19,7 @@ const goBack = (fn) => { if (backDelay) setTimeout(() => { fn(); render(); }, backDelay); else { fn(); render(); } }; +const closeLayer = (field) => goBack(() => { ui[field] = null; }); function render() { morphChildren(document.querySelector('#app'), ui.lightbox ? [imageViewer()] : []); } window.test = { ui, render, get backCalls() { return backCalls; }, get backSawViewer() { return backSawViewer; }, delayBack(ms) { backDelay = ms; }, diff --git a/tools/pager-close-test.js b/tools/pager-close-test.js new file mode 100644 index 0000000..73aa15b --- /dev/null +++ b/tools/pager-close-test.js @@ -0,0 +1,140 @@ +// Closing the pager lands on the feed under it, whatever the browser's +// history says. The × was Back, and the entry Back reached isn't always the +// feed (the browser's older entries outlive a reload of the app in the +// background; entries merge at boot): it took the reader to the wallet, then +// to the chat list. Now landing anywhere but the page under the pager puts +// the reader on that page, and that entry becomes it. And the ordinary case +// still steps Back, so the phone's Back doesn't reopen the pager. +// Run: bun tools/pager-close-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'; +import { existsSync } from 'node:fs'; +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 CLIP = '/tmp/coinos-tail-clip.webm'; +if (!existsSync(CLIP)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=180x320:rate=10', '-t', '20', '-c:v', 'libvpx', '-b:v', '100k', CLIP]); + +const SK = generateSecretKey(), AUTHOR = getPublicKey(SK); +const now = Math.floor(Date.now() / 1000); +const post = (content, ago) => finalizeEvent({ kind: 1, created_at: now - ago, tags: [], content }, SK); +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 0, fetch: (req) => { + const path = new URL(req.url).pathname; + if (/^\/c\d\.webm$/.test(path)) return new Response(Bun.file(CLIP), { headers: { 'content-type': 'video/webm' } }); + if (path.startsWith('/punks') || path === '/verify-worker.js') return new Response(Bun.file('dist' + path)); + return new Response(html, { headers: { 'content-type': 'text/html' } }); +} }); +const U = (n) => server.url.origin + '/' + n + '.webm'; +// what the phone has: two clips among words; what only the relays have (slowly): two older clips +const cached = [ + post('clip zero ' + U('c0'), 100), post('words between ' + 'lorem ipsum. '.repeat(6), 200), post('clip one ' + U('c1'), 300), +]; +const older = [post('clip two ' + U('c2'), 5000), post('more words ' + 'lorem ipsum. '.repeat(6), 5100), post('clip three ' + U('c3'), 5200)]; + +const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required'] }); +const page = await browser.newPage(); +// The relays: the newest posts at once; anything asked for by age (until) comes 3 s later +await page.evaluateOnNewDocument(([fresh, old]) => { + const all = [...fresh, ...old]; + const match = (f, e) => (!f.kinds || f.kinds.includes(e.kind)) && (!f.authors || f.authors.includes(e.pubkey)) && (!f.ids || f.ids.includes(e.id)) + && (!f.until || e.created_at <= f.until) && (!f.since || e.created_at >= f.since) && !Object.keys(f).some((k) => k.startsWith('#')); + window.__olderAsks = 0; + class FakeWS { + constructor(url) { this.url = String(url); this.readyState = 0; setTimeout(() => { this.readyState = 1; this.onopen && this.onopen({}); }, 5); } + send(raw) { + const m = JSON.parse(raw); + const reply = (x, ms = 5) => setTimeout(() => this.readyState === 1 && this.onmessage && this.onmessage({ data: JSON.stringify(x) }), ms); + if (m[0] === 'REQ') { + const filters = m.slice(2).filter((f) => !f.cache); + const slow = filters.some((f) => f.until); + if (slow) window.__olderAsks++; + const pool = slow ? all : fresh; + const ms = slow ? 3000 : 5; + for (const f of filters) { + const hits = pool.filter((e) => match(f, e)).sort((a, b) => b.created_at - a.created_at); + for (const e of f.limit ? hits.slice(0, f.limit) : hits) reply(['EVENT', m[1], e], ms); + } + reply(['EOSE', m[1]], ms + 5); + } else if (m[0] === 'EVENT') reply(['OK', m[1].id, true, '']); + else if (m[0] === 'COUNT') reply(['COUNT', m[1], { count: 0 }]); + } + close() { this.readyState = 3; this.onclose && this.onclose({ code: 1000 }); } + addEventListener(t, fn) { this['on' + t] = fn; } + removeEventListener() {} + } + FakeWS.CONNECTING = 0; FakeWS.OPEN = 1; FakeWS.CLOSING = 2; FakeWS.CLOSED = 3; + window.WebSocket = FakeWS; +}, [cached, older]); +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, arg, ms = 10000) => { for (let i = 0; i < ms / 100; i++) { if (await page.evaluate(fn, arg)) return true; await sleep(100); } return false; }; +// what the pager rests on: a clip's name, or 'tail' +const AT = () => { const sc = document.querySelector('.mp-scroll'); if (!sc) return null; const s = [...sc.querySelectorAll('.mp-slide, .mp-tail')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); return !s ? 'between' : s.classList.contains('mp-tail') ? 'tail' : s.getAttribute('data-k').split('/').pop().replace('.webm', ''); }; +const at = () => page.evaluate(AT); +const resting = (name, ms = 5000) => waitFor(([f, n]) => eval(f)() === n, ['(' + AT + ')', name], ms); +const playing = (name) => waitFor((n) => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => (x.getAttribute('data-k') || '').endsWith('/' + n + '.webm')); const v = s && s.querySelector('video.mp-media'); return v && !v.paused && v.currentTime > 0; }, name, 6000); +const tail = () => page.evaluate(() => { const t = document.querySelector('.mp-tail'); return t ? { text: t.textContent.trim(), done: t.classList.contains('done'), last: t === t.parentElement.lastElementChild } : null; }); + +const st = () => page.evaluate(() => ({ pager: !!document.querySelector('.media-pager'), feed: !!document.querySelector('.notes-feed'), chats: !!document.querySelector('.chat-list, .msg-list'), wallet: !document.querySelector('.notes-feed') && /receive/i.test(document.body.innerText), i: history.state && history.state.i })); +const openFirst = async () => { + const r = await page.evaluate(() => { const row = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('clip zero')); row.querySelector('video.note-video').scrollIntoView({ block: 'center' }); const b = row.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }); + await sleep(400); + await page.mouse.click(r.x, r.y); + return waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000); +}; +const close = async () => { await page.evaluate(() => document.querySelector('.mp-x').click()); await sleep(1200); }; +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: 'Clip Poster', t: Date.now() } })); + localStorage.setItem('btc-wallet-feed:' + k, 'following'); + }, [base, AUTHOR, cached]); + await page.reload({ waitUntil: 'domcontentloaded' }); + await waitText('receive', 20000); + await sleep(800); + await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Messages"]').click()); + await sleep(800); + const chatsNav = await page.evaluate(() => history.state); + await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click()); + await page.waitForSelector('.notes-feed video.note-video', { timeout: 20000 }); + await sleep(1200); + + console.log('\n[the ordinary case: × steps Back, onto the feed]'); + const before = await page.evaluate(() => history.state.i); + check('the pager opens', await openFirst()); + await page.keyboard.press('ArrowDown'); await sleep(800); + await close(); + let s = await st(); + check('× lands on the feed', !s.pager && s.feed, JSON.stringify(s)); + check('…by stepping Back (the pager\'s entry gone, not one more on top)', s.i === before, s.i + ' vs ' + before); + + console.log('\n[the entry under the pager isn\'t the feed (it says: the chat list)]'); + await page.evaluate((nav) => history.replaceState({ ...history.state, nav: nav.nav }, ''), chatsNav); + check('the pager opens', await openFirst()); + await page.keyboard.press('ArrowDown'); await sleep(800); + await close(); + s = await st(); + check('× still lands on the feed, not the chat list', !s.pager && s.feed, JSON.stringify(s)); + const fixed = await page.evaluate(() => history.state && history.state.nav && history.state.nav.msgView); + check('…and that entry is the feed now', fixed === 'feed', String(fixed)); + check('the phone\'s Back from there leaves the feed (no pager reopening)', await (async () => { await page.evaluate(() => history.back()); await sleep(1000); return !(await st()).pager; })()); + check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ closing the pager lands on the feed under it' : '\n❌ failed'); +process.exit(ok ? 0 : 1); |