fix: derive voice sidebar from LiveKit participants to eliminate desync
The channel sidebar voice user list was maintained by a separate voiceUsers Map (fed by WS events + fragile hydration code) that diverged from reality after server restarts — users shown in wrong channels, duplicated across channels. The VoiceGrid was always correct because it reads LiveKit participants directly. Now VoiceChannel.tsx derives its user list from LiveKit participants for the connected channel (single source of truth) and only falls back to server-provided voiceUsers for channels the user is not connected to. Removed all hydration band-aids that tried to sync the two systems: - useLiveKit ParticipantDisconnected → removeVoiceUser - useLiveKit ConnectionStateChanged → addVoiceUser hydration loop - useWebSocket ready handler → dynamic import LiveKit hydration Also includes: voice channel settings gear icon on hover, persist per-user volume/mute prefs across sessions, default screen share audio off on Electron (no system audio capture support).
This commit is contained in:
Jannis Braun
@@ -1334,6 +1334,8 @@ function ChannelItem({
|
||||
channelName={channel.name}
|
||||
onClick={() => canConnect && handleVoiceJoin(channel.id)}
|
||||
locked={!canConnect}
|
||||
canManage={canManage}
|
||||
onSettingsClick={onSettingsClick}
|
||||
dragState={voiceDragState}
|
||||
onDragStart={onVoiceDragStart}
|
||||
onDragEnd={onVoiceDragEnd}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { useVoiceStore } from '../../stores/voiceStore';
|
||||
import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
@@ -19,15 +19,27 @@ interface VoiceChannelProps {
|
||||
channelName: string;
|
||||
onClick: () => void;
|
||||
locked?: boolean;
|
||||
canManage?: boolean;
|
||||
onSettingsClick?: () => void;
|
||||
dragState?: VoiceChannelDragState | null;
|
||||
onDragStart?: (userId: string) => void;
|
||||
onDragEnd?: () => void;
|
||||
}
|
||||
|
||||
export function VoiceChannel({ channelId, channelName, onClick, locked, dragState, onDragStart, onDragEnd }: VoiceChannelProps) {
|
||||
const voiceUsers = useVoiceStore((s) => s.voiceUsers.get(channelId)) ?? EMPTY_VOICE_USERS;
|
||||
export function VoiceChannel({ channelId, channelName, onClick, locked, canManage, onSettingsClick, dragState, onDragStart, onDragEnd }: VoiceChannelProps) {
|
||||
const serverVoiceUsers = useVoiceStore((s) => s.voiceUsers.get(channelId)) ?? EMPTY_VOICE_USERS;
|
||||
const currentVoiceChannel = useVoiceStore((s) => s.currentVoiceChannelId);
|
||||
const participants = useVoiceStore((s) => s.participants);
|
||||
const isLiveKitConnected = useVoiceStore((s) => s.isLiveKitConnected);
|
||||
|
||||
// For OUR channel: LiveKit participants are the single source of truth.
|
||||
// For other channels: use server-provided voiceUsers (only available source).
|
||||
const voiceUsers = useMemo(() => {
|
||||
if (currentVoiceChannel === channelId && isLiveKitConnected && participants.length > 0) {
|
||||
return [...new Set(participants.map(p => p.userId))];
|
||||
}
|
||||
return serverVoiceUsers;
|
||||
}, [currentVoiceChannel, channelId, isLiveKitConnected, participants, serverVoiceUsers]);
|
||||
const localIsDeafened = useVoiceStore((s) => s.isDeafened);
|
||||
const localIsMuted = useVoiceStore((s) => s.isMuted);
|
||||
const voiceUserStates = useVoiceStore((s) => s.voiceUserStates);
|
||||
@@ -127,6 +139,21 @@ export function VoiceChannel({ channelId, channelName, onClick, locked, dragStat
|
||||
</svg>
|
||||
)}
|
||||
<span className="truncate text-[15px] font-medium">{channelName}</span>
|
||||
{canManage && onSettingsClick && (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="flex-shrink-0 opacity-0 group-hover:opacity-100 text-txt-tertiary hover:text-txt-primary transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSettingsClick();
|
||||
}}
|
||||
>
|
||||
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Connected users */}
|
||||
|
||||
@@ -122,7 +122,7 @@ export function setCameraSubscription(room: Room | null, targetIdentity: string,
|
||||
});
|
||||
}
|
||||
|
||||
function parseIdentity(identity: string): { userId: string; username: string } {
|
||||
export function parseIdentity(identity: string): { userId: string; username: string } {
|
||||
const parts = identity.split(':');
|
||||
return { userId: parts[0] ?? identity, username: parts[1] ?? identity };
|
||||
}
|
||||
@@ -414,14 +414,9 @@ export function useLiveKit() {
|
||||
});
|
||||
newRoom.on(RoomEvent.ParticipantDisconnected, (participant: RemoteParticipant) => {
|
||||
guardedUpdate();
|
||||
// Sync voiceUsers so channel sidebar updates immediately
|
||||
// (don't wait for server's 5s grace-period WS event)
|
||||
const chId = connectedChannelRef.current;
|
||||
if (chId && !chId.startsWith('dm-')) {
|
||||
const { userId } = parseIdentity(participant.identity);
|
||||
useVoiceStore.getState().removeVoiceUser(chId, userId);
|
||||
useVoiceStore.getState().clearVoiceUserStatus(userId);
|
||||
}
|
||||
// Clean up stale WS-based voice status for the departed participant
|
||||
const { userId } = parseIdentity(participant.identity);
|
||||
useVoiceStore.getState().clearVoiceUserStatus(userId);
|
||||
});
|
||||
newRoom.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
|
||||
// LiveKit auto-attaches a hidden <audio> element for subscribed audio tracks.
|
||||
|
||||
@@ -4,6 +4,7 @@ import type { ParticipantInfo } from '../hooks/useLiveKit';
|
||||
import { AudioManager } from '../audio/AudioManager';
|
||||
import { useSpaceStore, getChannelOrigin, getMyUserIdForOrigin } from './spaceStore';
|
||||
import { useAuthStore } from './authStore';
|
||||
import { isElectron } from '../platform/platform';
|
||||
|
||||
export interface ScreenShareConfig {
|
||||
height: 1080 | 720 | 540;
|
||||
@@ -135,7 +136,7 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
inputDeviceId: 'default',
|
||||
outputDeviceId: 'default',
|
||||
focusedParticipantId: null,
|
||||
screenShareConfig: { height: 720, fps: 60, mode: 'gaming', customBitrateKbps: null, shareAudio: true },
|
||||
screenShareConfig: { height: 720, fps: 60, mode: 'gaming', customBitrateKbps: null, shareAudio: !isElectron() },
|
||||
participantVolumes: new Map(),
|
||||
setParticipantVolume: (userId, volume) => {
|
||||
set((state) => {
|
||||
@@ -400,9 +401,6 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
// Per-session media state
|
||||
isCameraOn: false,
|
||||
isScreenSharing: false,
|
||||
// Per-session maps
|
||||
participantVolumes: new Map(),
|
||||
participantMutes: new Map(),
|
||||
deafenedUserIds: new Set(),
|
||||
streamVolumes: new Map(),
|
||||
streamMutes: new Map(),
|
||||
@@ -528,7 +526,7 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
}),
|
||||
{
|
||||
name: 'backspace-voice-settings',
|
||||
version: 10,
|
||||
version: 11,
|
||||
migrate: (persistedState: any, version: number) => {
|
||||
if (version === 0) {
|
||||
persistedState.streamAttenuationEnabled = false;
|
||||
@@ -572,6 +570,11 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
persistedState.screenShareConfig.shareAudio = true;
|
||||
}
|
||||
}
|
||||
if (version < 11) {
|
||||
if (persistedState.screenShareConfig) {
|
||||
persistedState.screenShareConfig.shareAudio = !isElectron();
|
||||
}
|
||||
}
|
||||
return persistedState;
|
||||
},
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
@@ -592,6 +595,9 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
soundEffectVolume: state.soundEffectVolume,
|
||||
streamAttenuationEnabled: state.streamAttenuationEnabled,
|
||||
streamAttenuationStrength: state.streamAttenuationStrength,
|
||||
// Per-user preferences (Map → plain object for JSON)
|
||||
participantVolumes: Object.fromEntries(state.participantVolumes),
|
||||
participantMutes: Object.fromEntries(state.participantMutes),
|
||||
}),
|
||||
merge: (persistedState: any, currentState: VoiceState) => {
|
||||
const merged = { ...currentState, ...persistedState };
|
||||
@@ -605,8 +611,12 @@ export const useVoiceStore = create<VoiceState>()(
|
||||
merged.speakingUserIds = currentState.speakingUserIds;
|
||||
merged.deafenedUserIds = currentState.deafenedUserIds;
|
||||
merged.voiceUserStates = currentState.voiceUserStates;
|
||||
merged.participantVolumes = currentState.participantVolumes;
|
||||
merged.participantMutes = currentState.participantMutes;
|
||||
merged.participantVolumes = persistedState?.participantVolumes
|
||||
? new Map(Object.entries(persistedState.participantVolumes))
|
||||
: currentState.participantVolumes;
|
||||
merged.participantMutes = persistedState?.participantMutes
|
||||
? new Map(Object.entries(persistedState.participantMutes))
|
||||
: currentState.participantMutes;
|
||||
merged.streamVolumes = currentState.streamVolumes;
|
||||
merged.streamMutes = currentState.streamMutes;
|
||||
merged.watchingStreams = currentState.watchingStreams;
|
||||
|
||||
Reference in New Issue
Block a user