@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
34 lines • 2.54 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { MicrophoneButton } from "../../../../../../react-components/src";
import { _HighContrastAwareIcon } from "../../../../../../react-components/src";
import React, { useMemo } from 'react';
import { usePropsFor } from '../../hooks/usePropsFor';
import { useSelector } from '../../hooks/useSelector';
import { getCallStatus, getCapabilites, getIsRoomsCall, getLocalMicrophoneEnabled, getRole } from '../../selectors/baseSelectors';
import { concatButtonBaseStyles } from '../../styles/Buttons.styles';
/**
* @private
*/
export const Microphone = (props) => {
var _a;
const microphoneButtonProps = usePropsFor(MicrophoneButton);
const callStatus = useSelector(getCallStatus);
const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);
const isRoomsCall = useSelector(getIsRoomsCall);
const role = useSelector(getRole);
const unmuteMicCapability = (_a = useSelector(getCapabilites)) === null || _a === void 0 ? void 0 : _a.unmuteMic;
/**
* When call is in connecting state, microphone button should be disabled.
* This is due to to headless limitation where a call can not be muted/unmuted in lobby.
*/
if (callStatus === 'Connecting') {
// Lobby page should show the microphone status that was set on the local preview/configuration
// page until the user successfully joins the call.
microphoneButtonProps.checked = isLocalMicrophoneEnabled;
}
const styles = useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
// tab focus on MicrophoneButton on page load
return React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { isDeepNoiseSuppressionOn: props.isDeepNoiseSuppressionOn, onClickNoiseSuppression: props.onClickNoiseSuppression, showNoiseSuppressionButton: props.showNoiseSuppressionButton, showLabel: props.displayType !== 'compact', disableTooltip: props.disableTooltip, styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled || !!(isRoomsCall && role === 'Unknown'), onRenderOffIcon: unmuteMicCapability && !unmuteMicCapability.isPresent ? () => React.createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonMicProhibited' }) : undefined }));
};
//# sourceMappingURL=Microphone.js.map