update

silvareal · Jul 30, 2024 · 8fe3655 · 8fe3655
1 parent 1a8359d
commit 8fe3655
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/client/src/features/meeting/MeetingParticipantsTab.tsx b/client/src/features/meeting/MeetingParticipantsTab.tsx
@@ -1,33 +1,33 @@
 import { Icon } from "@iconify-icon/react/dist/iconify.js";
+import { RoomStateContext } from "providers/RoomProvider";
+import { useContext } from "react";
 
 export default function MeetingParticipantsTab() {
-  const participants = [
-    {
-      name: "Sylvernus Akubo (You)",
-      img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
-    },
-    {
-      name: "Sylvernus Akubo",
-      img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
-    },
-    {
-      name: "Sylvernus Akubo",
-      img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
-    },
-  ];
+  const roomStateContext = useContext(RoomStateContext);
+
   return (
     <div className="mt-5 flex flex-col gap-5">
-      {participants.map((participant) => (
+      {roomStateContext.roomState.peers.map((peer) => (
         <div className="flex justify-between items-center gap-2">
           <div className="inline-flex gap-2">
             <img
               className="w-[25px] h-[25px] object-cover rounded-full"
-              src={participant.img}
+              src={peer.avatar}
             />
-            <h5>{participant.name}</h5>
+            <h5>{peer.peerName}</h5>
           </div>
 
-          <Icon icon="ion:mic-circle" />
+          <div className="flex items-center gap-2">
+            <Icon
+              icon={peer.peerVideo ? "bi:camera-video" : "bi:camera-video-off"}
+            />
+
+            <Icon
+              icon={
+                peer?.peerAudio ? "carbon:microphone" : "carbon:microphone-off"
+              }
+            />
+          </div>
         </div>
       ))}
     </div>

diff --git a/client/src/providers/RoomProvider.tsx b/client/src/providers/RoomProvider.tsx
@@ -22,7 +22,16 @@ const reducer = (state: RoomState, action: RoomStateAction): RoomState => {
       return { ...state, authPeer: action.payload };
 
     case RoomStateType.ADD_PRODUCER:
+      const peerIndexExist = state.producers.findIndex(
+        (peer) => peer.appData.mediaType === action.payload.appData.mediaType
+      );
+
+      if (peerIndexExist !== -1) {
+        state.producers[peerIndexExist] = action.payload;
+      }
+
       return { ...state, producers: [...state.producers, action.payload] };
+
     case RoomStateType.UPDATE_PEER:
       const newPeers = [...state.peers];
       const peerIndex = newPeers.findIndex(
@@ -66,10 +75,7 @@ const reducer = (state: RoomState, action: RoomStateAction): RoomState => {
       );
 
       if (!newPauseState.authPeer || !pauseProducer) return newPauseState;
-      console.log({
-        pauseProducer,
-        mediatype: pauseProducer?.appData.mediaType,
-      });
+
       if (pauseProducer?.appData.mediaType === MediaType.VIDEO) {
         newPauseState.authPeer.peerVideo = false;
       }