feat(phase6): video grid, noise suppression, whisper system

- New VideoGrid component: live camera feeds (local + remote) in VoicePanel
- Camera toggle in VoiceControls: enable/disable video per participant
- Noise suppression toggle in VoiceControls + voice store
- VOICE_WHISPER WS event: backend routes whisper to target user only
- Whisper UI: per-participant whisper button, notification toasts with dismiss
- Fix circular import between voice.ts and ws.ts (use lazy accessor)
This commit is contained in:
2026-06-30 12:21:53 -04:00
parent 3c063d4f56
commit 775bd953b0
8 changed files with 307 additions and 28 deletions
+13
View File
@@ -5,10 +5,12 @@ export function VoiceControls() {
const isDeafened = useVoiceStore((state) => state.isDeafened);
const isVideoOn = useVoiceStore((state) => state.isVideoOn);
const isScreenSharing = useVoiceStore((state) => state.isScreenSharing);
const noiseSuppression = useVoiceStore((state) => state.noiseSuppression);
const toggleMute = useVoiceStore((state) => state.toggleMute);
const toggleDeafen = useVoiceStore((state) => state.toggleDeafen);
const toggleVideo = useVoiceStore((state) => state.toggleVideo);
const toggleScreenShare = useVoiceStore((state) => state.toggleScreenShare);
const toggleNoiseSuppression = useVoiceStore((state) => state.toggleNoiseSuppression);
const leaveVoice = useVoiceStore((state) => state.leaveVoice);
return (
@@ -57,6 +59,17 @@ export function VoiceControls() {
>
[share]
</button>
<button
onClick={toggleNoiseSuppression}
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
noiseSuppression
? 'text-gb-green bg-gb-bg-s border border-gb-green'
: 'text-gb-fg-s hover:text-gb-green hover:bg-gb-bg-t border border-transparent'
}`}
title={noiseSuppression ? 'Noise suppression on' : 'Noise suppression off'}
>
[ns{noiseSuppression ? '●' : '○'}]
</button>
<div className="flex-1" />
<button
onClick={leaveVoice}