feat: 1-to-1 message render + web data-lake backend

2026-05-31 01:45:05 +02:00
1 parent f0afb7ec5b
commit 75425d1bee
@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { type MediaResult, requestMediaVersion } from "$lib/api/client";
+  import { visualKind } from "$lib/api/media";
+  import type { MediaVersion } from "$lib/api/types";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
+
+  interface Props {
+    version: MediaVersion;
+  }
+
+  let { version }: Props = $props();
+
+  let result = $state<MediaResult | null>(null);
+
+  const vk = $derived(visualKind(version.kind));
+
+  $effect(() => {
+    let active = true;
+    requestMediaVersion(version.id).then((value) => {
+      if (active) {
+        result = value;
+      }
+    });
+    return () => {
+      active = false;
+    };
+  });
+</script>
+
+<div class="thumb">
+  {#if result === null}
+    <div class="placeholder"><Spinner /></div>
+  {:else if result.state === "ready" && vk === "image"}
+    <a href={result.url} target="_blank" rel="noopener">
+      <img src={result.url} alt={version.kind}>
+    </a>
+  {:else if result.state === "ready" && vk === "video"}
+    <a href={result.url} target="_blank" rel="noopener">
+      <video src={result.url} muted preload="metadata"></video>
+      <span class="play"><Icon name="large-play" size="1.5rem" /></span>
+    </a>
+  {:else if result.state === "ready"}
+    <a class="file" href={result.url} target="_blank" rel="noopener">
+      <Icon name="document" size="1.125rem" />
+      <span>{version.kind}</span>
+    </a>
+  {:else}
+    <div class="placeholder missing">
+      <Icon name="no-download" size="1.25rem" />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .thumb {
+    flex-shrink: 0;
+  }
+
+  a {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--border-radius-default-small);
+  }
+
+  img,
+  video {
+    display: block;
+    width: 7rem;
+    height: 7rem;
+    object-fit: cover;
+    background-color: var(--color-default-shadow);
+  }
+
+  .play {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--color-white);
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
+  }
+
+  .file {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+
+    padding: 0.5rem 0.625rem;
+
+    font-size: 0.8125rem;
+    color: var(--color-primary);
+    text-decoration: none;
+
+    background-color: var(--color-primary-tint);
+  }
+
+  .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 7rem;
+    height: 7rem;
+    border-radius: var(--border-radius-default-small);
+
+    color: var(--color-text-secondary);
+    background-color: var(--color-default-shadow);
+
+    &.missing {
+      width: auto;
+      height: auto;
+      padding: 0.75rem;
+    }
+  }
+</style>