beaver/beavergram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(api,frontend): render files by name without fetching, previewable share links

Browse Source
This commit is contained in:
hh
2026-08-13 03:49:29 +02:00
parent ef739838a5
commit e833de245a
13 changed files with 348 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/api/media.ts
+33 -1
View File
@@ -21,9 +21,11 @@ export type InlineMedia =
export interface ViewerItem {
downloaded: boolean;
fileName: string | null;
fileSize: number | null;
kind: string;
mediaId: number | null;
messageId: number;
mime: string | null;
}
export function viewerItemsFrom(
@@ -32,7 +34,15 @@ export function viewerItemsFrom(
): ViewerItem[] {
if (media.length === 0) {
return [
{ messageId, mediaId: null, kind: "", downloaded: false, fileName: null },
{
messageId,
mediaId: null,
kind: "",
downloaded: false,
fileName: null,
fileSize: null,
mime: null,
},
];
}
return media.map((item) => ({
@@ -41,9 +51,31 @@ export function viewerItemsFrom(
kind: item.kind,
downloaded: item.downloaded,
fileName: item.file_name,
fileSize: item.file_size,
mime: item.mime,
}));
}
const PREVIEW_KINDS = new Set([
"photo",
"video",
"video_note",
"animation",
"gif",
"sticker",
"voice",
"audio",
]);
const PREVIEW_MIME_PREFIXES = ["image/", "video/", "audio/"];
export function isPreviewable(kind: string, mime: string | null): boolean {
if (PREVIEW_KINDS.has(kind)) {
return true;
}
return PREVIEW_MIME_PREFIXES.some((prefix) => mime?.startsWith(prefix));
}
export type VisualKind = "image" | "video" | "other";
const VIDEO_KINDS = new Set(["video", "video_note", "animation", "gif"]);
frontend/src/lib/api/shares.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export function shareUrl(share: FileShare): string {
typeof window === "undefined"
? ""
: window.location.origin.replace(TRAILING_SLASH, "");
return `${origin}/f/${share.token}`;
return `${origin}/f/${share.token}/${share.url_name}`;
}
export function shareState(
frontend/src/lib/api/types.ts
+1
View File
@@ -528,6 +528,7 @@ export interface FileShare {
story_id: number | null;
title: string | null;
token: string;
url_name: string;
}
export interface FileShareHit {
frontend/src/lib/components/MediaViewer.svelte
+70 -11
View File
@@ -4,13 +4,13 @@
import { type MediaResult, requestMedia } from "$lib/api/client";
import { downloadMedia } from "$lib/api/download";
import { fetchMedia, getMessageMedia } from "$lib/api/endpoints";
import type { ViewerItem } from "$lib/api/media";
import { isPreviewable, type ViewerItem } from "$lib/api/media";
import Button from "$lib/components/ui/Button.svelte";
import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import Spinner from "$lib/components/ui/Spinner.svelte";
import { mediaKindLabel } from "$lib/format/media";
import { formatBytes, mediaKindLabel } from "$lib/format/media";
import { poster } from "$lib/media/poster";
import { shareUi } from "$lib/stores/shares.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -33,6 +33,8 @@
let messageId = $state<number | null>(null);
let currentMediaId = $state<number | null>(null);
let fileName = $state<string | null>(null);
let fileSize = $state<number | null>(null);
let fileOnly = $state(false);
let result = $state<MediaResult | null>(null);
let loading = $state(false);
let saving = $state(false);
@@ -48,12 +50,12 @@
);
const hasNav = $derived(items.length > 1);
const canSave = $derived(
currentMediaId !== null && result?.state === "ready"
currentMediaId !== null && (fileOnly || result?.state === "ready")
);
const title = $derived(fileName ?? mediaKindLabel(kind) ?? "Медиа");
function revoke() {
if (result?.state === "ready") {
if (result?.state === "ready" && result.url) {
URL.revokeObjectURL(result.url);
}
}
@@ -66,25 +68,39 @@
messageId = item.messageId;
currentMediaId = null;
fileName = item.fileName;
fileSize = item.fileSize;
fileOnly = false;
const current = ++token;
try {
let mediaId = item.mediaId;
let downloaded = item.downloaded;
let name = item.fileName;
let size = item.fileSize;
let mimeType = item.mime;
if (mediaId === null) {
const meta = await getMessageMedia(chatId, item.messageId);
mediaId = meta.id;
downloaded = meta.downloaded;
kind = meta.kind;
name = meta.file_name;
size = meta.file_size;
mimeType = meta.mime;
}
const plainFile = downloaded && !isPreviewable(kind, mimeType);
let next: MediaResult;
if (plainFile) {
next = { state: "ready", url: "", mime: mimeType };
} else if (downloaded) {
next = await requestMedia(mediaId);
} else {
next = { state: "not-downloaded" } as MediaResult;
}
const next = downloaded
? await requestMedia(mediaId)
: ({ state: "not-downloaded" } as MediaResult);
if (current === token) {
result = next;
currentMediaId = mediaId;
fileName = name;
fileSize = size;
fileOnly = plainFile;
}
} catch {
if (current === token) {
@@ -233,10 +249,17 @@
<!-- biome-ignore lint/a11y/useMediaCaption: archived media has no captions -->
<audio src={result.url} controls></audio>
{:else if result?.state === "ready"}
<button class="media-download" type="button" onclick={save}>
<Icon name="download" />
Скачать файл
</button>
<div class="media-file">
<span class="file-glyph"><Icon name="document" size="2rem" /></span>
<p class="file-name">{title}</p>
{#if fileSize}
<p class="file-size">{formatBytes(fileSize)}</p>
{/if}
<button class="media-download" type="button" onclick={save}>
<Icon name="download" />
Скачать файл
</button>
</div>
{:else if result?.state === "not-downloaded"}
<div class="media-message">
<p>Файл ещё не скачан в архив.</p>
@@ -354,6 +377,42 @@
text-align: center;
}
.media-file {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
max-width: min(24rem, 90vw);
color: var(--color-white);
text-align: center;
}
.file-glyph {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
margin-bottom: 0.5rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.12);
}
.file-name {
overflow-wrap: anywhere;
margin: 0;
font-size: 1rem;
}
.file-size {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
}
.media-download {
display: inline-flex;
align-items: center;
frontend/src/lib/components/MessageMedia.svelte
+82 -8
View File
@@ -4,6 +4,7 @@
import { fetchMedia } from "$lib/api/endpoints";
import {
type InlineMedia,
isPreviewable,
loadInlineMedia,
visualKind,
} from "$lib/api/media";
@@ -16,7 +17,7 @@
import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import Spinner from "$lib/components/ui/Spinner.svelte";
import { mediaKindLabel } from "$lib/format/media";
import { formatBytes, mediaKindLabel } from "$lib/format/media";
import { poster } from "$lib/media/poster";
import { shareUi } from "$lib/stores/shares.svelte";
import { toasts } from "$lib/stores/toasts.svelte";
@@ -38,8 +39,13 @@
let queuing = $state(false);
let saving = $state(false);
const ref = $derived(message.media[0] ?? null);
const asFile = $derived(
ref !== null && ref.id !== null && !isPreviewable(ref.kind, ref.mime)
);
const ready = $derived(media?.state === "ready" ? media : null);
const kind = $derived(ready?.kind ?? "");
const kind = $derived(ready?.kind ?? ref?.kind ?? "");
const mime = $derived(ready?.mime ?? "");
const isImage = $derived(kind === "photo");
const isStaticSticker = $derived(
@@ -60,7 +66,10 @@
const label = $derived(
media && media.state !== "missing" ? media.kind : "media"
);
const storedId = $derived(ready?.mediaId ?? null);
const storedId = $derived(
ready?.mediaId ?? (asFile ? ref?.id : null) ?? null
);
const fileName = $derived(ref?.file_name ?? mediaKindLabel(kind) ?? "Файл");
function delay(ms: number): Promise<void> {
return new Promise((resolve) => {
@@ -69,6 +78,10 @@
}
async function start() {
if (asFile) {
loaded = true;
return;
}
media = await loadInlineMedia(message.chat_id, message.message_id);
loaded = true;
}
@@ -116,10 +129,7 @@
function share() {
if (storedId !== null) {
shareUi.share(
{ kind: "media", mediaId: storedId },
mediaKindLabel(kind) ?? "Файл"
);
shareUi.share({ kind: "media", mediaId: storedId }, fileName);
}
}
</script>
@@ -132,6 +142,18 @@
<Icon name="timer" size="1.25rem" />
<span>Самоуничтожающееся медиа</span>
</button>
{:else if asFile}
<button class="media-file" onclick={save} type="button">
<span class="file-glyph">
<Icon name={saving ? "timer" : "document"} size="1.25rem" />
</span>
<span class="file-text">
<span class="file-name">{fileName}</span>
<span class="file-sub">
{formatBytes(ref?.file_size ?? null) || mediaKindLabel(kind)}
</span>
</span>
</button>
{:else if !loaded}
<div class="media-skeleton"><Spinner /></div>
{:else if ready && kind === "voice"}
@@ -145,7 +167,7 @@
{:else if ready && kind === "video_note"}
<VideoNote url={ready.url} transcript={ready.transcript} />
{:else if ready && kind === "audio"}
<AudioFile url={ready.url} title={ready.mime ?? "Audio"} {own} />
<AudioFile url={ready.url} title={fileName} {own} />
{:else if ready && isImage}
<button class="media-thumb" onclick={onopen} type="button">
<img src={ready.url} alt="attachment">
@@ -348,6 +370,58 @@
}
}
.media-file {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
max-width: 18rem;
padding: 0.5rem 0.75rem 0.5rem 0.5rem;
border: 0;
border-radius: var(--border-radius-default-small);
text-align: start;
background-color: var(--color-primary-tint);
}
.file-glyph {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
color: var(--color-white);
background-color: var(--color-primary);
}
.file-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.file-name {
overflow: hidden;
font-size: 0.9375rem;
color: var(--color-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.file-sub {
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.media-chip {
cursor: pointer;
display: flex;
frontend/src/lib/components/profile/SharedMedia.svelte
+2
View File
@@ -50,6 +50,8 @@
kind: item.kind,
downloaded: item.downloaded,
fileName: item.file_name,
fileSize: item.file_size,
mime: item.mime,
}))
);
frontend/src/lib/components/shares/ShareDialog.svelte
+3 -4
View File
@@ -212,10 +212,9 @@
{/if}
<p class="hint raw">
Ссылка отдаёт файл как есть —
<code>curl -O {shareUrl(share)}</code>
скачает его без авторизации. Просмотры превью в Telegram не
списывают скачивания.
Ссылка отдаёт файл как есть: картинки и видео откроются прямо в
браузере, <code>curl -O {shareUrl(share)}</code> скачает под
настоящим именем. Превью-краулеры Telegram скачивания не списывают.
</p>
<fieldset class="choices">