From 0f3f8353caf1104c74577f08e3e7583961e877ae Mon Sep 17 00:00:00 2001
From: G-Fourteen <gfourteen7525@gmail.com>
Date: Thu, 11 Sep 2025 10:36:38 -0600
Subject: [PATCH] Fix screensaver thumbnail gallery

---
 screensaver.js | 138 ++++++++++++++++++++++++-------------------------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/screensaver.js b/screensaver.js
index b3d107c..327710f 100644
--- a/screensaver.js
+++ b/screensaver.js
@@ -276,66 +276,64 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    function addToHistory(imageUrl, prompt) {
-        if (imageHistory.includes(imageUrl)) {
-            console.log("Duplicate image URL detected, skipping:", imageUrl);
-            return;
-        }
-        imageHistory.unshift(imageUrl);
-        promptHistory.unshift(prompt);
-        if (imageHistory.length > MAX_HISTORY) {
-            imageHistory.pop();
-            promptHistory.pop();
-        }
-        saveImageHistory();
-        updateThumbnailHistory();
-        console.log("Current imageHistory length:", imageHistory.length, "Images:", imageHistory);
-        console.log("Current promptHistory length:", promptHistory.length, "Prompts:", promptHistory);
-    }
-
-    function updateThumbnailHistory() {
-        const thumbnailContainer = document.getElementById('screensaver-thumbnails');
-        if (!thumbnailContainer) {
-            console.error("Thumbnail container not found in DOM.");
-            window.showToast("Fuck, the thumbnail container is missing. Can’t populate the gallery.");
-            return;
-        }
-
-        thumbnailContainer.innerHTML = '';
-        imageHistory.forEach((imageUrl, index) => {
-            const thumb = document.createElement('img');
-            thumb.src = imageUrl;
-            thumb.classList.add('thumbnail');
-            thumb.title = promptHistory[index] || 'No prompt available';
-            thumb.alt = "Thumbnail Image";
-            thumb.style.opacity = '1';
-            thumb.onerror = () => {
-                console.log(`Thumbnail ${index + 1} failed to load, using fallback:`, imageUrl);
-                thumb.src = "https://via.placeholder.com/160x90?text=Image+Failed";
-                thumb.style.opacity = '1';
-            };
-            thumb.onload = () => {
-                console.log(`Thumbnail ${index + 1} loaded successfully:`, imageUrl);
-            };
-            thumb.onclick = () => showHistoricalImage(index);
-            const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src;
-            if (imageUrl === currentImgSrc) {
-                thumb.classList.add('selected');
-                console.log("Highlighted thumbnail as selected:", imageUrl);
-            }
-            thumbnailContainer.appendChild(thumb);
-            console.log(`Added thumbnail ${index + 1}/${imageHistory.length} to DOM:`, thumb.src);
-        });
-
-        thumbnailContainer.scrollTo({ left: 0, behavior: 'smooth' });
-        console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length);
-
-        const offsetWidth = thumbnailContainer.offsetWidth;
-        thumbnailContainer.style.display = 'none';
-        thumbnailContainer.offsetHeight;
-        thumbnailContainer.style.display = 'flex';
-        console.log("Forced DOM reflow to ensure rendering. Container offsetWidth:", offsetWidth);
-    }
+    function addToHistory(imageUrl, prompt) {
+        // store newest images at the end of the list
+        imageHistory.push(imageUrl);
+        promptHistory.push(prompt);
+        if (imageHistory.length > MAX_HISTORY) {
+            imageHistory.shift();
+            promptHistory.shift();
+        }
+        saveImageHistory();
+        updateThumbnailHistory();
+        console.log("Current imageHistory length:", imageHistory.length, "Images:", imageHistory);
+        console.log("Current promptHistory length:", promptHistory.length, "Prompts:", promptHistory);
+    }
+
+    function updateThumbnailHistory() {
+        const thumbnailContainer = document.getElementById('screensaver-thumbnails');
+        if (!thumbnailContainer) {
+            console.error("Thumbnail container not found in DOM.");
+            window.showToast("Fuck, the thumbnail container is missing. Can’t populate the gallery.");
+            return;
+        }
+
+        thumbnailContainer.innerHTML = '';
+        imageHistory.forEach((imageUrl, index) => {
+            const thumb = document.createElement('img');
+            thumb.src = imageUrl;
+            thumb.classList.add('thumbnail');
+            thumb.title = promptHistory[index] || 'No prompt available';
+            thumb.alt = "Thumbnail Image";
+            thumb.style.opacity = '1';
+            thumb.onerror = () => {
+                console.log(`Thumbnail ${index + 1} failed to load, using fallback:`, imageUrl);
+                thumb.src = "https://via.placeholder.com/160x90?text=Image+Failed";
+                thumb.style.opacity = '1';
+            };
+            thumb.onload = () => {
+                console.log(`Thumbnail ${index + 1} loaded successfully:`, imageUrl);
+            };
+            thumb.onclick = () => showHistoricalImage(index);
+            const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src;
+            if (imageUrl === currentImgSrc) {
+                thumb.classList.add('selected');
+                console.log("Highlighted thumbnail as selected:", imageUrl);
+            }
+            thumbnailContainer.appendChild(thumb);
+            console.log(`Added thumbnail ${index + 1}/${imageHistory.length} to DOM:`, thumb.src);
+        });
+
+        // keep the view scrolled to the latest thumbnail
+        thumbnailContainer.scrollTo({ left: thumbnailContainer.scrollWidth, behavior: 'smooth' });
+        console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length);
+
+        const offsetWidth = thumbnailContainer.offsetWidth;
+        thumbnailContainer.style.display = 'none';
+        thumbnailContainer.offsetHeight;
+        thumbnailContainer.style.display = 'flex';
+        console.log("Forced DOM reflow to ensure rendering. Container offsetWidth:", offsetWidth);
+    }
 
     function showHistoricalImage(index) {
         const imageUrl = imageHistory[index];
@@ -354,15 +352,17 @@ document.addEventListener("DOMContentLoaded", () => {
             currentImage = nextImage;
             updateThumbnailHistory();
         };
-        nextImgElement.src = imageUrl;
-        nextImgElement.alt = "Screensaver Image";
-        if (nextImgElement.complete && nextImgElement.naturalWidth !== 0) {
-            nextImgElement.style.opacity = '1';
-            currentImgElement.style.opacity = '0';
-            currentImage = nextImage;
-            updateThumbnailHistory();
-        }
-    }
+        nextImgElement.src = imageUrl;
+        nextImgElement.alt = "Screensaver Image";
+        if (nextImgElement.complete && nextImgElement.naturalWidth !== 0) {
+            nextImgElement.style.opacity = '1';
+            currentImgElement.style.opacity = '0';
+            currentImage = nextImage;
+            updateThumbnailHistory();
+        }
+        // restart the timer so new generations resume after viewing a historical image
+        setOrResetImageInterval();
+    }
 
     function setOrResetImageInterval() {
         clearInterval(imageInterval);