communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
119 lines • 7.54 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useState, useCallback } from 'react';
import { useLocale } from '../localization';
import { ControlBarButton } from './ControlBarButton';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
import { ContextualMenuItemType, Toggle, Stack } from '@fluentui/react';
import { generateDefaultDeviceMenuProps } from './DevicesButton';
import { Announcer } from './Announcer';
/**
* A button to turn microphone on / off.
*
* Can be used with {@link ControlBar}.
*
* @public
*/
export const MicrophoneButton = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
const { onToggleMicrophone } = props;
const localeStrings = useLocale().strings.microphoneButton;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const [announcerString, setAnnouncerString] = useState(undefined);
const [announcerPresent, setAnnouncerPresent] = useState(false);
const isSplit = (_a = props.split) !== null && _a !== void 0 ? _a : props.enableDeviceSelectionMenu;
// The button should be disabled when there are no mics. However if the button is a split button, if there are
// no mics but there are speakers, then only the primary part of the button should be disabled to allow for
// speaker change.
const primaryDisabled = props.primaryDisabled || (isSplit && !((_b = props.microphones) === null || _b === void 0 ? void 0 : _b.length) ? true : undefined);
const disabled = props.disabled ||
(isSplit && !((_c = props.microphones) === null || _c === void 0 ? void 0 : _c.length) && !((_d = props.speakers) === null || _d === void 0 ? void 0 : _d.length)) ||
(!isSplit && props.microphones && ((_e = props.microphones) === null || _e === void 0 ? void 0 : _e.length) === 0);
const onRenderMicOnIcon = () => {
return React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
};
const onRenderMicOffIcon = () => {
return React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOff" });
};
const isMicOn = props.checked;
const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;
const toggleAnnouncerString = useCallback((isMicOn) => {
setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
}, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
const onToggleClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
if (onToggleMicrophone) {
try {
yield onToggleMicrophone();
// allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.
toggleAnnouncerString(!isMicOn);
// eslint-disable-next-line no-empty
}
finally {
}
}
}), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
const deepNoiseSuppressionToggleStyles = {
root: {
margin: '4px',
padding: '0px 12px',
flexFlow: 'row-reverse',
justifyContent: 'space-between'
},
label: { fontWeight: 400 }
};
const splitButtonMenuItems = [];
if (props.showNoiseSuppressionButton) {
splitButtonMenuItems.push({
key: 'microphoneDNSToggle',
onRender: () => {
return (React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
var _a;
yield ((_a = props.onClickNoiseSuppression) === null || _a === void 0 ? void 0 : _a.call(props));
setAnnouncerString(props.isDeepNoiseSuppressionOn
? strings.deepNoiseSuppressionOnAnnouncement
: strings.deepNoiseSuppressionOffAnnouncement);
}) },
React.createElement(Toggle, { label: strings.deepNoiseSuppressionTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
}
});
}
splitButtonMenuItems.push({
key: 'microphonePrimaryAction',
text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,
onClick: () => {
onToggleClick();
},
iconProps: {
iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
styles: { root: { lineHeight: 0 } }
}
});
/**
* We need to also include the primary action of the button to the
* split button for mobile devices.
*/
const splitButtonPrimaryAction = {
key: 'primaryAction',
title: 'toggle mic',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
items: splitButtonMenuItems
}
};
return (React.createElement(React.Fragment, null,
announcerPresent && React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_f = props.onRenderOnIcon) !== null && _f !== void 0 ? _f : onRenderMicOnIcon, onRenderOffIcon: (_g = props.onRenderOffIcon) !== null && _g !== void 0 ? _g : onRenderMicOffIcon, strings: strings, labelKey: (_h = props.labelKey) !== null && _h !== void 0 ? _h : 'microphoneButtonLabel', menuProps: (_j = props.menuProps) !== null && _j !== void 0 ? _j : (props.enableDeviceSelectionMenu
? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_k = props.styles) === null || _k === void 0 ? void 0 : _k.menuStyles }), strings, splitButtonPrimaryAction)
: undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, "aria-description": strings.microphoneAriaDescription, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled, onFocus: () => setAnnouncerPresent(true), onBlur: () => setAnnouncerPresent(false) }))));
};
//# sourceMappingURL=MicrophoneButton.js.map