Address PR comments

Author: patrickfeeney03

react-demo-app/src/components/ActiveConversationsTable.tsx

@@ -17,8 +17,8 @@ export default function ActiveConversationsTable() {
 
   useEffect(() => {
     if (conversations.length) {
-      setHoldLabels(conversations.map((convo) => convo?.mostRecentCallState!.held ? 'Unhold' : 'Hold'));
-      setMuteLabels(conversations.map((convo) => convo.mostRecentCallState!.muted ? 'Unmute' : 'Mute'));
+      setHoldLabels(conversations.map((convo) => convo.mostRecentCallState?.held ? 'Unhold' : 'Hold'));
+      setMuteLabels(conversations.map((convo) => convo.mostRecentCallState?.muted ? 'Unmute' : 'Mute'));
     }
   }, [conversations]);
 

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

@@ -55,7 +55,7 @@ export default function ActiveVideoConversationsTable() {
     dispatch(setCurrentlyDisplayedConversation({ conversationId }));
   };
 
-  const isLocalPartSharingScreen: boolean[] =
+  const isLocalParticipantScreensharing: boolean[] =
     videoConversations.map(vc => {
       const localPart = vc.participantsUpdate?.activeParticipants
         ?.find(p => p.userId === getSession(vc.conversationId).fromUserId);
@@ -64,7 +64,7 @@ export default function ActiveVideoConversationsTable() {
 
   function handleScreenShare(index: number) {
     const session = getSession(videoConversations[index].conversationId);
-    if (isLocalPartSharingScreen[index]) {
+    if (isLocalParticipantScreensharing[index]) {
       stopScreenShare(session);
     } else {
       startScreenShare(session);
@@ -95,7 +95,7 @@ export default function ActiveVideoConversationsTable() {
   const screenShareButton = (index: number) => {
     return (
       <GuxButton onClick={() => handleScreenShare(index)}>
-        {isLocalPartSharingScreen[index] ? 'Stop' : 'Start'}
+        {isLocalParticipantScreensharing[index] ? 'Stop' : 'Start'}
       </GuxButton>
     );
   }
@@ -112,7 +112,7 @@ export default function ActiveVideoConversationsTable() {
 
   const videoMuteButton = (index: number) => {
     return (
-      <GuxButton onClick={() => handleVideoMuteToggle(index)} disabled={isLocalPartSharingScreen[index]}>
+      <GuxButton onClick={() => handleVideoMuteToggle(index)} disabled={isLocalParticipantScreensharing[index]}>
         {videoConversations?.[index].loadingVideo ?
           <GuxRadialLoading context='input' screenreaderText='Loading...'></GuxRadialLoading> :
           getParticipantUsingDemoApp(index)?.videoMuted ? 'Unmute' : 'Mute'}

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

@@ -47,14 +47,14 @@ export default function Video() {
               type="submit"
               onClick={() => startConv(startVideoConference)}
             >
-              Join with roomJid
+              Join with Room JID
             </GuxButton>
             <GuxButton
               accent="primary"
               className="video-call-btn"
               onClick={() => startConv(startVideoMeeting)}
             >
-              Join with conferenceId
+              Join with Conference ID
             </GuxButton>
           </div>
         </Card>

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

@@ -10,10 +10,10 @@ import VideoElement from "./VideoElement.tsx";
 import useSdk from "../../hooks/useSdk.ts";
 
 export default function VideoElements({
-                                        audioRef,
-                                        videoRef,
-                                        vanityVideoRef,
-                                      }: {
+  audioRef,
+  videoRef,
+  vanityVideoRef,
+}: {
   audioRef: RefObject<HTMLAudioElement>,
   videoRef: RefObject<HTMLVideoElement>,
   vanityVideoRef: RefObject<HTMLVideoElement>,

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

@@ -46,7 +46,7 @@ export const toggleAudioMute = createAsyncThunk(
   }
 );
 
-function findConvInState(state: Draft<IVideoConversationsState>, convId: string) {
+function findConversationInState(state: Draft<IVideoConversationsState>, convId: string) {
   const conversations = state.activeVideoConversations;
   const conversation = conversations.find((conv) => conv.conversationId === convId);
   return conversation;
@@ -62,7 +62,7 @@ export const videoConversationsSlice = createSlice({
       state.currentlyDisplayedConversationId = action.payload.conversationId;
     },
     addParticipantUpdateToVideoConversation: (state, action) => {
-      const conv = findConvInState(state, action.payload.conversationId);
+      const conv = findConversationInState(state, action.payload.conversationId);
       if (conv) {
         conv.participantsUpdate = action.payload;
       }
@@ -84,7 +84,7 @@ export const videoConversationsSlice = createSlice({
       state.currentlyDisplayedConversationId = action.payload.conversationId;
     },
     updateConversationMediaStreams: (state, action) => {
-      const conv = findConvInState(state, action.payload.conversationId);
+      const conv = findConversationInState(state, action.payload.conversationId);
       if (conv) {
         if (action.payload.inboundStream !== undefined) {
           conv.inboundStream = action.payload.inboundStream;
@@ -98,13 +98,13 @@ export const videoConversationsSlice = createSlice({
       }
     },
     setActiveParticipants: (state, action) => {
-      const conv = findConvInState(state, action.payload.conversationId);
+      const conv = findConversationInState(state, action.payload.conversationId);
       if (conv) {
         conv.activeParticipant = action.payload.activeParticipant;
       }
     },
     setUsersTalking: (state, action) => {
-      const conv = findConvInState(state, action.payload.conversationId);
+      const conv = findConversationInState(state, action.payload.conversationId);
       if (conv) {
         conv.usersTalking = action.payload.usersTalking;
       }
@@ -113,13 +113,13 @@ export const videoConversationsSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(toggleVideoMute.pending, (state, action) => {
-        const conv = findConvInState(state, action.meta.arg.conversationId);
+        const conv = findConversationInState(state, action.meta.arg.conversationId);
         if (conv) {
           conv.loadingVideo = true;
         }
       })
       .addCase(toggleVideoMute.fulfilled, (state, action) => {
-        const conv = findConvInState(state, action.meta.arg.conversationId);
+        const conv = findConversationInState(state, action.meta.arg.conversationId);
         if (conv) {
           conv.loadingVideo = false;
           const participant = conv.participantsUpdate?.activeParticipants.find(p => p.userId === action.meta.arg.userId);
@@ -129,13 +129,13 @@ export const videoConversationsSlice = createSlice({
         }
       })
       .addCase(toggleAudioMute.pending, (state, action) => {
-        const conv = findConvInState(state, action.meta.arg.conversationId);
+        const conv = findConversationInState(state, action.meta.arg.conversationId);
         if (conv) {
           conv.loadingAudio = true;
         }
       })
       .addCase(toggleAudioMute.fulfilled, (state, action) => {
-        const conv = findConvInState(state, action.meta.arg.conversationId);
+        const conv = findConversationInState(state, action.meta.arg.conversationId);
         if (conv) {
           conv.loadingAudio = false;
           const participant = conv.participantsUpdate?.activeParticipants.find(p => p.userId === action.meta.arg.userId);