Add a web player lyrics panel with active-line highlighting and click-to-seek

New GET /player/lyrics/{id} (auth-required) returns the best available
stored structuredLyrics entry for a song — preferring a synced one —
as plain JSON lines with a start time only where the source actually
has one.

The player bar gains a lyrics toggle; the panel fetches lyrics on
every song change, renders each line, and — only for lines that
actually carry a startMs — makes them clickable (seeks + plays) and
highlights the currently active line as playback progresses. Plain
(unsynced) lyrics render as static text with no fabricated timing or
highlighting.

Note: verified via Go template parsing/rendering and the new handler
tests, plus a JS syntax check; not manually exercised in a browser in
this session.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014r98AtcBbevpscWLsfwVvv
This commit is contained in:
2026-08-23 08:39:22 -05:00
co-authored by Claude Sonnet 5
parent 238cf0d4a0
commit 933ed31550
6 changed files with 276 additions and 0 deletions
+38
View File
@@ -286,6 +286,44 @@ body {
flex: 0 0 auto;
}
.vs-lyrics-panel {
position: fixed;
left: 0;
right: 0;
bottom: var(--vs-player-height);
max-height: 40vh;
overflow-y: auto;
background: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color);
padding: 1rem;
z-index: 1029;
text-align: center;
}
.vs-lyrics-line {
padding: 0.15rem 0;
color: var(--bs-secondary-color);
transition: color 0.15s ease;
}
.vs-lyrics-line.vs-lyrics-synced {
cursor: pointer;
}
.vs-lyrics-line.vs-lyrics-synced:hover {
color: var(--bs-body-color);
}
.vs-lyrics-line.vs-lyrics-active {
color: var(--bs-body-color);
font-weight: 600;
}
.vs-lyrics-empty {
color: var(--bs-secondary-color);
font-size: 0.85rem;
}
/* --- Misc --- */
.vs-star-btn {