Display playing status & remaining time before sleep in web view

data/www/index.html

@@ -16,6 +16,10 @@
     <div class="w3-margin w3-center w3-card w3-padding-24">
         <button onclick="play()" class="w3-button w3-blue w3-xlarge w3-ripple">Jouer le son</button>
         <button onclick="stop()" class="w3-button w3-blue w3-xlarge w3-ripple">Stop</button>
+        <p class="w3-opacity">
+            <span id="playingStatus" class="w3-hide">Lecture en cours.</span>
+            Temps restant avant veille : <span id="remainingTimeBeforeSleep">01:00:00</span>.
+        </p>
     </div>
 
     <div class="w3-margin w3-center w3-card w3-padding-24">

data/www/script.js

@@ -1,4 +1,4 @@
-const GLOBAL_TIMEOUT = 10000;
+const GLOBAL_TIMEOUT = 3500;
 let connectionOk = true;
 let statusTimeout = null;
 let selectedFile = "";
@@ -66,6 +66,16 @@ function handleStatus(data) {
     document.getElementById("volume-current").innerText = data.volume.current;
     document.getElementById("volume-increase").disabled = !data.volume.canIncrease;
     document.getElementById("volume-decrease").disabled = !data.volume.canDecrease;
+
+    document.getElementById("remainingTimeBeforeSleep").innerText = secondsToHumanDuration(data.remainingSecondsBeforeSleep);
+
+    const playingStatus = document.getElementById("playingStatus");
+    if (data.playing) {
+        playingStatus.classList.remove("w3-hide");
+    } else {
+        playingStatus.classList.add("w3-hide");
+    }
+
     statusTimeout = setTimeout(loadStatus, GLOBAL_TIMEOUT);
 }
 
@@ -112,6 +122,11 @@ function handleError(error) {
     statusTimeout = setTimeout(loadStatus, GLOBAL_TIMEOUT);
 }
 
+function secondsToHumanDuration(seconds) {
+    console.log({seconds});
+    return new Date(seconds * 1000).toISOString().slice(11, 19);
+}
+
 (() => {
     loadStatus().then(() => listFiles());
     statusTimeout = setTimeout(loadStatus, GLOBAL_TIMEOUT);

src/webHandlers.cpp

@@ -28,7 +28,7 @@ void onStatus(AsyncWebServerRequest *request)
   Serial.println("Status");
   AsyncResponseStream *response = request->beginResponseStream("application/json");
 
-  StaticJsonDocument<96> root;
+  StaticJsonDocument<128> root;
   String file = preferences.getString(SELECTED_FILE, "");
   root["files"]["selected"] = file.c_str();
 
@@ -38,6 +38,15 @@ void onStatus(AsyncWebServerRequest *request)
   volume["canDecrease"] = currentVolume > 0;
   volume["canIncrease"] = currentVolume < 21;
 
+  if (!audio.isRunning())
+  {
+    root["remainingSecondsBeforeSleep"] = (DEEP_SLEEP_DELAY_MS - (millis() - lastActionTime)) / 1000;
+  }
+  else {
+    root["remainingSecondsBeforeSleep"] = DEEP_SLEEP_DELAY_MS / 1000;
+  }
+  root["playing"] = audio.isRunning();
+
   serializeJson(root, *response);
   request->send(response);
 }