@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
40 lines • 2.37 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Stack } from '@fluentui/react';
import React from 'react';
import { bannerNotificationStyles } from '../styles/CallPage.styles';
import { useSelector } from '../hooks/useSelector';
import { getAssignedBreakoutRoom, getBreakoutRoomSettings, getLatestNotifications } from '../selectors/baseSelectors';
import { Banner } from './Banner';
/**
* @private
*/
export const BreakoutRoomsBanner = (props) => {
const { locale, adapter } = props;
const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
const latestNotifications = useSelector(getLatestNotifications);
if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' &&
// Breakout room settings are only defined in a breakout room so we use this to ensure
// the button is not shown when already in a breakout room
!breakoutRoomSettings && !latestNotifications['assignedBreakoutRoomOpened']) {
return React.createElement(Stack, { styles: bannerNotificationStyles },
React.createElement(Banner, { strings: {
title: assignedBreakoutRoom.displayName ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName) : locale.strings.call.joinBreakoutRoomBannerTitle,
primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel
}, onClickButton: () => assignedBreakoutRoom.join(), iconProps: {
iconName: 'NotificationBarBreakoutRoomPromptJoin'
}, primaryButton: true }));
}
else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {
return React.createElement(Stack, { styles: bannerNotificationStyles },
React.createElement(Banner, { strings: {
title: locale.strings.call.returnFromBreakoutRoomBannerTitle,
primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel
}, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: {
iconName: 'NotificationBarBreakoutRoomClosingSoon'
} }));
}
return null;
};
//# sourceMappingURL=BreakoutRoomsBanner.js.map