From 0eeb3a4a8ddc675fe1fd4fc433e8bbcf75d69393 Mon Sep 17 00:00:00 2001
From: Austin Mroz <AustinMroz@utexas.edu>
Date: Tue, 10 Dec 2024 14:28:51 -0600
Subject: [PATCH] Use VHS previewWidget for image display

This solves the issue of flickering. Since binary messages must match
the format of the existing still iamge previews, careful ordering is
required to make sure that any messages are properly intercepted and
propagation is candled before an await occurs.

The large number of network requests remains annoying, but performance
seems otherwise superior now to the video approach.
---
 web/js/VHS.core.js | 85 ++++++++++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/web/js/VHS.core.js b/web/js/VHS.core.js
index 635f39d..8571888 100755
--- a/web/js/VHS.core.js
+++ b/web/js/VHS.core.js
@@ -1625,41 +1625,54 @@ app.registerExtension({
                 }
             }
         }
-        let previewImages = []
-        let animateInterval
-        api.addEventListener('VHS_latentpreview', ({ detail }) => {
-            let setting = app.ui.settings.getSettingValue("VHS.LatentPreview", 'Disabled')
-            if (setting == 'Disabled') {
-                return
-            }
-            let repeat = setting == 'Continuous'
-            let id = app.runningNodeId
-            if (id == null) {
-                return
-            }
-            //let previewNode = app.graph.getNodeById(id)
-            previewImages = []
-            previewImages.length = detail
-            let displayIndex = 0
-            if (animateInterval) {
-                clearTimeout(animateInterval)
-            }
-            animateInterval = setInterval(() => {
-                if (app.runningNodeId != id || !previewImages[displayIndex]) {
-                    return
-                }
-                app.nodePreviewImages[id] = [previewImages[displayIndex]]
-                displayIndex = (displayIndex + 1) % previewImages.length
-                app.canvas.setDirty(true)
-            }, 1000/8);
-        });
-        api.addEventListener('b_preview', async (e) => {
-            const ab = await e.detail.slice(0,8).arrayBuffer()
-            const index = new DataView(ab).getUint32(4)
-            previewImages[index] = URL.createObjectURL(e.detail.slice(8))
-            e.preventDefault()
-            e.stopImmediatePropagation()
-            return false
-        }, true);
     },
 });
+let previewImages = []
+let animateInterval
+api.addEventListener('VHS_latentpreview', ({ detail }) => {
+    let setting = app.ui.settings.getSettingValue("VHS.LatentPreview", 'Disabled')
+    if (setting == 'Disabled') {
+        return
+    }
+    let repeat = setting == 'Continuous'
+    let id = app.runningNodeId
+    if (id == null) {
+        return
+    }
+    let previewNode = app.graph.getNodeById(id)
+    let previewWidget = previewNode.widgets.find((w) => w.name == 'videopreview') ??
+        _addVideoPreview(previewNode)
+    previewWidget.videoEl.hidden = true
+    previewWidget.imgEl.hidden = false
+    previewImages = []
+    previewImages.length = detail
+    let displayIndex = 0
+    if (animateInterval) {
+        clearTimeout(animateInterval)
+    }
+    animateInterval = setInterval(() => {
+        if (app.runningNodeId != id) {
+            clearTimeout(animateInterval)
+            animateInterval = undefined
+            return
+        }
+        if (!previewImages[displayIndex]) {
+            return
+        }
+        previewWidget.imgEl.src = previewImages[displayIndex]
+        displayIndex = (displayIndex + 1) % previewImages.length
+    }, 1000/8);
+});
+api.addEventListener('b_preview', async (e) => {
+    if (!animateInterval) {
+        return
+    }
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    const ab = await e.detail.slice(0,8).arrayBuffer()
+    const index = new DataView(ab).getUint32(4)
+    URL.revokeObjectURL(previewImages[index])
+    previewImages[index] = URL.createObjectURL(e.detail.slice(8))
+    return false
+}, true);