From 8919464607ebdca2c8d9526e9903c35c28839ad0 Mon Sep 17 00:00:00 2001
From: Carl Pearson <srht@carlpearson.net>
Date: Fri, 13 Sep 2024 08:41:02 -0600
Subject: [PATCH] track and set progress across all video/audio on a page

---
 templates/video.html | 48 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/templates/video.html b/templates/video.html
index c2a2a55..3f0145c 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -75,6 +75,54 @@
         <div class="build-id">Build ID: {{.build_id}}</div>
     </div>
 
+
+    <script>
+        // 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}`;
+
+        // Function to save the current time of the most recently played media
+        function saveMediaProgress(media) {
+            const currentProgress = parseFloat(localStorage.getItem(pageKey)) || 0;
+            if (media.currentTime > currentProgress) {
+                localStorage.setItem(pageKey, media.currentTime);
+            }
+        }
+
+        // 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);
+                });
+            }
+        }
+
+        // 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);
+                }
+            });
+
+            // Also save when the media is paused
+            media.addEventListener('pause', () => saveMediaProgress(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);
+            });
+        });
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file