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

Keep service mode full-bleed on iOS and hide the player chrome behind it

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-08 11:55:15 +08:00
parent 765a00b412
commit 9366b1749c
2 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app.js
View File

@@ -2261,6 +2261,9 @@ function enterServiceMode(pl) {
}
const el = $('serviceMode');
if (el) el.classList.remove('hidden');
// Hides the mini-bar / bottom-nav / sidebar for as long as the overlay is up
// (see .service-open in styles.css).
document.body.classList.add('service-open');
updateServiceMode();
acquireWakeLock();
}
@@ -2268,6 +2271,7 @@ function enterServiceMode(pl) {
function exitServiceMode() {
const el = $('serviceMode');
if (el) el.classList.add('hidden');
document.body.classList.remove('service-open');
releaseWakeLock();
}

26
frontend/styles.css
View File

@@ -2540,14 +2540,20 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
/* ===================== Service Mode (Set-List View) ===================== */
.service-mode {
/* Sized by inset alone — deliberately NOT `width: 100vw`. On iOS a fixed
element that reaches past the viewport (the off-canvas .sidebar, which
escapes body's overflow:hidden) makes Safari widen the layout viewport and
shrink-to-fit the page, but vw units keep resolving against the ORIGINAL
width. A 100vw overlay then covers only ~90% of the screen and the app
shows through on the right. left/right:0 resolve against the widened
containing block, so the overlay stays full-bleed either way. */
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100dvh;
background: var(--bg);
color: var(--text);
z-index: 110;
/* Above .bottom-nav (310) and .mini-bar (300); modals (400) still win. */
z-index: 320;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -2769,6 +2775,18 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
transform: scale(0.95);
}
/* While the set-list overlay is up it owns the screen: the mini now-playing
bar and the bottom nav duplicate controls service mode already shows, and
both sit above it in the stacking order. The off-canvas sidebar is dropped
too so no fixed element reaches past the viewport to trigger the iOS
layout-viewport widening described on .service-mode. */
body.service-open .mini-bar,
body.service-open .bottom-nav,
body.service-open .sidebar,
body.service-open .sidebar-backdrop {
display: none;
}
/* Phones — the flat 28px gutters left a narrow centred column on a 390px
screen, so service mode never looked full-bleed in the iOS PWA. Pull the
gutters in to the safe-area edge and scale type/controls off the viewport