Merge branch 'main' into domessin/entraid-auth

Author: Sharif Rahaman

Project/package-lock.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@azure/communication-calling": "1.35.1-beta.1",
+    "@azure/communication-calling": "1.37.1-beta.1",
     "@azure/communication-calling-effects": "1.1.1-beta.1",
     "@azure/communication-common": "^2.4.0",
     "@azure/communication-identity": "^1.3.0",

Project/package.json

@@ -86,12 +86,6 @@ export default class MakeCall extends React.Component {
             identityMri: undefined
         };
 
-        setInterval(() => {
-            if (this.state.ufdMessages.length > 0) {
-                this.setState({ ufdMessages: this.state.ufdMessages.slice(1) });
-            }
-        }, 10000);
-
         // override logger to be able to dowload logs locally
         AzureLogger.log = (...args) => {
             this.logBuffer.push(...args);
@@ -168,36 +162,35 @@ export default class MakeCall extends React.Component {
                     e.added.forEach(call => {
                         this.setState({ call: call });
 
+                        const addToUfdMessages = (msg) => {
+                            const messageObj = { msg };
+                            this.setState(prevState => ({
+                                ufdMessages: [messageObj, ...prevState.ufdMessages]
+                            }));
+                            setTimeout(() => {
+                                this.setState(prevState => ({
+                                    ufdMessages: prevState.ufdMessages.filter(m => m !== messageObj)
+                                }));
+                            }, 15000);
+                        };
+
                         const diagnosticChangedListener = (diagnosticInfo) => {
-                                const rmsg = `UFD Diagnostic changed:
+                                const msg = `UFD Diagnostic changed:
                                 Diagnostic: ${diagnosticInfo.diagnostic}
                                 Value: ${diagnosticInfo.value}
                                 Value type: ${diagnosticInfo.valueType}`;
-                                if (this.state.ufdMessages.length > 0) {
-                                    // limit speakingWhileMicrophoneIsMuted diagnostic until another diagnostic is received
-                                    if (diagnosticInfo.diagnostic === 'speakingWhileMicrophoneIsMuted' && this.state.ufdMessages[0].includes('speakingWhileMicrophoneIsMuted')) {
-                                        console.info(rmsg);
-                                        return;
-                                    }
-                                    this.setState({ ufdMessages: [rmsg, ...this.state.ufdMessages] });
-                                } else {
-                                    this.setState({ ufdMessages: [rmsg] });
-                                }
+                                addToUfdMessages(msg);
                         };
 
                         const remoteDiagnosticChangedListener = (diagnosticArgs) => {
                             diagnosticArgs.diagnostics.forEach(diagnosticInfo => {
-                                const rmsg = `UFD Diagnostic changed:
+                                const msg = `UFD Diagnostic changed:
                                 Diagnostic: ${diagnosticInfo.diagnostic}
                                 Value: ${diagnosticInfo.value}
                                 Value type: ${diagnosticInfo.valueType}
                                 Participant Id: ${diagnosticInfo.participantId}
                                 Participant name: ${diagnosticInfo.remoteParticipant?.displayName}`;
-                                if (this.state.ufdMessages.length > 0) {
-                                    this.setState({ ufdMessages: [rmsg, ...this.state.ufdMessages] });
-                                } else {
-                                    this.setState({ ufdMessages: [rmsg] });
-                                }
+                               addToUfdMessages(msg);
                             });
                         };
 
@@ -990,7 +983,7 @@ this.callAgent.on('incomingCall', async (args) => {
                                 isMultiline={true}
                                 onDismiss={() => { this.setState({ ufdMessages: [] }) }}
                                 dismissButtonAriaLabel="Close">
-                                {this.state.ufdMessages.map((msg, index) => <li key={index}>{msg}</li>)}
+                                {this.state.ufdMessages.map((msg, index) => <li key={index}>{msg.msg}</li>)}
                             </MessageBar>
                         }
                         {