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,153 @@
+<script lang="ts">
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import { formatDuration } from "$lib/format/duration";
+  import { claimPlayback, releasePlayback } from "$lib/media/playback";
+
+  interface Props {
+    own: boolean;
+    title: string;
+    url: string;
+  }
+
+  let { url, title, own }: Props = $props();
+
+  let element = $state<HTMLAudioElement>();
+  let currentTime = $state(0);
+  let duration = $state(0);
+  let paused = $state(true);
+
+  const progress = $derived(duration > 0 ? currentTime / duration : 0);
+
+  function toggle() {
+    if (!element) {
+      return;
+    }
+    if (paused) {
+      element.play().catch(() => undefined);
+    } else {
+      element.pause();
+    }
+  }
+
+  function seek(event: PointerEvent) {
+    if (!(element && duration > 0)) {
+      return;
+    }
+    const rect = event.currentTarget as HTMLElement;
+    const ratio =
+      (event.clientX - rect.getBoundingClientRect().left) / rect.offsetWidth;
+    element.currentTime = Math.min(1, Math.max(0, ratio)) * duration;
+  }
+</script>
+
+<div class="Audio" class:own>
+  <button class="toggle" onclick={toggle} type="button" aria-label="Play audio">
+    <Icon name={paused ? "play" : "pause"} size="1.625rem" />
+  </button>
+  <div class="content">
+    <div class="title">{title}</div>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="seekline" onpointerdown={seek}>
+      <div class="track"></div>
+      <div class="fill" style:width={`${Math.round(progress * 100)}%`}></div>
+    </div>
+    <div class="meta">
+      {formatDuration(currentTime)}
+      / {formatDuration(duration)}
+    </div>
+  </div>
+  <!-- biome-ignore lint/a11y/useMediaCaption: archived audio track has no captions -->
+  <audio
+    bind:this={element}
+    bind:currentTime
+    bind:duration
+    bind:paused
+    onended={() => element && releasePlayback(element)}
+    onplay={() => element && claimPlayback(element)}
+    preload="metadata"
+    src={url}
+  ></audio>
+</div>
+
+<style lang="scss">
+  .Audio {
+    --active: var(--color-primary);
+    --toggle-fg: var(--color-white);
+
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    min-width: 15rem;
+    padding: 0.1875rem 0;
+
+    &.own {
+      --active: var(--color-white);
+      --toggle-fg: var(--color-background-own);
+    }
+  }
+
+  .toggle {
+    cursor: pointer;
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 3rem;
+    height: 3rem;
+    border: 0;
+    border-radius: 50%;
+
+    color: var(--toggle-fg);
+
+    background-color: var(--active);
+  }
+
+  .content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .title {
+    overflow: hidden;
+
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seekline {
+    cursor: pointer;
+    touch-action: none;
+
+    position: relative;
+    height: 1rem;
+    margin: 0.25rem 0;
+  }
+
+  .track,
+  .fill {
+    position: absolute;
+    top: 7px;
+
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  .track {
+    width: 100%;
+    background-color: var(--color-interactive-inactive);
+  }
+
+  .fill {
+    background-color: var(--active);
+  }
+
+  .meta {
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
+  }
+</style>