@azure/communication-react 1.10.0-beta.1 → 1.10.0

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js

@@ -1,11 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { mergeStyles } from '@fluentui/react';
+import { mergeStyles, AnimationStyles } from '@fluentui/react';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/** @private */
+export const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;
+/** @private */
+export const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
+/** @private */
+export const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 /**
  * @private
  */
 export const configurationStackTokensDesktop = {
-    childrenGap: '2rem'
+    childrenGap: '1rem'
 };
 /**
  * @private
@@ -13,32 +20,57 @@ export const configurationStackTokensDesktop = {
 export const configurationStackTokensMobile = {
     childrenGap: '1.5rem'
 };
-const configurationContainerStyle = {
-    height: '100%',
-    width: '100%',
-    padding: '2rem 1rem 2rem 1rem'
-};
-/**
- * @private
- */
-export const configurationContainerStyleDesktop = mergeStyles(Object.assign(Object.assign({}, configurationContainerStyle), { minWidth: '25rem', 
-    // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
-    minHeight: '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
- }));
+/** @private */
+export const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
+    root: {
+        height: '100%',
+        width: '100%',
+        padding: '2rem 1rem 2rem 1rem',
+        minWidth: desktop ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
+            : '16rem',
+        // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
+        minHeight: desktop ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
+            : '13rem',
+        '::before': !backgroundImageUrl ? undefined : Object.assign({ content: '""', position: 'absolute', top: 0, left: 0, zIndex: 0, width: '100%', height: '100%', backgroundImage: `url(${backgroundImageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' }, AnimationStyles.fadeIn500)
+    }
+});
 /**
  * @private
  */
-export const configurationContainerStyleMobile = mergeStyles(Object.assign(Object.assign({}, configurationContainerStyle), { minWidth: '16rem', 
-    // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
-    minHeight: '13rem' }));
+export const configurationSectionStyle = {
+    root: {
+        width: '100%',
+        minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
+        maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`
+    }
+};
 /**
  * @private
  */
-export const selectionContainerStyle = mergeStyles({
-    width: '50%',
-    minWidth: '11rem',
-    maxWidth: '18.75rem',
-    padding: '0.5rem'
+export const selectionContainerStyle = (theme) => mergeStyles({
+    width: '100%',
+    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    padding: '1rem',
+    borderRadius: theme.effects.roundedCorner6,
+    border: `0.0625rem solid ${theme.palette.neutralLight}`,
+    boxShadow: theme.effects.elevation4,
+    // Style the background of the container to have partial transparency.
+    // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.
+    // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white
+    // to parse it correctly.
+    position: 'relative',
+    ':before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 0,
+        background: theme.palette.white,
+        opacity: 0.9,
+        borderRadius: theme.effects.roundedCorner4
+    }
 });
 /**
  * @private
@@ -60,9 +92,11 @@ export const titleContainerStyleMobile = mergeStyles({
 /**
  * @private
  */
-export const callDetailsContainerStylesDesktop = {
+export const callDetailsContainerStyles = {
     root: {
-        marginBottom: '1.563rem'
+        textAlign: 'center',
+        maxWidth: _pxToRem(700),
+        alignSelf: 'center'
     }
 };
 const callDetailsStyle = {
@@ -106,7 +140,9 @@ export const startCallButtonStyleMobile = mergeStyles({
  * @private
  */
 export const startCallButtonStyleDesktop = mergeStyles({
-    borderRadius: '0.25rem'
+    borderRadius: '0.25rem',
+    width: 'auto',
+    height: '2.25rem'
 });
 /** @private */
 export const cameraAndVideoEffectsContainerStyleDesktop = {
@@ -149,7 +185,8 @@ export const effectsButtonStyles = (theme) => {
 };
 /** @private */
 export const fillWidth = mergeStyles({
-    width: '100%'
+    width: '100%',
+    position: 'relative'
 });
 /** @private */
 export const panelStyles = {
@@ -173,4 +210,21 @@ export const panelStyles = {
 export const panelFocusProps = {
     forceFocusInsideTrap: false
 };
+/**
+ * @private
+ */
+export const logoStyles = (shape) => ({
+    root: {
+        overflow: 'initial',
+        // prevent the image being clipped
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: '1rem'
+    },
+    image: {
+        borderRadius: shape === 'circle' ? '100%' : undefined,
+        height: '3rem',
+        width: '3rem'
+    }
+});
 //# sourceMappingURL=CallConfiguration.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStackTokens, IStyle, mergeStyles, IButtonStyles, Theme, IPanelStyles, IFocusTrapZoneProps } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '2rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '1.5rem'\n};\nconst configurationContainerStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  padding: '2rem 1rem 2rem 1rem'\n};\n\n/**\n * @private\n */\nexport const configurationContainerStyleDesktop = mergeStyles({\n  ...configurationContainerStyle,\n  minWidth: '25rem',\n  // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n  minHeight: '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n});\n\n/**\n * @private\n */\nexport const configurationContainerStyleMobile = mergeStyles({\n  ...configurationContainerStyle,\n  minWidth: '16rem',\n  // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n  minHeight: '13rem'\n});\n\n/**\n * @private\n */\nexport const selectionContainerStyle = mergeStyles({\n  width: '50%',\n  minWidth: '11rem',\n  maxWidth: '18.75rem',\n  padding: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = mergeStyles({\n  fontSize: '1.25rem',\n  lineHeight: '1.75rem',\n  fontWeight: 600\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = mergeStyles({\n  fontSize: '1.0625rem',\n  lineHeight: '1.375rem',\n  fontWeight: 600,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const callDetailsContainerStylesDesktop: IStackItemStyles = {\n  root: {\n    marginBottom: '1.563rem'\n  }\n};\nconst callDetailsStyle: IStyle = {\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  marginTop: '0.25rem'\n};\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = mergeStyles({\n  ...callDetailsStyle\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = mergeStyles({\n  ...callDetailsStyle,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': {\n        color: theme.palette.themePrimary\n      },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    rootChecked: {\n      color: theme.palette.themePrimary\n    },\n    rootHovered: {\n      color: theme.palette.themePrimary\n    },\n    rootPressed: {\n      color: theme.palette.themePrimary\n    },\n    rootFocused: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%'\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem',\n    // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};"]}
+{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStackTokens, IStyle, mergeStyles, IButtonStyles, Theme, IPanelStyles, IFocusTrapZoneProps, IImageStyles, AnimationStyles, ITheme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n  root: {\n    height: '100%',\n    width: '100%',\n    padding: '2rem 1rem 2rem 1rem',\n    minWidth: desktop ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n    : '16rem',\n    // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n    : '13rem',\n    '::before': !backgroundImageUrl ? undefined : {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 0,\n      width: '100%',\n      height: '100%',\n      backgroundImage: `url(${backgroundImageUrl})`,\n      backgroundSize: 'cover',\n      backgroundPosition: 'center',\n      ...AnimationStyles.fadeIn500\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const configurationSectionStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n  }\n};\n\n/**\n * @private\n */\nexport const selectionContainerStyle = (theme: ITheme): string => mergeStyles({\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  padding: '1rem',\n  borderRadius: theme.effects.roundedCorner6,\n  border: `0.0625rem solid ${theme.palette.neutralLight}`,\n  boxShadow: theme.effects.elevation4,\n  // Style the background of the container to have partial transparency.\n  // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n  // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n  // to parse it correctly.\n  position: 'relative',\n  ':before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: 0,\n    background: theme.palette.white,\n    opacity: 0.9,\n    borderRadius: theme.effects.roundedCorner4\n  }\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = mergeStyles({\n  fontSize: '1.25rem',\n  lineHeight: '1.75rem',\n  fontWeight: 600\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = mergeStyles({\n  fontSize: '1.0625rem',\n  lineHeight: '1.375rem',\n  fontWeight: 600,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n  root: {\n    textAlign: 'center',\n    maxWidth: _pxToRem(700),\n    alignSelf: 'center'\n  }\n};\nconst callDetailsStyle: IStyle = {\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  marginTop: '0.25rem'\n};\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = mergeStyles({\n  ...callDetailsStyle\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = mergeStyles({\n  ...callDetailsStyle,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem',\n  width: 'auto',\n  height: '2.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': {\n        color: theme.palette.themePrimary\n      },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    rootChecked: {\n      color: theme.palette.themePrimary\n    },\n    rootHovered: {\n      color: theme.palette.themePrimary\n    },\n    rootPressed: {\n      color: theme.palette.themePrimary\n    },\n    rootFocused: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%',\n  position: 'relative'\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem',\n    // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: 'circle' | 'square'): IImageStyles => ({\n  root: {\n    overflow: 'initial',\n    // prevent the image being clipped\n    display: 'flex',\n    justifyContent: 'center',\n    marginBottom: '1rem'\n  },\n  image: {\n    borderRadius: shape === 'circle' ? '100%' : undefined,\n    height: '3rem',\n    width: '3rem'\n  }\n});\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.d.ts

@@ -6,7 +6,7 @@ export declare const mainStackTokens: IStackTokens;
 /**
  * @private
  */
-export declare const micStackTokens: IStackTokens;
+export declare const soundStackTokens: IStackTokens;
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.js

@@ -1,33 +1,34 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
+const DROPDOWN_HEIGHT_REM = 2.25;
 /**
  * @private
  */
 export const mainStackTokens = {
-    childrenGap: '1rem'
+    childrenGap: '0.5rem'
 };
 /**
  * @private
  */
-export const micStackTokens = {
-    childrenGap: '1rem'
+export const soundStackTokens = {
+    childrenGap: '0.5rem'
 };
 /**
  * @private
  */
 export const dropDownStyles = (theme) => ({
     caretDownWrapper: {
-        height: '2.5rem',
-        lineHeight: '2.5rem'
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: `${DROPDOWN_HEIGHT_REM}rem`
     },
     dropdownItem: {
         fontSize: '0.875rem',
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         background: theme.palette.white
     },
     dropdown: {
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         width: '100%',
         svg: {
             verticalAlign: 'top'
@@ -35,14 +36,16 @@ export const dropDownStyles = (theme) => ({
     },
     title: {
         fontSize: '0.875rem',
-        height: '2.5rem',
-        lineHeight: '2.3125rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: '2rem',
         borderRadius: '0.25rem',
         border: `1px solid ${theme.palette.neutralQuaternaryAlt}`
     },
     label: {
         fontWeight: 600,
-        fontSize: '0.875rem'
+        fontSize: '0.875rem',
+        // Add z-index to ensure labels are rendered above the configuration section background
+        zIndex: 1
     },
     errorMessage: {
         fontSize: '0.875rem'

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalDeviceSettings.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEpF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAiB;IAC1C,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAA4B,EAAE,CAAC,CAAC;IACzE,gBAAgB,EAAE;QAChB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;KACrB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAChC;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,MAAM;QACb,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;SACrB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,WAAW;QACvB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;KAC1D;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,UAAU;KACrB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,UAAU;CAC1B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IDropdownStyles, IStackTokens, Theme, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const mainStackTokens: IStackTokens = {\n  childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const micStackTokens: IStackTokens = {\n  childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const dropDownStyles = (theme: Theme): Partial<IDropdownStyles> => ({\n  caretDownWrapper: {\n    height: '2.5rem',\n    lineHeight: '2.5rem'\n  },\n  dropdownItem: {\n    fontSize: '0.875rem',\n    height: '2.5rem',\n    background: theme.palette.white\n  },\n  dropdown: {\n    height: '2.5rem',\n    width: '100%',\n    svg: {\n      verticalAlign: 'top'\n    }\n  },\n  title: {\n    fontSize: '0.875rem',\n    height: '2.5rem',\n    lineHeight: '2.3125rem',\n    borderRadius: '0.25rem',\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`\n  },\n  label: {\n    fontWeight: 600,\n    fontSize: '0.875rem'\n  },\n  errorMessage: {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const dropDownTitleIconStyles = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: '0',\n  maxWidth: '100%',\n  overflowWrap: 'break-word',\n  margin: '.063rem'\n});\n\n/**\n * @private\n */\nexport const optionIconStyles = mergeStyles({\n  marginRight: '8px',\n  verticalAlign: 'text-top'\n});"]}
+{"version":3,"file":"LocalDeviceSettings.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpF,MAAM,mBAAmB,GAAG,IAAI,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAA4B,EAAE,CAAC,CAAC;IACzE,gBAAgB,EAAE;QAChB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,GAAG,mBAAmB,KAAK;KACxC;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAChC;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,KAAK,EAAE,MAAM;QACb,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;SACrB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,MAAM;QAClB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;KAC1D;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,UAAU;QACpB,uFAAuF;QACvF,MAAM,EAAE,CAAC;KACV;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,UAAU;CAC1B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IDropdownStyles, IStackTokens, Theme, mergeStyles } from '@fluentui/react';\nconst DROPDOWN_HEIGHT_REM = 2.25;\n\n/**\n * @private\n */\nexport const mainStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const soundStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const dropDownStyles = (theme: Theme): Partial<IDropdownStyles> => ({\n  caretDownWrapper: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: `${DROPDOWN_HEIGHT_REM}rem`\n  },\n  dropdownItem: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    background: theme.palette.white\n  },\n  dropdown: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    width: '100%',\n    svg: {\n      verticalAlign: 'top'\n    }\n  },\n  title: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: '2rem',\n    borderRadius: '0.25rem',\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`\n  },\n  label: {\n    fontWeight: 600,\n    fontSize: '0.875rem',\n    // Add z-index to ensure labels are rendered above the configuration section background\n    zIndex: 1\n  },\n  errorMessage: {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const dropDownTitleIconStyles = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: '0',\n  maxWidth: '100%',\n  overflowWrap: 'break-word',\n  margin: '.063rem'\n});\n\n/**\n * @private\n */\nexport const optionIconStyles = mergeStyles({\n  marginRight: '8px',\n  verticalAlign: 'text-top'\n});"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js

@@ -1,13 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
+import { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';
 const localPreviewContainerStyle = {
     borderRadius: '.25rem'
 };
 /**
  * @private
  */
-export const localPreviewContainerStyleDesktop = mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '50%', minWidth: '11rem', maxWidth: '25rem', height: '18.75rem', padding: '0.5rem' }));
+export const localPreviewContainerStyleDesktop = mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`, minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`, maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem` }));
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,MAAM,0BAA0B,GAAW;IACzC,YAAY,EAAE,QAAQ;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,WAAW,iCACvD,0BAA0B,KAC7B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,QAAQ,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,iCACtD,0BAA0B,KAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,IACd,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ;QACtB,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,QAAQ,EAAE;gBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;aACrF;YAED,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB;gBAC1B,qDAAqD;gBACrD,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nconst localPreviewContainerStyle: IStyle = {\n  borderRadius: '.25rem'\n};\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '50%',\n  minWidth: '11rem',\n  maxWidth: '25rem',\n  height: '18.75rem',\n  padding: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    borderRadius: '.25rem',\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        border: '1px solid !important' // we need bang important to override fluents colours\n      },\n\n      ':focus::after': {\n        border: 'unset !important',\n        // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};"]}
+{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,qCAAqC,EAAE,wCAAwC,EAAE,wCAAwC,EAAE,MAAM,4BAA4B,CAAC;AACvK,MAAM,0BAA0B,GAAW;IACzC,YAAY,EAAE,QAAQ;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,WAAW,iCACvD,0BAA0B,KAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,GAAG,qCAAqC,KAAK,EACrD,QAAQ,EAAE,GAAG,wCAAwC,KAAK,EAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK,IAC1D,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,iCACtD,0BAA0B,KAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,IACd,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ;QACtB,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,QAAQ,EAAE;gBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;aACrF;YAED,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB;gBAC1B,qDAAqD;gBACrD,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';\nconst localPreviewContainerStyle: IStyle = {\n  borderRadius: '.25rem'\n};\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n  maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    borderRadius: '.25rem',\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        border: '1px solid !important' // we need bang important to override fluents colours\n      },\n\n      ':focus::after': {\n        border: 'unset !important',\n        // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CallControlOptions.d.ts

@@ -1,4 +1,4 @@
-import { CommonCallControlOptions, _CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';
+import { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';
 /**
  * Customization options for the control bar in calling experience.
  *
@@ -14,12 +14,4 @@ export declare type CallControlOptions = (CommonCallControlOptions & {
     };
     legacyControlBarExperience?: boolean;
 });
-/**
- * While the API for the legacyControlBarExperience is in beta. Use this type to access the internal
- * API.
- * @internal
- */
-export declare type _CallControlOptions = _CommonCallControlOptions & {
-    legacyControlBarExperience?: boolean;
-};
 //# sourceMappingURL=CallControlOptions.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CallControlOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControlOptions.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/types/CallControlOptions.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommonCallControlOptions, _CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n\n/**\n * Customization options for the control bar in calling experience.\n *\n * @public\n */\nexport type CallControlOptions = (CommonCallControlOptions & {\n  /**\n   * Show, Hide or Disable participants button during a call. This is the option only work for legacyControl bar.\n   * @defaultValue true\n   */\n  participantsButton?: boolean | {\n    disabled: boolean;\n  };\n  legacyControlBarExperience?: boolean;\n});\n\n/**\n * While the API for the legacyControlBarExperience is in beta. Use this type to access the internal\n * API.\n * @internal\n */\nexport type _CallControlOptions = _CommonCallControlOptions & {\n  legacyControlBarExperience?: boolean;\n};"]}
+{"version":3,"file":"CallControlOptions.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/types/CallControlOptions.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n\n/**\n * Customization options for the control bar in calling experience.\n *\n * @public\n */\nexport type CallControlOptions = (CommonCallControlOptions & {\n  /**\n   * Show, Hide or Disable participants button during a call. This is the option only work for legacyControl bar.\n   * @defaultValue true\n   */\n  participantsButton?: boolean | {\n    disabled: boolean;\n  };\n  legacyControlBarExperience?: boolean;\n});"]}

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

@@ -1,7 +1,6 @@
 import { CallAdapterState, CallCompositePage } from '../adapter/CallAdapter';
 import { CallControlOptions } from '../types/CallControlOptions';
 import { CallState, RemoteParticipantState } from "../../../../../calling-stateful-client/src";
-import { EnvironmentInfo } from '@azure/communication-calling';
 import { AdapterStateModifier } from '../adapter/AzureCommunicationCallAdapter';
 import { VideoBackgroundEffectsDependency } from "../../../../../calling-component-bindings/src";
 import { VideoBackgroundEffect } from '../adapter/CallAdapter';
@@ -21,10 +20,7 @@ export declare const reduceCallControlsForMobile: (callControlOptions: CallContr
 /**
  * type definition for conditional-compilation
  */
-declare type GetCallCompositePageFunction = ((call: CallState | undefined, previousCall: CallState | undefined) => CallCompositePage) & ((call: CallState | undefined, previousCall: CallState | undefined, /* @conditional-compile-remove(unsupported-browser) */ unsupportedBrowserInfo?: {
-    environmentInfo?: EnvironmentInfo;
-    unsupportedBrowserVersionOptedIn?: boolean;
-}, /* @conditional-compile-remove(call-transfer) */ transferCall?: CallState) => CallCompositePage);
+declare type GetCallCompositePageFunction = ((call: CallState | undefined, previousCall: CallState | undefined) => CallCompositePage) & ((call: CallState | undefined, previousCall: CallState | undefined) => CallCompositePage);
 /**
  * Get the current call composite page based on the current call composite state
  *
@@ -40,7 +36,7 @@ declare type GetCallCompositePageFunction = ((call: CallState | undefined, previ
  */
 export declare const getCallCompositePage: GetCallCompositePageFunction;
 /** @private */
-export declare const IsCallEndedPage: (page: 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | 'joinCallFailedDueToNoNetwork' | 'leaving' | 'leftCall' | 'lobby' | 'removedFromCall' | /* @conditional-compile-remove(PSTN-calls) */ 'hold' | /* @conditional-compile-remove(rooms) */ 'roomNotFound' | /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom' | /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment' | /* @conditional-compile-remove(call-transfer) */ 'transferring') => boolean;
+export declare const IsCallEndedPage: (page: 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | 'joinCallFailedDueToNoNetwork' | 'leaving' | 'leftCall' | 'lobby' | 'removedFromCall') => boolean;
 /**
  * Creates a new call control options object and sets the correct values for disabling
  * the buttons provided in the `disabledControls` array.
@@ -62,19 +58,11 @@ export declare const disableCallControls: (callControlOptions: CallControlOption
 export declare const isDisabled: (option: boolean | {
     disabled: boolean;
 } | undefined) => boolean;
-/**
- *
- * This function uses permission API to determine if device permission state is granted, prompt or denied
- * @returns whether device permission state is granted, prompt or denied
- * If permission API is not supported on this browser, permission state is set to unsupported.
- * @private
- */
-export declare const getDevicePermissionState: (setVideoState: (state: PermissionState | 'unsupported') => void, setAudioState: (state: PermissionState | 'unsupported') => void) => Promise<void>;
 /**
  * Check if we are using safari browser
  * @private
  */
-export declare const _isSafari: (environmentInfo: undefined | /* @conditional-compile-remove(unsupported-browser) */ EnvironmentInfo) => boolean;
+export declare const _isSafari: (environmentInfo: undefined) => boolean;
 /**
  * @private
  * This is the util function to create a participant modifier for remote participantList

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js

@@ -1,24 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-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());
-    });
-};
 import { END_CALL_PAGES } from '../adapter/CallAdapter';
 import { _isInCall, _isPreviewOn, _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
 import { isPhoneNumberIdentifier } from '@azure/communication-common';
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
 const REMOTE_PSTN_USER_HUNG_UP = 560000;
 const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
-/* @conditional-compile-remove(rooms) */
-const ROOM_NOT_FOUND_SUB_CODE = 5751;
-/* @conditional-compile-remove(rooms) */
-const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
 /**
  * @private
  */
@@ -65,7 +52,7 @@ var CallEndReasons;
     CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
 })(CallEndReasons || (CallEndReasons = {}));
 const getCallEndReason = (call) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
     /**
      * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
@@ -83,14 +70,6 @@ const getCallEndReason = (call) => {
     if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
         return CallEndReasons.REMOVED_FROM_CALL;
     }
-    /* @conditional-compile-remove(rooms) */
-    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
-        return CallEndReasons.ROOM_NOT_FOUND;
-    }
-    /* @conditional-compile-remove(rooms) */
-    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
-        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
-    }
     if (call.callEndReason) {
         // No error codes match, assume the user simply left the call regularly
         return CallEndReasons.LEFT_CALL;
@@ -111,14 +90,6 @@ const getCallEndReason = (call) => {
  * @private
  */
 export const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
-        return 'unsupportedEnvironment';
-    }
-    /* @conditional-compile-remove(call-transfer) */
-    if (transferCall !== undefined) {
-        return 'transferring';
-    }
     if (call) {
         // Must check for ongoing call *before* looking at any previous calls.
         // If the composite completes one call and joins another, the previous calls
@@ -129,8 +100,6 @@ export const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo,
             // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
         }
         else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return 'hold';
             return 'call';
         }
         else if ((call === null || call === void 0 ? void 0 : call.state) === 'Disconnecting') {
@@ -150,13 +119,6 @@ export const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo,
     }
     if (previousCall) {
         const reason = getCallEndReason(previousCall);
-        /* @conditional-compile-remove(rooms) */
-        switch (reason) {
-            case CallEndReasons.ROOM_NOT_FOUND:
-                return 'roomNotFound';
-            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
-                return 'deniedPermissionToRoom';
-        }
         switch (reason) {
             case CallEndReasons.ACCESS_DENIED:
                 return 'accessDeniedTeamsMeeting';
@@ -223,60 +185,11 @@ export const isDisabled = (option) => {
     }
     return option.disabled;
 };
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the camera.
- */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({
-            name: 'camera'
-        })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the microphone.
- */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({
-            name: 'microphone'
-        })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- *
- * This function uses permission API to determine if device permission state is granted, prompt or denied
- * @returns whether device permission state is granted, prompt or denied
- * If permission API is not supported on this browser, permission state is set to unsupported.
- * @private
- */
-export const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter(void 0, void 0, void 0, function* () {
-    const [cameraResult, microphoneResult] = yield Promise.all([queryCameraPermissionFromPermissionsAPI(), queryMicrophonePermissionFromPermissionsAPI()]);
-    setVideoState(cameraResult);
-    setAudioState(microphoneResult);
-});
-/* @conditional-compile-remove(unsupported-browser) */
-const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {
-    return !!((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false || (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn || (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false);
-};
 /**
  * Check if we are using safari browser
  * @private
  */
 export const _isSafari = (environmentInfo) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
     return /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
 };
 /**