fix(noise-suppression): fix muted state, update icons (#11936)

react/features/base/icons/svg/index.ts

@@ -88,6 +88,8 @@ export { default as IconMuteEveryone } from './mute-everyone.svg';
 export { default as IconMuteEveryoneElse } from './mute-everyone-else.svg';
 export { default as IconMuteVideoEveryone } from './mute-video-everyone.svg';
 export { default as IconMuteVideoEveryoneElse } from './mute-video-everyone-else.svg';
+export { default as IconNoiseSuppressionOff } from './noise-suppression-off.svg';
+export { default as IconNoiseSuppressionOn } from './noise-suppression-on.svg';
 export { default as IconNotificationJoin } from './navigate_next.svg';
 export { default as IconOpenInNew } from './open_in_new.svg';
 export { default as IconOutlook } from './office365.svg';

react/features/base/icons/svg/noise-suppression-off.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.06204 5.25986C5.92029 5.40926 5.83333 5.61114 5.83333 5.83333V14.1667C5.83333 14.6269 6.20643 15 6.66667 15C7.1269 15 7.5 14.6269 7.5 14.1667V6.69782L6.06204 5.25986ZM9.16667 8.36449V16.6667C9.16667 17.1269 9.53976 17.5 10 17.5C10.4602 17.5 10.8333 17.1269 10.8333 16.6667V10.0312L9.16667 8.36449ZM13.3016 12.4994C12.8666 12.4831 12.5169 12.1334 12.5006 11.6984L13.3016 12.4994ZM14.1667 10.9688L12.5 9.30218V8.33333C12.5 7.8731 12.8731 7.5 13.3333 7.5C13.7936 7.5 14.1667 7.8731 14.1667 8.33333V10.9688ZM17.4905 14.2927L15.8333 12.6355V5.83333C15.8333 5.3731 16.2064 5 16.6667 5C17.1269 5 17.5 5.3731 17.5 5.83333V14.1667C17.5 14.2095 17.4968 14.2516 17.4905 14.2927ZM10.8333 7.63551L9.16667 5.96884V3.33333C9.16667 2.8731 9.53976 2.5 10 2.5C10.4602 2.5 10.8333 2.8731 10.8333 3.33333V7.63551ZM3.33333 7.5C2.8731 7.5 2.5 7.8731 2.5 8.33333V11.6667C2.5 12.1269 2.8731 12.5 3.33333 12.5C3.79357 12.5 4.16667 12.1269 4.16667 11.6667V8.33333C4.16667 7.8731 3.79357 7.5 3.33333 7.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.91469 1.91469C2.24546 1.58392 2.78183 1.58401 3.11271 1.91488L18.0851 16.8873C18.416 17.2182 18.4161 17.7545 18.0853 18.0853C17.7545 18.4161 17.2182 18.416 16.8873 18.0851L1.91488 3.11271C1.58401 2.78183 1.58392 2.24546 1.91469 1.91469Z" fill="white"/>
+</svg>

react/features/base/icons/svg/noise-suppression-on.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C9.53976 2.5 9.16667 2.8731 9.16667 3.33333V16.6667C9.16667 17.1269 9.53976 17.5 10 17.5C10.4602 17.5 10.8333 17.1269 10.8333 16.6667V3.33333C10.8333 2.8731 10.4602 2.5 10 2.5ZM6.66667 5C6.20643 5 5.83333 5.3731 5.83333 5.83333V14.1667C5.83333 14.6269 6.20643 15 6.66667 15C7.1269 15 7.5 14.6269 7.5 14.1667V5.83333C7.5 5.3731 7.1269 5 6.66667 5ZM2.5 8.33333C2.5 7.8731 2.8731 7.5 3.33333 7.5C3.79357 7.5 4.16667 7.8731 4.16667 8.33333V11.6667C4.16667 12.1269 3.79357 12.5 3.33333 12.5C2.8731 12.5 2.5 12.1269 2.5 11.6667V8.33333ZM12.5 8.33333C12.5 7.8731 12.8731 7.5 13.3333 7.5C13.7936 7.5 14.1667 7.8731 14.1667 8.33333V11.6667C14.1667 12.1269 13.7936 12.5 13.3333 12.5C12.8731 12.5 12.5 12.1269 12.5 11.6667V8.33333ZM15.8333 5.83333C15.8333 5.3731 16.2064 5 16.6667 5C17.1269 5 17.5 5.3731 17.5 5.83333V14.1667C17.5 14.6269 17.1269 15 16.6667 15C16.2064 15 15.8333 14.6269 15.8333 14.1667V5.83333Z" fill="white"/>
+</svg>

react/features/noise-suppression/components/NoiseSuppressionButton.tsx

@@ -3,8 +3,8 @@ import { IState } from '../../app/types';
 // @ts-ignore
 import { translate } from '../../base/i18n';
 import {
-    IconShareAudio,
-    IconStopAudioShare
+    IconNoiseSuppressionOn,
+    IconNoiseSuppressionOff
 } from '../../base/icons/svg/index';
 import { connect } from '../../base/redux/functions';
 import {
@@ -31,10 +31,10 @@ type Props = AbstractButtonProps & {
  */
 class NoiseSuppressionButton extends AbstractButton<Props, any, any> {
     accessibilityLabel = 'toolbar.accessibilityLabel.noiseSuppression';
-    icon = IconShareAudio;
+    icon = IconNoiseSuppressionOn;
     label = 'toolbar.noiseSuppression';
     tooltip = 'toolbar.noiseSuppression';
-    toggledIcon = IconStopAudioShare;
+    toggledIcon = IconNoiseSuppressionOff;
     toggledLabel = 'toolbar.disableNoiseSuppression';
 
     private props: Props;

react/features/stream-effects/noise-suppression/NoiseSuppressionEffect.ts

@@ -29,6 +29,16 @@ export class NoiseSuppressionEffect {
      */
     private _noiseSuppressorNode: AudioWorkletNode;
 
+    /**
+     * Audio track extracted from the original MediaStream to which the effect is applied.
+     */
+    private _originalMediaTrack: MediaStreamTrack;
+
+    /**
+     * Noise suppressed audio track extracted from the media destination node.
+     */
+    private _outputMediaTrack: MediaStreamTrack;
+
     /**
      * Effect interface called by source JitsiLocalTrack.
      * Applies effect that uses a {@code NoiseSuppressor} service initialized with {@code RnnoiseProcessor}
@@ -38,10 +48,11 @@ export class NoiseSuppressionEffect {
      * @returns {MediaStream} - MediaStream containing both audio tracks mixed together.
      */
     startEffect(audioStream: MediaStream) : MediaStream {
+        this._originalMediaTrack = audioStream.getAudioTracks()[0];
         this._audioContext = new AudioContext();
-
         this._audioSource = this._audioContext.createMediaStreamSource(audioStream);
         this._audioDestination = this._audioContext.createMediaStreamDestination();
+        this._outputMediaTrack = this._audioDestination.stream.getAudioTracks()[0];
 
         const baseUrl = `${getBaseUrl()}libs/`;
         const workletUrl = `${baseUrl}noise-suppressor-worklet.min.js`;
@@ -57,6 +68,13 @@ export class NoiseSuppressionEffect {
             logger.error('Error while adding audio worklet module: ', error);
         });
 
+        // Sync the effect track muted state with the original track state.
+        this._outputMediaTrack.enabled = this._originalMediaTrack.enabled;
+
+        // We enable the audio on the original track because mute/unmute action will only affect the audio destination
+        // output track from this point on.
+        this._originalMediaTrack.enabled = true;
+
         return this._audioDestination.stream;
     }
 
@@ -77,6 +95,9 @@ export class NoiseSuppressionEffect {
      * @returns {void}
      */
     stopEffect(): void {
+        // Sync original track muted state with effect state before removing the effect.
+        this._originalMediaTrack.enabled = this._outputMediaTrack.enabled;
+
         // Technically after this process the Audio Worklet along with it's resources should be garbage collected,
         // however on chrome there seems to be a problem as described here:
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1298955