josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix portrait PWA nav dead while playing by making body the scroll container

Browse Source
This commit is contained in:
Jonathan Sykes
2026-07-10 13:55:31 +08:00
parent b72c079fb4
commit 88c89d66af
3 changed files with 137 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/app.js
View File

@@ -617,10 +617,13 @@ const Player = {
return this.mode === 'dual' ? els.audio : this.master;
},
async loadVideo(videoObj, { preferStream = false, resume = true } = {}) {
async loadVideo(videoObj, { preferStream = false, resume = true, reveal = true } = {}) {
// When false (auto-advance / prev), skip resuming the saved timestamp and
// start from the beginning (or the A marker, if an A-B loop is set).
this._resumeOnLoad = resume;
// When false (auto-advance / prev), don't scroll the portrait view back
// to the player — the user may be browsing another page while listening.
this._revealOnLoad = reveal;
// Monotonic load token: any await below may resolve after the user has
// already started a different video — stale loads must stand down
// instead of hijacking playback (longest window: save-before-playing).
@@ -700,7 +703,7 @@ const Player = {
btn.textContent = '↻ Retry';
btn.addEventListener('click', () => {
btn.remove();
Player.loadVideo(videoObj, { preferStream, resume });
Player.loadVideo(videoObj, { preferStream, resume, reveal });
});
els.playerPane.appendChild(btn);
}
@@ -733,8 +736,9 @@ const Player = {
navigator.mediaSession.setActionHandler('seekforward', (d) => Player.seek(Player.master.currentTime + (d.seekOffset || 10)));
}
// In portrait PWA mode, scroll the player into view so it's immediately
// visible without the user having to swipe up manually.
scrollPlayerIntoViewPortrait();
// visible without the user having to swipe up manually — but only for
// user-picked tracks; auto-advance must not hijack the scroll position.
if (this._revealOnLoad) scrollPlayerIntoViewPortrait();
// Restore A-B markers and load related (non-blocking)
restoreAbMarkers();
loadRelated();
@@ -789,7 +793,7 @@ const Player = {
current.localUrl = null;
toast('Cached copy unavailable — streaming instead…');
// Preserve the resume intent of the load that just failed.
this.loadVideo(meta, { preferStream: true, resume: this._resumeOnLoad });
this.loadVideo(meta, { preferStream: true, resume: this._resumeOnLoad, reveal: this._revealOnLoad });
return;
}
// Advance to the next candidate stream; give up with a clear message at the end.
@@ -1388,8 +1392,9 @@ function advanceQueue() {
return false;
}
// Advancing to a new track always starts from the beginning (or its A point),
// never the previous resume timestamp.
Player.loadVideo(queue[queueIndex], { resume: false });
// never the previous resume timestamp — and never scrolls the user away
// from whatever page they are browsing while listening.
Player.loadVideo(queue[queueIndex], { resume: false, reveal: false });
renderUpNext();
return true;
}
@@ -1422,7 +1427,7 @@ function playPrev() {
if (Player.master.currentTime > 3) { Player.seek(0); return; }
if (queueIndex > 0) {
queueIndex--;
Player.loadVideo(queue[queueIndex], { resume: false });
Player.loadVideo(queue[queueIndex], { resume: false, reveal: false });
renderUpNext();
}
}
@@ -2341,6 +2346,7 @@ function markPlayingCard() {
});
}
let _lastViewKey = null;
function render() {
listFilter = '';
const fi = $('listFilterInput');
@@ -2351,6 +2357,12 @@ function render() {
renderSidebar();
renderSmartSidebar();
renderList();
// Portrait PWA: reveal the freshly selected view. Only on actual view
// changes — same-view re-renders (deletes, modal confirms, profile load)
// must not hijack the scroll position. Skipped on the very first render.
const viewKey = [view.type, view.id, view.smartType].join('|');
if (_lastViewKey !== null && viewKey !== _lastViewKey) scrollListIntoViewPortrait();
_lastViewKey = viewKey;
}
// ============================================================================
@@ -2615,16 +2627,30 @@ function applyPortraitPwaClass() {
}
}
// Scroll the list-pane to the top so the player content is at the start of the
// list area. In portrait mode, .list-pane is the scroll container (not .body).
// In portrait mode, .body is the single scroll container (player pane on top,
// list pane below). Scrolling it to 0 brings the player fully into view.
function scrollPlayerIntoViewPortrait() {
if (!isPortraitPWA()) return;
const listPane = document.querySelector('.list-pane');
if (listPane) {
listPane.scrollTo({ top: 0, behavior: 'smooth' });
const body = document.querySelector('.body');
if (body) {
body.scrollTo({ top: 0, behavior: 'smooth' });
}
}
// Bring the list pane to the top of the portrait scroll container so a newly
// rendered view is actually on-screen. While a track is playing, the player
// pane above it is taller than the whole viewport — without this scroll the
// fresh view sits invisibly below the fold and every nav tap looks dead
// (the mobile "can't navigate while playing" bug).
function scrollListIntoViewPortrait() {
if (!isPortraitPWA()) return;
const body = document.querySelector('.body');
const listPane = document.querySelector('.list-pane');
if (!body || !listPane) return;
const top = body.scrollTop + listPane.getBoundingClientRect().top - body.getBoundingClientRect().top;
body.scrollTo({ top, behavior: 'smooth' });
}
function setupPortraitPwaWatcher() {
applyPortraitPwaClass();
_portraitPwaMQ.addEventListener('change', () => {
@@ -2725,6 +2751,9 @@ function wireUI() {
view = { type: 'search' };
render();
showSearchSkeletons();
// Even when already on the search view (no view change for render() to
// detect), a new query means the user wants to see the results.
scrollListIntoViewPortrait();
try {
const res = await API.search(q);
if (!res || !res.ok) throw new Error(res?.error || 'Search failed');
@@ -3030,7 +3059,7 @@ document.querySelectorAll('.chip').forEach((c) => {
$('miniBar').addEventListener('click', () => {
hideMiniBar();
// Scroll the player into view if needed. In portrait PWA, scroll only the
// list-pane (the designated scroll container) — scrollIntoView() also
// .body pane (the designated scroll container) — scrollIntoView() also
// scrolls overflow:hidden ancestors up to <html> on iOS, leaving the
// document offset and fixed-element hit testing broken.
if (isPortraitPWA()) scrollPlayerIntoViewPortrait();

25
frontend/styles.css
View File

@@ -1765,14 +1765,17 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
z-index: 50;
}
/* --- Body: vertical stack (player above list) -------------------------- */
/* --- Body: vertical stack (player above list), THE scroll container ---- */
.body {
flex-direction: column;
overflow: hidden;
/* Body itself does NOT scroll — player-pane is fixed height,
list-pane takes remaining space and scrolls independently.
This keeps the player always visible and gives the list/settings
the full remaining viewport to scroll in. */
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
/* The body is the single scroll container in portrait. A playing player
pane (stage + control deck + meta + up-next + related) is taller than
the whole viewport, so it must be able to scroll out of the way — with
overflow:hidden here the list-pane sat unreachable below the fold and
every sidebar/bottom-nav tap looked dead while a track was playing. */
}
/* --- Player pane: full width, compact vertical padding ----------------- */
@@ -1808,14 +1811,16 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
gap: 6px;
}
/* --- List pane: full width below player, fills remaining height, scrolls independently --- */
/* --- List pane: full width below player, flows in the body scroll ------ */
.list-pane {
flex: 1;
min-height: 0; /* required for flex children to shrink below content size */
flex: none;
/* At least one full body-height so navigating always yields a full-screen
page; longer content just grows the body scroll. */
min-height: 100%;
width: 100%;
border-left: none;
border-top: 1px solid var(--line-soft);
overflow-y: auto;
overflow-y: visible;
overflow-x: hidden;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

82
tests/portrait-pwa.spec.js
View File

@@ -29,6 +29,7 @@ async function enablePortraitPwaMode(page) {
content: `
/* Mirror (display-mode:standalone) and (orientation:portrait) rules for testing */
[data-portrait-pwa-test] .app { grid-template-columns: 1fr; }
[data-portrait-pwa-test] .bottom-nav { display: flex; }
[data-portrait-pwa-test] .sidebar-toggle { display: inline-flex; }
[data-portrait-pwa-test] .sidebar {
position: fixed; top:0; left:0; bottom:0;
@@ -39,16 +40,20 @@ async function enablePortraitPwaMode(page) {
[data-portrait-pwa-test] .app.sidebar-open .sidebar { transform:translateX(0); }
[data-portrait-pwa-test] .app.sidebar-open .sidebar-backdrop { display:block; opacity:1; }
[data-portrait-pwa-test] .topbar { position:sticky; top:0; z-index:50; }
[data-portrait-pwa-test] .body { flex-direction:column; overflow:hidden; }
[data-portrait-pwa-test] .body {
flex-direction:column;
overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain;
}
[data-portrait-pwa-test] .player-pane { flex:none; width:100%; overflow-y:visible; }
[data-portrait-pwa-test] .player-stage { width:100%; aspect-ratio:16/9; }
[data-portrait-pwa-test] .btn-row { flex-wrap:wrap; gap:7px; }
[data-portrait-pwa-test] .now-meta { flex-direction:column; gap:12px; margin-top:14px; }
[data-portrait-pwa-test] .np-actions { flex-wrap:wrap; gap:6px; }
[data-portrait-pwa-test] .list-pane {
flex:1; min-height:0; width:100%;
flex:none; min-height:100%; width:100%;
border-left:none; border-top:1px solid var(--line-soft);
overflow-y:auto; overflow-x:hidden;
overflow-y:visible; overflow-x:hidden;
padding-bottom: 60px;
}
[data-portrait-pwa-test] .cards { max-height:none; overflow-y:visible; padding-bottom:0; }
@@ -63,9 +68,33 @@ async function enablePortraitPwaMode(page) {
});
}
/**
* Playwright cannot set display-mode:standalone, so isPortraitPWA() in app.js
* would return false and the JS scroll behaviors (scrollListIntoViewPortrait,
* scrollPlayerIntoViewPortrait) would no-op. Stub matchMedia for that one
* query BEFORE app.js loads so the JS layer behaves as in the installed PWA.
*/
async function stubStandalonePortraitMediaQuery(page) {
await page.addInitScript(() => {
const orig = window.matchMedia.bind(window);
window.matchMedia = (q) => {
if (q.includes('display-mode: standalone') && q.includes('portrait')) {
return {
matches: true, media: q, onchange: null,
addEventListener: () => {}, removeEventListener: () => {},
addListener: () => {}, removeListener: () => {},
dispatchEvent: () => false,
};
}
return orig(q);
};
});
}
test.describe('Portrait PWA layout', () => {
test.beforeEach(async ({ page }) => {
await page.setViewportSize({ width: PORTRAIT_WIDTH, height: PORTRAIT_HEIGHT });
await stubStandalonePortraitMediaQuery(page);
await page.goto('/');
// Wait for app JS to initialise
await page.waitForSelector('.app', { state: 'attached' });
@@ -119,6 +148,53 @@ test.describe('Portrait PWA layout', () => {
await expect(lastGroup).toBeVisible();
});
test('navigation works while a track is playing (player pane taller than viewport)', async ({ page }) => {
// Simulate the DOM state afterLoad() creates for a playing track: player
// pane populated with controls, meta, up-next and related — together
// taller than the viewport. This used to leave the list-pane below the
// fold with .body overflow:hidden, so every nav tap looked dead.
await page.evaluate(() => {
document.getElementById('playerPane').classList.remove('empty');
document.getElementById('playerPlaceholder').classList.add('hidden');
document.getElementById('controls').classList.remove('hidden');
document.getElementById('nowPlayingMeta').classList.remove('hidden');
document.getElementById('npTitle').textContent = 'Test track';
document.getElementById('upnext').classList.remove('hidden');
document.getElementById('upnextList').innerHTML =
'<div class="upnext-item">queued</div>'.repeat(4);
document.getElementById('relatedPanel').classList.remove('hidden');
document.getElementById('relatedList').innerHTML =
'<div class="related-item">related</div>'.repeat(6);
document.getElementById('miniBar').classList.remove('hidden');
});
// Sanity: the populated player pane really is taller than the viewport.
const paneHeight = await page.evaluate(
() => document.getElementById('playerPane').getBoundingClientRect().height
);
expect(paneHeight).toBeGreaterThan(PORTRAIT_HEIGHT);
// Navigate via the bottom nav.
await page.click('.bottom-nav-btn[data-view="history"]');
await page.waitForTimeout(700); // smooth scroll settle
// The view switched AND its pane is actually on-screen.
await expect(page.locator('#listTitle')).toHaveText('History');
const box = await page.locator('.list-pane').boundingBox();
expect(box).not.toBeNull();
expect(box.y).toBeLessThan(PORTRAIT_HEIGHT / 2); // top of the page is visible
expect(box.y + box.height).toBeGreaterThan(200); // and it has visible extent
// Sidebar navigation must work the same way.
await page.click('#sidebarToggle');
await page.waitForTimeout(350);
await page.click('.nav-item[data-view="saved"]');
await page.waitForTimeout(700);
await expect(page.locator('#listTitle')).toHaveText('Saved videos');
const box2 = await page.locator('.list-pane').boundingBox();
expect(box2.y).toBeLessThan(PORTRAIT_HEIGHT / 2);
});
test('switching landscape to portrait restores layout', async ({ page }) => {
// Start in landscape
await page.setViewportSize({ width: LANDSCAPE_WIDTH, height: LANDSCAPE_HEIGHT });