diff --git a/frontend/app.js b/frontend/app.js
index 0653f71..a1360cc 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -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 on iOS, leaving the
// document offset and fixed-element hit testing broken.
if (isPortraitPWA()) scrollPlayerIntoViewPortrait();
diff --git a/frontend/styles.css b/frontend/styles.css
index b75cac3..572f23c 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -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);
diff --git a/tests/portrait-pwa.spec.js b/tests/portrait-pwa.spec.js
index a1cc0e4..04abbf1 100644
--- a/tests/portrait-pwa.spec.js
+++ b/tests/portrait-pwa.spec.js
@@ -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 =
+ 'queued
'.repeat(4);
+ document.getElementById('relatedPanel').classList.remove('hidden');
+ document.getElementById('relatedList').innerHTML =
+ 'related
'.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 });