devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 25 Packages Projects Releases Wiki Activity

Ensure voice mute/deafen status persists across disconnects and re-joins

Browse Source
This commit is contained in:
Jannis Braun
2026-02-19 18:02:00 +01:00
parent 5fae725675
commit 6deed231ab
4 changed files with 153 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/src/ws/handler.ts
+4 -2
View File
@@ -115,16 +115,18 @@ class ConnectionManager {
} }
leaveAllVoice(userId: string): string | null { leaveAllVoice(userId: string): string | null {
let leftChannelId: string | null = null;
for (const [channelId, users] of this.voiceStates) { for (const [channelId, users] of this.voiceStates) {
if (users.has(userId)) { if (users.has(userId)) {
users.delete(userId); users.delete(userId);
if (users.size === 0) { if (users.size === 0) {
this.voiceStates.delete(channelId); this.voiceStates.delete(channelId);
} }
return channelId; leftChannelId = channelId;
break;
} }
} }
return null; return leftChannelId;
} }
getVoiceUsers(channelId: string): Set<string> { getVoiceUsers(channelId: string): Set<string> {
packages/web/src/hooks/useLiveKit.ts
+2 -2
View File
@@ -222,7 +222,7 @@ export function useLiveKit() {
} }
} catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); } } catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
finally { if (gen === _connectGeneration) setIsConnecting(false); } finally { if (gen === _connectGeneration) setIsConnecting(false); }
}, [updateParticipants, handleDataReceived]); }, [updateParticipants, handleDataReceived, isMuted, isDeafened]);
const connectDm = useCallback(async (dmChannelId: string) => { const connectDm = useCallback(async (dmChannelId: string) => {
const gen = ++_connectGeneration; const gen = ++_connectGeneration;
@@ -267,7 +267,7 @@ export function useLiveKit() {
} }
} catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); } } catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
finally { if (gen === _connectGeneration) setIsConnecting(false); } finally { if (gen === _connectGeneration) setIsConnecting(false); }
}, [updateParticipants, handleDataReceived]); }, [updateParticipants, handleDataReceived, isMuted, isDeafened]);
const disconnect = useCallback(async () => { const disconnect = useCallback(async () => {
_connectGeneration++; _connectGeneration++;
packages/web/src/hooks/useWebSocket.ts
+1
View File
@@ -56,6 +56,7 @@ function handleEvent(event: ServerEvent): void {
{ {
const { currentVoiceChannelId, isMuted: curMuted, isDeafened: curDeafened } = useVoiceStore.getState(); const { currentVoiceChannelId, isMuted: curMuted, isDeafened: curDeafened } = useVoiceStore.getState();
if (currentVoiceChannelId) { if (currentVoiceChannelId) {
console.log('[WebSocket] Re-syncing voice status on reconnect:', { currentVoiceChannelId, curMuted, curDeafened });
wsSend({ type: 'voice_join', channelId: currentVoiceChannelId }); wsSend({ type: 'voice_join', channelId: currentVoiceChannelId });
wsSend({ type: 'voice_status', isMuted: curMuted, isDeafened: curDeafened }); wsSend({ type: 'voice_status', isMuted: curMuted, isDeafened: curDeafened });
} }
packages/web/src/stores/voiceStore.ts
+146 -131
View File
@@ -1,4 +1,5 @@
import { create } from 'zustand'; import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import type { ParticipantInfo } from '../hooks/useLiveKit'; import type { ParticipantInfo } from '../hooks/useLiveKit';
interface VoiceState { interface VoiceState {
@@ -55,149 +56,163 @@ interface VoiceState {
reset: () => void; reset: () => void;
} }
export const useVoiceStore = create<VoiceState>((set, get) => ({ export const useVoiceStore = create<VoiceState>()(
voiceUsers: new Map(), persist(
currentVoiceChannelId: null, (set, get) => ({
isMuted: false, voiceUsers: new Map(),
isDeafened: false, currentVoiceChannelId: null,
isCameraOn: false, isMuted: false,
isScreenSharing: false, isDeafened: false,
participants: [], isCameraOn: false,
connectionError: null, isScreenSharing: false,
isLiveKitConnected: false, participants: [],
inputVolume: 100, connectionError: null,
outputVolume: 100, isLiveKitConnected: false,
focusedParticipantId: null, inputVolume: 100,
videoQuality: '720p60', outputVolume: 100,
participantVolumes: new Map(), focusedParticipantId: null,
setParticipantVolume: (userId, volume) => { videoQuality: '720p60',
set((state) => { participantVolumes: new Map(),
const newMap = new Map(state.participantVolumes); setParticipantVolume: (userId, volume) => {
newMap.set(userId, volume); set((state) => {
return { participantVolumes: newMap }; const newMap = new Map(state.participantVolumes);
}); newMap.set(userId, volume);
}, return { participantVolumes: newMap };
getParticipantVolume: (userId) => get().participantVolumes.get(userId) ?? 100, });
},
getParticipantVolume: (userId) => get().participantVolumes.get(userId) ?? 100,
incomingCall: null, incomingCall: null,
outgoingCall: null, outgoingCall: null,
activeDmCall: null, activeDmCall: null,
setIncomingCall: (call) => set({ incomingCall: call }), setIncomingCall: (call) => set({ incomingCall: call }),
setOutgoingCall: (call) => set({ outgoingCall: call }), setOutgoingCall: (call) => set({ outgoingCall: call }),
setActiveDmCall: (call) => set({ activeDmCall: call }), setActiveDmCall: (call) => set({ activeDmCall: call }),
setVoiceUsers: (channelId, userIds) => { setVoiceUsers: (channelId, userIds) => {
set((state) => { set((state) => {
const newMap = new Map(state.voiceUsers); const newMap = new Map(state.voiceUsers);
newMap.set(channelId, userIds); newMap.set(channelId, userIds);
return { voiceUsers: newMap }; return { voiceUsers: newMap };
}); });
}, },
addVoiceUser: (channelId, userId) => { addVoiceUser: (channelId, userId) => {
set((state) => { set((state) => {
const newMap = new Map(state.voiceUsers); const newMap = new Map(state.voiceUsers);
const current = newMap.get(channelId) ?? []; const current = newMap.get(channelId) ?? [];
if (!current.includes(userId)) { if (!current.includes(userId)) {
newMap.set(channelId, [...current, userId]); newMap.set(channelId, [...current, userId]);
} }
return { voiceUsers: newMap }; return { voiceUsers: newMap };
}); });
}, },
removeVoiceUser: (channelId, userId) => { removeVoiceUser: (channelId, userId) => {
set((state) => { set((state) => {
const newMap = new Map(state.voiceUsers); const newMap = new Map(state.voiceUsers);
const current = newMap.get(channelId) ?? []; const current = newMap.get(channelId) ?? [];
newMap.set(channelId, current.filter(id => id !== userId)); newMap.set(channelId, current.filter(id => id !== userId));
return { voiceUsers: newMap }; return { voiceUsers: newMap };
}); });
}, },
setCurrentVoiceChannel: (channelId) => set({ currentVoiceChannelId: channelId }), setCurrentVoiceChannel: (channelId) => set({ currentVoiceChannelId: channelId }),
setParticipants: (participants) => set({ participants }), setParticipants: (participants) => set({ participants }),
setConnectionError: (error) => set({ connectionError: error }), setConnectionError: (error) => set({ connectionError: error }),
setIsLiveKitConnected: (connected) => set({ isLiveKitConnected: connected }), setIsLiveKitConnected: (connected) => set({ isLiveKitConnected: connected }),
setInputVolume: (volume) => set({ inputVolume: volume }), setInputVolume: (volume) => set({ inputVolume: volume }),
setOutputVolume: (volume) => set({ outputVolume: volume }), setOutputVolume: (volume) => set({ outputVolume: volume }),
toggleMic: () => set((state) => ({ isMuted: !state.isMuted })), toggleMic: () => set((state) => ({ isMuted: !state.isMuted })),
toggleDeafen: () => set((state) => ({ isDeafened: !state.isDeafened })), toggleDeafen: () => set((state) => ({ isDeafened: !state.isDeafened })),
toggleCamera: () => set((state) => ({ isCameraOn: !state.isCameraOn })), toggleCamera: () => set((state) => ({ isCameraOn: !state.isCameraOn })),
toggleScreenShare: () => set((state) => ({ isScreenSharing: !state.isScreenSharing })), toggleScreenShare: () => set((state) => ({ isScreenSharing: !state.isScreenSharing })),
setFocusedParticipant: (id) => set({ focusedParticipantId: id }), setFocusedParticipant: (id) => set({ focusedParticipantId: id }),
setVideoQuality: (quality) => set({ videoQuality: quality }), setVideoQuality: (quality) => set({ videoQuality: quality }),
noiseSuppression: true, noiseSuppression: true,
toggleNoiseSuppression: () => set((state) => ({ noiseSuppression: !state.noiseSuppression })), toggleNoiseSuppression: () => set((state) => ({ noiseSuppression: !state.noiseSuppression })),
deafenedUserIds: new Set(), deafenedUserIds: new Set(),
setUserDeafened: (userId, deafened) => { setUserDeafened: (userId, deafened) => {
set((state) => { set((state) => {
const newSet = new Set(state.deafenedUserIds); const newSet = new Set(state.deafenedUserIds);
if (deafened) newSet.add(userId); else newSet.delete(userId); if (deafened) newSet.add(userId); else newSet.delete(userId);
return { deafenedUserIds: newSet }; return { deafenedUserIds: newSet };
}); });
}, },
voiceUserStates: new Map(), voiceUserStates: new Map(),
setVoiceUserStatus: (userId, isMuted, isDeafened) => { setVoiceUserStatus: (userId, isMuted, isDeafened) => {
set((state) => { set((state) => {
const newMap = new Map(state.voiceUserStates); const newMap = new Map(state.voiceUserStates);
newMap.set(userId, { isMuted, isDeafened }); newMap.set(userId, { isMuted, isDeafened });
return { voiceUserStates: newMap }; return { voiceUserStates: newMap };
}); });
}, },
clearVoiceUserStatus: (userId) => { clearVoiceUserStatus: (userId) => {
set((state) => { set((state) => {
const newMap = new Map(state.voiceUserStates); const newMap = new Map(state.voiceUserStates);
newMap.delete(userId); newMap.delete(userId);
return { voiceUserStates: newMap }; return { voiceUserStates: newMap };
}); });
}, },
getVoiceUsers: (channelId) => get().voiceUsers.get(channelId) ?? [], getVoiceUsers: (channelId) => get().voiceUsers.get(channelId) ?? [],
clearAllVoiceUsers: () => set({ voiceUsers: new Map(), voiceUserStates: new Map() }), clearAllVoiceUsers: () => set({ voiceUsers: new Map(), voiceUserStates: new Map() }),
// Leave voice without wiping the voiceUsers map (so sidebar still shows others) // Leave voice without wiping the voiceUsers map (so sidebar still shows others)
leaveVoice: () => set({ leaveVoice: () => set({
currentVoiceChannelId: null, currentVoiceChannelId: null,
isMuted: false, isCameraOn: false,
isDeafened: false, isScreenSharing: false,
isCameraOn: false, participants: [],
isScreenSharing: false, connectionError: null,
participants: [], isLiveKitConnected: false,
connectionError: null, focusedParticipantId: null,
isLiveKitConnected: false, activeDmCall: null,
inputVolume: 100, outgoingCall: null,
outputVolume: 100, deafenedUserIds: new Set(),
focusedParticipantId: null, }),
activeDmCall: null,
outgoingCall: null,
deafenedUserIds: new Set(),
}),
reset: () => set({ reset: () => set({
voiceUsers: new Map(), voiceUsers: new Map(),
currentVoiceChannelId: null, currentVoiceChannelId: null,
isMuted: false, isMuted: false,
isDeafened: false, isDeafened: false,
isCameraOn: false, isCameraOn: false,
isScreenSharing: false, isScreenSharing: false,
participants: [], participants: [],
connectionError: null, connectionError: null,
isLiveKitConnected: false, isLiveKitConnected: false,
inputVolume: 100, inputVolume: 100,
outputVolume: 100, outputVolume: 100,
focusedParticipantId: null, focusedParticipantId: null,
participantVolumes: new Map(), participantVolumes: new Map(),
incomingCall: null, incomingCall: null,
outgoingCall: null, outgoingCall: null,
activeDmCall: null, activeDmCall: null,
deafenedUserIds: new Set(), deafenedUserIds: new Set(),
voiceUserStates: new Map(), voiceUserStates: new Map(),
}), }),
})); }),
{
name: 'opencord-voice-settings',
storage: createJSONStorage(() => localStorage),
// Only persist these keys. Maps and Sets are complex to serialize.
partialize: (state) => ({
currentVoiceChannelId: state.currentVoiceChannelId,
isMuted: state.isMuted,
isDeafened: state.isDeafened,
inputVolume: state.inputVolume,
outputVolume: state.outputVolume,
videoQuality: state.videoQuality,
noiseSuppression: state.noiseSuppression,
}),
}
)
);