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);