@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
35 lines • 2.47 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DevicesButton } from "../../../../../../react-components/src";
import React, { useMemo } from 'react';
import { usePropsFor } from '../../hooks/usePropsFor';
import { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';
import { useLocale } from '../../../localization';
import { _HighContrastAwareIcon } from "../../../../../../react-components/src";
import { useSelector } from '../../hooks/useSelector';
import { getRole } from '../../selectors/baseSelectors';
/** @private */
export const Devices = (props) => {
var _a;
const devicesButtonProps = usePropsFor(DevicesButton);
const role = (_a = useSelector(getRole)) !== null && _a !== void 0 ? _a : 'Unknown';
const augmentedDeviceButtonProps = useMemo(() => (Object.assign(Object.assign({}, devicesButtonProps), { microphones: role === 'Consumer' ? [] : devicesButtonProps.microphones, cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras })), [devicesButtonProps, role]);
const styles = useMemo(() => { var _a; return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.increaseFlyoutItemSize, props.styles]);
const locale = useLocale();
const onlyManageSpeakers = role === 'Consumer';
const onRenderDevicesIcon = () => {
return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "OptionsSpeaker" });
};
return React.createElement(DevicesButton
/* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ , Object.assign({
/* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ persistMenu: true }, augmentedDeviceButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled, strings: getLabelFromRole(role, locale), onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined }));
};
const getLabelFromRole = (role, locale) => {
if (role === 'Consumer') {
return {
label: locale.component.strings.microphoneButton.speakerMenuTitle
};
}
return undefined;
};
//# sourceMappingURL=Devices.js.map