fix(webrtc): fix VideoGrid reactivity and layout

web/src/components/VideoGrid.tsx

@@ -62,44 +62,45 @@ function VideoTile({ participant, isLocal, room }: { participant: Participant; i
 
 export function VideoGrid() {
   const room = useVoiceStore((s) => s._room);
-  const isVideoOn = useVoiceStore((s) => s.isVideoOn);
+  const voiceParticipants = useVoiceStore((s) => s.participants);
 
-  if (!room || !isVideoOn) return null;
+  if (!room) return null;
 
-  const participants: Participant[] = [
-    room.localParticipant,
-    ...Array.from(room.remoteParticipants.values()),
-  ];
+  const hasCamParticipants = voiceParticipants.filter((p) => p.hasVideo);
 
-  const hasCam = participants.filter((p) => {
-    const pub = p.getTrackPublication(Track.Source.Camera);
-    return pub && !pub.isMuted;
-  });
+  if (hasCamParticipants.length === 0) return null;
 
-  if (hasCam.length === 0) return null;
+  const getLiveKitParticipant = (identity: string) => {
+    if (identity === room.localParticipant.identity) return room.localParticipant;
+    return room.remoteParticipants.get(identity);
+  };
 
   return (
     <div className="px-3 py-1.5 border-b border-gb-bg-t">
       <div className="text-xxs text-gb-fg-f mb-1">
-        ── video [{hasCam.length}] ──
+        ── video [{hasCamParticipants.length}] ──
       </div>
       <div
         className={`grid gap-1 ${
-          hasCam.length <= 2
-            ? 'grid-cols-2'
-            : hasCam.length <= 4
+          hasCamParticipants.length === 1
+            ? 'grid-cols-1'
+            : hasCamParticipants.length <= 4
               ? 'grid-cols-2'
               : 'grid-cols-3'
         }`}
       >
-        {participants.map((p) => (
-          <VideoTile
-            key={p.identity}
-            participant={p}
-            isLocal={p.identity === room.localParticipant.identity}
-            room={room}
-          />
-        ))}
+        {hasCamParticipants.map((vp) => {
+          const p = getLiveKitParticipant(vp.identity);
+          if (!p) return null;
+          return (
+            <VideoTile
+              key={p.identity}
+              participant={p}
+              isLocal={p.identity === room.localParticipant.identity}
+              room={room}
+            />
+          );
+        })}
       </div>
     </div>
   );