@azure/communication-react 1.32.0-alpha-202510230018 → 1.32.0-alpha-202511181633

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js

@@ -3,7 +3,6 @@
 import { mergeStyles } from '@fluentui/react';
 import { keyframes, memoizeFunction } from '@fluentui/react';
 import { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';
-import { isDarkThemed } from '../../theming/themeUtils';
 /**
  * @private
  */
@@ -201,7 +200,7 @@ export const reactionRenderingStyle = (args) => {
 /**
  * @private
  */
-export const loadSpinnerStyles = (theme, isOverLay) => {
+export const loadSpinnerStyles = (theme) => {
     return {
         circle: {
             width: '2rem',
@@ -209,7 +208,7 @@ export const loadSpinnerStyles = (theme, isOverLay) => {
         },
         label: {
             fontSize: '1rem',
-            color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt
+            color: theme.palette.neutralPrimary
         }
     };
 };

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto 0.2rem',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const iconsGroupContainerStyle: IStyle = {\n  marginLeft: '0.2rem'\n};\n"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto 0.2rem',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: theme.palette.neutralPrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const iconsGroupContainerStyle: IStyle = {\n  marginLeft: '0.2rem'\n};\n"]}

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

@@ -849,7 +849,8 @@
         "meetingConferencePhoneInfoModalNoPhoneAvailable": "No phone available",
         "meetingConferencePhoneInfoModalTollGeoData": "{country}, {city}",
         "meetingConferencePhoneInfoModalTollFree": "(Toll-free)",
-        "meetingConferencePhoneInfoModalToll": "(Toll)"
+        "meetingConferencePhoneInfoModalToll": "(Toll)",
+        "meetingConferencePhoneInfoModalDismissButtonAriaLabel": "Close"
     },
     "IncomingCallNotification": {
         "incomingCallNotificationPlaceholderId": "Unknown User",

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js

@@ -126,7 +126,7 @@ export const ConfigurationPage = (props) => {
     }
     const locale = useLocale();
     const title = locale.strings.call.configurationPageTitle.length > 0 ? (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
-        React.createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle, role: "heading" }))) : (React.createElement(React.Fragment, null));
+        React.createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle }))) : (React.createElement(React.Fragment, null));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme) }, locale.strings.call.configurationPageCallDetails));
     const mobileWithPreview = mobileView && role !== 'Consumer';
     /* @conditional-compile-remove(call-readiness) */
@@ -175,6 +175,9 @@ export const ConfigurationPage = (props) => {
     const panelLayerProps = useMemo(() => ({
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
+    const panelPopupProps = useMemo(() => ({
+        role: 'none'
+    }), []);
     const filteredErrorBarProps = useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
     const containerStyles = useMemo(() => { var _a; return configurationContainerStyle(!mobileView, (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url); }, [mobileView, (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url]);
     return (React.createElement("div", { ref: configContainerRef, className: mergeStyles(containerStyles) },
@@ -225,7 +228,7 @@ export const ConfigurationPage = (props) => {
                                 }, onClickVideoEffects: toggleVideoEffectsPane })))),
                         React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop, horizontalAlign: mobileWithPreview ? 'stretch' : 'end' },
                             React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton, hideIcon: true }))))),
-            React.createElement(Panel, { isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps, type: PanelType.custom, customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
+            React.createElement(Panel, { isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps, popupProps: panelPopupProps, type: PanelType.custom, customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
                 React.createElement(SidePane, { ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined, mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer, maxWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`, minWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` })))));
 };
 const cameraPermissionGrantedTrampoline = (cameraPermissionGranted, videoState) => {

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAEL,YAAY,EACZ,aAAa,EACb,QAAQ,EAGR,kBAAkB,EAClB,QAAQ,EACT,4CAAmC;AACpC,OAAO,EAAE,kBAAkB,EAAE,sDAA6C;AAC1E,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC9B,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,+BAA+B,EAC/B,8BAA8B,EAC9B,2BAA2B,EAC3B,uBAAuB,EACvB,oCAAoC,EACpC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAElG,OAAO,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACpH,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAG5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AA8CxD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,gBAAgB,EAChB,UAAU,EACV,gBAAgB;IAChB,iDAAiD,CAAC,YAAY;IAC9D,iDAAiD,CAAC,iCAAiC;IACnF,iDAAiD,CAAC,gCAAgC,EAClF,eAAe,GAAG,EAAE,eAAe,EAAE,4BAA4B,EAAE,EACpE,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,MAAM,2BAA2B,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACrE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAG,WAAW,CAAC,wBAAwB,CAAC,CAAC;IACrH,MAAM,eAAe,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxD,iDAAiD;IACjD,6DAA6D;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,wBAAwB,CAAC,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAEhG,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAE3D;;;OAGG;IACH,MAAM,WAAW,GAAG,CAAC,CAAC,WAAW,IAAI,WAAW,GAAG,GAAG,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAEhD,IAAI,sBAAsB,GACxB,CAAC,CAAC,2BAA2B,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,MAAK,CAAC,CAAC;QAC3D,eAAe,CAAC,eAAe,KAAK,4BAA4B,CAAC;IACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAO,MAAuB,EAAE,OAA4B,EAAE,EAAE;QAC9D,kFAAkF;QAClF,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC7B,IAAI,CAAC;YACH,MAAM,2BAA2B,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC;gBAAS,CAAC;YACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAA,EACD,CAAC,2BAA2B,EAAE,UAAU,CAAC,CAC1C,CAAC;IACF,MAAM,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAO,OAAwC,EAAE,EAAE;QACjD,uFAAuF;QACvF,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC;YACH,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;gBAAS,CAAC;YACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAA,EACD,CAAC,UAAU,EAAE,cAAc,CAAC,CAC7B,CAAC;IAEF,IAAI,oBAAoB,GAAyB,KAAK,CAAC,YAAY,CAAC;IAEpE,6FAA6F;IAC7F,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAChD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,wBAAwB,IAAI,CAAC,CAAC,IAAI,KAAK,8BAA8B,CACxF,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,2BAA2B,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,aAAa,EAAE,CAAC;QAClF,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;IACnG,CAAC;IAED,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oHAAoH;QACpH,yEAAyE;QACzE,sBAAsB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,iDAAiD;IACjD,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,iDAAiD;IACjD,0EAA0E;IAC1E,IAAI,YAAY,EAAE,CAAC;QACjB,IACE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;YACzD,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,EAC7D,CAAC;YACD,sBAAsB,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC9C,sBAAsB,GAAG,CAAC,uBAAuB,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,MAAK,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GACT,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;QACtG,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAC7B,YAAY,EAAE,EAAE,GAAG,GAAG,EACtB,cAAc,EAAE,EAAE,EAClB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAChD,IAAI,EAAC,SAAS,GACd,CACS,CACd,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;IAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,IAAI,CAC1E,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,IAC/F,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,CACtC,CACd,CAAC;IAEF,MAAM,iBAAiB,GAAG,UAAU,IAAI,IAAI,KAAK,UAAU,CAAC;IAE5D,iDAAiD;IACjD,MAAM,gBAAgB,GAGlB,OAAO,CACT,GAAG,EAAE,CAAC,CAAC;QACL,gHAAgH;QAChH,MAAM,EACJ,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACjC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACjC,CAAC,CAAC,uBAAuB;oBACvB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;QAChB,UAAU,EACR,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACrC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACrC,CAAC,CAAC,2BAA2B;oBAC3B,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;KACjB,CAAC,EACF,CAAC,UAAU,EAAE,UAAU,EAAE,uBAAuB,EAAE,2BAA2B,CAAC,CAC/E,CAAC;IAEF,iDAAiD;IACjD,MAAM,aAAa,GAAG,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,uBAAuB,CAAC,CAAC;IAEtH,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErF,kHAAkH;IAClH,yEAAyE;IACzE,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtF,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE;YACd,8BAA8B,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,iDAAiD;IACjD,MAAM,4BAA4B,GAAG,CAAC,2BAA2B,CAAC;IAElE,MAAM,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,GAAG,mBAAmB,CACnG,KAAK,CAAC,sBAAsB,EAC5B,UAAU,EACV,KAAK,CAAC,YAAY,EAClB,KAAK,CAAC,cAAc,CACrB,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,qBAAqB,EAAE,CAAC;QACxB,gBAAgB,EAAE,CAAC;IACrB,CAAC,CAAA,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,gBAAgB;KACzB,CAAC,EACF,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,iCACD,aAAa,KAChB,mBAAmB,EAAE,oBAAoB,IACzC,EACF,CAAC,aAAa,EAAE,oBAAoB,CAAC,CACtC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,WAAC,OAAA,2BAA2B,CAAC,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC,CAAA,EAAA,EAC1E,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC,CACzC,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACnE,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,yBAAyB;YACxB,iDAAiD;YACjD,oFAAoF;;gBADpF,iDAAiD;gBACjD,oFAAoF;gBACpF,2BAA2B,EACzB,CAAC,uBAAuB,IAAI,CAAC,2BAA2B,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAEtF,iDAAiD;gBACjD,gBAAgB,EAAE,gBAAgB;gBAClC,iDAAiD;gBACjD,gCAAgC,EAAE,gCAAgC;gBAClE,iDAAiD;gBACjD,iCAAiC,EAAE,iCAAiC,EACpE,aAAa,EAAE,qBAAqB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,GACpC,CACI;QAEN,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,CAC1F,oBAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU;YACtB,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B,EACxD,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,EACpE,iBAAiB,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,MAAK,aAAa,GACzD,CACH;QAID,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,IAAI,CAAC,UAAU,KAAK,aAAa,IAAI,UAAU,KAAK,aAAa,CAAC,IAAI,CAC5F,oBAAC,0BAA0B;QACzB,iDAAiD;;YAAjD,iDAAiD;YACjD,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,4BAA4B,EACzD,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B;YACxD,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,GACpE,CACH;QAGH,oBAAC,KAAK,IAAC,YAAY,QAAC,IAAI,QAAC,UAAU,QAAC,SAAS,EAAE,SAAS;YACtD,oBAAC,KAAK,IACJ,SAAS,EAAE,4BAA4B,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EACxE,aAAa,EAAE,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAChE,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,+BAA+B;gBAE5F,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,0BAA0B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;oBACzB,KAAK;oBACL,eAAe,CACL;gBACb,oBAAC,KAAK,IACJ,UAAU,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,UAAU,EAAE,WAAW,CAAC,EACxE,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzD,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,8BAA8B;oBAErC,IAAI,KAAK,UAAU,IAAI,CACtB,oBAAC,YAAY,IACX,UAAU,EAAE,iBAAiB,EAC7B,iBAAiB,EAAE,UAAU,EAC7B,cAAc,EAAE,YAAY,EAC5B,aAAa,EAAE,aAAa,IAAI,CAAC,UAAU,GAC3C,CACH;oBACD,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB;wBAC9D,CAAC,iBAAiB,IAAI,CACrB,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;4BACnG,oBAAC,mBAAmB,oBACd,OAAO,EACP,2BAA2B,IAC/B,cAAc,EAAE,YAAY,EAC5B,uBAAuB,EAAE,iCAAiC,CACxD,uBAAuB;gCACvB,iDAAiD,CAAC,UAAU,CAC7D,EACD,2BAA2B,EAAE,8BAA8B,CACzD,2BAA2B;gCAC3B,iDAAiD,CAAC,UAAU,CAC7D;gCACD,iDAAiD;gCACjD,6BAA6B,EAAE,GAAG,EAAE;oCAClC,8BAA8B,CAAC,IAAI,CAAC,CAAC;gCACvC,CAAC,EACD,mBAAmB,EAAE,sBAAsB,IAC3C,CACI,CACT;wBACD,oBAAC,KAAK,IACJ,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAAoC,EACtG,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;4BAEtD,oBAAC,eAAe,IACd,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,EACvF,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,sBAAsB,EAChC,QAAQ,EAAE,IAAI,GACd,CACI,CACF,CACF,CACF;YACR,oBAAC,KAAK,IACJ,MAAM,EAAE,sBAAsB,EAC9B,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE,KAAK,EACjB,iBAAiB,EAAE,KAAK,EACxB,MAAM,EAAE,WAAW,EACnB,kBAAkB,EAAE,eAAe,EACnC,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,WAAW,EAAE,GAAG,iCAAiC,KAAK;gBAEtD,oBAAC,QAAQ,IACP,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,EAC7F,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,EACnD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,GACnD,CACI,CACF,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CACxC,uBAA4C,EAC5C,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAEvG,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,CACrC,2BAAgD,EAChD,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAE3G,OAAO,2BAA2B,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,KAA2E,EAAe,EAAE;IACxG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAChB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,CAAC;AACnG,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,iBAA0B,EAAE,QAAiB,EAAE,eAAwB,EAAW,EAAE;IAC5G,IAAI,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,CAAC,iBAAiB,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useEffect } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport {\n  ActiveErrorMessage,\n  CameraButton,\n  DevicesButton,\n  ErrorBar,\n  VideoStreamOptions,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, mergeStyles, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n  callDetailsContainerStyles,\n  configurationCenteredContent,\n  configurationSectionStyle,\n  deviceConfigurationStackTokens,\n  fillWidth,\n  logoStyles,\n  panelFocusProps,\n  panelStyles,\n  startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyle,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { getMicrophones, getRole } from '../selectors/baseSelectors';\nimport { getEnvironmentInfo } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-readiness) */\nimport { getCameras } from '../selectors/baseSelectors';\nimport { VideoDeviceInfo } from '@azure/communication-calling';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  /**\n   * Options for settings related to joining a call.\n   */\n  joinCallOptions?: {\n    /**\n     * options for checking microphone permissions when joining a call.\n     * block on access will block the user from joining the call if the microphone permission is not granted.\n     * skip will allow the user to join the call without granting the microphone permission.\n     * @defaultValue 'requireMicrophoneAvailable'\n     */\n    microphoneCheck?: 'requireMicrophoneAvailable' | 'skip';\n  };\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,\n    joinCallOptions = { microphoneCheck: 'requireMicrophoneAvailable' }\n  } = props;\n\n  const theme = useTheme();\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  const environmentInfo = useSelector(getEnvironmentInfo);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(environmentInfo, setVideoState, setAudioState, videoState, audioState);\n\n  const configContainerRef = useRef<HTMLDivElement>(null);\n\n  const configWidth = _useContainerWidth(configContainerRef);\n\n  /**\n   * We want to stack the two sections (preview and devices) when the container is less than 450 wide.\n   * We lose size calculation when the container is less than 450 wide, so we stack the two sections.\n   */\n  const stackConfig = !!configWidth && configWidth < 450;\n  const errorBarProps = usePropsFor(ErrorBar);\n  const microphones = useSelector(getMicrophones);\n\n  let disableStartCallButton =\n    (!microphonePermissionGranted || microphones?.length === 0) &&\n    joinCallOptions.microphoneCheck === 'requireMicrophoneAvailable';\n  const role = useSelector(getRole);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  const [cameraLoading, setCameraLoading] = useState(false);\n  const switchCamera = useCallback(\n    async (device: VideoDeviceInfo, options?: VideoStreamOptions) => {\n      // Only set camera to be loading if we are switching source while the camera is on\n      setCameraLoading(isCameraOn);\n      try {\n        await localDeviceSettingsHandlers.onSelectCamera(device, options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [localDeviceSettingsHandlers, isCameraOn]\n  );\n  const { onToggleCamera } = usePropsFor(CameraButton);\n  const toggleCamera = useCallback(\n    async (options?: VideoStreamOptions | undefined) => {\n      // Only set camera to loading if we are turning on the camera (i.e. the camera was off)\n      setCameraLoading(!isCameraOn);\n      try {\n        await onToggleCamera(options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [isCameraOn, onToggleCamera]\n  );\n\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(\n      (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n    );\n  }\n\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n  }\n\n  if (role === 'Consumer') {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameras = useSelector(getCameras);\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title =\n    locale.strings.call.configurationPageTitle.length > 0 ? (\n      <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping\n          width={mobileView ? 325 : 445}\n          lineHeightPx={16 * 1.5}\n          bufferHeightPx={16}\n          text={locale.strings.call.configurationPageTitle}\n          role=\"heading\"\n        />\n      </Stack.Item>\n    ) : (\n      <></>\n    );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  const mobileWithPreview = mobileView && role !== 'Consumer';\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = useMemo(\n    () => ({\n      // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n      camera:\n        videoState && videoState !== 'unsupported'\n          ? cameraPermissionGranted !== false\n            ? videoState\n            : 'denied'\n          : cameraPermissionGranted !== false\n            ? cameraPermissionGranted\n              ? 'granted'\n              : 'prompt'\n            : 'denied',\n      microphone:\n        audioState && audioState !== 'unsupported'\n          ? microphonePermissionGranted !== false\n            ? audioState\n            : 'denied'\n          : microphonePermissionGranted !== false\n            ? microphonePermissionGranted\n              ? 'granted'\n              : 'prompt'\n            : 'denied'\n    }),\n    [videoState, audioState, cameraPermissionGranted, microphonePermissionGranted]\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  useEffect(() => {\n    setTimeout(() => {\n      setMinimumFallbackTimerElapsed(true);\n    }, 2000);\n  }, []);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n    props.updateSidePaneRenderer,\n    mobileView,\n    props.latestErrors,\n    props.onDismissError\n  );\n\n  const startCall = useCallback(async () => {\n    closeVideoEffectsPane();\n    startCallHandler();\n  }, [startCallHandler, closeVideoEffectsPane]);\n\n  const panelLayerProps = useMemo(\n    () => ({\n      hostId: modalLayerHostId\n    }),\n    [modalLayerHostId]\n  );\n\n  const filteredErrorBarProps = useMemo(\n    () => ({\n      ...errorBarProps,\n      activeErrorMessages: filteredLatestErrors\n    }),\n    [errorBarProps, filteredLatestErrors]\n  );\n\n  const containerStyles = useMemo(\n    () => configurationContainerStyle(!mobileView, props.backgroundImage?.url),\n    [mobileView, props.backgroundImage?.url]\n  );\n\n  return (\n    <div ref={configContainerRef} className={mergeStyles(containerStyles)}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={filteredErrorBarProps}\n          onDismissError={props.onDismissError}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n            doNotPromptCamera={deviceChecks?.camera === 'doNotPrompt'}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack\n          className={configurationCenteredContent(mobileWithPreview, !!props.logo)}\n          verticalAlign={stackConfig && !mobileView ? undefined : 'center'}\n          verticalFill={mobileWithPreview}\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo logo={props.logo} />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack\n            horizontal={configHorizontal(mobileWithPreview, mobileView, stackConfig)}\n            horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n            verticalFill={mobileWithPreview}\n            tokens={deviceConfigurationStackTokens}\n          >\n            {role !== 'Consumer' && (\n              <LocalPreview\n                mobileView={mobileWithPreview}\n                showDevicesButton={mobileView}\n                onToggleCamera={toggleCamera}\n                cameraLoading={cameraLoading && !isCameraOn}\n              />\n            )}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && (\n                <Stack className={mobileView ? undefined : selectionContainerStyle(theme, _isSafari(environmentInfo))}>\n                  <LocalDeviceSettings\n                    {...options}\n                    {...localDeviceSettingsHandlers}\n                    onSelectCamera={switchCamera}\n                    cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                      cameraPermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ videoState\n                    )}\n                    microphonePermissionGranted={micPermissionGrantedTrampoline(\n                      microphonePermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ audioState\n                    )}\n                    /* @conditional-compile-remove(call-readiness) */\n                    onClickEnableDevicePermission={() => {\n                      setIsPermissionsModalDismissed(true);\n                    }}\n                    onClickVideoEffects={toggleVideoEffectsPane}\n                  />\n                </Stack>\n              )}\n              <Stack\n                styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n                horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n              >\n                <StartCallButton\n                  className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n                  onClick={startCall}\n                  disabled={disableStartCallButton}\n                  hideIcon={true}\n                />\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n          isOpen={isVideoEffectsPaneOpen}\n          hasCloseButton={false}\n          isBlocking={false}\n          isHiddenOnDismiss={false}\n          styles={panelStyles}\n          focusTrapZoneProps={panelFocusProps}\n          layerProps={panelLayerProps}\n          type={PanelType.custom}\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n        >\n          <SidePane\n            ariaLabel={isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined}\n            mobileView={props.mobileView}\n            updateSidePaneRenderer={props.updateSidePaneRenderer}\n            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n          />\n        </Panel>\n      </Stack>\n    </div>\n  );\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'circle' } }): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\n\nconst configHorizontal = (mobileWithPreview: boolean, isMobile: boolean, configTooNarrow: boolean): boolean => {\n  if (configTooNarrow && !isMobile) {\n    return false;\n  }\n  return !mobileWithPreview;\n};\n"]}
+{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAEL,YAAY,EACZ,aAAa,EACb,QAAQ,EAGR,kBAAkB,EAClB,QAAQ,EACT,4CAAmC;AACpC,OAAO,EAAE,kBAAkB,EAAE,sDAA6C;AAC1E,OAAO,EAAe,KAAK,EAAe,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxG,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC9B,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,+BAA+B,EAC/B,8BAA8B,EAC9B,2BAA2B,EAC3B,uBAAuB,EACvB,oCAAoC,EACpC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAElG,OAAO,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACpH,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAG5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AA8CxD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,gBAAgB,EAChB,UAAU,EACV,gBAAgB;IAChB,iDAAiD,CAAC,YAAY;IAC9D,iDAAiD,CAAC,iCAAiC;IACnF,iDAAiD,CAAC,gCAAgC,EAClF,eAAe,GAAG,EAAE,eAAe,EAAE,4BAA4B,EAAE,EACpE,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,MAAM,2BAA2B,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACrE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAG,WAAW,CAAC,wBAAwB,CAAC,CAAC;IACrH,MAAM,eAAe,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxD,iDAAiD;IACjD,6DAA6D;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA8C,SAAS,CAAC,CAAC;IACrG,iDAAiD;IACjD,wBAAwB,CAAC,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAEhG,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAE3D;;;OAGG;IACH,MAAM,WAAW,GAAG,CAAC,CAAC,WAAW,IAAI,WAAW,GAAG,GAAG,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAEhD,IAAI,sBAAsB,GACxB,CAAC,CAAC,2BAA2B,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,MAAK,CAAC,CAAC;QAC3D,eAAe,CAAC,eAAe,KAAK,4BAA4B,CAAC;IACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAO,MAAuB,EAAE,OAA4B,EAAE,EAAE;QAC9D,kFAAkF;QAClF,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC7B,IAAI,CAAC;YACH,MAAM,2BAA2B,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC;gBAAS,CAAC;YACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAA,EACD,CAAC,2BAA2B,EAAE,UAAU,CAAC,CAC1C,CAAC;IACF,MAAM,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAO,OAAwC,EAAE,EAAE;QACjD,uFAAuF;QACvF,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC;YACH,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;gBAAS,CAAC;YACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAA,EACD,CAAC,UAAU,EAAE,cAAc,CAAC,CAC7B,CAAC;IAEF,IAAI,oBAAoB,GAAyB,KAAK,CAAC,YAAY,CAAC;IAEpE,6FAA6F;IAC7F,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAChD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,wBAAwB,IAAI,CAAC,CAAC,IAAI,KAAK,8BAA8B,CACxF,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,2BAA2B,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,aAAa,EAAE,CAAC;QAClF,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;IACnG,CAAC;IAED,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,oHAAoH;QACpH,yEAAyE;QACzE,sBAAsB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,iDAAiD;IACjD,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,iDAAiD;IACjD,0EAA0E;IAC1E,IAAI,YAAY,EAAE,CAAC;QACjB,IACE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;YACzD,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,EAC7D,CAAC;YACD,sBAAsB,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC9C,sBAAsB,GAAG,CAAC,uBAAuB,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,MAAK,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GACT,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC;QACtG,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAC7B,YAAY,EAAE,EAAE,GAAG,GAAG,EACtB,cAAc,EAAE,EAAE,EAClB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAChD,CACS,CACd,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;IAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,IAAI,CAC1E,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,IAC/F,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,CACtC,CACd,CAAC;IAEF,MAAM,iBAAiB,GAAG,UAAU,IAAI,IAAI,KAAK,UAAU,CAAC;IAE5D,iDAAiD;IACjD,MAAM,gBAAgB,GAGlB,OAAO,CACT,GAAG,EAAE,CAAC,CAAC;QACL,gHAAgH;QAChH,MAAM,EACJ,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACjC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,uBAAuB,KAAK,KAAK;gBACjC,CAAC,CAAC,uBAAuB;oBACvB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;QAChB,UAAU,EACR,UAAU,IAAI,UAAU,KAAK,aAAa;YACxC,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACrC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,2BAA2B,KAAK,KAAK;gBACrC,CAAC,CAAC,2BAA2B;oBAC3B,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,CAAC,CAAC,QAAQ;KACjB,CAAC,EACF,CAAC,UAAU,EAAE,UAAU,EAAE,uBAAuB,EAAE,2BAA2B,CAAC,CAC/E,CAAC;IAEF,iDAAiD;IACjD,MAAM,aAAa,GAAG,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,uBAAuB,CAAC,CAAC;IAEtH,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErF,kHAAkH;IAClH,yEAAyE;IACzE,iDAAiD;IACjD,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtF,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE;YACd,8BAA8B,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,iDAAiD;IACjD,MAAM,4BAA4B,GAAG,CAAC,2BAA2B,CAAC;IAElE,MAAM,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,GAAG,mBAAmB,CACnG,KAAK,CAAC,sBAAsB,EAC5B,UAAU,EACV,KAAK,CAAC,YAAY,EAClB,KAAK,CAAC,cAAc,CACrB,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,qBAAqB,EAAE,CAAC;QACxB,gBAAgB,EAAE,CAAC;IACrB,CAAC,CAAA,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAgB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,gBAAgB;KACzB,CAAC,EACF,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,eAAe,GAAgB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,MAAM;KACb,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,iCACD,aAAa,KAChB,mBAAmB,EAAE,oBAAoB,IACzC,EACF,CAAC,aAAa,EAAE,oBAAoB,CAAC,CACtC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,WAAC,OAAA,2BAA2B,CAAC,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC,CAAA,EAAA,EAC1E,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC,CACzC,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACnE,oBAAC,KAAK,IAAC,MAAM,EAAE,wBAAwB;YACrC,oBAAC,yBAAyB;YACxB,iDAAiD;YACjD,oFAAoF;;gBADpF,iDAAiD;gBACjD,oFAAoF;gBACpF,2BAA2B,EACzB,CAAC,uBAAuB,IAAI,CAAC,2BAA2B,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBAEtF,iDAAiD;gBACjD,gBAAgB,EAAE,gBAAgB;gBAClC,iDAAiD;gBACjD,gCAAgC,EAAE,gCAAgC;gBAClE,iDAAiD;gBACjD,iCAAiC,EAAE,iCAAiC,EACpE,aAAa,EAAE,qBAAqB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,GACpC,CACI;QAEN,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,UAAU,IAAI,UAAU,KAAK,aAAa,IAAI,CAC1F,oBAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU;YACtB,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B,EACxD,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,EACpE,iBAAiB,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,MAAK,aAAa,GACzD,CACH;QAID,iDAAiD;QACjD,2HAA2H;QAC3H,UAAU,IAAI,UAAU,IAAI,CAAC,UAAU,KAAK,aAAa,IAAI,UAAU,KAAK,aAAa,CAAC,IAAI,CAC5F,oBAAC,0BAA0B;QACzB,iDAAiD;;YAAjD,iDAAiD;YACjD,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,4BAA4B,EACzD,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B;YACxD,sDAAsD;YACtD,eAAe,EAAE,eAAe,EAChC,8BAA8B,EAAE,8BAA8B,EAC9D,iCAAiC,EAAE,iCAAiC,GACpE,CACH;QAGH,oBAAC,KAAK,IAAC,YAAY,QAAC,IAAI,QAAC,UAAU,QAAC,SAAS,EAAE,SAAS;YACtD,oBAAC,KAAK,IACJ,SAAS,EAAE,4BAA4B,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EACxE,aAAa,EAAE,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAChE,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,+BAA+B;gBAE5F,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,0BAA0B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;oBACzB,KAAK;oBACL,eAAe,CACL;gBACb,oBAAC,KAAK,IACJ,UAAU,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,UAAU,EAAE,WAAW,CAAC,EACxE,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzD,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,8BAA8B;oBAErC,IAAI,KAAK,UAAU,IAAI,CACtB,oBAAC,YAAY,IACX,UAAU,EAAE,iBAAiB,EAC7B,iBAAiB,EAAE,UAAU,EAC7B,cAAc,EAAE,YAAY,EAC5B,aAAa,EAAE,aAAa,IAAI,CAAC,UAAU,GAC3C,CACH;oBACD,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB;wBAC9D,CAAC,iBAAiB,IAAI,CACrB,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;4BACnG,oBAAC,mBAAmB,oBACd,OAAO,EACP,2BAA2B,IAC/B,cAAc,EAAE,YAAY,EAC5B,uBAAuB,EAAE,iCAAiC,CACxD,uBAAuB;gCACvB,iDAAiD,CAAC,UAAU,CAC7D,EACD,2BAA2B,EAAE,8BAA8B,CACzD,2BAA2B;gCAC3B,iDAAiD,CAAC,UAAU,CAC7D;gCACD,iDAAiD;gCACjD,6BAA6B,EAAE,GAAG,EAAE;oCAClC,8BAA8B,CAAC,IAAI,CAAC,CAAC;gCACvC,CAAC,EACD,mBAAmB,EAAE,sBAAsB,IAC3C,CACI,CACT;wBACD,oBAAC,KAAK,IACJ,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAAoC,EACtG,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;4BAEtD,oBAAC,eAAe,IACd,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,EACvF,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,sBAAsB,EAChC,QAAQ,EAAE,IAAI,GACd,CACI,CACF,CACF,CACF;YACR,oBAAC,KAAK,IACJ,MAAM,EAAE,sBAAsB,EAC9B,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE,KAAK,EACjB,iBAAiB,EAAE,KAAK,EACxB,MAAM,EAAE,WAAW,EACnB,kBAAkB,EAAE,eAAe,EACnC,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,WAAW,EAAE,GAAG,iCAAiC,KAAK;gBAEtD,oBAAC,QAAQ,IACP,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,EAC7F,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,EACnD,QAAQ,EAAE,GAAG,iCAAiC,KAAK,GACnD,CACI,CACF,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CACxC,uBAA4C,EAC5C,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAEvG,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,CACrC,2BAAgD,EAChD,UAAwD,EACnC,EAAE;IACvB,iDAAiD;IACjD,OAAO,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAE3G,OAAO,2BAA2B,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,KAA2E,EAAe,EAAE;IACxG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAChB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,CAAC;AACnG,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,iBAA0B,EAAE,QAAiB,EAAE,eAAwB,EAAW,EAAE;IAC5G,IAAI,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,CAAC,iBAAiB,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useEffect } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport {\n  ActiveErrorMessage,\n  CameraButton,\n  DevicesButton,\n  ErrorBar,\n  VideoStreamOptions,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { ILayerProps, Image, IPopupProps, mergeStyles, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n  callDetailsContainerStyles,\n  configurationCenteredContent,\n  configurationSectionStyle,\n  deviceConfigurationStackTokens,\n  fillWidth,\n  logoStyles,\n  panelFocusProps,\n  panelStyles,\n  startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyle,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { getMicrophones, getRole } from '../selectors/baseSelectors';\nimport { getEnvironmentInfo } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-readiness) */\nimport { getCameras } from '../selectors/baseSelectors';\nimport { VideoDeviceInfo } from '@azure/communication-calling';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  /**\n   * Options for settings related to joining a call.\n   */\n  joinCallOptions?: {\n    /**\n     * options for checking microphone permissions when joining a call.\n     * block on access will block the user from joining the call if the microphone permission is not granted.\n     * skip will allow the user to join the call without granting the microphone permission.\n     * @defaultValue 'requireMicrophoneAvailable'\n     */\n    microphoneCheck?: 'requireMicrophoneAvailable' | 'skip';\n  };\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,\n    joinCallOptions = { microphoneCheck: 'requireMicrophoneAvailable' }\n  } = props;\n\n  const theme = useTheme();\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  const environmentInfo = useSelector(getEnvironmentInfo);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(environmentInfo, setVideoState, setAudioState, videoState, audioState);\n\n  const configContainerRef = useRef<HTMLDivElement>(null);\n\n  const configWidth = _useContainerWidth(configContainerRef);\n\n  /**\n   * We want to stack the two sections (preview and devices) when the container is less than 450 wide.\n   * We lose size calculation when the container is less than 450 wide, so we stack the two sections.\n   */\n  const stackConfig = !!configWidth && configWidth < 450;\n  const errorBarProps = usePropsFor(ErrorBar);\n  const microphones = useSelector(getMicrophones);\n\n  let disableStartCallButton =\n    (!microphonePermissionGranted || microphones?.length === 0) &&\n    joinCallOptions.microphoneCheck === 'requireMicrophoneAvailable';\n  const role = useSelector(getRole);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  const [cameraLoading, setCameraLoading] = useState(false);\n  const switchCamera = useCallback(\n    async (device: VideoDeviceInfo, options?: VideoStreamOptions) => {\n      // Only set camera to be loading if we are switching source while the camera is on\n      setCameraLoading(isCameraOn);\n      try {\n        await localDeviceSettingsHandlers.onSelectCamera(device, options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [localDeviceSettingsHandlers, isCameraOn]\n  );\n  const { onToggleCamera } = usePropsFor(CameraButton);\n  const toggleCamera = useCallback(\n    async (options?: VideoStreamOptions | undefined) => {\n      // Only set camera to loading if we are turning on the camera (i.e. the camera was off)\n      setCameraLoading(!isCameraOn);\n      try {\n        await onToggleCamera(options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [isCameraOn, onToggleCamera]\n  );\n\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(\n      (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n    );\n  }\n\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n  }\n\n  if (role === 'Consumer') {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameras = useSelector(getCameras);\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title =\n    locale.strings.call.configurationPageTitle.length > 0 ? (\n      <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping\n          width={mobileView ? 325 : 445}\n          lineHeightPx={16 * 1.5}\n          bufferHeightPx={16}\n          text={locale.strings.call.configurationPageTitle}\n        />\n      </Stack.Item>\n    ) : (\n      <></>\n    );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  const mobileWithPreview = mobileView && role !== 'Consumer';\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = useMemo(\n    () => ({\n      // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n      camera:\n        videoState && videoState !== 'unsupported'\n          ? cameraPermissionGranted !== false\n            ? videoState\n            : 'denied'\n          : cameraPermissionGranted !== false\n            ? cameraPermissionGranted\n              ? 'granted'\n              : 'prompt'\n            : 'denied',\n      microphone:\n        audioState && audioState !== 'unsupported'\n          ? microphonePermissionGranted !== false\n            ? audioState\n            : 'denied'\n          : microphonePermissionGranted !== false\n            ? microphonePermissionGranted\n              ? 'granted'\n              : 'prompt'\n            : 'denied'\n    }),\n    [videoState, audioState, cameraPermissionGranted, microphonePermissionGranted]\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  useEffect(() => {\n    setTimeout(() => {\n      setMinimumFallbackTimerElapsed(true);\n    }, 2000);\n  }, []);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n    props.updateSidePaneRenderer,\n    mobileView,\n    props.latestErrors,\n    props.onDismissError\n  );\n\n  const startCall = useCallback(async () => {\n    closeVideoEffectsPane();\n    startCallHandler();\n  }, [startCallHandler, closeVideoEffectsPane]);\n\n  const panelLayerProps: ILayerProps = useMemo(\n    () => ({\n      hostId: modalLayerHostId\n    }),\n    [modalLayerHostId]\n  );\n\n  const panelPopupProps: IPopupProps = useMemo(\n    () => ({\n      role: 'none'\n    }),\n    []\n  );\n\n  const filteredErrorBarProps = useMemo(\n    () => ({\n      ...errorBarProps,\n      activeErrorMessages: filteredLatestErrors\n    }),\n    [errorBarProps, filteredLatestErrors]\n  );\n\n  const containerStyles = useMemo(\n    () => configurationContainerStyle(!mobileView, props.backgroundImage?.url),\n    [mobileView, props.backgroundImage?.url]\n  );\n\n  return (\n    <div ref={configContainerRef} className={mergeStyles(containerStyles)}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={filteredErrorBarProps}\n          onDismissError={props.onDismissError}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n            doNotPromptCamera={deviceChecks?.camera === 'doNotPrompt'}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack\n          className={configurationCenteredContent(mobileWithPreview, !!props.logo)}\n          verticalAlign={stackConfig && !mobileView ? undefined : 'center'}\n          verticalFill={mobileWithPreview}\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo logo={props.logo} />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack\n            horizontal={configHorizontal(mobileWithPreview, mobileView, stackConfig)}\n            horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n            verticalFill={mobileWithPreview}\n            tokens={deviceConfigurationStackTokens}\n          >\n            {role !== 'Consumer' && (\n              <LocalPreview\n                mobileView={mobileWithPreview}\n                showDevicesButton={mobileView}\n                onToggleCamera={toggleCamera}\n                cameraLoading={cameraLoading && !isCameraOn}\n              />\n            )}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && (\n                <Stack className={mobileView ? undefined : selectionContainerStyle(theme, _isSafari(environmentInfo))}>\n                  <LocalDeviceSettings\n                    {...options}\n                    {...localDeviceSettingsHandlers}\n                    onSelectCamera={switchCamera}\n                    cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                      cameraPermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ videoState\n                    )}\n                    microphonePermissionGranted={micPermissionGrantedTrampoline(\n                      microphonePermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ audioState\n                    )}\n                    /* @conditional-compile-remove(call-readiness) */\n                    onClickEnableDevicePermission={() => {\n                      setIsPermissionsModalDismissed(true);\n                    }}\n                    onClickVideoEffects={toggleVideoEffectsPane}\n                  />\n                </Stack>\n              )}\n              <Stack\n                styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n                horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n              >\n                <StartCallButton\n                  className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n                  onClick={startCall}\n                  disabled={disableStartCallButton}\n                  hideIcon={true}\n                />\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n          isOpen={isVideoEffectsPaneOpen}\n          hasCloseButton={false}\n          isBlocking={false}\n          isHiddenOnDismiss={false}\n          styles={panelStyles}\n          focusTrapZoneProps={panelFocusProps}\n          layerProps={panelLayerProps}\n          popupProps={panelPopupProps}\n          type={PanelType.custom}\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n        >\n          <SidePane\n            ariaLabel={isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined}\n            mobileView={props.mobileView}\n            updateSidePaneRenderer={props.updateSidePaneRenderer}\n            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n          />\n        </Panel>\n      </Stack>\n    </div>\n  );\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'circle' } }): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\n\nconst configHorizontal = (mobileWithPreview: boolean, isMobile: boolean, configTooNarrow: boolean): boolean => {\n  if (configTooNarrow && !isMobile) {\n    return false;\n  }\n  return !mobileWithPreview;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ThankYouForFeedbackPage.js

@@ -14,6 +14,6 @@ export function ThankYouForFeedbackPage(props) {
     return (React.createElement(Stack, { verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": 'thank-you-page', "aria-atomic": true },
         React.createElement(Stack, { className: mergeStyles(containerStyle), tokens: containerItemGap },
             props.iconName && React.createElement(CallCompositeIcon, { iconName: props.iconName }),
-            React.createElement(Text, { className: mergeStyles(titleStyles), "aria-live": "assertive" }, strings.endOfSurveyText))));
+            React.createElement(Text, { className: mergeStyles(titleStyles), tabIndex: 0, "aria-live": 'assertive', role: "alert" }, strings.endOfSurveyText))));
 }
 //# sourceMappingURL=ThankYouForFeedbackPage.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ThankYouForFeedbackPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThankYouForFeedbackPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ThankYouForFeedbackPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAsB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,OAAO,CACL,oBAAC,KAAK,IAAC,YAAY,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,gBAAgB;QAC9F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,gBAAgB;YACpE,KAAK,CAAC,QAAQ,IAAI,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI;YAClE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,eAAY,WAAW,IAC7D,OAAO,CAAC,eAAe,CACnB,CACD,CACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CallCompositeIcon, CallCompositeIcons } from '../../common/icons';\nimport { containerItemGap, containerStyle, titleStyles } from '../styles/NoticePage.styles';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface ThankYouForFeedbackPageProps {\n  iconName?: keyof CallCompositeIcons;\n}\n\n/**\n * Page shown after the survey is submitted.\n * @private\n */\nexport function ThankYouForFeedbackPage(props: ThankYouForFeedbackPageProps): JSX.Element {\n  const strings = useLocale().strings.call;\n  return (\n    <Stack verticalFill verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={'thank-you-page'} aria-atomic>\n      <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>\n        {props.iconName && <CallCompositeIcon iconName={props.iconName} />}\n        <Text className={mergeStyles(titleStyles)} aria-live=\"assertive\">\n          {strings.endOfSurveyText}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n}\n"]}
+{"version":3,"file":"ThankYouForFeedbackPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ThankYouForFeedbackPage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAsB,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,OAAO,CACL,oBAAC,KAAK,IAAC,YAAY,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,gBAAgB;QAC9F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,gBAAgB;YACpE,KAAK,CAAC,QAAQ,IAAI,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI;YAClE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC,eAAa,WAAW,EAAE,IAAI,EAAC,OAAO,IACzF,OAAO,CAAC,eAAe,CACnB,CACD,CACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CallCompositeIcon, CallCompositeIcons } from '../../common/icons';\nimport { containerItemGap, containerStyle, titleStyles } from '../styles/NoticePage.styles';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface ThankYouForFeedbackPageProps {\n  iconName?: keyof CallCompositeIcons;\n}\n\n/**\n * Page shown after the survey is submitted.\n * @private\n */\nexport function ThankYouForFeedbackPage(props: ThankYouForFeedbackPageProps): JSX.Element {\n  const strings = useLocale().strings.call;\n  return (\n    <Stack verticalFill verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={'thank-you-page'} aria-atomic>\n      <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>\n        {props.iconName && <CallCompositeIcon iconName={props.iconName} />}\n        <Text className={mergeStyles(titleStyles)} tabIndex={0} aria-live={'assertive'} role=\"alert\">\n          {strings.endOfSurveyText}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n}\n"]}

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

@@ -13,7 +13,7 @@ export const overlayContainerStyle = {
 export const titleStyle = (palette, isVideoReady) => {
     return {
         fontSize: '1rem',
-        color: isVideoReady ? 'white' : palette.themePrimary,
+        color: isVideoReady ? 'white' : palette.neutralPrimary,
         textAlign: 'center'
     };
 };
@@ -28,7 +28,7 @@ export const videoTileStyles = {
  */
 export const moreDetailsStyle = (palette, isVideoReady) => ({
     fontSize: '0.75rem',
-    color: isVideoReady ? 'white' : palette.themePrimary,
+    color: isVideoReady ? 'white' : palette.neutralPrimary,
     textAlign: 'center'
 });
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LobbyTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAW;IAC3C,0DAA0D;IAC1D,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyD,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE;IACxG,OAAO;QACL,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;QACpD,SAAS,EAAE,QAAQ;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAiB,EAAE,YAAqB,EAAU,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;IACpD,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAqB;IAClE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CAC3D,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPalette, IStackItemStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const overlayContainerStyle: IStyle = {\n  // Ensure some space around the text on a narrow viewport.\n  margin: '1rem'\n};\n\n/**\n * @private\n */\nexport const titleStyle: (palette: IPalette, isVideoReady: boolean) => IStyle = (palette, isVideoReady) => {\n  return {\n    fontSize: '1rem',\n    color: isVideoReady ? 'white' : palette.themePrimary,\n    textAlign: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: { height: '100%', width: '100%' }\n};\n\n/**\n * @private\n */\nexport const moreDetailsStyle = (palette: IPalette, isVideoReady: boolean): IStyle => ({\n  fontSize: '0.75rem',\n  color: isVideoReady ? 'white' : palette.themePrimary,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const localCameraSwitcherContainerStyles: IStackItemStyles = {\n  root: { position: 'absolute', top: '0rem', right: '0rem' }\n};\n"]}
+{"version":3,"file":"LobbyTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LobbyTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAW;IAC3C,0DAA0D;IAC1D,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyD,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE;IACxG,OAAO;QACL,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc;QACtD,SAAS,EAAE,QAAQ;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAiB,EAAE,YAAqB,EAAU,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc;IACtD,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAqB;IAClE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CAC3D,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPalette, IStackItemStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const overlayContainerStyle: IStyle = {\n  // Ensure some space around the text on a narrow viewport.\n  margin: '1rem'\n};\n\n/**\n * @private\n */\nexport const titleStyle: (palette: IPalette, isVideoReady: boolean) => IStyle = (palette, isVideoReady) => {\n  return {\n    fontSize: '1rem',\n    color: isVideoReady ? 'white' : palette.neutralPrimary,\n    textAlign: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: { height: '100%', width: '100%' }\n};\n\n/**\n * @private\n */\nexport const moreDetailsStyle = (palette: IPalette, isVideoReady: boolean): IStyle => ({\n  fontSize: '0.75rem',\n  color: isVideoReady ? 'white' : palette.neutralPrimary,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const localCameraSwitcherContainerStyles: IStackItemStyles = {\n  root: { position: 'absolute', top: '0rem', right: '0rem' }\n};\n"]}

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

@@ -60,9 +60,15 @@ export const CallingCaptionsBanner = (props) => {
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
+    const containerAriaLabel = // 3 cases, captions only, RTT only, captions + RTT we adjust the aria-label accordingly
+     captionsBannerProps.isCaptionsOn && !(props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)
+        ? strings.liveCaptionsLabel
+        : !captionsBannerProps.isCaptionsOn && (props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)
+            ? strings.realTimeTextLabel
+            : strings.captionsAndRealTimeTextContainerTitle;
     return (React.createElement(React.Fragment, null,
         isCaptionsSettingsOpen && (React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
-        React.createElement("div", { className: containerClassName, role: "region", "aria-label": strings.liveCaptionsLabel },
+        React.createElement("div", { className: containerClassName, role: "region", "aria-label": containerAriaLabel },
             React.createElement(Stack, { horizontalAlign: "center" },
                 React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
                     React.createElement(CaptionsBanner, Object.assign({ captionsOptions: props.captionsOptions, onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings }, captionsBannerProps, { isRealTimeTextOn: props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn })))),

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

@@ -1 +1 @@
-{"version":3,"file":"CallingCaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingCaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { CaptionsBanner, CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\nconst mobileViewBannerWidth = '95%';\n\n/** @private */\nexport const CallingCaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  isRealTimeTextOn?: boolean;\n}): JSX.Element => {\n  const captionsBannerProps = usePropsFor(CaptionsBanner);\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n\n  const containerClassName = mergeStyles(\n    props.captionsOptions?.height === 'full'\n      ? mergeStyles({\n          position: 'absolute',\n          height: '100%',\n          width: '100%'\n        })\n      : { position: 'relative' }\n  );\n\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  const strings = useLocale().strings.call;\n\n  const captionsBannerStrings: CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText,\n\n    realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,\n\n    realTimeTextInputErrorMessage: strings.realTimeTextInputErrorMessage,\n\n    realTimeTextBannerContent: strings.realTimeTextBannerContent,\n\n    realTimeTextBannerTitle: strings.realTimeTextBannerTitle,\n\n    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel,\n\n    captionsOnlyContainerTitle: strings.captionsOnlyContainerTitle,\n\n    realTimeTextOnlyContainerTitle: strings.realTimeTextOnlyContainerTitle,\n\n    captionsAndRealTimeTextContainerTitle: strings.captionsAndRealTimeTextContainerTitle,\n\n    expandButtonAriaLabel: strings.expandButtonAriaLabel,\n\n    minimizeButtonAriaLabel: strings.minimizeButtonAriaLabel\n  };\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  const { innerWidth: width } = window;\n\n  const [windowWidth, setWindowWidth] = useState(width);\n\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n\n  return (\n    <>\n      {isCaptionsSettingsOpen && (\n        <CallingCaptionsSettingsModal\n          showCaptionsSettingsModal={isCaptionsSettingsOpen}\n          onDismissCaptionsSettings={onDismissCaptionsSettings}\n          changeCaptionLanguage={props.useTeamsCaptions}\n        />\n      )}\n      {\n        <div className={containerClassName} role=\"region\" aria-label={strings.liveCaptionsLabel}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <CaptionsBanner\n                captionsOptions={props.captionsOptions}\n                onRenderAvatar={onRenderAvatar}\n                formFactor={props.isMobile ? 'compact' : 'default'}\n                strings={captionsBannerStrings}\n                {...captionsBannerProps}\n                isRealTimeTextOn={props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn}\n              />\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"]}
+{"version":3,"file":"CallingCaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingCaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { CaptionsBanner, CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\nconst mobileViewBannerWidth = '95%';\n\n/** @private */\nexport const CallingCaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  isRealTimeTextOn?: boolean;\n}): JSX.Element => {\n  const captionsBannerProps = usePropsFor(CaptionsBanner);\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n\n  const containerClassName = mergeStyles(\n    props.captionsOptions?.height === 'full'\n      ? mergeStyles({\n          position: 'absolute',\n          height: '100%',\n          width: '100%'\n        })\n      : { position: 'relative' }\n  );\n\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  const strings = useLocale().strings.call;\n\n  const captionsBannerStrings: CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText,\n\n    realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,\n\n    realTimeTextInputErrorMessage: strings.realTimeTextInputErrorMessage,\n\n    realTimeTextBannerContent: strings.realTimeTextBannerContent,\n\n    realTimeTextBannerTitle: strings.realTimeTextBannerTitle,\n\n    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel,\n\n    captionsOnlyContainerTitle: strings.captionsOnlyContainerTitle,\n\n    realTimeTextOnlyContainerTitle: strings.realTimeTextOnlyContainerTitle,\n\n    captionsAndRealTimeTextContainerTitle: strings.captionsAndRealTimeTextContainerTitle,\n\n    expandButtonAriaLabel: strings.expandButtonAriaLabel,\n\n    minimizeButtonAriaLabel: strings.minimizeButtonAriaLabel\n  };\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  const { innerWidth: width } = window;\n\n  const [windowWidth, setWindowWidth] = useState(width);\n\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n\n  const containerAriaLabel = // 3 cases, captions only, RTT only, captions + RTT we adjust the aria-label accordingly\n    captionsBannerProps.isCaptionsOn && !(props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)\n      ? strings.liveCaptionsLabel\n      : !captionsBannerProps.isCaptionsOn && (props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn)\n        ? strings.realTimeTextLabel\n        : strings.captionsAndRealTimeTextContainerTitle;\n\n  return (\n    <>\n      {isCaptionsSettingsOpen && (\n        <CallingCaptionsSettingsModal\n          showCaptionsSettingsModal={isCaptionsSettingsOpen}\n          onDismissCaptionsSettings={onDismissCaptionsSettings}\n          changeCaptionLanguage={props.useTeamsCaptions}\n        />\n      )}\n      {\n        <div className={containerClassName} role=\"region\" aria-label={containerAriaLabel}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <CaptionsBanner\n                captionsOptions={props.captionsOptions}\n                onRenderAvatar={onRenderAvatar}\n                formFactor={props.isMobile ? 'compact' : 'default'}\n                strings={captionsBannerStrings}\n                {...captionsBannerProps}\n                isRealTimeTextOn={props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn}\n              />\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"]}

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

@@ -33,7 +33,7 @@ export const Survey = (props) => {
         showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
         showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
         !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
-            React.createElement(Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
+            React.createElement(Text, { className: questionTextStyle(theme), role: "heading" }, strings.surveyTitle),
             React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
                     setShowSubmitFeedbackButton(showButton);
                 }, setRatings: (rating) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Survey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/Survey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\nimport { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';\nimport { SurveyContent } from './SurveyContent';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { CallCompositeIcons } from './icons';\nimport { NoticePage } from '../CallComposite/pages/NoticePage';\nimport { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';\nimport { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';\n\n/** @private */\nexport const Survey = (props: {\n  iconName?: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  disableStartCallButton?: boolean;\n  isMobile?: boolean;\n  onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n  /**\n   * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n   * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n   */\n  onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n  onSurveySubmittedCustom?: (\n    callId: string,\n    surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions\n  ) => Promise<void>;\n}): JSX.Element => {\n  const {\n    onSubmitSurvey,\n    onSurveySubmittedCustom,\n    onSurveyClosed,\n    iconName,\n    title,\n    moreDetails,\n    disableStartCallButton,\n    isMobile\n  } = props;\n  const strings = useLocale().strings.call;\n  const [ratings, setRatings] = useState(0);\n  const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n  const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n  const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n\n  const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState<boolean>(false);\n\n  const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState<boolean>(false);\n\n  const [submitButtonDisabled, setSubmitButtonDisabled] = useState<boolean>(false);\n\n  const theme = useTheme();\n\n  return (\n    <>\n      {showDefaultAfterSubmitScreen && <ThankYouForFeedbackPage iconName={iconName} />}\n      {showDefaultAfterDismissedScreen && (\n        <NoticePage\n          iconName={iconName}\n          title={title}\n          moreDetails={moreDetails}\n          dataUiId={'left-call-page'}\n          disableStartCallButton={disableStartCallButton}\n        />\n      )}\n      {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (\n        <Stack verticalAlign=\"center\" className={surveyContainerStyle(!!isMobile)}>\n          <Text className={questionTextStyle(theme)}>{strings.surveyTitle}</Text>\n          <SurveyContent\n            setShowSubmitFeedbackButton={(showButton: boolean) => {\n              setShowSubmitFeedbackButton(showButton);\n            }}\n            setRatings={(rating: number) => {\n              setRatings(rating);\n            }}\n            setIssuesSelected={(issuesSelected: CallSurvey) => {\n              setIssuesSelected(issuesSelected);\n            }}\n            setImprovementSuggestions={\n              onSurveySubmittedCustom\n                ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n                    setImprovementSuggestions(improvementSuggestions);\n                  }\n                : undefined\n            }\n          />\n          <Stack horizontal horizontalAlign=\"end\">\n            <DefaultButton\n              style={{ marginTop: '1rem', marginRight: '0.5rem' }}\n              onClick={() => {\n                if (onSurveyClosed) {\n                  onSurveyClosed('skipped');\n                } else {\n                  setShowDefaultAfterDismissedScreen(true);\n                }\n              }}\n            >\n              {strings.surveySkipButtonLabel}\n            </DefaultButton>\n\n            {showSubmitFeedbackButton && (\n              <PrimaryButton\n                disabled={submitButtonDisabled}\n                style={{ marginTop: '1rem', marginLeft: '0.5rem' }}\n                onClick={async () => {\n                  const surveyResults: CallSurvey = { overallRating: { score: ratings } };\n                  if (issuesSelected?.overallRating) {\n                    surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };\n                  }\n                  if (issuesSelected?.audioRating) {\n                    surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };\n                  }\n                  if (issuesSelected?.screenshareRating) {\n                    surveyResults.screenshareRating = {\n                      score: ratings,\n                      issues: issuesSelected.screenshareRating.issues\n                    };\n                  }\n                  if (issuesSelected?.videoRating) {\n                    surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };\n                  }\n                  if (onSubmitSurvey) {\n                    // disable submit button while waiting for the survey to submit\n                    setSubmitButtonDisabled(true);\n                    // submitting survey results to calling\n                    onSubmitSurvey(surveyResults)\n                      .then((res) => {\n                        // if contoso provided callback to handle their own survey data, send over the submitted survey results\n                        if (onSurveySubmittedCustom) {\n                          onSurveySubmittedCustom(\n                            res?.callId ?? '',\n                            res?.id ?? '',\n                            surveyResults,\n                            improvementSuggestions\n                          ).then(() => setSubmitButtonDisabled(false));\n                        } else {\n                          // if callback is not provided, enable the submit button after survey is submitted\n                          setSubmitButtonDisabled(false);\n                        }\n\n                        // redirect to new screen\n                        if (onSurveyClosed) {\n                          // redirect to new screen according to contoso's callback set up\n                          onSurveyClosed('sent');\n                        } else {\n                          // if call back not provided, redirect to default screen\n                          setShowDefaultAfterSubmitScreen(true);\n                        }\n                      })\n                      .catch((e) => {\n                        // if there is an error submitting the survey, log the error in the console\n                        console.log('error when submitting survey: ' + e);\n                        // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen\n                        if (onSurveyClosed) {\n                          onSurveyClosed('error', e);\n                        }\n                      });\n                  }\n                }}\n              >\n                {strings.surveyConfirmButtonLabel}\n              </PrimaryButton>\n            )}\n          </Stack>\n        </Stack>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Survey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/Survey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\nimport { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';\nimport { SurveyContent } from './SurveyContent';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { CallCompositeIcons } from './icons';\nimport { NoticePage } from '../CallComposite/pages/NoticePage';\nimport { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';\nimport { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';\n\n/** @private */\nexport const Survey = (props: {\n  iconName?: keyof CallCompositeIcons;\n  title: string;\n  moreDetails?: string;\n  disableStartCallButton?: boolean;\n  isMobile?: boolean;\n  onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n  /**\n   * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n   * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n   */\n  onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n  onSurveySubmittedCustom?: (\n    callId: string,\n    surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions\n  ) => Promise<void>;\n}): JSX.Element => {\n  const {\n    onSubmitSurvey,\n    onSurveySubmittedCustom,\n    onSurveyClosed,\n    iconName,\n    title,\n    moreDetails,\n    disableStartCallButton,\n    isMobile\n  } = props;\n  const strings = useLocale().strings.call;\n  const [ratings, setRatings] = useState(0);\n  const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n  const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n  const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n\n  const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState<boolean>(false);\n\n  const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState<boolean>(false);\n\n  const [submitButtonDisabled, setSubmitButtonDisabled] = useState<boolean>(false);\n\n  const theme = useTheme();\n\n  return (\n    <>\n      {showDefaultAfterSubmitScreen && <ThankYouForFeedbackPage iconName={iconName} />}\n      {showDefaultAfterDismissedScreen && (\n        <NoticePage\n          iconName={iconName}\n          title={title}\n          moreDetails={moreDetails}\n          dataUiId={'left-call-page'}\n          disableStartCallButton={disableStartCallButton}\n        />\n      )}\n      {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (\n        <Stack verticalAlign=\"center\" className={surveyContainerStyle(!!isMobile)}>\n          <Text className={questionTextStyle(theme)} role=\"heading\">\n            {strings.surveyTitle}\n          </Text>\n          <SurveyContent\n            setShowSubmitFeedbackButton={(showButton: boolean) => {\n              setShowSubmitFeedbackButton(showButton);\n            }}\n            setRatings={(rating: number) => {\n              setRatings(rating);\n            }}\n            setIssuesSelected={(issuesSelected: CallSurvey) => {\n              setIssuesSelected(issuesSelected);\n            }}\n            setImprovementSuggestions={\n              onSurveySubmittedCustom\n                ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n                    setImprovementSuggestions(improvementSuggestions);\n                  }\n                : undefined\n            }\n          />\n          <Stack horizontal horizontalAlign=\"end\">\n            <DefaultButton\n              style={{ marginTop: '1rem', marginRight: '0.5rem' }}\n              onClick={() => {\n                if (onSurveyClosed) {\n                  onSurveyClosed('skipped');\n                } else {\n                  setShowDefaultAfterDismissedScreen(true);\n                }\n              }}\n            >\n              {strings.surveySkipButtonLabel}\n            </DefaultButton>\n\n            {showSubmitFeedbackButton && (\n              <PrimaryButton\n                disabled={submitButtonDisabled}\n                style={{ marginTop: '1rem', marginLeft: '0.5rem' }}\n                onClick={async () => {\n                  const surveyResults: CallSurvey = { overallRating: { score: ratings } };\n                  if (issuesSelected?.overallRating) {\n                    surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };\n                  }\n                  if (issuesSelected?.audioRating) {\n                    surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };\n                  }\n                  if (issuesSelected?.screenshareRating) {\n                    surveyResults.screenshareRating = {\n                      score: ratings,\n                      issues: issuesSelected.screenshareRating.issues\n                    };\n                  }\n                  if (issuesSelected?.videoRating) {\n                    surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };\n                  }\n                  if (onSubmitSurvey) {\n                    // disable submit button while waiting for the survey to submit\n                    setSubmitButtonDisabled(true);\n                    // submitting survey results to calling\n                    onSubmitSurvey(surveyResults)\n                      .then((res) => {\n                        // if contoso provided callback to handle their own survey data, send over the submitted survey results\n                        if (onSurveySubmittedCustom) {\n                          onSurveySubmittedCustom(\n                            res?.callId ?? '',\n                            res?.id ?? '',\n                            surveyResults,\n                            improvementSuggestions\n                          ).then(() => setSubmitButtonDisabled(false));\n                        } else {\n                          // if callback is not provided, enable the submit button after survey is submitted\n                          setSubmitButtonDisabled(false);\n                        }\n\n                        // redirect to new screen\n                        if (onSurveyClosed) {\n                          // redirect to new screen according to contoso's callback set up\n                          onSurveyClosed('sent');\n                        } else {\n                          // if call back not provided, redirect to default screen\n                          setShowDefaultAfterSubmitScreen(true);\n                        }\n                      })\n                      .catch((e) => {\n                        // if there is an error submitting the survey, log the error in the console\n                        console.log('error when submitting survey: ' + e);\n                        // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen\n                        if (onSurveyClosed) {\n                          onSurveyClosed('error', e);\n                        }\n                      });\n                  }\n                }}\n              >\n                {strings.surveyConfirmButtonLabel}\n              </PrimaryButton>\n            )}\n          </Stack>\n        </Stack>\n      )}\n    </>\n  );\n};\n"]}

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

@@ -16,17 +16,13 @@ export const questionTextStyle = (theme) => mergeStyles({
  */
 export const surveyContainerStyle = (isMobile) => mergeStyles(isMobile
     ? {
-        width: '20rem',
-        position: 'absolute',
-        top: '10%',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        maxWidth: '20rem',
+        margin: '0 auto',
+        justifyContent: 'center'
     }
     : {
-        width: '24rem',
-        position: 'absolute',
-        top: '20%',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        maxWidth: '24rem',
+        margin: '0 auto',
+        justifyContent: 'center'
     });
 //# sourceMappingURL=Survey.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Survey.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/Survey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAU,EAAE,CACxD,WAAW,CAAC;IACV,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;CACpC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAiB,EAAU,EAAE,CAChE,WAAW,CACT,QAAQ;IACN,CAAC,CAAC;QACE,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,kBAAkB;KAC9B;IACH,CAAC,CAAC;QACE,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,kBAAkB;KAC9B,CACN,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const questionTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(20),\n    color: theme.palette.neutralPrimary\n  });\n\n/**\n * @private\n */\nexport const surveyContainerStyle = (isMobile: boolean): string =>\n  mergeStyles(\n    isMobile\n      ? {\n          width: '20rem',\n          position: 'absolute',\n          top: '10%',\n          left: '50%',\n          transform: 'translateX(-50%)'\n        }\n      : {\n          width: '24rem',\n          position: 'absolute',\n          top: '20%',\n          left: '50%',\n          transform: 'translateX(-50%)'\n        }\n  );\n"]}
+{"version":3,"file":"Survey.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/Survey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAU,EAAE,CACxD,WAAW,CAAC;IACV,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;CACpC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAiB,EAAU,EAAE,CAChE,WAAW,CACT,QAAQ;IACN,CAAC,CAAC;QACE,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,QAAQ;QAChB,cAAc,EAAE,QAAQ;KACzB;IACH,CAAC,CAAC;QACE,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,QAAQ;QAChB,cAAc,EAAE,QAAQ;KACzB,CACN,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const questionTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(20),\n    color: theme.palette.neutralPrimary\n  });\n\n/**\n * @private\n */\nexport const surveyContainerStyle = (isMobile: boolean): string =>\n  mergeStyles(\n    isMobile\n      ? {\n          maxWidth: '20rem',\n          margin: '0 auto',\n          justifyContent: 'center'\n        }\n      : {\n          maxWidth: '24rem',\n          margin: '0 auto',\n          justifyContent: 'center'\n        }\n  );\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.32.0-alpha-202510230018",
+  "version": "1.32.0-alpha-202511181633",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -55,8 +55,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@azure/communication-calling-effects": "^1.3.1",
-    "@azure/communication-calling": "1.40.1-beta.1",
+    "@azure/communication-calling-effects": "^1.3.2",
+    "@azure/communication-calling": "1.41.1-beta.1",
     "@azure/communication-chat": "1.6.0-beta.7",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",