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

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() {