From 6b020cfad2df40e76dd98efbcb042d0e3caed987 Mon Sep 17 00:00:00 2001
From: Sharif Rahaman <srahaman@microsoft.com>
Date: Fri, 21 Jun 2024 11:14:44 -0700
Subject: [PATCH] Audio effects UI fix

---
 .../AudioEffects/AudioEffectsContainer.js     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/Project/src/MakeCall/AudioEffects/AudioEffectsContainer.js b/Project/src/MakeCall/AudioEffects/AudioEffectsContainer.js
index 0bf09f8..e2cb87e 100644
--- a/Project/src/MakeCall/AudioEffects/AudioEffectsContainer.js
+++ b/Project/src/MakeCall/AudioEffects/AudioEffectsContainer.js
@@ -40,6 +40,11 @@ export default class AudioEffectsContainer extends React.Component {
                 stopLoading: false,
                 noiseSuppressionList: [],
                 currentSelected: undefined
+            },
+            activeEffects: {
+                autoGainControl: [],
+                echoCancellation: [],
+                noiseSuppression: []
             }
         };
 
@@ -92,14 +97,26 @@ export default class AudioEffectsContainer extends React.Component {
         });
 
         this.localAudioStreamFeatureApi.on('effectsStarted', (effect) => {
+            this.updateActiveEffects();
             console.log(`Audio effects started: ${JSON.stringify(effect?.name ?? effect)}`);
         });
 
         this.localAudioStreamFeatureApi.on('effectsStopped', (effect) => {
+            this.updateActiveEffects();
             console.log(`Audio effects stopped: ${JSON.stringify(effect?.name ?? effect)}`);
         });
     }
 
+    updateActiveEffects() {
+        this.setState({
+            activeEffects: {
+                autoGainControl: this.localAudioStreamFeatureApi?.activeEffects?.autoGainControl,
+                echoCancellation: this.localAudioStreamFeatureApi?.activeEffects?.echoCancellation,
+                noiseSuppression: this.localAudioStreamFeatureApi?.activeEffects?.noiseSuppression
+            }
+        });
+    }
+
     async populateAudioEffects() {
         const supported = [];
 
@@ -164,6 +181,11 @@ export default class AudioEffectsContainer extends React.Component {
                 noiseSuppression: {
                     ...this.state.noiseSuppression,
                     noiseSuppressionList
+                },
+                activeEffects: {
+                    autoGainControl: this.localAudioStreamFeatureApi?.activeEffects?.autoGainControl,
+                    echoCancellation: this.localAudioStreamFeatureApi?.activeEffects?.echoCancellation,
+                    noiseSuppression: this.localAudioStreamFeatureApi?.activeEffects?.noiseSuppression
                 }
             });
         }
@@ -366,19 +388,19 @@ export default class AudioEffectsContainer extends React.Component {
                             </div>
                         </div>
                         <div className='ms-Grid-row' style={{ marginBottom: '1rem' }}>
-                            {this.localAudioStreamFeatureApi?.activeEffects?.autoGainControl?.length > 0 &&
+                            {this.state.activeEffects.autoGainControl?.length > 0 &&
                             <div className='ms-Grid-col ms-sm4 ms-md4 ms-lg4'>
-                                {this.localAudioStreamFeatureApi.activeEffects.autoGainControl[0]}
+                                {this.state.activeEffects.autoGainControl[0]}
                             </div>
                             }
-                            {this.localAudioStreamFeatureApi?.activeEffects?.echoCancellation?.length > 0 &&
+                            {this.state.activeEffects.echoCancellation?.length > 0 &&
                             <div className='ms-Grid-col ms-sm4 ms-md4 ms-lg4'>
                                 {this.localAudioStreamFeatureApi.activeEffects.echoCancellation[0]}
                             </div>
                             }
-                            {this.localAudioStreamFeatureApi?.activeEffects?.noiseSuppression?.length > 0 &&
+                            {this.state.activeEffects.noiseSuppression?.length > 0 &&
                             <div className='ms-Grid-col ms-sm4 ms-md4 ms-lg4'>
-                                {this.localAudioStreamFeatureApi.activeEffects.noiseSuppression[0]}
+                                {this.state.activeEffects.noiseSuppression[0]}
                             </div>
                             }
                         </div>