From c8f50509ede69e26c72ff5f95f46becfba1b730e Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Wed, 9 Oct 2024 15:02:02 -0400
Subject: [PATCH] Fix VHS advanced preview html video type (#1186)

* Fix VHS advanced preview html video type

* nit
---
 .../sidebar/tabs/queue/ResultVideo.vue        | 20 ++++++++++++-------
 src/stores/queueStore.ts                      |  8 +++++++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/tabs/queue/ResultVideo.vue b/src/components/sidebar/tabs/queue/ResultVideo.vue
index 91521fcea..c6d5e8430 100644
--- a/src/components/sidebar/tabs/queue/ResultVideo.vue
+++ b/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>
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 84b99ff23..b4bd79762 100644
--- a/src/stores/queueStore.ts
+++ b/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 {