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
+2
View File
@@ -15,6 +15,7 @@
{{define "player"}}
<audio id="vs-audio" preload="metadata"></audio>
<div id="vs-lyrics-panel" class="vs-lyrics-panel d-none"></div>
<div class="vs-player">
<img id="vs-player-art" class="vs-player-art" src="/static/img/default-art.svg" alt="">
<div class="vs-player-meta">
@@ -32,6 +33,7 @@
<input id="vs-progress" type="range" class="form-range" min="0" max="100" value="0">
<span id="vs-duration" class="vs-player-time">0:00</span>
</div>
<button id="vs-lyrics-btn" type="button" class="vs-player-btn" title="Lyrics"><i class="bi bi-quote"></i></button>
<button id="vs-now-star" type="button" class="vs-star-btn" data-star-toggle data-item-type="song" data-item-id="" title="Favorite">
<i class="bi bi-star"></i>
</button>