beavergram/frontend/src/lib/components/stories/StoriesArchive.svelte

<script lang="ts">
  import { untrack } from "svelte";
  import { page } from "$app/state";
  import { enqueueStoriesBackfill, getStories } from "$lib/api/endpoints";
  import { loadStoryMedia } from "$lib/api/stories";
  import type { StoryView } from "$lib/api/types";
  import StoryTile from "$lib/components/stories/StoryTile.svelte";
  import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
  import Button from "$lib/components/ui/Button.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 { poster } from "$lib/media/poster";
  import { accounts } from "$lib/stores/accounts.svelte";
  import { toasts } from "$lib/stores/toasts.svelte";

  interface Props {
    chatId?: number | null;
  }

  let { chatId = null }: Props = $props();

  const PAGE = 60;

  const peerId = $derived(
    chatId ?? (page.params.chatId ? Number(page.params.chatId) : null)
  );

  let backfilling = $state(false);

  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;
  }

  async function backfill(id: number) {
    if (backfilling) {
      return;
    }
    backfilling = true;
    try {
      await enqueueStoriesBackfill(id);
      toasts.success("Загружаем старые сторис");
    } catch {
      toasts.error("Не удалось запустить загрузку сторис");
    } finally {
      backfilling = false;
    }
  }

  async function reload(id: number) {
    token++;
    items = [];
    done = false;
    loading = false;
    await loadMore(id);
  }
</script>

{#if peerId === null}
  <EmptyState title="Сторис" description="Откройте чат" />
{:else}
  <div class="toolbar">
    <Button
      variant="secondary"
      pill
      smaller
      loading={backfilling}
      onclick={() => peerId !== null && backfill(peerId)}
    >
      <Icon name="cloud-download" />Загрузить старые
    </Button>
    <Button
      variant="translucent"
      round
      smaller
      onclick={() => peerId !== null && reload(peerId).catch(() => undefined)}
      aria-label="Обновить"
    >
      <Icon name="reload" />
    </Button>
  </div>

  {#if items.length === 0}
    {#if loading}
      <div class="center"><Spinner /></div>
    {:else}
      <EmptyState
        title="Нет сторис"
        description="Нажмите «Загрузить старые», чтобы забрать архив"
      />
    {/if}
  {:else}
    <div class="grid">
      {#each items as item, index (item.story_id)}
        <StoryTile
          story={item}
          preview={previews[item.story_id]}
          onopen={() => openViewer(index)}
        />
      {/each}
    </div>

    {#if !done}
      <button
        type="button"
        class="more"
        onclick={() => peerId !== null && loadMore(peerId)}
        disabled={loading}
      >
        {loading ? "Загрузка…" : "Показать ещё"}
      </button>
    {/if}

    <StoryViewer
      {peerId}
      {items}
      bind:index={viewerIndex}
      bind:open={viewerOpen}
    />
  {/if}
{/if}

<style lang="scss">
  .center {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-borders);
  }

  .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>