diff options
| -rw-r--r-- | src/features/messages.js | 41 | ||||
| -rw-r--r-- | tools/slow-image-test.js | 2 | ||||
| -rw-r--r-- | tools/video-tap-test.js | 91 |
3 files changed, 133 insertions, 1 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 358bd2e..a3452ee 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -7285,6 +7285,46 @@ export function messagesFeature(ctx) { } }); } + // A tap on the picture itself (not the player's own play button or its + // control bar): inline, it goes full screen — the corner button is a + // reach on a phone. Full screen, it pauses a playing clip, and a tap on a + // paused one comes back out. The player's controls are inside the video + // element, so where they sit is judged from the tap's position. + const fsElement = () => (typeof document !== 'undefined' && (document.fullscreenElement || document.webkitFullscreenElement)) || null; + function videoTap(e, url) { + const v = e.currentTarget; + if (!v || v.tagName !== 'VIDEO') return; + const r = v.getBoundingClientRect(); + const x = e.clientX - r.left, y = e.clientY - r.top; + // a video's taps are its own: never the post's (which opened the thread + // and, full screen, took the player out from under the reader) + e.stopPropagation(); + const fs = fsElement() === v; + // full screen, the video's box is the screen; its controls sit along the bottom + const H = fs ? window.innerHeight : r.height, W = fs ? window.innerWidth : r.width; + if (v.controls && y > H - 64) return; // the control bar + if (v.controls && v.paused && Math.hypot(x - W / 2, y - H / 2) < 48) return; // the big play button + e.preventDefault(); + if (fs) { + if (!v.paused) v.pause(); + else (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {}); + return; + } + // a clip still idle (autoplaying, no controls) becomes the reader's + wokeClips.add(url); + const box = v.closest('.note-video-box'); + if (box) { box.classList.remove('idle'); box._skipMorph = true; } + v.controls = true; + const go = v.requestFullscreen || v.webkitRequestFullscreen || v.webkitEnterFullscreen; + if (!go) return; + Promise.resolve(go.call(v)).then(() => { + // a wide clip fills a phone on its side + if (v.videoWidth > v.videoHeight) screen.orientation?.lock?.('landscape').catch(() => {}); + }).catch(() => {}); + } + if (typeof document !== 'undefined') document.addEventListener('fullscreenchange', () => { + if (!fsElement()) { try { screen.orientation?.unlock?.(); } catch {} } + }); function videoNode(url, { stable = false } = {}) { const loud = unmutedClips.has(url); // Nothing is fetched until the clip is about to play (preload none): a @@ -7299,6 +7339,7 @@ export function messagesFeature(ctx) { style: stable ? videoBoxStyle(feedMedia(url)) : undefined, // learned now, used by the next paint of any row with this clip onLoadedmetadata: (e) => rememberVideo(url, e.target.videoWidth, e.target.videoHeight), + onClick: (e) => videoTap(e, url), onError: (e) => { if (!stable && !(e.target.getAttribute('src') || '').startsWith(VMEDIA)) { const b = e.target.parentElement; if (b) b.style.display = 'none'; } } }); guardPicture(v, url); v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted diff --git a/tools/slow-image-test.js b/tools/slow-image-test.js index 463a855..103f6da 100644 --- a/tools/slow-image-test.js +++ b/tools/slow-image-test.js @@ -60,7 +60,7 @@ try { await page.reload({ waitUntil: 'domcontentloaded' }); await waitText('receive', 20000); await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]')?.click()); - check('both posts show', await waitText('slow picture', 30000) && await waitText('dead picture', 5000), JSON.stringify(await page.evaluate(() => [window.__live, (window.__reqlog || []).filter((r) => r.includes('[1')).slice(0, 4)]))); + check('both posts show', await waitText('slow picture', 30000) && await waitText('dead picture', 5000)); check('the slow picture is a picture box, not a link', await page.evaluate((r) => { const n = eval(r); return !!n && !!n.querySelector('img.note-img') && ![...n.querySelectorAll('a')].some((a) => a.href.endsWith('/slow.png')); }, row('slow picture')), await page.evaluate((r) => eval(r)?.innerHTML.slice(0, 300), row('slow picture'))); let loaded = false; diff --git a/tools/video-tap-test.js b/tools/video-tap-test.js new file mode 100644 index 0000000..afa014e --- /dev/null +++ b/tools/video-tap-test.js @@ -0,0 +1,91 @@ +// Tapping a feed video: anywhere on the picture (not the player's own play +// button or control bar) goes full screen — the corner button is a reach on +// a phone. Full screen, a tap pauses a playing clip; a tap on a paused one +// comes back out. Taps on the controls stay the player's. +// Run: bun tools/video-tap-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 SK = generateSecretKey(); const AUTHOR = getPublicKey(SK); +const now = Math.floor(Date.now() / 1000); +const CLIP = '/tmp/coinos-tap-clip.webm'; +if (!existsSync(CLIP)) Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=320x180:rate=10', '-t', '30', '-c:v', 'libvpx', '-b:v', '100k', CLIP]); +const POSTS = [finalizeEvent({ kind: 1, created_at: now - 100, tags: [], content: 'watch this http://localhost:5314/clip.webm' }, SK)]; +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 5314, fetch: (req) => { + const path = new URL(req.url).pathname; + if (path === '/clip.webm') 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 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(); +await page.evaluateOnNewDocument(() => { + const Real = window.WebSocket; + window.WebSocket = function (...a) { const ws = new Real(...a); const send = ws.send.bind(ws); ws.send = (d) => { try { const m = JSON.parse(d); 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(d); }; 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 st = () => page.evaluate(() => { const v = document.querySelector('video.note-video'); return { fs: document.fullscreenElement === v, paused: v.paused, controls: v.controls, thread: !document.querySelector('video.note-video')?.isConnected }; }); +// tap the clip at a fraction of its box (or of the screen, full screen) +const tap = async (fx, fy) => { + const fs = await page.evaluate(() => !!document.fullscreenElement); + const r = fs ? { x: 0, y: 0, width: await page.evaluate(() => innerWidth), height: await page.evaluate(() => innerHeight) } + : await page.evaluate(() => { const b = document.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x, y: b.y, width: b.width, height: b.height }; }); + await page.mouse.click(r.x + r.width * fx, r.y + r.height * fy); + await sleep(700); +}; +try { + await page.setViewport({ width: 390, height: 844 }); + await page.goto('http://localhost:5314/', { 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'); + }, [base, AUTHOR, POSTS]); + await page.reload({ waitUntil: 'domcontentloaded' }); + await waitText('receive', 20000); + await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]')?.click()); + await page.waitForSelector('video.note-video', { timeout: 20000 }); + await page.evaluate(() => document.querySelector('video.note-video').scrollIntoView({ block: 'center' })); + for (let i = 0; i < 40 && (await st()).paused; i++) await sleep(250); + check('the clip autoplays in the feed', !(await st()).paused); + + await tap(0.2, 0.3); + let s = await st(); + check('a tap on the picture goes full screen', s.fs, JSON.stringify(s)); + check('...without opening the thread', !s.thread); + await tap(0.25, 0.3); + s = await st(); + check('full screen, a tap pauses the playing clip', s.fs && s.paused, JSON.stringify(s)); + await tap(0.5, 0.5); + s = await st(); + check('a tap on the paused clip\'s play button is left to the player', s.fs, JSON.stringify(s)); + await page.evaluate(() => document.querySelector('video.note-video').pause()); await sleep(300); + await tap(0.2, 0.3); + s = await st(); + check('a tap elsewhere on the paused clip comes out of full screen', !s.fs, JSON.stringify(s)); + await tap(0.3, 0.97); + s = await st(); + check('a tap on the control bar stays the player\'s', !s.fs, JSON.stringify(s)); + check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); +} finally { await browser.close(); server.stop(true); } +console.log(ok ? '\n✅ video taps: full screen, pause, back out' : '\n❌ failed'); +process.exit(ok ? 0 : 1); |