Supports VHS video outputs in queue sidebar tab (#1174)

* Properly identify gifs

* Detect VHS video

* Basic video support in queue

* Video in lightbox

* Preview button

* nit

* Fix vitest

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -25,7 +25,12 @@
         :src="item.url"
         :contain="false"
         class="galleria-image"
+        v-if="item.isImage"
       />
+      <video v-else-if="item.isVideo" controls width="100%" height="100%">
+        <source :src="item.url" :type="item.format" />
+        {{ $t('videoFailedToLoad') }}
+      </video>
     </template>
   </Galleria>
 </template>

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -1,27 +1,30 @@
 <template>
   <div class="result-container" ref="resultContainer">
-    <template
-      v-if="result.mediaType === 'images' || result.mediaType === 'gifs'"
-    >
-      <ComfyImage
-        :src="result.url"
-        class="task-output-image"
-        :contain="imageFit === 'contain'"
-      />
-      <div class="image-preview-mask">
-        <Button
-          icon="pi pi-eye"
-          severity="secondary"
-          @click="emit('preview', result)"
-          rounded
-        />
-      </div>
+    <ComfyImage
+      v-if="result.isImage"
+      :src="result.url"
+      class="task-output-image"
+      :contain="imageFit === 'contain'"
+    />
+    <template v-else-if="result.isVideo">
+      <video controls width="100%" height="100%">
+        <source :src="result.url" :type="result.format" />
+        {{ $t('videoFailedToLoad') }}
+      </video>
     </template>
-    <!-- TODO: handle more media types -->
     <div v-else class="task-result-preview">
       <i class="pi pi-file"></i>
       <span>{{ result.mediaType }}</span>
     </div>
+
+    <div v-if="result.supportsPreview" class="preview-mask">
+      <Button
+        icon="pi pi-eye"
+        severity="secondary"
+        @click="emit('preview', result)"
+        rounded
+      />
+    </div>
   </div>
 </template>
 
@@ -67,7 +70,7 @@ onMounted(() => {
   align-items: center;
 }
 
-.image-preview-mask {
+.preview-mask {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -80,7 +83,7 @@ onMounted(() => {
   z-index: 1;
 }
 
-.result-container:hover .image-preview-mask {
+.result-container:hover .preview-mask {
   opacity: 1;
 }
 </style>

src/components/sidebar/tabs/queue/__tests__/ResultGallery.spec.ts

@@ -12,15 +12,12 @@ describe('ResultGallery', () => {
   let mockResultItem: ResultItemImpl
 
   beforeEach(() => {
-    mockResultItem = {
+    mockResultItem = new ResultItemImpl({
       filename: 'test.jpg',
       type: 'images',
-      nodeId: 'test',
-      mediaType: 'images',
-      url: 'https://picsum.photos/200/300',
-      urlWithTimestamp: 'https://picsum.photos/200/300?t=123456',
-      supportsPreview: true
-    }
+      nodeId: 1,
+      mediaType: 'images'
+    })
   })
 
   const mountResultGallery = (props: ResultGalleryProps, options = {}) => {