@azure/communication-react 1.4.0 → 1.4.1-beta.1

package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useSidePaneState.js

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _isInCall } from "../../../../../calling-component-bindings/src";
+import { useCallback, useMemo, useState } from 'react';
+import { callStatusSelector } from '../selectors/callStatusSelector';
+import { useSelector } from './useSelector';
+/**
+ * @private
+ */
+export const useSidePaneState = () => {
+    const { callStatus } = useSelector(callStatusSelector);
+    const isInCall = _isInCall(callStatus);
+    const [chosenPane, setChosenPane] = useState(null);
+    const closePane = useCallback(() => {
+        setChosenPane(null);
+    }, [setChosenPane]);
+    const openPeoplePane = useCallback(() => {
+        setChosenPane('people');
+    }, []);
+    const togglePeoplePane = useCallback(() => {
+        if (chosenPane === 'people') {
+            closePane();
+        }
+        else {
+            openPeoplePane();
+        }
+    }, [chosenPane, closePane, openPeoplePane]);
+    // If we are not in a call, we should not show the people pane.
+    const activePane = chosenPane === 'people' && isInCall ? 'people' : null;
+    const memoizedReturnValue = useMemo(() => ({
+        activePane,
+        closePane,
+        openPeoplePane,
+        togglePeoplePane
+    }), [activePane, closePane, openPeoplePane, togglePeoplePane]);
+    return memoizedReturnValue;
+};
+//# sourceMappingURL=useSidePaneState.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useSidePaneState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidePaneState.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/hooks/useSidePaneState.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,sDAA6C;AACjE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAK9B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,UAAU,KAAK,QAAQ,EAAE;YAC3B,SAAS,EAAE,CAAC;SACb;aAAM;YACL,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,+DAA+D;IAC/D,MAAM,UAAU,GAAuB,UAAU,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC;QACL,UAAU;QACV,SAAS;QACT,cAAc;QACd,gBAAgB;KACjB,CAAC,EACF,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAC1D,CAAC;IAEF,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { useCallback, useMemo, useState } from 'react';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { useSelector } from './useSelector';\n\n/**\n * Active tab option type for {@link CallPane} component\n * @private\n */\n/** @beta */\nexport type CallSidePaneOption = null | 'people';\n\n/**\n * @private\n */\nexport const useSidePaneState = (): {\n  activePane: CallSidePaneOption;\n  closePane: () => void;\n  openPeoplePane: () => void;\n  togglePeoplePane: () => void;\n} => {\n  const { callStatus } = useSelector(callStatusSelector);\n  const isInCall = _isInCall(callStatus);\n  const [chosenPane, setChosenPane] = useState<CallSidePaneOption>(null);\n\n  const closePane = useCallback(() => {\n    setChosenPane(null);\n  }, [setChosenPane]);\n\n  const openPeoplePane = useCallback(() => {\n    setChosenPane('people');\n  }, []);\n\n  const togglePeoplePane = useCallback(() => {\n    if (chosenPane === 'people') {\n      closePane();\n    } else {\n      openPeoplePane();\n    }\n  }, [chosenPane, closePane, openPeoplePane]);\n\n  // If we are not in a call, we should not show the people pane.\n  const activePane: CallSidePaneOption = chosenPane === 'people' && isInCall ? 'people' : null;\n\n  const memoizedReturnValue = useMemo(\n    () => ({\n      activePane,\n      closePane,\n      openPeoplePane,\n      togglePeoplePane\n    }),\n    [activePane, closePane, openPeoplePane, togglePeoplePane]\n  );\n\n  return memoizedReturnValue;\n};\n\"../../../../../calling-component-bindings/src\""]}

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

@@ -1,6 +1,8 @@
 export { CallComposite } from './CallComposite';
 export type { CallCompositeOptions, CallCompositeProps } from './CallComposite';
+export type { DevicePermissionRestrictions } from './CallComposite';
 export type { CallControlDisplayType, CallControlOptions } from './types/CallControlOptions';
+export type { CustomCallControlButtonPlacement, CustomCallControlButtonCallback, CustomCallControlButtonCallbackArgs, CustomCallControlButtonProps, CustomControlButtonProps } from './types/CallControlOptions';
 export * from './adapter';
 export * from './Strings';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAahD,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { CallComposite } from './CallComposite';\nexport type { CallCompositeOptions, CallCompositeProps } from './CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nexport type { DevicePermissionRestrictions } from './CallComposite';\nexport type { CallControlDisplayType, CallControlOptions } from './types/CallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nexport type {\n  CustomCallControlButtonPlacement,\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonCallbackArgs,\n  CustomCallControlButtonProps,\n  CustomControlButtonProps\n} from './types/CallControlOptions';\nexport * from './adapter';\nexport * from './Strings';\n"]}

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

@@ -8,6 +8,7 @@ import { CallCompositeOptions } from '../CallComposite';
  */
 export interface CallPageProps {
     mobileView: boolean;
+    modalLayerHostId: string;
     callInvitationURL?: string;
     onRenderAvatar?: OnRenderAvatarCallback;
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback;

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

@@ -21,7 +21,8 @@ import { reduceCallControlsForMobile } from '../utils';
  * @private
  */
 export const CallPage = (props) => {
-    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView } = props; // To use useProps to get these states, we need to create another file wrapping Call,
+    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView } = props;
+    // To use useProps to get these states, we need to create another file wrapping Call,
     // It seems unnecessary in this case, so we get the updated states using this approach.
     const { callStatus } = useSelector(callStatusSelector);
     const mediaGalleryProps = useSelector(mediaGallerySelector);
@@ -30,14 +31,19 @@ export const CallPage = (props) => {
     const errorBarProps = usePropsFor(ErrorBar);
     const mutedNotificationProps = useSelector(mutedNotificationSelector);
     const networkReconnectTileProps = useSelector(networkReconnectTileSelector);
-    const strings = useLocale().strings.call; // Reduce the controls shown when mobile view is enabled.
+    const strings = useLocale().strings.call;
+    // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
-    return React.createElement(CallArrangement, { complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign({}, errorBarProps), mutedNotificationProps: mutedNotificationProps, callControlProps: {
+    return (React.createElement(CallArrangement, { complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign({}, errorBarProps), mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
             options: callControlOptions,
             increaseFlyoutItemSize: mobileView
-        }, mobileView: mobileView, onRenderGalleryContent: () => _isInCall(callStatus) ? isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData })) : React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)) : React.createElement(React.Fragment, null), dataUiId: 'call-page' });
+        }, 
+        /* @conditional-compile-remove(one-to-n-calling) */
+        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
+        /* @conditional-compile-remove(one-to-n-calling) */
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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"}
+{"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 { _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';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\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  return (\n    <CallArrangement\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      /* @conditional-compile-remove(one-to-n-calling) */\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            />\n          ) : (\n            <NetworkReconnectTile {...networkReconnectTileProps} />\n          )\n        ) : (\n          <></>\n        )\n      }\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\""]}

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

@@ -1,10 +1,18 @@
 /// <reference types="react" />
+import { DevicePermissionRestrictions } from '../CallComposite';
 /**
  * @private
  */
 export interface ConfigurationPageProps {
     mobileView: boolean;
     startCallHandler(): void;
+    devicePermissions?: DevicePermissionRestrictions;
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    onNetworkingTroubleShootingClick?: () => void;
+    callReadinessOptedIn?: boolean;
 }
 /**
  * @private

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

@@ -1,6 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useState } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
 import { useHandlers } from '../hooks/useHandlers';
 import { LocalDeviceSettings } from '../components/LocalDeviceSettings';
@@ -8,49 +19,165 @@ import { StartCallButton } from '../components/StartCallButton';
 import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
 import { useSelector } from '../hooks/useSelector';
 import { DevicesButton, ErrorBar } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+import { CameraAndMicrophoneDomainPermissions, _DrawerSurface } from "../../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _usePermissions } from "../../../../../react-components/src";
 import { getCallingSelector } from "../../../../../calling-component-bindings/src";
 import { Stack } from '@fluentui/react';
+/* @conditional-compile-remove(call-readiness) */
+import { Modal } from '@fluentui/react';
 import { LocalPreview } from '../components/LocalPreview';
 import { callDetailsStyleDesktop, callDetailsStyleMobile, configurationStackTokensDesktop, configurationStackTokensMobile, configurationContainerStyleDesktop, configurationContainerStyleMobile, selectionContainerStyle, startCallButtonContainerStyleDesktop, startCallButtonContainerStyleMobile, startCallButtonStyleMobile, titleContainerStyleDesktop, titleContainerStyleMobile, callDetailsContainerStylesDesktop } from '../styles/CallConfiguration.styles';
 import { useLocale } from '../../localization';
 import { bannerNotificationStyles } from '../styles/CallPage.styles';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useAdapter } from '../adapter/CallAdapterProvider';
+import { ConfigurationpageErrorBar } from '../components/ConfigurationpageErrorBar';
+/* @conditional-compile-remove(call-readiness) */
+import { drawerContainerStyles } from '../styles/CallComposite.styles';
+/* @conditional-compile-remove(call-readiness) */
+import { getDevicePermissionState } from '../utils';
+/* @conditional-compile-remove(call-readiness) */
+const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components
 /**
  * @private
  */
 export const ConfigurationPage = (props) => {
-    var _a;
-    const { startCallHandler, mobileView } = props;
+    var _a, _b;
+    const { startCallHandler, mobileView, 
+    /* @conditional-compile-remove(call-readiness) */ devicePermissions, 
+    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ callReadinessOptedIn = false } = props;
     const options = useAdaptedSelector(getCallingSelector(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);
+    /* @conditional-compile-remove(call-readiness) */
+    // use permission API to get video and audio permission state
+    const [videoState, setVideoState] = useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    const [audioState, setAudioState] = useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    getDevicePermissionState(setVideoState, setAudioState);
     let errorBarProps = usePropsFor(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
     let disableStartCallButton = !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
+    /* @conditional-compile-remove(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') });
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (!rolePermissions.microphoneButton) {
+        // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button
+        // because microphone device permission is not needed for the user's role
+        disableStartCallButton = false;
+    }
+    /* @conditional-compile-remove(call-readiness) */
+    // Overrides role permissions if CallCompositeOptions devicePermissions are set
+    if (devicePermissions) {
+        if (['doNotPrompt', 'optional'].includes(devicePermissions.camera) &&
+            ['doNotPrompt', 'optional'].includes(devicePermissions.microphone)) {
+            disableStartCallButton = false;
+        }
+        else if (devicePermissions.camera === 'required') {
+            disableStartCallButton = !cameraPermissionGranted || ((_b = deviceState.cameras) === null || _b === void 0 ? void 0 : _b.length) === 0;
+        }
+    }
     const locale = useLocale();
-    const title = React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle);
-    const callDescription = locale.strings.call.configurationPageCallDetails && React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails);
+    const title = (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
+    const callDescription = locale.strings.call.configurationPageCallDetails && (React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
-    return React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
+    /* @conditional-compile-remove(rooms) */
+    mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionsState = {
+        // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
+        camera: videoState !== null && videoState !== void 0 ? videoState : (cameraPermissionGranted ? 'granted' : 'denied'),
+        microphone: audioState !== null && audioState !== void 0 ? audioState : (microphonePermissionGranted ? 'granted' : 'denied')
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
+    /* @conditional-compile-remove(call-readiness) */
+    const [isDrawerShowing, setIsDrawerShowing] = useState(true);
+    /* @conditional-compile-remove(call-readiness) */
+    const onLightDismissTriggered = () => {
+        // do nothing here
+        // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const [isModalShowing, setIsModalShowing] = useState(false);
+    return (React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React.createElement(Stack, { styles: bannerNotificationStyles },
-            React.createElement(ErrorBar, Object.assign({}, errorBarProps))),
+            React.createElement(ConfigurationpageErrorBar
+            /* @conditional-compile-remove(call-readiness) */
+            // show trouble shooting error bar when encountering network error/ permission error
+            , { 
+                /* @conditional-compile-remove(call-readiness) */
+                // show trouble shooting error bar when encountering network error/ permission error
+                showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
+                /* @conditional-compile-remove(call-readiness) */
+                permissionsState: permissionsState, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps, 
+                /* @conditional-compile-remove(call-readiness) */
+                callReadinessOptedIn: callReadinessOptedIn })),
+        /* @conditional-compile-remove(call-readiness) */
+        //show this when clicking on enable camera button or enable mic button on desktop for the first time
+        //does not show if user has already grant mic or camera access
+        !mobileView && !cameraPermissionGranted && !microphonePermissionGranted && callReadinessOptedIn && (React.createElement(Modal, { isOpen: isModalShowing, isBlocking: false, onDismiss: () => {
+                setIsModalShowing(false);
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+            React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                    ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    }
+                    : undefined, type: "request" }))),
+        /* @conditional-compile-remove(call-readiness) */
+        mobileView && isDrawerShowing && callReadinessOptedIn && (React.createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+            React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                    ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    }
+                    : undefined, type: "request", onContinueAnywayClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield adapter.askDevicePermission({ video: true, audio: true });
+                    adapter.queryCameras();
+                    adapter.queryMicrophones();
+                    adapter.querySpeakers();
+                    setIsDrawerShowing(false);
+                }) }))),
         React.createElement(Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
-            mobileWithPreview && React.createElement(Stack.Item, null,
+            mobileWithPreview && (React.createElement(Stack.Item, null,
                 title,
-                callDescription),
-            localPreviewTrampoline(mobileWithPreview),
+                callDescription)),
+            localPreviewTrampoline(mobileWithPreview, 
+            /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton),
             React.createElement(Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                !mobileWithPreview && React.createElement(React.Fragment, null,
+                !mobileWithPreview && (React.createElement(React.Fragment, null,
                     React.createElement(Stack.Item, { styles: callDetailsContainerStylesDesktop },
                         title,
                         callDescription),
-                    React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted }))),
+                    React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted, 
+                        /* @conditional-compile-remove(call-readiness) */
+                        callReadinessOptedIn: callReadinessOptedIn, 
+                        /* @conditional-compile-remove(call-readiness) */
+                        onClickEnableDevicePermission: () => {
+                            setIsModalShowing(true);
+                        } })))),
                 React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                    React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton })))));
+                    React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
+    /* @conditional-compile-remove(rooms) */
+    if (doNotShow) {
+        return undefined;
+    }
     return React.createElement(LocalPreview, { mobileView: mobileView, showDevicesButton: mobileView });
 };
 //# sourceMappingURL=ConfigurationPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { DevicesButton, ErrorBar } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { CameraAndMicrophoneDomainPermissions, _DrawerSurface, _DrawerSurfaceStyles } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions, _Permissions } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Modal } from '@fluentui/react';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyleDesktop,\n  configurationContainerStyleMobile,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile,\n  callDetailsContainerStylesDesktop\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { DevicePermissionRestrictions } from '../CallComposite';\nimport { ConfigurationpageErrorBar } from '../components/ConfigurationpageErrorBar';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n\n/* @conditional-compile-remove(call-readiness) */\nconst DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  /* @conditional-compile-remove(call-readiness) */\n  devicePermissions?: DevicePermissionRestrictions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(call-readiness) */\n  callReadinessOptedIn?: boolean;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    /* @conditional-compile-remove(call-readiness) */ devicePermissions,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,\n    /* @conditional-compile-remove(call-readiness) */ callReadinessOptedIn = false\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 | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 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\n  let disableStartCallButton = !microphonePermissionGranted || deviceState.microphones?.length === 0;\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  /* @conditional-compile-remove(rooms) */\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (!rolePermissions.cameraButton) {\n    errorBarProps = {\n      ...errorBarProps,\n      activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied')\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 devicePermissions are set\n  if (devicePermissions) {\n    if (\n      ['doNotPrompt', 'optional'].includes(devicePermissions.camera) &&\n      ['doNotPrompt', 'optional'].includes(devicePermissions.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (devicePermissions.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || deviceState.cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title = (\n    <Stack.Item className={mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop}>\n      {locale.strings.call.configurationPageTitle}\n    </Stack.Item>\n  );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  let mobileWithPreview = mobileView;\n  /* @conditional-compile-remove(rooms) */\n  mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = {\n    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n    camera: videoState ?? (cameraPermissionGranted ? 'granted' : 'denied'),\n    microphone: audioState ?? (microphonePermissionGranted ? 'granted' : '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 [isDrawerShowing, setIsDrawerShowing] = useState(true);\n  /* @conditional-compile-remove(call-readiness) */\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isModalShowing, setIsModalShowing] = useState(false);\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          /* @conditional-compile-remove(call-readiness) */\n          callReadinessOptedIn={callReadinessOptedIn}\n        />\n      </Stack>\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        //show this when clicking on enable camera button or enable mic button on desktop for the first time\n        //does not show if user has already grant mic or camera access\n        !mobileView && !cameraPermissionGranted && !microphonePermissionGranted && callReadinessOptedIn && (\n          <Modal\n            isOpen={isModalShowing}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsModalShowing(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            <CameraAndMicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n            />\n          </Modal>\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        mobileView && isDrawerShowing && callReadinessOptedIn && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            <CameraAndMicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n              onContinueAnywayClick={async () => {\n                await adapter.askDevicePermission({ video: true, audio: true });\n                adapter.queryCameras();\n                adapter.queryMicrophones();\n                adapter.querySpeakers();\n                setIsDrawerShowing(false);\n              }}\n            />\n          </_DrawerSurface>\n        )\n      }\n      <Stack\n        grow\n        horizontal={!mobileWithPreview}\n        horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n        verticalAlign=\"center\"\n        tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n      >\n        {mobileWithPreview && (\n          <Stack.Item>\n            {title}\n            {callDescription}\n          </Stack.Item>\n        )}\n        {localPreviewTrampoline(\n          mobileWithPreview,\n          /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton\n        )}\n        <Stack className={mobileView ? undefined : selectionContainerStyle}>\n          {!mobileWithPreview && (\n            <>\n              <Stack.Item styles={callDetailsContainerStylesDesktop}>\n                {title}\n                {callDescription}\n              </Stack.Item>\n              <LocalDeviceSettings\n                {...options}\n                {...localDeviceSettingsHandlers}\n                cameraPermissionGranted={cameraPermissionGranted}\n                microphonePermissionGranted={microphonePermissionGranted}\n                /* @conditional-compile-remove(call-readiness) */\n                callReadinessOptedIn={callReadinessOptedIn}\n                /* @conditional-compile-remove(call-readiness) */\n                onClickEnableDevicePermission={() => {\n                  setIsModalShowing(true);\n                }}\n              />\n            </>\n          )}\n          <Stack\n            styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n          >\n            <StartCallButton\n              className={mobileWithPreview ? startCallButtonStyleMobile : undefined}\n              onClick={startCallHandler}\n              disabled={disableStartCallButton}\n            />\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element | undefined => {\n  /* @conditional-compile-remove(rooms) */\n  if (doNotShow) {\n    return undefined;\n  }\n  return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CallCompositeOptions } from '../../../index-public';
+/**
+ * @beta
+ */
+export interface HoldPageProps {
+    mobileView: boolean;
+    options?: CallCompositeOptions;
+    modalLayerHostId: string;
+}
+/**
+ * @beta
+ */
+export declare const HoldPage: (props: HoldPageProps) => JSX.Element;
+//# sourceMappingURL=HoldPage.d.ts.map

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

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

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

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

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

@@ -5,6 +5,7 @@ import { CallCompositeOptions } from '../CallComposite';
  */
 export interface LobbyPageProps {
     mobileView: boolean;
+    modalLayerHostId: string;
     options?: CallCompositeOptions;
 }
 /**

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LobbyPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/pages/LobbyPage.tsx"],"names":[],"mappings":"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"}
+{"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';\n\n/**\n * @private\n */\nexport interface LobbyPageProps {\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const LobbyPage = (props: LobbyPageProps): JSX.Element => {\n  const errorBarProps = usePropsFor(ErrorBar);\n  const lobbyProps = useSelector(lobbySelector);\n  const strings = useLocale().strings.call;\n\n  const callState = useSelector(getCallStatus);\n  const inLobby = callState === 'InLobby';\n\n  const participants = useSelector(getRemoteParticipants) ?? {};\n\n  useLocalVideoStartTrigger(lobbyProps.localParticipantVideoStream.isAvailable, inLobby);\n\n  // Reduce the controls shown when mobile view is enabled.\n  let callControlOptions = props.mobileView\n    ? reduceCallControlsForMobile(props.options?.callControls)\n    : props.options?.callControls;\n\n  callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);\n\n  return (\n    <CallArrangement\n      complianceBannerProps={{ strings }}\n      errorBarProps={props.options?.errorBar !== false && { ...errorBarProps }}\n      callControlProps={{\n        options: callControlOptions,\n        increaseFlyoutItemSize: props.mobileView\n      }}\n      mobileView={props.mobileView}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      modalLayerHostId={props.modalLayerHostId}\n      onRenderGalleryContent={() => (\n        <LobbyTile {...lobbyProps} overlayProps={overlayProps(strings, inLobby, Object.values(participants))} />\n      )}\n      dataUiId={'lobby-page'}\n    />\n  );\n};\n\nconst overlayProps = (\n  strings: CallCompositeStrings,\n  inLobby: boolean,\n  remoteParticipants: RemoteParticipantState[]\n): LobbyOverlayProps => {\n  /**\n   * Only grab the first participant because there will only be one in this situation.\n   * when starting a call with multiple people the call goes to the connected state and composite goes directly to\n   * videoGallery.\n   *\n   * We also need to check the participant state since in a group call the remote participants array will populate just before\n   * the user joins. In this situation we also check the participant states. in a groupCall the state of the participants\n   * will be 'Idle'.\n   */\n  const outboundCallParticipant: RemoteParticipantState | undefined =\n    remoteParticipants[0] &&\n    ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) &&\n    remoteParticipants.length === 1\n      ? remoteParticipants[0]\n      : undefined;\n\n  return inLobby\n    ? overlayPropsWaitingToBeAdmitted(strings)\n    : outboundCallParticipant\n    ? overlayPropsOutboundCall(strings, outboundCallParticipant)\n    : overlayPropsConnectingToCall(strings);\n};\n\nconst overlayPropsConnectingToCall = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenConnectingToCallTitle,\n  moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenConnectingToCall\" />\n});\n\nconst overlayPropsWaitingToBeAdmitted = (strings: CallCompositeStrings): LobbyOverlayProps => ({\n  title: strings.lobbyScreenWaitingToBeAdmittedTitle,\n  moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,\n  overlayIcon: <CallCompositeIcon iconName=\"LobbyScreenWaitingToBeAdmitted\" />\n});\n\nconst overlayPropsOutboundCall = (\n  strings: CallCompositeStrings,\n  participant: RemoteParticipantState\n): LobbyOverlayProps => {\n  if (isPhoneNumberIdentifier(participant.identifier)) {\n    return {\n      title: (participant.identifier as PhoneNumberIdentifier).phoneNumber,\n      moreDetails: outboundCallStringsTrampoline(strings)\n    };\n  } else {\n    return {\n      title: outboundCallStringsTrampoline(strings)\n    };\n  }\n};\n\nconst outboundCallStringsTrampoline = (strings: CallCompositeStrings): string => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return strings.outboundCallingNoticeString;\n  return '';\n};\n\"../../../../../react-components/src\"\"../../../../../calling-stateful-client/src\""]}

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

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