diff --git a/css/_audio-preview.scss b/css/_audio-preview.scss index 5be14b2e0c..221fe74791 100644 --- a/css/_audio-preview.scss +++ b/css/_audio-preview.scss @@ -121,9 +121,18 @@ } } - .audio-preview-entry-text { - max-width: 178px; + &--nometer { + .audio-preview-entry-text { + max-width: 238px; + } } + + &--withmeter { + .audio-preview-entry-text { + max-width: 178px; + } + } + } &-icon { diff --git a/react/features/base/config/functions.web.js b/react/features/base/config/functions.web.js index f78d9c37a3..07d7ba1032 100644 --- a/react/features/base/config/functions.web.js +++ b/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; +} diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.js b/react/features/settings/components/web/audio/AudioSettingsContent.js index c066e84cb5..4269037ff4 100644 --- a/react/features/settings/components/web/audio/AudioSettingsContent.js +++ b/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 { key = { `me-${index}` } length = { length } listHeaderId = { this.microphoneHeaderId } + measureAudioLevels = { this.props.measureAudioLevels } onClick = { this._onMicrophoneEntryClick }> {label} diff --git a/react/features/settings/components/web/audio/AudioSettingsPopup.js b/react/features/settings/components/web/audio/AudioSettingsPopup.js index 592bf8be9b..f0101aedf4 100644 --- a/react/features/settings/components/web/audio/AudioSettingsPopup.js +++ b/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 (
@@ -67,6 +69,7 @@ function AudioSettingsPopup({ content = { { * @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 { * @inheritdoc */ render() { - - const { deviceId, children, hasError, index, isSelected, length, jitsiTrack, listHeaderId } = this.props; + const { + 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 (
  • { labelId = { deviceTextId }> {children} - { Boolean(jitsiTrack) &&