<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>
