Fix VHS advanced preview html video type (#1186)

* Fix VHS advanced preview html video type

* nit

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

@@ -1,6 +1,6 @@
 <template>
   <video controls width="100%" height="100%">
-    <source :src="url" :type="result.htmlVideoType" />
+    <source :src="url" :type="htmlVideoType" />
     {{ $t('videoFailedToLoad') }}
   </video>
 </template>
@@ -15,10 +15,16 @@ const props = defineProps<{
 }>()
 
 const settingStore = useSettingStore()
-const url = computed(() => {
-  if (settingStore.get('VHS.AdvancedPreviews')) {
-    return props.result.vhsAdvancedPreviewUrl
-  }
-  return props.result.url
-})
+const vhsAdvancedPreviews = computed(() =>
+  settingStore.get('VHS.AdvancedPreviews')
+)
+
+const url = computed(() =>
+  vhsAdvancedPreviews.value
+    ? props.result.vhsAdvancedPreviewUrl
+    : props.result.url
+)
+const htmlVideoType = computed(() =>
+  vhsAdvancedPreviews.value ? 'video/webm' : props.result.htmlVideoType
+)
 </script>

src/stores/queueStore.ts

@@ -67,6 +67,8 @@ export class ResultItemImpl {
 
   /**
    * VHS advanced preview URL. `/viewvideo` endpoint is provided by VHS node.
+   *
+   * `/viewvideo` always returns a webm file.
    */
   get vhsAdvancedPreviewUrl(): string {
     return api.apiURL('/viewvideo?' + this.urlParams)
@@ -108,8 +110,12 @@ export class ResultItemImpl {
     return this.filename.endsWith('.gif')
   }
 
+  get isWebp(): boolean {
+    return this.filename.endsWith('.webp')
+  }
+
   get isImage(): boolean {
-    return this.mediaType === 'images' || this.isGif
+    return this.mediaType === 'images' || this.isGif || this.isWebp
   }
 
   get supportsPreview(): boolean {