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,301 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { getChatMedia } from "$lib/api/endpoints";
|
||||
import { type InlineMedia, loadMediaItem, visualKind } from "$lib/api/media";
|
||||
import type { MediaView } from "$lib/api/types";
|
||||
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 { formatListDate } from "$lib/format/datetime";
|
||||
import { formatBytes, mediaKindLabel } from "$lib/format/media";
|
||||
import { accounts } from "$lib/stores/accounts.svelte";
|
||||
import { ui } from "$lib/stores/ui.svelte";
|
||||
|
||||
interface Props {
|
||||
chatId: number;
|
||||
kinds: string[];
|
||||
layout: "grid" | "list";
|
||||
}
|
||||
|
||||
let { chatId, kinds, layout }: Props = $props();
|
||||
|
||||
const PAGE = 60;
|
||||
|
||||
let items = $state<MediaView[]>([]);
|
||||
let loading = $state(false);
|
||||
let done = $state(false);
|
||||
const previews = $state<Record<number, InlineMedia>>({});
|
||||
let token = 0;
|
||||
|
||||
async function loadMore() {
|
||||
if (loading || done) {
|
||||
return;
|
||||
}
|
||||
const current = token;
|
||||
loading = true;
|
||||
try {
|
||||
const batch = await getChatMedia(chatId, kinds, {
|
||||
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 = chatId;
|
||||
if (accounts.selectedId === null) {
|
||||
return;
|
||||
}
|
||||
untrack(() => {
|
||||
token++;
|
||||
items = [];
|
||||
done = false;
|
||||
loading = false;
|
||||
for (const key of Object.keys(previews)) {
|
||||
delete previews[Number(key)];
|
||||
}
|
||||
loadMore().catch(() => undefined);
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (layout !== "grid") {
|
||||
return;
|
||||
}
|
||||
const list = items;
|
||||
let active = true;
|
||||
untrack(() => {
|
||||
for (const item of list) {
|
||||
if (!(item.downloaded && previews[item.id] === undefined)) {
|
||||
continue;
|
||||
}
|
||||
previews[item.id] = {
|
||||
state: "not-downloaded",
|
||||
mediaId: item.id,
|
||||
kind: item.kind,
|
||||
};
|
||||
loadMediaItem({
|
||||
id: item.id,
|
||||
message_id: item.message_id,
|
||||
kind: item.kind,
|
||||
downloaded: item.downloaded,
|
||||
mime: item.mime,
|
||||
file_size: item.file_size,
|
||||
ttl_seconds: item.ttl_seconds,
|
||||
duration: null,
|
||||
height: null,
|
||||
width: null,
|
||||
}).then((result) => {
|
||||
if (active) {
|
||||
previews[item.id] = result;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
});
|
||||
|
||||
function open(messageId: number) {
|
||||
ui.requestJump(chatId, messageId);
|
||||
goto(`/app/${chatId}`);
|
||||
}
|
||||
|
||||
function preview(item: MediaView): InlineMedia | undefined {
|
||||
return previews[item.id];
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if items.length === 0}
|
||||
{#if loading}
|
||||
<div class="center"><Spinner /></div>
|
||||
{:else}
|
||||
<EmptyState title="Пусто" />
|
||||
{/if}
|
||||
{:else if layout === "grid"}
|
||||
<div class="grid">
|
||||
{#each items as item (item.id)}
|
||||
<button type="button" class="tile" onclick={() => open(item.message_id)}>
|
||||
{#if preview(item)?.state === "ready"}
|
||||
{@const ready = preview(item) as Extract<InlineMedia, { state: "ready" }>}
|
||||
{#if visualKind(item.kind) === "video"}
|
||||
<video src={ready.url} muted preload="metadata"></video>
|
||||
<span class="play"><Icon name="play" size="1.5rem" /></span>
|
||||
{:else}
|
||||
<img src={ready.url} alt="">
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="ph"
|
||||
><Icon name={item.kind === "photo" ? "photo" : "video"} /></span
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="list">
|
||||
{#each items as item (item.id)}
|
||||
<li>
|
||||
<button type="button" onclick={() => open(item.message_id)}>
|
||||
<span class="file-icon"><Icon name="document" /></span>
|
||||
<span class="meta">
|
||||
<span class="name">{mediaKindLabel(item.kind)}</span>
|
||||
<span class="sub">
|
||||
{formatListDate(item.created_at)}
|
||||
{#if item.file_size}
|
||||
· {formatBytes(item.file_size)}
|
||||
{/if}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#if !done && items.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
class="more"
|
||||
onclick={() => loadMore()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Загрузка…" : "Показать ещё"}
|
||||
</button>
|
||||
{/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: 1;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in new issue
Block a user