_/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>

2
templates/player.html
View file

@ -1,7 +1,6 @@
{# #} {# #}
<!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">
@ -55,7 +54,6 @@
</div> </div>
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div> <div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
</div>
<script> <script>
{% if let Some(name) = name %} {% if let Some(name) = name %}

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",