From c95fc3518a83bc6122fdc3f34d36a39f4d32a475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 22 Jan 2022 18:48:38 +0100
Subject: [PATCH] [ui] omit blobpreview if missing

---
 .../src/components/display/BlobPreview.svelte | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index bd6c763..4d1dbc9 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -6,30 +6,37 @@
   $: ({ entity } = useEntity(address));
 
   $: mimeType = String($entity?.get("FILE_MIME"));
+  $: handled =
+    Boolean(mimeType) &&
+    ["audio", "video", "image", "model"].some((prefix) =>
+      mimeType.startsWith(prefix)
+    );
 </script>
 
-<div class="preview" v-if="mimeType">
-  {#if mimeType?.startsWith("audio")}
-    <audio controls preload="auto" src="/api/raw/{address}" />
-  {/if}
-  {#if mimeType?.startsWith("video")}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video
-      controls
-      preload="auto"
-      src="/api/raw/{address}"
-      poster="/api/thumb/{address}"
-    />
-  {/if}
-  {#if mimeType?.startsWith("image")}
-    <a target="_blank" href="/api/raw/{address}">
-      <img src="/api/raw/{address}" alt={address} />
-    </a>
-  {/if}
-  {#if mimeType?.startsWith("model")}
-    <ModelViewer src="/api/raw/{address}" />
-  {/if}
-</div>
+{#if handled}
+  <div class="preview">
+    {#if mimeType?.startsWith("audio")}
+      <audio controls preload="auto" src="/api/raw/{address}" />
+    {/if}
+    {#if mimeType?.startsWith("video")}
+      <!-- svelte-ignore a11y-media-has-caption -->
+      <video
+        controls
+        preload="auto"
+        src="/api/raw/{address}"
+        poster="/api/thumb/{address}"
+      />
+    {/if}
+    {#if mimeType?.startsWith("image")}
+      <a target="_blank" href="/api/raw/{address}">
+        <img src="/api/raw/{address}" alt={address} />
+      </a>
+    {/if}
+    {#if mimeType?.startsWith("model")}
+      <ModelViewer src="/api/raw/{address}" />
+    {/if}
+  </div>
+{/if}
 
 <style scoped lang="scss">
   .preview {