From: Chris Fulljames <christianfulljames@gmail.com>
Date: Wed, 5 Feb 2025 12:22:18 +0000 (-0500)
Subject: Use range slider for player position
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=89ea2a475363e70eeb81b9c2e9a30dd7ba161178;p=littlesongplace.git

Use range slider for player position
---

diff --git a/static/player.js b/static/player.js
index 55544c1..c55fdf0 100644
--- a/static/player.js
+++ b/static/player.js
@@ -132,67 +132,16 @@ function getTimeString(time) {
 // Update the player while the song plays
 function songUpdate() {
     var audio = document.getElementById("player-audio");
-    var bar = document.getElementById("player-position-bar");
-    var dot = document.getElementById("player-position-dot");
-    var songProgress = audio.currentTime / audio.duration;
-    var maxPosition = bar.offsetWidth - dot.offsetWidth
-    var dotPosition = songProgress * maxPosition;
-
-    dot.style.left = `${dotPosition}px`;
-    dot.style.visibility = "visible";
-
-    document.getElementById("player-current-time").textContent = getTimeString(audio.currentTime);
-    document.getElementById("player-total-time").textContent = getTimeString(audio.duration);
-}
-
-// Mouse scrub state
-var m_isScrubbing = false;
-var m_scrubPosition = 0;
-
-// Handle a mouse event that scrubs the song position
-function songScrub(event) {
-    var audio = document.getElementById("player-audio");
-    var bar = document.getElementById("player-position-bar");
-    var dot = document.getElementById("player-position-dot");
-    var maxPosition = bar.offsetWidth - dot.offsetWidth
-    if (event.type == "mousedown") {
-        // Start scrub
-        m_isScrubbing = true;
-        if (event.target === dot) {
-            // Clicked dot - start scrub, but don't move yet
-            var songProgress = audio.currentTime / audio.duration;
-            m_scrubPosition = songProgress * maxPosition;
-        }
-        else {
-            // Clicked outside of dot, set dot position immediately
-            var dotPosition = event.offsetX - (dot.offsetWidth / 2);
-            updateScrubPosition(dot, audio, dotPosition, maxPosition);
-        }
-    }
-    else if (["mouseup", "mouseleave"].includes(event.type)) {
-        // End scrub
-        m_isScrubbing = false;
+    var position = document.getElementById("position-slider");
+    if (audio.duration) {
+        position.value = audio.currentTime / audio.duration;
     }
-    else if (event.type == "mousemove" && m_isScrubbing) {
-        // Scrub
-        var dotPosition = m_scrubPosition + event.movementX;
-        updateScrubPosition(dot, audio, dotPosition, maxPosition);
+    else {
+        position.value = 0;
     }
 
-    // Prevent drag event from being used for selection
-    if (event.stopPropagation) event.stopPropagation();
-    if (event.preventDefault) event.preventDefault();
-    event.cancelBubble = true;
-    event.returnValue = false;
-}
-
-// Update scrub dot position
-function updateScrubPosition(dot, audio, dotPosition, maxPosition) {
-    if (dotPosition < 0) { dotPosition = 0; }
-    if (dotPosition > maxPosition) { dotPosition = maxPosition; }
-    dot.style.left = `${dotPosition}px`;
-    m_scrubPosition = dotPosition;
-    audio.currentTime = audio.duration * (dotPosition / maxPosition);
+    document.getElementById("player-current-time").textContent = getTimeString(audio.currentTime);
+    document.getElementById("player-total-time").textContent = getTimeString(audio.duration);
 }
 
 // Add event listeners
@@ -217,23 +166,18 @@ document.addEventListener("DOMContentLoaded", (event) => {
     })
 
     // Audio position scrubbing
-    var playerPosition = document.getElementById("player-position");
-    playerPosition.addEventListener("mousedown", songScrub);
-    playerPosition.addEventListener("mouseup", songScrub);
-    playerPosition.addEventListener("mouseleave", songScrub);
-    playerPosition.addEventListener("mousemove", songScrub);
-
-    // Song queue
-    for (const element of document.getElementsByClassName("song")) {
-        m_allSongs.push(element);
+    document.getElementById("position-slider").oninput = function(event) {
+        audio.currentTime = audio.duration * event.target.value;
     }
 
     // Volume
-    var vol = document.getElementById("volume-slider");
-    vol.oninput = function() {
-        console.log("updateVolume", vol);
-        audio.volume = vol.value;
+    document.getElementById("volume-slider").oninput = function(event) {
+        audio.volume = event.target.value;
     }
 
+    // Song queue
+    for (const element of document.getElementsByClassName("song")) {
+        m_allSongs.push(element);
+    }
 });
 
diff --git a/static/styles.css b/static/styles.css
index 5253faa..aa3df31 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -363,33 +363,26 @@ div.player-info {
     border: none;
 }
 
-#player-position {
-    display: inline-block;
-    position: relative;
-    height: 32px;
-    width: 50%;
+#position-slider {
+    width: 200px;
 }
 
-#player-position-bar {
-    position: absolute;
-    display: inline-block;
-    background-color: var(--black);
-    left: 100;
-    top: 14px;
-    width: 100%;
-    height: 4px;
-    border-radius: 2px;
+@media screen and (max-width: 480px) {
+    #position-slider {
+        width: 20%;
+    }
 }
 
-#player-position-dot {
-    position: absolute;
-    display: inline-block;
-    background-color: var(--purple);
-    top: 6px;
+#position-slider::-webkit-slider-thumb {
+    height: 20px;
     width: 20px;
+    border-radius: 10px;
+}
+
+#position-slider::-moz-range-thumb {
     height: 20px;
-    border-radius: 50%;
-    cursor: pointer;
+    width: 20px;
+    border-radius: 10px;
 }
 
 .player-button img {
diff --git a/templates/base.html b/templates/base.html
index 4c1e82a..dfb6be5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -96,10 +96,7 @@
                     <button onclick="songNext()" class="player-button">
                         <img src="/static/lsp_btn_next02.gif" alt="Next">
                     </button>
-                    <div id="player-position">
-                        <span id="player-position-bar"></span>
-                        <span id="player-position-dot"></span>
-                    </div>
+                    <input id="position-slider" name="song-position" type="range" min="0" max="1" step="any" value="0"/>
                     <span class="player-time" id="player-current-time">0:00</span>
                     <span class="player-time-sep">/</span>
                     <span class="player-time" id="player-total-time">0:00</span>