Clean player layout

Xwilarg · Dec 31, 2024 · e89329f · e89329f
1 parent 9cb9714
commit e89329f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/web/src/main/getMusics.js b/web/src/main/getMusics.js
@@ -487,6 +487,16 @@ function loadPage() {
             updateFavorites();
         }, () => {});
     });
+    document.getElementById("display-more").addEventListener("click", (_) => {
+        const target = document.getElementById("advanced-controls");
+        if (target.classList.contains("is-hidden")) {
+            target.classList.remove("is-hidden");
+            document.getElementById("display-more-icon").innerHTML = "expand_circle_up";
+        } else {
+            target.classList.add("is-hidden");
+            document.getElementById("display-more-icon").innerHTML = "expand_circle_down";
+        }
+    });
     document.getElementById("volume").addEventListener("change", (_) => {
         const val = document.getElementById("volume").value / 100;
         player.volume = val;

diff --git a/web/templates/player.html.twig b/web/templates/player.html.twig
@@ -7,9 +7,12 @@
         <button class="button" id="previous"><span class="material-symbols-outlined">skip_previous</span></button>
         <button class="button" id="skip"><span class="material-symbols-outlined">skip_next</span></button>
         <button class="button requires-admin" id="favorite"><span class="material-symbols-outlined" id="favorite-icon">heart_plus</span></button>
-        {% if metadata.allowShare %}<button class="button" id="share"><span class="material-symbols-outlined">share</span></button>{% endif %}
-        {% if metadata.allowDownload %}<button class="button" id="download"><span class="material-symbols-outlined">download</span></button>{% endif %}
-        <button class="button requires-admin" id="archive"><span class="material-symbols-outlined">delete</span></button>
+        <button class="button" id="display-more"><span class="material-symbols-outlined" id="display-more-icon">expand_circle_down</span></button>
+        <div id="advanced-controls" class="is-hidden pt-2">
+            {% if metadata.allowShare %}<button class="button" id="share"><span class="material-symbols-outlined">share</span></button>{% endif %}
+            {% if metadata.allowDownload %}<button class="button" id="download"><span class="material-symbols-outlined">download</span></button>{% endif %}
+            <button class="button requires-admin" id="archive"><span class="material-symbols-outlined">delete</span></button>
+        </div>
     </div>
     <br/>
     <span id="currDuration"></span> / <span id="maxDuration"></span>