owenandClaude Sonnet 5
933ed31550
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
94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
{{define "footer"}}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{{if .User}}{{template "player"}}{{end}}
|
|
{{template "shortcuts_modal"}}
|
|
{{template "confirm_delete_modal"}}
|
|
|
|
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|
|
|
|
{{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">
|
|
<div id="vs-player-title" class="vs-player-title">Nothing playing</div>
|
|
<div id="vs-player-artist" class="vs-player-artist"></div>
|
|
</div>
|
|
<div class="vs-player-controls">
|
|
<div class="vs-player-buttons">
|
|
<button id="vs-prev-btn" type="button" class="vs-player-btn" title="Previous (J)"><i class="bi bi-skip-start-fill"></i></button>
|
|
<button id="vs-play-btn" type="button" class="vs-player-btn vs-play" title="Play/Pause (Space)"><i class="bi bi-play-fill"></i></button>
|
|
<button id="vs-next-btn" type="button" class="vs-player-btn" title="Next (L)"><i class="bi bi-skip-end-fill"></i></button>
|
|
</div>
|
|
<div class="vs-player-timeline">
|
|
<span id="vs-current-time" class="vs-player-time">0:00</span>
|
|
<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>
|
|
<div class="vs-player-volume">
|
|
<button id="vs-mute-btn" type="button" class="vs-player-btn" title="Mute (M)"><i class="bi bi-volume-up"></i></button>
|
|
<input id="vs-volume" type="range" class="form-range" min="0" max="1" step="0.05" value="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "shortcuts_modal"}}
|
|
<div class="modal fade" id="vs-shortcuts-modal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="bi bi-keyboard"></i> Keyboard shortcuts</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-sm mb-0">
|
|
<tbody>
|
|
<tr><td><kbd>Space</kbd> / <kbd>K</kbd></td><td>Play / Pause</td></tr>
|
|
<tr><td><kbd>J</kbd></td><td>Previous track</td></tr>
|
|
<tr><td><kbd>L</kbd></td><td>Next track</td></tr>
|
|
<tr><td><kbd>←</kbd> / <kbd>→</kbd></td><td>Seek -5s / +5s</td></tr>
|
|
<tr><td><kbd>↑</kbd> / <kbd>↓</kbd></td><td>Volume up / down</td></tr>
|
|
<tr><td><kbd>M</kbd></td><td>Mute</td></tr>
|
|
<tr><td><kbd>/</kbd></td><td>Focus search</td></tr>
|
|
<tr><td><kbd>?</kbd></td><td>This help</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "confirm_delete_modal"}}
|
|
<div class="modal fade" id="vs-confirm-delete-modal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="bi bi-exclamation-triangle text-danger"></i> Confirm</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">Are you sure?</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" data-confirm-action data-bs-dismiss="modal">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "csrf_field"}}<input type="hidden" name="csrf_token" value="{{.}}">{{end}}
|