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

floor service-mode lyric font size and space out verses

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-26 02:11:07 +08:00
parent 05e85a0a3f
commit ba697e5d11
3 changed files with 1538 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1525
docs/mockups/07-service-lyrics-spacing.html Normal file
View File

File diff suppressed because it is too large Load Diff

8
frontend/app.js
View File

@@ -2347,6 +2347,9 @@ function updateNowPlayingActions() {
btn.title = 'Save this video for offline playback';
}
}
// Smallest font (px) the sung line may be fitted to in service mode; longer lines wrap instead.
const SERVICE_LYRIC_MIN_PX = 30;
// ============================================================================
// Shared: size each lyric row (.sl-line) to the largest font that fits ONE row
// ============================================================================
@@ -2355,13 +2358,12 @@ function updateNowPlayingActions() {
// optical-size axis, so glyphs get relatively WIDER as the size drops and a
// single measurement at 100px over-fits on small screens. Sets --fit per row;
// with `uniform` every row gets the smallest fit, so all lines share one size.
function fitLyricLines(list, { maxShare = 0.17, maxPx = 160, uniform = false } = {}) {
function fitLyricLines(list, { maxShare = 0.17, maxPx = 160, minPx = 18, uniform = false } = {}) {
if (!list) return;
const rows = [...list.querySelectorAll('.sl-line')];
if (!rows.length || !list.clientWidth) return;
const width = list.clientWidth * 0.92 * 0.97; // 4% side padding + slack
const cap = Math.max(30, Math.min(list.clientHeight * maxShare, maxPx));
const minPx = 18;
const clamp = (px) => Math.max(minPx, Math.min(cap, px));
const probe = document.createElement('div');
probe.className = 'sl-line';
@@ -3100,7 +3102,7 @@ const Notes = (() => {
const list = $('serviceLyricsList');
const plain = plainLyrics();
list.classList.toggle('plain', plain);
fitLyricLines(list, { uniform: plain });
fitLyricLines(list, { uniform: plain, minPx: SERVICE_LYRIC_MIN_PX });
}
function renderServiceButtons() {

8
frontend/styles.css
View File

@@ -3815,6 +3815,14 @@ body.remote-open { overflow: hidden; }
.sl-line.untimed { cursor: default; }
/* Plain lyrics (no timings): one shared --fit, every line full size. */
.sl-list.plain .sl-line { font-size: var(--fit, 40px); opacity: 0.92; color: var(--text); }
/* Service mode only: a floor under every lyric size (long lines wrap rather
than shrink) and breathing room between verses. Keep the floor in step with
SERVICE_LYRIC_MIN_PX in app.js. */
.service-lyrics .sl-list { display: flex; flex-direction: column; gap: clamp(14px, 3.2vh, 40px); }
.service-lyrics .sl-line { font-size: max(22px, calc(var(--fit, 40px) * 0.48)); }
.service-lyrics .sl-line.near { font-size: max(26px, calc(var(--fit, 40px) * 0.6)); }
.service-lyrics .sl-line.active { font-size: max(30px, var(--fit, 40px)); }
.service-lyrics .sl-list.plain .sl-line { font-size: max(30px, var(--fit, 40px)); }
.sl-empty {
display: flex; flex-direction: column; gap: 10px; align-items: center;
font-size: clamp(22px, 4vw, 40px); font-weight: 700; color: var(--text-2);