@azure/communication-react 1.7.0-alpha-202307080015 → 1.7.0-alpha-202307110015

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

@@ -1 +1 @@
-{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ErrorBar, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n\n  return (\n    <CallArrangement\n      id={drawerMenuHostId}\n      complianceBannerProps={{ ...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={options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      mutedNotificationProps={mutedNotificationProps}\n      callControlProps={{\n        callInvitationURL: callInvitationURL,\n        onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n        options: callControlOptions,\n        increaseFlyoutItemSize: mobileView\n      }}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n      mobileView={mobileView}\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() =>\n        _isInCall(callStatus) ? (\n          isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n            <MediaGallery\n              isMobile={mobileView}\n              {...mediaGalleryProps}\n              {...mediaGalleryHandlers}\n              onRenderAvatar={onRenderAvatar}\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              /* @conditional-compile-remove(pinned-participants) */\n              remoteVideoTileMenuOptions={options?.remoteVideoTileMenu}\n              drawerMenuHostId={drawerMenuHostId}\n              /* @conditional-compile-remove(click-to-call) */\n              localVideoTileOptions={options?.localVideoTile}\n            />\n          ) : (\n            <NetworkReconnectTile {...networkReconnectTileProps} />\n          )\n        ) : (\n          <></>\n        )\n      }\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n      dataUiId={'call-page'}\n    />\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  ActiveErrorMessage,\n  ErrorBar,\n  OnRenderAvatarCallback,\n  ParticipantMenuItemsCallback\n} from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n\n  return (\n    <CallArrangement\n      id={drawerMenuHostId}\n      complianceBannerProps={{ ...complianceBannerProps, strings }}\n      errorBarProps={options?.errorBar !== false && errorBarProps}\n      mutedNotificationProps={mutedNotificationProps}\n      callControlProps={{\n        callInvitationURL: callInvitationURL,\n        onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n        options: callControlOptions,\n        increaseFlyoutItemSize: mobileView\n      }}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n      mobileView={mobileView}\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() =>\n        _isInCall(callStatus) ? (\n          isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n            <MediaGallery\n              isMobile={mobileView}\n              {...mediaGalleryProps}\n              {...mediaGalleryHandlers}\n              onRenderAvatar={onRenderAvatar}\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              /* @conditional-compile-remove(pinned-participants) */\n              remoteVideoTileMenuOptions={options?.remoteVideoTileMenu}\n              drawerMenuHostId={drawerMenuHostId}\n              /* @conditional-compile-remove(click-to-call) */\n              localVideoTileOptions={options?.localVideoTile}\n            />\n          ) : (\n            <NetworkReconnectTile {...networkReconnectTileProps} />\n          )\n        ) : (\n          <></>\n        )\n      }\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n      dataUiId={'call-page'}\n      latestErrors={props.latestErrors}\n      onDismissError={props.onDismissError}\n    />\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ActiveErrorMessage } from "../../../../../react-components/src";
 import { DeviceCheckOptions } from '../CallComposite';
 import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
 /**
@@ -8,6 +9,8 @@ export interface ConfigurationPageProps {
     mobileView: boolean;
     startCallHandler(): void;
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
     modalLayerHostId: string;
     deviceChecks?: DeviceCheckOptions;
     onPermissionsTroubleshootingClick?: (permissionsState: {

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

@@ -61,7 +61,7 @@ export const ConfigurationPage = (props) => {
     const [audioState, setAudioState] = useState(undefined);
     /* @conditional-compile-remove(call-readiness) */
     getDevicePermissionState(setVideoState, setAudioState);
-    let errorBarProps = usePropsFor(ErrorBar);
+    const errorBarProps = usePropsFor(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
     /* @conditional-compile-remove(unsupported-browser) */
@@ -71,14 +71,15 @@ export const ConfigurationPage = (props) => {
     const rolePermissions = _usePermissions();
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
+    let filteredLatestErrors = props.latestErrors;
     /* @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') });
+        filteredLatestErrors = filteredLatestErrors.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') });
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(rooms) */
     if (!rolePermissions.microphoneButton) {
@@ -140,7 +141,7 @@ export const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
     /* @conditional-compile-remove(video-background-effects) */
-    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView);
+    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView, props.latestErrors, props.onDismissError);
     const startCall = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         /* @conditional-compile-remove(video-background-effects) */
         closeVideoEffectsPane();
@@ -149,6 +150,7 @@ export const ConfigurationPage = (props) => {
     const panelLayerProps = useMemo(() => ({
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
+    const filteredErrorBarProps = useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
     return (React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React.createElement(Stack, { styles: bannerNotificationStyles },
             React.createElement(ConfigurationPageErrorBar
@@ -163,7 +165,7 @@ export const ConfigurationPage = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
+                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, 

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, { 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, PanelType, 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 { 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\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          type={PanelType.custom}\n          /* @conditional-compile-remove(video-background-effects) */\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\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\""]}
+{"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 { ActiveErrorMessage, 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, PanelType, 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 { 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\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}\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  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 rolePermissions = _usePermissions();\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 (!rolePermissions.cameraButton) {\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 (!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    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  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={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={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          type={PanelType.custom}\n          /* @conditional-compile-remove(video-background-effects) */\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\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,4 +1,5 @@
 /// <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';
@@ -11,6 +12,8 @@ export interface HoldPageProps {
     modalLayerHostId: string;
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
     mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
 }
 /**
  * @beta

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

@@ -26,11 +26,9 @@ export const HoldPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         'holdButton'
     ]);
-    return (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: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+    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 }));
+        }, 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

@@ -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;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\""]}
+{"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;AAiB5E;;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\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}\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\"../../../../../react-components/src\""]}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ActiveErrorMessage } from "../../../../../react-components/src";
 import { CallCompositeOptions } from '../CallComposite';
 import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
 import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
@@ -11,6 +12,8 @@ export interface LobbyPageProps {
     options?: CallCompositeOptions;
     mobileChatTabHeader: MobileChatSidePaneTabHeaderProps | undefined;
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
 }
 /**
  * @private

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

@@ -30,12 +30,10 @@ export const LobbyPage = (props) => {
         ? 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 }, 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), 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, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+        }, 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, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 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":"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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\""]}
+{"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 { 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 { 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  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => 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      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 {...lobbyProps} overlayProps={overlayProps(strings, inLobby, Object.values(participants))} />\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\"../../../../../react-components/src\"\"../../../../../calling-stateful-client/src\""]}

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

@@ -65,14 +65,14 @@ export const TransferPage = (props) => {
         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: {
+            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && errorBarProps, 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 })));
+                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError })));
 };
 const TransferTile = (props) => {
     const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"TransferPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/TransferPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Spinner, SpinnerSize, Stack, Text, mergeStyles } from '@fluentui/react';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { ErrorBar, OnRenderAvatarCallback } from '@internal/react-components';\n/* @conditional-compile-remove(call-transfer) */\nimport { Announcer } from '@internal/react-components';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(call-transfer) */\nimport { useEffect } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getRemoteParticipants } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-transfer) */\nimport { getTransferCall } from '../selectors/baseSelectors';\nimport {\n  avatarStyles,\n  defaultPersonaStyles,\n  displayNameStyles,\n  pageContainer,\n  spinnerStyles,\n  statusTextStyles,\n  tileContainerStyles,\n  tileContentStyles\n} from '../styles/TransferPage.styles';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { LobbyPageProps } from './LobbyPage';\n\n/* @conditional-compile-remove(call-transfer) */\n// Which should be participant shown in the transfer page\ntype TransferPageSubject = 'transferor' | 'transferTarget';\n\n/**\n * @private\n */\nexport const TransferPage = (\n  props: LobbyPageProps & {\n    /** Render component function to replace the default Persona Icon representing the transferor or transfer target. */\n    onRenderAvatar?: OnRenderAvatarCallback;\n    /** Callback function that can be used to provide custom data to Persona Icon rendered */\n    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  }\n): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const strings = useLocale().strings.call;\n  const remoteParticipants = useSelector(getRemoteParticipants);\n  /* @conditional-compile-remove(call-transfer) */\n  const transferCall = useSelector(getTransferCall);\n\n  /* @conditional-compile-remove(call-transfer) */\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  const transferor = useMemo(\n    () => (remoteParticipants ? Object.values(remoteParticipants)?.[0] : undefined),\n    [remoteParticipants]\n  );\n  /* @conditional-compile-remove(call-transfer) */\n  const transferTarget = useMemo(\n    () => (transferCall?.remoteParticipants ? Object.values(transferCall.remoteParticipants)?.[0] : undefined),\n    [transferCall]\n  );\n\n  /* @conditional-compile-remove(call-transfer) */\n  const pageSubject: TransferPageSubject = useMemo(() => {\n    if (transferCall && transferTarget?.displayName) {\n      return 'transferTarget';\n    }\n    return 'transferor';\n  }, [transferCall, transferTarget?.displayName]);\n\n  /* @conditional-compile-remove(call-transfer) */\n  useEffect(() => {\n    setAnnouncerString(strings.transferPageNoticeString);\n  }, [strings.transferPageNoticeString]);\n\n  let transferTileParticipant = transferor;\n  /* @conditional-compile-remove(call-transfer) */\n  if (pageSubject === 'transferTarget') {\n    transferTileParticipant = transferTarget;\n  }\n\n  let transferParticipantDisplayName =\n    transferor?.displayName ??\n    /* @conditional-compile-remove(call-transfer) */ strings.transferPageUnknownTransferorDisplayName;\n  /* @conditional-compile-remove(call-transfer) */\n  if (pageSubject === 'transferTarget') {\n    transferParticipantDisplayName =\n      transferTarget?.displayName ?? strings.transferPageUnknownTransferTargetDisplayName;\n  }\n\n  return (\n    <Stack className={mergeStyles(pageContainer)}>\n      {\n        /* @conditional-compile-remove(call-transfer) */\n        <Announcer announcementString={announcerString} ariaLive=\"polite\" />\n      }\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          <TransferTile\n            userId={\n              transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant?.identifier) : undefined\n            }\n            displayName={transferParticipantDisplayName}\n            initialsName={transferParticipantDisplayName}\n            /* @conditional-compile-remove(call-transfer) */\n            statusText={\n              pageSubject === 'transferTarget'\n                ? strings.transferPageTransferTargetText\n                : strings.transferPageTransferorText\n            }\n            onRenderAvatar={props.onRenderAvatar}\n            onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          />\n        )}\n        dataUiId={'transfer-page'}\n        updateSidePaneRenderer={props.updateSidePaneRenderer}\n        mobileChatTabHeader={props.mobileChatTabHeader}\n      />\n    </Stack>\n  );\n};\n\ninterface TransferTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /** User id for `onFetchAvatarPersonaData` callback to provide custom data to avatars rendered */\n  userId?: string;\n  /** Render component function to replace the default Persona Icon representing the transferor or transfer target. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Callback function that can be used to provide custom data to Persona Icon rendered */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  /**\n   * Display name of the transferor or transfer target to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the transferor or transfer target used to generate initials for the avatar. For example, a name\n   * `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /** Optional property to set the status of the transfer process */\n  statusText?: string;\n}\n\nconst TransferTile = (props: TransferTileProps): JSX.Element => {\n  const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;\n\n  const [personaSize, setPersonaSize] = useState<number>();\n  const tileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const { width, height } = entries[0].contentRect;\n      const personaSize = Math.min(width, height) / 2;\n      setPersonaSize(Math.max(Math.min(personaSize, 150), 32));\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (tileRef.current) {\n      observer.current.observe(tileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, tileRef]);\n\n  const placeholderOptions = useMemo(\n    () => ({\n      userId,\n      text: initialsName ?? displayName,\n      coinSize: personaSize,\n      styles: defaultPersonaStyles,\n      hidePersonaDetails: true\n    }),\n    [userId, initialsName, displayName, personaSize]\n  );\n\n  const defaultOnRenderAvatar = useCallback(() => {\n    return personaSize ? (\n      <AvatarPersona\n        {...placeholderOptions}\n        dataProvider={onFetchAvatarPersonaData}\n        className={mergeStyles(avatarStyles)}\n      />\n    ) : (\n      <></>\n    );\n  }, [placeholderOptions, onFetchAvatarPersonaData, personaSize]);\n\n  const defaultAvatar = useMemo(() => defaultOnRenderAvatar(), [defaultOnRenderAvatar]);\n\n  return (\n    <div ref={tileRef} className={mergeStyles(tileContainerStyles)} data-is-focusable={true}>\n      <Stack className={mergeStyles(tileContentStyles)} tokens={{ childrenGap: '1rem' }}>\n        <Stack horizontalAlign=\"center\" tokens={{ childrenGap: '0.5rem' }}>\n          {onRenderAvatar ? onRenderAvatar(userId ?? '', placeholderOptions, defaultOnRenderAvatar) : defaultAvatar}\n          <Text className={mergeStyles(displayNameStyles)}>{displayName}</Text>\n        </Stack>\n        <Stack horizontal horizontalAlign=\"center\" verticalAlign=\"center\" tokens={{ childrenGap: '0.5rem' }}>\n          <Spinner size={SpinnerSize.large} className={mergeStyles(spinnerStyles)} />\n          <Text className={mergeStyles(statusTextStyles)}>{statusText}</Text>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"TransferPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/TransferPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Spinner, SpinnerSize, Stack, Text, mergeStyles } from '@fluentui/react';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { ErrorBar, OnRenderAvatarCallback } from '@internal/react-components';\n/* @conditional-compile-remove(call-transfer) */\nimport { Announcer } from '@internal/react-components';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(call-transfer) */\nimport { useEffect } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getRemoteParticipants } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-transfer) */\nimport { getTransferCall } from '../selectors/baseSelectors';\nimport {\n  avatarStyles,\n  defaultPersonaStyles,\n  displayNameStyles,\n  pageContainer,\n  spinnerStyles,\n  statusTextStyles,\n  tileContainerStyles,\n  tileContentStyles\n} from '../styles/TransferPage.styles';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { LobbyPageProps } from './LobbyPage';\n\n/* @conditional-compile-remove(call-transfer) */\n// Which should be participant shown in the transfer page\ntype TransferPageSubject = 'transferor' | 'transferTarget';\n\n/**\n * @private\n */\nexport const TransferPage = (\n  props: LobbyPageProps & {\n    /** Render component function to replace the default Persona Icon representing the transferor or transfer target. */\n    onRenderAvatar?: OnRenderAvatarCallback;\n    /** Callback function that can be used to provide custom data to Persona Icon rendered */\n    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  }\n): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const strings = useLocale().strings.call;\n  const remoteParticipants = useSelector(getRemoteParticipants);\n  /* @conditional-compile-remove(call-transfer) */\n  const transferCall = useSelector(getTransferCall);\n\n  /* @conditional-compile-remove(call-transfer) */\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  const transferor = useMemo(\n    () => (remoteParticipants ? Object.values(remoteParticipants)?.[0] : undefined),\n    [remoteParticipants]\n  );\n  /* @conditional-compile-remove(call-transfer) */\n  const transferTarget = useMemo(\n    () => (transferCall?.remoteParticipants ? Object.values(transferCall.remoteParticipants)?.[0] : undefined),\n    [transferCall]\n  );\n\n  /* @conditional-compile-remove(call-transfer) */\n  const pageSubject: TransferPageSubject = useMemo(() => {\n    if (transferCall && transferTarget?.displayName) {\n      return 'transferTarget';\n    }\n    return 'transferor';\n  }, [transferCall, transferTarget?.displayName]);\n\n  /* @conditional-compile-remove(call-transfer) */\n  useEffect(() => {\n    setAnnouncerString(strings.transferPageNoticeString);\n  }, [strings.transferPageNoticeString]);\n\n  let transferTileParticipant = transferor;\n  /* @conditional-compile-remove(call-transfer) */\n  if (pageSubject === 'transferTarget') {\n    transferTileParticipant = transferTarget;\n  }\n\n  let transferParticipantDisplayName =\n    transferor?.displayName ??\n    /* @conditional-compile-remove(call-transfer) */ strings.transferPageUnknownTransferorDisplayName;\n  /* @conditional-compile-remove(call-transfer) */\n  if (pageSubject === 'transferTarget') {\n    transferParticipantDisplayName =\n      transferTarget?.displayName ?? strings.transferPageUnknownTransferTargetDisplayName;\n  }\n\n  return (\n    <Stack className={mergeStyles(pageContainer)}>\n      {\n        /* @conditional-compile-remove(call-transfer) */\n        <Announcer announcementString={announcerString} ariaLive=\"polite\" />\n      }\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}\n        callControlProps={{\n          options: callControlOptions,\n          increaseFlyoutItemSize: props.mobileView\n        }}\n        mobileView={props.mobileView}\n        modalLayerHostId={props.modalLayerHostId}\n        onRenderGalleryContent={() => (\n          <TransferTile\n            userId={\n              transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant?.identifier) : undefined\n            }\n            displayName={transferParticipantDisplayName}\n            initialsName={transferParticipantDisplayName}\n            /* @conditional-compile-remove(call-transfer) */\n            statusText={\n              pageSubject === 'transferTarget'\n                ? strings.transferPageTransferTargetText\n                : strings.transferPageTransferorText\n            }\n            onRenderAvatar={props.onRenderAvatar}\n            onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          />\n        )}\n        dataUiId={'transfer-page'}\n        updateSidePaneRenderer={props.updateSidePaneRenderer}\n        mobileChatTabHeader={props.mobileChatTabHeader}\n        latestErrors={props.latestErrors}\n        onDismissError={props.onDismissError}\n      />\n    </Stack>\n  );\n};\n\ninterface TransferTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /** User id for `onFetchAvatarPersonaData` callback to provide custom data to avatars rendered */\n  userId?: string;\n  /** Render component function to replace the default Persona Icon representing the transferor or transfer target. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Callback function that can be used to provide custom data to Persona Icon rendered */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  /**\n   * Display name of the transferor or transfer target to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the transferor or transfer target used to generate initials for the avatar. For example, a name\n   * `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /** Optional property to set the status of the transfer process */\n  statusText?: string;\n}\n\nconst TransferTile = (props: TransferTileProps): JSX.Element => {\n  const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;\n\n  const [personaSize, setPersonaSize] = useState<number>();\n  const tileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const { width, height } = entries[0].contentRect;\n      const personaSize = Math.min(width, height) / 2;\n      setPersonaSize(Math.max(Math.min(personaSize, 150), 32));\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (tileRef.current) {\n      observer.current.observe(tileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, tileRef]);\n\n  const placeholderOptions = useMemo(\n    () => ({\n      userId,\n      text: initialsName ?? displayName,\n      coinSize: personaSize,\n      styles: defaultPersonaStyles,\n      hidePersonaDetails: true\n    }),\n    [userId, initialsName, displayName, personaSize]\n  );\n\n  const defaultOnRenderAvatar = useCallback(() => {\n    return personaSize ? (\n      <AvatarPersona\n        {...placeholderOptions}\n        dataProvider={onFetchAvatarPersonaData}\n        className={mergeStyles(avatarStyles)}\n      />\n    ) : (\n      <></>\n    );\n  }, [placeholderOptions, onFetchAvatarPersonaData, personaSize]);\n\n  const defaultAvatar = useMemo(() => defaultOnRenderAvatar(), [defaultOnRenderAvatar]);\n\n  return (\n    <div ref={tileRef} className={mergeStyles(tileContainerStyles)} data-is-focusable={true}>\n      <Stack className={mergeStyles(tileContentStyles)} tokens={{ childrenGap: '1rem' }}>\n        <Stack horizontalAlign=\"center\" tokens={{ childrenGap: '0.5rem' }}>\n          {onRenderAvatar ? onRenderAvatar(userId ?? '', placeholderOptions, defaultOnRenderAvatar) : defaultAvatar}\n          <Text className={mergeStyles(displayNameStyles)}>{displayName}</Text>\n        </Stack>\n        <Stack horizontal horizontalAlign=\"center\" verticalAlign=\"center\" tokens={{ childrenGap: '0.5rem' }}>\n          <Spinner size={SpinnerSize.large} className={mergeStyles(spinnerStyles)} />\n          <Text className={mergeStyles(statusTextStyles)}>{statusText}</Text>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/ErrorTracking.d.ts

@@ -0,0 +1,9 @@
+import { ErrorType } from "../../../../../react-components/src";
+/** @private */
+export interface ErrorTrackingInfo {
+    mostRecentlyActive: Date;
+    lastDismissedAt?: Date;
+}
+/** @private */
+export declare type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;
+//# sourceMappingURL=ErrorTracking.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/ErrorTracking.js

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+export {};
+//# sourceMappingURL=ErrorTracking.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/ErrorTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTracking.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/types/ErrorTracking.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ErrorType } from '@internal/react-components';\n\n/** @private */\nexport interface ErrorTrackingInfo {\n  mostRecentlyActive: Date;\n  lastDismissedAt?: Date;\n}\n\n/** @private */\nexport type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackErrors.d.ts

@@ -0,0 +1,21 @@
+import { ActiveErrorMessage, ErrorType } from "../../../../../react-components/src";
+import { TrackedErrors } from '../types/ErrorTracking';
+/**
+ * Take the set of active errors, and filter to only those that are newer than previously dismissed errors or have never been dismissed.
+ *
+ * @private
+ */
+export declare const filterLatestErrors: (activeErrors: ActiveErrorMessage[], trackedErrors: TrackedErrors) => ActiveErrorMessage[];
+/**
+ * Maintain a record of the most recently active error for each error type.
+ *
+ * @private
+ */
+export declare const updateTrackedErrorsWithActiveErrors: (existingTrackedErrors: TrackedErrors, activeErrors: ActiveErrorMessage[]) => TrackedErrors;
+/**
+ * Create a record for when the error was most recently dismissed for tracking dismissed errors.
+ *
+ * @private
+ */
+export declare const trackErrorAsDismissed: (errorType: ErrorType, trackedErrors: TrackedErrors) => TrackedErrors;
+//# sourceMappingURL=TrackErrors.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackErrors.js

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Take the set of active errors, and filter to only those that are newer than previously dismissed errors or have never been dismissed.
+ *
+ * @private
+ */
+export const filterLatestErrors = (activeErrors, trackedErrors) => {
+    const filteredErrors = activeErrors.filter((activeError) => {
+        const trackedError = trackedErrors[activeError.type];
+        return (!trackedError || !trackedError.lastDismissedAt || trackedError.lastDismissedAt < trackedError.mostRecentlyActive);
+    });
+    return filteredErrors;
+};
+/**
+ * Maintain a record of the most recently active error for each error type.
+ *
+ * @private
+ */
+export const updateTrackedErrorsWithActiveErrors = (existingTrackedErrors, activeErrors) => {
+    var _a, _b;
+    const trackedErrors = {};
+    // Only care about active errors. If errors are no longer active we do not track that they have been previously dismissed.
+    for (const activeError of activeErrors) {
+        const existingTrackedError = existingTrackedErrors[activeError.type];
+        trackedErrors[activeError.type] = {
+            mostRecentlyActive: (_b = (_a = activeError.timestamp) !== null && _a !== void 0 ? _a : existingTrackedError === null || existingTrackedError === void 0 ? void 0 : existingTrackedError.mostRecentlyActive) !== null && _b !== void 0 ? _b : new Date(Date.now()),
+            lastDismissedAt: existingTrackedError === null || existingTrackedError === void 0 ? void 0 : existingTrackedError.lastDismissedAt
+        };
+    }
+    return trackedErrors;
+};
+/**
+ * Create a record for when the error was most recently dismissed for tracking dismissed errors.
+ *
+ * @private
+ */
+export const trackErrorAsDismissed = (errorType, trackedErrors) => {
+    const now = new Date(Date.now());
+    const existingError = trackedErrors[errorType];
+    return Object.assign(Object.assign({}, trackedErrors), { [errorType]: Object.assign(Object.assign({}, (existingError || {})), { lastDismissedAt: now }) });
+};
+//# sourceMappingURL=TrackErrors.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackErrors.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/TrackErrors.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,YAAkC,EAClC,aAA4B,EACN,EAAE;IACxB,MAAM,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE;QACzD,MAAM,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACrD,OAAO,CACL,CAAC,YAAY,IAAI,CAAC,YAAY,CAAC,eAAe,IAAI,YAAY,CAAC,eAAe,GAAG,YAAY,CAAC,kBAAkB,CACjH,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CACjD,qBAAoC,EACpC,YAAkC,EACnB,EAAE;;IACjB,MAAM,aAAa,GAAkB,EAAE,CAAC;IAExC,0HAA0H;IAC1H,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE;QACtC,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACrE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG;YAChC,kBAAkB,EAAE,MAAA,MAAA,WAAW,CAAC,SAAS,mCAAI,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,kBAAkB,mCAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAC7G,eAAe,EAAE,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,eAAe;SACvD,CAAC;KACH;IAED,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAoB,EAAE,aAA4B,EAAiB,EAAE;IACzG,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE/C,uCACK,aAAa,KAChB,CAAC,SAAS,CAAC,kCACN,CAAC,aAAa,IAAI,EAAE,CAAC,KACxB,eAAe,EAAE,GAAG,OAEtB;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ActiveErrorMessage, ErrorType } from '@internal/react-components';\nimport { TrackedErrors } from '../types/ErrorTracking';\n\n/**\n * Take the set of active errors, and filter to only those that are newer than previously dismissed errors or have never been dismissed.\n *\n * @private\n */\nexport const filterLatestErrors = (\n  activeErrors: ActiveErrorMessage[],\n  trackedErrors: TrackedErrors\n): ActiveErrorMessage[] => {\n  const filteredErrors = activeErrors.filter((activeError) => {\n    const trackedError = trackedErrors[activeError.type];\n    return (\n      !trackedError || !trackedError.lastDismissedAt || trackedError.lastDismissedAt < trackedError.mostRecentlyActive\n    );\n  });\n  return filteredErrors;\n};\n\n/**\n * Maintain a record of the most recently active error for each error type.\n *\n * @private\n */\nexport const updateTrackedErrorsWithActiveErrors = (\n  existingTrackedErrors: TrackedErrors,\n  activeErrors: ActiveErrorMessage[]\n): TrackedErrors => {\n  const trackedErrors: TrackedErrors = {};\n\n  // Only care about active errors. If errors are no longer active we do not track that they have been previously dismissed.\n  for (const activeError of activeErrors) {\n    const existingTrackedError = existingTrackedErrors[activeError.type];\n    trackedErrors[activeError.type] = {\n      mostRecentlyActive: activeError.timestamp ?? existingTrackedError?.mostRecentlyActive ?? new Date(Date.now()),\n      lastDismissedAt: existingTrackedError?.lastDismissedAt\n    };\n  }\n\n  return trackedErrors;\n};\n\n/**\n * Create a record for when the error was most recently dismissed for tracking dismissed errors.\n *\n * @private\n */\nexport const trackErrorAsDismissed = (errorType: ErrorType, trackedErrors: TrackedErrors): TrackedErrors => {\n  const now = new Date(Date.now());\n  const existingError = trackedErrors[errorType];\n\n  return {\n    ...trackedErrors,\n    [errorType]: {\n      ...(existingError || {}),\n      lastDismissedAt: now\n    }\n  };\n};\n\"../../../../../react-components/src\""]}