@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js

@@ -1,6 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React from 'react';
+var __awaiter = (this && this.__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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useCallback, useMemo } from 'react';
 /* @conditional-compile-remove(call-readiness) */
 import { useState } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
@@ -13,7 +22,8 @@ import { DevicesButton, ErrorBar } from "../../../../../react-components/src";
 /* @conditional-compile-remove(rooms) */
 import { _usePermissions } from "../../../../../react-components/src";
 import { getCallingSelector } from "../../../../../calling-component-bindings/src";
-import { Stack } from '@fluentui/react';
+import { Panel, Stack } from '@fluentui/react';
+import { fillWidth, panelFocusProps, panelStyles } from '../styles/CallConfiguration.styles';
 import { LocalPreview } from '../components/LocalPreview';
 import { callDetailsStyleDesktop, callDetailsStyleMobile, configurationStackTokensDesktop, configurationStackTokensMobile, configurationContainerStyleDesktop, configurationContainerStyleMobile, selectionContainerStyle, startCallButtonContainerStyleDesktop, startCallButtonContainerStyleMobile, startCallButtonStyleMobile, titleContainerStyleDesktop, titleContainerStyleMobile, callDetailsContainerStylesDesktop } from '../styles/CallConfiguration.styles';
 import { useLocale } from '../../localization';
@@ -25,13 +35,19 @@ import { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorB
 import { getDevicePermissionState } from '../utils';
 /* @conditional-compile-remove(call-readiness) */
 import { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';
+/* @conditional-compile-remove(video-background-effects) */
+import { useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';
+import { SidePane } from '../components/SidePane/SidePane';
+/* @conditional-compile-remove(video-background-effects) */
+import { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';
+/* @conditional-compile-remove(video-background-effects) */
+import { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';
 /**
  * @private
  */
 export const ConfigurationPage = (props) => {
     var _a, _b;
-    const { startCallHandler, mobileView, 
-    /* @conditional-compile-remove(call-readiness) */ modalLayerHostId, 
+    const { startCallHandler, mobileView, modalLayerHostId, 
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
@@ -53,11 +69,17 @@ export const ConfigurationPage = (props) => {
     let disableStartCallButton = !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0;
     /* @conditional-compile-remove(rooms) */
     const rolePermissions = _usePermissions();
+    /* @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) {
         errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {
+        errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'unableToStartVideoEffect') });
+    }
     /* @conditional-compile-remove(rooms) */
     if (!rolePermissions.microphoneButton) {
         // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button
@@ -76,7 +98,7 @@ export const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
+    const title = (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -117,6 +139,16 @@ export const ConfigurationPage = (props) => {
     }, 2000);
     /* @conditional-compile-remove(call-readiness) */
     const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
+    /* @conditional-compile-remove(video-background-effects) */
+    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView);
+    const startCall = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        /* @conditional-compile-remove(video-background-effects) */
+        closeVideoEffectsPane();
+        startCallHandler();
+    }), [startCallHandler, /* @conditional-compile-remove(video-background-effects) */ closeVideoEffectsPane]);
+    const panelLayerProps = useMemo(() => ({
+        hostId: modalLayerHostId
+    }), [modalLayerHostId]);
     return (React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React.createElement(Stack, { styles: bannerNotificationStyles },
             React.createElement(ConfigurationPageErrorBar
@@ -134,11 +166,7 @@ export const ConfigurationPage = (props) => {
                 onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values
-        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React.createElement(CallReadinessModal
-        /* @conditional-compile-remove(call-readiness) */
-        , { 
-            /* @conditional-compile-remove(call-readiness) */
-            modalLayerHostId: modalLayerHostId, mobileView: mobileView, 
+        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React.createElement(CallReadinessModal, { modalLayerHostId: modalLayerHostId, mobileView: mobileView, 
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         /* @conditional-compile-remove(call-readiness) */
@@ -150,26 +178,35 @@ export const ConfigurationPage = (props) => {
             modalLayerHostId: modalLayerHostId, mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
-        React.createElement(Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
-            mobileWithPreview && (React.createElement(Stack.Item, null,
-                title,
-                callDescription)),
-            localPreviewTrampoline(mobileWithPreview, 
-            /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton),
-            React.createElement(Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                !mobileWithPreview && (React.createElement(React.Fragment, null,
-                    React.createElement(Stack.Item, { styles: callDetailsContainerStylesDesktop },
-                        title,
-                        callDescription),
-                    React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
-                        /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
-                        /* @conditional-compile-remove(call-readiness) */ audioState), 
-                        /* @conditional-compile-remove(call-readiness) */
-                        onClickEnableDevicePermission: () => {
-                            setIsPermissionsModalDismissed(true);
-                        } })))),
-                React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                    React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
+        React.createElement(Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
+            React.createElement(Stack, { className: fillWidth, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+                mobileWithPreview && (React.createElement(Stack.Item, null,
+                    title,
+                    callDescription)),
+                localPreviewTrampoline(mobileWithPreview, 
+                /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton),
+                React.createElement(Stack, { className: mobileView ? undefined : selectionContainerStyle },
+                    !mobileWithPreview && (React.createElement(React.Fragment, null,
+                        React.createElement(Stack.Item, { styles: callDetailsContainerStylesDesktop },
+                            title,
+                            callDescription),
+                        React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
+                            /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
+                            /* @conditional-compile-remove(call-readiness) */ audioState), 
+                            /* @conditional-compile-remove(call-readiness) */
+                            onClickEnableDevicePermission: () => {
+                                setIsPermissionsModalDismissed(true);
+                            }, 
+                            /* @conditional-compile-remove(video-background-effects) */
+                            onVideoEffectsClick: toggleVideoEffectsPane })))),
+                    React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
+                        React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
+            React.createElement(Panel
+            /* @conditional-compile-remove(video-background-effects) */
+            , { 
+                /* @conditional-compile-remove(video-background-effects) */
+                isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps },
+                React.createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer })))));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { DevicesButton, ErrorBar } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions, _Permissions } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Stack } from '@fluentui/react';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyleDesktop,\n  configurationContainerStyleMobile,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile,\n  callDetailsContainerStylesDesktop\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  /* @conditional-compile-remove(call-readiness) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    /* @conditional-compile-remove(call-readiness) */ modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick\n  } = props;\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(setVideoState, setAudioState);\n\n  let errorBarProps = usePropsFor(ErrorBar);\n  const adapter = useAdapter();\n  const deviceState = adapter.getState().devices;\n  /* @conditional-compile-remove(unsupported-browser) */\n  const environmentInfo = adapter.getState().environmentInfo;\n\n  let disableStartCallButton = !microphonePermissionGranted || deviceState.microphones?.length === 0;\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\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) {\n    errorBarProps = {\n      ...errorBarProps,\n      activeErrorMessages: errorBarProps.activeErrorMessages.filter(\n        (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n      )\n    };\n  }\n  /* @conditional-compile-remove(rooms) */\n  if (!rolePermissions.microphoneButton) {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || deviceState.cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title = (\n    <Stack.Item className={mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop}>\n      {locale.strings.call.configurationPageTitle}\n    </Stack.Item>\n  );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  let mobileWithPreview = mobileView;\n  /* @conditional-compile-remove(rooms) */\n  mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = {\n    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n    camera:\n      videoState && videoState !== 'unsupported'\n        ? cameraPermissionGranted !== false\n          ? videoState\n          : 'denied'\n        : cameraPermissionGranted !== false\n        ? cameraPermissionGranted\n          ? 'granted'\n          : 'prompt'\n        : 'denied',\n    microphone:\n      audioState && audioState !== 'unsupported'\n        ? microphonePermissionGranted !== false\n          ? audioState\n          : 'denied'\n        : microphonePermissionGranted !== false\n        ? microphonePermissionGranted\n          ? 'granted'\n          : 'prompt'\n        : 'denied'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  setTimeout(() => {\n    setMinimumFallbackTimerElapsed(true);\n  }, 2000);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  return (\n    <Stack className={mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={errorBarProps}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack\n        grow\n        horizontal={!mobileWithPreview}\n        horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n        verticalAlign=\"center\"\n        tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n      >\n        {mobileWithPreview && (\n          <Stack.Item>\n            {title}\n            {callDescription}\n          </Stack.Item>\n        )}\n        {localPreviewTrampoline(\n          mobileWithPreview,\n          /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton\n        )}\n        <Stack className={mobileView ? undefined : selectionContainerStyle}>\n          {!mobileWithPreview && (\n            <>\n              <Stack.Item styles={callDetailsContainerStylesDesktop}>\n                {title}\n                {callDescription}\n              </Stack.Item>\n              <LocalDeviceSettings\n                {...options}\n                {...localDeviceSettingsHandlers}\n                cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                  cameraPermissionGranted,\n                  /* @conditional-compile-remove(call-readiness) */ videoState\n                )}\n                microphonePermissionGranted={micPermissionGrantedTrampoline(\n                  microphonePermissionGranted,\n                  /* @conditional-compile-remove(call-readiness) */ audioState\n                )}\n                /* @conditional-compile-remove(call-readiness) */\n                onClickEnableDevicePermission={() => {\n                  setIsPermissionsModalDismissed(true);\n                }}\n              />\n            </>\n          )}\n          <Stack\n            styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n          >\n            <StartCallButton\n              className={mobileWithPreview ? startCallButtonStyleMobile : undefined}\n              onClick={startCallHandler}\n              disabled={disableStartCallButton}\n            />\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element | undefined => {\n  /* @conditional-compile-remove(rooms) */\n  if (doNotShow) {\n    return undefined;\n  }\n  return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}
+{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { DevicesButton, ErrorBar } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions, _Permissions } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Panel, Stack } from '@fluentui/react';\nimport { fillWidth, panelFocusProps, panelStyles } from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyleDesktop,\n  configurationContainerStyleMobile,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile,\n  callDetailsContainerStylesDesktop\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick\n  } = props;\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(setVideoState, setAudioState);\n\n  let errorBarProps = usePropsFor(ErrorBar);\n  const adapter = useAdapter();\n  const deviceState = adapter.getState().devices;\n  /* @conditional-compile-remove(unsupported-browser) */\n  const environmentInfo = adapter.getState().environmentInfo;\n\n  let disableStartCallButton = !microphonePermissionGranted || deviceState.microphones?.length === 0;\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\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) {\n    errorBarProps = {\n      ...errorBarProps,\n      activeErrorMessages: errorBarProps.activeErrorMessages.filter(\n        (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n      )\n    };\n  }\n\n  /* @conditional-compile-remove(video-background-effects) */\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    errorBarProps = {\n      ...errorBarProps,\n      activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'unableToStartVideoEffect')\n    };\n  }\n  /* @conditional-compile-remove(rooms) */\n  if (!rolePermissions.microphoneButton) {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || deviceState.cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title = (\n    <Stack.Item\n      className={mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop}\n      role=\"heading\"\n      aria-level={1}\n    >\n      {locale.strings.call.configurationPageTitle}\n    </Stack.Item>\n  );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  let mobileWithPreview = mobileView;\n  /* @conditional-compile-remove(rooms) */\n  mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = {\n    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n    camera:\n      videoState && videoState !== 'unsupported'\n        ? cameraPermissionGranted !== false\n          ? videoState\n          : 'denied'\n        : cameraPermissionGranted !== false\n        ? cameraPermissionGranted\n          ? 'granted'\n          : 'prompt'\n        : 'denied',\n    microphone:\n      audioState && audioState !== 'unsupported'\n        ? microphonePermissionGranted !== false\n          ? audioState\n          : 'denied'\n        : microphonePermissionGranted !== false\n        ? microphonePermissionGranted\n          ? 'granted'\n          : 'prompt'\n        : 'denied'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  setTimeout(() => {\n    setMinimumFallbackTimerElapsed(true);\n  }, 2000);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n    props.updateSidePaneRenderer,\n    mobileView\n  );\n\n  const startCall = useCallback(async () => {\n    /* @conditional-compile-remove(video-background-effects) */\n    closeVideoEffectsPane();\n    startCallHandler();\n  }, [startCallHandler, /* @conditional-compile-remove(video-background-effects) */ closeVideoEffectsPane]);\n\n  const panelLayerProps = useMemo(\n    () => ({\n      hostId: modalLayerHostId\n    }),\n    [modalLayerHostId]\n  );\n\n  return (\n    <Stack className={mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={errorBarProps}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack\n          className={fillWidth}\n          horizontal={!mobileWithPreview}\n          horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n          verticalAlign=\"center\"\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          {mobileWithPreview && (\n            <Stack.Item>\n              {title}\n              {callDescription}\n            </Stack.Item>\n          )}\n          {localPreviewTrampoline(\n            mobileWithPreview,\n            /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton\n          )}\n          <Stack className={mobileView ? undefined : selectionContainerStyle}>\n            {!mobileWithPreview && (\n              <>\n                <Stack.Item styles={callDetailsContainerStylesDesktop}>\n                  {title}\n                  {callDescription}\n                </Stack.Item>\n                <LocalDeviceSettings\n                  {...options}\n                  {...localDeviceSettingsHandlers}\n                  cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                    cameraPermissionGranted,\n                    /* @conditional-compile-remove(call-readiness) */ videoState\n                  )}\n                  microphonePermissionGranted={micPermissionGrantedTrampoline(\n                    microphonePermissionGranted,\n                    /* @conditional-compile-remove(call-readiness) */ audioState\n                  )}\n                  /* @conditional-compile-remove(call-readiness) */\n                  onClickEnableDevicePermission={() => {\n                    setIsPermissionsModalDismissed(true);\n                  }}\n                  /* @conditional-compile-remove(video-background-effects) */\n                  onVideoEffectsClick={toggleVideoEffectsPane}\n                />\n              </>\n            )}\n            <Stack\n              styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n            >\n              <StartCallButton\n                className={mobileWithPreview ? startCallButtonStyleMobile : undefined}\n                onClick={startCall}\n                disabled={disableStartCallButton}\n              />\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n          /* @conditional-compile-remove(video-background-effects) */\n          isOpen={isVideoEffectsPaneOpen}\n          hasCloseButton={false}\n          isBlocking={false}\n          isHiddenOnDismiss={false}\n          styles={panelStyles}\n          focusTrapZoneProps={panelFocusProps}\n          layerProps={panelLayerProps}\n        >\n          <SidePane mobileView={props.mobileView} updateSidePaneRenderer={props.updateSidePaneRenderer} />\n        </Panel>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element | undefined => {\n  /* @conditional-compile-remove(rooms) */\n  if (doNotShow) {\n    return undefined;\n  }\n  return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { CallCompositeOptions } from '../../../index-public';
+import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
+import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
 /**
  * @beta
  */
@@ -7,6 +9,8 @@ export interface HoldPageProps {
     mobileView: boolean;
     options?: CallCompositeOptions;
     modalLayerHostId: string;
+    updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
 }
 /**
  * @beta

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js

@@ -31,8 +31,6 @@ export const HoldPage = (props) => {
         errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, 
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React.createElement(HoldPane, null), dataUiId: 'hold-page' }));
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React.createElement(HoldPane, null), dataUiId: 'hold-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
 };
 //# sourceMappingURL=HoldPage.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoldPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/HoldPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAY5E;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,IAAI,kBAAkB,GAAG,KAAK,CAAC,UAAU;QACvC,CAAC,CAAC,2BAA2B,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;QAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEhC,kBAAkB,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;QAC3D,cAAc;QACd,kBAAkB;QAClB,eAAe;QACf,mBAAmB;QACnB,6CAA6C;QAC7C,mDAAmD;QACnD,YAAY;KACb,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAe,IACd,qBAAqB,EAAE,EAAE,OAAO,EAAE;QAClC,8GAA8G;QAC9G,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,MAAK,KAAK,oCAAS,aAAa,KAAE,oBAAoB,EAAE,IAAI,GAAE,EACpG,gBAAgB,EAAE;YAChB,OAAO,EAAE,kBAAkB;YAC3B,sBAAsB,EAAE,KAAK,CAAC,UAAU;SACzC,EACD,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,6CAA6C,CAAC,mDAAmD;QACjG,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,sBAAsB,EAAE,GAAG,EAAE,CAAC,oBAAC,QAAQ,OAAG,EAC1C,QAAQ,EAAE,WAAW,GACrB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ErrorBar } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeOptions } from '../../../index-public';\nimport { useLocale } from '../../localization';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { HoldPane } from '../components/HoldPane';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { disableCallControls, reduceCallControlsForMobile } from '../utils';\n\n/**\n * @beta\n */\nexport interface HoldPageProps {\n  mobileView: boolean;\n  options?: CallCompositeOptions;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n}\n\n/**\n * @beta\n */\nexport const HoldPage = (props: HoldPageProps): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const strings = useLocale().strings.call;\n\n  let callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  callControlOptions = disableCallControls(callControlOptions, [\n    'cameraButton',\n    'microphoneButton',\n    'devicesButton',\n    'screenShareButton',\n    /* @conditional-compile-remove(PSTN-calls) */\n    /* @conditional-compile-remove(one-to-n-calling) */\n    'holdButton'\n  ]);\n\n  return (\n    <CallArrangement\n      complianceBannerProps={{ strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={props.options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => <HoldPane />}\n      dataUiId={'hold-page'}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"HoldPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/HoldPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAe5E;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,IAAI,kBAAkB,GAAG,KAAK,CAAC,UAAU;QACvC,CAAC,CAAC,2BAA2B,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;QAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEhC,kBAAkB,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;QAC3D,cAAc;QACd,kBAAkB;QAClB,eAAe;QACf,mBAAmB;QACnB,6CAA6C;QAC7C,mDAAmD;QACnD,YAAY;KACb,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAe,IACd,qBAAqB,EAAE,EAAE,OAAO,EAAE;QAClC,8GAA8G;QAC9G,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,MAAK,KAAK,oCAAS,aAAa,KAAE,oBAAoB,EAAE,IAAI,GAAE,EACpG,gBAAgB,EAAE;YAChB,OAAO,EAAE,kBAAkB;YAC3B,sBAAsB,EAAE,KAAK,CAAC,UAAU;SACzC,EACD,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,sBAAsB,EAAE,GAAG,EAAE,CAAC,oBAAC,QAAQ,OAAG,EAC1C,QAAQ,EAAE,WAAW,EACrB,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,GAC9C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ErrorBar } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeOptions } from '../../../index-public';\nimport { useLocale } from '../../localization';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { HoldPane } from '../components/HoldPane';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { disableCallControls, reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @beta\n */\nexport interface HoldPageProps {\n  mobileView: boolean;\n  options?: CallCompositeOptions;\n  modalLayerHostId: string;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/**\n * @beta\n */\nexport const HoldPage = (props: HoldPageProps): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const strings = useLocale().strings.call;\n\n  let callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  callControlOptions = disableCallControls(callControlOptions, [\n    'cameraButton',\n    'microphoneButton',\n    'devicesButton',\n    'screenShareButton',\n    /* @conditional-compile-remove(PSTN-calls) */\n    /* @conditional-compile-remove(one-to-n-calling) */\n    'holdButton'\n  ]);\n\n  return (\n    <CallArrangement\n      complianceBannerProps={{ strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={props.options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => <HoldPane />}\n      dataUiId={'hold-page'}\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { CallCompositeOptions } from '../CallComposite';
+import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
+import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
 /**
  * @private
  */
@@ -7,6 +9,8 @@ export interface LobbyPageProps {
     mobileView: boolean;
     modalLayerHostId: string;
     options?: CallCompositeOptions;
+    mobileChatTabHeader: MobileChatSidePaneTabHeaderProps | undefined;
+    updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js

@@ -35,9 +35,7 @@ export const LobbyPage = (props) => {
         errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, 
-        /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page' }));
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
 };
 const overlayProps = (strings, inLobby, remoteParticipants) => {
     /**

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LobbyPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/LobbyPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAqB,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAyB,MAAM,6BAA6B,CAAC;AAa7F;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,SAAS,KAAK,SAAS,CAAC;IAExC,MAAM,YAAY,GAAG,MAAA,WAAW,CAAC,qBAAqB,CAAC,mCAAI,EAAE,CAAC;IAE9D,yBAAyB,CAAC,UAAU,CAAC,2BAA2B,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAEvF,yDAAyD;IACzD,IAAI,kBAAkB,GAAG,KAAK,CAAC,UAAU;QACvC,CAAC,CAAC,2BAA2B,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;QAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEhC,kBAAkB,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1G,OAAO,CACL,oBAAC,eAAe,IACd,qBAAqB,EAAE,EAAE,OAAO,EAAE;QAClC,8GAA8G;QAC9G,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,MAAK,KAAK,oCAAS,aAAa,KAAE,oBAAoB,EAAE,IAAI,GAAE,EACpG,gBAAgB,EAAE;YAChB,OAAO,EAAE,kBAAkB;YAC3B,sBAAsB,EAAE,KAAK,CAAC,UAAU;SACzC,EACD,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,mDAAmD;QACnD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAC5B,oBAAC,SAAS,oBAAK,UAAU,IAAE,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CACzG,EACD,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,OAA6B,EAC7B,OAAgB,EAChB,kBAA4C,EACzB,EAAE;IACrB;;;;;;;;OAQG;IACH,MAAM,uBAAuB,GAC3B,kBAAkB,CAAC,CAAC,CAAC;QACrB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/D,kBAAkB,CAAC,MAAM,KAAK,CAAC;QAC7B,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,OAAO;QACZ,CAAC,CAAC,+BAA+B,CAAC,OAAO,CAAC;QAC1C,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,wBAAwB,CAAC,OAAO,EAAE,uBAAuB,CAAC;YAC5D,CAAC,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,OAA6B,EAAqB,EAAE,CAAC,CAAC;IAC1F,KAAK,EAAE,OAAO,CAAC,gCAAgC;IAC/C,WAAW,EAAE,OAAO,CAAC,sCAAsC;IAC3D,WAAW,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,6BAA6B,GAAG;CAC1E,CAAC,CAAC;AAEH,MAAM,+BAA+B,GAAG,CAAC,OAA6B,EAAqB,EAAE,CAAC,CAAC;IAC7F,KAAK,EAAE,OAAO,CAAC,mCAAmC;IAClD,WAAW,EAAE,OAAO,CAAC,yCAAyC;IAC9D,WAAW,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,gCAAgC,GAAG;CAC7E,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,CAC/B,OAA6B,EAC7B,WAAmC,EAChB,EAAE;IACrB,IAAI,uBAAuB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE;QACnD,OAAO;YACL,KAAK,EAAG,WAAW,CAAC,UAAoC,CAAC,WAAW;YACpE,WAAW,EAAE,6BAA6B,CAAC,OAAO,CAAC;SACpD,CAAC;KACH;SAAM;QACL,OAAO;YACL,KAAK,EAAE,6BAA6B,CAAC,OAAO,CAAC;SAC9C,CAAC;KACH;AACH,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,OAA6B,EAAU,EAAE;IAC9E,6CAA6C,CAAC,mDAAmD;IACjG,OAAO,OAAO,CAAC,2BAA2B,CAAC;IAC3C,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { ErrorBar } from '@internal/react-components';\nimport { useSelector } from '../hooks/useSelector';\nimport { lobbySelector } from '../selectors/lobbySelector';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { LobbyOverlayProps, LobbyTile } from '../components/LobbyTile';\nimport { getCallStatus, getRemoteParticipants } from '../selectors/baseSelectors';\nimport { disableCallControls, reduceCallControlsForMobile } from '../utils';\nimport { CallCompositeStrings } from '../Strings';\nimport { useLocale } from '../../localization';\nimport { useLocalVideoStartTrigger } from '../components/MediaGallery';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { isPhoneNumberIdentifier, PhoneNumberIdentifier } from '@azure/communication-common';\nimport { RemoteParticipantState } from '@internal/calling-stateful-client';\n\n/**\n * @private\n */\nexport interface LobbyPageProps {\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const LobbyPage = (props: LobbyPageProps): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const lobbyProps = useSelector(lobbySelector);\n  const strings = useLocale().strings.call;\n\n  const callState = useSelector(getCallStatus);\n  const inLobby = callState === 'InLobby';\n\n  const participants = useSelector(getRemoteParticipants) ?? {};\n\n  useLocalVideoStartTrigger(lobbyProps.localParticipantVideoStream.isAvailable, inLobby);\n\n  // Reduce the controls shown when mobile view is enabled.\n  let callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);\n\n  return (\n    <CallArrangement\n      complianceBannerProps={{ strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={props.options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => (\n        <LobbyTile {...lobbyProps} overlayProps={overlayProps(strings, inLobby, Object.values(participants))} />\n      )}\n      dataUiId={'lobby-page'}\n    />\n  );\n};\n\nconst overlayProps = (\n  strings: CallCompositeStrings,\n  inLobby: boolean,\n  remoteParticipants: RemoteParticipantState[]\n): LobbyOverlayProps => {\n  /**\n   * Only grab the first participant because there will only be one in this situation.\n   * when starting a call with multiple people the call goes to the connected state and composite goes directly to\n   * videoGallery.\n   *\n   * We also need to check the participant state since in a group call the remote participants array will populate just before\n   * the user joins. In this situation we also check the participant states. in a groupCall the state of the participants\n   * will be 'Idle'.\n   */\n  const outboundCallParticipant: RemoteParticipantState | undefined =\n    remoteParticipants[0] &&\n    ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) &&\n    remoteParticipants.length === 1\n      ? remoteParticipants[0]\n      : undefined;\n\n  return inLobby\n    ? overlayPropsWaitingToBeAdmitted(strings)\n    : outboundCallParticipant\n    ? overlayPropsOutboundCall(strings, outboundCallParticipant)\n    : overlayPropsConnectingToCall(strings);\n};\n\nconst overlayPropsConnectingToCall = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenConnectingToCallTitle,\n  moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenConnectingToCall\" />\n});\n\nconst overlayPropsWaitingToBeAdmitted = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenWaitingToBeAdmittedTitle,\n  moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenWaitingToBeAdmitted\" />\n});\n\nconst overlayPropsOutboundCall = (\n  strings: CallCompositeStrings,\n  participant: RemoteParticipantState\n): LobbyOverlayProps => {\n  if (isPhoneNumberIdentifier(participant.identifier)) {\n    return {\n      title: (participant.identifier as PhoneNumberIdentifier).phoneNumber,\n      moreDetails: outboundCallStringsTrampoline(strings)\n    };\n  } else {\n    return {\n      title: outboundCallStringsTrampoline(strings)\n    };\n  }\n};\n\nconst outboundCallStringsTrampoline = (strings: CallCompositeStrings): string => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return strings.outboundCallingNoticeString;\n  return '';\n};\n\"../../../../../react-components/src\"\"../../../../../calling-stateful-client/src\""]}
+{"version":3,"file":"LobbyPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/LobbyPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { ErrorBar } from '@internal/react-components';\nimport { useSelector } from '../hooks/useSelector';\nimport { lobbySelector } from '../selectors/lobbySelector';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { LobbyOverlayProps, LobbyTile } from '../components/LobbyTile';\nimport { getCallStatus, getRemoteParticipants } from '../selectors/baseSelectors';\nimport { disableCallControls, reduceCallControlsForMobile } from '../utils';\nimport { CallCompositeStrings } from '../Strings';\nimport { useLocale } from '../../localization';\nimport { useLocalVideoStartTrigger } from '../components/MediaGallery';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { isPhoneNumberIdentifier, PhoneNumberIdentifier } from '@azure/communication-common';\nimport { RemoteParticipantState } from '@internal/calling-stateful-client';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface LobbyPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  options?: CallCompositeOptions;\n  mobileChatTabHeader: MobileChatSidePaneTabHeaderProps | undefined;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n}\n\n/**\n * @private\n */\nexport const LobbyPage = (props: LobbyPageProps): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const lobbyProps = useSelector(lobbySelector);\n  const strings = useLocale().strings.call;\n\n  const callState = useSelector(getCallStatus);\n  const inLobby = callState === 'InLobby';\n\n  const participants = useSelector(getRemoteParticipants) ?? {};\n\n  useLocalVideoStartTrigger(lobbyProps.localParticipantVideoStream.isAvailable, inLobby);\n\n  // Reduce the controls shown when mobile view is enabled.\n  let callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);\n\n  return (\n    <CallArrangement\n      complianceBannerProps={{ strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={props.options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => (\n        <LobbyTile {...lobbyProps} overlayProps={overlayProps(strings, inLobby, Object.values(participants))} />\n      )}\n      dataUiId={'lobby-page'}\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n    />\n  );\n};\n\nconst overlayProps = (\n  strings: CallCompositeStrings,\n  inLobby: boolean,\n  remoteParticipants: RemoteParticipantState[]\n): LobbyOverlayProps => {\n  /**\n   * Only grab the first participant because there will only be one in this situation.\n   * when starting a call with multiple people the call goes to the connected state and composite goes directly to\n   * videoGallery.\n   *\n   * We also need to check the participant state since in a group call the remote participants array will populate just before\n   * the user joins. In this situation we also check the participant states. in a groupCall the state of the participants\n   * will be 'Idle'.\n   */\n  const outboundCallParticipant: RemoteParticipantState | undefined =\n    remoteParticipants[0] &&\n    ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) &&\n    remoteParticipants.length === 1\n      ? remoteParticipants[0]\n      : undefined;\n\n  return inLobby\n    ? overlayPropsWaitingToBeAdmitted(strings)\n    : outboundCallParticipant\n    ? overlayPropsOutboundCall(strings, outboundCallParticipant)\n    : overlayPropsConnectingToCall(strings);\n};\n\nconst overlayPropsConnectingToCall = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenConnectingToCallTitle,\n  moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenConnectingToCall\" />\n});\n\nconst overlayPropsWaitingToBeAdmitted = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenWaitingToBeAdmittedTitle,\n  moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenWaitingToBeAdmitted\" />\n});\n\nconst overlayPropsOutboundCall = (\n  strings: CallCompositeStrings,\n  participant: RemoteParticipantState\n): LobbyOverlayProps => {\n  if (isPhoneNumberIdentifier(participant.identifier)) {\n    return {\n      title: (participant.identifier as PhoneNumberIdentifier).phoneNumber,\n      moreDetails: outboundCallStringsTrampoline(strings)\n    };\n  } else {\n    return {\n      title: outboundCallStringsTrampoline(strings)\n    };\n  }\n};\n\nconst outboundCallStringsTrampoline = (strings: CallCompositeStrings): string => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return strings.outboundCallingNoticeString;\n  return '';\n};\n\"../../../../../react-components/src\"\"../../../../../calling-stateful-client/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/NoticePage.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
+import { IStyle } from '@fluentui/react';
 import { CallCompositeIcons } from '../../common/icons';
 /**
  * @private
  */
 export interface NoticePageProps {
-    iconName: keyof CallCompositeIcons;
+    iconName?: keyof CallCompositeIcons;
     title: string;
     moreDetails?: string;
     dataUiId: string;
+    disableStartCallButton?: boolean;
+    pageStyle?: IStyle;
 }
 /**
  * Generic page with a title and more details text for serving up a notice to the user.

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/NoticePage.js

@@ -13,12 +13,12 @@ import { CallCompositeIcon } from '../../common/icons';
  */
 export function NoticePage(props) {
     const adapter = useAdapter();
-    return (React.createElement(Stack, { verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": props.dataUiId, "aria-atomic": true },
+    return (React.createElement(Stack, { className: mergeStyles(props.pageStyle), verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": props.dataUiId, "aria-atomic": true },
         React.createElement(Stack, { className: mergeStyles(containerStyle), tokens: containerItemGap },
             props.iconName && React.createElement(CallCompositeIcon, { iconName: props.iconName }),
             React.createElement(Text, { className: mergeStyles(titleStyles), "aria-live": "assertive" }, props.title),
             React.createElement(Text, { className: mergeStyles(moreDetailsStyles), "aria-live": "assertive" }, props.moreDetails),
-            React.createElement(Stack, { styles: rejoinCallButtonContainerStyles },
-                React.createElement(StartCallButton, { onClick: () => adapter.joinCall(), disabled: false, rejoinCall: true, autoFocus: true })))));
+            !props.disableStartCallButton && (React.createElement(Stack, { styles: rejoinCallButtonContainerStyles },
+                React.createElement(StartCallButton, { onClick: () => adapter.joinCall(), disabled: false, rejoinCall: true, autoFocus: true }))))));
 }
 //# sourceMappingURL=NoticePage.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/NoticePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoticePage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/NoticePage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,+BAA+B,EAChC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAsB,MAAM,oBAAoB,CAAC;AAY3E;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CACL,oBAAC,KAAK,IAAC,YAAY,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,KAAK,CAAC,QAAQ;QAC5F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,gBAAgB;YACpE,KAAK,CAAC,QAAQ,IAAI,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI;YAClE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,eAAY,WAAW,IAC7D,KAAK,CAAC,KAAK,CACP;YACP,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAY,WAAW,IACnE,KAAK,CAAC,WAAW,CACb;YACP,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;gBAC5C,oBAAC,eAAe,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,SAAG,CAC7F,CACF,CACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  containerStyle,\n  moreDetailsStyles,\n  containerItemGap,\n  titleStyles,\n  rejoinCallButtonContainerStyles\n} from '../styles/NoticePage.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { CallCompositeIcon, CallCompositeIcons } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NoticePageProps {\n  iconName: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  dataUiId: string;\n}\n\n/**\n * Generic page with a title and more details text for serving up a notice to the user.\n *\n * @private\n */\nexport function NoticePage(props: NoticePageProps): JSX.Element {\n  const adapter = useAdapter();\n  return (\n    <Stack verticalFill verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={props.dataUiId} aria-atomic>\n      <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>\n        {props.iconName && <CallCompositeIcon iconName={props.iconName} />}\n        <Text className={mergeStyles(titleStyles)} aria-live=\"assertive\">\n          {props.title}\n        </Text>\n        <Text className={mergeStyles(moreDetailsStyles)} aria-live=\"assertive\">\n          {props.moreDetails}\n        </Text>\n        <Stack styles={rejoinCallButtonContainerStyles}>\n          <StartCallButton onClick={() => adapter.joinCall()} disabled={false} rejoinCall={true} autoFocus />\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n"]}
+{"version":3,"file":"NoticePage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/NoticePage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,+BAA+B,EAChC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAsB,MAAM,oBAAoB,CAAC;AAc3E;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,EACvC,YAAY,QACZ,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,KAAK,CAAC,QAAQ;QAG1B,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,gBAAgB;YACpE,KAAK,CAAC,QAAQ,IAAI,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI;YAClE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,eAAY,WAAW,IAC7D,KAAK,CAAC,KAAK,CACP;YACP,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAY,WAAW,IACnE,KAAK,CAAC,WAAW,CACb;YACN,CAAC,KAAK,CAAC,sBAAsB,IAAI,CAChC,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;gBAC5C,oBAAC,eAAe,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,SAAG,CAC7F,CACT,CACK,CACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  containerStyle,\n  moreDetailsStyles,\n  containerItemGap,\n  titleStyles,\n  rejoinCallButtonContainerStyles\n} from '../styles/NoticePage.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { CallCompositeIcon, CallCompositeIcons } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NoticePageProps {\n  iconName?: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  dataUiId: string;\n  disableStartCallButton?: boolean;\n  pageStyle?: IStyle;\n}\n\n/**\n * Generic page with a title and more details text for serving up a notice to the user.\n *\n * @private\n */\nexport function NoticePage(props: NoticePageProps): JSX.Element {\n  const adapter = useAdapter();\n  return (\n    <Stack\n      className={mergeStyles(props.pageStyle)}\n      verticalFill\n      verticalAlign=\"center\"\n      horizontalAlign=\"center\"\n      data-ui-id={props.dataUiId}\n      aria-atomic\n    >\n      <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>\n        {props.iconName && <CallCompositeIcon iconName={props.iconName} />}\n        <Text className={mergeStyles(titleStyles)} aria-live=\"assertive\">\n          {props.title}\n        </Text>\n        <Text className={mergeStyles(moreDetailsStyles)} aria-live=\"assertive\">\n          {props.moreDetails}\n        </Text>\n        {!props.disableStartCallButton && (\n          <Stack styles={rejoinCallButtonContainerStyles}>\n            <StartCallButton onClick={() => adapter.joinCall()} disabled={false} rejoinCall={true} autoFocus />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { OnRenderAvatarCallback } from "../../../../../react-components/src";
+import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
+import { LobbyPageProps } from './LobbyPage';
+/**
+ * @private
+ */
+export declare const TransferPage: (props: LobbyPageProps & {
+    /** Render component function to replace the default Persona Icon representing the transferor or transfer target. */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    /** Callback function that can be used to provide custom data to Persona Icon rendered */
+    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
+}) => JSX.Element;
+//# sourceMappingURL=TransferPage.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.js

@@ -0,0 +1,113 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Spinner, SpinnerSize, Stack, Text, mergeStyles } from '@fluentui/react';
+import { toFlatCommunicationIdentifier } from "../../../../../acs-ui-common/src";
+import { ErrorBar } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-transfer) */
+import { Announcer } from "../../../../../react-components/src";
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+/* @conditional-compile-remove(call-transfer) */
+import { useEffect } from 'react';
+import { AvatarPersona } from '../../common/AvatarPersona';
+import { useLocale } from '../../localization';
+import { CallArrangement } from '../components/CallArrangement';
+import { usePropsFor } from '../hooks/usePropsFor';
+import { useSelector } from '../hooks/useSelector';
+import { getRemoteParticipants } from '../selectors/baseSelectors';
+/* @conditional-compile-remove(call-transfer) */
+import { getTransferCall } from '../selectors/baseSelectors';
+import { avatarStyles, defaultPersonaStyles, displayNameStyles, pageContainer, spinnerStyles, statusTextStyles, tileContainerStyles, tileContentStyles } from '../styles/TransferPage.styles';
+import { reduceCallControlsForMobile } from '../utils';
+/**
+ * @private
+ */
+export const TransferPage = (props) => {
+    var _a, _b, _c, _d, _e;
+    const errorBarProps = usePropsFor(ErrorBar);
+    const strings = useLocale().strings.call;
+    const remoteParticipants = useSelector(getRemoteParticipants);
+    /* @conditional-compile-remove(call-transfer) */
+    const transferCall = useSelector(getTransferCall);
+    /* @conditional-compile-remove(call-transfer) */
+    const [announcerString, setAnnouncerString] = useState(undefined);
+    // Reduce the controls shown when mobile view is enabled.
+    const callControlOptions = props.mobileView
+        ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
+        : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
+    const transferor = useMemo(() => { var _a; return (remoteParticipants ? (_a = Object.values(remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [remoteParticipants]);
+    /* @conditional-compile-remove(call-transfer) */
+    const transferTarget = useMemo(() => { var _a; return ((transferCall === null || transferCall === void 0 ? void 0 : transferCall.remoteParticipants) ? (_a = Object.values(transferCall.remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [transferCall]);
+    /* @conditional-compile-remove(call-transfer) */
+    const pageSubject = useMemo(() => {
+        if (transferCall && (transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName)) {
+            return 'transferTarget';
+        }
+        return 'transferor';
+    }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
+    /* @conditional-compile-remove(call-transfer) */
+    useEffect(() => {
+        setAnnouncerString(strings.transferPageNoticeString);
+    }, [strings.transferPageNoticeString]);
+    let transferTileParticipant = transferor;
+    /* @conditional-compile-remove(call-transfer) */
+    if (pageSubject === 'transferTarget') {
+        transferTileParticipant = transferTarget;
+    }
+    let transferParticipantDisplayName = (_c = transferor === null || transferor === void 0 ? void 0 : transferor.displayName) !== null && _c !== void 0 ? _c : 
+    /* @conditional-compile-remove(call-transfer) */ strings.transferPageUnknownTransferorDisplayName;
+    /* @conditional-compile-remove(call-transfer) */
+    if (pageSubject === 'transferTarget') {
+        transferParticipantDisplayName =
+            (_d = transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName) !== null && _d !== void 0 ? _d : strings.transferPageUnknownTransferTargetDisplayName;
+    }
+    return (React.createElement(Stack, { className: mergeStyles(pageContainer) },
+        /* @conditional-compile-remove(call-transfer) */
+        React.createElement(Announcer, { announcementString: announcerString, ariaLive: "polite" }),
+        React.createElement(CallArrangement, { complianceBannerProps: { strings }, 
+            // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
+            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+                options: callControlOptions,
+                increaseFlyoutItemSize: props.mobileView
+            }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
+                /* @conditional-compile-remove(call-transfer) */
+                statusText: pageSubject === 'transferTarget'
+                    ? strings.transferPageTransferTargetText
+                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
+};
+const TransferTile = (props) => {
+    const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;
+    const [personaSize, setPersonaSize] = useState();
+    const tileRef = useRef(null);
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        const personaSize = Math.min(width, height) / 2;
+        setPersonaSize(Math.max(Math.min(personaSize, 150), 32));
+    }));
+    useLayoutEffect(() => {
+        if (tileRef.current) {
+            observer.current.observe(tileRef.current);
+        }
+        const currentObserver = observer.current;
+        return () => currentObserver.disconnect();
+    }, [observer, tileRef]);
+    const placeholderOptions = useMemo(() => ({
+        userId,
+        text: initialsName !== null && initialsName !== void 0 ? initialsName : displayName,
+        coinSize: personaSize,
+        styles: defaultPersonaStyles,
+        hidePersonaDetails: true
+    }), [userId, initialsName, displayName, personaSize]);
+    const defaultOnRenderAvatar = useCallback(() => {
+        return personaSize ? (React.createElement(AvatarPersona, Object.assign({}, placeholderOptions, { dataProvider: onFetchAvatarPersonaData, className: mergeStyles(avatarStyles) }))) : (React.createElement(React.Fragment, null));
+    }, [placeholderOptions, onFetchAvatarPersonaData, personaSize]);
+    const defaultAvatar = useMemo(() => defaultOnRenderAvatar(), [defaultOnRenderAvatar]);
+    return (React.createElement("div", { ref: tileRef, className: mergeStyles(tileContainerStyles), "data-is-focusable": true },
+        React.createElement(Stack, { className: mergeStyles(tileContentStyles), tokens: { childrenGap: '1rem' } },
+            React.createElement(Stack, { horizontalAlign: "center", tokens: { childrenGap: '0.5rem' } },
+                onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, defaultOnRenderAvatar) : defaultAvatar,
+                React.createElement(Text, { className: mergeStyles(displayNameStyles) }, displayName)),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", tokens: { childrenGap: '0.5rem' } },
+                React.createElement(Spinner, { size: SpinnerSize.large, className: mergeStyles(spinnerStyles) }),
+                React.createElement(Text, { className: mergeStyles(statusTextStyles) }, statusText)))));
+};
+//# sourceMappingURL=TransferPage.js.map