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
2026-04-21 09:13:30 +02:00
parent b89ec90813
commit 672c8738c7
34 changed files with 4394 additions and 100 deletions
@@ -0,0 +1,275 @@
+// Shared Web Audio graph that sits between the raw microphone MediaStream
+// and LiveKit's published track. Mixes live mic with on-demand soundboard
+// buffers so both paths reach the peer through a single published track,
+// and lets us locally monitor soundboard output without feedback from the
+// mic path.
+//
+// Graph:
+//   rawMicSource ──► micGain ──┐
+//                              ├─► destinationNode ─► publishedTrack
+//   sbBufferSources ─► sbGain ─┤
+//                              └─► monitorGain ─► ctx.destination (local hear,
+//                                                 soundboard only)
+//
+// Lifetime:
+//   createMicPipeline(rawTrack) — builds graph + AudioContext
+//   pipeline.outputTrack         — pass to `localParticipant.publishTrack`
+//   pipeline.setMicGain(0..1)    — mute / PTT
+//   pipeline.setSoundboardGain(..) / setMonitorGain(..) — sb master + local hear
+//   pipeline.playBuffer(buffer, opts) — returns a handle so callers can stop
+//   pipeline.stopAll(buffers?)   — kill every active sb source (or only one id)
+//   pipeline.replaceMicTrack(newTrack) — hot-swap on device change
+//   pipeline.destroy()           — close ctx, stop owned tracks
+
+export interface PlayBufferOpts {
+  /** Per-source gain 0..1, multiplied by sb master. */
+  gain?: number;
+  /** Stable id — calling playBuffer with the same id stops the previous one
+   *  first (single-fire mode). Omit for overlap mode. */
+  id?: string;
+  /** Fired when the buffer ends naturally (not when stopped manually). */
+  onEnded?: () => void;
+}
+
+export interface PlayHandle {
+  id: string | null;
+  stop(): void;
+}
+
+export interface MicPipeline {
+  readonly outputTrack: MediaStreamTrack;
+  setMicGain(value: number): void;
+  setSoundboardGain(value: number): void;
+  setMonitorGain(value: number): void;
+  replaceMicTrack(newTrack: MediaStreamTrack): void;
+  playBuffer(buffer: AudioBuffer, opts?: PlayBufferOpts): PlayHandle;
+  stopAll(id?: string): void;
+  destroy(): void;
+}
+
+interface ActiveSource {
+  id: string | null;
+  node: AudioBufferSourceNode;
+  gain: GainNode;
+}
+
+// Clamp helper — avoid letting callers pass NaN or out-of-range values.
+function clamp01(v: number): number {
+  if (!Number.isFinite(v)) return 0;
+  if (v < 0) return 0;
+  if (v > 1) return 1;
+  return v;
+}
+
+export function createMicPipeline(rawTrack: MediaStreamTrack): MicPipeline {
+  const AudioCtx =
+    window.AudioContext ??
+    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!AudioCtx) {
+    throw new Error('AudioContext unavailable');
+  }
+
+  const ctx = new AudioCtx();
+
+  const micGain = ctx.createGain();
+  micGain.gain.value = 1;
+
+  const sbGain = ctx.createGain();
+  sbGain.gain.value = 1;
+
+  const monitorGain = ctx.createGain();
+  monitorGain.gain.value = 1;
+
+  const dest = ctx.createMediaStreamDestination();
+
+  // Mic path → published only.
+  micGain.connect(dest);
+
+  // Soundboard path → published + local monitor.
+  sbGain.connect(dest);
+  sbGain.connect(monitorGain);
+  monitorGain.connect(ctx.destination);
+
+  let currentRawTrack: MediaStreamTrack = rawTrack;
+  let micSource: MediaStreamAudioSourceNode = buildMicSource(ctx, rawTrack, micGain);
+
+  const active = new Set<ActiveSource>();
+  let destroyed = false;
+
+  function buildMicSource(
+    c: AudioContext,
+    t: MediaStreamTrack,
+    target: AudioNode,
+  ): MediaStreamAudioSourceNode {
+    const stream = new MediaStream([t]);
+    const node = c.createMediaStreamSource(stream);
+    node.connect(target);
+    return node;
+  }
+
+  const outputTrack = dest.stream.getAudioTracks()[0];
+  if (!outputTrack) {
+    throw new Error('MediaStreamAudioDestinationNode produced no audio track');
+  }
+
+  return {
+    outputTrack,
+
+    setMicGain(value: number) {
+      if (destroyed) return;
+      const v = clamp01(value);
+      micGain.gain.setTargetAtTime(v, ctx.currentTime, 0.01);
+    },
+
+    setSoundboardGain(value: number) {
+      if (destroyed) return;
+      const v = clamp01(value);
+      sbGain.gain.setTargetAtTime(v, ctx.currentTime, 0.01);
+    },
+
+    setMonitorGain(value: number) {
+      if (destroyed) return;
+      const v = clamp01(value);
+      monitorGain.gain.setTargetAtTime(v, ctx.currentTime, 0.01);
+    },
+
+    replaceMicTrack(newTrack: MediaStreamTrack) {
+      if (destroyed) return;
+      // Tear down the old MediaStreamSourceNode and stop the raw track we
+      // owned. Caller passes ownership of `newTrack` to the pipeline.
+      try {
+        micSource.disconnect();
+      } catch {
+        /* ignore */
+      }
+      if (currentRawTrack !== newTrack) {
+        try {
+          currentRawTrack.stop();
+        } catch {
+          /* ignore */
+        }
+      }
+      currentRawTrack = newTrack;
+      micSource = buildMicSource(ctx, newTrack, micGain);
+    },
+
+    playBuffer(buffer: AudioBuffer, opts: PlayBufferOpts = {}): PlayHandle {
+      if (destroyed) {
+        return { id: opts.id ?? null, stop: () => undefined };
+      }
+
+      // Single-fire: stop previous instance of the same id so holding a
+      // hotkey doesn't stack a dozen overlapping plays.
+      if (opts.id) {
+        for (const entry of active) {
+          if (entry.id === opts.id) stopActive(entry);
+        }
+      }
+
+      const node = ctx.createBufferSource();
+      node.buffer = buffer;
+
+      const g = ctx.createGain();
+      g.gain.value = clamp01(opts.gain ?? 1);
+
+      node.connect(g);
+      g.connect(sbGain);
+
+      const entry: ActiveSource = { id: opts.id ?? null, node, gain: g };
+      active.add(entry);
+
+      node.onended = () => {
+        if (!active.has(entry)) return;
+        try {
+          node.disconnect();
+        } catch {
+          /* ignore */
+        }
+        try {
+          g.disconnect();
+        } catch {
+          /* ignore */
+        }
+        active.delete(entry);
+        opts.onEnded?.();
+      };
+
+      try {
+        node.start();
+      } catch {
+        active.delete(entry);
+      }
+
+      return {
+        id: entry.id,
+        stop: () => stopActive(entry),
+      };
+    },
+
+    stopAll(id?: string) {
+      for (const entry of Array.from(active)) {
+        if (id !== undefined && entry.id !== id) continue;
+        stopActive(entry);
+      }
+    },
+
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      for (const entry of Array.from(active)) stopActive(entry);
+      try {
+        micSource.disconnect();
+      } catch {
+        /* ignore */
+      }
+      try {
+        micGain.disconnect();
+      } catch {
+        /* ignore */
+      }
+      try {
+        sbGain.disconnect();
+      } catch {
+        /* ignore */
+      }
+      try {
+        monitorGain.disconnect();
+      } catch {
+        /* ignore */
+      }
+      try {
+        currentRawTrack.stop();
+      } catch {
+        /* ignore */
+      }
+      try {
+        outputTrack.stop();
+      } catch {
+        /* ignore */
+      }
+      void ctx.close().catch(() => {
+        /* ignore */
+      });
+    },
+  };
+
+  function stopActive(entry: ActiveSource): void {
+    try {
+      entry.node.onended = null;
+      entry.node.stop();
+    } catch {
+      /* already ended */
+    }
+    try {
+      entry.node.disconnect();
+    } catch {
+      /* ignore */
+    }
+    try {
+      entry.gain.disconnect();
+    } catch {
+      /* ignore */
+    }
+    active.delete(entry);
+  }
+}