feat: add duration display for audio preview

webui/src/components/display/BlobPreview.svelte

@@ -57,10 +57,28 @@
     )
     .slice(0, 4);
 
+  let clientHeight = 0;
+  let mediaDuration = "";
+  $: {
+    let duration = $entity?.get("MEDIA_DURATION") as number | undefined;
+    if (duration) {
+      const hours = Math.floor(duration / 3600);
+      const minutes = Math.floor((duration % 3600) / 60);
+      const seconds = Math.floor(duration - hours * 3600 - minutes * 60);
+
+      mediaDuration = "";
+      if (hours > 0) {
+        mediaDuration += `${hours}:`.padStart(3, "0");
+      }
+      mediaDuration += `${minutes}:`.padStart(3, "0");
+      mediaDuration += `${seconds}`.padStart(2, "0");
+    }
+  }
+
   let imageLoaded = null;
 </script>
 
-<div class="preview">
+<div class="preview" bind:clientHeight>
   {#if handled}
     {#if group}
       <ul class="group">
@@ -92,6 +110,25 @@
       <FragmentViewer {address} detail={false} />
     {:else if video}
       <VideoViewer {address} detail={false} />
+    {:else if audio}
+      <div class="audiopreview image">
+        {#if handled && imageLoaded != address}
+          <div class="spinner">
+            <Spinner centered />
+          </div>
+        {/if}
+        <img
+          src="{API_URL}/thumb/{address}"
+          alt="Thumbnail for {address}..."
+          on:load={() => (imageLoaded = address)}
+          on:error={() => (handled = false)}
+        />
+        {#if mediaDuration}
+          <div class="duration" style="--font-size: {clientHeight * 0.28}px">
+            {mediaDuration}
+          </div>
+        {/if}
+      </div>
     {:else}
       <div class="image" class:loaded={imageLoaded == address || !handled}>
         {#if handled && imageLoaded != address}
@@ -128,13 +165,20 @@
     min-height: 0;
   }
 
+  .hashbadge {
+    font-size: 48px;
+    opacity: 0.25;
+    text-align: center;
+    line-height: 1;
+  }
+
   .image {
     display: flex;
     min-height: 0;
 
     justify-content: center;
 
-    padding: 2.5%;
+    padding: 1%;
 
     img {
       max-width: 100%;
@@ -142,11 +186,20 @@
     }
   }
 
-  .hashbadge {
-    font-size: 48px;
-    opacity: 0.25;
-    text-align: center;
-    line-height: 1;
+  .audiopreview {
+    position: relative;
+
+    .duration {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      font-size: var(--font-size);
+      font-weight: bold;
+      color: var(--foreground-lightest);
+      text-shadow: 0px 0px 0.2em var(--background-lighter);
+    }
   }
 
   .group {