From 82bf9a373023f2317a7d30c28d9064ffe016e2c4 Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Sat, 3 May 2025 03:09:38 +0800
Subject: [PATCH] Fix issue with modal image viewer with low
 live_preview_refresh_period (#16981)

---
 .eslintrc.js              | 1 +
 javascript/imageviewer.js | 2 ++
 javascript/progressbar.js | 2 +-
 style.css                 | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2e7258f6b..aa8039f61 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -88,6 +88,7 @@ module.exports = {
         // imageviewer.js
         modalPrevImage: "readonly",
         modalNextImage: "readonly",
+        updateModalImageIfVisible: "readonly",
         // localStorage.js
         localSet: "readonly",
         localGet: "readonly",
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 979d05de5..737fe483b 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -54,6 +54,7 @@ function updateOnBackgroundChange() {
         updateModalImage();
     }
 }
+const updateModalImageIfVisible = updateOnBackgroundChange;
 
 function modalImageSwitch(offset) {
     var galleryButtons = all_gallery_buttons();
@@ -164,6 +165,7 @@ function modalLivePreviewToggle(event) {
     const modalToggleLivePreview = gradioApp().getElementById("modal_toggle_live_preview");
     opts.js_live_preview_in_modal_lightbox = !opts.js_live_preview_in_modal_lightbox;
     modalToggleLivePreview.innerHTML = opts.js_live_preview_in_modal_lightbox ? "&#x1F5C7;" : "&#x1F5C6;";
+    updateModalImageIfVisible();
     event.stopPropagation();
 }
 
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index c81a41e9a..e7864bba9 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -190,7 +190,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                         livePreview.className = 'livePreview';
                         gallery.insertBefore(livePreview, gallery.firstElementChild);
                     }
-
+                    updateModalImageIfVisible();
                     livePreview.appendChild(img);
                     if (livePreview.childElementCount > 2) {
                         livePreview.removeChild(livePreview.firstElementChild);
diff --git a/style.css b/style.css
index 0b255bc48..223795263 100644
--- a/style.css
+++ b/style.css
@@ -602,6 +602,7 @@ table.popup-table .link{
     background: var(--background-fill-primary);
     width: 100%;
     height: 100%;
+    pointer-events: none;
 }
 
 .livePreview img{