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

fix: broadcast camera & screen share status via WebSocket for sidebar visibility

Browse Source 
Camera and LIVE badges in the channel sidebar were only visible to users
who had joined the same LiveKit room. Widen the voice_status WS event
from {isMuted, isDeafened} to {isMuted, isDeafened, isCameraOn, isScreenSharing}
so all server members see camera/screenshare indicators without joining voice.
This commit is contained in:
Jannis Braun
2026-02-23 20:07:42 +01:00
parent 77c5bda1fd
commit 5e34b39b78
10 changed files with 67 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/voice/VoiceControlBar.tsx
+14 -5
View File
@@ -28,8 +28,8 @@ export function VoiceControlBar() {
const handleMute = React.useCallback(async () => {
toggleMic();
// Broadcast via WebSocket so sidebar shows status without joining
wsSend({ type: 'voice_status', isMuted: !isMuted, isDeafened });
}, [isMuted, isDeafened, toggleMic]);
wsSend({ type: 'voice_status', isMuted: !isMuted, isDeafened, isCameraOn, isScreenSharing });
}, [isMuted, isDeafened, isCameraOn, isScreenSharing, toggleMic]);
const handleDeafen = React.useCallback(async () => {
const room = getActiveRoom();
@@ -39,7 +39,7 @@ export function VoiceControlBar() {
if (willDeafen && !isMuted) toggleMic();
if (!willDeafen && isMuted) toggleMic();
// Broadcast via WebSocket
wsSend({ type: 'voice_status', isMuted: willDeafen, isDeafened: willDeafen });
wsSend({ type: 'voice_status', isMuted: willDeafen, isDeafened: willDeafen, isCameraOn, isScreenSharing });
if (room) {
try {
// Broadcast deafen state via LiveKit data channel for in-room users
@@ -52,7 +52,7 @@ export function VoiceControlBar() {
console.error('[VoiceControlBar] Failed to toggle deafen:', err);
}
}
}, [isDeafened, isMuted, toggleDeafen, toggleMic]);
}, [isDeafened, isMuted, isCameraOn, isScreenSharing, toggleDeafen, toggleMic]);
const handleCamera = async () => {
const room = getActiveRoom();
@@ -77,6 +77,9 @@ export function VoiceControlBar() {
await room.localParticipant.setCameraEnabled(false);
}
toggleCamera();
// Broadcast camera state via WebSocket
const { isMuted: m, isDeafened: d, isScreenSharing: ss } = useVoiceStore.getState();
wsSend({ type: 'voice_status', isMuted: m, isDeafened: d, isCameraOn: willEnable, isScreenSharing: ss });
} catch (err) {
console.error('[VoiceControlBar] Failed to toggle camera:', err);
}
@@ -87,9 +90,15 @@ export function VoiceControlBar() {
if (!room) return;
try {
if (!isScreenSharing) {
await startScreenShare(room);
const started = await startScreenShare(room);
if (started) {
const { isMuted: m, isDeafened: d, isCameraOn: c } = useVoiceStore.getState();
wsSend({ type: 'voice_status', isMuted: m, isDeafened: d, isCameraOn: c, isScreenSharing: true });
}
} else {
await stopScreenShare(room);
const { isMuted: m, isDeafened: d, isCameraOn: c } = useVoiceStore.getState();
wsSend({ type: 'voice_status', isMuted: m, isDeafened: d, isCameraOn: c, isScreenSharing: false });
}
} catch (err) {
console.error('[VoiceControlBar] Failed to toggle screen share:', err);