92 lines
3.8 KiB
HTML
92 lines
3.8 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 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-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}}
|