Fix issue with modal image viewer with low live_preview_refresh_period (#16981)

.eslintrc.js

@@ -88,6 +88,7 @@ module.exports = {
         // imageviewer.js
         modalPrevImage: "readonly",
         modalNextImage: "readonly",
+        updateModalImageIfVisible: "readonly",
         // localStorage.js
         localSet: "readonly",
         localGet: "readonly",

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 ? "🗇" : "🗆";
+    updateModalImageIfVisible();
     event.stopPropagation();
 }
 

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);

style.css

@@ -602,6 +602,7 @@ table.popup-table .link{
     background: var(--background-fill-primary);
     width: 100%;
     height: 100%;
+    pointer-events: none;
 }
 
 .livePreview img{