communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
42 lines • 1.77 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { AnimationStyles, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';
import React from 'react';
import { CallCompositeIcon } from '../../common/icons';
import { useLocale } from '../../localization';
/**
* Notify the user that they're muted.
*/
export function MutedNotification(props) {
const locale = useLocale();
const theme = useTheme();
return (React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
React.createElement(Stack, { horizontal: true, className: mergeStyles(stackStyle(theme)) },
React.createElement(CallCompositeIcon, { iconName: "Muted", className: mergeStyles(iconStyle(theme)) }),
React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage))));
}
const stackStyle = (theme) => {
return {
background: theme.palette.black,
gap: `1rem`,
padding: `1rem`,
borderRadius: theme.effects.roundedCorner4,
width: 'fit-content',
opacity: 0.8
};
};
const iconStyle = (theme) => {
return {
color: theme.palette.white,
maxHeight: '1.25rem'
};
};
const textStyle = (theme) => {
return {
color: theme.palette.white,
fontSize: `1rem`
};
};
const isSpeakingAndMutedAnimationStyles = Object.assign({}, AnimationStyles.fadeIn100);
const isNotSpeakingAndMutedAnimationStyles = Object.assign(Object.assign({}, AnimationStyles.fadeOut200), { display: 'none' });
//# sourceMappingURL=MutedNotification.js.map