blobpreview component

ui/src/components/BlobPreview.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="preview" v-if="mimeType">
+    <template v-if="mimeType.startsWith('audio')">
+      <audio controls :src="`/api/raw/${address}`" />
+    </template>
+    <template v-if="mimeType.startsWith('image')">
+      <a :href="`/api/raw/${address}`">
+        <img :src="`/api/raw/${address}`" />
+      </a>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { useEntity } from "@/lib/entity";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "BlobPreview",
+  props: {
+    address: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    mimeType(): string | undefined {
+      return this.attributes.find(([_, e]) => e.attribute === "FILE_MIME")?.[1]
+        .value.c;
+    },
+  },
+  setup(props) {
+    const { attributes, backlinks, error } = useEntity(props.address);
+    return { attributes };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+</style>

ui/src/views/Inspect.vue

@@ -6,6 +6,7 @@
         :is-file="backlinks.some(([_, e]) => e.attribute === 'FILE_IS')"
       />
     </h2>
+    <blob-preview :address="address" />
     <div v-if="!error">
       <template v-if="attributes.length">
         <h3>Own attributes ({{ attributes.length }})</h3>
@@ -70,6 +71,7 @@
 
 <script lang="ts">
 import Address from "@/components/Address.vue";
+import BlobPreview from "@/components/BlobPreview.vue";
 import { useEntity } from "@/lib/entity";
 import { defineComponent } from "vue";
 
@@ -77,6 +79,7 @@ export default defineComponent({
   name: "Inspect",
   components: {
     Address,
+    BlobPreview,
   },
   props: {
     address: {