@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
93 lines • 3.9 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { MessageBar, MessageBarType, Stack } from '@fluentui/react';
import { useLocale } from '../../localization';
/**
* Notification bar for capabilities changed
* @private
*/
export const CapabilitiesChangedNotificationBar = (props) => {
const locale = useLocale();
return React.createElement(Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map(notification => {
const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);
if (!message) {
return null;
}
const iconProps = getCustomMessageBarIconProps(notification);
return React.createElement(MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: MessageBarType.warning, dismissIconProps: {
iconName: 'ErrorBarClear'
}, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message);
}));
};
const getCapabilityChangedNotificationString = (notification, strings) => {
var _a, _b, _c, _d;
switch (notification.capabilityName) {
case 'shareScreen':
if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {
return (_a = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _a === void 0 ? void 0 : _a.grantedDueToRoleChangeToPresenter;
}
if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {
return (_b = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _b === void 0 ? void 0 : _b.lostDueToRoleChangeToAttendee;
}
break;
case 'viewAttendeeNames':
if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Attendee') {
return (_c = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _c === void 0 ? void 0 : _c.hideAttendeeNameAttendee;
}
if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Presenter') {
return (_d = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _d === void 0 ? void 0 : _d.hideAttendeeNamePresenter;
}
}
return undefined;
};
const getCustomMessageBarIconProps = (notification) => {
let iconName = undefined;
switch (notification.capabilityName) {
case 'turnVideoOn':
if (notification.isPresent) {
iconName = 'ControlButtonCameraOn';
}
else {
iconName = 'ControlButtonCameraProhibited';
}
break;
case 'unmuteMic':
if (notification.isPresent) {
iconName = 'ControlButtonMicOn';
}
else {
iconName = 'ControlButtonMicProhibited';
}
break;
default:
return undefined;
}
return {
iconName,
styles: {
root: {
'> *': {
height: '1rem',
width: '1rem'
}
}
}
};
};
const messageBarStyles = {
innerText: {
alignSelf: 'center'
},
icon: {
height: 0
},
content: {
lineHeight: 'inherit'
},
dismissal: {
height: 0,
paddingTop: '0.8rem'
}
};
//# sourceMappingURL=CapabilitiesChangedNotificationBar.js.map