@azure/communication-react 1.5.1-alpha-202304220013 → 1.5.1-alpha-202304260013

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

@@ -1 +1 @@
-{"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';\n/* @conditional-compile-remove(control-bar-button-injection) */\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';\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(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\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    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  /* @conditional-compile-remove(control-bar-button-injection) */\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\">\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          {/* @conditional-compile-remove(control-bar-button-injection) */ 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\""]}
+{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallControls.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGnE,6CAA6C;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAgC,4CAAmC;AACtF,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,UAAU,EAAE,4CAAmC;AACxD,wCAAwC;AACxC,OAAO,EAAE,eAAe,EAAE,4CAAmC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,+DAA+D;AAC/D,OAAO,EAAE,+BAA+B,EAAE,kCAAkC,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,2FAA2F;AAC3F,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,2FAA2F;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,mDAAmD;AACnD,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,6CAA6C;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAqBxE,iGAAiG;AACjG,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,UAAkB,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC;AAEzG;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAe,EAAE;IACzF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1G,2FAA2F;IAC3F,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC;IAElC,2FAA2F;IAC3F,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB;QACnD,iBAAiB,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,uBAAuB;QACrE,gBAAgB,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,wBAAwB;KACtE,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB;QACxD,iBAAiB,EAAE,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,uBAAuB;KAC9E,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,6CAA6C;IAC7C,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC;QACL,qBAAqB,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;QACvE,gCAAgC,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,gCAAgC;QAC7F,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B;KACvE,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAEhD,6CAA6C;IAC7C,MAAM,iBAAiB,GAAG,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,iBAAiB,CAAC;IAEpE,mDAAmD,CAAC,6CAA6C;IACjG,MAAM,6BAA6B,GAAG,GAA0B,EAAE;QAChE,MAAM,KAAK,GAA0B,EAAE,CAAC;QAExC,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,qBAAqB,IAAI,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAC,EAAE;YAC3F,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,iBAAiB;gBACtB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;gBAC9D,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,KAAK,CAAC,qBAAqB,EAAE;wBAC/B,KAAK,CAAC,qBAAqB,EAAE,CAAC;qBAC/B;gBACH,CAAC;gBACD,SAAS,EAAE,EAAE,QAAQ,EAAE,6CAA6C,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC3G,SAAS,EAAE;oBACT,MAAM,EAAE,+BAA+B;iBACxC;gBACD,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAC;gBACjD,CAAC,YAAY,CAAC,EAAE,wCAAwC;aACzD,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,qBAAqB,EAAE,EAAE;YAC5B,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,eAAe;gBACpB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,iBAAiB;gBAClE,OAAO,EAAE,GAAG,EAAE;oBACZ,eAAe,CAAC,YAAY,EAAE,CAAC;gBACjC,CAAC;gBACD,SAAS,EAAE,EAAE,QAAQ,EAAE,4BAA4B,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC1F,SAAS,EAAE;oBACT,MAAM,EAAE,+BAA+B;iBACxC;gBACD,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC;gBACzC,CAAC,YAAY,CAAC,EAAE,aAAa;aAC9B,CAAC,CAAC;SACJ;QAED,6CAA6C;QAC7C,iDAAiD;QACjD,IAAI,iBAAiB,EAAE;YACrB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,gBAAgB;gBACrB,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB;gBACrD,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;gBACD,SAAS,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;gBACrF,SAAS,EAAE;oBACT,MAAM,EAAE,+BAA+B;iBACxC;aACF,CAAC,CAAC;SACJ;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,6CAA6C;IAC7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,+DAA+D;IAC/D,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,+BAA+B,CAAC,kCAAkC,CAAC,OAAO,CAAC,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,EACxG,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,0EAA0E;IAC1E,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE;QAC3B,OAAO,yCAAK,CAAC;KACd;IAED,6CAA6C;IAC7C,MAAM,gBAAgB,GAAG,GAAS,EAAE;QAClC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,wCAAwC;IACxC,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;IAE1C,IAAI,0BAA0B,GAAG,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,CAAC;IACvE,wCAAwC;IACxC,0BAA0B,GAAG,eAAe,CAAC,WAAW,IAAI,0BAA0B,CAAC;IAEvF,IAAI,yBAAyB,GAAG,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,CAAC;IACrE,wCAAwC;IACxC,yBAAyB,GAAG,eAAe,CAAC,gBAAgB,IAAI,yBAAyB,CAAC;IAE1F,IAAI,qBAAqB,GAAG,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,CAAC;IAC7D,wCAAwC;IACxC,qBAAqB,GAAG,eAAe,CAAC,YAAY,IAAI,qBAAqB,CAAC;IAE9E,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAElE,6CAA6C;QAC7C,oBAAC,eAAe,IACd,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAC1B,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,GAClC;QAEJ,oBAAC,KAAK,CAAC,IAAI;YAQT,oBAAC,UAAU,IAAC,MAAM,EAAC,YAAY,EAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;gBAC1F,yBAAyB,IAAI,CAC5B,oBAAC,UAAU,IAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,GAAI,CACnG;gBACA,qBAAqB,IAAI,CACxB,oBAAC,MAAM,IAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,GAAI,CAC3F;gBACA,0BAA0B,IAAI,CAC7B,oBAAC,WAAW,IACV,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAClC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,GAChD,CACH;gBACA,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAC;oBACrC,mDAAmD,CAAC,6CAA6C;oBACjG,CAAC,KAAK,CAAC,QAAQ,IAAI,CACjB,oBAAC,YAAY,IACX,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACnC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAC,GACjD,CACH,IAAI;gBACH,mDAAmD,CAAC,6CAA6C;gBACjG,oBAAC,MAAM,IACL,OAAO,EAAE,KAAK,CAAC,mBAAmB,EAClC,SAAS,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,KAAK,EACrC,SAAS,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAK,SAAS,EAC7C,OAAO,EAAE,KAAK,CAAC,qBAAqB,gBACzB,8BAA8B,EACzC,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAC,GACjD,CACH;gBACF,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,CACpC,oBAAC,OAAO,IACN,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,QAAQ,EAAE,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,GAC5C,CACH;gBAEC,mDAAmD,CAAC,6CAA6C;gBACjG,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC,IAAI,6BAA6B,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9E,oBAAC,UAAU,kBACE,mCAAmC,EAC9C,OAAO,EAAE,iBAAiB,EAC1B,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAC/B,SAAS,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,EAAE,EACrD,SAAS,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAK,SAAS,GAC7C,CACH;gBAE8D,aAAa,CAAC,SAAS,CAAC;gBACxF,SAAS,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,oBAAC,OAAO,IAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,GAAI,CACzE,CACF,CACP,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAe,EAAW,EAAE,CAAC,MAAM,KAAK,KAAK,CAAC;AAEjE,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAY,EAAE;IACjD,wCAAwC;IACxC,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;IAC1C,wCAAwC;IACxC,OAAO,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC;IAE9B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","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';\n/* @conditional-compile-remove(control-bar-button-injection) */\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(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\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    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  /* @conditional-compile-remove(control-bar-button-injection) */\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          {/* @conditional-compile-remove(control-bar-button-injection) */ 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/styles/CallPage.styles.d.ts

@@ -1,4 +1,8 @@
 import { IStackItemStyles, IStackStyles } from '@fluentui/react';
+/** @private */
+export declare const CONTROL_BAR_Z_INDEX: number;
+/** @private */
+export declare const DRAWER_Z_INDEX: number;
 /**
  * @private
  */

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

@@ -4,9 +4,12 @@ import { mergeStyles } from '@fluentui/react';
 import { controlBarContainerStyles } from './CallControls.styles';
 const VIDEO_GALLERY_Z_INDEX = 1;
 // The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery
-const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
+/** @private */
+export const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
 // The notification container should be in the highest z-band to ensure it shows on top of all other content.
 const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;
+/** @private */
+export const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AACtD,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AAEH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,gBAAgB,CAAC,sDAAsD;KACvF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\n\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\nconst CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\n\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar\n  }\n};\n"]}
+{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AAC7D,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,8BAA8B,GAAG,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AAEH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,gBAAgB,CAAC,sDAAsD;KACvF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\n\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\n/** @private */\nexport const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/** @private */\nexport const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\n\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js

@@ -9,6 +9,8 @@ import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage
 import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
 import { ChatButtonWithUnreadMessagesBadge } from '../../CallWithChatComposite/ChatButtonWithUnreadMessagesBadge';
 import { ControlBar } from "../../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _usePermissions } from "../../../../../react-components/src";
 import { Microphone } from '../../CallComposite/components/buttons/Microphone';
 import { Camera } from '../../CallComposite/components/buttons/Camera';
 import { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';
@@ -128,6 +130,17 @@ export const CommonCallControlBar = (props) => {
         return React.createElement(React.Fragment, null);
     }
     const chatButton = props.chatAdapter ? (React.createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: (_a = props.chatButtonChecked) !== null && _a !== void 0 ? _a : false, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })) : (React.createElement(React.Fragment, null));
+    /* @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);
+    /* @conditional-compile-remove(rooms) */
+    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
     return (React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
         /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings }))),
@@ -139,16 +152,16 @@ export const CommonCallControlBar = (props) => {
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                                    isEnabled(options.microphoneButton) && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                    microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
-                                    isEnabled(options.cameraButton) && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                    cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
                                         onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
                                     props.mobileView && isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
-                                    isEnabled(options.screenShareButton) && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                    screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), 
                                 /* @conditional-compile-remove(control-bar-button-injection) */

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { ChatAdapter } from '../../ChatComposite';\nimport { ChatButtonWithUnreadMessagesBadge } from '../../CallWithChatComposite/ChatButtonWithUnreadMessagesBadge';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallControlBarButton,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  chatButtonChecked?: boolean;\n  peopleButtonChecked: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  chatAdapter?: ChatAdapter;\n  disableButtonsForHoldScreen?: boolean;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onClickShowDialpad?: () => void;\n  /* @conditional-compile-remove(video-background-effects) */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n  rtl?: boolean;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n}\n\nconst inferCommonCallControlOptions = (\n  mobileView: boolean,\n  commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n\n  const options =\n    commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n\n  const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n  const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n  const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n  const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n  const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n  const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n  const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n  const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n  /* @conditional-compile-remove(close-captions) */\n  const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n  const handleResize = useCallback((): void => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // on load set inital width\n  useEffect(() => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // get the current width of control bar buttons and panel control buttons when browser size change\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [handleResize]);\n\n  /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n  useEffect(() => {\n    // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n    setTotalButtonsWidth(\n      (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n    );\n  }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n  useEffect(() => {\n    setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n  }, [totalButtonsWidth, controlBarContainerWidth]);\n\n  /* @conditional-compile-remove(close-captions) */\n  const openCaptionsSettingsModal = useCallback((): void => {\n    setShowCaptionsSettingsModal(true);\n  }, []);\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = useCallback((): void => {\n    setShowCaptionsSettingsModal(false);\n  }, []);\n\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const peopleButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.peopleButtonLabel,\n      tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.moreDrawerButtonLabel,\n      tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n    }),\n    [callWithChatStrings]\n  );\n\n  const centerContainerStyles = useMemo(() => {\n    const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n    return mergeStyleSets(styles, {\n      root: {\n        // Enforce a background color on control bar to ensure it matches the composite background color.\n        background: theme.semanticColors.bodyBackground\n      }\n    });\n  }, [props.mobileView, theme.semanticColors.bodyBackground]);\n  const screenShareButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n  const commonButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n  const endCallButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n\n  const controlBarWrapperDesktopStyles: IStyle = useMemo(\n    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n    () => (!props.mobileView && !isOutOfSpace ? (props.rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n    [props.mobileView, props.rtl, isOutOfSpace]\n  );\n\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  const controlBarDesktopContainerStyles: IStyle = useMemo(\n    () => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}),\n    [props.mobileView, isOutOfSpace]\n  );\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customButtons = useMemo(\n    () =>\n      generateCustomCallControlBarButton(\n        onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n        options !== false ? options?.displayType : undefined\n      ),\n    [options]\n  );\n\n  // when options is false then we want to hide the whole control bar.\n  if (options === false) {\n    return <></>;\n  }\n\n  const chatButton = props.chatAdapter ? (\n    <ChatButtonWithUnreadMessagesBadge\n      chatAdapter={props.chatAdapter}\n      checked={props.chatButtonChecked}\n      showLabel={options.displayType !== 'compact'}\n      isChatPaneVisible={props.chatButtonChecked ?? false}\n      onClick={props.onChatButtonClicked}\n      disabled={props.disableButtonsForLobbyPage || isDisabled(options.chatButton)}\n      strings={chatButtonStrings}\n      styles={commonButtonStyles}\n      newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n    />\n  ) : (\n    <></>\n  );\n\n  return (\n    <div ref={controlBarSizeRef}>\n      <CallAdapterProvider adapter={props.callAdapter}>\n        {\n          /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (\n            <CaptionsSettingsModal\n              showCaptionsSettingsModal={showCaptionsSettingsModal}\n              onDismissCaptionsSettings={onDismissCaptionsSettings}\n            />\n          )\n        }\n      </CallAdapterProvider>\n      <Stack\n        horizontal\n        reversed={!props.mobileView && !isOutOfSpace}\n        horizontalAlign=\"space-between\"\n        className={mergeStyles(\n          callControlsContainerStyles,\n          controlBarContainerStyles,\n          controlBarDesktopContainerStyles\n        )}\n      >\n        <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n          <CallAdapterProvider adapter={props.callAdapter}>\n            <Stack horizontalAlign=\"center\">\n              {/*\n              HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n              tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n              immediately after it in the dom tree.\n              */}\n              <HiddenFocusStartPoint />\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                <div ref={controlBarContainerRef}>\n                  <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n                    {isEnabled(options.microphoneButton) && (\n                      <Microphone\n                        displayType={options.displayType}\n                        styles={commonButtonStyles}\n                        splitButtonsForDeviceSelection={!props.mobileView}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                      />\n                    )}\n                    {isEnabled(options.cameraButton) && (\n                      <Camera\n                        displayType={options.displayType}\n                        styles={commonButtonStyles}\n                        splitButtonsForDeviceSelection={!props.mobileView}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                        /* @conditional-compile-remove(video-background-effects) */\n                        onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n                      />\n                    )}\n                    {props.mobileView && isEnabled(options?.chatButton) && chatButton}\n                    {isEnabled(options.screenShareButton) && (\n                      <ScreenShare\n                        option={options.screenShareButton}\n                        displayType={options.displayType}\n                        styles={screenShareButtonStyles}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n                      />\n                    )}\n                    {\n                      /* @conditional-compile-remove(control-bar-button-injection) */\n                      customButtons['primary']\n                        ?.slice(\n                          0,\n                          props.mobileView\n                            ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n                            : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n                        )\n                        .map((CustomButton, i) => {\n                          return (\n                            <CustomButton\n                              key={`primary-custom-button-${i}`}\n                              styles={commonButtonStyles}\n                              showLabel={options.displayType !== 'compact'}\n                            />\n                          );\n                        })\n                    }\n                    {props.mobileView && (\n                      <MoreButton\n                        data-ui-id=\"common-call-composite-more-button\"\n                        strings={moreButtonStrings}\n                        onClick={props.onMoreButtonClicked}\n                        disabled={props.disableButtonsForLobbyPage}\n                      />\n                    )}\n                    {\n                      /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                        options?.moreButton\n                      ) &&\n                        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                          options?.holdButton\n                        ) &&\n                        !props.mobileView && (\n                          <DesktopMoreButton\n                            disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n                            styles={commonButtonStyles}\n                            onClickShowDialpad={props.onClickShowDialpad}\n                            /* @conditional-compile-remove(control-bar-button-injection) */\n                            callControls={props.callControls}\n                            /* @conditional-compile-remove(close-captions) */\n                            isCaptionsSupported={props.isCaptionsSupported}\n                            /* @conditional-compile-remove(close-captions) */\n                            onCaptionsSettingsClick={openCaptionsSettingsModal}\n                          />\n                        )\n                    }\n                    <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n                  </ControlBar>\n                </div>\n              </Stack.Item>\n            </Stack>\n          </CallAdapterProvider>\n        </Stack.Item>\n        {!props.mobileView && (\n          <Stack.Item>\n            <div ref={sidepaneControlsRef}>\n              <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                {\n                  /* @conditional-compile-remove(control-bar-button-injection) */\n                  customButtons['secondary']\n                    ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n                    .map((CustomButton, i) => {\n                      return (\n                        <CustomButton\n                          key={`secondary-custom-button-${i}`}\n                          styles={commonButtonStyles}\n                          showLabel={options.displayType !== 'compact'}\n                        />\n                      );\n                    })\n                }\n                {isEnabled(options?.peopleButton) && (\n                  <PeopleButton\n                    checked={props.peopleButtonChecked}\n                    ariaLabel={peopleButtonStrings?.label}\n                    showLabel={options.displayType !== 'compact'}\n                    onClick={props.onPeopleButtonClicked}\n                    data-ui-id=\"common-call-composite-people-button\"\n                    disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)}\n                    strings={peopleButtonStrings}\n                    styles={commonButtonStyles}\n                  />\n                )}\n                {isEnabled(options?.chatButton) && chatButton}\n              </Stack>\n            </div>\n          </Stack.Item>\n        )}\n      </Stack>\n    </div>\n  );\n};\n\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': { fill: theme.palette.white },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        border: '1px solid'\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { ChatAdapter } from '../../ChatComposite';\nimport { ChatButtonWithUnreadMessagesBadge } from '../../CallWithChatComposite/ChatButtonWithUnreadMessagesBadge';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallControlBarButton,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  chatButtonChecked?: boolean;\n  peopleButtonChecked: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  chatAdapter?: ChatAdapter;\n  disableButtonsForHoldScreen?: boolean;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onClickShowDialpad?: () => void;\n  /* @conditional-compile-remove(video-background-effects) */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n  rtl?: boolean;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n}\n\nconst inferCommonCallControlOptions = (\n  mobileView: boolean,\n  commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n\n  const options =\n    commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n\n  const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n  const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n  const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n  const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n  const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n  const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n  const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n  const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n  /* @conditional-compile-remove(close-captions) */\n  const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n  const handleResize = useCallback((): void => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // on load set inital width\n  useEffect(() => {\n    setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n    setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n    setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n  }, []);\n\n  // get the current width of control bar buttons and panel control buttons when browser size change\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [handleResize]);\n\n  /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n  useEffect(() => {\n    // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n    setTotalButtonsWidth(\n      (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n    );\n  }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n  useEffect(() => {\n    setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n  }, [totalButtonsWidth, controlBarContainerWidth]);\n\n  /* @conditional-compile-remove(close-captions) */\n  const openCaptionsSettingsModal = useCallback((): void => {\n    setShowCaptionsSettingsModal(true);\n  }, []);\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = useCallback((): void => {\n    setShowCaptionsSettingsModal(false);\n  }, []);\n\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const peopleButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.peopleButtonLabel,\n      tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.moreDrawerButtonLabel,\n      tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n    }),\n    [callWithChatStrings]\n  );\n\n  const centerContainerStyles = useMemo(() => {\n    const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n    return mergeStyleSets(styles, {\n      root: {\n        // Enforce a background color on control bar to ensure it matches the composite background color.\n        background: theme.semanticColors.bodyBackground\n      }\n    });\n  }, [props.mobileView, theme.semanticColors.bodyBackground]);\n  const screenShareButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n  const commonButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n  const endCallButtonStyles = useMemo(\n    () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n    [props.mobileView, theme]\n  );\n\n  const controlBarWrapperDesktopStyles: IStyle = useMemo(\n    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n    () => (!props.mobileView && !isOutOfSpace ? (props.rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n    [props.mobileView, props.rtl, isOutOfSpace]\n  );\n\n  // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n  const controlBarDesktopContainerStyles: IStyle = useMemo(\n    () => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}),\n    [props.mobileView, isOutOfSpace]\n  );\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customButtons = useMemo(\n    () =>\n      generateCustomCallControlBarButton(\n        onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n        options !== false ? options?.displayType : undefined\n      ),\n    [options]\n  );\n\n  // when options is false then we want to hide the whole control bar.\n  if (options === false) {\n    return <></>;\n  }\n\n  const chatButton = props.chatAdapter ? (\n    <ChatButtonWithUnreadMessagesBadge\n      chatAdapter={props.chatAdapter}\n      checked={props.chatButtonChecked}\n      showLabel={options.displayType !== 'compact'}\n      isChatPaneVisible={props.chatButtonChecked ?? false}\n      onClick={props.onChatButtonClicked}\n      disabled={props.disableButtonsForLobbyPage || isDisabled(options.chatButton)}\n      strings={chatButtonStrings}\n      styles={commonButtonStyles}\n      newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n    />\n  ) : (\n    <></>\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    <div ref={controlBarSizeRef}>\n      <CallAdapterProvider adapter={props.callAdapter}>\n        {\n          /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (\n            <CaptionsSettingsModal\n              showCaptionsSettingsModal={showCaptionsSettingsModal}\n              onDismissCaptionsSettings={onDismissCaptionsSettings}\n            />\n          )\n        }\n      </CallAdapterProvider>\n      <Stack\n        horizontal\n        reversed={!props.mobileView && !isOutOfSpace}\n        horizontalAlign=\"space-between\"\n        className={mergeStyles(\n          callControlsContainerStyles,\n          controlBarContainerStyles,\n          controlBarDesktopContainerStyles\n        )}\n      >\n        <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n          <CallAdapterProvider adapter={props.callAdapter}>\n            <Stack horizontalAlign=\"center\">\n              {/*\n              HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n              tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n              immediately after it in the dom tree.\n              */}\n              <HiddenFocusStartPoint />\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                <div ref={controlBarContainerRef}>\n                  <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n                    {microphoneButtonIsEnabled && (\n                      <Microphone\n                        displayType={options.displayType}\n                        styles={commonButtonStyles}\n                        splitButtonsForDeviceSelection={!props.mobileView}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                      />\n                    )}\n                    {cameraButtonIsEnabled && (\n                      <Camera\n                        displayType={options.displayType}\n                        styles={commonButtonStyles}\n                        splitButtonsForDeviceSelection={!props.mobileView}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                        /* @conditional-compile-remove(video-background-effects) */\n                        onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n                      />\n                    )}\n                    {props.mobileView && isEnabled(options?.chatButton) && chatButton}\n                    {screenShareButtonIsEnabled && (\n                      <ScreenShare\n                        option={options.screenShareButton}\n                        displayType={options.displayType}\n                        styles={screenShareButtonStyles}\n                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                        disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n                      />\n                    )}\n                    {\n                      /* @conditional-compile-remove(control-bar-button-injection) */\n                      customButtons['primary']\n                        ?.slice(\n                          0,\n                          props.mobileView\n                            ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n                            : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n                        )\n                        .map((CustomButton, i) => {\n                          return (\n                            <CustomButton\n                              key={`primary-custom-button-${i}`}\n                              styles={commonButtonStyles}\n                              showLabel={options.displayType !== 'compact'}\n                            />\n                          );\n                        })\n                    }\n                    {props.mobileView && (\n                      <MoreButton\n                        data-ui-id=\"common-call-composite-more-button\"\n                        strings={moreButtonStrings}\n                        onClick={props.onMoreButtonClicked}\n                        disabled={props.disableButtonsForLobbyPage}\n                      />\n                    )}\n                    {\n                      /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                        options?.moreButton\n                      ) &&\n                        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                          options?.holdButton\n                        ) &&\n                        !props.mobileView && (\n                          <DesktopMoreButton\n                            disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n                            styles={commonButtonStyles}\n                            onClickShowDialpad={props.onClickShowDialpad}\n                            /* @conditional-compile-remove(control-bar-button-injection) */\n                            callControls={props.callControls}\n                            /* @conditional-compile-remove(close-captions) */\n                            isCaptionsSupported={props.isCaptionsSupported}\n                            /* @conditional-compile-remove(close-captions) */\n                            onCaptionsSettingsClick={openCaptionsSettingsModal}\n                          />\n                        )\n                    }\n                    <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n                  </ControlBar>\n                </div>\n              </Stack.Item>\n            </Stack>\n          </CallAdapterProvider>\n        </Stack.Item>\n        {!props.mobileView && (\n          <Stack.Item>\n            <div ref={sidepaneControlsRef}>\n              <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                {\n                  /* @conditional-compile-remove(control-bar-button-injection) */\n                  customButtons['secondary']\n                    ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n                    .map((CustomButton, i) => {\n                      return (\n                        <CustomButton\n                          key={`secondary-custom-button-${i}`}\n                          styles={commonButtonStyles}\n                          showLabel={options.displayType !== 'compact'}\n                        />\n                      );\n                    })\n                }\n                {isEnabled(options?.peopleButton) && (\n                  <PeopleButton\n                    checked={props.peopleButtonChecked}\n                    ariaLabel={peopleButtonStrings?.label}\n                    showLabel={options.displayType !== 'compact'}\n                    onClick={props.onPeopleButtonClicked}\n                    data-ui-id=\"common-call-composite-people-button\"\n                    disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)}\n                    strings={peopleButtonStrings}\n                    styles={commonButtonStyles}\n                  />\n                )}\n                {isEnabled(options?.chatButton) && chatButton}\n              </Stack>\n            </div>\n          </Stack.Item>\n        )}\n      </Stack>\n    </div>\n  );\n};\n\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': { fill: theme.palette.white },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        border: '1px solid'\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js

@@ -13,7 +13,7 @@ import React from 'react';
 /* @conditional-compile-remove(video-background-effects) */
 import { useCallback, useMemo } from 'react';
 /* @conditional-compile-remove(video-background-effects) */
-import { Panel } from '@fluentui/react';
+import { Panel, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(video-background-effects) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(video-background-effects) */
@@ -121,7 +121,11 @@ const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffects
     /* @conditional-compile-remove(video-background-effects) */
     const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);
     /* @conditional-compile-remove(video-background-effects) */
-    return (React.createElement(Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React.createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange, selectedEffectKey: selectedEffect }))));
+    const headerStyles = {
+        zIndex: 0
+    };
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React.createElement(Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true, className: mergeStyles(headerStyles) }, selectableVideoEffects && (React.createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange, selectedEffectKey: selectedEffect }))));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=VideoEffectsPane.js.map

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { Panel } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPane = (props: {\n  showVideoEffectsOptions: boolean;\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n  const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        key: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        key: 'blur',\n        iconProps: {\n          iconName: 'BlurVideoBackground'\n        },\n        title: strings.blurBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.blurBackgroundTooltip\n        }\n      }\n    ];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          key: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n        await adapter.blurVideoBackground();\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoneEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n        await adapter.stopVideoBackgroundEffect();\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.key === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n          await adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });\n        }\n      }\n    },\n    [adapter, selectableVideoEffects]\n  );\n  return VideoEffectsPaneTrampoline(\n    showVideoEffectsOptions,\n    setshowVideoEffectsOptions,\n    /* @conditional-compile-remove(video-background-effects) */\n    selectableVideoEffects,\n    /* @conditional-compile-remove(video-background-effects) */\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  showVideoEffectsOptions: boolean,\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  return (\n    <Panel\n      headerText={locale.strings.call.effects}\n      isOpen={showVideoEffectsOptions}\n      onDismiss={() => setshowVideoEffectsOptions(false)}\n      hasCloseButton={true}\n      closeButtonAriaLabel=\"Close\"\n      isLightDismiss={true}\n    >\n      {selectableVideoEffects && (\n        <_VideoBackgroundEffectsPicker\n          options={selectableVideoEffects}\n          onChange={onEffectChange}\n          selectedEffectKey={selectedEffect}\n        ></_VideoBackgroundEffectsPicker>\n      )}\n    </Panel>\n  );\n  return <></>;\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { Panel, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPane = (props: {\n  showVideoEffectsOptions: boolean;\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n  const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        key: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        key: 'blur',\n        iconProps: {\n          iconName: 'BlurVideoBackground'\n        },\n        title: strings.blurBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.blurBackgroundTooltip\n        }\n      }\n    ];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          key: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n        await adapter.blurVideoBackground();\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoneEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n        await adapter.stopVideoBackgroundEffect();\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.key === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n          await adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });\n        }\n      }\n    },\n    [adapter, selectableVideoEffects]\n  );\n  return VideoEffectsPaneTrampoline(\n    showVideoEffectsOptions,\n    setshowVideoEffectsOptions,\n    /* @conditional-compile-remove(video-background-effects) */\n    selectableVideoEffects,\n    /* @conditional-compile-remove(video-background-effects) */\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  showVideoEffectsOptions: boolean,\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const headerStyles = {\n    zIndex: 0\n  };\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return (\n    <Panel\n      headerText={locale.strings.call.effects}\n      isOpen={showVideoEffectsOptions}\n      onDismiss={() => setshowVideoEffectsOptions(false)}\n      hasCloseButton={true}\n      closeButtonAriaLabel=\"Close\"\n      isLightDismiss={true}\n      className={mergeStyles(headerStyles)}\n    >\n      {selectableVideoEffects && (\n        <_VideoBackgroundEffectsPicker\n          options={selectableVideoEffects}\n          onChange={onEffectChange}\n          selectedEffectKey={selectedEffect}\n        ></_VideoBackgroundEffectsPicker>\n      )}\n    </Panel>\n  );\n  return <></>;\n};\n\"../../../../react-components/src\""]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.5.1-alpha-202304220013",
+  "version": "1.5.1-alpha-202304260013",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -89,13 +89,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.5.1-alpha-202304220013",
-    "@internal/calling-stateful-client": "1.5.1-alpha-202304220013",
-    "@internal/chat-component-bindings": "1.5.1-alpha-202304220013",
-    "@internal/chat-stateful-client": "1.5.1-alpha-202304220013",
-    "@internal/fake-backends": "1.5.1-alpha-202304220013",
-    "@internal/react-components": "1.5.1-alpha-202304220013",
-    "@internal/react-composites": "1.5.1-alpha-202304220013",
+    "@internal/calling-component-bindings": "1.5.1-alpha-202304260013",
+    "@internal/calling-stateful-client": "1.5.1-alpha-202304260013",
+    "@internal/chat-component-bindings": "1.5.1-alpha-202304260013",
+    "@internal/chat-stateful-client": "1.5.1-alpha-202304260013",
+    "@internal/fake-backends": "1.5.1-alpha-202304260013",
+    "@internal/react-components": "1.5.1-alpha-202304260013",
+    "@internal/react-composites": "1.5.1-alpha-202304260013",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",