Less server calls, CSS

src/WebContent.h

@@ -20,7 +20,8 @@ const char index_html[] PROGMEM = R"rawliteral(
   <div class="slidecontainer">
     
     <input name="progress" type="range" min="0" max="100" value="0" class="slider" id="progressSlider" 
-    onchange="postValue('progress',document.getElementById('progressSlider').value);lastChange = Date.now()"
+    onchange="postValue('progress',document.getElementById('progressSlider').value);lastChange = Date.now();userIsInteracting = false;"
+    oninput="userIsInteracting = true;"
     >
     <label for="progress" id="progressLabel"></label>
   </div>
@@ -40,13 +41,21 @@ const char index_html[] PROGMEM = R"rawliteral(
    </p>
    
    <script>
-   setInterval(getState, 500);
+    setInterval(getState, 4000);
+    setInterval(updateProgress, 500); // Update progress every second
 
     // Get the <li> elements
     var liElements = document.querySelectorAll('ul li');
 
     var lastChange = 0;
 
+    var lastStateUpdateTime = Date.now();
+    var songStartTime = 0;
+    var currentSongLength = 0;
+    var isPlaying = false;
+    var userIsInteracting = false; // Flag to track user interaction with the slider
+
+
     // Add click event listener to each <li> element
     liElements.forEach(function(li) {
       li.addEventListener('click', function() {
@@ -59,6 +68,13 @@ const char index_html[] PROGMEM = R"rawliteral(
    function simpleGetCall(endpoint) {
      var xhr = new XMLHttpRequest();    
      xhr.open("GET", "/" + endpoint, true);
+
+     xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        getState(); // Fetch the latest state right after the button action
+      }
+    };
+
      xhr.send();
    }
 
@@ -67,23 +83,46 @@ const char index_html[] PROGMEM = R"rawliteral(
      xhr.open("POST", "/" + endpoint, true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");    
      xhr.send("value="+encodeURIComponent(value));
-     xhr.send();
-   }
-
-   function getState() {
-     var xhr = new XMLHttpRequest();
 
      xhr.onreadystatechange = function() {
-     if (xhr.readyState === 4) {
+      if (xhr.readyState === 4) {
-      displayState(JSON.parse(xhr.response));
+        getState(); // Fetch the latest state right after the button action
-      
       }
-     }
+     };     
-
-     xhr.open("GET","/state", true);
-     xhr.send();
    }
 
+  function getState() {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        var state = JSON.parse(xhr.response);
+        isPlaying = state['playing'];
+        if (isPlaying) {
+          songStartTime = Date.now() - state['time'] * 1000;
+          currentSongLength = state['length'] * 1000;
+        }
+        lastStateUpdateTime = Date.now();
+        displayState(state);
+      }
+    }
+    xhr.open("GET","/state", true);
+    xhr.send();
+  }
+
+
+  function updateProgress() {
+    if (isPlaying && !userIsInteracting) { // Check if user is not interacting
+      var elapsedTime = Date.now() - songStartTime;
+      if (elapsedTime >= currentSongLength) {
+        elapsedTime = currentSongLength;
+        isPlaying = false; // Stop updating if the song has ended
+      }
+      var progressElement = document.getElementById('progressSlider');
+      progressElement.value = elapsedTime / 1000; // Convert to seconds
+      document.getElementById("progressLabel").innerHTML = Math.floor(elapsedTime / 1000);
+    }
+  }
+
    function displayState(state) {
     document.getElementById("state").innerHTML = state['title'];
     document.getElementById("progressLabel").innerHTML = state['time'];
@@ -106,7 +145,7 @@ const char index_html[] PROGMEM = R"rawliteral(
       var volume = document.getElementById('volumeSlider');
       volume.value = state['volume'];
     }
-
+    updateProgress();
 
    }
 
@@ -119,7 +158,7 @@ const char index_html[] PROGMEM = R"rawliteral(
     http.onreadystatechange = function()
     {
         if(http.readyState == 4 && http.status == 200) {
-            
+          getState();       
         }
     }
     http.send(null);

src/css.h

@@ -1,72 +1,76 @@
 const char css[] PROGMEM = R"rawliteral(
 body {
-    font-family: Arial;
+    font-family: Arial, sans-serif;
-    margin: 5px auto;
+    margin: 0 auto;
-    padding: 30px;
+    padding: 20px;
+    text-align: center; /* Center align elements */
+    background-color: #f4f4f4; /* Light background */
 }
 
 li {
     cursor: pointer;
 }
 
+.play-button, .next-button, .prev-button {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.3s ease; /* Smooth transition for hover */
+}
+
 .play-button {
-  border: 0;
+    box-sizing: border-box;
-  background: transparent;
+    margin: 5% auto;
-  box-sizing: border-box;
+    height: 50px; /* Consistent size for play button */
-  width: 0;
+    border-color: transparent transparent transparent #007bff;
-  margin: 5%;
+    border-style: solid;
-  height: 74px;
+    border-width: 25px 0 25px 40px; /* Adjusted size */
-  border-color: transparent transparent transparent grey;
-  transition: 100ms all ease;
-  cursor: pointer;
-  border-style: solid;
-  border-width: 37px 0 37px 60px;
-  margin-right: 10%;
-  margin-left: 10%;
-  margin-top: 5%;
-  margin-bottom: 5%;
 }
+
 .play-button.paused {
-  border-style: double;
+    border-style: double;
-  border-width: 0px 0 0px 60px;
+    border-width: 25px 0 25px 40px; /* Same size for pause button */
-  height: 74px;
+    height: 50px; /* Consistent height */
 }
- .play-button:hover {
+
-  border-color: transparent transparent transparent darkgrey;
+.play-button:hover {
+    border-color: transparent transparent transparent #0056b3; /* Darker blue on hover */
+}
+
+.next-button, .prev-button {
+    padding: 0;
+    margin: 10px;
+    border-color: transparent #007bff transparent #007bff;
+    border-style: solid;
 }
 
 .next-button {
-  background: transparent;
+    border-width: 15px 0 15px 25px;
-  padding: 0; 
+    box-shadow: 8px 0 0 0 #007bff;
-  margin: -6px;
-  border-style: solid;
-  border-width: 18px 0 18px 30px;
-  border-color: transparent grey transparent grey;
-  box-shadow: 10px 0 0 0 grey;
 }
 
 .next-button:hover {
-  border-color: transparent darkgrey transparent darkgrey;
+    border-color: transparent #0056b3 transparent #0056b3;
-  box-shadow: 10px 0 0 0 darkgrey;
+    box-shadow: 8px 0 0 0 #0056b3;
 }
 
 .prev-button {
-  background: transparent;
+    border-width: 15px 25px 15px 0;
-  padding: 0; 
+    box-shadow: -8px 0 0 0 #007bff;
-  margin: 0;
-  border-style: solid;
-  border-width: 18px 30px 18px 0;
-  border-color: transparent grey transparent grey;
-  box-shadow: -10px 0 0 0 grey;
 }
 
 .prev-button:hover {
-  border-color: transparent darkgrey transparent darkgrey;
+    border-color: transparent #0056b3 transparent #0056b3;
-  box-shadow: -10px 0 0 0 darkgrey;
+    box-shadow: -8px 0 0 0 #0056b3;
 }
 
 .slider {
-  width: 80%;
+    width: 90%; /* Make slider wider for easier interaction */
+    margin: 10px auto; /* Center align the slider */
+}
+
+.slidecontainer {
+    margin: 20px 0; /* Space out elements */
 }
 
 )rawliteral";

src/globals.h

@@ -98,10 +98,11 @@ const long sleepMessageDelay = 28000;
 const long sleepDelay = 30000;
 */
 
-//const long sleepMessageDelay = 1798000;
 const long sleepMessageDelay = 1798000;
+//const long sleepMessageDelay = 22000;
 
 // wait until deep sleep:1800000
 const long sleepDelay = 1800000;
+//const long sleepDelay = 25000;
 
 #endif