@azure/communication-react 1.20.0-beta.1 → 1.21.0-alpha-202410180016

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

@@ -14,13 +14,13 @@ export const Banner = (props) => {
     var _a, _b;
     const strings = props.strings;
     const theme = useTheme();
-    return React.createElement(Stack, { horizontalAlign: "center" },
+    return (React.createElement(Stack, { horizontalAlign: "center" },
         React.createElement(Stack, { "data-ui-id": "banner", className: containerStyles(theme) },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                 React.createElement(Stack, { horizontal: true },
-                    ((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && React.createElement(Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps)),
+                    ((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && (React.createElement(Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps))),
                     React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
-                props.primaryButton ? React.createElement(PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }) : React.createElement(DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))));
+                props.primaryButton ? (React.createElement(PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton })) : (React.createElement(DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))))));
 };
 const titleTextClassName = mergeStyles({
     fontWeight: 400,

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/Banner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AACnD,iDAAiD;AACjD,OAAO,EAAc,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;QAClC,oBAAC,KAAK,kBAAY,QAAQ,EAAC,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;YAC1D,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACd,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,KAAI,oBAAC,IAAI,kBAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,IAAM,KAAK,CAAC,SAAS,EAAI;oBAChI,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,GAAI,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,GAAI,CACxQ,CACF,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,WAAW,CAAC;IACrC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAC5D,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;CACrC,CAAC,CAAC;AACH,MAAM,mBAAmB,GAAG,WAAW,CAAC;IACtC,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;IACnB,WAAW,EAAE,QAAQ;IACrB,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n// eslint-disable-next-line no-restricted-imports\nimport { IIconProps, Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Props for {@link Banner}.\n *\n * @private\n */\nexport interface BannerProps {\n  /**\n   * Banner strings.\n   */\n  strings?: BannerStrings;\n\n  /**\n   * Banner icon.\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Callback called when the button inside banner is clicked.\n   */\n  onClickButton?: () => void;\n\n  /**\n   * If true, the primary button will be styled as a primary button. Default is false.\n   */\n  primaryButton?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Banner}.\n *\n * @private\n */\nexport interface BannerStrings {\n  /**\n   * Banner title.\n   */\n  title: string;\n  /**\n   * Banner primary button label.\n   */\n  primaryButtonLabel: string;\n}\n\n/**\n * A component to show a banner in the UI.\n *\n * @private\n */\nexport const Banner = (props: BannerProps): JSX.Element => {\n  const strings = props.strings;\n  const theme = useTheme();\n  return <Stack horizontalAlign=\"center\">\n      <Stack data-ui-id=\"banner\" className={containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            {props.iconProps?.iconName && <Icon className={bannerIconClassName} iconName={props.iconProps?.iconName} {...props.iconProps} />}\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n          {props.primaryButton ? <PrimaryButton text={strings?.primaryButtonLabel} ariaLabel={strings?.primaryButtonLabel} onClick={props.onClickButton} /> : <DefaultButton text={strings?.primaryButtonLabel} ariaLabel={strings?.primaryButtonLabel} onClick={props.onClickButton} />}\n        </Stack>\n      </Stack>\n    </Stack>;\n};\nconst titleTextClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(16),\n  alignSelf: 'center'\n});\nconst containerStyles = (theme: Theme): string => mergeStyles({\n  boxShadow: theme.effects.elevation8,\n  width: '20rem',\n  padding: '0.75rem',\n  borderRadius: '0.25rem',\n  position: 'relative',\n  backgroundColor: theme.palette.white\n});\nconst bannerIconClassName = mergeStyles({\n  fontSize: '1.25rem',\n  alignSelf: 'center',\n  marginRight: '0.5rem',\n  svg: {\n    width: '1.25rem',\n    height: '1.25rem'\n  }\n});"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/Banner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AACnD,iDAAiD;AACjD,OAAO,EAAc,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;QAC7B,oBAAC,KAAK,kBAAY,QAAQ,EAAC,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;YAC1D,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACd,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,KAAI,CAC5B,oBAAC,IAAI,kBAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,SAAS,0CAAE,QAAQ,IAAM,KAAK,CAAC,SAAS,EAAI,CACnG;oBACD,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,oBAAC,aAAa,IACZ,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACtC,OAAO,EAAE,KAAK,CAAC,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IACZ,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EACtC,OAAO,EAAE,KAAK,CAAC,aAAa,GAC5B,CACH,CACK,CACF,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,WAAW,CAAC;IACrC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAC/C,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;CACrC,CAAC,CAAC;AAEL,MAAM,mBAAmB,GAAG,WAAW,CAAC;IACtC,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;IACnB,WAAW,EAAE,QAAQ;IACrB,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n// eslint-disable-next-line no-restricted-imports\nimport { IIconProps, Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Props for {@link Banner}.\n *\n * @private\n */\nexport interface BannerProps {\n  /**\n   * Banner strings.\n   */\n  strings?: BannerStrings;\n\n  /**\n   * Banner icon.\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Callback called when the button inside banner is clicked.\n   */\n  onClickButton?: () => void;\n\n  /**\n   * If true, the primary button will be styled as a primary button. Default is false.\n   */\n  primaryButton?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Banner}.\n *\n * @private\n */\nexport interface BannerStrings {\n  /**\n   * Banner title.\n   */\n  title: string;\n  /**\n   * Banner primary button label.\n   */\n  primaryButtonLabel: string;\n}\n\n/**\n * A component to show a banner in the UI.\n *\n * @private\n */\nexport const Banner = (props: BannerProps): JSX.Element => {\n  const strings = props.strings;\n  const theme = useTheme();\n\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack data-ui-id=\"banner\" className={containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            {props.iconProps?.iconName && (\n              <Icon className={bannerIconClassName} iconName={props.iconProps?.iconName} {...props.iconProps} />\n            )}\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n          {props.primaryButton ? (\n            <PrimaryButton\n              text={strings?.primaryButtonLabel}\n              ariaLabel={strings?.primaryButtonLabel}\n              onClick={props.onClickButton}\n            />\n          ) : (\n            <DefaultButton\n              text={strings?.primaryButtonLabel}\n              ariaLabel={strings?.primaryButtonLabel}\n              onClick={props.onClickButton}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst titleTextClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(16),\n  alignSelf: 'center'\n});\n\nconst containerStyles = (theme: Theme): string =>\n  mergeStyles({\n    boxShadow: theme.effects.elevation8,\n    width: '20rem',\n    padding: '0.75rem',\n    borderRadius: '0.25rem',\n    position: 'relative',\n    backgroundColor: theme.palette.white\n  });\n\nconst bannerIconClassName = mergeStyles({\n  fontSize: '1.25rem',\n  alignSelf: 'center',\n  marginRight: '0.5rem',\n  svg: {\n    width: '1.25rem',\n    height: '1.25rem'\n  }\n});\n"]}

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

@@ -1,11 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(breakout-rooms) */
 import { Stack } from '@fluentui/react';
+/* @conditional-compile-remove(breakout-rooms) */
 import React from 'react';
+/* @conditional-compile-remove(breakout-rooms) */
 import { bannerNotificationStyles } from '../styles/CallPage.styles';
+/* @conditional-compile-remove(breakout-rooms) */
 import { useSelector } from '../hooks/useSelector';
+/* @conditional-compile-remove(breakout-rooms) */
 import { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../selectors/baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */
 import { Banner } from './Banner';
+/* @conditional-compile-remove(breakout-rooms) */
 /**
  * @private
  */
@@ -14,22 +21,20 @@ export const BreakoutRoomsBanner = (props) => {
     const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
     const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
     if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && assignedBreakoutRoom.call) {
-        return React.createElement(Stack, { styles: bannerNotificationStyles },
+        return (React.createElement(Stack, { styles: bannerNotificationStyles },
             React.createElement(Banner, { strings: {
-                    title: assignedBreakoutRoom.displayName ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName) : locale.strings.call.joinBreakoutRoomBannerTitle,
+                    title: assignedBreakoutRoom.displayName
+                        ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName)
+                        : locale.strings.call.joinBreakoutRoomBannerTitle,
                     primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel
-                }, onClickButton: () => assignedBreakoutRoom.join(), iconProps: {
-                    iconName: 'NotificationBarBreakoutRoomPromptJoin'
-                }, primaryButton: true }));
+                }, onClickButton: () => assignedBreakoutRoom.join(), iconProps: { iconName: 'NotificationBarBreakoutRoomPromptJoin' }, primaryButton: true })));
     }
     else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {
-        return React.createElement(Stack, { styles: bannerNotificationStyles },
+        return (React.createElement(Stack, { styles: bannerNotificationStyles },
             React.createElement(Banner, { strings: {
                     title: locale.strings.call.returnFromBreakoutRoomBannerTitle,
                     primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel
-                }, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: {
-                    iconName: 'NotificationBarBreakoutRoomClosingSoon'
-                } }));
+                }, onClickButton: () => adapter.returnFromBreakoutRoom(), iconProps: { iconName: 'NotificationBarBreakoutRoomClosingSoon' } })));
     }
     return undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BreakoutRoomsBanner.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAGnC,EAA2B,EAAE;IAC5B,MAAM,EACJ,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM,IAAI,oBAAoB,CAAC,IAAI,EAAE,CAAC;QAC/F,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE;oBACjB,KAAK,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,YAAY,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;oBACnM,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;iBAC1E,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE;oBAC9D,QAAQ,EAAE,uCAAuC;iBAClD,EAAE,aAAa,SAAG,CACX,CAAC;IACb,CAAC;SAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,0BAA0B,KAAK,IAAI,EAAE,CAAC;QAC5F,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE;oBACjB,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;oBAC5D,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uCAAuC;iBAChF,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,SAAS,EAAE;oBACnE,QAAQ,EAAE,wCAAwC;iBACnD,GAAI,CACG,CAAC;IACb,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { CommonCallAdapter } from '../adapter';\nimport { CompositeLocale } from '../../localization';\nimport { useSelector } from '../hooks/useSelector';\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../selectors/baseSelectors';\nimport { Banner } from './Banner';\n/**\n * @private\n */\nexport const BreakoutRoomsBanner = (props: {\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | undefined => {\n  const {\n    locale,\n    adapter\n  } = props;\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && assignedBreakoutRoom.call) {\n    return <Stack styles={bannerNotificationStyles}>\n        <Banner strings={{\n        title: assignedBreakoutRoom.displayName ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName) : locale.strings.call.joinBreakoutRoomBannerTitle,\n        primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel\n      }} onClickButton={() => assignedBreakoutRoom.join()} iconProps={{\n        iconName: 'NotificationBarBreakoutRoomPromptJoin'\n      }} primaryButton />\n      </Stack>;\n  } else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {\n    return <Stack styles={bannerNotificationStyles}>\n        <Banner strings={{\n        title: locale.strings.call.returnFromBreakoutRoomBannerTitle,\n        primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel\n      }} onClickButton={() => adapter.returnFromBreakoutRoom()} iconProps={{\n        iconName: 'NotificationBarBreakoutRoomClosingSoon'\n      }} />\n      </Stack>;\n  }\n  return undefined;\n};"]}
+{"version":3,"file":"BreakoutRoomsBanner.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAKrE,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC9F,iDAAiD;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,iDAAiD;AACjD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAGnC,EAA2B,EAAE;IAC5B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAElE,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,KAAK,KAAK,MAAM,IAAI,oBAAoB,CAAC,IAAI,EAAE,CAAC;QAC/F,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,MAAM,IACL,OAAO,EAAE;oBACP,KAAK,EAAE,oBAAoB,CAAC,WAAW;wBACrC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,YAAY,EAAE,oBAAoB,CAAC,WAAW,CAAC;wBACzG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;oBACnD,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;iBAC1E,EACD,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAChD,SAAS,EAAE,EAAE,QAAQ,EAAE,uCAAuC,EAAE,EAChE,aAAa,SACb,CACI,CACT,CAAC;IACJ,CAAC;SAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,0BAA0B,KAAK,IAAI,EAAE,CAAC;QAC5F,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,MAAM,IACL,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iCAAiC;oBAC5D,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uCAAuC;iBAChF,EACD,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,sBAAsB,EAAE,EACrD,SAAS,EAAE,EAAE,QAAQ,EAAE,wCAAwC,EAAE,GACjE,CACI,CACT,CAAC;IACJ,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport React from 'react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { CommonCallAdapter } from '../adapter';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { CompositeLocale } from '../../localization';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { useSelector } from '../hooks/useSelector';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Banner } from './Banner';\n\n/* @conditional-compile-remove(breakout-rooms) */\n/**\n * @private\n */\nexport const BreakoutRoomsBanner = (props: {\n  locale: CompositeLocale;\n  adapter: CommonCallAdapter;\n}): JSX.Element | undefined => {\n  const { locale, adapter } = props;\n\n  const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n  const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n\n  if (assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' && assignedBreakoutRoom.call) {\n    return (\n      <Stack styles={bannerNotificationStyles}>\n        <Banner\n          strings={{\n            title: assignedBreakoutRoom.displayName\n              ? locale.strings.call.joinBreakoutRoomBannerTitle.replace('{roomName}', assignedBreakoutRoom.displayName)\n              : locale.strings.call.joinBreakoutRoomBannerTitle,\n            primaryButtonLabel: locale.strings.call.joinBreakoutRoomBannerButtonLabel\n          }}\n          onClickButton={() => assignedBreakoutRoom.join()}\n          iconProps={{ iconName: 'NotificationBarBreakoutRoomPromptJoin' }}\n          primaryButton\n        />\n      </Stack>\n    );\n  } else if (breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting !== true) {\n    return (\n      <Stack styles={bannerNotificationStyles}>\n        <Banner\n          strings={{\n            title: locale.strings.call.returnFromBreakoutRoomBannerTitle,\n            primaryButtonLabel: locale.strings.call.returnFromBreakoutRoomBannerButtonLabel\n          }}\n          onClickButton={() => adapter.returnFromBreakoutRoom()}\n          iconProps={{ iconName: 'NotificationBarBreakoutRoomClosingSoon' }}\n        />\n      </Stack>\n    );\n  }\n  return undefined;\n};\n"]}

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

@@ -19,7 +19,7 @@ import { notificationStackStyles } from '../styles/CallPage.styles';
 import { useSelector } from '../hooks/useSelector';
 import { callStatusSelector } from '../selectors/callStatusSelector';
 import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
-import { getIsTeamsMeeting, getRemoteParticipants } from '../selectors/baseSelectors';
+import { getCapabilites, getIsTeamsMeeting, getReactionResources, getRemoteParticipants, getRole, getVideoEffectsDependency } from '../selectors/baseSelectors';
 import { getPage } from '../selectors/baseSelectors';
 import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
@@ -40,9 +40,13 @@ import { useLocale } from '../../localization';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt, useStopAllSpotlightCallbackWithPrompt } from '../utils/spotlightUtils';
 import { getCaptionsKind, getIsTeamsCall } from '../selectors/baseSelectors';
+/* @conditional-compile-remove(soft-mute) */
 import { useHandlers } from '../hooks/useHandlers';
+/* @conditional-compile-remove(soft-mute) */
 import { MoreDrawer } from '../../common/Drawer/MoreDrawer';
+/* @conditional-compile-remove(breakout-rooms) */
 import { useCompositeStringsForNotificationStackStrings } from '../hooks/useCompositeStringsForNotificationStack';
+/* @conditional-compile-remove(breakout-rooms) */
 import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
 /**
  * @private
@@ -53,7 +57,7 @@ export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @private
  */
 export const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -67,6 +71,7 @@ export const CallArrangement = (props) => {
     const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);
     const { updateSidePaneRenderer } = props;
     const isInLocalHold = useSelector(getPage) === 'hold';
+    const capabilities = useSelector(getCapabilites);
     const adapter = useAdapter();
     const [participantActioned, setParticipantActioned] = useState();
     const remoteParticipants = useSelector(getRemoteParticipants);
@@ -95,13 +100,24 @@ export const CallArrangement = (props) => {
             peopleButtonRef,
             setParticipantActioned
         });
-    }, [updateSidePaneRenderer, props.callControlProps.callInvitationURL, (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, props.onFetchAvatarPersonaData, props.mobileView, peopleButtonRef, setParticipantActioned]);
+    }, [
+        updateSidePaneRenderer,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        props.onFetchAvatarPersonaData,
+        props.mobileView,
+        peopleButtonRef,
+        setParticipantActioned
+    ]);
     const locale = useLocale();
-    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
+    const role = useSelector(getRole);
     const videoGalleryProps = usePropsFor(VideoGallery);
+    /* @conditional-compile-remove(soft-mute) */
     const muteAllHandlers = useHandlers(MoreDrawer);
     const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
-    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
     const [showTeamsMeetingConferenceModal, setShowTeamsMeetingConferenceModal] = useState(false);
     const toggleTeamsMeetingConferenceModal = useCallback(() => {
         setShowTeamsMeetingConferenceModal(!showTeamsMeetingConferenceModal);
@@ -130,7 +146,7 @@ export const CallArrangement = (props) => {
     }, [pinnedParticipants, setPinnedParticipants]);
     const onUnpinParticipant = useCallback((userId) => {
         if (pinnedParticipants && setPinnedParticipants) {
-            setPinnedParticipants(pinnedParticipants.filter(participantId => participantId !== userId));
+            setPinnedParticipants(pinnedParticipants.filter((participantId) => participantId !== userId));
         }
     }, [setPinnedParticipants, pinnedParticipants]);
     const pinPeoplePaneProps = useMemo(() => {
@@ -143,16 +159,25 @@ export const CallArrangement = (props) => {
     }, [onPinParticipant, onUnpinParticipant, pinnedParticipants]);
     const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
-    const canRemoveSpotlight = (_d = (_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.capabilitiesFeature) === null || _d === void 0 ? void 0 : _d.capabilities.removeParticipantsSpotlight.isPresent;
-    const stopAllSpotlight = useMemo(() => canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined, [canRemoveSpotlight, adapter]);
+    const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
+    const stopAllSpotlight = useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
     const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
     const onMuteParticipantPeoplePaneProps = useMemo(() => {
+        var _a, _b;
+        /* @conditional-compile-remove(soft-mute) */
         return {
-            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '') ? onMuteParticipant : undefined,
-            onMuteAllRemoteParticipants: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '') ? muteAllHandlers.onMuteAllRemoteParticipants : undefined
+            onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
+            onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown'
+                ? muteAllHandlers.onMuteAllRemoteParticipants
+                : undefined
         };
         return {};
-    }, [onMuteParticipant, role, muteAllHandlers.onMuteAllRemoteParticipants]);
+    }, [
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
+        /* @conditional-compile-remove(soft-mute) */ role,
+        /* @conditional-compile-remove(soft-mute) */ capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers,
+        /* @conditional-compile-remove(soft-mute) */ muteAllHandlers.onMuteAllRemoteParticipants
+    ]);
     const spotlightPeoplePaneProps = useMemo(() => {
         return {
             spotlightedParticipantUserIds: spotlightedParticipants,
@@ -164,7 +189,16 @@ export const CallArrangement = (props) => {
             maxParticipantsToSpotlight
         };
         return {};
-    }, [hideSpotlightButtons, maxParticipantsToSpotlight, onStartLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, stopAllSpotlightWithPrompt, spotlightedParticipants]);
+    }, [
+        hideSpotlightButtons,
+        maxParticipantsToSpotlight,
+        onStartLocalSpotlightWithPrompt,
+        onStartRemoteSpotlightWithPrompt,
+        onStopLocalSpotlightWithPrompt,
+        onStopRemoteSpotlightWithPrompt,
+        stopAllSpotlightWithPrompt,
+        spotlightedParticipants
+    ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps));
     const togglePeoplePane = useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -190,9 +224,7 @@ export const CallArrangement = (props) => {
             setRenderGallery(true);
         }
     }, [props.mobileView, isSidePaneOpen]);
-    const modalStrings = {
-        dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel
-    };
+    const modalStrings = { dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel };
     const isMobileWithActivePane = props.mobileView && isSidePaneOpen;
     const callCompositeContainerCSS = useMemo(() => {
         return {
@@ -203,8 +235,8 @@ export const CallArrangement = (props) => {
             position: 'relative'
         };
     }, [isMobileWithActivePane, props.mobileView]);
-    const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
-    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
+    const onResolveVideoEffectDependency = useSelector(getVideoEffectsDependency);
+    const { openVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
     const [showDrawer, setShowDrawer] = useState(false);
     const onMoreButtonClicked = useCallback(() => {
         setShowDrawer(true);
@@ -217,18 +249,20 @@ export const CallArrangement = (props) => {
         togglePeoplePane();
     }, [togglePeoplePane]);
     const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
-    let filteredLatestErrorNotifications = props.showErrorNotifications ? props.latestErrors : [];
+    let filteredLatestErrorNotifications = props.showErrorNotifications
+        ? props.latestErrors
+        : [];
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (role === 'Consumer' && (props.errorBarProps || props.showErrorNotifications)) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     if (props.doNotShowCameraAccessNotifications) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
-        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'unableToStartVideoEffect');
+        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     const isTeamsCaptions = useSelector(getCaptionsKind) === 'TeamsCaptions';
     const isTeamsMeeting = useSelector(getIsTeamsMeeting);
@@ -240,56 +274,71 @@ export const CallArrangement = (props) => {
     const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
     const galleryContainerStyles = useMemo(() => {
         var _a;
-        return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? {
-            root: {
-                postion: 'absolute'
-            }
-        } : {}));
-    }, [(_e = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _e === void 0 ? void 0 : _e.height]);
+        return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
+    }, [(_b = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _b === void 0 ? void 0 : _b.height]);
     if (isTeamsMeeting) {
-        filteredLatestErrorNotifications.filter(notification => notification.type === 'teamsMeetingCallNetworkQualityLow').forEach(notification => {
-            notification.onClickPrimaryButton = props.mobileView ? toggleMeetingPhoneInfoPane : toggleTeamsMeetingConferenceModal;
+        filteredLatestErrorNotifications
+            .filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
+            .forEach((notification) => {
+            notification.onClickPrimaryButton = props.mobileView
+                ? toggleMeetingPhoneInfoPane
+                : toggleTeamsMeetingConferenceModal;
         });
     }
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     // Filter out shareScreen capability notifications if on mobile
-    const filteredCapabilitesChangedNotifications = props.mobileView ? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications.filter(notification => notification.capabilityName !== 'shareScreen') : (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === void 0 ? void 0 : _g.capabilitiesChangedNotifications;
+    const filteredCapabilitesChangedNotifications = props.mobileView
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
     const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
-    let latestNotifications = props.latestNotifications; // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
+    let latestNotifications = props.latestNotifications;
+    /* @conditional-compile-remove(breakout-rooms) */
+    // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
     // replace it with a non-dismissible banner
-    latestNotifications = props.mobileView ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter(notification => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin') : latestNotifications;
-    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
+    latestNotifications = props.mobileView
+        ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter((notification) => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin')
+        : latestNotifications;
+    const reactionResources = useSelector(getReactionResources);
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
         React.createElement(Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && !isMobileWithActivePane && React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) ? React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar })) : React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))),
-                ((_k = props.callControlProps) === null || _k === void 0 ? void 0 : _k.options) !== false && showDrawer && React.createElement(Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: adapter.getState().reactions, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked })),
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
+                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
                 React.createElement(Stack, { horizontal: true, grow: true },
                     React.createElement(Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true },
                             React.createElement(Stack, { verticalFill: true, styles: galleryContainerStyles },
                                 React.createElement(Stack.Item, { styles: notificationsContainerStyles },
+                                    /* @conditional-compile-remove(breakout-rooms) */
                                     props.mobileView && React.createElement(BreakoutRoomsBanner, { locale: locale, adapter: adapter }),
-                                    props.showErrorNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
-                                        React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications })),
-                                    latestNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
-                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, strings: notificationStackStrings })),
-                                    props.capabilitiesChangedNotificationBarProps && props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && React.createElement(Stack, { styles: bannerNotificationStyles },
-                                        React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
+                                    props.showErrorNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
+                                        React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications }))),
+                                    latestNotifications && (React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
+                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, 
+                                            /* @conditional-compile-remove(breakout-rooms) */
+                                            strings: notificationStackStrings }))),
+                                    props.capabilitiesChangedNotificationBarProps &&
+                                        props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React.createElement(Stack, { styles: bannerNotificationStyles },
+                                        React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] }))))),
                                 renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
-                                !isInLocalHold && React.createElement(CaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions })))),
-                    React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options) ? undefined : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' && isDisabled((_l = props.callControlProps.options) === null || _l === void 0 ? void 0 : _l.participantsButton), onChatButtonClicked: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.onClick, disableChatButton: (_o = props.mobileChatTabHeader) === null || _o === void 0 ? void 0 : _o.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL }),
-                    props.mobileView && React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
+                                !isInLocalHold && (React.createElement(CaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions }))))),
+                    React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
+                            ? undefined
+                            : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
+                            isDisabled((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
+                    props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
                                 props.onCloseChatPane();
                             }
-                        } }),
-                    drawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles() },
-                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))));
+                        } })),
+                    drawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles() },
+                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
 };
 const isLegacyCallControlEnabled = (options) => {
     return !!options && options !== true && (options === null || options === void 0 ? void 0 : options.legacyControlBarExperience) === true;