communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
373 lines • 28.7 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, Stack } from '@fluentui/react';
import { _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
import { _DrawerMenu, _useContainerHeight, _useContainerWidth, useTheme } from "../../../../../react-components/src";
import { NotificationStack } from "../../../../../react-components/src";
import { VideoGallery } from "../../../../../react-components/src";
import React, { useMemo, useRef, useState } from 'react';
import { useEffect } from 'react';
import { useCallback } from 'react';
import { CallingCaptionsBanner } from '../../common/CallingCaptionsBanner';
import { containerDivStyles } from '../../common/ContainerRectProps';
import { compositeMinWidthRem } from '../../common/styles/Composite.styles';
import { useAdapter } from '../adapter/CallAdapterProvider';
import { CallControls } from '../components/CallControls';
import { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';
import { callArrangementContainerStyles, notificationsContainerStyles, containerStyleDesktop, containerStyleMobile, mediaGalleryContainerStyles, galleryParentContainerStyles, bannerNotificationStyles, CONTROL_BAR_Z_INDEX, DRAWER_Z_INDEX } from '../styles/CallPage.styles';
import { notificationStackStyles } from '../styles/CallPage.styles';
import { useSelector } from '../hooks/useSelector';
import { callStatusSelector } from '../selectors/callStatusSelector';
import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
import { getCapabilites, getIsTeamsMeeting, getReactionResources, getRemoteParticipants, getRole, getVideoEffectsDependency } from '../selectors/baseSelectors';
import { getPage } from '../selectors/baseSelectors';
import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
import { drawerContainerStyles } from '../styles/CallComposite.styles';
import { SidePane } from './SidePane/SidePane';
import { usePeoplePane } from './SidePane/usePeoplePane';
import { useMeetingPhoneInfoPane } from './SidePane/useMeetingPhoneInfo';
import { getTeamsMeetingCoordinates } from '../selectors/baseSelectors';
import { useVideoEffectsPane, VIDEO_EFFECTS_SIDE_PANE_ID, VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM } from './SidePane/useVideoEffectsPane';
import { isDisabled } from '../utils';
import { useIsSidePaneOpen } from './SidePane/SidePaneProvider';
import { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';
import { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';
import { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';
import { useMinMaxDragPosition } from '../../common/utils';
import { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';
import { CapabilitiesChangedNotificationBar } from './CapabilitiesChangedNotificationBar';
import { useLocale } from '../../localization';
import { usePropsFor } from '../hooks/usePropsFor';
import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt, useStopAllSpotlightCallbackWithPrompt } from '../utils/spotlightUtils';
import { getIsTeamsCall, getMediaAccessSetting } from '../selectors/baseSelectors';
import { useHandlers } from '../hooks/useHandlers';
import { MoreDrawer } from '../../common/Drawer/MoreDrawer';
import { useCompositeStringsForNotificationStackStrings } from '../hooks/useCompositeStringsForNotificationStack';
import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
/**
* @private
* Maximum number of remote video tiles that can be pinned
*/
export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
/**
* @private
*/
export const CallArrangement = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
const containerClassName = useMemo(() => {
return props.mobileView ? containerStyleMobile : containerStyleDesktop;
}, [props.mobileView]);
const theme = useTheme();
const callGalleryStyles = useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);
const peopleButtonRef = useRef(null);
const cameraButtonRef = useRef(null);
const sidePaneDismissButtonRef = useRef(null);
const containerRef = useRef(null);
const containerWidth = _useContainerWidth(containerRef);
const containerHeight = _useContainerHeight(containerRef);
const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);
const { updateSidePaneRenderer } = props;
const isInLocalHold = useSelector(getPage) === 'hold';
const capabilities = useSelector(getCapabilites);
const adapter = useAdapter();
const [participantActioned, setParticipantActioned] = useState();
const remoteParticipants = useSelector(getRemoteParticipants);
const [drawerMenuItems, setDrawerMenuItems] = useState([]);
useEffect(() => {
const participantIsActionedButIsNotPresent = participantActioned && (remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants[participantActioned]) === undefined;
if (participantIsActionedButIsNotPresent) {
setDrawerMenuItems([]);
}
}, [participantActioned, remoteParticipants]);
const conferencePhoneInfo = useSelector(getTeamsMeetingCoordinates);
const meetingPhoneInfoPaneProps = {
updateSidePaneRenderer,
mobileView: props.mobileView,
conferencePhoneInfo: conferencePhoneInfo
};
const peoplePaneProps = useMemo(() => {
var _a;
return ({
updateSidePaneRenderer,
setDrawerMenuItems,
inviteLink: props.callControlProps.callInvitationURL,
onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,
onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
mobileView: props.mobileView,
peopleButtonRef,
setParticipantActioned,
sidePaneDismissButtonRef,
chatButtonPresent: !!props.onCloseChatPane
});
}, [
updateSidePaneRenderer,
props.callControlProps.callInvitationURL,
(_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
props.onFetchAvatarPersonaData,
props.mobileView,
peopleButtonRef,
setParticipantActioned,
sidePaneDismissButtonRef,
props.onCloseChatPane
]);
const locale = useLocale();
const role = useSelector(getRole);
const videoGalleryProps = usePropsFor(VideoGallery);
const muteAllHandlers = useHandlers(MoreDrawer);
const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = videoGalleryProps;
const [showTeamsMeetingConferenceModal, setShowTeamsMeetingConferenceModal] = useState(false);
const toggleTeamsMeetingConferenceModal = useCallback(() => {
setShowTeamsMeetingConferenceModal(!showTeamsMeetingConferenceModal);
}, [showTeamsMeetingConferenceModal]);
const { isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane, closeMeetingPhoneInfoPane } = useMeetingPhoneInfoPane(Object.assign({}, meetingPhoneInfoPaneProps));
const toggleMeetingPhoneInfoPane = useCallback(() => {
if (isMeetingPhoneInfoPaneOpen) {
closeMeetingPhoneInfoPane();
}
else {
openMeetingPhoneInfoPane();
}
}, [closeMeetingPhoneInfoPane, isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane]);
const onMeetingPhoneInfoClicked = useCallback(() => {
setShowDrawer(false);
toggleMeetingPhoneInfoPane();
}, [toggleMeetingPhoneInfoPane]);
const { pinnedParticipants, setPinnedParticipants } = props;
const onPinParticipant = useCallback((userId) => {
if (pinnedParticipants && pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
return;
}
if (pinnedParticipants && setPinnedParticipants && !pinnedParticipants.includes(userId)) {
setPinnedParticipants(pinnedParticipants.concat(userId));
}
}, [pinnedParticipants, setPinnedParticipants]);
const onUnpinParticipant = useCallback((userId) => {
if (pinnedParticipants && setPinnedParticipants) {
setPinnedParticipants(pinnedParticipants.filter((participantId) => participantId !== userId));
}
}, [setPinnedParticipants, pinnedParticipants]);
const pinPeoplePaneProps = useMemo(() => {
return {
pinnedParticipants: pinnedParticipants,
onPinParticipant: onPinParticipant,
onUnpinParticipant: onUnpinParticipant,
disablePinMenuItem: pinnedParticipants && pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES
};
}, [onPinParticipant, onUnpinParticipant, pinnedParticipants]);
const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
const stopAllSpotlight = useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
const onMuteParticipantPeoplePaneProps = useMemo(() => {
var _a, _b;
return {
onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown'
? muteAllHandlers.onMuteAllRemoteParticipants
: undefined
};
}, [onMuteParticipant, role, capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers, muteAllHandlers.onMuteAllRemoteParticipants]);
const spotlightPeoplePaneProps = useMemo(() => {
return {
spotlightedParticipantUserIds: spotlightedParticipants,
onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt,
onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt,
onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt,
onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt,
onStopAllSpotlight: hideSpotlightButtons ? undefined : stopAllSpotlightWithPrompt,
maxParticipantsToSpotlight
};
}, [
hideSpotlightButtons,
maxParticipantsToSpotlight,
onStartLocalSpotlightWithPrompt,
onStartRemoteSpotlightWithPrompt,
onStopLocalSpotlightWithPrompt,
onStopRemoteSpotlightWithPrompt,
stopAllSpotlightWithPrompt,
spotlightedParticipants
]);
const meetingMediaAccess = useSelector(getMediaAccessSetting);
const canForbidOthersAudio = !!((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersAudio) === null || _b === void 0 ? void 0 : _b.isPresent);
const canForbidOthersVideo = !!((_c = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersVideo) === null || _c === void 0 ? void 0 : _c.isPresent);
const onToggleParticipantMicPeoplePaneProps = useMemo(() => {
return {
onForbidAudio: canForbidOthersAudio ? onForbidAudio : undefined,
onPermitAudio: canForbidOthersAudio ? onPermitAudio : undefined,
onForbidOthersAudio: canForbidOthersAudio ? muteAllHandlers.onForbidOthersAudio : undefined,
onPermitOthersAudio: canForbidOthersAudio ? muteAllHandlers.onPermitOthersAudio : undefined,
onForbidVideo: canForbidOthersVideo ? onForbidVideo : undefined,
onPermitVideo: canForbidOthersVideo ? onPermitVideo : undefined,
onForbidOthersVideo: canForbidOthersVideo ? muteAllHandlers.onForbidOthersVideo : undefined,
onPermitOthersVideo: canForbidOthersVideo ? muteAllHandlers.onPermitOthersVideo : undefined,
meetingMediaAccess
};
}, [
canForbidOthersAudio,
onForbidAudio,
onPermitAudio,
muteAllHandlers.onForbidOthersAudio,
muteAllHandlers.onPermitOthersAudio,
muteAllHandlers.onForbidOthersVideo,
muteAllHandlers.onPermitOthersVideo,
canForbidOthersVideo,
onForbidVideo,
onPermitVideo,
meetingMediaAccess
]);
const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps), onToggleParticipantMicPeoplePaneProps));
const togglePeoplePane = useCallback(() => {
if (isPeoplePaneOpen) {
closePeoplePane();
}
else {
openPeoplePane();
}
}, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);
useEffect(() => {
if (isInLocalHold) {
// close side pane on local hold
updateSidePaneRenderer(undefined);
}
}, [updateSidePaneRenderer, isInLocalHold, isPeoplePaneOpen, closePeoplePane]);
const isSidePaneOpen = useIsSidePaneOpen();
const [renderGallery, setRenderGallery] = useState(!isSidePaneOpen && props.mobileView);
useEffect(() => {
if (isSidePaneOpen && props.mobileView) {
setRenderGallery(false);
}
else {
setRenderGallery(true);
}
}, [props.mobileView, isSidePaneOpen]);
const modalStrings = { dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel };
const isMobileWithActivePane = props.mobileView && isSidePaneOpen;
const callCompositeContainerCSS = useMemo(() => {
return {
display: isMobileWithActivePane ? 'none' : 'flex',
minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,
width: '100%',
height: '100%',
position: 'relative'
};
}, [isMobileWithActivePane, props.mobileView]);
const onResolveVideoEffectDependency = useSelector(getVideoEffectsDependency);
const { openVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
const [showDrawer, setShowDrawer] = useState(false);
const onMoreButtonClicked = useCallback(() => {
setShowDrawer(true);
}, []);
const closeDrawer = useCallback(() => {
setShowDrawer(false);
}, []);
const onMoreDrawerPeopleClicked = useCallback(() => {
setShowDrawer(false);
togglePeoplePane();
}, [togglePeoplePane]);
const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
let filteredLatestErrorNotifications = props.showErrorNotifications
? props.latestErrors
: [];
const isCameraOn = useSelector(localVideoSelector).isAvailable;
// TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
if (role === 'Consumer' && (props.errorBarProps || props.showErrorNotifications)) {
filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
}
if (props.doNotShowCameraAccessNotifications) {
filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
}
const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
}
const isTeamsMeeting = useSelector(getIsTeamsMeeting);
const isTeamsCall = useSelector(getIsTeamsCall);
// Teams captions are only available in Teams meetings or Teams calls.
// For Teams Meetings, we need to check if the capability is present.
const useTeamsCaptions = (isTeamsMeeting && ((_d = capabilities === null || capabilities === void 0 ? void 0 : capabilities.setCaptionLanguage) === null || _d === void 0 ? void 0 : _d.isPresent)) || isTeamsCall;
const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
const isCaptionsOn = useSelector(getCaptionsStatus);
const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
const galleryContainerStyles = useMemo(() => {
var _a;
return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
}, [(_e = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _e === void 0 ? void 0 : _e.height]);
if (isTeamsMeeting) {
filteredLatestErrorNotifications
.filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
.forEach((notification) => {
notification.onClickPrimaryButton = props.mobileView
? toggleMeetingPhoneInfoPane
: toggleTeamsMeetingConferenceModal;
});
}
const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
// Filter out shareScreen capability notifications if on mobile
const filteredCapabilitesChangedNotifications = props.mobileView
? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
: (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === void 0 ? void 0 : _g.capabilitiesChangedNotifications;
const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
let latestNotifications = props.latestNotifications;
// Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
// replace it with a non-dismissible banner
latestNotifications = props.mobileView
? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter((notification) => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin')
: latestNotifications;
const reactionResources = useSelector(getReactionResources);
const [openRealTimeText, setOpenRealTimeText] = useState(false);
const onStartRealTimeText = useCallback(() => {
setOpenRealTimeText(true);
}, []);
return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
React.createElement(Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
React.createElement(Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
React.createElement(Stack, { horizontal: true, grow: true },
React.createElement(Stack.Item, { style: callCompositeContainerCSS },
React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true },
React.createElement(Stack, { verticalFill: true, styles: galleryContainerStyles },
!((_h = props.notificationOptions) === null || _h === void 0 ? void 0 : _h.hideAllNotifications) && (React.createElement(Stack.Item, { styles: notificationsContainerStyles },
props.mobileView && React.createElement(BreakoutRoomsBanner, { locale: locale, adapter: adapter }),
props.showErrorNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications }))),
latestNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, strings: notificationStackStrings }))),
props.capabilitiesChangedNotificationBarProps &&
props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React.createElement(Stack, { styles: bannerNotificationStyles },
React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))))),
renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
!isInLocalHold && (React.createElement(CallingCaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions, isRealTimeTextOn: openRealTimeText }))))),
React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
? undefined
: togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
isDisabled((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
closePeoplePane();
if (props.onCloseChatPane) {
props.onCloseChatPane();
}
} })),
drawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles() },
React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))),
((_m = props.callControlProps) === null || _m === void 0 ? void 0 : _m.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
zIndex: CONTROL_BAR_Z_INDEX,
padding: verticalControlBar ? '0.25rem' : 'unset'
}) }, isLegacyCallControlEnabled((_o = props.callControlProps) === null || _o === void 0 ? void 0 : _o.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, isRealTimeTextSupported: hasJoinedCall && props.isRTTSupportedCall, onStartRealTimeText: onStartRealTimeText, startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal, sidePaneDismissButtonRef: sidePaneDismissButtonRef }))))),
((_p = props.callControlProps) === null || _p === void 0 ? void 0 : _p.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, isRealTimeTextSupported: hasJoinedCall && props.isRTTSupportedCall, onStartRealTimeText: onStartRealTimeText, startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, dtmfDialerOptions: props.dtmfDialerOptions, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked })))))));
};
const isLegacyCallControlEnabled = (options) => {
return !!options && options !== true && (options === null || options === void 0 ? void 0 : options.legacyControlBarExperience) === true;
};
const shouldShowPeopleTabHeaderButton = (callControls) => {
if (callControls === undefined || callControls === true) {
return true;
}
if (callControls === false) {
return false;
}
return callControls.participantsButton !== false && callControls.peopleButton !== false;
};
//# sourceMappingURL=CallArrangement.js.map