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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user