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

13
templates/index.html
View file

@ -31,8 +31,17 @@
></div> ></div>
<div class="player"> <div class="player">
<div hx-trigger="sse:player" hx-get="/player"></div> <div class="nowplaying" hx-trigger="sse:player" hx-get="/player"></div>
<div hx-trigger="sse:playlist,sse:player" hx-get="/queue"></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> </div>
</body> </body>
</html> </html>

98
templates/player.html
View file

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

12
templates/queue.html
View file

@ -1,15 +1,7 @@
{# Template #} {# Template #}
<!DOCTYPE html> <!DOCTYPE html>
<div class="queue-header"> <ul>
<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">
{% for item in queue %} {% for item in queue %}
<li {% if item.playing %}class="playing"{% endif %}> <li {% if item.playing %}class="playing"{% endif %}>
<div class="albumart"> <div class="albumart">
@ -36,7 +28,7 @@ htmx.onLoad(() => {
.matchMedia("(prefers-reduced-motion: reduce)") .matchMedia("(prefers-reduced-motion: reduce)")
.matches; .matches;
new Sortable(document.querySelector(".queue"), { new Sortable(document.querySelector(".queue ul"), {
animation: isReduced ? 0 : 100, animation: isReduced ? 0 : 100,
onEnd: (event) => fetch("/queue/move", { onEnd: (event) => fetch("/queue/move", {
method: "POST", method: "POST",