@azure/communication-react 1.25.0-alpha-202502270016 → 1.25.0-beta.1

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

@@ -40,19 +40,17 @@ export const CaptionsBannerMoreButton = (props) => {
     }), [startCaptionsButtonProps]);
     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,7 +64,11 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -74,11 +76,13 @@ 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":["../../../../../../../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 { usePropsFor } from '../CallComposite/hooks/usePropsFor';\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 = 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  }, [startCaptionsButtonProps]);\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"]}
+{"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 { usePropsFor } from '../CallComposite/hooks/usePropsFor';\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 = 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  }, [startCaptionsButtonProps]);\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};"]}

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

@@ -1,5 +1,9 @@
 // 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":["../../../../../../../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"]}
+{"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};"]}

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

@@ -13,7 +13,6 @@ 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';
@@ -38,13 +37,10 @@ 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';
-/* @conditional-compile-remove(rtt) */
 import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
     if (commonCallControlOptions === false) {
@@ -77,14 +73,11 @@ export const CommonCallControlBar = (props) => {
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
     const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
-    /* @conditional-compile-remove(rtt) */
     const [showRealTimeTextModal, setShowRealTimeTextModal] = 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);
@@ -115,11 +108,9 @@ export const CommonCallControlBar = (props) => {
     const openCaptionsSettingsModal = useCallback(() => {
         setShowCaptionsSettingsModal(true);
     }, []);
-    /* @conditional-compile-remove(rtt) */
     const openRealTimeTextModal = useCallback(() => {
         setShowRealTimeTextModal(true);
     }, []);
-    /* @conditional-compile-remove(rtt) */
     const onDismissRealTimeTextModal = useCallback(() => {
         setShowRealTimeTextModal(false);
     }, []);
@@ -150,17 +141,12 @@ 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();
@@ -180,32 +166,26 @@ 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;
-    /* @conditional-compile-remove(breakout-rooms) */
+    const isReactionAllowed = callState.callStatus !== 'Connected' || !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
     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) {
@@ -217,23 +197,17 @@ export const CommonCallControlBar = (props) => {
     const cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
     const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);
-    /* @conditional-compile-remove(rtt) */
     const showRealTimeTextButton = props.isRealTimeTextSupported;
     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 ||
-            /* @conditional-compile-remove(rtt) */ showRealTimeTextButton);
+    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 || showRealTimeTextButton);
     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 })),
-            /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && (React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText })),
-            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 }),
+            showRealTimeTextModal && React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText }),
+            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 },
@@ -241,69 +215,43 @@ export const CommonCallControlBar = (props) => {
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
-                                    /* @conditional-compile-remove(breakout-rooms) */
-                                    !props.mobileView &&
-                                        assignedBreakoutRoom &&
-                                        assignedBreakoutRoom.state === 'open' &&
+                                    !props.mobileView && assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' &&
                                         // Breakout room settings are only defined in a breakout room so we use this to ensure
                                         // the button is not shown when already in a breakout room
-                                        !breakoutRoomSettings && (React.createElement(PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                        !breakoutRoomSettings && 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: () => {
+                                        }), 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, 
-                                        /* @conditional-compile-remove(rtt) */
-                                        isRealTimeTextSupported: showRealTimeTextButton, onCaptionsSettingsClick: openCaptionsSettingsModal, 
-                                        /* @conditional-compile-remove(rtt) */
-                                        onStartRealTimeTextClick: openRealTimeTextModal, 
-                                        /* @conditional-compile-remove(rtt) */
-                                        startRealTimeTextButtonChecked: props.startRealTimeTextButtonChecked, 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, isRealTimeTextSupported: showRealTimeTextButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onStartRealTimeTextClick: openRealTimeTextModal, startRealTimeTextButtonChecked: props.startRealTimeTextButtonChecked, 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' &&
-                                            /* @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,
+                                            callState.callStatus === 'Connected' && !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), 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, chatButtonPresent: isEnabled(options.chatButton), peoplePaneDismissButtonRef: props.sidePaneDismissButtonRef })), (_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, chatButtonPresent: isEnabled(options.chatButton), peoplePaneDismissButtonRef: props.sidePaneDismissButtonRef }), (_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' }));
-                        }))))),
-            /* @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() }))))));
+                            return React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' });
+                        })))),
+            (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',
@@ -376,7 +324,9 @@ 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