@azure/communication-react 1.22.0 → 1.23.0-alpha-202412200016

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

@@ -1 +1 @@
-{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,oBAAC,OAAO,IAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,eAAe,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU;QAC1L,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE;gBACzD,WAAW,EAAE,UAAU;aACxB;YACG,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CAAC;AACf,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AACF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return <Callout styles={calloutStyle} target={`#${props.targetId}`} directionalHint={DirectionalHint.topCenter} beakWidth={BEAK_WIDTH_PX} gapSpace={GAP_SPACE_PX} doNotLayer={props.doNotLayer}>\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{\n      childrenGap: '0.375rem'\n    }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>;\n};\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\nconst BEAK_WIDTH_PX = 8;\nconst GAP_SPACE_PX = 2;\nconst iconClass = mergeStyles({\n  fontSize: 18\n});"]}
+{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,CACL,oBAAC,OAAO,IACN,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAC5B,eAAe,EAAE,eAAe,CAAC,SAAS,EAC1C,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAE5B,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;YAClF,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return (\n    <Callout\n      styles={calloutStyle}\n      target={`#${props.targetId}`}\n      directionalHint={DirectionalHint.topCenter}\n      beakWidth={BEAK_WIDTH_PX}\n      gapSpace={GAP_SPACE_PX}\n      doNotLayer={props.doNotLayer}\n    >\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{ childrenGap: '0.375rem' }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>\n  );\n};\n\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\n\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\n\nconst BEAK_WIDTH_PX = 8;\n\nconst GAP_SPACE_PX = 2;\n\nconst iconClass = mergeStyles({\n  fontSize: 18\n});\n"]}

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

@@ -42,17 +42,19 @@ export const CaptionsBannerMoreButton = (props) => {
     }), [startCaptionsButtonProps, props.returnFocusRef]);
     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 ? stopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            startCaptionsButtonProps.checked
+                ? stopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
         },
         iconProps: {
             iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
@@ -66,11 +68,7 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -78,13 +76,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 { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(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 startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n    props.returnFocusRef?.current?.focus();\n  }, [startCaptionsButtonProps, props.returnFocusRef]);\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked ? stopCaptions() : 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 { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(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 startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n    props.returnFocusRef?.current?.focus();\n  }, [startCaptionsButtonProps, props.returnFocusRef]);\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        ? stopCaptions()\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/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, useImperative
 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;
@@ -65,7 +71,7 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
         focus: () => {
             // To move focus to the hidden element, we increment the key to force a re-mount of the HiddenFocusStartPoint component
             // which relies on focusOnMount to move focus to the next interact-able element.
-            setHiddenFocusStartElementKey(prevKey => prevKey + 1);
+            setHiddenFocusStartElementKey((prevKey) => prevKey + 1);
         }
     }));
     const controlBarContainerRef = useRef(null);
@@ -80,8 +86,12 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     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);
@@ -99,8 +109,8 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
         return () => window.removeEventListener('resize', handleResize);
     }, [handleResize]);
     /* when size change, reset total buttons width and compare with the control bar container width
-    if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width
-    Instead let them take up the remaining white space on the left */
+  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width
+  Instead let them take up the remaining white space on the left */
     useEffect(() => {
         // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width
         setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);
@@ -138,12 +148,17 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     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();
@@ -163,25 +178,33 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
             }
         });
     }, [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);
@@ -193,14 +216,15 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     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(CallingCaptionsSettingsModal, { 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(CallingCaptionsSettingsModal, { 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 },
@@ -209,35 +233,61 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
                         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: peopleButtonStrings.label, 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: peopleButtonStrings.label, 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',
@@ -310,9 +360,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