From 72d76c85ed2b99a76d091d9c30484e1d67f3b426 Mon Sep 17 00:00:00 2001
From: partisan <none@noone.no>
Date: Wed, 4 Dec 2024 08:49:00 +0100
Subject: [PATCH] imageviewer.js will fallback to proxy image when full image
 fails to load

---
 cache-images.go          |  1 +
 static/js/imageviewer.js | 33 ++++++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/cache-images.go b/cache-images.go
index 6813a87..26a6e42 100644
--- a/cache-images.go
+++ b/cache-images.go
@@ -511,5 +511,6 @@ func serveMissingImage(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Cache-Control", "no-store, must-revalidate")
 	w.Header().Set("Pragma", "no-cache")
 	w.Header().Set("Expires", "0")
+	w.WriteHeader(http.StatusNotFound)
 	http.ServeFile(w, r, missingImagePath)
 }
diff --git a/static/js/imageviewer.js b/static/js/imageviewer.js
index 228f5fc..a68f0e2 100644
--- a/static/js/imageviewer.js
+++ b/static/js/imageviewer.js
@@ -96,24 +96,35 @@ document.addEventListener('DOMContentLoaded', function() {
     
         // Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
         const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
-    
-        // Check if full image is missing, fallback to proxy size
-        if (fullImageUrl === '/static/images/missing.svg') {
-            fullImageUrl = proxyFullUrl;
-        }
-    
+
         // Elements in the viewer
         const viewerImage = document.getElementById('viewer-image');
         const viewerTitle = document.getElementById('viewer-title');
         const fullSizeLink = document.getElementById('viewer-full-size-link');
         const proxySizeLink = document.getElementById('viewer-proxy-size-link');
-
-        viewerImage.src = fullImageUrl;
+    
         viewerTitle.textContent = title;
-
         fullSizeLink.href = sourceUrl || proxyFullUrl;
-        proxySizeLink.href = fullImageUrl;
-    }
+    
+        // Remove previous event listeners to avoid stacking
+        viewerImage.onload = null;
+        viewerImage.onerror = null;
+    
+        // Set up the error handler to switch to the proxy image if the full image fails to load
+        viewerImage.onerror = function() {
+            // Use the proxy image as a fallback
+            viewerImage.src = proxyFullUrl;
+            proxySizeLink.href = proxyFullUrl;
+        };
+    
+        // Set up the load handler to ensure the proxySizeLink is set correctly if the image loads
+        viewerImage.onload = function() {
+            proxySizeLink.href = fullImageUrl;
+        };
+    
+        // Start loading the image
+        viewerImage.src = fullImageUrl;
+    }    
 
     document.body.addEventListener('click', function(e) {
         let target = e.target;