feat: implement Discord-like stream widget system with separate tiles

Streams now appear as separate tiles in the voice grid alongside the user's camera/avatar tile, matching Discord's model. Each stream tile has independent volume, mute, watch/unwatch controls, quality badges, and stream attenuation that ducks audio when someone speaks.
2026-02-20 03:59:28 +01:00
parent a8656e6a3b
commit 1aa40cca15
23 changed files with 2216 additions and 482 deletions
@@ -0,0 +1,164 @@
+export class AudioManager {
+    static instance = null;
+    ctx = null;
+    inputGain = null;
+    inputSource = null;
+    inputDestination = null;
+    silentGain = null;
+    analyser = null;
+    currentInputDeviceId = 'default';
+    currentStream = null;
+    isInitialized = false;
+    listeners = new Set();
+    soundBuffers = new Map();
+    constructor() { }
+    static getInstance() {
+        if (!AudioManager.instance) {
+            AudioManager.instance = new AudioManager();
+        }
+        return AudioManager.instance;
+    }
+    initContext() {
+        if (this.ctx)
+            return;
+        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+        this.ctx = new AudioContextClass();
+        this.inputGain = this.ctx.createGain();
+        this.inputDestination = this.ctx.createMediaStreamDestination();
+        this.analyser = this.ctx.createAnalyser();
+        this.analyser.fftSize = 256;
+        this.silentGain = this.ctx.createGain();
+        this.silentGain.gain.value = 0;
+        this.inputGain.connect(this.inputDestination);
+        this.inputGain.connect(this.analyser);
+        this.inputGain.connect(this.silentGain);
+        this.silentGain.connect(this.ctx.destination);
+        this.inputGain.gain.setValueAtTime(1, this.ctx.currentTime);
+        this.ctx.onstatechange = () => {
+            console.log(`[AudioManager] Context state: ${this.ctx?.state}`);
+            if (this.ctx?.state === 'running') {
+                this.notifyResumed();
+            }
+        };
+        this.isInitialized = true;
+    }
+    onResumed(cb) {
+        this.listeners.add(cb);
+        return () => this.listeners.delete(cb);
+    }
+    notifyResumed() {
+        this.listeners.forEach(cb => cb());
+    }
+    async resumeContext() {
+        if (!this.ctx)
+            this.initContext();
+        if (this.ctx && this.ctx.state === 'suspended') {
+            try {
+                await this.ctx.resume();
+                console.log('[AudioManager] AudioContext resumed.');
+            }
+            catch (err) {
+                console.error('[AudioManager] Failed to resume context:', err);
+            }
+        }
+    }
+    async loadSound(name) {
+        if (this.soundBuffers.has(name)) {
+            return this.soundBuffers.get(name);
+        }
+        if (!this.ctx)
+            this.initContext();
+        try {
+            const response = await fetch(`/sounds/${name}.mp3`);
+            if (!response.ok)
+                throw new Error(`Failed to load sound: ${name}`);
+            const arrayBuffer = await response.arrayBuffer();
+            const audioBuffer = await this.ctx.decodeAudioData(arrayBuffer);
+            this.soundBuffers.set(name, audioBuffer);
+            return audioBuffer;
+        }
+        catch (err) {
+            console.error(`[AudioManager] Error loading sound ${name}:`, err);
+            return null;
+        }
+    }
+    async playSound(name, options = {}) {
+        await this.resumeContext();
+        const buffer = await this.loadSound(name);
+        if (!buffer || !this.ctx)
+            return null;
+        const source = this.ctx.createBufferSource();
+        source.buffer = buffer;
+        source.loop = options.loop || false;
+        const gainNode = this.ctx.createGain();
+        gainNode.gain.value = options.volume ?? 0.5;
+        source.connect(gainNode);
+        gainNode.connect(this.ctx.destination);
+        source.start(0);
+        return source;
+    }
+    async setInputDevice(deviceId) {
+        if (!this.isInitialized)
+            this.initContext();
+        // Skip if already set and stream is active
+        if (this.currentInputDeviceId === deviceId && this.currentStream?.active) {
+            return this.currentStream;
+        }
+        try {
+            if (this.currentStream) {
+                this.currentStream.getTracks().forEach(t => t.stop());
+            }
+            const constraints = {
+                audio: {
+                    deviceId: deviceId === 'default' ? undefined : { exact: deviceId },
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true
+                }
+            };
+            this.currentStream = await navigator.mediaDevices.getUserMedia(constraints);
+            this.currentInputDeviceId = deviceId;
+            if (this.ctx && this.inputGain) {
+                if (this.inputSource) {
+                    this.inputSource.disconnect();
+                }
+                this.inputSource = this.ctx.createMediaStreamSource(this.currentStream);
+                this.inputSource.connect(this.inputGain);
+            }
+            return this.currentStream;
+        }
+        catch (err) {
+            console.error('[AudioManager] Failed to set input device:', err);
+            throw err;
+        }
+    }
+    setInputVolume(volume) {
+        if (!this.isInitialized)
+            this.initContext();
+        if (this.inputGain && this.ctx) {
+            const gainValue = volume / 100;
+            this.inputGain.gain.setTargetAtTime(gainValue, this.ctx.currentTime, 0.1);
+        }
+    }
+    /**
+     * CRITICAL: Always returns a CLONE of the destination track.
+     * This prevents LiveKit's cleanup from killing the main singleton track
+     * when switching rooms.
+     */
+    getFreshTrack() {
+        if (!this.isInitialized)
+            this.initContext();
+        const track = this.inputDestination.stream.getAudioTracks()[0];
+        if (!track)
+            return null;
+        return track.clone();
+    }
+    getAnalyserNode() {
+        if (!this.isInitialized)
+            this.initContext();
+        return this.analyser;
+    }
+    getContext() {
+        return this.ctx;
+    }
+}