Move presenter logic to video grid

src/ConferenceCallManager.js

@@ -247,7 +247,6 @@ export class ConferenceCallManager extends EventEmitter {
       stream,
       audioMuted: this.audioMuted,
       videoMuted: this.videoMuted,
-      presenter: false,
     };
 
     this.participants.push(this.localParticipant);
@@ -401,17 +400,6 @@ export class ConferenceCallManager extends EventEmitter {
     this.emit("participants_changed");
   }
 
-  setPresenter(userId, presenter) {
-    const participant = this.participants.find(
-      (participant) => participant.userId === userId
-    );
-
-    if (participant) {
-      participant.presenter = presenter;
-      this.emit("participants_changed");
-    }
-  }
-
   logout() {
     localStorage.removeItem("matrix-auth-store");
   }
@@ -545,7 +533,6 @@ export class ConferenceCallManager extends EventEmitter {
         stream,
         audioMuted,
         videoMuted,
-        presenter: false,
       };
       this.participants.push(participant);
     }
@@ -645,7 +632,6 @@ export class ConferenceCallManager extends EventEmitter {
         stream: null,
         audioMuted: false,
         videoMuted: false,
-        presenter: false,
       };
       // TODO: Should we wait until the call has been answered to push the participant?
       // Or do we hide the participant until their stream is live?

src/ConferenceCallManagerHooks.js

@@ -339,17 +339,6 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
     setState((prevState) => ({ ...prevState, videoMuted: manager.videoMuted }));
   }, [manager]);
 
-  const togglePresenter = useCallback((selectedParticipant) => {
-    manager.setPresenter(
-      selectedParticipant.userId,
-      !selectedParticipant.presenter
-    );
-    setState((prevState) => ({
-      ...prevState,
-      participants: [...manager.participants],
-    }));
-  }, []);
-
   return {
     loading,
     joined,
@@ -361,7 +350,6 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
     leaveCall,
     toggleMuteVideo,
     toggleMuteAudio,
-    togglePresenter,
     videoMuted,
     audioMuted,
   };

src/GridDemo.jsx

@@ -20,19 +20,6 @@ export function GridDemo() {
     ]);
   }, [stream]);
 
-  const togglePresenter = useCallback((selectedParticipant) => {
-    setParticipants((participants) =>
-      participants.map((participant) =>
-        participant === selectedParticipant
-          ? {
-              ...participant,
-              presenter: !participant.presenter,
-            }
-          : participant
-      )
-    );
-  }, []);
-
   const removeParticipant = useCallback((key) => {
     setParticipants((participants) =>
       participants.filter((participant) => participant.userId !== key)
@@ -56,7 +43,7 @@ export function GridDemo() {
           </button>
         )}
       </div>
-      <VideoGrid participants={participants} onClickNameTag={togglePresenter} />
+      <VideoGrid participants={participants} />
     </div>
   );
 }

src/Room.jsx

@@ -48,7 +48,6 @@ export function Room({ manager }) {
     leaveCall,
     toggleMuteVideo,
     toggleMuteAudio,
-    togglePresenter,
     videoMuted,
     audioMuted,
   } = useVideoRoom(manager, roomId);
@@ -112,10 +111,7 @@ export function Room({ manager }) {
         </div>
       )}
       {!loading && room && joined && participants.length > 0 && (
-        <VideoGrid
+        <VideoGrid participants={participants} />
-          participants={participants}
-          onClickNameTag={togglePresenter}
-        />
       )}
       {!loading && room && joined && (
         <div className={styles.footer}>

src/VideoGrid.jsx

@@ -446,7 +446,7 @@ function getSubGridPositions(
   return newTilePositions;
 }
 
-export function VideoGrid({ participants, onClickNameTag }) {
+export function VideoGrid({ participants }) {
   const [{ tiles, tilePositions }, setTileState] = useState({
     tiles: [],
     tilePositions: [],
@@ -467,12 +467,17 @@ export function VideoGrid({ participants, onClickNameTag }) {
           (participant) => participant.userId === tile.key
         );
 
+        if (tile.presenter) {
+          presenterTileCount++;
+        }
+
         if (participant) {
           // Existing tiles
           newTiles.push({
             key: participant.userId,
             participant: participant,
             remove: false,
+            presenter: tile.presenter,
           });
         } else {
           // Removed tiles
@@ -481,15 +486,12 @@ export function VideoGrid({ participants, onClickNameTag }) {
             key: tile.key,
             participant: tile.participant,
             remove: true,
+            presenter: tile.presenter,
           });
         }
       }
 
       for (const participant of participants) {
-        if (participant.presenter) {
-          presenterTileCount++;
-        }
-
         if (newTiles.some(({ key }) => participant.userId === key)) {
           continue;
         }
@@ -499,13 +501,11 @@ export function VideoGrid({ participants, onClickNameTag }) {
           key: participant.userId,
           participant,
           remove: false,
+          presenter: false,
         });
       }
 
-      newTiles.sort(
+      newTiles.sort((a, b) => (b.presenter ? 1 : 0) - (a.presenter ? 1 : 0));
-        (a, b) =>
-          (b.participant.presenter ? 1 : 0) - (a.participant.presenter ? 1 : 0)
-      );
 
       if (removedTileKeys.length > 0) {
         setTimeout(() => {
@@ -613,6 +613,19 @@ export function VideoGrid({ participants, onClickNameTag }) {
 
       if (isInside(cursorPosition, hoverTilePosition)) {
         newTiles = moveArrItem(tiles, dragTileIndex, hoverTileIndex);
+
+        newTiles = newTiles.map((tile) => {
+          if (tile === hoverTile) {
+            return { ...tile, presenter: dragTile.presenter };
+          } else if (tile === dragTile) {
+            return { ...tile, presenter: hoverTile.presenter };
+          } else {
+            return tile;
+          }
+        });
+
+        newTiles.sort((a, b) => (b.presenter ? 1 : 0) - (a.presenter ? 1 : 0));
+
         setTileState((state) => ({ ...state, tiles: newTiles }));
         break;
       }
@@ -636,6 +649,43 @@ export function VideoGrid({ participants, onClickNameTag }) {
     api.start(animate(newTiles));
   });
 
+  const onClickNameTag = useCallback(
+    (participant) => {
+      setTileState((state) => {
+        let presenterTileCount = 0;
+
+        const newTiles = state.tiles.map((tile) => {
+          let newTile = tile;
+
+          if (tile.participant === participant) {
+            newTile = { ...tile, presenter: !tile.presenter };
+          }
+
+          if (newTile.presenter) {
+            presenterTileCount++;
+          }
+
+          return newTile;
+        });
+
+        newTiles.sort((a, b) => (b.presenter ? 1 : 0) - (a.presenter ? 1 : 0));
+
+        presenterTileCount;
+
+        return {
+          ...state,
+          tiles: newTiles,
+          tilePositions: getTilePositions(
+            newTiles.length,
+            gridBounds,
+            presenterTileCount
+          ),
+        };
+      });
+    },
+    [gridBounds]
+  );
+
   return (
     <div className={styles.grid} ref={gridRef}>
       {springs.map(({ shadow, ...style }, i) => {