From: Chris Fulljames <christianfulljames@gmail.com>
Date: Fri, 31 Jan 2025 12:29:38 +0000 (-0500)
Subject: Add volume slider
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=377ab219f68278f68f50eaee3be4a1b2c8f7dadb;p=littlesongplace.git

Add volume slider
---

diff --git a/static/player.js b/static/player.js
index 572b2bf..f34db0b 100644
--- a/static/player.js
+++ b/static/player.js
@@ -200,5 +200,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
     for (const element of document.getElementsByClassName("song")) {
         m_allSongs.push(element);
     }
+
+    // Volume
+    var vol = document.getElementById("volume-slider");
+    vol.oninput = function() {
+        console.log("updateVolume", vol);
+        audio.volume = vol.value;
+    }
+
 });
 
diff --git a/static/styles.css b/static/styles.css
index 900978d..2cf1fef 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -98,6 +98,34 @@ div.page-header {
     padding: 5px;
 }
 
+/* Sliders (e.g. volume) */
+
+input[type=range] {
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  background: var(--black); /* Otherwise white in Chrome */
+  height: 4px;
+  border-radius: 2px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 14px;
+    width: 14px;
+    border-radius: 7px;
+    background: var(--purple);
+    cursor: pointer;
+}
+
+input[type=range]::-moz-range-thumb {
+    border: none;
+    height: 14px;
+    width: 14px;
+    border-radius: 7px;
+    background: var(--purple);
+    cursor: pointer;
+}
+
 /* Navbar */
 div.navbar {
     display: flex;
@@ -273,7 +301,7 @@ div.player-info {
     padding: 10px;
 }
 
-div.player-controls {
+.player-controls {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -292,16 +320,11 @@ div.player-controls {
     border: none;
 }
 
-.player-button img {
-    image-rendering: pixelated;
-    width: 32px;
-}
-
 #player-position {
     display: inline-block;
     position: relative;
-    width: 50%;
     height: 32px;
+    width: 50%;
 }
 
 #player-position-bar {
@@ -312,12 +335,12 @@ div.player-controls {
     top: 14px;
     width: 100%;
     height: 4px;
+    border-radius: 2px;
 }
 
 #player-position-dot {
     position: absolute;
     display: inline-block;
-    visibility: hidden;
     background-color: var(--purple);
     top: 6px;
     width: 20px;
@@ -326,6 +349,19 @@ div.player-controls {
     cursor: pointer;
 }
 
+.player-button img {
+    image-rendering: pixelated;
+    width: 32px;
+}
+
+#volume-slider {
+    width: 25%;
+}
+
+.player-label {
+    font-size: 14px;
+}
+
 /* Activity */
 div.comment-notification {
     margin: 10px;
@@ -333,3 +369,10 @@ div.comment-notification {
     box-shadow: 0px 0px 5px 0px;
     border-radius: 10px;
 }
+
+/* Platform-specific global overrides */
+@media screen and (max-width: 480px) {
+    .desktop-only {
+        display: none;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
index 7262f31..d85c279 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -84,6 +84,10 @@
                     <span class="player-time" id="player-total-time">0:00</span>
                     <audio id="player-audio"></audio>
                 </div>
+                <div class="player-controls desktop-only">
+                    <label class="player-label" for="volume">Volume</label>
+                    <input id="volume-slider" name="volume" type="range" min="0" max="1" step="any" value="1"/>
+                </div>
             </div>
         </div>
     </body>
diff --git a/todo.txt b/todo.txt
index fcf51ca..56bc0fd 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,6 +1,7 @@
+- Activity indicator
+- Favicon
 - YouTube importer
 - Autoplay toggle
-- Volume control
 - Shuffle all
 - Song sorter for song lists
 - Additional song info in player (collabs, description, tags)