owenandClaude Sonnet 5
9a3f1e4a24
The song title links to its album, the artist name links to the artist page, and clicking the cover art opens a larger version in a modal. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014r98AtcBbevpscWLsfwVvv
107 lines
4.8 KiB
HTML
107 lines
4.8 KiB
HTML
{{define "footer"}}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{{if .User}}{{template "player"}}{{template "player_art_modal"}}{{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="" role="button" title="View larger photo">
|
|
<div class="vs-player-meta">
|
|
<a id="vs-player-title" class="vs-player-title" href="javascript:void(0)">Nothing playing</a>
|
|
<a id="vs-player-artist" class="vs-player-artist" href="javascript:void(0)"></a>
|
|
</div>
|
|
<div class="vs-player-controls">
|
|
<div class="vs-player-buttons">
|
|
<button id="vs-shuffle-btn" type="button" class="vs-player-btn" title="Shuffle"><i class="bi bi-shuffle"></i></button>
|
|
<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>
|
|
<button id="vs-repeat-btn" type="button" class="vs-player-btn" title="Repeat: off" data-repeat="off"><i class="bi bi-repeat"></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 "player_art_modal"}}
|
|
<div class="modal fade" id="vs-player-art-modal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-transparent border-0">
|
|
<button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
<img id="vs-player-art-modal-img" src="" alt="" class="w-100 rounded">
|
|
</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}}
|