@azure/communication-react 1.6.0 → 1.6.1-alpha-202306220014

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

@@ -1,7 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { memoizeFunction, Stack, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(PSTN-calls) */
+import { useState } from 'react';
 import { ControlBar } from "../../../../../react-components/src";
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { HoldButton } from "../../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _usePermissions } from "../../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { Camera } from './buttons/Camera';
 import { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';
@@ -10,42 +16,154 @@ import { EndCall } from './buttons/EndCall';
 import { Microphone } from './buttons/Microphone';
 import { Participants } from './buttons/Participants';
 import { ScreenShare } from './buttons/ScreenShare';
+/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+import { People } from './buttons/People';
+/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { MoreButton } from '../../common/MoreButton';
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { usePropsFor } from '../hooks/usePropsFor';
+/* @conditional-compile-remove(one-to-n-calling) */
+import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
+/* @conditional-compile-remove(PSTN-calls) */
+import { SendDtmfDialpad } from '../../common/SendDtmfDialpad';
+/* @conditional-compile-remove(PSTN-calls) */
+import { useAdapter } from '../adapter/CallAdapterProvider';
 import { isDisabled } from '../utils';
 import { callControlsContainerStyles } from '../styles/CallPage.styles';
 // Enforce a background color on control bar to ensure it matches the composite background color.
-const controlBarStyles = memoizeFunction((background) => ({
-    root: {
-        background: background
-    }
-}));
+const controlBarStyles = memoizeFunction((background) => ({ root: { background: background } }));
 /**
  * @private
  */
 export const CallControls = (props) => {
-    const options = useMemo(() => typeof props.options === 'boolean' ? {} : props.options, [props.options]);
+    const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+    const localeStrings = useLocale();
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+    const peopleButtonStrings = useMemo(() => ({
+        label: localeStrings.strings.call.peopleButtonLabel,
+        tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
+        tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose
+    }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const moreButtonStrings = useMemo(() => ({
+        label: localeStrings.strings.call.moreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
+    }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const dialpadStrings = useMemo(() => ({
+        dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
+        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
+        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceholderText
+    }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = useAdapter().getState().alternateCallerId;
+    /* @conditional-compile-remove(new-call-control-bar) */
+    const moreButtonContextualMenuItems = () => {
+        const items = [];
+        if (props.isMobile && props.onPeopleButtonClicked && isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton)) {
+            items.push({
+                key: 'peopleButtonKey',
+                text: localeStrings.component.strings.participantsButton.label,
+                onClick: () => {
+                    if (props.onPeopleButtonClicked) {
+                        props.onPeopleButtonClicked();
+                    }
+                },
+                iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                },
+                disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton),
+                ['data-ui-id']: 'call-composite-more-menu-people-button'
+            });
+        }
+        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+        if (!isRoomsCallTrampoline()) {
+            items.push({
+                key: 'holdButtonKey',
+                text: localeStrings.component.strings.holdButton.tooltipOffContent,
+                onClick: () => {
+                    holdButtonProps.onToggleHold();
+                },
+                iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                },
+                disabled: isDisabled(options === null || options === void 0 ? void 0 : options.holdButton),
+                ['data-ui-id']: 'hold-button'
+            });
+        }
+        /* @conditional-compile-remove(PSTN-calls) */
+        // dtmf tone sending only works for 1:1 PSTN call
+        if (alternateCallerId) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.call.openDtmfDialpadLabel,
+                onClick: () => {
+                    setShowDialpad(true);
+                },
+                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
+        return items;
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const [showDialpad, setShowDialpad] = useState(false);
     const theme = useTheme();
     const customButtons = useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React.createElement(React.Fragment, null);
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onDismissDialpad = () => {
+        setShowDialpad(false);
+    };
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
     let screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    /* @conditional-compile-remove(rooms) */
+    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
     let microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    /* @conditional-compile-remove(rooms) */
+    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
     let cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
-    return React.createElement(Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
+    /* @conditional-compile-remove(rooms) */
+    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
+    return (React.createElement(Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
+        /* @conditional-compile-remove(PSTN-calls) */
+        React.createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React.createElement(Stack.Item, null,
             React.createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) }),
-                cameraButtonIsEnabled && React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) }),
-                screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) }),
-                isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton) && React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) }),
-                isEnabled(options === null || options === void 0 ? void 0 : options.devicesButton) && React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) }),
+                microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
+                isEnabled(options === null || options === void 0 ? void 0 : options.participantsButton) &&
+                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                    !props.isMobile && (React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                React.createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled(options === null || options === void 0 ? void 0 : options.devicesButton) && (React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
-                isEnabled(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType }))));
+                isEnabled(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled = (option) => option !== false;
 /** @private */
 export const isRoomsCallTrampoline = () => {
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    return !!rolePermissions.role;
     return false;
 };
 //# sourceMappingURL=CallControls.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/CallControls.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { memoizeFunction, Stack, useTheme } from '@fluentui/react';\nimport { _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { ControlBar, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { Camera } from './buttons/Camera';\nimport { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';\nimport { Devices } from './buttons/Devices';\nimport { EndCall } from './buttons/EndCall';\nimport { Microphone } from './buttons/Microphone';\nimport { Participants } from './buttons/Participants';\nimport { ScreenShare } from './buttons/ScreenShare';\nimport { ContainerRectProps } from '../../common/ContainerRectProps';\nimport { isDisabled } from '../utils';\nimport { callControlsContainerStyles } from '../styles/CallPage.styles';\n\n/**\n * @private\n */\nexport type CallControlsProps = {\n  callInvitationURL?: string;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: boolean | CallControlOptions;\n  /**\n   * Option to increase the height of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  increaseFlyoutItemSize?: boolean;\n  isMobile?: boolean;\n};\n\n// Enforce a background color on control bar to ensure it matches the composite background color.\nconst controlBarStyles = memoizeFunction((background: string) => ({\n  root: {\n    background: background\n  }\n}));\n\n/**\n * @private\n */\nexport const CallControls = (props: CallControlsProps & ContainerRectProps): JSX.Element => {\n  const options = useMemo(() => typeof props.options === 'boolean' ? {} : props.options, [props.options]);\n  const theme = useTheme();\n  const customButtons = useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline(options), options?.displayType), [options]);\n\n  // when props.options is false then we want to hide the whole control bar.\n  if (props.options === false) {\n    return <></>;\n  }\n  let screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n  let microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n  let cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n  return <Stack horizontalAlign=\"center\" className={callControlsContainerStyles}>\n      {}\n      <Stack.Item>\n        {/*\n            Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n            control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n            set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n            dockedBottom it has position absolute and would therefore float on top of the media gallery,\n            occluding some of its content.\n         */}\n        <ControlBar layout=\"horizontal\" styles={controlBarStyles(theme.semanticColors.bodyBackground)}>\n          {microphoneButtonIsEnabled && <Microphone displayType={options?.displayType} disabled={isDisabled(options?.microphoneButton)} />}\n          {cameraButtonIsEnabled && <Camera displayType={options?.displayType} disabled={isDisabled(options?.cameraButton)} />}\n          {screenShareButtonIsEnabled && <ScreenShare option={options?.screenShareButton} displayType={options?.displayType} disabled={isDisabled(options?.screenShareButton)} />}\n          {isEnabled(options?.participantsButton) && <Participants option={options?.participantsButton} callInvitationURL={props.callInvitationURL} onFetchParticipantMenuItems={props.onFetchParticipantMenuItems} displayType={options?.displayType} increaseFlyoutItemSize={props.increaseFlyoutItemSize} isMobile={props.isMobile} disabled={isDisabled(options?.participantsButton)} />}\n          {isEnabled(options?.devicesButton) && <Devices displayType={options?.displayType} increaseFlyoutItemSize={props.increaseFlyoutItemSize} disabled={isDisabled(options?.devicesButton)} />}\n          {}\n          {customButtons['primary']}\n          {isEnabled(options?.endCallButton) && <EndCall displayType={options?.displayType} />}\n        </ControlBar>\n      </Stack.Item>\n    </Stack>;\n};\nconst isEnabled = (option: unknown): boolean => option !== false;\n\n/** @private */\nexport const isRoomsCallTrampoline = (): boolean => {\n  return false;\n};\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallControls.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { memoizeFunction, Stack, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { IContextualMenuItem } from '@fluentui/react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { useState } from 'react';\nimport { _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport { ControlBar, ParticipantMenuItemsCallback } from '@internal/react-components';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlOptions } from '../types/CallControlOptions';\nimport { Camera } from './buttons/Camera';\nimport { generateCustomControlBarButtons, onFetchCustomButtonPropsTrampoline } from './buttons/Custom';\nimport { Devices } from './buttons/Devices';\nimport { EndCall } from './buttons/EndCall';\nimport { Microphone } from './buttons/Microphone';\nimport { Participants } from './buttons/Participants';\nimport { ScreenShare } from './buttons/ScreenShare';\nimport { ContainerRectProps } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { People } from './buttons/People';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { MoreButton } from '../../common/MoreButton';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { usePropsFor } from '../hooks/usePropsFor';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { isDisabled } from '../utils';\nimport { callControlsContainerStyles } from '../styles/CallPage.styles';\n\n/**\n * @private\n */\nexport type CallControlsProps = {\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  peopleButtonChecked?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  onPeopleButtonClicked?: () => void;\n  callInvitationURL?: string;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: boolean | CallControlOptions;\n  /**\n   * Option to increase the height of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  increaseFlyoutItemSize?: boolean;\n  isMobile?: boolean;\n};\n\n// Enforce a background color on control bar to ensure it matches the composite background color.\nconst controlBarStyles = memoizeFunction((background: string) => ({ root: { background: background } }));\n\n/**\n * @private\n */\nexport const CallControls = (props: CallControlsProps & ContainerRectProps): JSX.Element => {\n  const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale();\n\n  /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\n  const peopleButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.peopleButtonLabel,\n      tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,\n      tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose\n    }),\n    [localeStrings]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.moreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const dialpadStrings = useMemo(\n    () => ({\n      dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,\n      dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,\n      placeholderText: localeStrings.strings.call.dtmfDialpadPlaceholderText\n    }),\n    [localeStrings]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n  /* @conditional-compile-remove(new-call-control-bar) */\n  const moreButtonContextualMenuItems = (): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n\n    if (props.isMobile && props.onPeopleButtonClicked && isEnabled(options?.participantsButton)) {\n      items.push({\n        key: 'peopleButtonKey',\n        text: localeStrings.component.strings.participantsButton.label,\n        onClick: () => {\n          if (props.onPeopleButtonClicked) {\n            props.onPeopleButtonClicked();\n          }\n        },\n        iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        },\n        disabled: isDisabled(options?.participantsButton),\n        ['data-ui-id']: 'call-composite-more-menu-people-button'\n      });\n    }\n\n    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\n    if (!isRoomsCallTrampoline()) {\n      items.push({\n        key: 'holdButtonKey',\n        text: localeStrings.component.strings.holdButton.tooltipOffContent,\n        onClick: () => {\n          holdButtonProps.onToggleHold();\n        },\n        iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        },\n        disabled: isDisabled(options?.holdButton),\n        ['data-ui-id']: 'hold-button'\n      });\n    }\n\n    /* @conditional-compile-remove(PSTN-calls) */\n    // dtmf tone sending only works for 1:1 PSTN call\n    if (alternateCallerId) {\n      items.push({\n        key: 'showDialpadKey',\n        text: localeStrings.strings.call.openDtmfDialpadLabel,\n        onClick: () => {\n          setShowDialpad(true);\n        },\n        iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        }\n      });\n    }\n\n    return items;\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const theme = useTheme();\n\n  const customButtons = useMemo(\n    () => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline(options), options?.displayType),\n    [options]\n  );\n\n  // when props.options is false then we want to hide the whole control bar.\n  if (props.options === false) {\n    return <></>;\n  }\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  let screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n  /* @conditional-compile-remove(rooms) */\n  screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;\n\n  let microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n  /* @conditional-compile-remove(rooms) */\n  microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;\n\n  let cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n  /* @conditional-compile-remove(rooms) */\n  cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;\n\n  return (\n    <Stack horizontalAlign=\"center\" className={callControlsContainerStyles}>\n      {\n        /* @conditional-compile-remove(PSTN-calls) */\n        <SendDtmfDialpad\n          isMobile={!!props.isMobile}\n          strings={dialpadStrings}\n          showDialpad={showDialpad}\n          onDismissDialpad={onDismissDialpad}\n        />\n      }\n      <Stack.Item>\n        {/*\n            Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n            control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n            set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n            dockedBottom it has position absolute and would therefore float on top of the media gallery,\n            occluding some of its content.\n         */}\n        <ControlBar layout=\"horizontal\" styles={controlBarStyles(theme.semanticColors.bodyBackground)}>\n          {microphoneButtonIsEnabled && (\n            <Microphone displayType={options?.displayType} disabled={isDisabled(options?.microphoneButton)} />\n          )}\n          {cameraButtonIsEnabled && (\n            <Camera displayType={options?.displayType} disabled={isDisabled(options?.cameraButton)} />\n          )}\n          {screenShareButtonIsEnabled && (\n            <ScreenShare\n              option={options?.screenShareButton}\n              displayType={options?.displayType}\n              disabled={isDisabled(options?.screenShareButton)}\n            />\n          )}\n          {isEnabled(options?.participantsButton) &&\n            /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\n            !props.isMobile && (\n              <Participants\n                option={options?.participantsButton}\n                callInvitationURL={props.callInvitationURL}\n                onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n                displayType={options?.displayType}\n                increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n                isMobile={props.isMobile}\n                disabled={isDisabled(options?.participantsButton)}\n              />\n            ) && (\n              /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\n              <People\n                checked={props.peopleButtonChecked}\n                ariaLabel={peopleButtonStrings?.label}\n                showLabel={options?.displayType !== 'compact'}\n                onClick={props.onPeopleButtonClicked}\n                data-ui-id=\"call-composite-people-button\"\n                strings={peopleButtonStrings}\n                disabled={isDisabled(options?.participantsButton)}\n              />\n            )}\n          {isEnabled(options?.devicesButton) && (\n            <Devices\n              displayType={options?.displayType}\n              increaseFlyoutItemSize={props.increaseFlyoutItemSize}\n              disabled={isDisabled(options?.devicesButton)}\n            />\n          )}\n          {\n            /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\n            isEnabled(options?.moreButton) && moreButtonContextualMenuItems().length > 0 && (\n              <MoreButton\n                data-ui-id=\"common-call-composite-more-button\"\n                strings={moreButtonStrings}\n                menuIconProps={{ hidden: true }}\n                menuProps={{ items: moreButtonContextualMenuItems() }}\n                showLabel={options?.displayType !== 'compact'}\n              />\n            )\n          }\n          {customButtons['primary']}\n          {isEnabled(options?.endCallButton) && <EndCall displayType={options?.displayType} />}\n        </ControlBar>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\n/** @private */\nexport const isRoomsCallTrampoline = (): boolean => {\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n  /* @conditional-compile-remove(rooms) */\n  return !!rolePermissions.role;\n\n  return false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

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

@@ -0,0 +1,48 @@
+/// <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;
+    modalLayerHostId: string;
+    permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    };
+    environmentInfo?: EnvironmentInfo | undefined;
+    isPermissionsModalDismissed: boolean;
+    setIsPermissionsModalDismissed: (boolean: any) => void;
+    onPermissionsTroubleshootingClick?: ((permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void) | undefined;
+}) => JSX.Element;
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * This is used when permission API is not supported
+ * @private
+ */
+export declare const CallReadinessModalFallBack: (props: {
+    mobileView: boolean;
+    checkPermissionModalShowing: boolean;
+    permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    };
+    modalLayerHostId: string;
+    environmentInfo?: EnvironmentInfo | undefined;
+    isPermissionsModalDismissed: boolean;
+    setIsPermissionsModalDismissed: (boolean: any) => void;
+    onPermissionsTroubleshootingClick?: ((permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void) | undefined;
+}) => JSX.Element;
+/**
+ * Placeholder for conditional compile
+ * @private
+ */
+export declare const CallReadinessModalPlaceHolder: () => JSX.Element;
+//# sourceMappingURL=CallReadinessModal.d.ts.map

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

@@ -0,0 +1,210 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+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) */
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * @private
+ */
+export const CallReadinessModal = (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(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "request" }));
+            }
+            // if audio permission is set up but video is not
+            else if (videoState === 'prompt') {
+                return (React.createElement(CameraSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "request" }));
+            }
+            // if video permission is set up but audio is not
+            else if (audioState === 'prompt') {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "request" }));
+            }
+            // if both video and audio are denied
+            else 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, kind: "denied" }));
+            }
+            // if only video is denied
+            else if (videoState === 'denied') {
+                return (React.createElement(CameraSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "denied" }));
+            }
+            // if only audio is denied
+            else {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+        };
+    if (mobileView && modal !== undefined) {
+        return (React.createElement(React.Fragment, null, isPermissionsModalDismissed && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+    }
+    else if (!mobileView && modal !== undefined) {
+        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()));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * This is used when permission API is not supported
+ * @private
+ */
+export const CallReadinessModalFallBack = (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
+    };
+    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 (videoState === 'denied' && audioState === 'denied') {
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+            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);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "denied" }));
+            }
+            else {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+        };
+    if (mobileView) {
+        return (React.createElement(React.Fragment, null,
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_DrawerSurface, { disableMaxHeight: true, 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);
+                        }
+                        : undefined, kind: "check" }))),
+            isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            (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(CameraAndMicrophoneSitePermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "check" }))),
+            !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()))));
+    }
+};
+/**
+ * Placeholder for conditional compile
+ * @private
+ */
+export const CallReadinessModalPlaceHolder = () => {
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CallReadinessModal.js.map

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

@@ -0,0 +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 {\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              kind=\"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              kind=\"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              kind=\"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              kind=\"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              kind=\"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              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView && modal !== undefined) {\n    return (\n      <>\n        {isPermissionsModalDismissed && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\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              kind=\"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              kind=\"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              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView) {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\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              kind=\"check\"\n            />\n          </_DrawerSurface>\n        )}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\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              kind=\"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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { _DevicePermissionDropdownProps } from "../../../../../react-components/src";
 /**
  * @private
  */
 export interface ConfigurationPageCameraDropdownProps {
     cameraGrantedDropdown: JSX.Element;
     cameraPermissionGranted: boolean;
+    dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
 }
 /**

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

@@ -1,7 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/* @conditional-compile-remove(call-readiness) */
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+/* @conditional-compile-remove(call-readiness) */
+import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageCameraDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
+    const devicePermissionDropdownStringsCamera = {
+        placeHolderText: 'Enable Camera (optional)',
+        actionButtonContent: 'Allow'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    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) */
+    return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;
 };
 //# sourceMappingURL=ConfigurationPageCameraDropdown.js.map