Only update status when docment is focused

app.py

@@ -1234,4 +1234,4 @@ def update_software():
 if __name__ == '__main__':
     # Auto-connect to serial
     connect_to_serial()
-    app.run(debug=False, host='0.0.0.0', port=8080)
+    app.run(debug=True, host='0.0.0.0', port=8080)

static/js/main.js

@@ -1582,8 +1582,12 @@ function attachFullScreenListeners() {
 
 let lastPreviewedFile = null; // Track the last previewed file
 
+let updateInterval = null;
+
 async function updateCurrentlyPlaying() {
     try {
+        if (!document.hasFocus()) return; // Stop execution if the page is not visible
+
         const response = await fetch('/status');
         const data = await response.json();
 
@@ -1609,7 +1613,7 @@ async function updateCurrentlyPlaying() {
             // Update pattern preview only if the file is different
             if (current_playing_file !== lastPreviewedFile) {
                 previewPattern(fileName, 'currently-playing-container');
-                lastPreviewedFile = current_playing_file; // Update the last previewed file
+                lastPreviewedFile = current_playing_file;
             }
 
             // Update the filename display
@@ -1620,8 +1624,7 @@ async function updateCurrentlyPlaying() {
             const progressBar = document.getElementById('play_progress');
             const progressText = document.getElementById('play_progress_text');
             if (execution_progress) {
-                const progressPercentage =
-                    (execution_progress[0] / execution_progress[1]) * 100;
+                const progressPercentage = (execution_progress[0] / execution_progress[1]) * 100;
                 progressBar.value = progressPercentage;
                 progressText.textContent = `${Math.round(progressPercentage)}%`;
             } else {
@@ -1640,6 +1643,21 @@ async function updateCurrentlyPlaying() {
     }
 }
 
+// Function to start or stop updates based on visibility
+function handleVisibilityChange() {
+    if (document.hasFocus()) {
+        // User is active, start updating
+        if (!updateInterval) {
+            updateCurrentlyPlaying(); // Run immediately
+            updateInterval = setInterval(updateCurrentlyPlaying, 5000); // Update every 5s
+        }
+    } else {
+        // User is inactive, stop updating
+        clearInterval(updateInterval);
+        updateInterval = null;
+    }
+}
+
 function toggleSettings() {
     const settingsContainer = document.getElementById('settings-container');
     if (settingsContainer) {
@@ -1793,6 +1811,8 @@ function switchTab(tabName) {
     }
 }
 
+document.addEventListener("visibilitychange", handleVisibilityChange);
+
 // Initialization
 document.addEventListener('DOMContentLoaded', () => {
     const activeTab = getCookie('activeTab') || 'patterns'; // Default to 'patterns' tab
@@ -1806,5 +1826,7 @@ document.addEventListener('DOMContentLoaded', () => {
     checkForUpdates();
 
     // Periodically check for currently playing status
-    setInterval(updateCurrentlyPlaying, 3000);
+    if (document.hasFocus()) {
+        updateInterval = setInterval(updateCurrentlyPlaying, 5000);
+    }
 });