fix(toolbox) hide volume meter when audio levels are disabled

css/_audio-preview.scss

@@ -121,9 +121,18 @@
             }
         }
 
-        .audio-preview-entry-text {
+        &--nometer {
-            max-width: 178px;
+            .audio-preview-entry-text {
+                max-width: 238px;
+            }
         }
+
+        &--withmeter {
+            .audio-preview-entry-text {
+                max-width: 178px;
+            }
+        }
+
     }
 
     &-icon {

react/features/base/config/functions.web.js

@@ -68,3 +68,14 @@ export function isToolbarButtonEnabled(buttonName: string, state: Object | Array
 
     return buttons.includes(buttonName);
 }
+
+/**
+ * Returns whether audio level measurement is enabled or not.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {boolean}
+ */
+export function areAudioLevelsEnabled(state: Object): boolean {
+    // Default to false for React Native as audio levels are of no interest to the mobile app.
+    return navigator.product !== 'ReactNative' && !state['features/base/config'].disableAudioLevels;
+}

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -40,6 +40,11 @@ export type Props = {
     */
     currentOutputDeviceId: string,
 
+    /**
+    * Used to decide whether to measure audio levels for microphone devices.
+    */
+    measureAudioLevels: boolean,
+
    /**
     * Used to set a new microphone as the current one.
     */
@@ -179,6 +184,7 @@ class AudioSettingsContent extends Component<Props, State> {
                 key = { `me-${index}` }
                 length = { length }
                 listHeaderId = { this.microphoneHeaderId }
+                measureAudioLevels = { this.props.measureAudioLevels }
                 onClick = { this._onMicrophoneEntryClick }>
                 {label}
             </MicrophoneEntry>

react/features/settings/components/web/audio/AudioSettingsPopup.js

@@ -3,6 +3,7 @@
 import InlineDialog from '@atlaskit/inline-dialog';
 import React from 'react';
 
+import { areAudioLevelsEnabled } from '../../../../base/config/functions';
 import {
     getAudioInputDeviceData,
     getAudioOutputDeviceData,
@@ -59,7 +60,8 @@ function AudioSettingsPopup({
     setAudioOutputDevice,
     onClose,
     outputDevices,
-    popupPlacement
+    popupPlacement,
+    measureAudioLevels
 }: Props) {
     return (
         <div className = 'audio-preview'>
@@ -67,6 +69,7 @@ function AudioSettingsPopup({
                 content = { <AudioSettingsContent
                     currentMicDeviceId = { currentMicDeviceId }
                     currentOutputDeviceId = { currentOutputDeviceId }
+                    measureAudioLevels = { measureAudioLevels }
                     microphoneDevices = { microphoneDevices }
                     outputDevices = { outputDevices }
                     setAudioInputDevice = { setAudioInputDevice }
@@ -95,7 +98,8 @@ function mapStateToProps(state) {
         currentOutputDeviceId: getCurrentOutputDeviceId(state),
         isOpen: getAudioSettingsVisibility(state),
         microphoneDevices: getAudioInputDeviceData(state),
-        outputDevices: getAudioOutputDeviceData(state)
+        outputDevices: getAudioOutputDeviceData(state),
+        measureAudioLevels: areAudioLevelsEnabled(state)
     };
 }
 

react/features/settings/components/web/audio/MicrophoneEntry.js

@@ -41,7 +41,12 @@ type Props = AudioSettingsEntryProps & {
      * Click handler for component.
      */
     onClick: Function,
-    listHeaderId: string
+    listHeaderId: string,
+
+    /**
+    * Used to decide whether to listen to audio level changes.
+    */
+    measureAudioLevels: boolean,
 }
 
 type State = {
@@ -129,9 +134,9 @@ export default class MicrophoneEntry extends Component<Props, State> {
      * @returns {void}
      */
     _startListening() {
-        const { jitsiTrack } = this.props;
+        const { jitsiTrack, measureAudioLevels } = this.props;
 
-        jitsiTrack && jitsiTrack.on(
+        jitsiTrack && measureAudioLevels && jitsiTrack.on(
             JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED,
             this._updateLevel);
     }
@@ -185,20 +190,32 @@ export default class MicrophoneEntry extends Component<Props, State> {
      * @inheritdoc
      */
     render() {
-
+        const {
-        const { deviceId, children, hasError, index, isSelected, length, jitsiTrack, listHeaderId } = this.props;
+            deviceId,
+            children,
+            hasError,
+            index,
+            isSelected,
+            length,
+            jitsiTrack,
+            listHeaderId,
+            measureAudioLevels
+        } = this.props;
 
         const deviceTextId: string = `choose_microphone${deviceId}`;
 
         const labelledby: string = `${listHeaderId} ${deviceTextId} `;
 
+        const className = `audio-preview-microphone ${measureAudioLevels
+            ? 'audio-preview-microphone--withmeter' : 'audio-preview-microphone--nometer'}`;
+
         return (
             <li
                 aria-checked = { isSelected }
                 aria-labelledby = { labelledby }
                 aria-posinset = { index }
                 aria-setsize = { length }
-                className = 'audio-preview-microphone'
+                className = { className }
                 onClick = { this._onClick }
                 onKeyPress = { this._onKeyPress }
                 role = 'radio'
@@ -209,7 +226,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
                     labelId = { deviceTextId }>
                     {children}
                 </AudioSettingsEntry>
-                { Boolean(jitsiTrack) && <Meter
+                { Boolean(jitsiTrack) && measureAudioLevels && <Meter
                     className = 'audio-preview-meter-mic'
                     isDisabled = { hasError }
                     level = { this.state.level } />