@azure/communication-react 1.21.0 → 1.22.0-alpha-202411190017

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

@@ -40,17 +40,19 @@ export const CaptionsBannerMoreButton = (props) => {
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     moreButtonContextualMenuItems.push({
         key: 'ToggleCaptionsKey',
-        text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        text: startCaptionsButtonProps.checked
+            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
         onClick: () => {
-            startCaptionsButtonProps.checked ? startCaptionsButtonHandlers.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            startCaptionsButtonProps.checked
+                ? startCaptionsButtonHandlers.onStopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
         },
         iconProps: {
             iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
@@ -64,11 +66,7 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -76,13 +74,11 @@ export const CaptionsBannerMoreButton = (props) => {
             disabled: !startCaptionsButtonProps.checked
         });
     }
-    return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: {
-            hidden: true
-        }, menuProps: {
+    return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
             }
-        } }));
+        } })));
 };
 //# sourceMappingURL=CaptionsBannerMoreButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { _StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  const moreButtonStrings = useMemo(() => ({\n    label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n    tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n  }), [localeStrings]);\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked ? startCaptionsButtonHandlers.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n  return <MoreButton {...props} data-ui-id=\"captions-banner-more-button\" strings={moreButtonStrings} menuIconProps={{\n    hidden: true\n  }} menuProps={{\n    items: moreButtonContextualMenuItems,\n    calloutProps: {\n      preventDismissOnEvent: _preventDismissOnEvent\n    }\n  }} />;\n};"]}
+{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { _StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked\n      ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent\n      : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked\n        ? startCaptionsButtonHandlers.onStopCaptions()\n        : startCaptionsButtonProps.currentSpokenLanguage !== ''\n          ? startCaptions()\n          : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: { root: { lineHeight: 0 } }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: { root: { lineHeight: 0 } }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n\n  return (\n    <MoreButton\n      {...props}\n      data-ui-id=\"captions-banner-more-button\"\n      strings={moreButtonStrings}\n      menuIconProps={{ hidden: true }}\n      menuProps={{\n        items: moreButtonContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }}\n    />\n  );\n};\n"]}

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

@@ -24,6 +24,6 @@ export const CaptionsSettingsModal = (props) => {
     };
     const spokenLanguageStrings = strings.spokenLanguageStrings;
     const captionLanguageStrings = strings.captionLanguageStrings;
-    return React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage }));
+    return (React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage })));
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAgF,yCAAmC;AAClJ,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,mDAA6C;AAEhF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAIrC,EAAe,EAAE;IAChB,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAC;IAChF,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAAkC;QAClD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,2CAA2C,EAAE,OAAO,CAAC,2CAA2C;QAChG,4CAA4C,EAAE,OAAO,CAAC,4CAA4C;QAClG,8CAA8C,EAAE,OAAO,CAAC,8CAA8C;QACtG,+CAA+C,EAAE,OAAO,CAAC,+CAA+C;QACxG,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IACF,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAC/F,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAClG,OAAO,oBAAC,sBAAsB,oBAAK,0BAA0B,EAAM,QAAQ,IAAE,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,IAAI,CAAC;AACnW,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _CaptionsSettingsModal, _CaptionsSettingsModalStrings, SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useLocale } from '../localization';\nimport { _captionSettingsSelector } from '@internal/calling-component-bindings';\n\n/** @private */\nexport const CaptionsSettingsModal = (props: {\n  showCaptionsSettingsModal: boolean;\n  onDismissCaptionsSettings: () => void;\n  changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n  const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);\n  const handlers = useHandlers(_CaptionsSettingsModal);\n  const strings = useLocale().strings.call;\n  const modalStrings: _CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,\n    captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,\n    captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,\n    captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n  const spokenLanguageStrings: SpokenLanguageStrings | undefined = strings.spokenLanguageStrings;\n  const captionLanguageStrings: CaptionLanguageStrings | undefined = strings.captionLanguageStrings;\n  return <_CaptionsSettingsModal {...CaptionsSettingsModalProps} {...handlers} strings={modalStrings} spokenLanguageStrings={spokenLanguageStrings} captionLanguageStrings={captionLanguageStrings} showModal={props.showCaptionsSettingsModal} onDismissCaptionsSettings={props.onDismissCaptionsSettings} changeCaptionLanguage={props.changeCaptionLanguage} />;\n};"]}
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,sBAAsB,EAIvB,yCAAmC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,mDAA6C;AAEhF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAIrC,EAAe,EAAE;IAChB,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAC;IAChF,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAAkC;QAClD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,2CAA2C,EAAE,OAAO,CAAC,2CAA2C;QAChG,4CAA4C,EAAE,OAAO,CAAC,4CAA4C;QAClG,8CAA8C,EAAE,OAAO,CAAC,8CAA8C;QACtG,+CAA+C,EAAE,OAAO,CAAC,+CAA+C;QACxG,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IAEF,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAE/F,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAElG,OAAO,CACL,oBAAC,sBAAsB,oBACjB,0BAA0B,EAC1B,QAAQ,IACZ,OAAO,EAAE,YAAY,EACrB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAC1D,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,IAClD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  _CaptionsSettingsModal,\n  _CaptionsSettingsModalStrings,\n  SpokenLanguageStrings,\n  CaptionLanguageStrings\n} from '@internal/react-components';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useLocale } from '../localization';\nimport { _captionSettingsSelector } from '@internal/calling-component-bindings';\n\n/** @private */\nexport const CaptionsSettingsModal = (props: {\n  showCaptionsSettingsModal: boolean;\n  onDismissCaptionsSettings: () => void;\n  changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n  const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);\n  const handlers = useHandlers(_CaptionsSettingsModal);\n  const strings = useLocale().strings.call;\n  const modalStrings: _CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,\n    captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,\n    captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,\n    captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n\n  const spokenLanguageStrings: SpokenLanguageStrings | undefined = strings.spokenLanguageStrings;\n\n  const captionLanguageStrings: CaptionLanguageStrings | undefined = strings.captionLanguageStrings;\n\n  return (\n    <_CaptionsSettingsModal\n      {...CaptionsSettingsModalProps}\n      {...handlers}\n      strings={modalStrings}\n      spokenLanguageStrings={spokenLanguageStrings}\n      captionLanguageStrings={captionLanguageStrings}\n      showModal={props.showCaptionsSettingsModal}\n      onDismissCaptionsSettings={props.onDismissCaptionsSettings}\n      changeCaptionLanguage={props.changeCaptionLanguage}\n    />\n  );\n};\n"]}

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

@@ -1,9 +1,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-export const containerDivStyles = {
-    position: 'relative',
-    width: '100%',
-    height: '100%'
-};
+export const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
 //# sourceMappingURL=ContainerRectProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = {\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n};"]}
+{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = { position: 'relative', width: '100%', height: '100%' };\n"]}

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

@@ -13,6 +13,8 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'
 import { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';
 import { PeopleButton } from './PeopleButton';
 import { concatStyleSets, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(breakout-rooms) */
+import { PrimaryButton } from '@fluentui/react';
 import { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';
 import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';
 import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
@@ -37,8 +39,12 @@ import { useLocale } from '../../localization';
 import { isBoolean } from '../utils';
 import { getEnvironmentInfo } from '../../CallComposite/selectors/baseSelectors';
 import { getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */
+import { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../../CallComposite/selectors/baseSelectors';
 import { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';
 import { MeetingConferencePhoneInfoModal } from "../../../../../react-components/src";
+/* @conditional-compile-remove(breakout-rooms) */
+import { Timer } from './Timer';
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
     if (commonCallControlOptions === false) {
         return false;
@@ -71,8 +77,12 @@ export const CommonCallControlBar = (props) => {
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
     const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
     // If the hangup capability is not present, we default to true
-    const isHangUpForEveryoneAllowed = (_a = useSelector(state => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.hangUpForEveryOne.isPresent; })) !== null && _a !== void 0 ? _a : true;
+    const isHangUpForEveryoneAllowed = (_a = useSelector((state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.hangUpForEveryOne.isPresent; })) !== null && _a !== void 0 ? _a : true;
     const isTeams = useSelector(getIsTeamsCall);
+    /* @conditional-compile-remove(breakout-rooms) */
+    const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
+    /* @conditional-compile-remove(breakout-rooms) */
+    const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
     const handleResize = useCallback(() => {
         setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
         setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
@@ -129,12 +139,17 @@ export const CommonCallControlBar = (props) => {
     const environmentInfo = useSelector(getEnvironmentInfo);
     const isSafari = _isSafari(environmentInfo);
     useEffect(() => {
-        if (props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency && props.callAdapter.getState().deepNoiseSuppressionOnByDefault) {
+        if (props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+            props.callAdapter.getState().deepNoiseSuppressionOnByDefault) {
             startDeepNoiseSuppression();
             setDeepNoiseSuppressionOn(true);
         }
     }, [props.callAdapter, startDeepNoiseSuppression]);
-    const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency && !props.callAdapter.getState().hideDeepNoiseSuppressionButton && !isSafari ? true : false;
+    const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+        !props.callAdapter.getState().hideDeepNoiseSuppressionButton &&
+        !isSafari
+        ? true
+        : false;
     const onClickNoiseSuppression = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (isDeepNoiseSuppressionOn) {
             yield props.callAdapter.stopNoiseSuppressionEffect();
@@ -154,25 +169,33 @@ export const CommonCallControlBar = (props) => {
             }
         });
     }, [props.mobileView, theme.semanticColors.bodyBackground]);
-    const screenShareButtonStyles = useMemo(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);
+    const screenShareButtonStyles = useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const commonButtonStyles = useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const endCallButtonStyles = useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const controlBarWrapperDesktopStyles = useMemo(
     // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
-    () => !props.mobileView && !isOutOfSpace ? rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles : {}, [props.mobileView, rtl, isOutOfSpace]);
+    () => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, rtl, isOutOfSpace]);
     // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
-    const controlBarDesktopContainerStyles = useMemo(() => !props.mobileView && !isOutOfSpace ? {
-        position: 'relative',
-        minHeight: '4.5rem',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        paddingLeft: '1rem'
-    } : {}, [props.mobileView, isOutOfSpace]);
+    const controlBarDesktopContainerStyles = useMemo(() => !props.mobileView && !isOutOfSpace
+        ? {
+            position: 'relative',
+            minHeight: '4.5rem',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: '1rem'
+        }
+        : {}, [props.mobileView, isOutOfSpace]);
     const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
     const capabilitiesSelector = useSelector(capabilitySelector);
     const callState = useSelector(callStatusSelector);
-    const isReactionAllowed = callState.callStatus !== 'Connected' || !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
+    const isReactionAllowed = callState.callStatus !== 'Connected' ||
+        !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) ||
+        capabilitiesSelector.capabilities.useReactions.isPresent;
+    /* @conditional-compile-remove(breakout-rooms) */
+    const canReturnToMainMeeting = breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting === false;
+    /* @conditional-compile-remove(breakout-rooms) */
+    const returnFromBreakoutRoom = useCallback(() => props.callAdapter.returnFromBreakoutRoom(), [props.callAdapter]);
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
         return React.createElement(React.Fragment, null);
@@ -184,14 +207,15 @@ export const CommonCallControlBar = (props) => {
     const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);
     const showTeamsMeetingPhoneCallButton = isEnabled(options === null || options === void 0 ? void 0 : options.teamsMeetingPhoneCallButton);
-    const showDesktopMoreButton = isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && (false || isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
+    const showDesktopMoreButton = isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) &&
+        (false || isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
     const role = (_b = props.callAdapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     const hideRaiseHandButtonInRoomsCall = props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
     const reactionResources = props.callAdapter.getState().reactions;
-    return React.createElement("div", { ref: controlBarSizeRef },
+    return (React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
-            showCaptionsSettingsModal && React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions }),
-            props.teamsMeetingConferenceModalPresent && React.createElement(MeetingConferencePhoneInfoModal, { conferencePhoneInfoList: (_e = (_d = (_c = props.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.meetingConference) === null || _d === void 0 ? void 0 : _d.conferencePhones) !== null && _e !== void 0 ? _e : [], showModal: props.teamsMeetingConferenceModalPresent, onDismissMeetingPhoneInfoSettings: props.onToggleTeamsMeetingConferenceModal })),
+            showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions })),
+            props.teamsMeetingConferenceModalPresent && (React.createElement(MeetingConferencePhoneInfoModal, { conferencePhoneInfoList: (_e = (_d = (_c = props.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.meetingConference) === null || _d === void 0 ? void 0 : _d.conferencePhones) !== null && _e !== void 0 ? _e : [], showModal: props.teamsMeetingConferenceModalPresent, onDismissMeetingPhoneInfoSettings: props.onToggleTeamsMeetingConferenceModal }))),
         React.createElement(Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
             React.createElement(Stack.Item, { grow: true, className: mergeStyles(controlBarWrapperDesktopStyles) },
                 React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -200,35 +224,63 @@ export const CommonCallControlBar = (props) => {
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
-                                    microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton), disableTooltip: props.mobileView, onClickNoiseSuppression: onClickNoiseSuppression, isDeepNoiseSuppressionOn: isDeepNoiseSuppressionOn, showNoiseSuppressionButton: showNoiseSuppressionButton }),
-                                    cameraButtonIsEnabled && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView }),
-                                    !props.mobileView && isReactionAllowed && isEnabled(options.reactionButton) && reactionResources && React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources }),
-                                    !props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) }),
-                                    showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
+                                    /* @conditional-compile-remove(breakout-rooms) */
+                                    !props.mobileView &&
+                                        assignedBreakoutRoom &&
+                                        assignedBreakoutRoom.state === 'open' &&
+                                        assignedBreakoutRoom.call && (React.createElement(PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                            assignedBreakoutRoom.join();
+                                        }), styles: commonButtonStyles })),
+                                    microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton), disableTooltip: props.mobileView, onClickNoiseSuppression: onClickNoiseSuppression, isDeepNoiseSuppressionOn: isDeepNoiseSuppressionOn, showNoiseSuppressionButton: showNoiseSuppressionButton })),
+                                    cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
+                                    !props.mobileView &&
+                                        isReactionAllowed &&
+                                        isEnabled(options.reactionButton) &&
+                                        reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
+                                    !props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
+                                    showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
                                             if (props.onSetDialpadPage !== undefined) {
                                                 props.onSetDialpadPage();
                                             }
-                                        } }),
-                                    showExitSpotlightButton && props.onStopLocalSpotlight && React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings }),
-                                    screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) }), (_f = customButtons['primary']) === null || _f === void 0 ? void 0 :
-                                    _f.slice(0, props.mobileView ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                                        return React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView });
+                                        } })),
+                                    showExitSpotlightButton && props.onStopLocalSpotlight && (React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings })),
+                                    screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), (_f = customButtons['primary']) === null || _f === void 0 ? void 0 :
+                                    _f.slice(0, props.mobileView
+                                        ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
+                                        : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                                        return (React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView }));
                                     }),
-                                    props.mobileView && React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView }),
-                                    !props.mobileView && showDesktopMoreButton && React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage, teamsMeetingPhoneCallEnable: showTeamsMeetingPhoneCallButton, onMeetingPhoneInfoClick: props.onToggleTeamsMeetingConferenceModal }),
-                                    React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, enableEndCallMenu: !isBoolean(props.callControls) && !isBoolean((_g = props.callControls) === null || _g === void 0 ? void 0 : _g.endCallButton) && !props.mobileView && isHangUpForEveryoneAllowed && !isTeams &&
-                                            // Temporary disable it for Teams call, since capability does not give the right value
+                                    props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
+                                    !props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage, teamsMeetingPhoneCallEnable: showTeamsMeetingPhoneCallButton, onMeetingPhoneInfoClick: props.onToggleTeamsMeetingConferenceModal })),
+                                    React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, enableEndCallMenu: !isBoolean(props.callControls) &&
+                                            !isBoolean((_g = props.callControls) === null || _g === void 0 ? void 0 : _g.endCallButton) &&
+                                            !props.mobileView &&
+                                            isHangUpForEveryoneAllowed &&
+                                            !isTeams && // Temporary disable it for Teams call, since capability does not give the right value
                                             ((_j = (_h = props.callControls) === null || _h === void 0 ? void 0 : _h.endCallButton) === null || _j === void 0 ? void 0 : _j.hangUpForEveryone) === 'endCallOptions' &&
                                             // Only show the end call menu when the call is connected, user should not be able to end the call for everyone
                                             // when they are not actively in the call to communicate they will.
-                                            callState.callStatus === 'Connected', disableEndCallModal: !isBoolean(props.callControls) && !isBoolean((_k = props.callControls) === null || _k === void 0 ? void 0 : _k.endCallButton) && ((_m = (_l = props.callControls) === null || _l === void 0 ? void 0 : _l.endCallButton) === null || _m === void 0 ? void 0 : _m.disableEndCallModal) }))))))),
-            !props.mobileView && sideButtonsPresent && React.createElement(Stack.Item, null,
+                                            callState.callStatus === 'Connected' &&
+                                            /* @conditional-compile-remove(breakout-rooms) */
+                                            !canReturnToMainMeeting, disableEndCallModal: !isBoolean(props.callControls) &&
+                                            !isBoolean((_k = props.callControls) === null || _k === void 0 ? void 0 : _k.endCallButton) &&
+                                            ((_m = (_l = props.callControls) === null || _l === void 0 ? void 0 : _l.endCallButton) === null || _m === void 0 ? void 0 : _m.disableEndCallModal), 
+                                        /* @conditional-compile-remove(breakout-rooms) */
+                                        returnFromBreakoutRoom: canReturnToMainMeeting ? returnFromBreakoutRoom : undefined }))))))),
+            !props.mobileView && sideButtonsPresent && (React.createElement(Stack.Item, null,
                 React.createElement("div", { ref: sidepaneControlsRef },
                     React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
-                        isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: props.peopleButtonChecked ? peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.tooltipCloseAriaLabel : peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.tooltipOpenAriaLabel, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage || props.disableButtonsForHoldScreen || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef }), (_o = customButtons['secondary']) === null || _o === void 0 ? void 0 :
+                        isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: props.peopleButtonChecked
+                                ? peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.tooltipCloseAriaLabel
+                                : peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.tooltipOpenAriaLabel, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
+                                props.disableButtonsForHoldScreen ||
+                                isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_o = customButtons['secondary']) === null || _o === void 0 ? void 0 :
                         _o.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                            return React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' });
-                        }))))));
+                            return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                        }))))),
+            /* @conditional-compile-remove(breakout-rooms) */
+            (breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime) && !props.mobileView && !isOutOfSpace && (React.createElement(Stack.Item, null,
+                React.createElement(Timer, { timeStampInfo: breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime.toString() }))))));
 };
 const desktopButtonContainerStyle = {
     padding: '0.75rem',
@@ -301,9 +353,7 @@ const getDesktopScreenShareButtonStyles = (theme) => {
         border: 'none',
         background: theme.palette.themePrimary,
         color: theme.palette.white,
-        '* > svg': {
-            fill: theme.palette.white
-        },
+        '* > svg': { fill: theme.palette.white },
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black