feat: add annotations, user profiles, watchers, stories, search and more
This commit is contained in:
hh committed
1 parent
ed469ba8dd
commit
2465bcd184
47 files changed
+5009
-242
No files matched your search
@@ -0,0 +1,286 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from "svelte";
|
||||
import { getPeers, 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 Avatar from "$lib/components/ui/Avatar.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";
|
||||
import { accounts } from "$lib/stores/accounts.svelte";
|
||||
import { chats } from "$lib/stores/chats.svelte";
|
||||
|
||||
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<number, string | null>>({});
|
||||
let token = 0;
|
||||
|
||||
let viewerOpen = $state(false);
|
||||
let viewerIndex = $state(0);
|
||||
let viewerItems = $state<StoryView[]>([]);
|
||||
let viewerPeerId = $state(0);
|
||||
|
||||
async function load() {
|
||||
const current = token;
|
||||
loading = true;
|
||||
try {
|
||||
const stories = await getStories(0, { 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 peers = await getPeers(peerIds);
|
||||
if (current !== token) {
|
||||
return;
|
||||
}
|
||||
const peerById = new Map(peers.map((peer) => [peer.peer_id, peer]));
|
||||
groups = [...byPeer.entries()].map(([peerId, stories]) => {
|
||||
if (peerId > 0) {
|
||||
const peer = peerById.get(peerId) ?? null;
|
||||
return {
|
||||
peerId,
|
||||
kind: "peer" as const,
|
||||
name: peerName(peer) || `ID ${peerId}`,
|
||||
hasAvatar: Boolean(peer?.has_avatar),
|
||||
stories,
|
||||
};
|
||||
}
|
||||
const chat = chats.byId(peerId);
|
||||
return {
|
||||
peerId,
|
||||
kind: "chat" as const,
|
||||
name: chat?.title ?? `Chat ${peerId}`,
|
||||
hasAvatar: Boolean(chat?.has_avatar),
|
||||
stories,
|
||||
};
|
||||
});
|
||||
} finally {
|
||||
if (current === token) {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (accounts.selectedId === null) {
|
||||
return;
|
||||
}
|
||||
untrack(() => {
|
||||
token++;
|
||||
groups = [];
|
||||
loading = false;
|
||||
for (const key of Object.keys(previews)) {
|
||||
delete previews[Number(key)];
|
||||
}
|
||||
load().catch(() => undefined);
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const list = groups.flatMap((group) => group.stories);
|
||||
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(group: Group, index: number) {
|
||||
viewerItems = group.stories;
|
||||
viewerPeerId = group.peerId;
|
||||
viewerIndex = index;
|
||||
viewerOpen = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if groups.length === 0}
|
||||
{#if loading}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else}
|
||||
<EmptyState title="Нет сторис" />
|
||||
{/if}
|
||||
{:else}
|
||||
{#each groups as group (group.peerId)}
|
||||
<section class="group">
|
||||
<header class="group-head">
|
||||
<Avatar
|
||||
name={group.name}
|
||||
colorKey={group.peerId}
|
||||
size={2}
|
||||
avatar={{ kind: group.kind, id: group.peerId }}
|
||||
hasAvatar={group.hasAvatar}
|
||||
/>
|
||||
<span class="group-name">{group.name}</span>
|
||||
<span class="group-count">{group.stories.length}</span>
|
||||
</header>
|
||||
<div class="grid">
|
||||
{#each group.stories as item, index (item.story_id)}
|
||||
<button
|
||||
type="button"
|
||||
class="tile"
|
||||
class:expired={item.deleted}
|
||||
onclick={() => openViewer(group, 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.views}
|
||||
<span class="badge views">
|
||||
<Icon name="eye" size="0.875rem" />{item.views}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
|
||||
<StoryViewer
|
||||
peerId={viewerPeerId}
|
||||
items={viewerItems}
|
||||
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-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;
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
.views {
|
||||
bottom: 0.25rem;
|
||||
left: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user