<script lang="ts">
  import Spinner from "../../utils/Spinner.svelte";

  export let address: string;

  let imageLoaded = null;
</script>

<div class="audio">
  {#if imageLoaded != address}
    <Spinner />
  {/if}
  <img
    src="api/thumb/{address}"
    alt={address}
    on:load={() => (imageLoaded = address)}
    on:error={() => (imageLoaded = address)}
  />
  <audio controls preload="auto" src="api/raw/{address}" />
</div>

<style lang="scss">
  .audio {
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
