Put presenter state in conference manager

src/ConferenceCallManager.js

@@ -247,6 +247,7 @@ export class ConferenceCallManager extends EventEmitter {
       stream,
       audioMuted: this.audioMuted,
       videoMuted: this.videoMuted,
+      presenter: false,
     };
 
     this.participants.push(this.localParticipant);
@@ -400,6 +401,17 @@ 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");
   }
@@ -533,6 +545,7 @@ export class ConferenceCallManager extends EventEmitter {
         stream,
         audioMuted,
         videoMuted,
+        presenter: false,
       };
       this.participants.push(participant);
     }
@@ -632,6 +645,7 @@ 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

@@ -340,16 +340,13 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
   }, [manager]);
 
   const togglePresenter = useCallback((selectedParticipant) => {
+    manager.setPresenter(
+      selectedParticipant.userId,
+      !selectedParticipant.presenter
+    );
     setState((prevState) => ({
       ...prevState,
-      participants: prevState.participants.map((participant) =>
-        participant === selectedParticipant
-          ? {
-              ...participant,
-              presenter: !participant.presenter,
-            }
-          : participant
-      ),
+      participants: [...manager.participants],
     }));
   }, []);