Add support for webm video from SaveWEBM node (#3132)

src/schemas/apiSchema.ts

@@ -21,6 +21,7 @@ const zOutputs = z
   .object({
     audio: z.array(zResultItem).optional(),
     images: z.array(zResultItem).optional(),
+    video: z.array(zResultItem).optional(),
     animated: z.array(z.boolean()).optional()
   })
   .passthrough()

src/stores/queueStore.ts

@@ -89,23 +89,23 @@ export class ResultItemImpl {
   }
 
   get htmlVideoType(): string | undefined {
-    const defaultType = undefined
-
-    if (!this.isVhsFormat) {
-      return defaultType
-    }
-
-    if (this.format?.endsWith('webm')) {
+    if (this.isWebm) {
       return 'video/webm'
     }
-    if (this.format?.endsWith('mp4')) {
-      return 'video/mp4'
+
+    if (this.isVhsFormat) {
+      if (this.format?.endsWith('webm')) {
+        return 'video/webm'
+      }
+      if (this.format?.endsWith('mp4')) {
+        return 'video/mp4'
+      }
     }
-    return defaultType
+    return
   }
 
   get isVideo(): boolean {
-    return !this.isImage && !!this.format?.startsWith('video/')
+    return this.mediaType === 'video' || !!this.format?.startsWith('video/')
   }
 
   get isGif(): boolean {
@@ -116,6 +116,10 @@ export class ResultItemImpl {
     return this.filename.endsWith('.webp')
   }
 
+  get isWebm(): boolean {
+    return this.filename.endsWith('.webm')
+  }
+
   get isImage(): boolean {
     return this.mediaType === 'images' || this.isGif || this.isWebp
   }

tests-ui/tests/store/queueStore.test.ts

@@ -41,4 +41,55 @@ describe('TaskItemImpl', () => {
     expect(taskItem.outputs['node-1'].images).toBeDefined()
     expect(taskItem.outputs['node-1'].images[0].filename).toBe('test.png')
   })
+
+  it('should recognize webm video from core', () => {
+    const taskItem = new TaskItemImpl(
+      'History',
+      [0, 'prompt-id', {}, {}, []],
+      { status_str: 'success', messages: [] },
+      {
+        'node-1': {
+          video: [{ filename: 'test.webm', type: 'output', subfolder: '' }]
+        }
+      }
+    )
+
+    const output = taskItem.flatOutputs[0]
+
+    expect(output.htmlVideoType).toBe('video/webm')
+    expect(output.isVideo).toBe(true)
+    expect(output.isWebm).toBe(true)
+    expect(output.isVhsFormat).toBe(false)
+    expect(output.isImage).toBe(false)
+  })
+
+  // https://github.com/Kosinkadink/ComfyUI-VideoHelperSuite/blob/0a75c7958fe320efcb052f1d9f8451fd20c730a8/videohelpersuite/nodes.py#L578-L590
+  it('should recognize webm video from VHS', () => {
+    const taskItem = new TaskItemImpl(
+      'History',
+      [0, 'prompt-id', {}, {}, []],
+      { status_str: 'success', messages: [] },
+      {
+        'node-1': {
+          gifs: [
+            {
+              filename: 'test.webm',
+              type: 'output',
+              subfolder: '',
+              format: 'video/webm',
+              frame_rate: 30
+            }
+          ]
+        }
+      }
+    )
+
+    const output = taskItem.flatOutputs[0]
+
+    expect(output.htmlVideoType).toBe('video/webm')
+    expect(output.isVideo).toBe(true)
+    expect(output.isWebm).toBe(true)
+    expect(output.isVhsFormat).toBe(true)
+    expect(output.isImage).toBe(false)
+  })
 })