diff options
| -rw-r--r-- | src/features/messages.js | 55 | ||||
| -rw-r--r-- | tools/feed-video-pager-test.js | 11 | ||||
| -rw-r--r-- | tools/fullscreen-notice-test.js | 32 |
3 files changed, 34 insertions, 64 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 9bf1a09..1d9fd61 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -7646,15 +7646,13 @@ export function messagesFeature(ctx) { v.controls = true; const go = v.requestFullscreen || v.webkitRequestFullscreen || v.webkitEnterFullscreen; if (!go) return true; - 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(() => {}); + // (the screen isn't turned for it: a wide clip plays with bars, and the + // reader turns the phone if they want it bigger) + Promise.resolve(go.call(v)).catch(() => {}); return true; } if (typeof document !== 'undefined') document.addEventListener('fullscreenchange', () => { if (fsElement()) return; - try { screen.orientation?.unlock?.(); } catch {} // out of the pager's full screen some other way (Back on Android, Escape // on a computer): out of the pager too, in the one step if (pagerFs) { pagerFs = false; if (pager) dismissPager(); } @@ -7809,13 +7807,13 @@ export function messagesFeature(ctx) { } }; // One tap, as with any clip in a post: it plays, with sound, full screen - // (turned on its side). The still loads the player first; a player - // already going (autoplayed, muted) is unmuted and carried on. + // (the screen not turned: the reader turns the phone if they like). The + // still loads the player first; a player already going (autoplayed, + // muted) is unmuted and carried on. const full = (box) => { const go = box.requestFullscreen || box.webkitRequestFullscreen; if (!go) return; - Promise.resolve(go.call(box, { navigationUI: 'hide' })) - .then(() => screen.orientation?.lock?.('landscape').catch(() => {})).catch(() => {}); + Promise.resolve(go.call(box, { navigationUI: 'hide' })).catch(() => {}); }; const tapped = (e) => { if (e.target.closest('.yt-open, .vid-sound, iframe')) return; @@ -11845,8 +11843,9 @@ export function messagesFeature(ctx) { } // A clip tapped in the feed opens in the pager the same way, over the // feed's clips, picking up where it was. The pager takes the whole screen - // (what the player's own full screen did), and a wide clip turns the phone - // on its side — for that clip; past it the screen follows the phone. + // (what the player's own full screen did). The screen isn't turned for a + // wide clip — Adam would rather it play with bars and turn the phone + // himself — so it follows the phone throughout. function openClip(v, url) { try { const rowId = feedRowOf(v); @@ -11854,52 +11853,36 @@ export function messagesFeature(ctx) { const it = feedMediaItems(feed, 'videos').find((x) => x.row.id === rowId && x.url === url); if (!it) return false; tappedClips.add(url); // asked for by hand: no tap-to-play cover - const d = videoDims.get(url) || videoInfo.get(url) || {}; - const w = v.videoWidth || d.w || d.width, hh = v.videoHeight || d.h || d.height; const at = v.currentTime || 0; v.pause(); openMediaPager('videos', mediaKey(it), { fromFeed: true, at }); - pagerFullscreen(!!(w && hh && w > hh)); + pagerFullscreen(); return true; } catch { return false; } } let pagerFs = false; // the pager put the page full screen (and so takes it back out) - let pagerLock = false; // the pager turned the screen (and so lets it go) - // The installed app (the Play/Zapstore build, or a home-screen install) - // has no address bar: the pager already fills its window. Going full - // screen there only hid the system bars, and every time it did Chrome put - // up its "To exit full screen, drag from the top…" notice, which a page - // can't turn off. So there it doesn't: a wide clip asks the screen to turn - // without it, and goes full screen only if that's refused (the browser - // allows turning only in full screen) — the notice then, but the clip on - // its side. + // The installed app (the Play/Zapstore build — immersive since 1.13 — or a + // home-screen install) has no address bar: the pager already fills its + // window. Going full screen there only hid the system bars, and every time + // it did Chrome put up its "To exit full screen, drag from the top…" + // notice, which a page can't turn off. So there it doesn't. const installedApp = () => { try { return matchMedia('(display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui)').matches || document.referrer.startsWith('android-app://'); } catch { return false; } }; - function pagerFullscreen(wide) { - if (installedApp()) { - if (!wide || !screen.orientation?.lock) return; - screen.orientation.lock('landscape').then(() => { if (ui.mediaPager) pagerLock = true; else screen.orientation.unlock?.(); }, () => pagerGoFullscreen(true)); - return; - } - pagerGoFullscreen(wide); - } - function pagerGoFullscreen(wide) { + function pagerFullscreen() { + if (installedApp()) return; const d = document.documentElement; const go = d.requestFullscreen || d.webkitRequestFullscreen; if (!go || fsElement()) return; Promise.resolve(go.call(d, { navigationUI: 'hide' })).then(() => { if (!ui.mediaPager) { exitFs(); return; } pagerFs = true; - if (wide) screen.orientation?.lock?.('landscape').catch(() => {}); }).catch(() => {}); } const exitFs = () => { try { (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {}); } catch {} }; function pagerUnFullscreen() { - if (pagerLock) { pagerLock = false; try { screen.orientation?.unlock?.(); } catch {} } if (!pagerFs) return; pagerFs = false; - try { screen.orientation?.unlock?.(); } catch {} if (fsElement() === document.documentElement) exitFs(); } // The words of the post, without the links to the media it carries. @@ -12597,8 +12580,6 @@ export function messagesFeature(ctx) { const v = pager.cur.querySelector('video.mp-media'); if (v) v.pause(); // how long a clip held the reader (the head start's measure of them) if (v && pager.curAt) { const secs = (Date.now() - pager.curAt) / 1000; dwell = dwell ? dwell * 0.7 + secs * 0.3 : secs; } - // past the clip it opened on, the screen follows the phone again - if (pagerFs || pagerLock) { pagerLock = false; try { screen.orientation?.unlock?.(); } catch {} } if (pager.fromFeed && video) el.classList.remove('show'); } pager.cur = e.target; diff --git a/tools/feed-video-pager-test.js b/tools/feed-video-pager-test.js index 9b014f9..add9208 100644 --- a/tools/feed-video-pager-test.js +++ b/tools/feed-video-pager-test.js @@ -1,8 +1,8 @@ // A clip tapped in the feed opens in the media pager, over the feed's clips // (every shape, a post's own first), carrying on from where it was. The -// pager takes the whole screen and a wide clip turns the phone on its side — -// for that clip only. Each clip has a seek bar to drag; a tap pauses (and -// shows the details), another plays on. Leaving full screen leaves the pager. +// pager takes the whole screen; the screen isn't turned for a wide clip. +// Each clip has a seek bar to drag; a tap pauses (and shows the details), +// another plays on. Leaving full screen leaves the pager. // Run: bun tools/feed-video-pager-test.js import puppeteer from './puppeteer.js'; import { cacheKeyFor } from '../src/wallet.js'; @@ -106,7 +106,7 @@ try { check('the tap opens the video pager', s.open); check('…on the clip tapped', await resting('wide.webm'), await curClip()); check('…full screen', await waitFor(() => document.fullscreenElement === document.documentElement, null, 3000)); - check('…turned on its side, for a wide clip', await waitFor(() => window.__orient.includes('lock:landscape'), null, 3000), JSON.stringify((await pagerState()).orient)); + check('…the screen not turned for a wide clip (bars; the reader turns the phone)', (await sleep(800), !(await pagerState()).orient.some((x) => x.startsWith('lock'))), JSON.stringify((await pagerState()).orient)); check('the clip in the feed holds still underneath', (await feedClip('a wide one'))?.paused); await waitFor((cur) => { const v = eval(cur)()?.querySelector('video.mp-media'); return v && !v.paused && v.currentTime > 0; }, '(' + CUR + ')', 6000); let v = await curVideo(); @@ -150,7 +150,6 @@ try { console.log('\n[the next clip: a swipe away, the screen free to turn]'); await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); sc.scrollTo({ top: sc.clientHeight }); }); // what a swipe up does check('a swipe lands on the next clip (a tall one)', await resting('tall.webm'), await curClip()); - check('…and lets the screen follow the phone', await waitFor(() => window.__orient.lastIndexOf('unlock') > window.__orient.indexOf('lock:landscape'), null, 3000), JSON.stringify((await pagerState()).orient)); check('…playing', await waitFor((cur) => { const v = eval(cur)()?.querySelector('video.mp-media'); return v && !v.paused; }, '(' + CUR + ')', 6000)); await page.keyboard.press('ArrowDown'); check('down: the last clip, past a post with none', await resting('last.webm'), await curClip()); @@ -167,7 +166,7 @@ try { console.log('\n[leaving full screen another way (Back on a phone) leaves the pager]'); await openClip('a tall one'); check('the pager is open, full screen', await waitFor(() => !!document.querySelector('.media-pager.videos') && document.fullscreenElement === document.documentElement, null, 3000)); - check('a tall clip leaves the screen as it is', !(await pagerState()).orient.slice(1).includes('lock:landscape'), JSON.stringify((await pagerState()).orient)); + check('a tall clip leaves the screen as it is', !(await pagerState()).orient.some((x) => x.startsWith('lock')), JSON.stringify((await pagerState()).orient)); await page.evaluate(() => document.exitFullscreen()); check('out of full screen, out of the pager', await waitFor(() => !document.querySelector('.media-pager') && !!document.querySelector('.notes-feed'), null, 3000)); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); diff --git a/tools/fullscreen-notice-test.js b/tools/fullscreen-notice-test.js index 2861439..c5658ea 100644 --- a/tools/fullscreen-notice-test.js +++ b/tools/fullscreen-notice-test.js @@ -1,8 +1,7 @@ // In the installed app (no address bar: the pager already fills the window) // the pager doesn't go full screen — every time it did, Chrome put up its -// "To exit full screen…" notice. A wide clip asks the screen to turn -// without it; if that's refused, then full screen (the notice, but the clip -// on its side). In a browser tab it goes full screen as before +// "To exit full screen…" notice. Nor is the screen turned for a wide clip +// (it plays with bars). In a browser tab it goes full screen as before // (feed-video-pager-test). A feed clip's own bar has no full-screen button: // a tap on the clip is the way, into the pager. // Run: bun tools/fullscreen-notice-test.js @@ -43,7 +42,7 @@ const seeded = [ async function run(lockOk) { - console.log('\n[the installed app, the screen ' + (lockOk ? 'turning' : 'refusing to turn') + ' without full screen]'); + console.log('\n[the installed app]'); const ctx = await browser.createBrowserContext(); // storage of its own: a fresh wallet each run const page = await ctx.newPage(); await page.evaluateOnNewDocument((ok) => { @@ -94,33 +93,24 @@ async function run(lockOk) { await waitText('receive', 20000); await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click()); await page.waitForSelector('.notes-feed video.note-video', { timeout: 20000 }); - if (lockOk) check('a feed clip\'s bar has no full-screen button', await waitFor(() => [...document.querySelectorAll('.notes-feed video.note-video')].every((v) => v.getAttribute('controlslist') === 'nofullscreen'), null, 5000)); + check('a feed clip\'s bar has no full-screen button', await waitFor(() => [...document.querySelectorAll('.notes-feed video.note-video')].every((v) => v.getAttribute('controlslist') === 'nofullscreen'), null, 5000)); await openClip('a wide one'); await sleep(1200); let s = await st(); check('a tap on a wide clip opens the pager', s.open); - if (lockOk) { - check('…not full screen (no notice)', !s.fs, JSON.stringify(s)); - check('…the screen asked to turn, without full screen', s.orient[0] === 'lock:landscape', JSON.stringify(s.orient)); - } else { - check('…refused, it goes full screen', s.fs, JSON.stringify(s)); - check('…and turns there', s.orient.includes('lock:landscape:fs'), JSON.stringify(s.orient)); - } + check('…not full screen (no notice)', !s.fs, JSON.stringify(s)); + check('…and the screen not turned (a wide clip plays with bars; the reader turns the phone)', !s.orient.some((x) => x.startsWith('lock')), JSON.stringify(s.orient)); await page.keyboard.press('ArrowDown'); await sleep(1200); - check('past it, the screen is let go', (await st()).orient.includes('unlock'), JSON.stringify((await st()).orient)); await page.keyboard.press('Escape'); check('Escape closes it', await waitFor(() => !document.querySelector('.media-pager') && !document.fullscreenElement, null, 3000)); - if (lockOk) { - const n = (await st()).orient.length; - await openClip('a tall one'); await sleep(1200); - s = await st(); - check('a tall clip: the pager, no full screen, the screen left alone', s.open && !s.fs && s.orient.length === n, JSON.stringify(s)); - await page.keyboard.press('Escape'); await sleep(600); - } + await openClip('a tall one'); await sleep(1200); + s = await st(); + check('a tall clip: the pager, no full screen, the screen left alone', s.open && !s.fs && !s.orient.some((x) => x.startsWith('lock')), JSON.stringify(s)); + await page.keyboard.press('Escape'); await sleep(600); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } finally { await ctx.close(); } } const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox', '--autoplay-policy=no-user-gesture-required'] }); -try { await run(true); await run(false); } finally { await browser.close(); server.stop(true); } +try { await run(true); } finally { await browser.close(); server.stop(true); } console.log(ok ? '\n✅ the installed app\'s pager skips full screen (and its notice) where it can' : '\n❌ failed'); process.exit(ok ? 0 : 1); |