@azure/communication-react 1.12.0 → 1.12.1-alpha-202401190013

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

@@ -10,6 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useMemo } from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useState } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
 import { useHandlers } from '../hooks/useHandlers';
 import { LocalDeviceSettings } from '../components/LocalDeviceSettings';
@@ -27,6 +29,10 @@ import { bannerNotificationStyles } from '../styles/CallPage.styles';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';
+/* @conditional-compile-remove(call-readiness) */
+import { getDevicePermissionState } from '../utils';
+/* @conditional-compile-remove(call-readiness) */
+import { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';
 /* @conditional-compile-remove(video-background-effects) */
 import { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';
 import { SidePane } from '../components/SidePane/SidePane';
@@ -39,15 +45,27 @@ import { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';
  * @private
  */
 export const ConfigurationPage = (props) => {
-    var _a, _b;
-    const { startCallHandler, mobileView, modalLayerHostId } = props;
+    var _a, _b, _c, _d;
+    const { startCallHandler, mobileView, modalLayerHostId, 
+    /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
+    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
     const theme = useTheme();
     const options = useAdaptedSelector(getCallingSelector(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);
+    /* @conditional-compile-remove(call-readiness) */
+    // use permission API to get video and audio permission state
+    const [videoState, setVideoState] = useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    const [audioState, setAudioState] = useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    getDevicePermissionState(setVideoState, setAudioState);
     const errorBarProps = usePropsFor(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
+    /* @conditional-compile-remove(unsupported-browser) */
+    const environmentInfo = adapter.getState().environmentInfo;
     let disableStartCallButton = !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0;
     /* @conditional-compile-remove(rooms) */
     const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
@@ -57,11 +75,11 @@ export const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (role !== 'Consumer') {
-        filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     /* @conditional-compile-remove(video-background-effects) */
     if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {
-        filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'unableToStartVideoEffect');
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(rooms) */
     if (role === 'Consumer') {
@@ -69,14 +87,60 @@ export const ConfigurationPage = (props) => {
         // because microphone device permission is not needed for the user's role
         disableStartCallButton = false;
     }
+    /* @conditional-compile-remove(call-readiness) */
+    // Overrides role permissions if CallCompositeOptions deviceChecks are set
+    if (deviceChecks) {
+        if (['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&
+            ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)) {
+            disableStartCallButton = false;
+        }
+        else if (deviceChecks.camera === 'required') {
+            disableStartCallButton = !cameraPermissionGranted || ((_c = deviceState.cameras) === null || _c === void 0 ? void 0 : _c.length) === 0;
+        }
+    }
     const locale = useLocale();
-    const title = locale.strings.call.configurationPageTitle.length > 0 ? React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
-        React.createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle })) : React.createElement(React.Fragment, null);
-    const callDescription = locale.strings.call.configurationPageCallDetails && React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme) }, locale.strings.call.configurationPageCallDetails);
+    const title = locale.strings.call.configurationPageTitle.length > 0 ? (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
+        React.createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle }))) : (React.createElement(React.Fragment, null));
+    const callDescription = locale.strings.call.configurationPageCallDetails && (React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme) }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
-    mobileWithPreview = mobileWithPreview && role !== 'Consumer'; // When permission API is not available, we want to show screen saying checking for access (disappears on its own)
+    mobileWithPreview = mobileWithPreview && role !== 'Consumer';
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionsState = {
+        // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
+        camera: videoState && videoState !== 'unsupported'
+            ? cameraPermissionGranted !== false
+                ? videoState
+                : 'denied'
+            : cameraPermissionGranted !== false
+                ? cameraPermissionGranted
+                    ? 'granted'
+                    : 'prompt'
+                : 'denied',
+        microphone: audioState && audioState !== 'unsupported'
+            ? microphonePermissionGranted !== false
+                ? audioState
+                : 'denied'
+            : microphonePermissionGranted !== false
+                ? microphonePermissionGranted
+                    ? 'granted'
+                    : 'prompt'
+                : 'denied'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
+    /* @conditional-compile-remove(call-readiness) */
+    const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);
+    // When permission API is not available, we want to show screen saying checking for access (disappears on its own)
     // then based on permission setting, we show permission denied or nothing
+    /* @conditional-compile-remove(call-readiness) */
+    const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);
+    /* @conditional-compile-remove(call-readiness) */
+    setTimeout(() => {
+        setMinimumFallbackTimerElapsed(true);
+    }, 2000);
+    /* @conditional-compile-remove(call-readiness) */
+    const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
     /* @conditional-compile-remove(video-background-effects) */
     const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView, props.latestErrors, props.onDismissError);
     const startCall = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -88,28 +152,80 @@ export const ConfigurationPage = (props) => {
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
     const filteredErrorBarProps = useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
-    const containerStyles = useMemo(() => configurationContainerStyle(!mobileView), [mobileView]);
-    return React.createElement(Stack, { styles: containerStyles },
+    const containerStyles = useMemo(() => {
+        var _a;
+        return configurationContainerStyle(!mobileView, 
+        /* @conditional-compile-remove(custom-branding) */
+        (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
+    }, [mobileView, /* @conditional-compile-remove(custom-branding) */ (_d = props.backgroundImage) === null || _d === void 0 ? void 0 : _d.url]);
+    return (React.createElement(Stack, { styles: containerStyles },
         React.createElement(Stack, { styles: bannerNotificationStyles },
-            React.createElement(ConfigurationPageErrorBar, { errorBarProps: filteredErrorBarProps, onDismissError: props.onDismissError })),
+            React.createElement(ConfigurationPageErrorBar
+            /* @conditional-compile-remove(call-readiness) */
+            // show trouble shooting error bar when encountering network error/ permission error
+            , { 
+                /* @conditional-compile-remove(call-readiness) */
+                // show trouble shooting error bar when encountering network error/ permission error
+                showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
+                /* @conditional-compile-remove(call-readiness) */
+                permissionsState: permissionsState, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: filteredErrorBarProps, onDismissError: props.onDismissError })),
+        /* @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, { modalLayerHostId: modalLayerHostId, mobileView: mobileView, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
+        /* @conditional-compile-remove(call-readiness) */
+        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values
+        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (React.createElement(CallReadinessModalFallBack
+        /* @conditional-compile-remove(call-readiness) */
+        , { 
+            /* @conditional-compile-remove(call-readiness) */
+            modalLayerHostId: modalLayerHostId, mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React.createElement(Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
-            React.createElement(Stack, { className: configurationCenteredContent(mobileWithPreview), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+            React.createElement(Stack, { className: configurationCenteredContent(mobileWithPreview, 
+                /* @conditional-compile-remove(custom-branding) */
+                !!props.logo), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
                 React.createElement(Stack.Item, { styles: callDetailsContainerStyles },
-                    React.createElement(Logo, null),
+                    React.createElement(Logo
+                    /* @conditional-compile-remove(custom-branding) */
+                    , { 
+                        /* @conditional-compile-remove(custom-branding) */
+                        logo: props.logo }),
                     title,
                     callDescription),
                 React.createElement(Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
-                    localPreviewTrampoline(mobileWithPreview, /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
+                    localPreviewTrampoline(mobileWithPreview, 
+                    /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                     React.createElement(Stack, { styles: mobileView ? undefined : configurationSectionStyle },
-                        !mobileWithPreview && React.createElement(Stack, { className: mobileView ? undefined : selectionContainerStyle(theme, isSafariBrowserEnvironmentTrampoline()) },
-                            React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted), onClickVideoEffects: toggleVideoEffectsPane }))),
+                        !mobileWithPreview && (React.createElement(Stack, { className: mobileView
+                                ? undefined
+                                : selectionContainerStyle(theme, isSafariBrowserEnvironmentTrampoline(
+                                /* @conditional-compile-remove(unsupported-browser) */ environmentInfo)) },
+                            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) */
+                                onClickVideoEffects: toggleVideoEffectsPane })))),
                         React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop, horizontalAlign: mobileWithPreview ? 'stretch' : 'end' },
                             React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton, hideIcon: true }))))),
             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, type: PanelType.custom, 
-                /* @conditional-compile-remove(video-background-effects) */ customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
-                React.createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer, maxWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`, minWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` }))));
+            /* @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, type: PanelType.custom, 
+                /* @conditional-compile-remove(video-background-effects) */
+                customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
+                React.createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer, maxWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`, minWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` })))));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -119,9 +235,13 @@ const localPreviewTrampoline = (mobileView, doNotShow) => {
     return React.createElement(LocalPreview, { mobileView: mobileView, showDevicesButton: mobileView });
 };
 const cameraPermissionGrantedTrampoline = (cameraPermissionGranted, videoState) => {
+    /* @conditional-compile-remove(call-readiness) */
+    return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;
     return cameraPermissionGranted;
 };
 const micPermissionGrantedTrampoline = (microphonePermissionGranted, audioState) => {
+    /* @conditional-compile-remove(call-readiness) */
+    return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;
     return microphonePermissionGranted;
 };
 const Logo = (props) => {
@@ -131,6 +251,8 @@ const Logo = (props) => {
     return React.createElement(Image, { styles: logoStyles(props.logo.shape), src: props.logo.url, alt: props.logo.alt });
 };
 const isSafariBrowserEnvironmentTrampoline = (environmentInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return environmentInfo && (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser.toLowerCase()) === 'safari';
     return false;
 };
 //# sourceMappingURL=ConfigurationPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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';\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 { ActiveErrorMessage, DevicesButton, ErrorBar, useTheme } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport { callDetailsContainerStyles, configurationCenteredContent, configurationSectionStyle, deviceConfigurationStackTokens, fillWidth, logoStyles, panelFocusProps, panelStyles, startCallButtonStyleDesktop } from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport { callDetailsStyleDesktop, callDetailsStyleMobile, configurationStackTokensDesktop, configurationStackTokensMobile, configurationContainerStyle, selectionContainerStyle, startCallButtonContainerStyleDesktop, startCallButtonContainerStyleMobile, startCallButtonStyleMobile, titleContainerStyleDesktop, titleContainerStyleMobile } from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, 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/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { EnvironmentInfo } from '@azure/communication-calling';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(capabilities) */\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId\n  } = props;\n  const theme = useTheme();\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const {\n    video: cameraPermissionGranted,\n    audio: microphonePermissionGranted\n  } = useSelector(devicePermissionSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const adapter = useAdapter();\n  const deviceState = adapter.getState().devices;\n  let disableStartCallButton = !microphonePermissionGranted || deviceState.microphones?.length === 0;\n  /* @conditional-compile-remove(rooms) */\n  const role = adapter.getState().call?.role;\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  /* @conditional-compile-remove(rooms) */\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');\n  }\n\n  /* @conditional-compile-remove(video-background-effects) */\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'unableToStartVideoEffect');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  if (role === 'Consumer') {\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  const locale = useLocale();\n  const title = locale.strings.call.configurationPageTitle.length > 0 ? <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping width={mobileView ? 325 : 445} lineHeightPx={16 * 1.5} bufferHeightPx={16} text={locale.strings.call.configurationPageTitle} />\n      </Stack.Item> : <></>;\n  const callDescription = locale.strings.call.configurationPageCallDetails && <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>;\n  let mobileWithPreview = mobileView;\n  /* @conditional-compile-remove(rooms) */\n  mobileWithPreview = mobileWithPreview && role !== 'Consumer'; // 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(video-background-effects) */\n  const {\n    toggleVideoEffectsPane,\n    closeVideoEffectsPane,\n    isVideoEffectsPaneOpen\n  } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView, props.latestErrors, props.onDismissError);\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  const panelLayerProps = useMemo(() => ({\n    hostId: modalLayerHostId\n  }), [modalLayerHostId]);\n  const filteredErrorBarProps = useMemo(() => ({\n    ...errorBarProps,\n    activeErrorMessages: filteredLatestErrors\n  }), [errorBarProps, filteredLatestErrors]);\n  const containerStyles = useMemo(() => configurationContainerStyle(!mobileView), [mobileView]);\n  return <Stack styles={containerStyles}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar errorBarProps={filteredErrorBarProps} onDismissError={props.onDismissError} />\n      </Stack>\n      {}\n\n      {}\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack className={configurationCenteredContent(mobileWithPreview)} verticalAlign=\"center\" verticalFill={mobileWithPreview} tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}>\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack horizontal={!mobileWithPreview} horizontalAlign={mobileWithPreview ? 'stretch' : 'center'} verticalFill={mobileWithPreview} tokens={deviceConfigurationStackTokens}>\n            {localPreviewTrampoline(mobileWithPreview, /* @conditional-compile-remove(rooms) */!!(role === 'Consumer'))}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && <Stack className={mobileView ? undefined : selectionContainerStyle(theme, isSafariBrowserEnvironmentTrampoline())}>\n                  <LocalDeviceSettings {...options} {...localDeviceSettingsHandlers} cameraPermissionGranted={cameraPermissionGrantedTrampoline(cameraPermissionGranted)} microphonePermissionGranted={micPermissionGrantedTrampoline(microphonePermissionGranted)} /* @conditional-compile-remove(video-background-effects) */\n              onClickVideoEffects={toggleVideoEffectsPane} />\n                </Stack>}\n              <Stack styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop} horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}>\n                <StartCallButton className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop} onClick={startCall} disabled={disableStartCallButton} hideIcon={true} />\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n      /* @conditional-compile-remove(video-background-effects) */ isOpen={isVideoEffectsPaneOpen} hasCloseButton={false} isBlocking={false} isHiddenOnDismiss={false} styles={panelStyles} focusTrapZoneProps={panelFocusProps} layerProps={panelLayerProps} type={PanelType.custom}\n      /* @conditional-compile-remove(video-background-effects) */ customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}>\n          <SidePane mobileView={props.mobileView} updateSidePaneRenderer={props.updateSidePaneRenderer} maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`} minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`} />\n        </Panel>\n      </Stack>\n    </Stack>;\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};\nconst cameraPermissionGrantedTrampoline = (cameraPermissionGranted: boolean | undefined, videoState?: PermissionState | 'unsupported' | undefined): boolean | undefined => {\n  return cameraPermissionGranted;\n};\nconst micPermissionGrantedTrampoline = (microphonePermissionGranted: boolean | undefined, audioState?: PermissionState | 'unsupported' | undefined): boolean | undefined => {\n  return microphonePermissionGranted;\n};\nconst Logo = (props: {\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n}): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\nconst isSafariBrowserEnvironmentTrampoline = (environmentInfo?: EnvironmentInfo): boolean | undefined => {\n  return false;\n};"]}
+{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAsB,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,4CAAmC;AACnG,OAAO,EAAE,kBAAkB,EAAE,sDAA6C;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC9B,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,+BAA+B,EAC/B,8BAA8B,EAC9B,2BAA2B,EAC3B,uBAAuB,EACvB,oCAAoC,EACpC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAClG,2DAA2D;AAC3D,OAAO,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACpH,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,2DAA2D;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAC;AACtF,2DAA2D;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAG5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAoCxE;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,gBAAgB,EAChB,UAAU,EACV,gBAAgB;IAChB,iDAAiD,CAAC,YAAY;IAC9D,iDAAiD,CAAC,iCAAiC;IACnF,iDAAiD,CAAC,gCAAgC,EACnF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,MAAM,2BAA2B,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACrE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAG,WAAW,CAAC,wBAAwB,CAAC,CAAC;IACrH,iDAAiD;IACjD,6DAA6D;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,wBAAwB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC;IAC/C,sDAAsD;IACtD,MAAM,eAAe,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,eAAe,CAAC;IAE3D,IAAI,sBAAsB,GAAG,CAAC,2BAA2B,IAAI,CAAA,MAAA,WAAW,CAAC,WAAW,0CAAE,MAAM,MAAK,CAAC,CAAC;IACnG,wCAAwC;IACxC,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,CAAC;IAE3C,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC;IAE/D,IAAI,oBAAoB,GAAyB,KAAK,CAAC,YAAY,CAAC;IAEpE,wCAAwC;IACxC,6FAA6F;IAC7F,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAChD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,wBAAwB,IAAI,CAAC,CAAC,IAAI,KAAK,8BAA8B,CACxF,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,IAAI,CAAC,2BAA2B,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,aAAa,EAAE,CAAC;QAClF,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;IACnG,CAAC;IAED,wCAAwC;IACxC,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oHAAoH;QACpH,yEAAyE;QACzE,sBAAsB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,iDAAiD;IACjD,0EAA0E;IAC1E,IAAI,YAAY,EAAE,CAAC;QACjB,IACE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;YACzD,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,EAC7D,CAAC;YACD,sBAAsB,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC9C,sBAAsB,GAAG,CAAC,uBAAuB,IAAI,CAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,MAAM,MAAK,CAAC,CAAC;QACzF,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GACT,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;QACtG,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAC7B,YAAY,EAAE,EAAE,GAAG,GAAG,EACtB,cAAc,EAAE,EAAE,EAClB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAChD,CACS,CACd,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;IAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,IAAI,CAC1E,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,IAC/F,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,CACtC,CACd,CAAC;IAEF,IAAI,iBAAiB,GAAG,UAAU,CAAC;IACnC,wCAAwC;IACxC,iBAAiB,GAAG,iBAAiB,IAAI,IAAI,KAAK,UAAU,CAAC;IAE7D,iDAAiD;IACjD,MAAM,gBAAgB,GAGlB;QACF,gHAAgH;QAChH,MAAM,EACJ,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACjC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACnC,CAAC,CAAC,uBAAuB;oBACvB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;QACd,UAAU,EACR,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACrC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACvC,CAAC,CAAC,2BAA2B;oBAC3B,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;KACf,CAAC;IACF,iDAAiD;IACjD,MAAM,aAAa,GAAG,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,uBAAuB,CAAC,CAAC;IAEtH,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErF,kHAAkH;IAClH,yEAAyE;IACzE,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtF,iDAAiD;IACjD,UAAU,CAAC,GAAG,EAAE;QACd,8BAA8B,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,iDAAiD;IACjD,MAAM,4BAA4B,GAAG,CAAC,2BAA2B,CAAC;IAElE,2DAA2D;IAC3D,MAAM,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,GAAG,mBAAmB,CACnG,KAAK,CAAC,sBAAsB,EAC5B,UAAU,EACV,KAAK,CAAC,YAAY,EAClB,KAAK,CAAC,cAAc,CACrB,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,2DAA2D;QAC3D,qBAAqB,EAAE,CAAC;QACxB,gBAAgB,EAAE,CAAC;IACrB,CAAC,CAAA,EAAE,CAAC,gBAAgB,EAAE,2DAA2D,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE1G,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,gBAAgB;KACzB,CAAC,EACF,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,iCACD,aAAa,KAChB,mBAAmB,EAAE,oBAAoB,IACzC,EACF,CAAC,aAAa,EAAE,oBAAoB,CAAC,CACtC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE;;QACH,OAAA,2BAA2B,CACzB,CAAC,UAAU;QACX,kDAAkD;QAClD,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAC3B,CAAA;KAAA,EACH,CAAC,UAAU,EAAE,kDAAkD,CAAC,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC,CAC5F,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC5B,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,yBAAyB;YACxB,iDAAiD;YACjD,oFAAoF;;gBADpF,iDAAiD;gBACjD,oFAAoF;gBACpF,2BAA2B,EACzB,CAAC,uBAAuB,IAAI,CAAC,2BAA2B,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAEtF,iDAAiD;gBACjD,gBAAgB,EAAE,gBAAgB;gBAClC,iDAAiD;gBACjD,gCAAgC,EAAE,gCAAgC;gBAClE,iDAAiD;gBACjD,iCAAiC,EAAE,iCAAiC,EACpE,aAAa,EAAE,qBAAqB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,GACpC,CACI;QAEN,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,CAC1F,oBAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU;YACtB,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B,EACxD,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,GACpE,CACH;QAID,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,IAAI,CAAC,UAAU,KAAK,aAAa,IAAI,UAAU,KAAK,aAAa,CAAC,IAAI,CAC5F,oBAAC,0BAA0B;QACzB,iDAAiD;;YAAjD,iDAAiD;YACjD,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,4BAA4B,EACzD,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B;YACxD,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,GACpE,CACH;QAGH,oBAAC,KAAK,IAAC,YAAY,QAAC,IAAI,QAAC,UAAU,QAAC,SAAS,EAAE,SAAS;YACtD,oBAAC,KAAK,IACJ,SAAS,EAAE,4BAA4B,CACrC,iBAAiB;gBACjB,kDAAkD;gBAClD,CAAC,CAAC,KAAK,CAAC,IAAI,CACb,EACD,aAAa,EAAC,QAAQ,EACtB,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,+BAA+B;gBAE5F,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,0BAA0B;oBAC5C,oBAAC,IAAI;oBACH,kDAAkD;;wBAAlD,kDAAkD;wBAClD,IAAI,EAAE,KAAK,CAAC,IAAI,GAChB;oBACD,KAAK;oBACL,eAAe,CACL;gBACb,oBAAC,KAAK,IACJ,UAAU,EAAE,CAAC,iBAAiB,EAC9B,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzD,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,8BAA8B;oBAErC,sBAAsB,CACrB,iBAAiB;oBACjB,wCAAwC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CACjE;oBACD,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB;wBAC9D,CAAC,iBAAiB,IAAI,CACrB,oBAAC,KAAK,IACJ,SAAS,EACP,UAAU;gCACR,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,uBAAuB,CACrB,KAAK,EACL,oCAAoC;gCAClC,sDAAsD,CAAC,eAAe,CACvE,CACF;4BAGP,oBAAC,mBAAmB,oBACd,OAAO,EACP,2BAA2B,IAC/B,uBAAuB,EAAE,iCAAiC,CACxD,uBAAuB;gCACvB,iDAAiD,CAAC,UAAU,CAC7D,EACD,2BAA2B,EAAE,8BAA8B,CACzD,2BAA2B;gCAC3B,iDAAiD,CAAC,UAAU,CAC7D;gCACD,iDAAiD;gCACjD,6BAA6B,EAAE,GAAG,EAAE;oCAClC,8BAA8B,CAAC,IAAI,CAAC,CAAC;gCACvC,CAAC;gCACD,2DAA2D;gCAC3D,mBAAmB,EAAE,sBAAsB,IAC3C,CACI,CACT;wBACD,oBAAC,KAAK,IACJ,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAAoC,EACtG,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;4BAEtD,oBAAC,eAAe,IACd,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,EACvF,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,sBAAsB,EAChC,QAAQ,EAAE,IAAI,GACd,CACI,CACF,CACF,CACF;YACR,oBAAC,KAAK;YACJ,2DAA2D;;gBAA3D,2DAA2D;gBAC3D,MAAM,EAAE,sBAAsB,EAC9B,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE,KAAK,EACjB,iBAAiB,EAAE,KAAK,EACxB,MAAM,EAAE,WAAW,EACnB,kBAAkB,EAAE,eAAe,EACnC,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,CAAC,MAAM;gBACtB,2DAA2D;gBAC3D,WAAW,EAAE,GAAG,iCAAiC,KAAK;gBAEtD,oBAAC,QAAQ,IACP,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,EACnD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,GACnD,CACI,CACF,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,UAAmB,EAAE,SAAmB,EAA2B,EAAE;IACnG,wCAAwC;IACxC,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO,oBAAC,YAAY,IAAC,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,UAAU,GAAI,CAAC;AACjF,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CACxC,uBAA4C,EAC5C,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAEvG,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,CACrC,2BAAgD,EAChD,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAE3G,OAAO,2BAA2B,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,KAA2E,EAAe,EAAE;IACxG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAChB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,CAAC;AACnG,CAAC,CAAC;AAEF,MAAM,oCAAoC,GAAG,CAAC,eAAiC,EAAuB,EAAE;IACtG,sDAAsD;IACtD,OAAO,eAAe,IAAI,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,MAAK,QAAQ,CAAC;IAE1F,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","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 { ActiveErrorMessage, DevicesButton, ErrorBar, useTheme } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n  callDetailsContainerStyles,\n  configurationCenteredContent,\n  configurationSectionStyle,\n  deviceConfigurationStackTokens,\n  fillWidth,\n  logoStyles,\n  panelFocusProps,\n  panelStyles,\n  startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyle,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile\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 { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, 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/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { EnvironmentInfo } from '@azure/communication-calling';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => 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  /* @conditional-compile-remove(capabilities) */\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  /* @conditional-compile-remove(custom-branding) */\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  /* @conditional-compile-remove(custom-branding) */\n  backgroundImage?: {\n    url: string;\n  };\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 theme = useTheme();\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  const 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 role = adapter.getState().call?.role;\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  /* @conditional-compile-remove(rooms) */\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(\n      (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n    );\n  }\n\n  /* @conditional-compile-remove(video-background-effects) */\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  if (role === 'Consumer') {\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    locale.strings.call.configurationPageTitle.length > 0 ? (\n      <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping\n          width={mobileView ? 325 : 445}\n          lineHeightPx={16 * 1.5}\n          bufferHeightPx={16}\n          text={locale.strings.call.configurationPageTitle}\n        />\n      </Stack.Item>\n    ) : (\n      <></>\n    );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  let mobileWithPreview = mobileView;\n  /* @conditional-compile-remove(rooms) */\n  mobileWithPreview = mobileWithPreview && role !== 'Consumer';\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    props.latestErrors,\n    props.onDismissError\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  const filteredErrorBarProps = useMemo(\n    () => ({\n      ...errorBarProps,\n      activeErrorMessages: filteredLatestErrors\n    }),\n    [errorBarProps, filteredLatestErrors]\n  );\n\n  const containerStyles = useMemo(\n    () =>\n      configurationContainerStyle(\n        !mobileView,\n        /* @conditional-compile-remove(custom-branding) */\n        props.backgroundImage?.url\n      ),\n    [mobileView, /* @conditional-compile-remove(custom-branding) */ props.backgroundImage?.url]\n  );\n\n  return (\n    <Stack styles={containerStyles}>\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={filteredErrorBarProps}\n          onDismissError={props.onDismissError}\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={configurationCenteredContent(\n            mobileWithPreview,\n            /* @conditional-compile-remove(custom-branding) */\n            !!props.logo\n          )}\n          verticalAlign=\"center\"\n          verticalFill={mobileWithPreview}\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo\n              /* @conditional-compile-remove(custom-branding) */\n              logo={props.logo}\n            />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack\n            horizontal={!mobileWithPreview}\n            horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n            verticalFill={mobileWithPreview}\n            tokens={deviceConfigurationStackTokens}\n          >\n            {localPreviewTrampoline(\n              mobileWithPreview,\n              /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')\n            )}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && (\n                <Stack\n                  className={\n                    mobileView\n                      ? undefined\n                      : selectionContainerStyle(\n                          theme,\n                          isSafariBrowserEnvironmentTrampoline(\n                            /* @conditional-compile-remove(unsupported-browser) */ environmentInfo\n                          )\n                        )\n                  }\n                >\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                    onClickVideoEffects={toggleVideoEffectsPane}\n                  />\n                </Stack>\n              )}\n              <Stack\n                styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n                horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n              >\n                <StartCallButton\n                  className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n                  onClick={startCall}\n                  disabled={disableStartCallButton}\n                  hideIcon={true}\n                />\n              </Stack>\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          type={PanelType.custom}\n          /* @conditional-compile-remove(video-background-effects) */\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n        >\n          <SidePane\n            mobileView={props.mobileView}\n            updateSidePaneRenderer={props.updateSidePaneRenderer}\n            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n          />\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\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'circle' } }): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\n\nconst isSafariBrowserEnvironmentTrampoline = (environmentInfo?: EnvironmentInfo): boolean | undefined => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return environmentInfo && environmentInfo?.environment.browser.toLowerCase() === 'safari';\n\n  return false;\n};\n"]}

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ActiveErrorMessage } from "../../../../../react-components/src";
+import { CallCompositeOptions } from '../../../index-public';
+import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
+import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
+import { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';
+/**
+ * @beta
+ */
+export interface HoldPageProps {
+    mobileView: boolean;
+    options?: CallCompositeOptions;
+    modalLayerHostId: string;
+    updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
+    capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
+}
+/**
+ * @beta
+ */
+export declare const HoldPage: (props: HoldPageProps) => JSX.Element;
+//# sourceMappingURL=HoldPage.d.ts.map

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

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { ErrorBar } from "../../../../../react-components/src";
+import React from 'react';
+import { useLocale } from '../../localization';
+import { CallArrangement } from '../components/CallArrangement';
+import { HoldPane } from '../components/HoldPane';
+import { usePropsFor } from '../hooks/usePropsFor';
+import { disableCallControls, reduceCallControlsForMobile } from '../utils';
+/**
+ * @beta
+ */
+export const HoldPage = (props) => {
+    var _a, _b, _c;
+    const errorBarProps = usePropsFor(ErrorBar);
+    const strings = useLocale().strings.call;
+    let 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;
+    callControlOptions = disableCallControls(callControlOptions, [
+        'cameraButton',
+        'microphoneButton',
+        'devicesButton',
+        'screenShareButton',
+        /* @conditional-compile-remove(PSTN-calls) */
+        /* @conditional-compile-remove(one-to-n-calling) */
+        'holdButton'
+    ]);
+    return (React.createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && errorBarProps, callControlProps: {
+            options: callControlOptions,
+            increaseFlyoutItemSize: props.mobileView
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React.createElement(HoldPane, null), dataUiId: 'hold-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
+};
+//# sourceMappingURL=HoldPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoldPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/HoldPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,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;AAqB5E;;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,EAClC,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,MAAK,KAAK,IAAI,aAAa,EACjE,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,EAC9C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,cAAc,EAAE,KAAK,CAAC,cAAc,GACpC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ActiveErrorMessage, 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/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\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  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  /* @conditional-compile-remove(capabilities) */\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\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      errorBarProps={props.options?.errorBar !== false && errorBarProps}\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      latestErrors={props.latestErrors}\n      onDismissError={props.onDismissError}\n    />\n  );\n};\n"]}

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

@@ -24,14 +24,14 @@ export const LobbyPage = (props) => {
     const inLobby = callState === 'InLobby';
     const participants = (_a = useSelector(getRemoteParticipants)) !== null && _a !== void 0 ? _a : {};
     // Reduce the controls shown when mobile view is enabled.
-    let callControlOptions = props.mobileView ? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls) : (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
+    let callControlOptions = props.mobileView
+        ? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls)
+        : (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
     callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
-    return React.createElement(CallArrangement, { complianceBannerProps: {
-            strings
-        }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, callControlProps: {
+    return (React.createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React.createElement(LobbyTile, Object.assign({}, lobbyProps, { showLocalVideoCameraCycleButton: props.mobileView, overlayProps: overlayProps(strings, inLobby, Object.values(participants)) })), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError });
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(LobbyTile, Object.assign({}, lobbyProps, { showLocalVideoCameraCycleButton: props.mobileView, overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 const overlayProps = (strings, inLobby, remoteParticipants) => {
     /**
@@ -43,8 +43,16 @@ const overlayProps = (strings, inLobby, remoteParticipants) => {
      * the user joins. In this situation we also check the participant states. in a groupCall the state of the participants
      * will be 'Idle'.
      */
-    const outboundCallParticipant = remoteParticipants[0] && ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) && remoteParticipants.length === 1 ? remoteParticipants[0] : undefined;
-    return inLobby ? overlayPropsWaitingToBeAdmitted(strings) : outboundCallParticipant ? overlayPropsOutboundCall(strings, outboundCallParticipant) : overlayPropsConnectingToCall(strings);
+    const outboundCallParticipant = remoteParticipants[0] &&
+        ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) &&
+        remoteParticipants.length === 1
+        ? remoteParticipants[0]
+        : undefined;
+    return inLobby
+        ? overlayPropsWaitingToBeAdmitted(strings)
+        : outboundCallParticipant
+            ? overlayPropsOutboundCall(strings, outboundCallParticipant)
+            : overlayPropsConnectingToCall(strings);
 };
 const overlayPropsConnectingToCall = (strings) => ({
     title: strings.lobbyScreenConnectingToCallTitle,
@@ -70,6 +78,8 @@ const overlayPropsOutboundCall = (strings, participant) => {
     }
 };
 const outboundCallStringsTrampoline = (strings) => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return strings.outboundCallingNoticeString;
     return '';
 };
 //# sourceMappingURL=LobbyPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LobbyPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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.\n\nimport React from 'react';\nimport { ActiveErrorMessage, 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 { 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/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\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  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  /* @conditional-compile-remove(capabilities) */\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\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  const callState = useSelector(getCallStatus);\n  const inLobby = callState === 'InLobby';\n  const participants = useSelector(getRemoteParticipants) ?? {};\n\n  // Reduce the controls shown when mobile view is enabled.\n  let callControlOptions = props.mobileView ? reduceCallControlsForMobile(props.options?.callControls) : props.options?.callControls;\n  callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);\n  return <CallArrangement complianceBannerProps={{\n    strings\n  }} errorBarProps={props.options?.errorBar !== false && errorBarProps} callControlProps={{\n    options: callControlOptions,\n    increaseFlyoutItemSize: props.mobileView\n  }} mobileView={props.mobileView} modalLayerHostId={props.modalLayerHostId} onRenderGalleryContent={() => <LobbyTile {...lobbyProps} showLocalVideoCameraCycleButton={props.mobileView} overlayProps={overlayProps(strings, inLobby, Object.values(participants))} />} dataUiId={'lobby-page'} updateSidePaneRenderer={props.updateSidePaneRenderer} mobileChatTabHeader={props.mobileChatTabHeader} latestErrors={props.latestErrors} onDismissError={props.onDismissError} />;\n};\nconst overlayProps = (strings: CallCompositeStrings, inLobby: boolean, remoteParticipants: RemoteParticipantState[]): 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 = remoteParticipants[0] && ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) && remoteParticipants.length === 1 ? remoteParticipants[0] : undefined;\n  return inLobby ? overlayPropsWaitingToBeAdmitted(strings) : outboundCallParticipant ? overlayPropsOutboundCall(strings, outboundCallParticipant) : overlayPropsConnectingToCall(strings);\n};\nconst overlayPropsConnectingToCall = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenConnectingToCallTitle,\n  moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenConnectingToCall\" />\n});\nconst overlayPropsWaitingToBeAdmitted = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenWaitingToBeAdmittedTitle,\n  moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenWaitingToBeAdmitted\" />\n});\nconst overlayPropsOutboundCall = (strings: CallCompositeStrings, participant: RemoteParticipantState): 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};\nconst outboundCallStringsTrampoline = (strings: CallCompositeStrings): string => {\n  return '';\n};"]}
+{"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.\n\nimport React from 'react';\nimport { ActiveErrorMessage, 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 { 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/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\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  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  /* @conditional-compile-remove(capabilities) */\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\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  // 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      errorBarProps={props.options?.errorBar !== false && errorBarProps}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => (\n        <LobbyTile\n          {...lobbyProps}\n          showLocalVideoCameraCycleButton={props.mobileView}\n          overlayProps={overlayProps(strings, inLobby, Object.values(participants))}\n        />\n      )}\n      dataUiId={'lobby-page'}\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n      latestErrors={props.latestErrors}\n      onDismissError={props.onDismissError}\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"]}

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { CallCompositeIcons } from '../../common/icons';
+import { CallSurvey } from '@azure/communication-calling';
+import { CallSurveyImprovementSuggestions } from "../../../../../react-components/src";
 /**
  * @private
  */
@@ -11,6 +13,39 @@ export interface NoticePageProps {
     dataUiId: string;
     disableStartCallButton?: boolean;
     pageStyle?: IStyle;
+    /**
+     * Options for end of call survey
+     */
+    surveyOptions?: {
+        /**
+         * Disable call survey at the end of a call.
+         * @defaultValue false
+         */
+        disableSurvey?: boolean;
+        /**
+         * Optional callback to add extra logic when survey is dismissed. For self-host only
+         */
+        onSurveyDismissed?: () => void;
+        /**
+         * Optional callback to handle survey data including free form text response
+         * Note that free form text response survey option is only going to be enabled when this callback is provided
+         * User will need to handle all free form text response on their own
+         */
+        onSurveySubmitted?: (callId: string, surveyId: string, 
+        /**
+         * This is the survey results containing star survey data and API tag survey data.
+         * This part of the result will always be sent to the calling sdk
+         * This callback provides user with the ability to gain access to survey data
+         */
+        submittedSurvey: CallSurvey, 
+        /**
+         * This is the survey results containing free form text
+         * This part of the result will not be handled by composites
+         * User will need to collect and handle this information 100% on their own
+         * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated
+         */
+        improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;
+    };
 }
 /**
  * Generic page with a title and more details text for serving up a notice to the user.