[ui] add blobpreview

ui/src/components/BlobPreview.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { useEntity } from "../lib/entity";
+  export let address: string;
+
+  const { attributes } = useEntity(address);
+
+  let mimeType: string | undefined;
+  $: mimeType = $attributes.find(([_, e]) => e.attribute === "FILE_MIME")?.[1]
+    .value.c;
+</script>
+
+<div class="preview" v-if="mimeType">
+  {#if mimeType?.startsWith("audio")}
+    <audio controls src="/api/raw/{address}" />
+  {/if}
+  {#if mimeType?.startsWith("video")}
+    <!-- svelte-ignore a11y-media-has-caption -->
+    <video controls src="/api/raw/{address}" />
+  {/if}
+  {#if mimeType?.startsWith("image")}
+    <a target="_blank" href="/api/raw/{address}">
+      <img src="/api/raw/{address}" alt={address} />
+    </a>
+  {/if}
+</div>
+
+<style scoped lang="scss">
+  .preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  audio,
+  video {
+    width: 100%;
+  }
+</style>

ui/src/components/Inspect.svelte

@@ -4,6 +4,7 @@
   import Address from "./Address.svelte";
   import { UpType } from "../lib/types";
   import type { IEntry } from "upend/types";
+  import BlobPreview from "./BlobPreview.svelte";
 
   export let address: string;
   export let editable = false;
@@ -86,7 +87,7 @@
       isFile={$backlinks.some(([_, e]) => e.attribute === "FILE_IS")}
     />
   </h2>
-  <blob-preview :address="address" />
+  <BlobPreview {address} />
   {#if !$error}
     <div class="attributes">
       {#each Object.entries(typedAttributes) as [typeAddr, attributes] (typeAddr)}