Support VHS advanced preview in queue sidebar tab (#1183)

* Map VHS video type

* Advance preview format

* nit

* View VHS advanced preview

* Disable result gallery vitest

* Proper disable

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

@@ -27,10 +27,7 @@
         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>
+      <ResultVideo v-else-if="item.isVideo" :result="item" />
     </template>
   </Galleria>
 </template>
@@ -40,6 +37,7 @@ import { ref, watch, onMounted, onUnmounted } from 'vue'
 import Galleria from 'primevue/galleria'
 import { ResultItemImpl } from '@/stores/queueStore'
 import ComfyImage from '@/components/common/ComfyImage.vue'
+import ResultVideo from './ResultVideo.vue'
 
 const galleryVisible = ref(false)
 

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

@@ -6,12 +6,7 @@
       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>
+    <ResultVideo v-else-if="result.isVideo" :result="result" />
     <div v-else class="task-result-preview">
       <i class="pi pi-file"></i>
       <span>{{ result.mediaType }}</span>
@@ -34,6 +29,7 @@ import ComfyImage from '@/components/common/ComfyImage.vue'
 import Button from 'primevue/button'
 import { computed, onMounted, ref } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
+import ResultVideo from './ResultVideo.vue'
 
 const props = defineProps<{
   result: ResultItemImpl

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

@@ -0,0 +1,24 @@
+<template>
+  <video controls width="100%" height="100%">
+    <source :src="url" :type="result.htmlVideoType" />
+    {{ $t('videoFailedToLoad') }}
+  </video>
+</template>
+
+<script setup lang="ts">
+import { ResultItemImpl } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  result: ResultItemImpl
+}>()
+
+const settingStore = useSettingStore()
+const url = computed(() => {
+  if (settingStore.get('VHS.AdvancedPreviews')) {
+    return props.result.vhsAdvancedPreviewUrl
+  }
+  return props.result.url
+})
+</script>

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

@@ -1,3 +1,5 @@
+// Disabled because of https://github.com/Comfy-Org/ComfyUI_frontend/issues/1184
+
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import ResultGallery from '../ResultGallery.vue'

src/stores/queueStore.ts

@@ -50,17 +50,58 @@ export class ResultItemImpl {
     this.frame_rate = obj.frame_rate
   }
 
+  private get urlParams(): URLSearchParams {
+    const params = new URLSearchParams()
+    params.set('filename', this.filename)
+    params.set('type', this.type)
+    params.set('subfolder', this.subfolder || '')
+
+    if (this.format) {
+      params.set('format', this.format)
+    }
+    if (this.frame_rate) {
+      params.set('frame_rate', this.frame_rate.toString())
+    }
+    return params
+  }
+
+  /**
+   * VHS advanced preview URL. `/viewvideo` endpoint is provided by VHS node.
+   */
+  get vhsAdvancedPreviewUrl(): string {
+    return api.apiURL('/viewvideo?' + this.urlParams)
+  }
+
   get url(): string {
-    return api.apiURL(`/view?filename=${encodeURIComponent(this.filename)}&type=${this.type}&
-					subfolder=${encodeURIComponent(this.subfolder || '')}`)
+    return api.apiURL('/view?' + this.urlParams)
   }
 
   get urlWithTimestamp(): string {
     return `${this.url}&t=${+new Date()}`
   }
 
+  get isVhsFormat(): boolean {
+    return !!this.format && !!this.frame_rate
+  }
+
+  get htmlVideoType(): string | undefined {
+    const defaultType = undefined
+
+    if (!this.isVhsFormat) {
+      return defaultType
+    }
+
+    if (this.format.endsWith('webm')) {
+      return 'video/webm'
+    }
+    if (this.format.endsWith('mp4')) {
+      return 'video/mp4'
+    }
+    return defaultType
+  }
+
   get isVideo(): boolean {
-    return this.format && this.format.startsWith('video/')
+    return !this.isImage && this.format && this.format.startsWith('video/')
   }
 
   get isGif(): boolean {