We don't need to keep memberStatusUpdate as a useRef

Author: patrickfeeney03

react-demo-app/src/components/Video/VideoElement.tsx

@@ -27,8 +27,7 @@ export default function VideoElement({ videoRef, userId }: {
         .find(p => p.userId === session?.fromUserId);
       return localUser?.videoMuted && !localUser?.sharingScreen;
     } else {
-      // const participantIdOnScreen = activeVideoConv?.activeParticipants?.[0];
-      const participantIdOnScreen = activeVideoConv?.participantsUpdate?.activeParticipants?.[0]?.userId;
+      const participantIdOnScreen = activeVideoConv?.activeParticipant;
       const participant = activeVideoConv?.participantsUpdate?.activeParticipants
         .find(p => p.userId === participantIdOnScreen);
       return participant?.videoMuted && !participant?.sharingScreen;

react-demo-app/src/components/Video/VideoElements.tsx

@@ -54,8 +54,7 @@ export default function VideoElements({
   }, [activeVideoConv?.inboundStream, activeVideoConv?.outboundStream, activeVideoConv?.screenOutboundStream,
     localParticipant?.sharingScreen, videoRef, vanityVideoRef]);
 
-  // const participantIdOnScreen = activeVideoConv?.activeParticipants?.[0];
-  const participantIdOnScreen = activeVideoConv?.participantsUpdate?.activeParticipants?.[0]?.userId;
+  const participantIdOnScreen = activeVideoConv?.activeParticipant
 
   const userId = (id: string | undefined) => {
     if (!id) return;

react-demo-app/src/features/videoConversationsSlice.ts

@@ -10,8 +10,8 @@ export interface IActiveVideoConversationsState { // rename this to remove the '
   inboundStream?: MediaStream;
   outboundStream?: MediaStream;
   screenOutboundStream?: MediaStream;
-  activeParticipants?: string[];
-  usersTalking?: { [userId: string]: boolean };
+  activeParticipant?: string;
+  usersTalking?: {[userId: string]: boolean};
 }
 
 export interface IVideoConversationsState {
@@ -100,7 +100,7 @@ export const videoConversationsSlice = createSlice({
     setActiveParticipants: (state, action) => {
       const conv = findConvInState(state, action.payload.conversationId);
       if (conv) {
-        // conv.activeParticipants = action.payload.activeParticipants;
+        conv.activeParticipant = action.payload.activeParticipant;
       }
     },
     setUsersTalking: (state, action) => {

react-demo-app/src/hooks/useSdk.ts

@@ -23,7 +23,6 @@ import {
   setActiveParticipants, setUsersTalking,
   updateConversationMediaStreams
 } from "../features/videoConversationsSlice.ts";
-import { useRef } from "react";
 
 interface IAuthData {
   token: string;
@@ -39,8 +38,6 @@ export default function useSdk() {
   let webrtcSdk: GenesysCloudWebrtcSdk;
   const dispatch = useDispatch<AppDispatch>();
 
-  // const memberStatusUpdateRef = useRef<{ memberStatusMessage: MemberStatusMessage }>();
-
   const sdk: GenesysCloudWebrtcSdk = useSelector((state: RootState) => state.sdk.sdk);
 
   async function initWebrtcSDK(authData: IAuthData) {
@@ -137,21 +134,20 @@ export default function useSdk() {
   }
 
   const updateMemberStatus = (memberStatusMessage: MemberStatusMessage, convId: string) => {
-    // const lastUpdateParams = memberStatusUpdateRef.current?.memberStatusMessage?.params || {};
-    // const mergedUpdateParams = { ...lastUpdateParams, ...memberStatusMessage.params }
-    // const mergedUpdate = { ...memberStatusMessage, params: mergedUpdateParams }
-    //
-    // if (memberStatusMessage?.params?.incomingStreams) {
-    //   const userIds = memberStatusMessage.params.incomingStreams.map(stream => {
-    //     const appId = stream.appId || stream.appid;
-    //     return appId?.sourceUserId
-    //   });
-    //   dispatch(setActiveParticipants({
-    //     conversationId: convId,
-    //     activeParticipants: userIds
-    //   }));
-    // }
-
+    // Detect which remote user is shown
+    if (memberStatusMessage?.params?.incomingStreams) {
+      const userIds = memberStatusMessage.params.incomingStreams.map(stream => {
+        const appId = stream.appId || stream.appid;
+        return appId?.sourceUserId
+      });
+      // We don't show more than one remote stream at a time
+      const userId = userIds[0]
+      dispatch(setActiveParticipants({
+        conversationId: convId,
+        activeParticipant: userId
+      }));
+    }
+    // Detect if the user that is shown is 'speaking'
     if (memberStatusMessage?.params?.speakers) {
       const usersTalking = memberStatusMessage.params.speakers.reduce((acc, current) => {
         return { ...acc, [current.appId.sourceUserId]: current.activity === 'speaking' }
@@ -161,10 +157,6 @@ export default function useSdk() {
         usersTalking
       }));
     }
-
-    // memberStatusUpdateRef.current = {
-    //   memberStatusMessage: mergedUpdate
-    // };
   }
 
   const setupSessionListeners = (session: IExtendedMediaSession) => {