Support previewing animated image uploads (#3479)

Co-authored-by: github-actions <github-actions@github.com>

src/composables/node/useNodeAnimatedImage.ts

@@ -3,6 +3,7 @@ import type { IWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
 import { createImageHost } from '@/scripts/ui/imagePreview'
+import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 
 /**
  * Composable for handling animated image previews in nodes
@@ -42,6 +43,16 @@ export function useNodeAnimatedImage() {
       widget.serialize = false
       widget.serializeValue = () => undefined
       widget.options.host.updateImages(node.imgs)
+      widget.computeLayoutSize = () => {
+        const img = widget.options.host.getCurrentImage()
+        if (!img) return { minHeight: 0, minWidth: 0 }
+
+        return fitDimensionsToNodeWidth(
+          img.naturalWidth,
+          img.naturalHeight,
+          node.size?.[0] || 0
+        )
+      }
     }
   }
 

src/composables/node/useNodeImage.ts

@@ -1,6 +1,7 @@
 import type { LGraphNode } from '@comfyorg/litegraph'
 
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 
 const VIDEO_WIDGET_NAME = 'video-preview'
 const VIDEO_DEFAULT_OPTIONS = {
@@ -131,12 +132,15 @@ export const useNodeVideo = (node: LGraphNode) => {
   let minWidth = DEFAULT_VIDEO_SIZE
 
   const setMinDimensions = (video: HTMLVideoElement) => {
-    const intrinsicAspectRatio = video.videoWidth / video.videoHeight
-    if (!intrinsicAspectRatio || isNaN(intrinsicAspectRatio)) return
+    const { minHeight: calculatedHeight, minWidth: calculatedWidth } =
+      fitDimensionsToNodeWidth(
+        video.videoWidth,
+        video.videoHeight,
+        node.size?.[0] || DEFAULT_VIDEO_SIZE
+      )
 
-    // Set min. height s.t. video spans node's x-axis while maintaining aspect ratio
-    minWidth = node.size?.[0] || DEFAULT_VIDEO_SIZE
-    minHeight = Math.max(minWidth / intrinsicAspectRatio, 64)
+    minWidth = calculatedWidth
+    minHeight = calculatedHeight
   }
 
   const loadElement = (url: string): Promise<HTMLVideoElement | null> =>

src/composables/widgets/useImageUploadWidget.ts

@@ -37,6 +37,7 @@ export const useImageUploadWidget = () => {
     const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions
     const nodeOutputStore = useNodeOutputStore()
 
+    const isAnimated = !!inputOptions.animated_image_upload
     const isVideo = !!inputOptions.video_upload
     const accept = isVideo ? ACCEPTED_VIDEO_TYPES : ACCEPTED_IMAGE_TYPES
     const { showPreview } = isVideo ? useNodeVideo(node) : useNodeImage(node)
@@ -92,7 +93,9 @@ export const useImageUploadWidget = () => {
 
     // Add our own callback to the combo widget to render an image when it changes
     fileComboWidget.callback = function () {
-      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value)
+      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value, {
+        isAnimated
+      })
       node.graph?.setDirtyCanvas(true)
     }
 
@@ -100,7 +103,9 @@ export const useImageUploadWidget = () => {
     // The value isnt set immediately so we need to wait a moment
     // No change callbacks seem to be fired on initial setting of the value
     requestAnimationFrame(() => {
-      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value)
+      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value, {
+        isAnimated
+      })
       showPreview({ block: false })
     })