feat: voice messages, offline queue, delivery ticks, volume slider, admin + scaling
- Voice messages: MediaRecorder → encrypted attachment, custom waveform player via OfflineAudioContext, 60s limit + live mic-level meter - Offline message queue: localStorage outbox, exponential backoff retries, optimistic pending bubble with retry/discard - Delivery indicator: message_deliveries table + RLS (reciprocal receipts), ✓ / ✓✓ / ✓✓-blue tick states, group-aware (all members must ack) - Per-participant volume slider in calls via right-click tile menu, persisted to localStorage, applied to attached audio elements - Group call scaling: grid up to 12 tiles with pagination, active-speaker auto-promotion in fullscreen - Push notifications scaffolding: service worker, VAPID subscription registration, notify-push edge function skeleton - Backup recovery code: 24-char base32 code (~120 bits entropy) as alternative decrypt path, restore UI with mode toggle - Admin panel: conversations list, audit log (admin_audit_log table + admin_log_action RPC), audit entry on user flag toggle - Search v2: sender filter, attachment-only toggle, date range - Reactions pop animation (scale 0.4→1.15→1 on count change) - Message list windowing (150 default, expand via IntersectionObserver) - Stub cleanup: removed dead ScreenshareStub from CallParticipantTile Fixes: - Focus-triggered flicker: dropped window.focus listeners in three spots, throttled visibilitychange/online wake-refreshes to 30s, keep existing data visible during background re-syncs (no more spinner on every click) - Voice attachment audio element collapsed to 0px on peer side — now forces 280px min-width on bubble Migrations (push required): 20260421000001_message_deliveries.sql 20260421000002_admin_audit_log.sql Server TODO: VAPID keys + notify-push edge function deploy
This commit is contained in:
@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import { findExistingDevice } from '../lib/device';
|
||||
import { setSecretStoreUser } from '../lib/secretStore';
|
||||
import { supabase } from '../lib/supabase';
|
||||
import { registerWebPush } from '../lib/webPush';
|
||||
|
||||
interface AuthContextValue {
|
||||
session: Session | null;
|
||||
@@ -135,6 +136,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
});
|
||||
}, [session, refreshProfile, refreshDevice]);
|
||||
|
||||
// Best-effort web-push registration once we know the device id. No-op on
|
||||
// Tauri (uses native notifications) or when VITE_VAPID_PUBLIC_KEY is unset.
|
||||
useEffect(() => {
|
||||
if (!device?.id) return;
|
||||
void registerWebPush(device.id);
|
||||
}, [device?.id]);
|
||||
|
||||
const signOut = useCallback(async () => {
|
||||
await supabaseSignOut(supabase);
|
||||
}, []);
|
||||
|
||||
@@ -47,6 +47,7 @@ import {
|
||||
getCallE2EESettings,
|
||||
isE2EESupported,
|
||||
} from '../lib/callE2EE';
|
||||
import { getParticipantVolume } from '../lib/participantVolumes';
|
||||
import {
|
||||
type DisplaySurfaceHint,
|
||||
getPresetParams,
|
||||
@@ -1310,7 +1311,7 @@ async function broadcastPresence(room: Room, deafened: boolean): Promise<void> {
|
||||
function attachTrack(
|
||||
track: RemoteTrack,
|
||||
_publication: RemoteTrackPublication,
|
||||
_participant: RemoteParticipant,
|
||||
participant: RemoteParticipant,
|
||||
): void {
|
||||
if (track.kind === Track.Kind.Audio) {
|
||||
const audio = track.attach();
|
||||
@@ -1318,6 +1319,10 @@ function attachTrack(
|
||||
audio.autoplay = true;
|
||||
audio.setAttribute('playsinline', 'true');
|
||||
audio.setAttribute('data-livekit-track', track.sid ?? '');
|
||||
if (participant.identity) {
|
||||
audio.setAttribute('data-participant', participant.identity);
|
||||
audio.volume = getParticipantVolume(participant.identity);
|
||||
}
|
||||
if (deafenedActive) audio.muted = true;
|
||||
document.body.appendChild(audio);
|
||||
// Apply persisted sinkId so the element routes to the user's chosen
|
||||
|
||||
@@ -99,7 +99,9 @@ export function ConversationsProvider({ children }: { children: ReactNode }) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setLoading(true);
|
||||
// Only flag loading on initial fetch so background re-syncs (visibility
|
||||
// change, online event) don't blank the list each time.
|
||||
setLoading((prev) => (conversationsRef.current.length === 0 ? true : prev));
|
||||
const convs = await listConversations(supabase);
|
||||
setConversations(convs);
|
||||
const entries = await Promise.all(
|
||||
@@ -218,8 +220,13 @@ export function ConversationsProvider({ children }: { children: ReactNode }) {
|
||||
// refresh + realtime reconnect on visibility/focus regain so we never
|
||||
// leave stale conversation lists on a Windows client after the user
|
||||
// returns to the app.
|
||||
let lastAwakeRefresh = 0;
|
||||
const AWAKE_THROTTLE_MS = 30_000;
|
||||
const onAwake = () => {
|
||||
if (document.visibilityState !== 'visible') return;
|
||||
const now = Date.now();
|
||||
if (now - lastAwakeRefresh < AWAKE_THROTTLE_MS) return;
|
||||
lastAwakeRefresh = now;
|
||||
void refresh();
|
||||
try {
|
||||
// If the socket got wedged during background throttle, a no-op
|
||||
@@ -231,12 +238,10 @@ export function ConversationsProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
};
|
||||
document.addEventListener('visibilitychange', onAwake);
|
||||
window.addEventListener('focus', onAwake);
|
||||
window.addEventListener('online', onAwake);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', onAwake);
|
||||
window.removeEventListener('focus', onAwake);
|
||||
window.removeEventListener('online', onAwake);
|
||||
void supabase.removeChannel(channel);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user