- Don't reassing if same values

- Rename interface.

Author: patrickfeeney03

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

@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { GuxButton, GuxRadialLoading, GuxTable } from "genesys-spark-components-react";
 import useSdk from "../../hooks/useSdk.ts";
 import {
-  IActiveVideoConversationsState, setCurrentlyDisplayedConversation,
+  IActiveVideoConversationState, setCurrentlyDisplayedConversation,
   toggleAudioMute,
   toggleVideoMute, updateConversationMediaStreams
 } from "../../features/videoConversationsSlice.ts";
@@ -13,7 +13,7 @@ import { VideoMediaSession } from "genesys-cloud-webrtc-sdk";
 import { AppDispatch, RootState } from "../../types/store.ts";
 
 export default function ActiveVideoConversationsTable() {
-  const videoConversations: IActiveVideoConversationsState[] = useSelector(
+  const videoConversations: IActiveVideoConversationState[] = useSelector(
     (state: RootState) => state.videoConversations.activeVideoConversations
   );
   const dispatch = useDispatch<AppDispatch>();
@@ -83,7 +83,7 @@ export default function ActiveVideoConversationsTable() {
     session.stopScreenShare && session.stopScreenShare();
   }
 
-  const selectConvButton = (convo: IActiveVideoConversationsState) => {
+  const selectConvButton = (convo: IActiveVideoConversationState) => {
     return (
       <GuxButton onClick={() => handleConversationSwitch(convo.conversationId)}
                  disabled={currentlyDisplayedConversationId === convo.conversationId}>
@@ -149,7 +149,7 @@ export default function ActiveVideoConversationsTable() {
           </tr>
           </thead>
           <tbody>
-          {videoConversations.map((convo: IActiveVideoConversationsState, index: number) => {
+          {videoConversations.map((convo: IActiveVideoConversationState, index: number) => {
             const session = getSession(convo.conversationId)
             return (
               <tr key={`${convo.conversationId}${session.id}`}>

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

@@ -30,14 +30,13 @@ video {
 }
 
 .video-call-card > .card-content > div > form {
-  margin: 0.3rem 0 1rem 0;
+  margin: 0.1rem 0 0.5rem 0;
   padding: 0;
   width: 100%;
 }
 
 .video-call-card > .card-content > div > form > input {
   margin: 0;
-  padding: 0;
   width: 100%;
   box-sizing: border-box;
 }

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

@@ -2,7 +2,7 @@ import { IParticipantsUpdate } from "genesys-cloud-webrtc-sdk";
 import { createAsyncThunk, createSlice, Draft } from "@reduxjs/toolkit";
 import { RootState } from "../types/store.ts";
 
-export interface IActiveVideoConversationsState { // rename this to remove the 's'?
+export interface IActiveVideoConversationState {
   conversationId: string;
   participantsUpdate?: IParticipantsUpdate;
   loadingVideo: boolean;
@@ -11,11 +11,11 @@ export interface IActiveVideoConversationsState { // rename this to remove the '
   outboundStream?: MediaStream;
   screenOutboundStream?: MediaStream;
   activeParticipant?: string;
-  usersTalking?: {[userId: string]: boolean};
+  usersTalking?: { [userId: string]: boolean };
 }
 
 export interface IVideoConversationsState {
-  activeVideoConversations: IActiveVideoConversationsState[];
+  activeVideoConversations: IActiveVideoConversationState[];
   currentlyDisplayedConversationId: string | null;
 }
 
@@ -108,7 +108,13 @@ export const videoConversationsSlice = createSlice({
     setUsersTalking: (state, action) => {
       const conv = findConversationInState(state, action.payload.conversationId);
       if (conv) {
-        conv.usersTalking = action.payload.usersTalking;
+        const usersTalkingObj = action.payload.usersTalking;
+        for (const userId in usersTalkingObj) {
+          if (conv.usersTalking && conv.usersTalking[userId] !== usersTalkingObj[userId]) {
+            conv.usersTalking = action.payload.usersTalking;
+            break;
+          }
+        }
       }
     }
   },