[Bug] Fix mp4 output preview in queue (#3672)

src/stores/queueStore.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash'
 import { defineStore } from 'pinia'
-import { toRaw } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, toRaw } from 'vue'
 
 import type {
   ResultItem,
@@ -92,6 +91,9 @@ export class ResultItemImpl {
     if (this.isWebm) {
       return 'video/webm'
     }
+    if (this.isMp4) {
+      return 'video/mp4'
+    }
 
     if (this.isVhsFormat) {
       if (this.format?.endsWith('webm')) {
@@ -101,11 +103,7 @@ export class ResultItemImpl {
         return 'video/mp4'
       }
     }
-    return
-  }
-
-  get isVideo(): boolean {
-    return this.mediaType === 'video' || !!this.format?.startsWith('video/')
+    return undefined
   }
 
   get isGif(): boolean {
@@ -120,8 +118,29 @@ export class ResultItemImpl {
     return this.filename.endsWith('.webm')
   }
 
+  get isMp4(): boolean {
+    return this.filename.endsWith('.mp4')
+  }
+
+  get isVideoBySuffix(): boolean {
+    return this.isWebm || this.isMp4
+  }
+
+  get isImageBySuffix(): boolean {
+    return this.isGif || this.isWebp
+  }
+
+  get isVideo(): boolean {
+    const isVideoByType =
+      this.mediaType === 'video' || !!this.format?.startsWith('video/')
+    return this.isVideoBySuffix || (isVideoByType && !this.isImageBySuffix)
+  }
+
   get isImage(): boolean {
-    return this.mediaType === 'images' || this.isGif || this.isWebp
+    return (
+      this.isImageBySuffix ||
+      (this.mediaType === 'images' && !this.isVideoBySuffix)
+    )
   }
 
   get supportsPreview(): boolean {

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

@@ -6,9 +6,8 @@ describe('TaskItemImpl', () => {
   it('should remove animated property from outputs during construction', () => {
     const taskItem = new TaskItemImpl(
       'History',
-      // @ts-expect-error fixme ts strict error
-      [0, 'prompt-id', {}, {}, []],
-      { status_str: 'success', messages: [] },
+      [0, 'prompt-id', {}, { client_id: 'client-id' }, []],
+      { status_str: 'success', messages: [], completed: true },
       {
         'node-1': {
           images: [{ filename: 'test.png', type: 'output', subfolder: '' }],
@@ -20,18 +19,15 @@ describe('TaskItemImpl', () => {
     // Check that animated property was removed
     expect('animated' in taskItem.outputs['node-1']).toBe(false)
 
-    // Verify other output properties remain intact
     expect(taskItem.outputs['node-1'].images).toBeDefined()
-    // @ts-expect-error fixme ts strict error
-    expect(taskItem.outputs['node-1'].images[0].filename).toBe('test.png')
+    expect(taskItem.outputs['node-1'].images?.[0]?.filename).toBe('test.png')
   })
 
   it('should handle outputs without animated property', () => {
     const taskItem = new TaskItemImpl(
       'History',
-      // @ts-expect-error fixme ts strict error
-      [0, 'prompt-id', {}, {}, []],
-      { status_str: 'success', messages: [] },
+      [0, 'prompt-id', {}, { client_id: 'client-id' }, []],
+      { status_str: 'success', messages: [], completed: true },
       {
         'node-1': {
           images: [{ filename: 'test.png', type: 'output', subfolder: '' }]
@@ -39,18 +35,15 @@ describe('TaskItemImpl', () => {
       }
     )
 
-    // Verify outputs are preserved when no animated property exists
     expect(taskItem.outputs['node-1'].images).toBeDefined()
-    // @ts-expect-error fixme ts strict error
-    expect(taskItem.outputs['node-1'].images[0].filename).toBe('test.png')
+    expect(taskItem.outputs['node-1'].images?.[0]?.filename).toBe('test.png')
   })
 
   it('should recognize webm video from core', () => {
     const taskItem = new TaskItemImpl(
       'History',
-      // @ts-expect-error fixme ts strict error
-      [0, 'prompt-id', {}, {}, []],
-      { status_str: 'success', messages: [] },
+      [0, 'prompt-id', {}, { client_id: 'client-id' }, []],
+      { status_str: 'success', messages: [], completed: true },
       {
         'node-1': {
           video: [{ filename: 'test.webm', type: 'output', subfolder: '' }]
@@ -71,9 +64,8 @@ describe('TaskItemImpl', () => {
   it('should recognize webm video from VHS', () => {
     const taskItem = new TaskItemImpl(
       'History',
-      // @ts-expect-error fixme ts strict error
-      [0, 'prompt-id', {}, {}, []],
-      { status_str: 'success', messages: [] },
+      [0, 'prompt-id', {}, { client_id: 'client-id' }, []],
+      { status_str: 'success', messages: [], completed: true },
       {
         'node-1': {
           gifs: [
@@ -97,4 +89,30 @@ describe('TaskItemImpl', () => {
     expect(output.isVhsFormat).toBe(true)
     expect(output.isImage).toBe(false)
   })
+
+  it('should recognize mp4 video from core', () => {
+    const taskItem = new TaskItemImpl(
+      'History',
+      [0, 'prompt-id', {}, { client_id: 'client-id' }, []],
+      { status_str: 'success', messages: [], completed: true },
+      {
+        'node-1': {
+          images: [
+            {
+              filename: 'test.mp4',
+              type: 'output',
+              subfolder: ''
+            }
+          ],
+          animated: [true]
+        }
+      }
+    )
+
+    const output = taskItem.flatOutputs[0]
+
+    expect(output.htmlVideoType).toBe('video/mp4')
+    expect(output.isVideo).toBe(true)
+    expect(output.isImage).toBe(false)
+  })
 })