Track timestamps server-side

static/script/save-media-progress.js

@@ -1,42 +1,60 @@
-
 // Get all video and audio elements
 const mediaElements = document.querySelectorAll('video, audio');
 
-// Generate a unique key for this page
-const pageKey = `mediaProgress_${window.location.pathname}`;
+// Get the video ID from the hidden input
+const videoId = document.getElementById('video-id').value;
 
-// Function to save the current time of the most recently played media
-function saveMediaProgress(media) {
-    localStorage.setItem(pageKey, media.currentTime);
+// 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;
+const UPDATE_INTERVAL = 5000; // 5 seconds in milliseconds
+
+// Function to send the current time to the server
+function sendTimestampToServer(timestamp) {
+    console.log(timestamp)
+    fetch(`/video/${videoId}/set_timestamp`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "timestamp": timestamp })
+    }).catch(error => {
+        console.error('Error sending timestamp to server:', error);
+    });
 }
 
-// Function to load and set the saved time for all media elements
-function loadMediaProgress() {
-    const savedTime = localStorage.getItem(pageKey);
-    if (savedTime) {
-        mediaElements.forEach(media => {
-            media.currentTime = Math.min(parseFloat(savedTime), media.duration || Infinity);
-        });
+// 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;
     }
 }
 
 // Set up event listeners for each media element
 mediaElements.forEach(media => {
-    // Save progress when the media is playing
-    media.addEventListener('timeupdate', () => {
-        if (!media.paused) {
-            saveMediaProgress(media);
+    // Set initial timestamp when media is ready
+    media.addEventListener('loadedmetadata', () => {
+        // Only set if the initial timestamp is within the media duration
+        if (initialTimestamp > 0 && initialTimestamp < media.duration) {
+            media.currentTime = initialTimestamp;
         }
     });
 
-    // Also save when the media is paused
-    media.addEventListener('pause', () => saveMediaProgress(media));
+    // Send updates periodically while playing
+    media.addEventListener('timeupdate', () => handleTimeUpdate(media));
 
-    // Load the saved progress when the media is ready
-    media.addEventListener('loadedmetadata', loadMediaProgress);
-
-    // Clear progress when any media ends
-    media.addEventListener('ended', () => {
-        localStorage.removeItem(pageKey);
+    // Send update when media is paused
+    media.addEventListener('pause', () => {
+        sendTimestampToServer(media.currentTime);
     });
-});
+
+    // Reset timestamp when media ends
+    media.addEventListener('ended', () => {
+        sendTimestampToServer(0);
+    });
+});