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'