jiti-meet/react/features/toolbox/components/web/AudioSettingsButton.js

100 lines
2.6 KiB
JavaScript
Raw Normal View History

// @flow
import React, { Component } from 'react';
import { isMobileBrowser } from '../../../base/environment/utils';
2021-02-23 11:09:22 +00:00
import { translate } from '../../../base/i18n';
import { IconArrowUp } from '../../../base/icons';
import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
import { connect } from '../../../base/redux';
2020-07-24 12:14:33 +00:00
import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
import { AudioSettingsPopup, toggleAudioSettings } from '../../../settings';
2020-05-20 10:57:03 +00:00
import { isAudioSettingsButtonDisabled } from '../../functions';
import AudioMuteButton from '../AudioMuteButton';
type Props = {
/**
* Indicates whether audio permissions have been granted or denied.
*/
hasPermissions: boolean,
/**
* Click handler for the small icon. Opens audio options.
*/
onAudioOptionsClick: Function,
/**
2020-04-16 10:47:10 +00:00
* If the button should be disabled.
*/
2020-04-16 10:47:10 +00:00
isDisabled: boolean,
2021-02-23 11:09:22 +00:00
/**
* Used for translation.
*/
t: Function,
/**
* Flag controlling the visibility of the button.
* AudioSettings popup is disabled on mobile browsers.
*/
visible: boolean
};
/**
* Button used for audio & audio settings.
*
* @returns {ReactElement}
*/
class AudioSettingsButton extends Component<Props> {
2020-04-16 10:47:10 +00:00
/**
* Implements React's {@link Component#render}.
*
* @inheritdoc
*/
render() {
2021-02-23 11:09:22 +00:00
const { hasPermissions, isDisabled, onAudioOptionsClick, t, visible } = this.props;
const settingsDisabled = !hasPermissions
|| isDisabled
|| !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
return visible ? (
<AudioSettingsPopup>
<ToolboxButtonWithIcon
icon = { IconArrowUp }
iconDisabled = { settingsDisabled }
2021-02-23 11:09:22 +00:00
iconTooltip = { t('toolbar.audioSettings') }
onIconClick = { onAudioOptionsClick }>
<AudioMuteButton />
</ToolboxButtonWithIcon>
</AudioSettingsPopup>
) : <AudioMuteButton />;
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @returns {Object}
*/
function mapStateToProps(state) {
const { permissions = {} } = state['features/base/devices'];
return {
hasPermissions: permissions.audio,
2020-04-16 10:47:10 +00:00
isDisabled: isAudioSettingsButtonDisabled(state),
visible: !isMobileBrowser()
};
}
const mapDispatchToProps = {
onAudioOptionsClick: toggleAudioSettings
};
2021-02-23 11:09:22 +00:00
export default translate(connect(
mapStateToProps,
mapDispatchToProps,
2021-02-23 11:09:22 +00:00
)(AudioSettingsButton));