@azure/communication-react 1.3.2-alpha-202207200014.0 → 1.3.2-alpha-202207230015.0

package/dist/communication-react.d.ts

@@ -973,6 +973,10 @@ export declare interface CallCompositeProps extends BaseCompositeProps<CallCompo
      * Flags to enable/disable or customize UI elements of the {@link CallComposite}.
      */
     options?: CallCompositeOptions;
+    /**
+     * Set this to enable/disable capacities for different roles
+     */
+    role?: Role;
 }
 
 /**
@@ -1147,6 +1151,42 @@ export declare interface CallCompositeStrings {
      * Tooltip text used to inform a user that toggling microphone in lobby is not supported.
      */
     microphoneToggleInLobbyNotAllowed: string;
+    /**
+     * Side pane People section Title.
+     */
+    peoplePaneTitle: string;
+    /**
+     * Aria label string for return to call back button
+     */
+    returnToCallButtonAriaLabel?: string;
+    /**
+     * Aria Description string for return to call button
+     */
+    returnToCallButtonAriaDescription?: string;
+    /**
+     * control bar People button label
+     */
+    peopleButtonLabel: string;
+    /**
+     * control bar Chat button label.
+     */
+    chatButtonLabel: string;
+    /**
+     * Label for SidePaneHeader dismiss button
+     */
+    dismissSidePaneButtonLabel?: string;
+    /**
+     * Side pane People section subheader.
+     */
+    peoplePaneSubTitle: string;
+    /**
+     * Label for button to copy invite link
+     */
+    copyInviteLinkButtonLabel: string;
+    /**
+     * Label for menu item to remove participant
+     */
+    removeMenuLabel: string;
 }
 
 /**
@@ -6047,6 +6087,11 @@ export declare interface RemoteVideoStreamState {
     view?: VideoStreamRendererViewState;
 }
 
+/**
+ * @beta
+ */
+export declare type Role = 'Presenter' | 'Attendee' | 'Consumer';
+
 /**
  * A button to start / stop screen sharing.
  *

package/dist/dist-cjs/communication-react/index.js

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.2-alpha-202207200014.0';
+var telemetryVersion = '1.3.2-alpha-202207230015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7752,6 +7752,60 @@ const HoldButton = (props) => {
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon })));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ */
+const presenterPermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: true,
+    participantList: true
+};
+/**
+ * @internal
+ */
+const consumerPermissions = {
+    cameraButton: false,
+    microphoneButton: false,
+    screenShare: false,
+    participantList: false
+};
+/**
+ * @internal
+ */
+const attendeePermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: false,
+    participantList: true
+};
+/**
+ * @internal
+ */
+const PermissionsContext = React.createContext(presenterPermissions);
+/**
+ * @internal
+ */
+const _PermissionsProvider = (props) => {
+    const { permissions, children } = props;
+    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
+};
+/**
+ * @internal
+ */
+const _getPermissions = (role) => {
+    if (role === 'Consumer') {
+        return consumerPermissions;
+    }
+    else if (role === 'Attendee') {
+        return attendeePermissions;
+    }
+    else {
+        return presenterPermissions;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -12403,7 +12457,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -15629,26 +15683,41 @@ const MainScreen = (props) => {
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
     const locale = useLocale();
+    let pageElement;
     switch (page) {
         case 'configuration':
-            return (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
+            pageElement = (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     adapter.joinCall();
                 } }));
+            break;
         case 'accessDeniedTeamsMeeting':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
+            break;
         case 'removedFromCall':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
+            break;
         case 'joinCallFailedDueToNoNetwork':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
+            break;
         case 'leftCall':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageLeftCall", title: locale.strings.call.leftCallTitle, moreDetails: locale.strings.call.leftCallMoreDetails, dataUiId: 'left-call-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageLeftCall", title: locale.strings.call.leftCallTitle, moreDetails: locale.strings.call.leftCallMoreDetails, dataUiId: 'left-call-page' }));
+            break;
         case 'lobby':
-            return React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, options: props.options });
+            pageElement = React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, options: props.options });
+            break;
         case 'call':
-            return (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, options: props.options }));
+            pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, options: props.options }));
+            break;
         default:
             throw new Error('Invalid call composite page');
     }
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _getPermissions(props.role);
+    // default retElement for stable version
+    let retElement = pageElement;
+    /* @conditional-compile-remove(rooms) */
+    retElement = React__default['default'].createElement(_PermissionsProvider, { permissions: permissions }, pageElement);
+    return retElement;
 };
 /**
  * A customizable UI composite for calling experience.
@@ -15660,7 +15729,9 @@ const MainScreen = (props) => {
  * @public
  */
 const CallComposite = (props) => {
-    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
+    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop', 
+    /* @conditional-compile-remove(rooms) */
+    role } = props;
     React.useEffect(() => {
         (() => __awaiter$6(void 0, void 0, void 0, function* () {
             yield adapter.askDevicePermission({ video: true, audio: true });
@@ -15676,7 +15747,9 @@ const CallComposite = (props) => {
     return (React__default['default'].createElement("div", { className: mainScreenContainerClassName },
         React__default['default'].createElement(BaseProvider, Object.assign({}, props),
             React__default['default'].createElement(CallAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, options: options })))));
+                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, options: options, 
+                    /* @conditional-compile-remove(rooms) */
+                    role: role })))));
 };
 
 /**
@@ -17327,6 +17400,61 @@ const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplay
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
+ *
+ * @private
+ */
+const MODAL_PIP_DEFAULT_PX = {
+    rightPositionPx: 16,
+    topPositionPx: 52,
+    widthPx: 88,
+    heightPx: 128
+};
+/**
+ * @private
+ */
+const getPipStyles = (theme) => ({
+    modal: {
+        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
+            // Above the message thread / people pane.
+            zIndex: 2 }, (theme.rtl
+            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
+            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+    }
+});
+/**
+ * @private
+ */
+const PIPContainerStyle = {
+    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+};
+/**
+ * @private
+ */
+const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
+/**
+ * @private
+ */
+const modalStyle = {
+    main: {
+        minWidth: 'min-content',
+        minHeight: 'min-content',
+        position: 'absolute',
+        overflow: 'hidden',
+        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
+        pointerEvents: 'auto',
+        touchAction: 'none'
+    },
+    root: {
+        width: '100%',
+        height: '100%',
+        // pointer events for root Modal div set to none to make descendants interactive
+        pointerEvents: 'none'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Drag options for Modal in {@link ModalLocalAndRemotePIP} component
@@ -17359,27 +17487,6 @@ const ModalLocalAndRemotePIP = (props) => {
     return (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
         React__default['default'].createElement(_ModalLocalAndRemotePIP, Object.assign({}, props), props.children)));
 };
-const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
-};
-const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
-const modalStyle = {
-    main: {
-        minWidth: 'min-content',
-        minHeight: 'min-content',
-        position: 'absolute',
-        overflow: 'hidden',
-        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
-        pointerEvents: 'auto',
-        touchAction: 'none'
-    },
-    root: {
-        width: '100%',
-        height: '100%',
-        // pointer events for root Modal div set to none to make descendants interactive
-        pointerEvents: 'none'
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17484,7 +17591,7 @@ const PeoplePaneContent = (props) => {
 /**
  * Create default contextual menu items for particant
  * @param participant - participant to create contextual menu items for
- * @param callWithChatStrings - localized strings for menu item text
+ * @param strings - localized strings for menu item text
  * @param onRemoveParticipant - callback to remove participant
  * @param localParticipantUserId - Local participant user id
  * @returns - IContextualMenuItem[]
@@ -17580,6 +17687,34 @@ const mobilePaneButtonStyles = {
     },
     labelChecked: { fontWeight: 600 }
 };
+/**
+ * @private
+ */
+const hiddenStyles = {
+    root: {
+        display: 'none'
+    }
+};
+/**
+ * @private
+ */
+const sidePaneStyles = {
+    root: {
+        height: '100%',
+        padding: '0.5rem 0.25rem',
+        maxWidth: '21.5rem'
+    }
+};
+/**
+ * @private
+ */
+const availableSpaceStyles = { root: { width: '100%', height: '100%' } };
+/**
+ * @private
+ */
+const sidePaneTokens = {
+    childrenGap: '0.5rem'
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17613,6 +17748,34 @@ const TabHeader = (props) => {
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
+const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
+    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
+    const modalHostWidth = _useContainerWidth(modalHostRef);
+    const modalHostHeight = _useContainerHeight(modalHostRef);
+    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
+            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
+        }, [modalHostWidth, rtl]);
+    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
+            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
+        }, [modalHostHeight, modalHostWidth, rtl]);
+    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
+};
+
 var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -17654,23 +17817,7 @@ const CallWithChatPane = (props) => {
     });
     const peopleContent = (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
         React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings }))));
-    // Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
-    const modalLayerHostElement = document.getElementById(props.modalLayerHostId);
-    const modalHostRef = React.useRef(modalLayerHostElement);
-    const modalHostWidth = _useContainerWidth(modalHostRef);
-    const modalHostHeight = _useContainerHeight(modalHostRef);
-    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
-        ? undefined
-        : {
-            x: props.rtl ? -1 * modalPipRightPositionPx : modalPipRightPositionPx - modalHostWidth + modalPipWidthPx,
-            y: -1 * modalPipTopPositionPx
-        }, [modalHostWidth, props.rtl]);
-    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
-        ? undefined
-        : {
-            x: props.rtl ? modalHostWidth - modalPipRightPositionPx - modalPipWidthPx : modalPipRightPositionPx,
-            y: modalHostHeight - modalPipTopPositionPx - modalPipHeightPx
-        }, [modalHostHeight, modalHostWidth, props.rtl]);
+    const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
     const dataUiId = props.activePane === 'chat'
         ? 'call-with-chat-composite-chat-pane'
@@ -17684,37 +17831,10 @@ const CallWithChatPane = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles }, peopleContent)))),
-        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minDragPosition, maxDragPosition: maxDragPosition })),
+        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
         drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
-const hiddenStyles = {
-    root: {
-        display: 'none'
-    }
-};
-const sidePaneStyles = {
-    root: {
-        height: '100%',
-        padding: '0.5rem 0.25rem',
-        maxWidth: '21.5rem'
-    }
-};
-const availableSpaceStyles = { root: { width: '100%', height: '100%' } };
-const sidePaneTokens = {
-    childrenGap: '0.5rem'
-};
-const modalPipRightPositionPx = 16;
-const modalPipTopPositionPx = 52;
-const modalPipWidthPx = 88;
-const modalPipHeightPx = 128;
-const getPipStyles = (theme) => ({
-    modal: {
-        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
-            // Above the message thread / people pane.
-            zIndex: 2 }, (theme.rtl ? { left: _pxToRem(modalPipRightPositionPx) } : { right: _pxToRem(modalPipRightPositionPx) })), { top: _pxToRem(modalPipTopPositionPx) })
-    }
-});
 
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {