reduce CPU usage

static/script/save-media-progress.js

@@ -7,13 +7,14 @@ const videoId = document.getElementById('video-id').value;
 // Get the initial timestamp from the hidden input
 const initialTimestamp = parseFloat(document.getElementById('video-timestamp').value || 0);
 
-// Track the last time we sent an update to avoid excessive requests
-let lastUpdateTime = 0;
+// Track which media element is currently playing
+let activeMedia = null;
+let updateTimer = null;
 const UPDATE_INTERVAL = 5000; // 5 seconds in milliseconds
 
 // Function to send the current time to the server
 function sendTimestampToServer(timestamp) {
-    console.log(timestamp)
+    console.log(videoId, "->", timestamp)
     fetch(`/video/${videoId}/set_timestamp`, {
         method: 'POST',
         headers: {
@@ -25,13 +26,24 @@ function sendTimestampToServer(timestamp) {
     });
 }
 
-// Function to handle periodic updates while playing
-function handleTimeUpdate(media) {
-    // Only send updates every 5 seconds while playing
-    const now = Date.now();
-    if (!media.paused && now - lastUpdateTime >= UPDATE_INTERVAL) {
-        sendTimestampToServer(media.currentTime);
-        lastUpdateTime = now;
+// Function to start the update timer
+function startUpdateTimer() {
+    // Clear any existing timer
+    stopUpdateTimer();
+
+    // Start a new timer that sends updates every 5 seconds
+    updateTimer = setInterval(() => {
+        if (activeMedia && !activeMedia.paused) {
+            sendTimestampToServer(activeMedia.currentTime);
+        }
+    }, UPDATE_INTERVAL);
+}
+
+// Function to stop the update timer
+function stopUpdateTimer() {
+    if (updateTimer) {
+        clearInterval(updateTimer);
+        updateTimer = null;
     }
 }
 
@@ -45,16 +57,43 @@ mediaElements.forEach(media => {
         }
     });
 
-    // Send updates periodically while playing
-    media.addEventListener('timeupdate', () => handleTimeUpdate(media));
+    // When media starts playing
+    media.addEventListener('play', () => {
+        // Set this as the active media
+        activeMedia = media;
+        // Start the update timer
+        startUpdateTimer();
+    });
 
-    // Send update when media is paused
+    // When media is paused
     media.addEventListener('pause', () => {
+        // Send the current timestamp
         sendTimestampToServer(media.currentTime);
+
+        // If this is the active media, stop the timer
+        if (activeMedia === media) {
+            stopUpdateTimer();
+            activeMedia = null;
+        }
     });
 
     // Reset timestamp when media ends
     media.addEventListener('ended', () => {
         sendTimestampToServer(0);
+
+        // If this is the active media, stop the timer
+        if (activeMedia === media) {
+            stopUpdateTimer();
+            activeMedia = null;
+        }
     });
 });
+
+// Clean up when the page is unloaded
+window.addEventListener('beforeunload', () => {
+    // Send final timestamp if media is playing
+    if (activeMedia && !activeMedia.paused) {
+        sendTimestampToServer(activeMedia.currentTime);
+    }
+    stopUpdateTimer();
+});