empede/templates/index.html

55 lines
1.5 KiB
HTML

{# Template #}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Empede</title>
<!-- Empede version: {{ crate_version!() }} -->
<!-- Source: https://github.com/bigskysoftware/htmx -->
<script src="/static/vendor/htmx.min.js"></script>
<script src="/static/vendor/htmx-sse.js"></script>
<!-- Source: https://github.com/SortableJS/Sortable -->
<script src="/static/vendor/Sortable.min.js"></script>
<link rel="stylesheet" href="/static/style.css">
<link href="/static/favicon.png" rel="icon" type="image/png">
<script>
let progressBar;
let elapsed;
let duration;
let progressInterval;
</script>
</head>
<body hx-ext="sse" sse-connect="/idle">
<div
class="browser"
hx-trigger="load,sse:database"
hx-get="/browser"
hx-vals="js:{path: new URLSearchParams(window.location.search).get('path') || ''}"
></div>
<div class="player">
<div class="nowplaying" hx-trigger="sse:player,sse:options" hx-get="/player"></div>
<div class="queue-header">
<div class="queue-next">Next in queue</div>
<button hx-delete="/queue" hx-swap="none">
<span class="material-symbols-outlined">playlist_remove</span>
Clear
</button>
<button hx-post="/shuffle" hx-swap="none">
<span class="material-symbols-outlined">shuffle</span>
Shuffle
</button>
</div>
<div class="queue" hx-trigger="sse:playlist,sse:player" hx-get="/queue"></div>
</div>
</body>
</html>