Make queue scrollable
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
d0ec23dc5a
commit
9ccacd92cb
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue