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

Service mode: one view button (default, lyrics, video, visualizer, album art) and a text-size box

Browse Source 
- A single dock button cycles the service view; video is skipped in audio-only mode
- Visualizer reacts to the audio where the EQ graph is available and falls back
  to an ambient pulse on iOS so background playback is never routed through Web Audio
- Album art shows the song artwork with the letterbox cropped
- A-/A+ box steps lyrics, title and channel size from -2 to +2 in every theme
- Glass Stage dock is slightly more compact
This commit is contained in:
Jonathan Sykes
2026-10-02 21:11:15 +08:00
parent 985063648f
commit 53da71ceb9
4 changed files with 237 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/service-ui.css
View File

@@ -405,3 +405,49 @@
.svc-tile, .svc-hint, .fs-backdrop, .fs-sheet { animation: none !important; }
.svc-tile, .svc-tile .svc-ico, .svc-progress > i { transition: none !important; }
}
/* ---- one view button + text-size box (all themes) ---- */
.svc-dock { display: flex; }
.svc-dock > .svc-tile { flex: 1 1 0; min-width: 0; }
.svc-dock > .svc-tile.hidden { display: none; }
.svc-font {
flex: 0 0 auto; align-self: center;
display: flex; align-items: center; gap: 2px;
height: 40px; padding: 2px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
.svc-font button {
width: 32px; height: 34px; padding: 0; border: 0; border-radius: 9px;
background: transparent; color: var(--svc-ink-2, #ccc);
font: 800 13px/1 var(--ui, system-ui, sans-serif); cursor: pointer;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.svc-font button:hover:not(:disabled) { color: var(--svc-ink, #fff); background: rgba(255, 255, 255, 0.07); }
.svc-font button:disabled { opacity: 0.3; cursor: default; }
.svc-font span { min-width: 22px; text-align: center; font: 700 12px/1 var(--mono, ui-monospace, monospace); color: var(--svc-ink, #fff); }
/* text size scales lyrics, title and channel */
#serviceMode .service-title { font-size: calc(clamp(28px, 5.5vw, 56px) * var(--svc-fs, 1)); }
#serviceMode .service-channel { font-size: calc(1em * var(--svc-fs, 1)); }
#serviceMode .service-lyrics .sl-line { font-size: calc(max(22px, calc(var(--fit, 40px) * 0.48)) * var(--svc-fs, 1)); }
#serviceMode .service-lyrics .sl-line.near { font-size: calc(max(26px, calc(var(--fit, 40px) * 0.6)) * var(--svc-fs, 1)); }
#serviceMode .service-lyrics .sl-line.active { font-size: calc(max(30px, var(--fit, 40px)) * var(--svc-fs, 1)); }
#serviceMode .service-lyrics .sl-list.plain .sl-line { font-size: calc(max(30px, var(--fit, 40px)) * var(--svc-fs, 1)); }
/* album art / visualizer stage */
.service-visual {
position: relative; width: min(78vw, 52vh, 460px); aspect-ratio: 1;
margin: 0 auto 22px; border-radius: 26px; overflow: hidden; flex: none;
box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
}
.service-visual::before {
content: ""; position: absolute; inset: -20%;
background: var(--art, none) center / cover; filter: blur(34px) saturate(140%); opacity: 0.55;
}
.service-visual .svc-art { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.service-visual .svc-viz { position: absolute; left: 6%; right: 6%; bottom: 6%; width: 88%; height: 58%; display: none; }
.service-visual[data-view="visual"] .svc-art { opacity: 0.28; filter: blur(2px); }
.service-visual[data-view="visual"] .svc-viz { display: block; }
.service-mode.visual-on .service-title { font-size: calc(clamp(24px, 4.4vw, 44px) * var(--svc-fs, 1)); }
.service-visual .svc-art.yt-art { transform: scale(1.34); }