[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 {