Integrate video grid into conference room

src/ConferenceCallManagerHooks.js

@@ -160,7 +160,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
     const onParticipantsChanged = () => {
       setState((prevState) => ({
         ...prevState,
-        participants: manager.participants,
+        participants: [...manager.participants],
       }));
     };
 
@@ -250,7 +250,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
     setState((prevState) => ({
       ...prevState,
-      participants: manager.participants,
+      participants: [...manager.participants],
       joined: false,
       joining: false,
     }));
@@ -271,7 +271,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
             setState((prevState) => ({
               ...prevState,
-              participants: manager.participants,
+              participants: [...manager.participants],
               joined: false,
               joining: false,
             }));
@@ -282,7 +282,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
         setState((prevState) => ({
           ...prevState,
-          participants: manager.participants,
+          participants: [...manager.participants],
           joined: false,
           joining: false,
         }));

src/GridDemo.jsx

@@ -18,24 +18,8 @@ function isInside([x, y], targetTile) {
   return true;
 }
 
-export function GridDemo() {
+function getTilePositions(tileCount, gridBounds) {
-  const tileKey = useRef(0);
-  const [stream, setStream] = useState();
-  const [{ tiles, tilePositions }, setTileState] = useState({
-    tiles: [],
-    tilePositions: [],
-  });
-  const draggingTileRef = useRef(null);
-
-  // Contains tile indices
-  // Tiles are displayed in the order that they appear
-  const tileOrderRef = useRef([]);
-
-  const [gridRef, gridBounds] = useMeasure();
-
-  const getTilePositions = useCallback((tiles, gridBounds) => {
   const newTilePositions = [];
-    const tileCount = tiles.length;
   const { width: gridWidth, height: gridHeight } = gridBounds;
   const gap = 8;
 
@@ -77,9 +61,7 @@ export function GridDemo() {
       }
     }
 
-      let tileHeight = Math.round(
+    let tileHeight = Math.round((gridHeight - gap * (rowCount + 1)) / rowCount);
-        (gridHeight - gap * (rowCount + 1)) / rowCount
-      );
     let tileWidth = Math.round(
       (gridWidth - gap * (columnCount + 1)) / columnCount
     );
@@ -90,7 +72,7 @@ export function GridDemo() {
       tileWidth = (16 * tileHeight) / 9;
     }
 
-      for (let i = 0; i < tiles.length; i++) {
+    for (let i = 0; i < tileCount; i++) {
       const verticalIndex = Math.floor(i / columnCount);
       const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
 
@@ -123,78 +105,92 @@ export function GridDemo() {
   }
 
   return newTilePositions;
-  }, []);
+}
 
-  const startWebcam = useCallback(async () => {
+export function VideoGrid({ participants }) {
-    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+  const [{ tiles, tilePositions }, setTileState] = useState({
-    setStream(stream);
+    tiles: [],
-    tileOrderRef.current.push(tileOrderRef.current.length);
+    tilePositions: [],
-
-    setTileState(() => {
-      console.log("startWebcam");
-      const tiles = [{ stream, key: tileKey.current++, remove: false }];
-      const tilePositions = getTilePositions(tiles, gridBounds);
-      return { tiles, tilePositions };
   });
-  }, [gridBounds]);
+  const draggingTileRef = useRef(null);
 
-  const addTile = useCallback(() => {
+  // Contains tile indices
-    const newStream = stream.clone();
+  // Tiles are displayed in the order that they appear
+  const tileOrderRef = useRef([]);
 
-    tileOrderRef.current.push(tileOrderRef.current.length);
+  const [gridRef, gridBounds] = useMeasure();
 
+  useEffect(() => {
     setTileState(({ tiles }) => {
-      console.log("addTile");
+      const newTiles = [];
-      const newTiles = [
+      const removedTileKeys = [];
-        ...tiles,
-        { stream: newStream, key: tileKey.current++, remove: false },
-      ];
 
-      return {
+      for (const tile of tiles) {
-        tiles: newTiles,
+        const participant = participants.find(
-        tilePositions: getTilePositions(newTiles, gridBounds),
+          (participant) => participant.userId === tile.key
-      };
+        );
+
+        if (participant) {
+          // Existing tiles
+          newTiles.push({
+            key: participant.userId,
+            participant: participant,
+            remove: false,
           });
-  }, [stream, gridBounds]);
+        } else {
+          // Removed tiles
+          removedTileKeys.push(tile.key);
+          newTiles.push({
+            key: tile.key,
+            participant: tile.participant,
+            remove: true,
+          });
+        }
+      }
 
-  const removeTile = useCallback(
+      for (const participant of participants) {
-    (tile) => {
+        if (newTiles.some(({ key }) => participant.userId === key)) {
-      const tileKey = tile.key;
+          continue;
+        }
 
-      setTileState(({ tiles, tilePositions }) => {
+        // Added tiles
-        return {
+        newTiles.push({
-          tiles: tiles.map((tile) => ({
+          key: participant.userId,
-            ...tile,
+          participant,
-            remove: tile.key === tileKey,
+          remove: false,
-          })),
-          tilePositions,
-        };
         });
 
+        tileOrderRef.current.push(tileOrderRef.current.length);
+      }
+
+      if (removedTileKeys.length > 0) {
+        // TODO: There's a race condition in this nested set state when you quickly add/remove
         setTimeout(() => {
           setTileState(({ tiles }) => {
-          const tileIndex = tiles.findIndex((tile) => tile.key === tileKey);
+            const newTiles = tiles.filter(
-          const newTiles = [...tiles];
+              (tile) => !removedTileKeys.includes(tile.key)
-          newTiles.splice(tileIndex, 1);
-          tileOrderRef.current = tileOrderRef.current.filter(
-            (index) => index !== tileIndex
             );
+            const removedTileIndices = removedTileKeys.map((tileKey) =>
+              tiles.findIndex((tile) => tile.key === tileKey)
+            );
+            tileOrderRef.current = tileOrderRef.current.filter(
+              (index) => !removedTileIndices.includes(index)
+            );
+
             return {
               tiles: newTiles,
               tilePositions: getTilePositions(newTiles, gridBounds),
             };
           });
         }, 250);
-    },
+      }
-    [gridBounds]
-  );
 
-  useEffect(() => {
+      return {
-    setTileState(({ tiles }) => ({
+        tiles: newTiles,
-      tiles,
+        tilePositions: getTilePositions(newTiles.length, gridBounds),
-      tilePositions: getTilePositions(tiles, gridBounds),
+      };
-    }));
+    });
-  }, [gridBounds]);
+  }, [participants, gridBounds]);
 
   const animate = useCallback(
     (tileIndex) => {
@@ -301,18 +297,6 @@ export function GridDemo() {
   });
 
   return (
-    <div className={styles.gridDemo}>
-      <div className={styles.buttons}>
-        {!stream && <button onClick={startWebcam}>Start Webcam</button>}
-        {stream && tiles.length < 12 && (
-          <button onClick={addTile}>Add Tile</button>
-        )}
-        {stream && tiles.length > 0 && (
-          <button onClick={() => removeTile(tiles[tiles.length - 1])}>
-            Remove Tile
-          </button>
-        )}
-      </div>
     <div className={styles.grid} ref={gridRef}>
       {springs.map(({ shadow, ...style }, i) => {
         const tileIndex = tileOrderRef.current[i];
@@ -328,32 +312,76 @@ export function GridDemo() {
               ),
               ...style,
             }}
-              tileKey={tile.key}
             {...tile}
           />
         );
       })}
     </div>
-    </div>
   );
 }
 
-function ParticipantTile({ style, stream, remove, tileKey, ...rest }) {
+function ParticipantTile({ style, participant, remove, ...rest }) {
   const videoRef = useRef();
 
   useEffect(() => {
-    if (stream) {
+    if (participant.stream) {
-      videoRef.current.srcObject = stream;
+      videoRef.current.srcObject = participant.stream;
       videoRef.current.play();
     } else {
       videoRef.current.srcObject = null;
     }
-  }, [stream]);
+  }, [participant.stream]);
 
   return (
     <animated.div className={styles.participantTile} style={style} {...rest}>
-      <div className={styles.participantName}>{tileKey}</div>
+      <div className={styles.participantName}>{participant.userId}</div>
       <video ref={videoRef} playsInline />
     </animated.div>
   );
 }
+
+export function GridDemo() {
+  const participantKey = useRef(0);
+  const [stream, setStream] = useState();
+  const [participants, setParticipants] = useState([]);
+
+  const startWebcam = useCallback(async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    setStream(stream);
+    setParticipants([{ stream, userId: participantKey.current++ }]);
+  }, []);
+
+  const addParticipant = useCallback(() => {
+    setParticipants((participants) => [
+      ...participants,
+      { stream: stream.clone(), userId: participantKey.current++ },
+    ]);
+  }, [stream]);
+
+  const removeParticipant = useCallback((key) => {
+    setParticipants((participants) =>
+      participants.filter((participant) => participant.userId !== key)
+    );
+  }, []);
+
+  return (
+    <div className={styles.gridDemo}>
+      <div className={styles.buttons}>
+        {!stream && <button onClick={startWebcam}>Start Webcam</button>}
+        {stream && participants.length < 12 && (
+          <button onClick={addParticipant}>Add Tile</button>
+        )}
+        {stream && participants.length > 0 && (
+          <button
+            onClick={() =>
+              removeParticipant(participants[participants.length - 1].userId)
+            }
+          >
+            Remove Tile
+          </button>
+        )}
+      </div>
+      <VideoGrid participants={participants} />
+    </div>
+  );
+}

src/Room.jsx

@@ -19,6 +19,7 @@ import styles from "./Room.module.css";
 import { useParams, useLocation, Link } from "react-router-dom";
 import { useVideoRoom } from "./ConferenceCallManagerHooks";
 import { DevTools } from "./DevTools";
+import { VideoGrid } from "./GridDemo";
 
 function useQuery() {
   const location = useLocation();
@@ -96,11 +97,7 @@ export function Room({ manager }) {
         </div>
       )}
       {!loading && room && joined && participants.length > 0 && (
-        <div className={styles.roomContainer}>
+        <VideoGrid participants={participants} />
-          {participants.map((participant) => (
-            <Participant key={participant.userId} {...participant} />
-          ))}
-        </div>
       )}
       {!loading && room && joined && (
         <div className={styles.footer}>