@azure/communication-react 1.5.1-alpha-202304150013 → 1.5.1-alpha-202304172318

package/dist/dist-esm/react-composites/src/composites/common/Drawer/SpokenLanguageDrawer.js

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useMemo, useCallback } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useTheme } from "../../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { _CaptionsSettingsModal } from "../../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { _changeSpokenLanguageSelector } from "../../../../../calling-component-bindings/src";
+/* @conditional-compile-remove(close-captions) */
+import { _DrawerMenu as DrawerMenu } 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 { spokenLanguageDrawerStyles } from './SpokenLanguageDrawer.styles';
+/** @private */
+export const SpokenLanguageDrawer = (props) => {
+    var _a;
+    /* @conditional-compile-remove(close-captions) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(close-captions) */
+    const changeSpokenLanguageProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const changeSpokenLanguageHandlers = useHandlers(_CaptionsSettingsModal);
+    /* @conditional-compile-remove(close-captions) */
+    const onSpokenLanguageDrawerItemClick = useCallback((languageCode) => {
+        props.setCurrentSpokenLanguage(languageCode);
+    }, [props]);
+    /* @conditional-compile-remove(close-captions) */
+    const spokenLanguageDrawerItems = useMemo(() => {
+        var _a;
+        return (_a = changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages) === null || _a === void 0 ? void 0 : _a.map((languageCode) => ({
+            itemKey: languageCode,
+            text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
+            onItemClick: () => onSpokenLanguageDrawerItemClick(languageCode),
+            secondaryIconProps: props.currentSpokenLanguage === languageCode ? { iconName: 'Accept' } : undefined
+        }));
+    }, [
+        changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages,
+        props.currentSpokenLanguage,
+        props.supportedLanguageStrings,
+        onSpokenLanguageDrawerItemClick
+    ]);
+    /* @conditional-compile-remove(close-captions) */
+    return (React.createElement(DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.spokenLanguageMenuTitle, items: spokenLanguageDrawerItems !== null && spokenLanguageDrawerItems !== void 0 ? spokenLanguageDrawerItems : [], onLightDismiss: () => {
+            changeSpokenLanguageHandlers.onSetSpokenLanguage(props.currentSpokenLanguage);
+            props.onLightDismiss();
+        }, styles: spokenLanguageDrawerStyles(theme) }));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=SpokenLanguageDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpokenLanguageDrawer.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/Drawer/SpokenLanguageDrawer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7C,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,iDAAiD;AACjD,OAAO,EAAE,sBAAsB,EAAoC,4CAAmC;AACtG,iDAAiD;AACjD,OAAO,EAAE,6BAA6B,EAAE,sDAA6C;AACrF,iDAAiD;AACjD,OAAO,EACL,WAAW,IAAI,UAAU,EAG1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAClF,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,iDAAiD;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAY3E,eAAe;AACf,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAMpC,EAAe,EAAE;;IAChB,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;IACpF,iDAAiD;IACjD,MAAM,4BAA4B,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAEzE,iDAAiD;IACjD,MAAM,+BAA+B,GAAG,WAAW,CACjD,CAAC,YAAoB,EAAE,EAAE;QACvB,KAAK,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,iDAAiD;IACjD,MAAM,yBAAyB,GAA0B,OAAO,CAAC,GAAG,EAAE;;QACpE,OAAO,MAAA,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,wBAAwB,0CAAE,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACjF,OAAO,EAAE,YAAY;YACrB,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;YAClG,WAAW,EAAE,GAAG,EAAE,CAAC,+BAA+B,CAAC,YAAY,CAAC;YAChE,kBAAkB,EAAE,KAAK,CAAC,qBAAqB,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS;SACtG,CAAC,CAAC,CAAC;IACN,CAAC,EAAE;QACD,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,wBAAwB;QACnD,KAAK,CAAC,qBAAqB;QAC3B,KAAK,CAAC,wBAAwB;QAC9B,+BAA+B;KAChC,CAAC,CAAC;IAEH,iDAAiD;IACjD,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,uBAAuB,EAC/C,KAAK,EAAE,yBAAyB,aAAzB,yBAAyB,cAAzB,yBAAyB,GAAI,EAAE,EACtC,cAAc,EAAE,GAAG,EAAE;YACnB,4BAA4B,CAAC,mBAAmB,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;YAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,EACD,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,GACzC,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 { useMemo, useCallback } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useTheme } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsSettingsModal, CaptionsAvailableLanguageStrings } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _changeSpokenLanguageSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(close-captions) */\nimport {\n  _DrawerMenu as DrawerMenu,\n  _DrawerMenuItemProps as DrawerMenuItemProps,\n  _DrawerMenuStyles\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 { spokenLanguageDrawerStyles } from './SpokenLanguageDrawer.styles';\n\n/** @private */\nexport interface SpokenLanguageDrawerStrings {\n  /**\n   * Label for spokenLanguage drawerMenuItem\n   *\n   * @remarks Only displayed when in Teams call, disabled until captions is on\n   */\n  spokenLanguageMenuTitle: string;\n}\n\n/** @private */\nexport const SpokenLanguageDrawer = (props: {\n  /* @conditional-compile-remove(close-captions) */ setCurrentSpokenLanguage: (language: string) => void;\n  /* @conditional-compile-remove(close-captions) */ currentSpokenLanguage: string;\n  /* @conditional-compile-remove(close-captions) */ onLightDismiss: () => void;\n  /* @conditional-compile-remove(close-captions) */ strings?: SpokenLanguageDrawerStrings;\n  /* @conditional-compile-remove(close-captions) */ supportedLanguageStrings?: CaptionsAvailableLanguageStrings;\n}): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(close-captions) */\n  const changeSpokenLanguageProps = useAdaptedSelector(_changeSpokenLanguageSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const changeSpokenLanguageHandlers = useHandlers(_CaptionsSettingsModal);\n\n  /* @conditional-compile-remove(close-captions) */\n  const onSpokenLanguageDrawerItemClick = useCallback(\n    (languageCode: string) => {\n      props.setCurrentSpokenLanguage(languageCode);\n    },\n    [props]\n  );\n\n  /* @conditional-compile-remove(close-captions) */\n  const spokenLanguageDrawerItems: DrawerMenuItemProps[] = useMemo(() => {\n    return changeSpokenLanguageProps?.supportedSpokenLanguages?.map((languageCode) => ({\n      itemKey: languageCode,\n      text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,\n      onItemClick: () => onSpokenLanguageDrawerItemClick(languageCode),\n      secondaryIconProps: props.currentSpokenLanguage === languageCode ? { iconName: 'Accept' } : undefined\n    }));\n  }, [\n    changeSpokenLanguageProps?.supportedSpokenLanguages,\n    props.currentSpokenLanguage,\n    props.supportedLanguageStrings,\n    onSpokenLanguageDrawerItemClick\n  ]);\n\n  /* @conditional-compile-remove(close-captions) */\n  return (\n    <DrawerMenu\n      heading={props.strings?.spokenLanguageMenuTitle}\n      items={spokenLanguageDrawerItems ?? []}\n      onLightDismiss={() => {\n        changeSpokenLanguageHandlers.onSetSpokenLanguage(props.currentSpokenLanguage);\n        props.onLightDismiss();\n      }}\n      styles={spokenLanguageDrawerStyles(theme)}\n    />\n  );\n  return <></>;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/Drawer/SpokenLanguageDrawer.styles.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@fluentui/react';
+import { _DrawerMenuStyles } from "../../../../../react-components/src";
+/**
+ * @private
+ */
+export declare const spokenLanguageDrawerStyles: (theme: Theme) => _DrawerMenuStyles;
+//# sourceMappingURL=SpokenLanguageDrawer.styles.d.ts.map

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

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export const spokenLanguageDrawerStyles = (theme) => ({
+    root: {
+        height: _pxToRem(300),
+        overflow: 'auto'
+    },
+    drawerSurfaceStyles: {
+        drawerContentContainer: {
+            root: {
+                span: {
+                    fontWeight: 600,
+                    fontSize: _pxToRem(17),
+                    lineHeight: _pxToRem(22),
+                    color: theme.palette.neutralDark
+                }
+            }
+        }
+    }
+});
+//# sourceMappingURL=SpokenLanguageDrawer.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpokenLanguageDrawer.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/Drawer/SpokenLanguageDrawer.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAqB,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC;QACrB,QAAQ,EAAE,MAAM;KACjB;IACD,mBAAmB,EAAE;QACnB,sBAAsB,EAAE;YACtB,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ,UAAU,EAAE,GAAG;oBACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;oBACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;iBACjC;aACF;SACF;KACF;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _DrawerMenuStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const spokenLanguageDrawerStyles = (theme: Theme): _DrawerMenuStyles => ({\n  root: {\n    height: _pxToRem(300),\n    overflow: 'auto'\n  },\n  drawerSurfaceStyles: {\n    drawerContentContainer: {\n      root: {\n        span: {\n          fontWeight: 600,\n          fontSize: _pxToRem(17),\n          lineHeight: _pxToRem(22),\n          color: theme.palette.neutralDark\n        }\n      }\n    }\n  }\n});\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}

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

@@ -8,6 +8,6 @@ const icon = () => React.createElement(MoreHorizontal20Filled, { key: 'chatOnIco
  * @private
  */
 export const MoreButton = (props) => {
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon, onRenderOffIcon: icon, onClick: props.onClick, "data-ui-id": 'common-call-composite-more-button' })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon, onRenderOffIcon: icon, onClick: props.onClick, "data-ui-id": props['data-ui-id'] })));
 };
 //# sourceMappingURL=MoreButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/MoreButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAyB,yCAAmC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,GAAG,EAAE,eAAe,EAAE,WAAW,EAAC,cAAc,GAAG,CAAC;AAE5G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA4B,EAAe,EAAE;IACtE,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,uBAAuB,EACjC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,cAAc,EAAE,IAAI,EACpB,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,KAAK,CAAC,OAAO,gBACV,mCAAmC,IAC/C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from '@internal/react-components';\nimport { MoreHorizontal20Filled } from '@fluentui/react-icons';\n\nconst icon = (): JSX.Element => <MoreHorizontal20Filled key={'chatOnIconKey'} primaryFill=\"currentColor\" />;\n\n/**\n * @private\n */\nexport const MoreButton = (props: ControlBarButtonProps): JSX.Element => {\n  return (\n    <ControlBarButton\n      {...props}\n      labelKey={'optionsButtonLabelKey'}\n      showLabel={props.showLabel}\n      onRenderOnIcon={icon}\n      onRenderOffIcon={icon}\n      onClick={props.onClick}\n      data-ui-id={'common-call-composite-more-button'}\n    />\n  );\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/MoreButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAyB,yCAAmC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,GAAG,EAAE,eAAe,EAAE,WAAW,EAAC,cAAc,GAAG,CAAC;AAE5G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA4B,EAAe,EAAE;IACtE,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,uBAAuB,EACjC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,cAAc,EAAE,IAAI,EACpB,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,KAAK,CAAC,OAAO,gBACV,KAAK,CAAC,YAAY,CAAC,IAC/B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from '@internal/react-components';\nimport { MoreHorizontal20Filled } from '@fluentui/react-icons';\n\nconst icon = (): JSX.Element => <MoreHorizontal20Filled key={'chatOnIconKey'} primaryFill=\"currentColor\" />;\n\n/**\n * @private\n */\nexport const MoreButton = (props: ControlBarButtonProps): JSX.Element => {\n  return (\n    <ControlBarButton\n      {...props}\n      labelKey={'optionsButtonLabelKey'}\n      showLabel={props.showLabel}\n      onRenderOnIcon={icon}\n      onRenderOffIcon={icon}\n      onClick={props.onClick}\n      data-ui-id={props['data-ui-id']}\n    />\n  );\n};\n\"../../../../react-components/src\""]}

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

@@ -115,6 +115,10 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
     OptionsVideoBackgroundEffect: JSX.Element;
+    CaptionsIcon: JSX.Element;
+    CaptionsOffIcon: JSX.Element;
+    CaptionsSettingsIcon: JSX.Element;
+    ChangeSpokenLanguageIcon: JSX.Element;
 };
 /** @private */
 export declare type CompositeIconProps<Icons> = IIconProps & {

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

@@ -10,5 +10,9 @@ interface MinMaxDragPosition {
  * @private
  */
 export declare const useMinMaxDragPosition: (modalLayerHostId: string, rtl?: boolean | undefined) => MinMaxDragPosition;
+/**
+ * @private
+ */
+export declare const defaultSpokenLanguage = "en-us";
 export {};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -29,4 +29,8 @@ export const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
         }, [modalHostHeight, modalHostWidth, rtl]);
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
+/**
+ * @private
+ */
+export const defaultSpokenLanguage = 'en-us';
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,mBAAmB,EAAE,kBAAkB,EAAE,yCAAmC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAU9E;;GAEG;AACH,sIAAsI;AACtI,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,GAAa,EAAsB,EAAE;IACnG,MAAM,YAAY,GAAG,MAAM,CAAc,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,eAAe;gBAC3C,CAAC,CAAC,oBAAoB,CAAC,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC,OAAO;YACxF,CAAC,EAAE,CAAC,CAAC,GAAG,oBAAoB,CAAC,aAAa;SAC3C,EACP,CAAC,cAAc,EAAE,GAAG,CAAC,CACtB,CAAC;IACF,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS,IAAI,eAAe,KAAK,SAAS;QAC3D,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,cAAc,GAAG,oBAAoB,CAAC,eAAe,GAAG,oBAAoB,CAAC,OAAO;gBACtF,CAAC,CAAC,oBAAoB,CAAC,eAAe;YACxC,CAAC,EAAE,eAAe,GAAG,oBAAoB,CAAC,aAAa,GAAG,oBAAoB,CAAC,QAAQ;SACxF,EACP,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,CAAC,CACvC,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _ICoordinates, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useMemo, useRef } from 'react';\nimport { MODAL_PIP_DEFAULT_PX } from './styles/ModalLocalAndRemotePIP.styles';\n\n/**\n * Interface for ModalLocalAndRemotePIP drag positions\n */\ninterface MinMaxDragPosition {\n  minDragPosition: _ICoordinates | undefined;\n  maxDragPosition: _ICoordinates | undefined;\n}\n\n/**\n * @private\n */\n// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410\nexport const useMinMaxDragPosition = (modalLayerHostId: string, rtl?: boolean): MinMaxDragPosition => {\n  const modalHostRef = useRef<HTMLElement>(document.getElementById(modalLayerHostId));\n  const modalHostWidth = _useContainerWidth(modalHostRef);\n  const modalHostHeight = _useContainerHeight(modalHostRef);\n  const minDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      modalHostWidth === undefined\n        ? undefined\n        : {\n            x: rtl\n              ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx\n              : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,\n            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx\n          },\n    [modalHostWidth, rtl]\n  );\n  const maxDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      modalHostWidth === undefined || modalHostHeight === undefined\n        ? undefined\n        : {\n            x: rtl\n              ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx\n              : MODAL_PIP_DEFAULT_PX.rightPositionPx,\n            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx\n          },\n    [modalHostHeight, modalHostWidth, rtl]\n  );\n\n  return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,mBAAmB,EAAE,kBAAkB,EAAE,yCAAmC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAU9E;;GAEG;AACH,sIAAsI;AACtI,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,GAAa,EAAsB,EAAE;IACnG,MAAM,YAAY,GAAG,MAAM,CAAc,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,eAAe;gBAC3C,CAAC,CAAC,oBAAoB,CAAC,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC,OAAO;YACxF,CAAC,EAAE,CAAC,CAAC,GAAG,oBAAoB,CAAC,aAAa;SAC3C,EACP,CAAC,cAAc,EAAE,GAAG,CAAC,CACtB,CAAC;IACF,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS,IAAI,eAAe,KAAK,SAAS;QAC3D,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,cAAc,GAAG,oBAAoB,CAAC,eAAe,GAAG,oBAAoB,CAAC,OAAO;gBACtF,CAAC,CAAC,oBAAoB,CAAC,eAAe;YACxC,CAAC,EAAE,eAAe,GAAG,oBAAoB,CAAC,aAAa,GAAG,oBAAoB,CAAC,QAAQ;SACxF,EACP,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,CAAC,CACvC,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,OAAO,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _ICoordinates, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useMemo, useRef } from 'react';\nimport { MODAL_PIP_DEFAULT_PX } from './styles/ModalLocalAndRemotePIP.styles';\n\n/**\n * Interface for ModalLocalAndRemotePIP drag positions\n */\ninterface MinMaxDragPosition {\n  minDragPosition: _ICoordinates | undefined;\n  maxDragPosition: _ICoordinates | undefined;\n}\n\n/**\n * @private\n */\n// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410\nexport const useMinMaxDragPosition = (modalLayerHostId: string, rtl?: boolean): MinMaxDragPosition => {\n  const modalHostRef = useRef<HTMLElement>(document.getElementById(modalLayerHostId));\n  const modalHostWidth = _useContainerWidth(modalHostRef);\n  const modalHostHeight = _useContainerHeight(modalHostRef);\n  const minDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      modalHostWidth === undefined\n        ? undefined\n        : {\n            x: rtl\n              ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx\n              : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,\n            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx\n          },\n    [modalHostWidth, rtl]\n  );\n  const maxDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      modalHostWidth === undefined || modalHostHeight === undefined\n        ? undefined\n        : {\n            x: rtl\n              ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx\n              : MODAL_PIP_DEFAULT_PX.rightPositionPx,\n            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx\n          },\n    [modalHostHeight, modalHostWidth, rtl]\n  );\n\n  return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };\n};\n\n/**\n * @private\n */\nexport const defaultSpokenLanguage = 'en-us';\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -87,7 +87,65 @@
         "manyUnnamedParticipantsJoined": "unnamed participant and {numOfParticipants} other participants joined",
         "manyUnnamedParticipantsLeft": "unnamed participant and {numOfParticipants} other participants left",
         "manyParticipantsJoined": "{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",
-        "manyParticipantsLeft": "{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left"
+        "manyParticipantsLeft": "{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",
+        "liveCaptionsLabel": "Live captions",
+        "captionsSettingsLabel": "Caption settings",
+        "startCaptionsButtonOnLabel": "Turn on captions",
+        "startCaptionsButtonOffLabel": "Turn off captions",
+        "startCaptionsButtonTooltipOnContent": "Turn off captions",
+        "startCaptionsButtonTooltipOffContent": "Turn on captions",
+        "captionsSettingsModalTitle": "What language is being spoken?",
+        "captionsSettingsDropdownLabel": "Spoken language",
+        "captionsSettingsDropdownInfoText": "Language that everyone on this call is speaking.",
+        "captionsSettingsConfirmButtonLabel": "Confirm",
+        "captionsSettingsCancelButtonLabel": "Cancel",
+        "captionsSettingsModalAriaLabel": "Captions Setting Modal",
+        "captionsSettingsCloseModalButtonAriaLabel": "Close Captions Setting",
+        "captionsBannerMoreButtonCallingLabel": "More",
+        "captionsBannerMoreButtonTooltip": "More options",
+        "captionsAvailableLanguageStrings": {
+            "ar-ae": "Arabic - U.A.E.",
+            "ar-sa": "Arabic - Saudi Arabia",
+            "da-dk": "Danish",
+            "de-de": "German - Germany",
+            "en-au": "English - Australia",
+            "en-ca": "English - Canada",
+            "en-gb": "English - United Kingdom",
+            "en-in": "English - India",
+            "en-nz": "English - New Zealand",
+            "en-us": "English - United States",
+            "es-es": "Spanish - Spain (Modern Sort)",
+            "es-mx": "Spanish - Mexico",
+            "fi-fi": "Finnish",
+            "fr-ca": "French - Canada",
+            "fr-fr": "French - France",
+            "hi-in": "Hindi",
+            "it-it": "Italian - Italy",
+            "ja-jp": "Japanese",
+            "ko-kr": "Korean",
+            "nb-no": "Norwegian (Bokmål)",
+            "nl-be": "Dutch - Belgium",
+            "nl-nl": "Dutch - Netherlands",
+            "pl-pl": "Polish",
+            "pt-br": "Portuguese - Brazil",
+            "ru-ru": "Russian",
+            "sv-se": "Swedish",
+            "zh-cn": "Chinese - People's Republic of China",
+            "zh-hk": "Chinese - Hong Kong SAR",
+            "cs-cz": "Czech",
+            "pt-pt": "Portuguese - Portugal",
+            "tr-tr": "Turkish",
+            "vi-vn": "Vietnamese",
+            "th-th": "Thai",
+            "he-il": "Hebrew",
+            "cy-gb": "Welsh",
+            "uk-ua": "Ukrainian",
+            "el-gr": "Greek",
+            "hu-hu": "Hungarian",
+            "ro-ro": "Romanian",
+            "sk-sk": "Slovak",
+            "zh-tw": "Chinese - Taiwan"
+        }
     },
     "chat": {
         "chatListHeader": "In this chat",
@@ -108,6 +166,8 @@
         "moreDrawerButtonTooltip": "More options",
         "moreDrawerMicrophoneMenuTitle": "Microphone",
         "moreDrawerSpeakerMenuTitle": "Speaker",
+        "moreDrawerCaptionsMenuTitle": "Live captions",
+        "moreDrawerSpokenLanguageMenuTitle": "Spoken language",
         "peopleButtonLabel": "People",
         "peopleButtonTooltipOpen": "Show participants",
         "peopleButtonTooltipClose": "Hide participants",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.5.1-alpha-202304150013",
+  "version": "1.5.1-alpha-202304172318",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -47,7 +47,7 @@
     "uuid": "^8.1.0"
   },
   "peerDependencies": {
-    "@azure/communication-calling": "1.12.0-beta.2 || >=1.11.1",
+    "@azure/communication-calling": "1.13.0-beta.4 || >=1.12.1",
     "@azure/communication-calling-effects": "1.0.0-beta.2",
     "@azure/communication-chat": "1.3.2-beta.1 || >=1.2.0",
     "@types/react": ">=16.8.0 <18.0.0",
@@ -83,19 +83,19 @@
     "_by-flavor": "rushx _current-flavor && env-cmd -f ../../common/config/env/.env --use-shell"
   },
   "devDependencies": {
-    "@azure/communication-calling": "1.12.0-beta.2 || >=1.11.1",
+    "@azure/communication-calling": "1.13.0-beta.4 || >=1.12.1",
     "@azure/communication-calling-effects": "1.0.0-beta.2",
     "@azure/communication-chat": "1.3.2-beta.1 || >=1.2.0",
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.5.1-alpha-202304150013",
-    "@internal/calling-stateful-client": "1.5.1-alpha-202304150013",
-    "@internal/chat-component-bindings": "1.5.1-alpha-202304150013",
-    "@internal/chat-stateful-client": "1.5.1-alpha-202304150013",
-    "@internal/fake-backends": "1.5.1-alpha-202304150013",
-    "@internal/react-components": "1.5.1-alpha-202304150013",
-    "@internal/react-composites": "1.5.1-alpha-202304150013",
+    "@internal/calling-component-bindings": "1.5.1-alpha-202304172318",
+    "@internal/calling-stateful-client": "1.5.1-alpha-202304172318",
+    "@internal/chat-component-bindings": "1.5.1-alpha-202304172318",
+    "@internal/chat-stateful-client": "1.5.1-alpha-202304172318",
+    "@internal/fake-backends": "1.5.1-alpha-202304172318",
+    "@internal/react-components": "1.5.1-alpha-202304172318",
+    "@internal/react-composites": "1.5.1-alpha-202304172318",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",