From 9ccacd92cbe375519896f1f62483dea17b497c17 Mon Sep 17 00:00:00 2001
From: Sijmen <me@sijman.nl>
Date: Sun, 7 May 2023 02:51:34 +0200
Subject: [PATCH] Make queue scrollable

---
 static/style.css      |  25 +++++++----
 templates/index.html  |  13 +++++-
 templates/player.html | 100 +++++++++++++++++++++---------------------
 templates/queue.html  |  12 +----
 4 files changed, 78 insertions(+), 72 deletions(-)
diff --git a/static/style.css b/static/style.css
index 15058cd..1e996f7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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 {
diff --git a/templates/index.html b/templates/index.html
index 448421a..a1d8a4f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>
diff --git a/templates/player.html b/templates/player.html
index 5a2826e..2b4b18a 100644
--- a/templates/player.html
+++ b/templates/player.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 %}
diff --git a/templates/queue.html b/templates/queue.html
index 2c66649..e04ce43 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -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",
