feat: voice status visibility + sidebar persistence fixes
- Add WebSocket voice_status/voice_status_update events so mute/deafen icons are visible in the sidebar without joining the voice channel - Server tracks voiceUserStates and includes them in the ready payload - Re-register voice channel on WebSocket reconnect to prevent sidebar users from disappearing after idle timeout - Re-broadcast deafen state to late joiners via LiveKit data channel - Fix black grid tile when video stops (enabled-flag guards) - Remove duplicate mute/deafen from VoiceControls (replaced with Video Quality + Noise Suppression) - Fix missing users in sidebar voice list (identity matching + fallback)
This commit is contained in:
Jannis Braun
@@ -44,6 +44,7 @@ export interface ParticipantInfo {
|
||||
username: string;
|
||||
isSpeaking: boolean;
|
||||
isMuted: boolean;
|
||||
isDeafened: boolean;
|
||||
isCameraOn: boolean;
|
||||
isScreenSharing: boolean;
|
||||
isLocal: boolean;
|
||||
@@ -118,16 +119,34 @@ export function useLiveKit() {
|
||||
const mt = track.mediaStreamTrack;
|
||||
if (!mt || mt.readyState !== 'live') return;
|
||||
if (pub.source === Track.Source.Microphone) audioTrack = mt;
|
||||
else if (pub.source === Track.Source.Camera) videoTrack = mt;
|
||||
else if (pub.source === Track.Source.ScreenShare) screenTrack = mt;
|
||||
else if (pub.source === Track.Source.Camera && p.isCameraEnabled) videoTrack = mt;
|
||||
else if (pub.source === Track.Source.ScreenShare && p.isScreenShareEnabled) screenTrack = mt;
|
||||
});
|
||||
allParticipants.push({ identity: p.identity, userId, username, isSpeaking: p.isSpeaking, isMuted: !p.isMicrophoneEnabled, isCameraOn: p.isCameraEnabled, isScreenSharing: p.isScreenShareEnabled, isLocal, audioTrack, videoTrack, screenTrack });
|
||||
let isDeafened = false;
|
||||
if (isLocal) {
|
||||
isDeafened = useVoiceStore.getState().isDeafened;
|
||||
} else {
|
||||
isDeafened = useVoiceStore.getState().deafenedUserIds.has(userId);
|
||||
}
|
||||
allParticipants.push({ identity: p.identity, userId, username, isSpeaking: p.isSpeaking, isMuted: !p.isMicrophoneEnabled, isDeafened, isCameraOn: p.isCameraEnabled, isScreenSharing: p.isScreenShareEnabled, isLocal, audioTrack, videoTrack, screenTrack });
|
||||
};
|
||||
processParticipant(r.localParticipant, true);
|
||||
r.remoteParticipants.forEach((p) => processParticipant(p, false));
|
||||
setParticipants(allParticipants);
|
||||
}, []);
|
||||
|
||||
const handleDataReceived = useCallback((payload: Uint8Array, participant?: RemoteParticipant) => {
|
||||
try {
|
||||
const text = new TextDecoder().decode(payload);
|
||||
const msg = JSON.parse(text);
|
||||
if (msg.type === 'deafen' && participant) {
|
||||
const { userId } = parseIdentity(participant.identity);
|
||||
useVoiceStore.getState().setUserDeafened(userId, msg.deafened === true);
|
||||
updateParticipants();
|
||||
}
|
||||
} catch {}
|
||||
}, [updateParticipants]);
|
||||
|
||||
const connect = useCallback(async (channelId: string) => {
|
||||
if (connectedChannelRef.current === channelId && roomRef.current) return;
|
||||
const gen = ++_connectGeneration;
|
||||
@@ -141,7 +160,17 @@ export function useLiveKit() {
|
||||
const newRoom = new Room({ adaptiveStream: false, dynacast: false, publishDefaults: { videoCodec: 'h264', simulcast: false } });
|
||||
roomRef.current = newRoom;
|
||||
const guardedUpdate = () => { if (roomRef.current === newRoom) updateParticipants(); };
|
||||
newRoom.on(RoomEvent.ParticipantConnected, guardedUpdate);
|
||||
newRoom.on(RoomEvent.ParticipantConnected, (participant) => {
|
||||
guardedUpdate();
|
||||
// Re-broadcast local deafen state to newly connected participant
|
||||
if (useVoiceStore.getState().isDeafened) {
|
||||
const encoder = new TextEncoder();
|
||||
newRoom.localParticipant.publishData(
|
||||
encoder.encode(JSON.stringify({ type: 'deafen', deafened: true })),
|
||||
{ reliable: true }
|
||||
).catch(() => {});
|
||||
}
|
||||
});
|
||||
newRoom.on(RoomEvent.ParticipantDisconnected, guardedUpdate);
|
||||
newRoom.on(RoomEvent.TrackSubscribed, guardedUpdate);
|
||||
newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
|
||||
@@ -150,6 +179,8 @@ export function useLiveKit() {
|
||||
newRoom.on(RoomEvent.TrackMuted, guardedUpdate);
|
||||
newRoom.on(RoomEvent.TrackUnmuted, guardedUpdate);
|
||||
newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
|
||||
newRoom.on(RoomEvent.ParticipantMetadataChanged, guardedUpdate);
|
||||
newRoom.on(RoomEvent.DataReceived, handleDataReceived);
|
||||
newRoom.on(RoomEvent.ConnectionStateChanged, (state) => {
|
||||
if (roomRef.current === newRoom) {
|
||||
const connected = state === ConnectionState.Connected;
|
||||
@@ -171,7 +202,7 @@ export function useLiveKit() {
|
||||
try { await newRoom.localParticipant.setMicrophoneEnabled(true); updateParticipants(); } catch { useVoiceStore.setState({ isMuted: true }); }
|
||||
} catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
|
||||
finally { if (gen === _connectGeneration) setIsConnecting(false); }
|
||||
}, [updateParticipants]);
|
||||
}, [updateParticipants, handleDataReceived]);
|
||||
|
||||
const connectDm = useCallback(async (dmChannelId: string) => {
|
||||
const gen = ++_connectGeneration;
|
||||
@@ -208,7 +239,7 @@ export function useLiveKit() {
|
||||
try { await newRoom.localParticipant.setMicrophoneEnabled(true); updateParticipants(); } catch { useVoiceStore.setState({ isMuted: true }); }
|
||||
} catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
|
||||
finally { if (gen === _connectGeneration) setIsConnecting(false); }
|
||||
}, [updateParticipants]);
|
||||
}, [updateParticipants, handleDataReceived]);
|
||||
|
||||
const disconnect = useCallback(async () => {
|
||||
_connectGeneration++;
|
||||
|
||||
@@ -16,7 +16,7 @@ function handleEvent(event: ServerEvent): void {
|
||||
const { setUser } = useAuthStore.getState();
|
||||
const { populateFromReady, loadServerDetail, currentServerId, updateMemberPresence, addMember, removeMember } = useServerStore.getState();
|
||||
const { addMessage, updateMessage, removeMessage, setTyping, onReactionAdded, onReactionRemoved } = useChatStore.getState();
|
||||
const { addVoiceUser, removeVoiceUser, clearAllVoiceUsers, setVoiceUsers } = useVoiceStore.getState();
|
||||
const { addVoiceUser, removeVoiceUser, clearAllVoiceUsers, setVoiceUsers, setVoiceUserStatus, clearVoiceUserStatus } = useVoiceStore.getState();
|
||||
|
||||
switch (event.type) {
|
||||
case 'ready':
|
||||
@@ -45,6 +45,21 @@ function handleEvent(event: ServerEvent): void {
|
||||
setVoiceUsers(channelId, userIds);
|
||||
}
|
||||
}
|
||||
// Populate voice user statuses (mute/deafen) from server
|
||||
if (event.voiceUserStates) {
|
||||
for (const [uid, status] of Object.entries(event.voiceUserStates)) {
|
||||
setVoiceUserStatus(uid, status.isMuted, status.isDeafened);
|
||||
}
|
||||
}
|
||||
// Re-register in voice channel if we're still connected to LiveKit
|
||||
// (WebSocket reconnect causes server to drop our voice tracking)
|
||||
{
|
||||
const { currentVoiceChannelId, isMuted: curMuted, isDeafened: curDeafened } = useVoiceStore.getState();
|
||||
if (currentVoiceChannelId) {
|
||||
wsSend({ type: 'voice_join', channelId: currentVoiceChannelId });
|
||||
wsSend({ type: 'voice_status', isMuted: curMuted, isDeafened: curDeafened });
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'message_created':
|
||||
@@ -78,9 +93,14 @@ function handleEvent(event: ServerEvent): void {
|
||||
addVoiceUser(event.channelId, event.userId);
|
||||
} else {
|
||||
removeVoiceUser(event.channelId, event.userId);
|
||||
clearVoiceUserStatus(event.userId);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'voice_status_update':
|
||||
setVoiceUserStatus(event.userId, event.isMuted, event.isDeafened);
|
||||
break;
|
||||
|
||||
case 'member_joined':
|
||||
addMember(event.member);
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user