feat: add annotations, user profiles, watchers, stories, search and more

2026-06-01 17:15:09 +02:00
parent ed469ba8dd
commit 2465bcd184
47 changed files with 5009 additions and 242 deletions
@@ -0,0 +1,249 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { page } from "$app/state";
+  import { getStories } from "$lib/api/endpoints";
+  import { loadStoryMedia } from "$lib/api/stories";
+  import type { StoryView } from "$lib/api/types";
+  import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
+  import EmptyState from "$lib/components/ui/EmptyState.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
+  import { accounts } from "$lib/stores/accounts.svelte";
+
+  const PAGE = 60;
+
+  const peerId = $derived(
+    page.params.chatId ? Number(page.params.chatId) : null
+  );
+
+  let items = $state<StoryView[]>([]);
+  let loading = $state(false);
+  let done = $state(false);
+  const previews = $state<Record<number, string | null>>({});
+  let token = 0;
+
+  let viewerOpen = $state(false);
+  let viewerIndex = $state(0);
+
+  async function loadMore(id: number) {
+    if (loading || done) {
+      return;
+    }
+    const current = token;
+    loading = true;
+    try {
+      const batch = await getStories(id, { limit: PAGE, offset: items.length });
+      if (current !== token) {
+        return;
+      }
+      items = [...items, ...batch];
+      if (batch.length < PAGE) {
+        done = true;
+      }
+    } finally {
+      if (current === token) {
+        loading = false;
+      }
+    }
+  }
+
+  $effect(() => {
+    const id = peerId;
+    if (id === null || accounts.selectedId === null) {
+      return;
+    }
+    untrack(() => {
+      token++;
+      items = [];
+      done = false;
+      loading = false;
+      for (const key of Object.keys(previews)) {
+        delete previews[Number(key)];
+      }
+      loadMore(id).catch(() => undefined);
+    });
+  });
+
+  $effect(() => {
+    const list = items;
+    let active = true;
+    untrack(() => {
+      for (const item of list) {
+        if (!item.downloaded || previews[item.story_id] !== undefined) {
+          continue;
+        }
+        previews[item.story_id] = null;
+        loadStoryMedia(item.peer_id, item.story_id).then((url) => {
+          if (active) {
+            previews[item.story_id] = url;
+          }
+        });
+      }
+    });
+    return () => {
+      active = false;
+    };
+  });
+
+  function openViewer(index: number) {
+    viewerIndex = index;
+    viewerOpen = true;
+  }
+</script>
+
+{#if peerId === null}
+  <EmptyState title="Сторис" description="Откройте чат" />
+{:else if items.length === 0}
+  {#if loading}
+    <div class="center"><Spinner /></div>
+  {:else}
+    <EmptyState title="Нет сторис" />
+  {/if}
+{:else}
+  <div class="grid">
+    {#each items as item, index (item.story_id)}
+      <button
+        type="button"
+        class="tile"
+        class:expired={item.deleted}
+        onclick={() => openViewer(index)}
+      >
+        {#if previews[item.story_id]}
+          {#if item.media_kind === "video"}
+            <video
+              src={previews[item.story_id]}
+              muted
+              preload="metadata"
+            ></video>
+            <span class="play"><Icon name="play" size="1.5rem" /></span>
+          {:else}
+            <img src={previews[item.story_id]} alt="">
+          {/if}
+        {:else}
+          <span class="ph"><Icon name="play-story" /></span>
+        {/if}
+        {#if item.pinned}
+          <span class="badge pin"
+            ><Icon name="story-priority" size="0.875rem" /></span
+          >
+        {/if}
+        {#if item.views}
+          <span class="badge views">
+            <Icon name="eye" size="0.875rem" />{item.views}
+          </span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  {#if !done}
+    <button
+      type="button"
+      class="more"
+      onclick={() => peerId !== null && loadMore(peerId)}
+      disabled={loading}
+    >
+      {loading ? "Загрузка…" : "Показать ещё"}
+    </button>
+  {/if}
+
+  {#if peerId !== null}
+    <StoryViewer
+      {peerId}
+      {items}
+      bind:index={viewerIndex}
+      bind:open={viewerOpen}
+    />
+  {/if}
+{/if}
+
+<style lang="scss">
+  .center {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.125rem;
+    padding: 0.125rem;
+  }
+
+  .tile {
+    position: relative;
+    aspect-ratio: 9 / 16;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--color-background-secondary);
+
+    &.expired {
+      opacity: 0.55;
+    }
+  }
+
+  .tile img,
+  .tile video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .play {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-white);
+    text-shadow: 0 0 4px rgb(0 0 0 / 50%);
+  }
+
+  .ph {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--color-text-secondary);
+  }
+
+  .badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.5rem;
+
+    font-size: 0.6875rem;
+    color: var(--color-white);
+    background-color: rgb(0 0 0 / 45%);
+  }
+
+  .pin {
+    top: 0.25rem;
+    left: 0.25rem;
+  }
+
+  .views {
+    bottom: 0.25rem;
+    left: 0.25rem;
+  }
+
+  .more {
+    width: calc(100% - 1rem);
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    cursor: pointer;
+    background-color: var(--color-background-secondary);
+  }
+</style>