@azure/communication-react 1.5.1-alpha-202211250013.0 → 1.5.2-alpha-202301190014.0

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js

@@ -13,7 +13,7 @@ import { useAdapter } from '../adapter/CallAdapterProvider';
 import { CallControls } from '../components/CallControls';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 import { useSidePaneState } from '../hooks/useSidePaneState';
-import { callControlsContainerStyles, notificationsContainerStyles, containerStyleDesktop, containerStyleMobile, mediaGalleryContainerStyles, galleryParentContainerStyles, bannerNotificationStyles } from '../styles/CallPage.styles';
+import { callArrangementContainerStyles, callControlsContainerStyles, notificationsContainerStyles, containerStyleDesktop, containerStyleMobile, mediaGalleryContainerStyles, galleryParentContainerStyles, bannerNotificationStyles } from '../styles/CallPage.styles';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 import { CallPane } from './CallPane';
 import { MutedNotification } from './MutedNotification';
@@ -38,14 +38,14 @@ export const CallArrangement = (props) => {
     const isMobileWithActivePane = props.mobileView && activePane;
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callCompositeContainerCSS = useMemo(() => {
-        return { display: isMobileWithActivePane ? 'none' : 'flex' };
+        return { display: isMobileWithActivePane ? 'none' : 'flex', width: '100%', height: '100%' };
     }, [isMobileWithActivePane]);
     // To be removed once feature is out of beta, replace with callCompositeContainerCSS
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const callCompositeContainerFlex = () => {
         /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         return callCompositeContainerCSS;
-        return { display: 'flex' };
+        return { display: 'flex', width: '100%', height: '100%' };
     };
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callPaneContent = useCallback(() => {
@@ -75,29 +75,30 @@ export const CallArrangement = (props) => {
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (!rolePermissions.cameraButton && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied') });
+        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles) },
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
         React.createElement(Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React.createElement(Stack, { horizontal: true, grow: true },
+            React.createElement(Stack, { grow: true, styles: callArrangementContainerStyles },
                 React.createElement(Stack.Item, { styles: notificationsContainerStyles },
                     React.createElement(Stack, { styles: bannerNotificationStyles },
                         React.createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                     errorBarProps !== false && (React.createElement(Stack, { styles: bannerNotificationStyles },
                         React.createElement(ErrorBar, Object.assign({}, errorBarProps)))),
                     canUnmute && !!props.mutedNotificationProps && React.createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
-                React.createElement(Stack.Item, { grow: true, style: callCompositeContainerFlex() },
-                    React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React.createElement(Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
-                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                callPaneContent()),
-            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
-                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                !isMobileWithActivePane && (React.createElement(Stack.Item, { className: callControlsContainerStyles },
-                React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    peopleButtonChecked: activePane === 'people', 
-                    /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane })))))));
+                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
+                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                    !isMobileWithActivePane && (React.createElement(Stack.Item, { className: callControlsContainerStyles },
+                    React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                        /* @conditional-compile-remove(one-to-n-calling) */
+                        peopleButtonChecked: activePane === 'people', 
+                        /* @conditional-compile-remove(one-to-n-calling) */
+                        onPeopleButtonClicked: togglePeoplePane })))),
+                React.createElement(Stack, { horizontal: true, grow: true },
+                    React.createElement(Stack.Item, { grow: true, style: callCompositeContainerFlex() },
+                        React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React.createElement(Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
+                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                    callPaneContent())))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton = (callControls) => {

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

@@ -1 +1 @@
-{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useSidePaneState } from '../hooks/useSidePaneState';\nimport {\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallPane } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const { activePane, closePane, openPeoplePane, togglePeoplePane } = useSidePaneState();\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const isMobileWithActivePane = props.mobileView && activePane;\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return callCompositeContainerCSS;\n    return { display: 'flex' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? openPeoplePane : undefined\n          }\n          callControls={\n            typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    openPeoplePane\n  ]);\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  let canUnmute = true;\n  /* @conditional-compile-remove(rooms) */\n  canUnmute = rolePermissions.microphoneButton;\n\n  let errorBarProps = props.errorBarProps;\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 && props.errorBarProps) {\n    errorBarProps = {\n      ...props.errorBarProps,\n      activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied')\n    };\n  }\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack horizontal grow>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...errorBarProps} />\n              </Stack>\n            )}\n            {canUnmute && !!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          <Stack.Item grow style={callCompositeContainerFlex()}>\n            <Stack.Item styles={callGalleryStyles} grow>\n              {props.onRenderGalleryContent && (\n                <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                  {props.onRenderGalleryContent()}\n                </Stack>\n              )}\n            </Stack.Item>\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n            callPaneContent()\n          }\n        </Stack>\n        {props.callControlProps?.options !== false &&\n          /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n          !isMobileWithActivePane && (\n            <Stack.Item className={callControlsContainerStyles}>\n              <CallControls\n                {...props.callControlProps}\n                containerWidth={containerWidth}\n                containerHeight={containerHeight}\n                isMobile={props.mobileView}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                peopleButtonChecked={activePane === 'people'}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                onPeopleButtonClicked={togglePeoplePane}\n              />\n            </Stack.Item>\n          )}\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useSidePaneState } from '../hooks/useSidePaneState';\nimport {\n  callArrangementContainerStyles,\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallPane } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  id?: string;\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const { activePane, closePane, openPeoplePane, togglePeoplePane } = useSidePaneState();\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const isMobileWithActivePane = props.mobileView && activePane;\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex', width: '100%', height: '100%' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n    return callCompositeContainerCSS;\n    return { display: 'flex', width: '100%', height: '100%' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? openPeoplePane : undefined\n          }\n          callControls={\n            typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    openPeoplePane\n  ]);\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  let canUnmute = true;\n  /* @conditional-compile-remove(rooms) */\n  canUnmute = rolePermissions.microphoneButton;\n\n  let errorBarProps = props.errorBarProps;\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 && props.errorBarProps) {\n    errorBarProps = {\n      ...props.errorBarProps,\n      activeErrorMessages: props.errorBarProps.activeErrorMessages.filter(\n        (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n      )\n    };\n  }\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack grow styles={callArrangementContainerStyles}>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...errorBarProps} />\n              </Stack>\n            )}\n            {canUnmute && !!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          {props.callControlProps?.options !== false &&\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n            !isMobileWithActivePane && (\n              <Stack.Item className={callControlsContainerStyles}>\n                <CallControls\n                  {...props.callControlProps}\n                  containerWidth={containerWidth}\n                  containerHeight={containerHeight}\n                  isMobile={props.mobileView}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  peopleButtonChecked={activePane === 'people'}\n                  /* @conditional-compile-remove(one-to-n-calling) */\n                  onPeopleButtonClicked={togglePeoplePane}\n                />\n              </Stack.Item>\n            )}\n          <Stack horizontal grow>\n            <Stack.Item grow style={callCompositeContainerFlex()}>\n              <Stack.Item styles={callGalleryStyles} grow>\n                {props.onRenderGalleryContent && (\n                  <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                    {props.onRenderGalleryContent()}\n                  </Stack>\n                )}\n              </Stack.Item>\n            </Stack.Item>\n            {\n              /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n              callPaneContent()\n            }\n          </Stack>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

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

@@ -1,16 +1,17 @@
 /// <reference types="react" />
+import { EnvironmentInfo } from '@azure/communication-calling';
 /**
  * Modal that guides user through enabling their camera and mic access
  * @private
  */
 export declare const CallReadinessModal: (props: {
     mobileView: boolean;
-    audioState: PermissionState;
-    videoState: PermissionState;
+    modalLayerHostId: string;
     permissionsState: {
         camera: PermissionState;
         microphone: PermissionState;
     };
+    environmentInfo?: EnvironmentInfo | undefined;
     isPermissionsModalDismissed: boolean;
     setIsPermissionsModalDismissed: (boolean: any) => void;
     onPermissionsTroubleshootingClick?: ((permissionsState: {
@@ -25,13 +26,13 @@ export declare const CallReadinessModal: (props: {
  */
 export declare const CallReadinessModalFallBack: (props: {
     mobileView: boolean;
-    cameraPermissionGranted: boolean | undefined;
-    microphonePermissionGranted: boolean | undefined;
     checkPermissionModalShowing: boolean;
     permissionsState: {
         camera: PermissionState;
         microphone: PermissionState;
     };
+    modalLayerHostId: string;
+    environmentInfo?: EnvironmentInfo | undefined;
     isPermissionsModalDismissed: boolean;
     setIsPermissionsModalDismissed: (boolean: any) => void;
     onPermissionsTroubleshootingClick?: ((permissionsState: {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.js

@@ -2,11 +2,13 @@
 // Licensed under the MIT license.
 import React from 'react';
 /* @conditional-compile-remove(call-readiness) */
-import { Modal } from '@fluentui/react';
+import { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from "../../../../../react-components/src";
 /* @conditional-compile-remove(call-readiness) */
-import { CameraAndMicrophoneDomainPermissions, CameraDomainPermissions, MicrophoneDomainPermissions, _DrawerSurface } from "../../../../../react-components/src";
+import { _ModalClone } from "../../../../../react-components/src";
 /* @conditional-compile-remove(call-readiness) */
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
+/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */
+import { _isSafari } 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
 /* @conditional-compile-remove(call-readiness) */
@@ -15,18 +17,26 @@ const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above al
  * @private
  */
 export const CallReadinessModal = (props) => {
-    const { mobileView, audioState, videoState, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const { mobileView, permissionsState, 
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
     const onLightDismissTriggered = () => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
+    // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
     const showModal = videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
     const modal = !showModal
         ? undefined
         : () => {
             // if both video and audio permission are not set
             if (videoState === 'prompt' && audioState === 'prompt') {
-                return (React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -34,7 +44,9 @@ export const CallReadinessModal = (props) => {
             }
             // if audio permission is set up but video is not
             else if (videoState === 'prompt') {
-                return (React.createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(CameraSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -44,7 +56,9 @@ export const CallReadinessModal = (props) => {
             }
             // if video permission is set up but audio is not
             else if (audioState === 'prompt') {
-                return (React.createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -52,7 +66,9 @@ export const CallReadinessModal = (props) => {
             }
             // if both video and audio are denied
             else if (videoState === 'denied' && audioState === 'denied') {
-                return (React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -60,7 +76,9 @@ export const CallReadinessModal = (props) => {
             }
             // if only video is denied
             else if (videoState === 'denied') {
-                return (React.createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(CameraSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -70,7 +88,9 @@ export const CallReadinessModal = (props) => {
             }
             // if only audio is denied
             else {
-                return (React.createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -81,7 +101,10 @@ export const CallReadinessModal = (props) => {
         return (React.createElement(React.Fragment, null, isPermissionsModalDismissed && (React.createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
     }
     else if (!mobileView && modal !== undefined) {
-        return (React.createElement(Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+        return (React.createElement(_ModalClone, { styles: {
+                root: { position: 'unset' },
+                main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+            }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                 setIsPermissionsModalDismissed(false);
             }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()));
     }
@@ -96,26 +119,35 @@ export const CallReadinessModal = (props) => {
  * @private
  */
 export const CallReadinessModalFallBack = (props) => {
-    const { mobileView, cameraPermissionGranted, microphonePermissionGranted, checkPermissionModalShowing, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const { mobileView, checkPermissionModalShowing, permissionsState, 
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
     const onLightDismissTriggered = () => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
-    // When permissions are not set, value is undefined, do nothing here
-    // When permissions are set to denied, value is false, show helper screen
-    const showModal = cameraPermissionGranted === false || microphonePermissionGranted === false;
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    // When permissions are not set, do nothing here
+    // When permissions are set to denied, show helper screen
+    const showModal = videoState === 'denied' || audioState === 'denied';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
     const modal = !showModal
         ? undefined
         : () => {
-            if (cameraPermissionGranted === false && microphonePermissionGranted === false) {
-                return (React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            if (videoState === 'denied' && audioState === 'denied') {
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
                         : undefined, type: "denied" }));
             }
-            else if (cameraPermissionGranted === false && microphonePermissionGranted) {
-                return (React.createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            else if (videoState === 'denied' && audioState === 'granted') {
+                return (React.createElement(CameraSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -124,7 +156,9 @@ export const CallReadinessModalFallBack = (props) => {
                     }, type: "denied" }));
             }
             else {
-                return (React.createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -133,10 +167,10 @@ export const CallReadinessModalFallBack = (props) => {
         };
     if (mobileView) {
         return (React.createElement(React.Fragment, null,
-            (checkPermissionModalShowing ||
-                microphonePermissionGranted === undefined ||
-                cameraPermissionGranted === undefined) && (React.createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
-                React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -145,17 +179,23 @@ export const CallReadinessModalFallBack = (props) => {
     }
     else {
         return (React.createElement(React.Fragment, null,
-            (checkPermissionModalShowing ||
-                microphonePermissionGranted === undefined ||
-                cameraPermissionGranted === undefined) && (React.createElement(Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
                 }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
-                React.createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
                         : undefined, type: "check" }))),
-            !checkPermissionModalShowing && modal !== undefined && (React.createElement(Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+            !checkPermissionModalShowing && modal !== undefined && (React.createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
                 }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()))));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallReadinessModal.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 { Modal } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  CameraAndMicrophoneDomainPermissions,\n  CameraDomainPermissions,\n  MicrophoneDomainPermissions,\n  _DrawerSurface\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\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/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n  mobileView: boolean;\n  audioState: PermissionState;\n  videoState: PermissionState;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    audioState,\n    videoState,\n    permissionsState,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\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  const showModal =\n    videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        // if both video and audio permission are not set\n        if (videoState === 'prompt' && audioState === 'prompt') {\n          return (\n            <CameraAndMicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n            />\n          );\n        }\n        // if audio permission is set up but video is not\n        else if (videoState === 'prompt') {\n          return (\n            <CameraDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"request\"\n            />\n          );\n        }\n        // if video permission is set up but audio is not\n        else if (audioState === 'prompt') {\n          return (\n            <MicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n            />\n          );\n        }\n        // if both video and audio are denied\n        else if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n        // if only video is denied\n        else if (videoState === 'denied') {\n          return (\n            <CameraDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"denied\"\n            />\n          );\n        }\n        // if only audio is denied\n        else {\n          return (\n            <MicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView && modal !== undefined) {\n    return (\n      <>\n        {isPermissionsModalDismissed && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else if (!mobileView && modal !== undefined) {\n    return (\n      <Modal\n        isOpen={isPermissionsModalDismissed}\n        isBlocking={false}\n        onDismiss={() => {\n          setIsPermissionsModalDismissed(false);\n        }}\n        overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n      >\n        {modal()}\n      </Modal>\n    );\n  } else {\n    return <></>;\n  }\n};\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n  mobileView: boolean;\n  cameraPermissionGranted: boolean | undefined;\n  microphonePermissionGranted: boolean | undefined;\n  checkPermissionModalShowing: boolean;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    cameraPermissionGranted,\n    microphonePermissionGranted,\n    checkPermissionModalShowing,\n    permissionsState,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\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  // When permissions are not set, value is undefined, do nothing here\n  // When permissions are set to denied, value is false, show helper screen\n  const showModal = cameraPermissionGranted === false || microphonePermissionGranted === false;\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        if (cameraPermissionGranted === false && microphonePermissionGranted === false) {\n          return (\n            <CameraAndMicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        } else if (cameraPermissionGranted === false && microphonePermissionGranted) {\n          return (\n            <CameraDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"denied\"\n            />\n          );\n        } else {\n          return (\n            <MicrophoneDomainPermissions\n              appName={'app'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView) {\n    return (\n      <>\n        {(checkPermissionModalShowing ||\n          microphonePermissionGranted === undefined ||\n          cameraPermissionGranted === undefined) && (\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=\"check\"\n            />\n          </_DrawerSurface>\n        )}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else {\n    return (\n      <>\n        {(checkPermissionModalShowing ||\n          microphonePermissionGranted === undefined ||\n          cameraPermissionGranted === undefined) && (\n          <Modal\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(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=\"check\"\n            />\n          </Modal>\n        )}\n\n        {!checkPermissionModalShowing && modal !== undefined && (\n          <Modal\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            {modal()}\n          </Modal>\n        )}\n      </>\n    );\n  }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n  return <></>;\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallReadinessModal.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 {\n  CameraAndMicrophoneSitePermissions,\n  CameraSitePermissions,\n  MicrophoneSitePermissions,\n  _DrawerSurface\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { _ModalClone } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { _isSafari } from '../utils';\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/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\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  // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)\n  const videoState: PermissionState = permissionsState.camera;\n  const audioState: PermissionState = permissionsState.microphone;\n\n  const showModal =\n    videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        // if both video and audio permission are not set\n        if (videoState === 'prompt' && audioState === 'prompt') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n            />\n          );\n        }\n        // if audio permission is set up but video is not\n        else if (videoState === 'prompt') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"request\"\n            />\n          );\n        }\n        // if video permission is set up but audio is not\n        else if (audioState === 'prompt') {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"request\"\n            />\n          );\n        }\n        // if both video and audio are denied\n        else if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n        // if only video is denied\n        else if (videoState === 'denied') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"denied\"\n            />\n          );\n        }\n        // if only audio is denied\n        else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView && modal !== undefined) {\n    return (\n      <>\n        {isPermissionsModalDismissed && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else if (!mobileView && modal !== undefined) {\n    return (\n      <_ModalClone\n        styles={{\n          root: { position: 'unset' },\n          main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n        }}\n        layerProps={{ hostId: props.modalLayerHostId }}\n        isOpen={isPermissionsModalDismissed}\n        isBlocking={false}\n        onDismiss={() => {\n          setIsPermissionsModalDismissed(false);\n        }}\n        overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n      >\n        {modal()}\n      </_ModalClone>\n    );\n  } else {\n    return <></>;\n  }\n};\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n  mobileView: boolean;\n  checkPermissionModalShowing: boolean;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    checkPermissionModalShowing,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\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  const videoState = permissionsState.camera;\n  const audioState = permissionsState.microphone;\n\n  // When permissions are not set, do nothing here\n  // When permissions are set to denied, show helper screen\n  const showModal = videoState === 'denied' || audioState === 'denied';\n\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        } else if (videoState === 'denied' && audioState === 'granted') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              type=\"denied\"\n            />\n          );\n        } else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView) {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"check\"\n            />\n          </_DrawerSurface>\n        )}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              type=\"check\"\n            />\n          </_ModalClone>\n        )}\n\n        {!checkPermissionModalShowing && modal !== undefined && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            {modal()}\n          </_ModalClone>\n        )}\n      </>\n    );\n  }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n  return <></>;\n};\n\"../../../../../react-components/src\""]}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { _DevicePermissionDropdownProps } from "../../../../../react-components/src";
+/**
+ * @private
+ */
+export interface ConfigurationPageCameraDropdownProps {
+    cameraGrantedDropdown: JSX.Element;
+    cameraPermissionGranted: boolean;
+    dropdownProps: Partial<_DevicePermissionDropdownProps>;
+    onClickEnableDevicePermission?: () => void;
+}
+/**
+ * @private
+ */
+export declare const ConfigurationPageCameraDropdown: (props: ConfigurationPageCameraDropdownProps) => JSX.Element;
+//# sourceMappingURL=ConfigurationPageCameraDropdown.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/{ConfigurationpageCameraDropdown.js → ConfigurationPageCameraDropdown.js}

@@ -11,7 +11,7 @@ import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
-export const ConfigurationpageCameraDropdown = (props) => {
+export const ConfigurationPageCameraDropdown = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const theme = useTheme();
     /* @conditional-compile-remove(call-readiness) */
@@ -20,11 +20,9 @@ export const ConfigurationpageCameraDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission }, props.dropdownProps)));
+    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
     /* @conditional-compile-remove(call-readiness) */
-    if (props.callReadinessOptedIn) {
-        return React.createElement(React.Fragment, null, props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown);
-    }
+    return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;
 };
-//# sourceMappingURL=ConfigurationpageCameraDropdown.js.map
+//# sourceMappingURL=ConfigurationPageCameraDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,iDAAiD;IACjD,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EACxC,OAAO,EAAE,qCAAqC,EAC9C,IAAI,EACF,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAE/G,OAAO,EAAE,KAAK,CAAC,6BAA6B,IAC5C,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n/* @conditional-compile-remove(call-readiness) */\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  useTheme,\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(call-readiness) */\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraBlockedDropdown = (\n    <_DevicePermissionDropdown\n      {...props.dropdownProps}\n      styles={dropDownStyles(theme)}\n      constrain={{ video: true, audio: false }}\n      strings={devicePermissionDropdownStringsCamera}\n      icon={\n        <CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />\n      }\n      onClick={props.onClickEnableDevicePermission}\n    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n  return props.cameraGrantedDropdown;\n};\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/{ConfigurationpageErrorBar.d.ts → ConfigurationPageErrorBar.d.ts}

@@ -5,7 +5,7 @@ import { Common } from "../../../../../acs-ui-common/src";
 /**
  * @private
  */
-export interface ConfigurationpageErrorBarProps {
+export interface ConfigurationPageErrorBarProps {
     errorBarProps: {
         activeErrorMessages: ActiveErrorMessage[];
     } & Common<CallingHandlers, ErrorBarProps>;
@@ -19,10 +19,9 @@ export interface ConfigurationpageErrorBarProps {
         camera: PermissionState;
         microphone: PermissionState;
     };
-    callReadinessOptedIn?: boolean;
 }
 /**
  * @private
  */
-export declare const ConfigurationpageErrorBar: (props: ConfigurationpageErrorBarProps) => JSX.Element;
-//# sourceMappingURL=ConfigurationpageErrorBar.d.ts.map
+export declare const ConfigurationPageErrorBar: (props: ConfigurationPageErrorBarProps) => JSX.Element;
+//# sourceMappingURL=ConfigurationPageErrorBar.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/{ConfigurationpageErrorBar.js → ConfigurationPageErrorBar.js}

@@ -5,7 +5,7 @@ import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-co
 /**
  * @private
  */
-export const ConfigurationpageErrorBar = (props) => {
+export const ConfigurationPageErrorBar = (props) => {
     const { errorBarProps, 
     /* @conditional-compile-remove(call-readiness) */
     showTroubleShootingErrorBar = false, 
@@ -14,9 +14,7 @@ export const ConfigurationpageErrorBar = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     onNetworkingTroubleShootingClick, 
     /* @conditional-compile-remove(call-readiness) */
-    permissionsState, 
-    /* @conditional-compile-remove(call-readiness) */
-    callReadinessOptedIn = false } = props;
+    permissionsState } = props;
     /* @conditional-compile-remove(call-readiness) */
     const permissionTroubleshootingGuideStrings = {
         devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
@@ -24,9 +22,9 @@ export const ConfigurationpageErrorBar = (props) => {
         dismissButtonText: 'OK'
     };
     /* @conditional-compile-remove(call-readiness) */
-    if (showTroubleShootingErrorBar && callReadinessOptedIn) {
+    if (showTroubleShootingErrorBar) {
         return (React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
     }
     return React.createElement(ErrorBar, Object.assign({}, errorBarProps));
 };
-//# sourceMappingURL=ConfigurationpageErrorBar.js.map
+//# sourceMappingURL=ConfigurationPageErrorBar.js.map