fix(webrtc): fix VideoGrid reactivity and layout

web/src/stores/voice.ts

@@ -18,6 +18,7 @@ export interface VoiceParticipant {
   username: string;
   isMuted: boolean;
   isSpeaking: boolean;
+  hasVideo: boolean;
 }
 
 export interface WhisperNotification {
@@ -50,8 +51,8 @@ interface VoiceState {
   leaveVoice: () => Promise<void>;
   toggleMute: () => void;
   toggleDeafen: () => void;
-  toggleVideo: () => void;
-  toggleScreenShare: () => void;
+  toggleVideo: () => Promise<void>;
+  toggleScreenShare: () => Promise<void>;
   toggleNoiseSuppression: () => void;
   _addWhisper: (w: WhisperNotification) => void;
   whisperTo: (targetUserId: string, targetUsername: string, message?: string) => void;
@@ -60,11 +61,13 @@ interface VoiceState {
 
 function participantToVoice(p: Participant): VoiceParticipant {
   const micPub = p.getTrackPublication(Track.Source.Microphone);
+  const camPub = p.getTrackPublication(Track.Source.Camera);
   return {
     identity: p.identity,
     username: p.name || p.identity,
     isMuted: micPub?.isMuted ?? true,
     isSpeaking: p.isSpeaking,
+    hasVideo: !!(camPub && !camPub.isMuted),
   };
 }
 
@@ -154,6 +157,11 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
         syncParticipants();
       });
 
+      room.on(RoomEvent.TrackPublished, () => syncParticipants());
+      room.on(RoomEvent.TrackUnpublished, () => syncParticipants());
+      room.on(RoomEvent.TrackSubscribed, () => syncParticipants());
+      room.on(RoomEvent.TrackUnsubscribed, () => syncParticipants());
+
       room.on(
         RoomEvent.ActiveSpeakersChanged,
         (speakers: Participant[]) => {