custom_nodes/ComfyUI-AnimateDiff-Evolved/web/js/gif_preview.js

import { app } from '../../../scripts/app.js'
import { api } from '../../../scripts/api.js'

function offsetDOMWidget(
    widget,
    ctx,
    node,
    widgetWidth,
    widgetY,
    height
  ) {
    const margin = 10
    const elRect = ctx.canvas.getBoundingClientRect()
    const transform = new DOMMatrix()
      .scaleSelf(
        elRect.width / ctx.canvas.width,
        elRect.height / ctx.canvas.height
      )
      .multiplySelf(ctx.getTransform())
      .translateSelf(0, widgetY + margin)
  
    const scale = new DOMMatrix().scaleSelf(transform.a, transform.d)
    Object.assign(widget.inputEl.style, {
      transformOrigin: '0 0',
      transform: scale,
      left: `${transform.e}px`,
      top: `${transform.d + transform.f}px`,
      width: `${widgetWidth}px`,
      height: `${(height || widget.parent?.inputHeight || 32) - margin}px`,
      position: 'absolute',
      background: !node.color ? '' : node.color,
      color: !node.color ? '' : 'white',
      zIndex: 5, //app.graph._nodes.indexOf(node),
    })
  }

  export const hasWidgets = (node) => {
    if (!node.widgets || !node.widgets?.[Symbol.iterator]) {
      return false
    }
    return true
  }

  export const cleanupNode = (node) => {
    if (!hasWidgets(node)) {
      return
    }
  
    for (const w of node.widgets) {
      if (w.canvas) {
        w.canvas.remove()
      }
      if (w.inputEl) {
        w.inputEl.remove()
      }
      // calls the widget remove callback
      w.onRemoved?.()
    }
  }

const CreatePreviewElement = (name, val, format) => {
  const [type] = format.split('/')  
  const w = {
      name,
      type,
      value: val,
      draw: function (ctx, node, widgetWidth, widgetY, height) {
        const [cw, ch] = this.computeSize(widgetWidth)
        offsetDOMWidget(this, ctx, node, widgetWidth, widgetY, ch)
      },
      computeSize: function (_) {
        const ratio = this.inputRatio || 1
        const width = Math.max(220, this.parent.size[0])
        return [width, (width / ratio + 10)]
      },
      onRemoved: function () {
        if (this.inputEl) {
          this.inputEl.remove()
        }
      },
    }

    w.inputEl = document.createElement(type === 'video' ? 'video' : 'img')
    w.inputEl.src = w.value
    if (type === 'video') {
      w.inputEl.setAttribute('type', 'video/webm');
      w.inputEl.autoplay = true
      w.inputEl.loop = true
      w.inputEl.controls = false;
    }
    w.inputEl.onload = function () {
      w.inputRatio = w.inputEl.naturalWidth / w.inputEl.naturalHeight
    }
    document.body.appendChild(w.inputEl)
    return w
  }

const gif_preview = {
    name: 'AnimateDiff.gif_preview',
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        switch (nodeData.name) {
            case 'ADE_AnimateDiffCombine':{
                const onExecuted = nodeType.prototype.onExecuted
                nodeType.prototype.onExecuted = function (message) {
                const prefix = 'ad_gif_preview_'
                const r = onExecuted ? onExecuted.apply(this, message) : undefined

                if (this.widgets) {
                    const pos = this.widgets.findIndex((w) => w.name === `${prefix}_0`)
                    if (pos !== -1) {
                      for (let i = pos; i < this.widgets.length; i++) {
                        this.widgets[i].onRemoved?.()
                    }
                    this.widgets.length = pos
                    }
                    if (message?.gifs) {
                      message.gifs.forEach((params, i) => {
                        const previewUrl = api.apiURL(
                          '/view?' + new URLSearchParams(params).toString()
                        )
                  const w = this.addCustomWidget(
                    CreatePreviewElement(`${prefix}_${i}`, previewUrl, params.format || 'image/gif')
                  )
                  w.parent = this
                  })
                 }
                  const onRemoved = this.onRemoved
                  this.onRemoved = () => {
                    cleanupNode(this)
                    return onRemoved?.()
                  }
                }
                this.setSize([this.size[0], this.computeSize([this.size[0], this.size[1]])[1]])
                return r
                }
                break
              }
        }
    }
}

app.registerExtension(gif_preview)