_/empede
1
0
Fork 0
Code Issues Releases 18 Activity

Make queue scrollable
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Sijmen 2023-05-07 02:51:34 +02:00
parent d0ec23dc5a
commit 9ccacd92cb
Signed by: vijfhoek
GPG key ID: DAF7821E067D9C48
4 changed files with 78 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/style.css
View file

@ -24,10 +24,6 @@ body {
}
}
body > div {
padding: 1rem;
}
button {
background-color: transparent;
border: none;
@ -70,11 +66,18 @@ ul {
margin: 0;
}
.player > .queue {
flex: 1;
display: flex;
flex-flow: column;
}
.queue-header {
margin-top: 1.0rem;
display: flex;
align-items: center;
}
.queue-next {
font-weight: bold;
flex: 1;
@ -82,29 +85,30 @@ ul {
.queue {
margin-top: 0.5rem;
overflow: auto;
}
.queue li {
.queue ul li {
padding: 0 0.5rem;
border-radius: .25rem;
display: flex;
align-items: center;
}
.queue li.playing {
.queue ul li.playing {
background-color: #334;
}
@media (prefers-contrast: more) {
.queue li.playing {
.queue ul li.playing {
background-color: black;
border: 2px solid white;
}
}
.queue .metadata {
.queue ul .metadata {
flex: 1;
}
.queue .song__name {
.queue ul .song__name {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
@ -209,6 +213,9 @@ ul.dir li .material-symbols-outlined {
.player {
width: 25rem;
padding: 1rem 1rem 0;
display: flex;
flex-flow: column;
}
.player .nowplaying {

13
templates/index.html
View file

@ -31,8 +31,17 @@
></div>
<div class="player">
<div hx-trigger="sse:player" hx-get="/player"></div>
<div hx-trigger="sse:playlist,sse:player" hx-get="/queue"></div>
<div class="nowplaying" hx-trigger="sse:player" hx-get="/player"></div>
<div class="queue-header">
<div class="queue-next">Next in queue</div>
<button class="queue-clear" hx-delete="/queue" hx-swap="none">
<span class="material-symbols-outlined">playlist_remove</span>
Clear
</button>
</div>
<div class="queue" hx-trigger="sse:playlist,sse:player" hx-get="/queue"></div>
</div>
</body>
</html>

100
templates/player.html
View file

@ -1,62 +1,60 @@
{# #}
<!DOCTYPE html>
<div class="nowplaying">
<div class="current">
{% if let Some(song) = song %}
<div class="albumart">
<a href="/art?path={{ song.file|urlencode }}" target="_blank">
<img
src="/art?path={{ song.file|urlencode }}"
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</a>
</div>
<div class="metadata">
{% if let Some(name) = name %}
<div class="song__name" title="Song name">{{ name }}</div>
{% endif %}
{% if let Some(artist) = song.artist %}
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
{% else %}
<div class="metadata idle">
Nothing playing right now
</div>
<div class="current">
{% if let Some(song) = song %}
<div class="albumart">
<a href="/art?path={{ song.file|urlencode }}" target="_blank">
<img
src="/art?path={{ song.file|urlencode }}"
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</a>
</div>
<div class="metadata">
{% if let Some(name) = name %}
<div class="song__name" title="Song name">{{ name }}</div>
{% endif %}
{% if let Some(artist) = song.artist %}
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/previous"
class="control material-symbols-outlined" role="button" title="Previous track"
>skip_previous</button>
{% if state == mpdrs::State::Play %}
<button
hx-post="/pause"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</button>
{% else %}
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</button>
{% endif %}
<button
hx-post="/next"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</button>
{% else %}
<div class="metadata idle">
Nothing playing right now
</div>
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
{% endif %}
</div>
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/previous"
class="control material-symbols-outlined" role="button" title="Previous track"
>skip_previous</button>
{% if state == mpdrs::State::Play %}
<button
hx-post="/pause"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</button>
{% else %}
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</button>
{% endif %}
<button
hx-post="/next"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</button>
</div>
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
<script>
{% if let Some(name) = name %}
{% if state == mpdrs::State::Play %}

12
templates/queue.html
View file

@ -1,15 +1,7 @@
{# Template #}
<!DOCTYPE html>
<div class="queue-header">
<div class="queue-next">Next in queue</div>
<button class="queue-clear" hx-delete="/queue" hx-swap="none">
<span class="material-symbols-outlined">playlist_remove</span>
Clear
</div>
</div>
<ul class="queue">
<ul>
{% for item in queue %}
<li {% if item.playing %}class="playing"{% endif %}>
<div class="albumart">
@ -36,7 +28,7 @@ htmx.onLoad(() => {
.matchMedia("(prefers-reduced-motion: reduce)")
.matches;
new Sortable(document.querySelector(".queue"), {
new Sortable(document.querySelector(".queue ul"), {
animation: isReduced ? 0 : 100,
onEnd: (event) => fetch("/queue/move", {
method: "POST",