@azure/communication-react 1.6.0 → 1.6.1-alpha-202306230016

package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.styles.js

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const themeddialpadModalStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+export const themedDialpadStyle = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '0 0.5rem',
+            textAlign: isMobile ? 'center' : 'left',
+            ':active': {
+                padding: '0 0.5rem'
+            }
+        }
+    },
+    deleteIcon: {
+        root: {
+            backgroundColor: theme.palette.white
+        }
+    },
+    digit: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+/**
+ * @private
+ */
+export const themedCallButtonStyle = (theme) => ({
+    root: {
+        fontWeight: theme.fonts.medium.fontWeight,
+        fontSize: theme.fonts.medium.fontSize,
+        width: '100%',
+        height: '2.5rem',
+        borderRadius: 3,
+        padding: '0.625rem'
+    },
+    textContainer: {
+        display: 'contents'
+    }
+});
+//# sourceMappingURL=CallingDialpad.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACrC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  deleteIcon: {\n    root: {\n      backgroundColor: theme.palette.white\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBanner.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/** @private */
+export declare const CaptionsBanner: (props: {
+    isMobile: boolean;
+}) => JSX.Element;
+//# sourceMappingURL=CaptionsBanner.d.ts.map

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

@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useState } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _CaptionsBanner } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(close-captions) */
+import { CaptionsSettingsModal } from './CaptionsSettingsModal';
+/* @conditional-compile-remove(close-captions) */
+import { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { _captionsBannerSelector } from "../../../../calling-component-bindings/src";
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+const mobileViewBannerWidth = '90%';
+/* @conditional-compile-remove(close-captions) */
+const desktopViewBannerWidth = '50%';
+/** @private */
+export const CaptionsBanner = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers(_CaptionsBanner);
+    /* @conditional-compile-remove(close-captions) */
+    const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState(false);
+    /* @conditional-compile-remove(close-captions) */
+    const onClickCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(true);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const onDismissCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(false);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const containerClassName = mergeStyles({
+        position: 'relative'
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const floatingChildClassName = mergeStyles({
+        position: 'absolute',
+        right: 0,
+        top: 0
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerStrings = {
+        captionsBannerSpinnerText: strings.captionsBannerSpinnerText
+    };
+    return (React.createElement(React.Fragment, null,
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
+        /* @conditional-compile-remove(close-captions) */
+        React.createElement("div", { className: containerClassName },
+            React.createElement(Stack, { horizontalAlign: "center" },
+                React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
+                    React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+            !props.isMobile && captionsBannerProps.isCaptionsOn && (React.createElement("div", { className: floatingChildClassName },
+                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
+};
+//# sourceMappingURL=CaptionsBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsBanner, _CaptionsBannerStrings } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\n\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(close-captions) */\nconst mobileViewBannerWidth = '90%';\n/* @conditional-compile-remove(close-captions) */\nconst desktopViewBannerWidth = '50%';\n\n/** @private */\nexport const CaptionsBanner = (props: { isMobile: boolean }): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsBanner);\n  /* @conditional-compile-remove(close-captions) */\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(close-captions) */\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const containerClassName = mergeStyles({\n    position: 'relative'\n  });\n  /* @conditional-compile-remove(close-captions) */\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  return (\n    <>\n      {\n        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (\n          <CaptionsSettingsModal\n            showCaptionsSettingsModal={isCaptionsSettingsOpen}\n            onDismissCaptionsSettings={onDismissCaptionsSettings}\n          />\n        )\n      }\n      {\n        /* @conditional-compile-remove(close-captions) */\n        <div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <_CaptionsBanner {...captionsBannerProps} {...handlers} strings={captionsBannerStrings} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && (\n            <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n            </div>\n          )}\n        </div>\n      }\n    </>\n  );\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBannerMoreButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ControlBarButtonProps } from "../../../../react-components/src";
+/** @private */
+export interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {
+    onCaptionsSettingsClick?: () => void;
+}
+/**
+ *
+ * @private
+ */
+export declare const CaptionsBannerMoreButton: (props: CaptionsBannerMoreButtonProps) => JSX.Element;
+//# sourceMappingURL=CaptionsBannerMoreButton.d.ts.map

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

@@ -0,0 +1,104 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useCallback } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _StartCaptionsButton } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { useMemo } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+import { MoreButton } from './MoreButton';
+/* @conditional-compile-remove(close-captions) */
+import { _startCaptionsButtonSelector } from "../../../../calling-component-bindings/src";
+/* @conditional-compile-remove(close-captions) */
+import { _preventDismissOnEvent } from "../../../../acs-ui-common/src";
+/**
+ *
+ * @private
+ */
+export const CaptionsBannerMoreButton = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const localeStrings = useLocale();
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonStrings = useMemo(() => ({
+        label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip
+    }), [localeStrings]);
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonContextualMenuItems = [];
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield startCaptionsButtonHandlers.onStartCaptions({
+            spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
+        });
+    }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(close-captions) */
+    moreButtonContextualMenuItems.push({
+        key: 'ToggleCaptionsKey',
+        text: startCaptionsButtonProps.checked
+            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        onClick: () => {
+            startCaptionsButtonProps.checked
+                ? startCaptionsButtonHandlers.onStopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+        },
+        iconProps: {
+            iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+            styles: { root: { lineHeight: 0 } }
+        },
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        }
+    });
+    /* @conditional-compile-remove(close-captions) */
+    if (props.onCaptionsSettingsClick) {
+        moreButtonContextualMenuItems.push({
+            key: 'openCaptionsSettingsKey',
+            id: 'common-call-composite-captions-settings-button',
+            text: localeStrings.strings.call.captionsSettingsLabel,
+            onClick: props.onCaptionsSettingsClick,
+            iconProps: {
+                iconName: 'CaptionsSettingsIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: !startCaptionsButtonProps.checked
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    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
+            }
+        } })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CaptionsBannerMoreButton.js.map

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

@@ -0,0 +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.\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { IContextualMenuItem } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { _StartCaptionsButton } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(close-captions) */\nimport { MoreButton } from './MoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(close-captions) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const localeStrings = useLocale();\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  /* @conditional-compile-remove(close-captions) */\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  /* @conditional-compile-remove(close-captions) */\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n\n  /* @conditional-compile-remove(close-captions) */\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked\n      ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent\n      : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked\n        ? startCaptionsButtonHandlers.onStopCaptions()\n        : startCaptionsButtonProps.currentSpokenLanguage !== ''\n        ? startCaptions()\n        : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: { root: { lineHeight: 0 } }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n  /* @conditional-compile-remove(close-captions) */\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  /* @conditional-compile-remove(close-captions) */\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  return <></>;\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsSettingsModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/** @private */
+export declare const CaptionsSettingsModal: (props: {
+    showCaptionsSettingsModal: boolean;
+    onDismissCaptionsSettings: () => void;
+}) => JSX.Element;
+//# sourceMappingURL=CaptionsSettingsModal.d.ts.map

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

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _CaptionsSettingsModal } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+import { _changeSpokenLanguageSelector } from "../../../../calling-component-bindings/src";
+/** @private */
+export const CaptionsSettingsModal = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers(_CaptionsSettingsModal);
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const modalStrings = {
+        captionsSettingsModalTitle: strings.captionsSettingsModalTitle,
+        captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,
+        captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,
+        captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,
+        captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,
+        captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,
+        captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const captionsAvailableLanguageStrings = strings.captionsAvailableLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    return (React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, captionsAvailableLanguageStrings: captionsAvailableLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CaptionsSettingsModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,sBAAsB,EAGvB,yCAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,iDAAiD;AACjD,OAAO,EAAE,6BAA6B,EAAE,mDAA6C;AAErF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAGrC,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,iDAAiD;IACjD,MAAM,YAAY,GAAkC;QAClD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,6BAA6B,EAAE,OAAO,CAAC,6BAA6B;QACpE,gCAAgC,EAAE,OAAO,CAAC,gCAAgC;QAC1E,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IACF,iDAAiD;IACjD,MAAM,gCAAgC,GACpC,OAAO,CAAC,gCAAgC,CAAC;IAE3C,iDAAiD;IACjD,OAAO,CACL,oBAAC,sBAAsB,oBACjB,0BAA0B,EAC1B,QAAQ,IACZ,OAAO,EAAE,YAAY,EACrB,gCAAgC,EAAE,gCAAgC,EAClE,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,IAC1D,CACH,CAAC;IACF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport {\n  _CaptionsSettingsModal,\n  _CaptionsSettingsModalStrings,\n  CaptionsAvailableLanguageStrings\n} from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(close-captions) */\nimport { _changeSpokenLanguageSelector } from '@internal/calling-component-bindings';\n\n/** @private */\nexport const CaptionsSettingsModal = (props: {\n  /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal: boolean;\n  /* @conditional-compile-remove(close-captions) */ onDismissCaptionsSettings: () => void;\n}): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsSettingsModal);\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n  /* @conditional-compile-remove(close-captions) */\n  const modalStrings: _CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,\n    captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const captionsAvailableLanguageStrings: CaptionsAvailableLanguageStrings | undefined =\n    strings.captionsAvailableLanguageStrings;\n\n  /* @conditional-compile-remove(close-captions) */\n  return (\n    <_CaptionsSettingsModal\n      {...CaptionsSettingsModalProps}\n      {...handlers}\n      strings={modalStrings}\n      captionsAvailableLanguageStrings={captionsAvailableLanguageStrings}\n      showModal={props.showCaptionsSettingsModal}\n      onDismissCaptionsSettings={props.onDismissCaptionsSettings}\n    />\n  );\n  return <></>;\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}

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

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

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

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

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

@@ -17,6 +17,9 @@ export interface CommonCallControlBarProps {
     disableButtonsForLobbyPage: boolean;
     callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
     disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
+    isCaptionsSupported?: boolean;
 }
 /**
  * @private

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

@@ -8,14 +8,20 @@ import { controlBarContainerStyles } from '../../CallComposite/styles/CallContro
 import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';
 import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
 import { ControlBar } from "../../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _usePermissions } from "../../../../../react-components/src";
 import { Microphone } from '../../CallComposite/components/buttons/Microphone';
 import { Camera } from '../../CallComposite/components/buttons/Camera';
 import { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';
 import { EndCall } from '../../CallComposite/components/buttons/EndCall';
 import { MoreButton } from '../MoreButton';
 import { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';
+/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { DesktopMoreButton } from './DesktopMoreButton';
 import { isDisabled } from '../../CallComposite/utils';
 import { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';
+/* @conditional-compile-remove(close-captions) */
+import { CaptionsSettingsModal } from '../CaptionsSettingsModal';
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
     if (commonCallControlOptions === false) {
         return false;
@@ -49,6 +55,8 @@ export const CommonCallControlBar = (props) => {
     const [isOutOfSpace, setIsOutOfSpace] = useState(false);
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
+    /* @conditional-compile-remove(close-captions) */
+    const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
     const handleResize = useCallback(() => {
         setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
         setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
@@ -75,6 +83,14 @@ export const CommonCallControlBar = (props) => {
     useEffect(() => {
         setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);
     }, [totalButtonsWidth, controlBarContainerWidth]);
+    /* @conditional-compile-remove(close-captions) */
+    const openCaptionsSettingsModal = useCallback(() => {
+        setShowCaptionsSettingsModal(true);
+    }, []);
+    /* @conditional-compile-remove(close-captions) */
+    const onDismissCaptionsSettings = useCallback(() => {
+        setShowCaptionsSettingsModal(false);
+    }, []);
     const peopleButtonStrings = useMemo(() => ({
         label: callWithChatStrings.peopleButtonLabel,
         tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,
@@ -93,29 +109,34 @@ 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%'
-    } : {}, [props.mobileView, isOutOfSpace]);
+    const controlBarDesktopContainerStyles = useMemo(() => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}), [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]);
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
         return React.createElement(React.Fragment, null);
     }
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
     const sideButtonsPresent = isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;
     let screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    /* @conditional-compile-remove(rooms) */
+    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
     let microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    /* @conditional-compile-remove(rooms) */
+    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
     let cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
-    return React.createElement("div", { ref: controlBarSizeRef },
-        React.createElement(CallAdapterProvider, { adapter: props.callAdapter }),
+    /* @conditional-compile-remove(rooms) */
+    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
+    return (React.createElement("div", { ref: controlBarSizeRef },
+        React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
+        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings }))),
         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 },
@@ -124,21 +145,42 @@ export const CommonCallControlBar = (props) => {
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                                    microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView }),
-                                    cameraButtonIsEnabled && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView }),
-                                    screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles }), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
-                                    _a.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' });
+                                    microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
+                                    cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), 
+                                        /* @conditional-compile-remove(video-background-effects) */
+                                        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
+                                    screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                                    _a.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' }));
                                     }),
-                                    props.mobileView && React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage }),
+                                    props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) &&
+                                        !props.mobileView && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+                                        /* @conditional-compile-remove(control-bar-button-injection) */
+                                        callControls: props.callControls, 
+                                        /* @conditional-compile-remove(close-captions) */
+                                        isCaptionsSupported: props.isCaptionsSupported, 
+                                        /* @conditional-compile-remove(close-captions) */
+                                        onCaptionsSettingsClick: openCaptionsSettingsModal })),
                                     React.createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
-            !props.mobileView && sideButtonsPresent && React.createElement(Stack.Item, null,
+            !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 === null || peopleButtonStrings === void 0 ? void 0 : 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 }), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
+                        isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : 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 })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
                         _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                            return React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' });
-                        }))))));
+                            return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                        }))))))));
 };
 const desktopButtonContainerStyle = {
     padding: '0.75rem',
@@ -211,9 +253,7 @@ const getDesktopScreenShareButtonStyles = (theme) => {
         border: 'none',
         background: theme.palette.themePrimary,
         color: theme.palette.white,
-        '* > svg': {
-            fill: theme.palette.white
-        },
+        '* > svg': { fill: theme.palette.white },
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black