npm - @azure/communication-react - Versions diffs - 1.7.0-beta.1 → 1.7.1-alpha-202308170011 - Mend

@azure/communication-react 1.7.0-beta.1 → 1.7.1-alpha-202308170011

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1024) hide show

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js CHANGED Viewed

@@ -3,8 +3,6 @@
 import { mergeStyles, Stack } from '@fluentui/react';
 import { _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
 import { _ComplianceBanner, _DrawerMenu, _useContainerHeight, _useContainerWidth, ErrorBar, useTheme } from "../../../../../react-components/src";
-/* @conditional-compile-remove(rooms) */
-import { _usePermissions } from "../../../../../react-components/src";
 import React, { useMemo, useRef, useState } from 'react';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { useEffect } from 'react';
@@ -47,12 +45,14 @@ import { localVideoSelector } from '../../CallComposite/selectors/localVideoStre
  * @private
  */
 export const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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 containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -78,9 +78,18 @@ export const CallArrangement = (props) => {
             /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
             onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,
             onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
-            mobileView: props.mobileView
+            mobileView: props.mobileView,
+            peopleButtonRef
         });
-    }, [updateSidePaneRenderer, props.callControlProps.callInvitationURL, (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ props.onFetchAvatarPersonaData, props.mobileView]);
+    }, [
+        updateSidePaneRenderer,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+        props.onFetchAvatarPersonaData,
+        props.mobileView,
+        peopleButtonRef
+    ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);
     const togglePeoplePane = useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -110,7 +119,9 @@ export const CallArrangement = (props) => {
         placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
     }), [callWithChatStrings]);
     /* @conditional-compile-remove(video-background-effects) */
-    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView);
+    const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
+    /* @conditional-compile-remove(video-background-effects) */
+    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
     const [showDrawer, setShowDrawer] = useState(false);
     const onMoreButtonClicked = useCallback(() => {
         setShowDrawer(true);
@@ -136,23 +147,23 @@ export const CallArrangement = (props) => {
     };
     const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     let canUnmute = true;
     /* @conditional-compile-remove(rooms) */
-    canUnmute = rolePermissions.microphoneButton;
-    let errorBarProps = props.errorBarProps;
+    canUnmute = role !== 'Consumer' ? true : false;
+    let filteredLatestErrors = props.errorBarProps !== false ? props.latestErrors : [];
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
-    if (!rolePermissions.cameraButton && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
+    if (role === 'Consumer' && props.errorBarProps) {
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     /* @conditional-compile-remove(video-background-effects) */
     const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     /* @conditional-compile-remove(video-background-effects) */
     if ((isVideoPaneOpen || !isCameraOn) && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(e => e.type !== 'unableToStartVideoEffect') });
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(close-captions) */
     const isTeamsCall = useSelector(getIsTeamsCall);
@@ -160,25 +171,39 @@ export const CallArrangement = (props) => {
     const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
-    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
+    const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
+    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, { grow: true, styles: callArrangementContainerStyles },
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && React.createElement(Stack.Item, { className: mergeStyles({
-                        zIndex: CONTROL_BAR_Z_INDEX
-                    }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView,
-                    /* @conditional-compile-remove(one-to-n-calling) */ peopleButtonChecked: isPeoplePaneOpen,
-                    /* @conditional-compile-remove(one-to-n-calling) */ onPeopleButtonClicked: togglePeoplePane })) : React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby,
-                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked,
-                    /* @conditional-compile-remove(close-captions) */ isCaptionsSupported: isTeamsCall && hasJoinedCall,
-                    /* @conditional-compile-remove(video-background-effects) */ onShowVideoEffectsPicker: openVideoEffectsPane,
-                    /* @conditional-compile-remove(PSTN-calls) */ onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined }))),
-                ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && React.createElement(Stack, { styles: drawerContainerStylesValue },
+            React.createElement(Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
+                ((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
+                        zIndex: CONTROL_BAR_Z_INDEX,
+                        padding: verticalControlBar ? '0.25rem' : 'unset'
+                    }) }, isLegacyCallControlEnabled((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView,
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    peopleButtonChecked: isPeoplePaneOpen,
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby,
+                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                    disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked,
+                    /* @conditional-compile-remove(close-captions) */
+                    isCaptionsSupported: isTeamsCall && hasJoinedCall,
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined,
+                    /* @conditional-compile-remove(PSTN-calls) */
+                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar,
+                    /* @conditional-compile-remove(gallery-layouts) */
+                    onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked,
-                        /* @conditional-compile-remove(PSTN-calls) */ onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined,
-                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ disableButtonsForHoldScreen: isInLocalHold,
-                        /* @conditional-compile-remove(close-captions) */ isCaptionsSupported: isTeamsCall && hasJoinedCall })),
-                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDtmfDialpad && React.createElement(Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad })),
+                        /* @conditional-compile-remove(PSTN-calls) */
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined,
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        disableButtonsForHoldScreen: isInLocalHold,
+                        /* @conditional-compile-remove(close-captions) */
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
+                /* @conditional-compile-remove(PSTN-calls) */
+                ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && showDtmfDialpad && (React.createElement(Stack, { styles: drawerContainerStylesValue },
+                    React.createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
                 React.createElement(Stack, { horizontal: true, grow: true },
                     React.createElement(Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -186,23 +211,29 @@ export const CallArrangement = (props) => {
                                 React.createElement(Stack.Item, { styles: notificationsContainerStyles },
                                     React.createElement(Stack, { styles: bannerNotificationStyles },
                                         React.createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
-                                    errorBarProps !== false && React.createElement(Stack, { styles: bannerNotificationStyles },
-                                        React.createElement(ErrorBar, Object.assign({}, errorBarProps))),
-                                    canUnmute && !!props.mutedNotificationProps && React.createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
+                                    props.errorBarProps !== false && (React.createElement(Stack, { styles: bannerNotificationStyles },
+                                        React.createElement(ErrorBar, Object.assign({}, props.errorBarProps, { onDismissError: props.onDismissError, activeErrorMessages: filteredLatestErrors })))),
+                                    canUnmute && !!props.mutedNotificationProps && (React.createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent(),
-                                true && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && React.createElement(CaptionsBanner, { isMobile: props.mobileView })))),
+                                /* @conditional-compile-remove(close-captions) */
+                                true &&
+                                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView }))))),
                     React.createElement(SidePane, { mobileView: props.mobileView,
-                        /* @conditional-compile-remove(video-background-effects) */ maxWidth: 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((_f = props.callControlProps.options) === null || _f === void 0 ? void 0 : _f.participantsButton), onChatButtonClicked: (_g = props.mobileChatTabHeader) === null || _g === void 0 ? void 0 : _g.onClick, disableChatButton: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.disabled }),
-                    props.mobileView && React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition }),
-                    drawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles() },
-                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))));
+                        /* @conditional-compile-remove(video-background-effects) */
+                        maxWidth: 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((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
+                    props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
+                    drawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles() },
+                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
 };
 const isLegacyCallControlEnabled = (options) => {
     var _a, _b;
     /* @conditional-compile-remove(new-call-control-bar) */
     return !!options && options !== true && ((_a = options) === null || _a === void 0 ? void 0 : _a.legacyControlBarExperience) === true;
     // In stable builds, we default to legacy until new-call-control-bar feature is stablized.
-    return options === undefined || options === true || ((_b = options) === null || _b === void 0 ? void 0 : _b.legacyControlBarExperience) !== false;
+    return (options === undefined || options === true || ((_b = options) === null || _b === void 0 ? void 0 : _b.legacyControlBarExperience) !== false);
 };
 const shouldShowPeopleTabHeaderButton = (callControls) => {
     if (callControls === undefined || callControls === true) {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { _ComplianceBanner, _ComplianceBannerProps, _DrawerMenu, _DrawerMenuItemProps, _useContainerHeight, _useContainerWidth, ErrorBar, ErrorBarProps, useTheme } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) /\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo, useRef, useState } from 'react';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { useEffect } from 'react';\nimport { useCallback } from 'react';\n/ @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsBanner } from '../../common/CaptionsBanner';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\nimport { compositeMinWidthRem } from '../../common/styles/Composite.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\nimport { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';\nimport { callArrangementContainerStyles, notificationsContainerStyles, containerStyleDesktop, containerStyleMobile, mediaGalleryContainerStyles, galleryParentContainerStyles, bannerNotificationStyles, CONTROL_BAR_Z_INDEX, DRAWER_Z_INDEX } from '../styles/CallPage.styles';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\nimport { CallAdapter } from '../adapter';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { _CallControlOptions, CallControlOptions } from '../types/CallControlOptions';\nimport { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { getPage } from '../selectors/baseSelectors';\n/ @conditional-compile-remove(close-captions) /\nimport { getCallStatus, getIsTeamsCall } from '../selectors/baseSelectors';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { SidePane } from './SidePane/SidePane';\nimport { usePeoplePane } from './SidePane/usePeoplePane';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useVideoEffectsPane, VIDEO_EFFECTS_SIDE_PANE_ID, VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM } from './SidePane/useVideoEffectsPane';\nimport { isDisabled } from '../utils';\nimport { SidePaneRenderer, useIsSidePaneOpen } from './SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\n/\n @private\n /\nexport interface CallArrangementProps {\n id?: string;\n complianceBannerProps: _ComplianceBannerProps;\n errorBarProps: ErrorBarProps \| false;\n mutedNotificationProps?: MutedNotificationProps;\n callControlProps: CallControlsProps;\n onRenderGalleryContent: () => JSX.Element;\n dataUiId: string;\n mobileView: boolean;\n modalLayerHostId: string;\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/\n @private\n /\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n const containerClassName = useMemo(() => {\n return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n }, [props.mobileView]);\n const theme = useTheme();\n const callGalleryStyles = useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);\n const {\n updateSidePaneRenderer\n } = props;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const isInLocalHold = useSelector(getPage) === 'hold';\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n useEffect(() => {\n if (isInLocalHold) {\n // close side pane on local hold\n updateSidePaneRenderer(undefined);\n }\n }, [updateSidePaneRenderer, isInLocalHold]);\n const adapter = useAdapter();\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n const peoplePaneProps = useMemo(() => ({\n updateSidePaneRenderer,\n setDrawerMenuItems,\n inviteLink: props.callControlProps.callInvitationURL,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,\n onFetchParticipantMenuItems: props.callControlProps?.onFetchParticipantMenuItems,\n mobileView: props.mobileView\n }), [updateSidePaneRenderer, props.callControlProps.callInvitationURL, props.callControlProps?.onFetchParticipantMenuItems, / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n props.onFetchAvatarPersonaData, props.mobileView]);\n const {\n isPeoplePaneOpen,\n openPeoplePane,\n closePeoplePane\n } = usePeoplePane(peoplePaneProps);\n const togglePeoplePane = useCallback(() => {\n if (isPeoplePaneOpen) {\n closePeoplePane();\n } else {\n openPeoplePane();\n }\n }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);\n const isSidePaneOpen = useIsSidePaneOpen();\n const isMobileWithActivePane = props.mobileView && isSidePaneOpen;\n const callCompositeContainerCSS = useMemo((): React.CSSProperties => {\n return {\n display: isMobileWithActivePane ? 'none' : 'flex',\n minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,\n width: '100%',\n height: '100%',\n position: 'relative'\n };\n }, [isMobileWithActivePane, props.mobileView]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const callWithChatStrings = useCallWithChatCompositeStrings();\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(() => ({\n dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n }), [callWithChatStrings]);\n\n / @conditional-compile-remove(video-background-effects) /\n const {\n openVideoEffectsPane\n } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView);\n const [showDrawer, setShowDrawer] = useState(false);\n const onMoreButtonClicked = useCallback(() => {\n setShowDrawer(true);\n }, []);\n const closeDrawer = useCallback(() => {\n setShowDrawer(false);\n }, []);\n const onMoreDrawerPeopleClicked = useCallback(() => {\n setShowDrawer(false);\n togglePeoplePane();\n }, [togglePeoplePane]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDtmfDialpad = (): void => {\n setShowDtmfDialpad(false);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const onClickShowDialpad = (): void => {\n setShowDtmfDialpad(true);\n };\n const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);\n\n / @conditional-compile-remove(rooms) /\n const rolePermissions = _usePermissions();\n let canUnmute = true;\n / @conditional-compile-remove(rooms) /\n canUnmute = rolePermissions.microphoneButton;\n let errorBarProps = props.errorBarProps;\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (!rolePermissions.cameraButton && props.errorBarProps) {\n errorBarProps = {\n ...props.errorBarProps,\n activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari')\n };\n }\n\n / @conditional-compile-remove(video-background-effects) /\n const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n / @conditional-compile-remove(video-background-effects) /\n if ((isVideoPaneOpen \|\| !isCameraOn) && props.errorBarProps) {\n errorBarProps = {\n ...props.errorBarProps,\n activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(e => e.type !== 'unableToStartVideoEffect')\n };\n }\n\n / @conditional-compile-remove(close-captions) /\n const isTeamsCall = useSelector(getIsTeamsCall);\n / @conditional-compile-remove(close-captions) /\n const hasJoinedCall = useSelector(getCallStatus) === 'Connected';\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n return <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n <Stack grow styles={callArrangementContainerStyles}>\n {props.callControlProps?.options !== false && !isMobileWithActivePane && <Stack.Item className={mergeStyles({\n zIndex: CONTROL_BAR_Z_INDEX\n })}>\n {isLegacyCallControlEnabled(props.callControlProps?.options) ? <CallControls {...props.callControlProps} containerWidth={containerWidth} containerHeight={containerHeight} isMobile={props.mobileView}\n / @conditional-compile-remove(one-to-n-calling) / peopleButtonChecked={isPeoplePaneOpen}\n / @conditional-compile-remove(one-to-n-calling) / onPeopleButtonClicked={togglePeoplePane} /> : <CommonCallControlBar {...props.callControlProps} callControls={props.callControlProps.options} callAdapter={(adapter as CallAdapter)} mobileView={props.mobileView} disableButtonsForLobbyPage={isInLobby}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / disableButtonsForHoldScreen={isInLocalHold} peopleButtonChecked={isPeoplePaneOpen} onPeopleButtonClicked={togglePeoplePane} onMoreButtonClicked={onMoreButtonClicked}\n / @conditional-compile-remove(close-captions) / isCaptionsSupported={isTeamsCall && hasJoinedCall}\n / @conditional-compile-remove(video-background-effects) / onShowVideoEffectsPicker={openVideoEffectsPane}\n / @conditional-compile-remove(PSTN-calls) / onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined} />}\n </Stack.Item>}\n {props.callControlProps?.options !== false && showDrawer && <Stack styles={drawerContainerStylesValue}>\n <PreparedMoreDrawer callControls={props.callControlProps.options} onLightDismiss={closeDrawer} onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n / @conditional-compile-remove(PSTN-calls) / onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / disableButtonsForHoldScreen={isInLocalHold}\n / @conditional-compile-remove(close-captions) / isCaptionsSupported={isTeamsCall && hasJoinedCall} />\n </Stack>}\n\n {/ @conditional-compile-remove(PSTN-calls) /\n props.callControlProps?.options !== false && showDtmfDialpad && <Stack styles={drawerContainerStylesValue}>\n <SendDtmfDialpad isMobile={props.mobileView} strings={dialpadStrings} showDialpad={showDtmfDialpad} onDismissDialpad={onDismissDtmfDialpad} />\n </Stack>}\n <Stack horizontal grow>\n <Stack.Item style={callCompositeContainerCSS}>\n <Stack.Item styles={callGalleryStyles} grow>\n <Stack verticalFill styles={mediaGalleryContainerStyles}>\n <Stack.Item styles={notificationsContainerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <_ComplianceBanner {...props.complianceBannerProps} />\n </Stack>\n {errorBarProps !== false && <Stack styles={bannerNotificationStyles}>\n <ErrorBar {...errorBarProps} />\n </Stack>}\n {canUnmute && !!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n </Stack.Item>\n {props.onRenderGalleryContent && props.onRenderGalleryContent()}\n {/ @conditional-compile-remove(close-captions) /\n true && / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /!isInLocalHold && <CaptionsBanner isMobile={props.mobileView} />}\n </Stack>\n </Stack.Item>\n </Stack.Item>\n <SidePane mobileView={props.mobileView}\n / @conditional-compile-remove(video-background-effects) / maxWidth={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(props.callControlProps.options?.participantsButton)} onChatButtonClicked={props.mobileChatTabHeader?.onClick} disableChatButton={props.mobileChatTabHeader?.disabled} />\n {props.mobileView && <ModalLocalAndRemotePIP modalLayerHostId={props.modalLayerHostId} hidden={!isSidePaneOpen} styles={pipStyles} minDragPosition={minMaxDragPosition.minDragPosition} maxDragPosition={minMaxDragPosition.maxDragPosition} />}\n {drawerMenuItems.length > 0 && <Stack styles={drawerContainerStyles()}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>}\n </Stack>\n </Stack>\n </Stack>\n </div>;\n};\nconst isLegacyCallControlEnabled = (options?: boolean \| CallControlOptions): boolean => {\n / @conditional-compile-remove(new-call-control-bar) */\n return !!options && options !== true && (options as _CallControlOptions)?.legacyControlBarExperience === true;\n\n // In stable builds, we default to legacy until new-call-control-bar feature is stablized.\n return options === undefined \|\| options === true \|\| (options as _CallControlOptions)?.legacyControlBarExperience !== false;\n};\nconst shouldShowPeopleTabHeaderButton = (callControls?: boolean \| CommonCallControlOptions): boolean => {\n if (callControls === undefined \|\| callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.participantsButton !== false && callControls.peopleButton !== false;\n};\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
1	+ {"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButton, mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport {\n _ComplianceBanner,\n _ComplianceBannerProps,\n _DrawerMenu,\n _DrawerMenuItemProps,\n _useContainerHeight,\n _useContainerWidth,\n ActiveErrorMessage,\n ErrorBar,\n ErrorBarProps,\n useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { useEffect } from 'react';\nimport { useCallback } from 'react';\n/ @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsBanner } from '../../common/CaptionsBanner';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\nimport { compositeMinWidthRem } from '../../common/styles/Composite.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\nimport { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';\nimport {\n callArrangementContainerStyles,\n notificationsContainerStyles,\n containerStyleDesktop,\n containerStyleMobile,\n mediaGalleryContainerStyles,\n galleryParentContainerStyles,\n bannerNotificationStyles,\n CONTROL_BAR_Z_INDEX,\n DRAWER_Z_INDEX\n} from '../styles/CallPage.styles';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\nimport { CallAdapter } from '../adapter';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { _CallControlOptions, CallControlOptions } from '../types/CallControlOptions';\nimport { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { getPage } from '../selectors/baseSelectors';\n/ @conditional-compile-remove(close-captions) /\nimport { getCallStatus, getIsTeamsCall } from '../selectors/baseSelectors';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { SidePane } from './SidePane/SidePane';\nimport { usePeoplePane } from './SidePane/usePeoplePane';\n/ @conditional-compile-remove(video-background-effects) /\nimport {\n useVideoEffectsPane,\n VIDEO_EFFECTS_SIDE_PANE_ID,\n VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM\n} from './SidePane/useVideoEffectsPane';\nimport { isDisabled } from '../utils';\nimport { SidePaneRenderer, useIsSidePaneOpen } from './SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\n/\n @private\n /\nexport interface CallArrangementProps {\n id?: string;\n complianceBannerProps: _ComplianceBannerProps;\n errorBarProps: ErrorBarProps \| false;\n mutedNotificationProps?: MutedNotificationProps;\n callControlProps: CallControlsProps;\n onRenderGalleryContent: () => JSX.Element;\n dataUiId: string;\n mobileView: boolean;\n modalLayerHostId: string;\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n latestErrors: ActiveErrorMessage[];\n onDismissError: (error: ActiveErrorMessage) => void;\n / @conditional-compile-remove(gallery-layouts) /\n onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' \| 'HorizontalTop') => void;\n}\n\n/\n @private\n /\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n const containerClassName = useMemo(() => {\n return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n }, [props.mobileView]);\n\n const theme = useTheme();\n const callGalleryStyles = useMemo(\n () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n [theme.palette.neutralLighterAlt]\n );\n\n const peopleButtonRef = useRef<IButton>(null);\n const cameraButtonRef = useRef<IButton>(null);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n\n const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);\n\n const { updateSidePaneRenderer } = props;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const isInLocalHold = useSelector(getPage) === 'hold';\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n useEffect(() => {\n if (isInLocalHold) {\n // close side pane on local hold\n updateSidePaneRenderer(undefined);\n }\n }, [updateSidePaneRenderer, isInLocalHold]);\n\n const adapter = useAdapter();\n\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n const peoplePaneProps = useMemo(\n () => ({\n updateSidePaneRenderer,\n setDrawerMenuItems,\n inviteLink: props.callControlProps.callInvitationURL,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,\n onFetchParticipantMenuItems: props.callControlProps?.onFetchParticipantMenuItems,\n mobileView: props.mobileView,\n peopleButtonRef\n }),\n [\n updateSidePaneRenderer,\n props.callControlProps.callInvitationURL,\n props.callControlProps?.onFetchParticipantMenuItems,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n props.onFetchAvatarPersonaData,\n props.mobileView,\n peopleButtonRef\n ]\n );\n const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);\n const togglePeoplePane = useCallback(() => {\n if (isPeoplePaneOpen) {\n closePeoplePane();\n } else {\n openPeoplePane();\n }\n }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);\n\n const isSidePaneOpen = useIsSidePaneOpen();\n\n const isMobileWithActivePane = props.mobileView && isSidePaneOpen;\n\n const callCompositeContainerCSS = useMemo((): React.CSSProperties => {\n return {\n display: isMobileWithActivePane ? 'none' : 'flex',\n minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,\n width: '100%',\n height: '100%',\n position: 'relative'\n };\n }, [isMobileWithActivePane, props.mobileView]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const callWithChatStrings = useCallWithChatCompositeStrings();\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(\n () => ({\n dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n }),\n [callWithChatStrings]\n );\n\n / @conditional-compile-remove(video-background-effects) /\n const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;\n\n / @conditional-compile-remove(video-background-effects) /\n const { openVideoEffectsPane } = useVideoEffectsPane(\n props.updateSidePaneRenderer,\n props.mobileView,\n props.latestErrors,\n props.onDismissError,\n cameraButtonRef\n );\n const [showDrawer, setShowDrawer] = useState(false);\n const onMoreButtonClicked = useCallback(() => {\n setShowDrawer(true);\n }, []);\n const closeDrawer = useCallback(() => {\n setShowDrawer(false);\n }, []);\n const onMoreDrawerPeopleClicked = useCallback(() => {\n setShowDrawer(false);\n togglePeoplePane();\n }, [togglePeoplePane]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDtmfDialpad = (): void => {\n setShowDtmfDialpad(false);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const onClickShowDialpad = (): void => {\n setShowDtmfDialpad(true);\n };\n\n const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);\n\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n let canUnmute = true;\n / @conditional-compile-remove(rooms) /\n canUnmute = role !== 'Consumer' ? true : false;\n\n let filteredLatestErrors: ActiveErrorMessage[] = props.errorBarProps !== false ? props.latestErrors : [];\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (role === 'Consumer' && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter(\n (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n );\n }\n\n / @conditional-compile-remove(video-background-effects) /\n const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n / @conditional-compile-remove(video-background-effects) /\n if ((isVideoPaneOpen \|\| !isCameraOn) && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n }\n\n / @conditional-compile-remove(close-captions) /\n const isTeamsCall = useSelector(getIsTeamsCall);\n / @conditional-compile-remove(close-captions) /\n const hasJoinedCall = useSelector(getCallStatus) === 'Connected';\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n const verticalControlBar =\n props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;\n\n return (\n <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n <Stack\n reversed\n horizontal={verticalControlBar}\n grow\n styles={callArrangementContainerStyles(verticalControlBar)}\n >\n {props.callControlProps?.options !== false && !isMobileWithActivePane && (\n <Stack\n verticalAlign={'center'}\n className={mergeStyles({\n zIndex: CONTROL_BAR_Z_INDEX,\n padding: verticalControlBar ? '0.25rem' : 'unset'\n })}\n >\n {isLegacyCallControlEnabled(props.callControlProps?.options) ? (\n <CallControls\n {...props.callControlProps}\n containerWidth={containerWidth}\n containerHeight={containerHeight}\n isMobile={props.mobileView}\n / @conditional-compile-remove(one-to-n-calling) /\n peopleButtonChecked={isPeoplePaneOpen}\n / @conditional-compile-remove(one-to-n-calling) /\n onPeopleButtonClicked={togglePeoplePane}\n displayVertical={verticalControlBar}\n />\n ) : (\n <CommonCallControlBar\n {...props.callControlProps}\n callControls={props.callControlProps.options}\n callAdapter={adapter as CallAdapter}\n mobileView={props.mobileView}\n disableButtonsForLobbyPage={isInLobby}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n peopleButtonChecked={isPeoplePaneOpen}\n onPeopleButtonClicked={togglePeoplePane}\n onMoreButtonClicked={onMoreButtonClicked}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n / @conditional-compile-remove(video-background-effects) /\n onShowVideoEffectsPicker={onResolveVideoEffectDependency ? openVideoEffectsPane : undefined}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n displayVertical={verticalControlBar}\n / @conditional-compile-remove(gallery-layouts) /\n onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}\n peopleButtonRef={peopleButtonRef}\n cameraButtonRef={cameraButtonRef}\n />\n )}\n </Stack>\n )}\n {props.callControlProps?.options !== false && showDrawer && (\n <Stack styles={drawerContainerStylesValue}>\n <PreparedMoreDrawer\n callControls={props.callControlProps.options}\n onLightDismiss={closeDrawer}\n onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n />\n </Stack>\n )}\n\n {\n / @conditional-compile-remove(PSTN-calls) /\n props.callControlProps?.options !== false && showDtmfDialpad && (\n <Stack styles={drawerContainerStylesValue}>\n <SendDtmfDialpad\n isMobile={props.mobileView}\n strings={dialpadStrings}\n showDialpad={showDtmfDialpad}\n onDismissDialpad={onDismissDtmfDialpad}\n />\n </Stack>\n )\n }\n <Stack horizontal grow>\n <Stack.Item style={callCompositeContainerCSS}>\n <Stack.Item styles={callGalleryStyles} grow>\n <Stack verticalFill styles={mediaGalleryContainerStyles}>\n <Stack.Item styles={notificationsContainerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <_ComplianceBanner {...props.complianceBannerProps} />\n </Stack>\n {props.errorBarProps !== false && (\n <Stack styles={bannerNotificationStyles}>\n <ErrorBar\n {...props.errorBarProps}\n onDismissError={props.onDismissError}\n activeErrorMessages={filteredLatestErrors}\n />\n </Stack>\n )}\n {canUnmute && !!props.mutedNotificationProps && (\n <MutedNotification {...props.mutedNotificationProps} />\n )}\n </Stack.Item>\n {props.onRenderGalleryContent && props.onRenderGalleryContent()}\n {\n / @conditional-compile-remove(close-captions) /\n true &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !isInLocalHold && (\n <CaptionsBanner isMobile={props.mobileView} />\n )\n }\n </Stack>\n </Stack.Item>\n </Stack.Item>\n <SidePane\n mobileView={props.mobileView}\n / @conditional-compile-remove(video-background-effects) /\n maxWidth={isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined}\n updateSidePaneRenderer={props.updateSidePaneRenderer}\n onPeopleButtonClicked={\n props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)\n ? undefined\n : togglePeoplePane\n }\n disablePeopleButton={\n typeof props.callControlProps.options !== 'boolean' &&\n isDisabled(props.callControlProps.options?.participantsButton)\n }\n onChatButtonClicked={props.mobileChatTabHeader?.onClick}\n disableChatButton={props.mobileChatTabHeader?.disabled}\n />\n {props.mobileView && (\n <ModalLocalAndRemotePIP\n modalLayerHostId={props.modalLayerHostId}\n hidden={!isSidePaneOpen}\n styles={pipStyles}\n minDragPosition={minMaxDragPosition.minDragPosition}\n maxDragPosition={minMaxDragPosition.maxDragPosition}\n />\n )}\n {drawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles()}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>\n )}\n </Stack>\n </Stack>\n </Stack>\n </div>\n );\n};\n\nconst isLegacyCallControlEnabled = (options?: boolean \| CallControlOptions): boolean => {\n / @conditional-compile-remove(new-call-control-bar) */\n return !!options && options !== true && (options as _CallControlOptions)?.legacyControlBarExperience === true;\n\n // In stable builds, we default to legacy until new-call-control-bar feature is stablized.\n return (\n options === undefined \|\| options === true \|\| (options as _CallControlOptions)?.legacyControlBarExperience !== false\n );\n};\n\nconst shouldShowPeopleTabHeaderButton = (callControls?: boolean \| CommonCallControlOptions): boolean => {\n if (callControls === undefined \|\| callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.participantsButton !== false && callControls.peopleButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { ParticipantMenuItemsCallback } from "../../../../../react-components/src";
 import { CallControlOptions } from '../types/CallControlOptions';
 import { ContainerRectProps } from '../../common/ContainerRectProps';
+import { CommonCallAdapter } from '../adapter';
 /**
  * @private
  */
@@ -17,11 +17,12 @@ export declare type CallControlsProps = {
      */
     increaseFlyoutItemSize?: boolean;
     isMobile?: boolean;
+    displayVertical?: boolean;
 };
 /**
  * @private
  */
 export declare const CallControls: (props: CallControlsProps & ContainerRectProps) => JSX.Element;
 /** @private */
-export declare const isRoomsCallTrampoline: () => boolean;
+export declare const isRoomsCallTrampoline: (adapter: CommonCallAdapter) => boolean;
 //# sourceMappingURL=CallControls.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js CHANGED Viewed

@@ -6,8 +6,6 @@ import { useState } from 'react';
 import { ControlBar } from "../../../../../react-components/src";
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { HoldButton } from "../../../../../react-components/src";
-/* @conditional-compile-remove(rooms) */
-import { _usePermissions } from "../../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { Camera } from './buttons/Camera';
 import { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';
@@ -28,21 +26,19 @@ import { usePropsFor } from '../hooks/usePropsFor';
 import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
 /* @conditional-compile-remove(PSTN-calls) */
 import { SendDtmfDialpad } from '../../common/SendDtmfDialpad';
-/* @conditional-compile-remove(PSTN-calls) */
+/* @conditional-compile-remove(new-call-control-bar) */
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { isDisabled } from '../utils';
 import { callControlsContainerStyles } from '../styles/CallPage.styles';
 // Enforce a background color on control bar to ensure it matches the composite background color.
-const controlBarStyles = memoizeFunction((background) => ({
-    root: {
-        background: background
-    }
-}));
+const controlBarStyles = memoizeFunction((background) => ({ root: { background: background } }));
 /**
  * @private
  */
 export const CallControls = (props) => {
-    const options = useMemo(() => typeof props.options === 'boolean' ? {} : props.options, [props.options]);
+    const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
+    /* @conditional-compile-remove(new-call-control-bar) */
+    const adapter = useAdapter();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
@@ -78,14 +74,7 @@ export const CallControls = (props) => {
                         props.onPeopleButtonClicked();
                     }
                 },
-                iconProps: {
-                    iconName: 'ControlButtonParticipantsContextualMenuItem',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
@@ -94,21 +83,14 @@ export const CallControls = (props) => {
             });
         }
         /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-        if (!isRoomsCallTrampoline()) {
+        if (!isRoomsCallTrampoline(adapter)) {
             items.push({
                 key: 'holdButtonKey',
                 text: localeStrings.component.strings.holdButton.tooltipOffContent,
                 onClick: () => {
                     holdButtonProps.onToggleHold();
                 },
-                iconProps: {
-                    iconName: 'HoldCallContextualMenuItem',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
@@ -125,14 +107,7 @@ export const CallControls = (props) => {
                 onClick: () => {
                     setShowDialpad(true);
                 },
-                iconProps: {
-                    iconName: 'PeoplePaneOpenDialpad',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 }
@@ -152,43 +127,33 @@ export const CallControls = (props) => {
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
-    let screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
-    /* @conditional-compile-remove(rooms) */
-    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
-    let microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
-    /* @conditional-compile-remove(rooms) */
-    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
-    let cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
-    /* @conditional-compile-remove(rooms) */
-    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
-    return React.createElement(Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
+    const screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    const microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    const cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
+    return (React.createElement(Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
+        /* @conditional-compile-remove(PSTN-calls) */
         React.createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React.createElement(Stack.Item, null,
-            React.createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) }),
-                cameraButtonIsEnabled && React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) }),
-                screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) }),
-                isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton) && /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    !props.isMobile && React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) }) && /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    React.createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) }),
-                isEnabled(options === null || options === void 0 ? void 0 : options.devicesButton) && React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) }),
-                isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: {
-                        hidden: true
-                    }, menuProps: {
-                        items: moreButtonContextualMenuItems()
-                    }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' }),
+            React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
+                microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
+                isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton) &&
+                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                    !props.isMobile && (React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                React.createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled(options === null || options === void 0 ? void 0 : options.devicesButton) && (React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
-                isEnabled(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType }))));
+                isEnabled(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled = (option) => option !== false;
 /** @private */
-export const isRoomsCallTrampoline = () => {
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+export const isRoomsCallTrampoline = (adapter) => {
     /* @conditional-compile-remove(rooms) */
-    return !!rolePermissions.role;
+    return adapter.getState().isRoomsCall;
     return false;
 };
 //# sourceMappingURL=CallControls.js.map