feat: file variety, user status, DND gate, drag-drop, mentions, link preview, emoji picker, soundboard, ringtone
Attachments
- Video: native <video controls>, decrypted blob, metadata preload
- PDF: collapsible <object> viewer with download + preview toggle
- Generic: file card with lazy decrypt, mime-to-extension map
- MessageBubble dispatch: audio/image/video/pdf/generic by mime
- Composer accept widened from image/* to any; AttachmentPreview renders
non-images as file cards
User status
- usePeerPresence returns { state, statusMessage } and tracks both fields
via realtime updates
- ConversationHeader subtitle shows custom status_message when peer is
online/idle/dnd (with message set); falls back to localized presence
label; always "Offline" when state === 'offline'
- UserBar: status_message input in dropdown (max 128 chars, save on
blur/Enter), subtitle uses same precedence as peer view
- AuthContext: auto-flip offline → online on session mount; best-effort
offline on beforeunload/pagehide; respects explicit idle/dnd/invisible
- i18n: presence.status_placeholder (DE + EN)
DND
- CallUI: incoming ring suppressed when own presence === 'dnd' (outgoing
rings stay audible — user-initiated)
- CallContext: presenceRef mirrors profile.presenceState, incoming-call
and missed-call OS notifications skipped under DND
- ConversationsContext already gated message tone + notify
Drag/drop + paste
- Page-root drag handlers feed ingestFiles; overlay shown while dragging
- Textarea onPaste extracts clipboard image items
@mentions in groups
- MentionAutocomplete: keyboard-driven dropdown, arrow/enter/tab/esc
- Composer onChange parses trailing @token, auto-open
- renderBodyWithMentions highlights @username tokens in bubbles
Link previews
- Migration 20260421000003_link_previews.sql (cache table, auth read,
service-role write via edge function)
- Edge function og-preview: POST {url}, fetches HTML (6s timeout, 1MB
cap), regex-parses OG/twitter/description, upserts cache
- useLinkPreview hook with in-memory cache + inflight dedup
- LinkPreviewCard rendered from first URL in message body
Emoji picker
- Built-in curated set (~250 emojis) across five categories
- Search by keyword/emoji char/category, recent list persisted in
localStorage
- Trigger button next to + and voice buttons in composer
Soundboard + ringtone + mic pipeline
- Pulled in (user-authored) SoundboardManagerDialog/Panel/Settings,
RingtoneSettings, mic pipeline + hotkeys + storage modules
- AuthContext imports updateOwnProfile for presence auto-flip
Fixes
- AttachmentAudio min-width so bubbles don't collapse to 0px on peer
side
- Focus flicker: visibility/online wake refresh throttled to 30s,
focus listener dropped, loading flag only on first fetch
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { supabase } from './supabase';
|
||||
|
||||
export interface LinkPreview {
|
||||
url: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
imageUrl: string | null;
|
||||
siteName: string | null;
|
||||
ok: boolean;
|
||||
}
|
||||
|
||||
// In-memory cache keyed by URL — avoids re-invoking the edge function for
|
||||
// the same URL within a session even if many bubbles reference it.
|
||||
const cache = new Map<string, LinkPreview | null>();
|
||||
const inflight = new Map<string, Promise<LinkPreview | null>>();
|
||||
|
||||
async function loadPreview(url: string): Promise<LinkPreview | null> {
|
||||
if (cache.has(url)) return cache.get(url)!;
|
||||
const existing = inflight.get(url);
|
||||
if (existing) return existing;
|
||||
|
||||
const p = (async () => {
|
||||
// First try the cache table directly (RLS allows authenticated reads).
|
||||
// Works offline-first if the server has already fetched this URL.
|
||||
// `link_previews` is a later migration — cast around stale generated types.
|
||||
const { data: cached } = await (supabase as unknown as {
|
||||
from: (t: string) => {
|
||||
select: (cols: string) => {
|
||||
eq: (col: string, val: string) => {
|
||||
maybeSingle: () => Promise<{
|
||||
data: {
|
||||
url: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
image_url: string | null;
|
||||
site_name: string | null;
|
||||
ok: boolean;
|
||||
fetched_at: string;
|
||||
} | null;
|
||||
error: Error | null;
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
})
|
||||
.from('link_previews')
|
||||
.select('url, title, description, image_url, site_name, ok, fetched_at')
|
||||
.eq('url', url)
|
||||
.maybeSingle();
|
||||
if (cached && cached.ok) {
|
||||
const preview: LinkPreview = {
|
||||
url: cached.url,
|
||||
title: cached.title,
|
||||
description: cached.description,
|
||||
imageUrl: cached.image_url,
|
||||
siteName: cached.site_name,
|
||||
ok: cached.ok,
|
||||
};
|
||||
cache.set(url, preview);
|
||||
return preview;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase.functions.invoke('og-preview', {
|
||||
body: { url },
|
||||
});
|
||||
if (error) throw error;
|
||||
const preview = data as LinkPreview | null;
|
||||
cache.set(url, preview && preview.ok ? preview : null);
|
||||
return cache.get(url) ?? null;
|
||||
} catch {
|
||||
cache.set(url, null);
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
|
||||
inflight.set(url, p);
|
||||
try {
|
||||
return await p;
|
||||
} finally {
|
||||
inflight.delete(url);
|
||||
}
|
||||
}
|
||||
|
||||
export function useLinkPreview(url: string | null): LinkPreview | null {
|
||||
const [preview, setPreview] = useState<LinkPreview | null>(() =>
|
||||
url ? cache.get(url) ?? null : null,
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!url) {
|
||||
setPreview(null);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
void loadPreview(url).then((p) => {
|
||||
if (!cancelled) setPreview(p);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [url]);
|
||||
return preview;
|
||||
}
|
||||
|
||||
// Regex tuned for plain URLs inside message text. No markdown link syntax yet.
|
||||
const URL_RE = /https?:\/\/[^\s<>"']+/i;
|
||||
|
||||
export function extractFirstUrl(text: string): string | null {
|
||||
const m = URL_RE.exec(text);
|
||||
return m?.[0] ?? null;
|
||||
}
|
||||
Reference in New Issue
Block a user