Add volume slider

diff --git a/static/player.js b/static/player.js
index 572b2bf9ab96bf81997f2182153fa43458064b0d..f34db0b354338590e9730dc1456a11264db8f1c8 100644 (file)
--- 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 900978d41fda5b4e41f6f9d9f829d910722989b2..2cf1fef8b1d47238f464a50ba29cd8f3d1173890 100644 (file)
--- 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 7262f311ebd177087b63a7c8a0f5aed593feaf7d..d85c27944dbedad5a73fce9c5f17a5a29ceb7f98 100644 (file)
--- 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 fcf51ca496ca6d3b93f7bb5b11f16c3913973737..56bc0fd3ff7d631161924a039a1cd4de5b609e97 100644 (file)
--- 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)