From 77b7bd7a31b5f5526158f28b74e46604027d0628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 14 Feb 2022 13:27:51 +0100
Subject: [PATCH] [ui] audioviewer its own component

---
 .../src/components/display/BlobPreview.svelte | 12 ++------
 .../display/blobs/AudioViewer.svelte          | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 webui/src/components/display/blobs/AudioViewer.svelte

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 9726447..fddb3a8 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useEntity } from "../../lib/entity";
   import Spinner from "../utils/Spinner.svelte";
+  import AudioViewer from "./blobs/AudioViewer.svelte";
   import ImageViewer from "./blobs/ImageViewer.svelte";
   import ModelViewer from "./blobs/ModelViewer.svelte";
   import TextViewer from "./blobs/TextViewer.svelte";
@@ -40,16 +41,7 @@
       </div>
     {/if}
     {#if 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}" />
+      <AudioViewer {address} />
     {/if}
     {#if video}
       {#if imageLoaded != address}
diff --git a/webui/src/components/display/blobs/AudioViewer.svelte b/webui/src/components/display/blobs/AudioViewer.svelte
new file mode 100644
index 0000000..f7fd926
--- /dev/null
+++ b/webui/src/components/display/blobs/AudioViewer.svelte
@@ -0,0 +1,28 @@
+<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>