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