306 lines
7.8 KiB
Svelte
306 lines
7.8 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from "svelte";
|
|
import {
|
|
enqueueStoriesBackfill,
|
|
getChatsBatch,
|
|
getPeers,
|
|
getStories,
|
|
} from "#lib/api/endpoints.js";
|
|
import { loadStoryMedia } from "#lib/api/stories.js";
|
|
import type { StoryView } from "#lib/api/types.js";
|
|
import StoryTile from "#lib/components/stories/StoryTile.svelte";
|
|
import StoryViewer from "#lib/components/stories/StoryViewer.svelte";
|
|
import Avatar from "#lib/components/ui/Avatar.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 { peerName } from "#lib/format/peer.js";
|
|
import { t } from "#lib/i18n/locale.svelte.js";
|
|
import { accounts } from "#lib/stores/accounts.svelte.js";
|
|
import { createFlash } from "#lib/stores/flash.svelte.js";
|
|
import { toasts } from "#lib/stores/toasts.svelte.js";
|
|
|
|
interface Group {
|
|
hasAvatar: boolean;
|
|
kind: "peer" | "chat";
|
|
name: string;
|
|
peerId: number;
|
|
stories: StoryView[];
|
|
}
|
|
|
|
const FETCH_LIMIT = 500;
|
|
|
|
let groups = $state<Group[]>([]);
|
|
let loading = $state(false);
|
|
const previews = $state<Record<string, string | null>>({});
|
|
const expanded = $state<Record<number, boolean>>({});
|
|
let token = 0;
|
|
|
|
function previewKey(story: StoryView): string {
|
|
return `${story.peer_id}:${story.story_id}`;
|
|
}
|
|
|
|
let viewerOpen = $state(false);
|
|
let viewerIndex = $state(0);
|
|
let viewerItems = $state<StoryView[]>([]);
|
|
let viewerPeerId = $state(0);
|
|
let backfilling = $state<number | null>(null);
|
|
const started = createFlash<number>();
|
|
|
|
async function load() {
|
|
const current = token;
|
|
loading = true;
|
|
try {
|
|
const stories = await getStories(null, { limit: FETCH_LIMIT });
|
|
if (current !== token) {
|
|
return;
|
|
}
|
|
const byPeer = new Map<number, StoryView[]>();
|
|
for (const story of stories) {
|
|
const bucket = byPeer.get(story.peer_id);
|
|
if (bucket) {
|
|
bucket.push(story);
|
|
} else {
|
|
byPeer.set(story.peer_id, [story]);
|
|
}
|
|
}
|
|
const peerIds = [...byPeer.keys()].filter((id) => id > 0);
|
|
const chatIds = [...byPeer.keys()].filter((id) => id < 0);
|
|
const [peers, fetched] = await Promise.all([
|
|
getPeers(peerIds),
|
|
getChatsBatch(chatIds),
|
|
]);
|
|
if (current !== token) {
|
|
return;
|
|
}
|
|
const peerById = new Map(peers.map((peer) => [peer.peer_id, peer]));
|
|
const chatById = new Map(fetched.map((item) => [item.chat_id, item]));
|
|
groups = [...byPeer.entries()].map(([peerId, peerStories]) => {
|
|
if (peerId > 0) {
|
|
const peer = peerById.get(peerId) ?? null;
|
|
return {
|
|
hasAvatar: Boolean(peer?.has_avatar),
|
|
kind: "peer" as const,
|
|
name: peerName(peer) || `ID ${peerId}`,
|
|
peerId,
|
|
stories: peerStories,
|
|
};
|
|
}
|
|
const chat = chatById.get(peerId);
|
|
return {
|
|
hasAvatar: Boolean(chat?.has_avatar),
|
|
kind: "chat" as const,
|
|
name: chat?.title ?? t("ui.chat", { id: peerId }),
|
|
peerId,
|
|
stories: peerStories,
|
|
};
|
|
});
|
|
} finally {
|
|
if (current === token) {
|
|
loading = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
if (accounts.selectedId === null) {
|
|
return;
|
|
}
|
|
untrack(() => {
|
|
token += 1;
|
|
groups = [];
|
|
loading = false;
|
|
for (const key of Object.keys(previews)) {
|
|
delete previews[key];
|
|
}
|
|
for (const key of Object.keys(expanded)) {
|
|
delete expanded[Number(key)];
|
|
}
|
|
load().catch(() => undefined);
|
|
});
|
|
});
|
|
|
|
$effect(() => {
|
|
const list = groups
|
|
.filter((group) => expanded[group.peerId])
|
|
.flatMap((group) => group.stories);
|
|
let active = true;
|
|
untrack(() => {
|
|
for (const item of list) {
|
|
const key = previewKey(item);
|
|
if (!item.downloaded || previews[key] !== undefined) {
|
|
continue;
|
|
}
|
|
previews[key] = null;
|
|
loadStoryMedia(item.peer_id, item.story_id).then((url) => {
|
|
if (active) {
|
|
previews[key] = url;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
});
|
|
|
|
async function backfill(peerId: number) {
|
|
if (backfilling !== null) {
|
|
return;
|
|
}
|
|
backfilling = peerId;
|
|
try {
|
|
await enqueueStoriesBackfill(peerId);
|
|
started.show(peerId);
|
|
} catch {
|
|
toasts.error(t("stories.backfillFailed"));
|
|
} finally {
|
|
backfilling = null;
|
|
}
|
|
}
|
|
|
|
function openViewer(group: Group, index: number) {
|
|
viewerItems = group.stories;
|
|
viewerPeerId = group.peerId;
|
|
viewerIndex = index;
|
|
viewerOpen = true;
|
|
}
|
|
|
|
function toggle(peerId: number) {
|
|
expanded[peerId] = !expanded[peerId];
|
|
}
|
|
</script>
|
|
|
|
{#if groups.length === 0}
|
|
{#if loading}
|
|
<div class="center"><Spinner /></div>
|
|
{:else}
|
|
<EmptyState title={t("stories.empty")} />
|
|
{/if}
|
|
{:else}
|
|
{#each groups as group (group.peerId)}
|
|
{@const fresh = started.current === group.peerId}
|
|
{@const backfillLabel = fresh
|
|
? t("stories.backfillStarted")
|
|
: t("stories.loadOlderStories")}
|
|
<section class="group">
|
|
<header class="group-head">
|
|
<button
|
|
aria-expanded={Boolean(expanded[group.peerId])}
|
|
class="group-toggle"
|
|
onclick={() => toggle(group.peerId)}
|
|
type="button"
|
|
>
|
|
<Avatar
|
|
avatar={{ id: group.peerId, kind: group.kind }}
|
|
colorKey={group.peerId}
|
|
hasAvatar={group.hasAvatar}
|
|
name={group.name}
|
|
size={2}
|
|
/>
|
|
<span class="group-name">{group.name}</span>
|
|
<span class="group-count">{group.stories.length}</span>
|
|
<span class="chevron" class:open={expanded[group.peerId]}>
|
|
<Icon name="down" size="1.25rem" />
|
|
</span>
|
|
</button>
|
|
<Button
|
|
aria-label={backfillLabel}
|
|
loading={backfilling === group.peerId}
|
|
onclick={() => backfill(group.peerId)}
|
|
round
|
|
smaller
|
|
title={backfillLabel}
|
|
variant="translucent"
|
|
>
|
|
<Icon name={fresh ? "check" : "cloud-download"} />
|
|
</Button>
|
|
</header>
|
|
{#if expanded[group.peerId]}
|
|
<div class="grid">
|
|
{#each group.stories as item, index (item.story_id)}
|
|
<StoryTile
|
|
onopen={() => openViewer(group, index)}
|
|
preview={previews[previewKey(item)]}
|
|
story={item}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
{/each}
|
|
|
|
<StoryViewer
|
|
items={viewerItems}
|
|
peerId={viewerPeerId}
|
|
bind:index={viewerIndex}
|
|
bind:open={viewerOpen}
|
|
/>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.group {
|
|
border-bottom: 1px solid var(--color-borders);
|
|
}
|
|
|
|
.group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.625rem 0.75rem;
|
|
}
|
|
|
|
.group-toggle {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
}
|
|
|
|
.chevron {
|
|
display: flex;
|
|
color: var(--color-text-secondary);
|
|
transition: transform 0.2s ease;
|
|
|
|
&.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.group-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
font-size: 0.9375rem;
|
|
font-weight: var(--font-weight-medium);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.group-count {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.125rem;
|
|
padding: 0 0.125rem 0.125rem;
|
|
}
|
|
</style>
|