[ui] refactor blobpreview, fix model previews

webui/src/components/display/BlobPreview.svelte

@@ -8,26 +8,32 @@
   $: ({ entity } = useEntity(address));
 
   $: mimeType = String($entity?.get("FILE_MIME"));
-  $: handled =
-    Boolean(mimeType) &&
-    ["audio", "video", "image", "model", "text", "application/pdf"].some(
-      (prefix) => mimeType.startsWith(prefix)
-    );
+
+  $: audio = mimeType.startsWith("audio");
+  $: video = ["video", "application/x-matroska"].some((p) =>
+    mimeType.startsWith(p)
+  );
+  $: image = mimeType.startsWith("image");
+  $: text = mimeType.startsWith("text");
+  $: pdf = mimeType.startsWith("pdf");
+  $: model = mimeType?.startsWith("model");
+
+  $: handled = audio || video || image || text || pdf || model;
 
   let imageLoaded = null;
 </script>
 
 {#if handled}
   <div class="preview">
-    {#if mimeType?.startsWith("text")}
+    {#if text}
       <div class="text">
         <TextViewer {address} />
       </div>
     {/if}
-    {#if mimeType?.startsWith("audio")}
+    {#if audio}
       <audio controls preload="auto" src="/api/raw/{address}" />
     {/if}
-    {#if mimeType?.startsWith("video")}
+    {#if video}
       <!-- svelte-ignore a11y-media-has-caption -->
       <video
         controls
@@ -36,7 +42,7 @@
         poster="/api/thumb/{address}"
       />
     {/if}
-    {#if mimeType?.startsWith("image")}
+    {#if image}
       <a target="_blank" href="/api/raw/{address}?inline=1">
         {#if imageLoaded != address}
           <Spinner />
@@ -49,13 +55,13 @@
         />
       </a>
     {/if}
-    {#if mimeType == "application/pdf"}
+    {#if pdf}
       <iframe
         src="/api/raw/{address}?inline"
         title="PDF document of {address}"
       />
     {/if}
-    {#if mimeType?.startsWith("model")}
+    {#if model}
       <ModelViewer src="/api/raw/{address}" />
     {/if}
   </div>