@azure/communication-react 1.22.0-beta.1 → 1.23.0-alpha-202412190017

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

@@ -1,25 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(call-readiness) */
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
 import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
 import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+/* @conditional-compile-remove(call-readiness) */
 import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageCameraDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
     const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
     const devicePermissionDropdownStringsCamera = {
         placeHolderText: 'Enable Camera (optional)',
         actionButtonContent: 'Allow'
     };
-    const cameraBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
-            video: true,
-            audio: false
-        }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: {
-                height: '1.25rem',
-                marginRight: '0.625rem'
-            } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby }));
+    /* @conditional-compile-remove(call-readiness) */
+    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby })));
+    /* @conditional-compile-remove(call-readiness) */
     return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,qBAAqB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC1H,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,KAAK;SACb,EAAE,OAAO,EAAE,qCAAqC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE;gBAClH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IAC9F,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAC3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  const cameraBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: true,\n    audio: false\n  }} strings={devicePermissionDropdownStringsCamera} icon={<CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} ariaLabelledby={props.ariaLabelledby} />;\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n  return props.cameraGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAcvD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,iDAAiD;IACjD,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EACxC,OAAO,EAAE,qCAAqC,EAC9C,IAAI,EACF,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAE/G,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAC5C,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) */\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  useTheme,\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(call-readiness) */\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraBlockedDropdown = (\n    <_DevicePermissionDropdown\n      {...props.dropdownProps}\n      styles={dropDownStyles(theme)}\n      constrain={{ video: true, audio: false }}\n      strings={devicePermissionDropdownStringsCamera}\n      icon={\n        <CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />\n      }\n      onClick={props.onClickEnableDevicePermission}\n      ariaLabelledby={props.ariaLabelledby}\n    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n  return props.cameraGrantedDropdown;\n};\n"]}

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

@@ -7,19 +7,29 @@ import { FocusZone } from '@fluentui/react';
  * @private
  */
 export const ConfigurationPageErrorBar = (props) => {
-    const { errorBarProps, showTroubleShootingErrorBar = false, onPermissionsTroubleshootingClick, onNetworkingTroubleShootingClick, permissionsState } = props;
+    const { errorBarProps, 
+    /* @conditional-compile-remove(call-readiness) */
+    showTroubleShootingErrorBar = false, 
+    /* @conditional-compile-remove(call-readiness) */
+    onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    permissionsState } = props;
+    /* @conditional-compile-remove(call-readiness) */
     const permissionTroubleshootingGuideStrings = {
         devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
         networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
         dismissButtonText: 'OK'
     };
+    /* @conditional-compile-remove(call-readiness) */
     if (showTroubleShootingErrorBar) {
-        return React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError }));
+        return (React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError })));
     }
     if (errorBarProps.activeErrorMessages.length === 0) {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(FocusZone, { shouldFocusOnMount: true },
-        React.createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError })));
+    return (React.createElement(FocusZone, { shouldFocusOnMount: true },
+        React.createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError }))));
 };
 //# sourceMappingURL=ConfigurationPageErrorBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwK,6BAA6B,EAAE,QAAQ,EAAE,4CAAmC;AAG3P,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa,EACb,2BAA2B,GAAG,KAAK,EACnC,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IACF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,oBAAC,6BAA6B,kBAAC,2BAA2B,EAAE,qCAAqC,EAAE,iCAAiC,EAAE,iCAAiC,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IACtV,CAAC;IACD,IAAI,aAAa,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,SAAS,IAAC,kBAAkB;QAChC,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAC3D,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps, ActiveErrorMessage, ErrorBarProps, _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBar, ErrorBar } from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\nimport { FocusZone } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    showTroubleShootingErrorBar = false,\n    onPermissionsTroubleshootingClick,\n    onNetworkingTroubleShootingClick,\n    permissionsState\n  } = props;\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n  if (showTroubleShootingErrorBar) {\n    return <_TroubleshootingGuideErrorBar troubleshootingGuideStrings={permissionTroubleshootingGuideStrings} onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick} onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick} permissionsState={permissionsState} {...errorBarProps} onDismissError={props.onDismissError} />;\n  }\n  if (errorBarProps.activeErrorMessages.length === 0) {\n    return <></>;\n  }\n  return <FocusZone shouldFocusOnMount>\n      <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n    </FocusZone>;\n};"]}
+{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;AAGpC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa;IACb,iDAAiD;IACjD,2BAA2B,GAAG,KAAK;IACnC,iDAAiD;IACjD,iCAAiC;IACjC,iDAAiD;IACjD,gCAAgC;IAChC,iDAAiD;IACjD,gBAAgB,EACjB,GAAG,KAAK,CAAC;IAEV,iDAAiD;IACjD,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,iDAAiD;IACjD,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,IACjB,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,kBAAkB;QAC3B,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAC3D,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps,\n  ActiveErrorMessage,\n  ErrorBarProps,\n  _TroubleshootingGuideErrorBarStrings,\n  _TroubleshootingGuideErrorBar,\n  ErrorBar\n} from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\nimport { FocusZone } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    /* @conditional-compile-remove(call-readiness) */\n    showTroubleShootingErrorBar = false,\n    /* @conditional-compile-remove(call-readiness) */\n    onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    onNetworkingTroubleShootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    permissionsState\n  } = props;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  if (showTroubleShootingErrorBar) {\n    return (\n      <_TroubleshootingGuideErrorBar\n        troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}\n        onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n        onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}\n        permissionsState={permissionsState}\n        {...errorBarProps}\n        onDismissError={props.onDismissError}\n      />\n    );\n  }\n\n  if (errorBarProps.activeErrorMessages.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <FocusZone shouldFocusOnMount>\n      <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n    </FocusZone>\n  );\n};\n"]}

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

@@ -1,25 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(call-readiness) */
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
 import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
 import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+/* @conditional-compile-remove(call-readiness) */
 import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageMicDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
     const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
     const devicePermissionDropdownStringsMicrophone = {
         placeHolderText: 'Enable Microphone (required)',
         actionButtonContent: 'Allow'
     };
-    const microphoneBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
-            video: false,
-            audio: true
-        }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: {
-                height: '1.25rem',
-                marginRight: '0.625rem'
-            } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby }));
+    /* @conditional-compile-remove(call-readiness) */
+    const microphoneBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby })));
+    /* @conditional-compile-remove(call-readiness) */
     return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
     return props.micGrantedDropdown;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,yBAAyB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC9H,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,IAAI;SACZ,EAAE,OAAO,EAAE,yCAAyC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE;gBACnH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IAC9F,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IACzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Microphone (required)',\n    actionButtonContent: 'Allow'\n  };\n  const microphoneBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: false,\n    audio: true\n  }} strings={devicePermissionDropdownStringsMicrophone} icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} ariaLabelledby={props.ariaLabelledby} />;\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n  return props.micGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAcvD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,iDAAiD;IACjD,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IAEF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,CAChC,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EACxC,OAAO,EAAE,yCAAyC,EAClD,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAChH,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAC5C,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAEzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) */\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  useTheme,\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const theme = useTheme();\n  /* @conditional-compile-remove(call-readiness) */\n  const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Microphone (required)',\n    actionButtonContent: 'Allow'\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneBlockedDropdown = (\n    <_DevicePermissionDropdown\n      {...props.dropdownProps}\n      styles={dropDownStyles(theme)}\n      constrain={{ video: false, audio: true }}\n      strings={devicePermissionDropdownStringsMicrophone}\n      icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />}\n      onClick={props.onClickEnableDevicePermission}\n      ariaLabelledby={props.ariaLabelledby}\n    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n\n  return props.micGrantedDropdown;\n};\n"]}

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

@@ -19,12 +19,13 @@ export const ExpandedLocalVideoTile = (props) => {
     const renderElement = videoStream === null || videoStream === void 0 ? void 0 : videoStream.renderElement;
     useEffect(() => {
         if (videoStream && isVideoReady) {
-            props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));
+            props.onCreateLocalStreamView &&
+                props.onCreateLocalStreamView(localVideoViewOptions).catch((err) => console.log('Can not render video', err));
         }
     }, [isVideoReady, videoStream, props, renderElement]);
-    return React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
-        React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && React.createElement(React.Fragment, null,
+    return (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
+        React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && (React.createElement(React.Fragment, null,
             React.createElement(Stack, { className: mergeStyles(overlayBackgroundStyles(isVideoReady)) }),
-            React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))));
+            React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))))));
 };
 //# sourceMappingURL=ExpandedLocalVideoTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAsB,SAAS,EAAmD,4CAAmC;AACzI,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1I,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAC1D,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAWxB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB,IAAI,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/I,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QACvF,oBAAC,SAAS,IAAC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,wBAAwB,IAC7K,KAAK,CAAC,cAAc,IAAI;YACrB,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,GAAI;YACxE,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACK,CACN,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { StreamMedia, VideoGalleryStream, VideoTile, VideoStreamOptions, CreateVideoStreamViewResult } from '@internal/react-components';\nimport { containerStyles, overlayBackgroundStyles, overlayContentStyles, videoTileStyles } from '../styles/ExpandedLocalVideoTile.styles';\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile styles={videoTileStyles} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined} onRenderPlaceholder={onRenderEmptyPlaceholder}>\n        {props.overlayContent && <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>}\n      </VideoTile>\n    </Stack>;\n};"]}
+{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EACL,WAAW,EAEX,SAAS,EAGV,4CAAmC;AACpC,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EAChB,MAAM,yCAAyC,CAAC;AAEjD,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAE1D,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAWxB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB;gBAC3B,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAClH,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QAClF,oBAAC,SAAS,IACR,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAC7F,mBAAmB,EAAE,wBAAwB,IAE5C,KAAK,CAAC,cAAc,IAAI,CACvB;YACE,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,GAAI;YACxE,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACJ,CACS,CACN,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport {\n  StreamMedia,\n  VideoGalleryStream,\n  VideoTile,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '@internal/react-components';\nimport {\n  containerStyles,\n  overlayBackgroundStyles,\n  overlayContentStyles,\n  videoTileStyles\n} from '../styles/ExpandedLocalVideoTile.styles';\n\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView &&\n        props.onCreateLocalStreamView(localVideoViewOptions).catch((err) => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile\n        styles={videoTileStyles}\n        renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined}\n        onRenderPlaceholder={onRenderEmptyPlaceholder}\n      >\n        {props.overlayContent && (\n          <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>\n        )}\n      </VideoTile>\n    </Stack>\n  );\n};\n"]}

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

@@ -43,7 +43,7 @@ export const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
-    return React.createElement(Stack, { styles: paneStyles },
+    return (React.createElement(Stack, { styles: paneStyles },
         React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
             React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React.createElement(Text, { styles: holdPaneLabelStyles, role: "alert", "aria-live": "assertive" }, strings.holdScreenLabel),
@@ -56,7 +56,7 @@ export const HoldPane = () => {
                         setResumingCall(false);
                         throw e;
                     }
-                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true })));
+                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -72,8 +72,8 @@ const getHours = (time) => {
  */
 export const getReadableTime = (time) => {
     const hours = getHours(time);
-    const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);
-    const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);
+    const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
     return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
 };
 //# sourceMappingURL=HoldPane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,4CAAmC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAS5I;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAgB,EAAE;;IACxC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAoB;QAC/B,eAAe,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,mCAAI,EAAE;QAC1D,qBAAqB,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,mCAAI,EAAE;QACtE,yBAAyB,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,mCAAI,EAAE;QAC9E,uBAAuB,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uBAAuB,mCAAI,EAAE;QAC1E,2BAA2B,EAAE,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,mCAAI,EAAE;KACnF,CAAC;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACjE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QAC5B,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB;YAC7C,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,WAAW,CAAQ;YACvD,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,eAAW,WAAW,IAClE,OAAO,CAAC,eAAe,CACnB;YACP,oBAAC,aAAa,IAAC,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,SAAS,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,2BAA2B,EAAE,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,GAAS,EAAE;oBAClR,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtB,IAAI,CAAC;wBACH,MAAM,eAAe,CAAC,YAAY,EAAE,CAAC;oBACvC,CAAC;oBAAC,OAAO,CAAC,EAAE,CAAC;wBACX,eAAe,CAAC,KAAK,CAAC,CAAC;wBACvB,MAAM,CAAC,CAAC;oBACV,CAAC;gBACH,CAAC,CAAA,gBAAa,8BAA8B,EAAC,SAAS,SAAiB,CAC/D,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;AACjC,CAAC,CAAC;AACF,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IACxC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAY,EAAU,EAAE;IACtD,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,IAAI,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { HoldButton } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';\ninterface HoldPaneStrings {\n  holdScreenLabel: string;\n  resumeCallButtonLabel: string;\n  resumeCallButtonAriaLabel: string;\n  resumingCallButtonLabel: string;\n  resumingCallButtonAriaLabel: string;\n}\n\n/**\n * Hold pane to display when the user places themselves on hold\n *\n * @beta\n */\nexport const HoldPane = (): JSX.Element => {\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n  const strings: HoldPaneStrings = {\n    holdScreenLabel: locale.strings.call.holdScreenLabel ?? '',\n    resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel ?? '',\n    resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel ?? '',\n    resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel ?? '',\n    resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel ?? ''\n  };\n  const [time, setTime] = useState<number>(0);\n  const elapsedTime = getReadableTime(time);\n  const startTime = useRef(performance.now());\n  const [resumingCall, setResumingCall] = useState<boolean>(false);\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(performance.now() - startTime.current);\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [startTime]);\n  return <Stack styles={paneStyles}>\n      <Stack horizontal styles={holdPaneContentStyles}>\n        <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n        <Text styles={holdPaneLabelStyles} role=\"alert\" aria-live=\"assertive\">\n          {strings.holdScreenLabel}\n        </Text>\n        <PrimaryButton text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel} ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel} styles={resumeButtonStyles} disabled={resumingCall} onClick={async () => {\n        setResumingCall(true);\n        try {\n          await holdButtonProps.onToggleHold();\n        } catch (e) {\n          setResumingCall(false);\n          throw e;\n        }\n      }} data-ui-id=\"hold-page-resume-call-button\" autoFocus></PrimaryButton>\n      </Stack>\n    </Stack>;\n};\nconst getMinutes = (time: number): number => {\n  return Math.floor(getSeconds(time) / 60);\n};\nconst getSeconds = (time: number): number => {\n  return Math.floor(time / 1000);\n};\nconst getHours = (time: number): number => {\n  return Math.floor(getMinutes(time) / 60);\n};\n\n/**\n * @internal\n */\nexport const getReadableTime = (time: number): string => {\n  const hours = getHours(time);\n  const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);\n  const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);\n  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};"]}
+{"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { HoldButton } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport {\n  holdPaneContentStyles,\n  holdPaneLabelStyles,\n  holdPaneTimerStyles,\n  paneStyles,\n  resumeButtonStyles\n} from '../styles/HoldPane.styles';\n\ninterface HoldPaneStrings {\n  holdScreenLabel: string;\n  resumeCallButtonLabel: string;\n  resumeCallButtonAriaLabel: string;\n  resumingCallButtonLabel: string;\n  resumingCallButtonAriaLabel: string;\n}\n\n/**\n * Hold pane to display when the user places themselves on hold\n *\n * @beta\n */\nexport const HoldPane = (): JSX.Element => {\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n\n  const strings: HoldPaneStrings = {\n    holdScreenLabel: locale.strings.call.holdScreenLabel ?? '',\n    resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel ?? '',\n    resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel ?? '',\n    resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel ?? '',\n    resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel ?? ''\n  };\n\n  const [time, setTime] = useState<number>(0);\n\n  const elapsedTime = getReadableTime(time);\n\n  const startTime = useRef(performance.now());\n  const [resumingCall, setResumingCall] = useState<boolean>(false);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(performance.now() - startTime.current);\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [startTime]);\n\n  return (\n    <Stack styles={paneStyles}>\n      <Stack horizontal styles={holdPaneContentStyles}>\n        <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n        <Text styles={holdPaneLabelStyles} role=\"alert\" aria-live=\"assertive\">\n          {strings.holdScreenLabel}\n        </Text>\n        <PrimaryButton\n          text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel}\n          ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel}\n          styles={resumeButtonStyles}\n          disabled={resumingCall}\n          onClick={async () => {\n            setResumingCall(true);\n            try {\n              await holdButtonProps.onToggleHold();\n            } catch (e) {\n              setResumingCall(false);\n              throw e;\n            }\n          }}\n          data-ui-id=\"hold-page-resume-call-button\"\n          autoFocus\n        ></PrimaryButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst getMinutes = (time: number): number => {\n  return Math.floor(getSeconds(time) / 60);\n};\n\nconst getSeconds = (time: number): number => {\n  return Math.floor(time / 1000);\n};\n\nconst getHours = (time: number): number => {\n  return Math.floor(getMinutes(time) / 60);\n};\n\n/**\n * @internal\n */\nexport const getReadableTime = (time: number): string => {\n  const hours = getHours(time);\n  const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);\n  const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);\n  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};\n"]}

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

@@ -19,11 +19,11 @@ export const LobbyTile = (props) => {
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const palette = useTheme().palette;
     const handlers = useHandlers(ExpandedLocalVideoTile);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
-            props.showLocalVideoCameraCycleButton && isVideoReady && React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
-                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' }))),
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
+            props.showLocalVideoCameraCycleButton && isVideoReady && (React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
+                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' })))),
             React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
             React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle", role: "alert" }, props.overlayProps.title),
-            props.overlayProps.moreDetails && React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)) : undefined }, handlers));
+            props.overlayProps.moreDetails && (React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
 };
 //# sourceMappingURL=LobbyTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LobbyTile.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,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EAAE,kCAAkC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACrI,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,OAAO,oBAAC,sBAAsB,kBAAC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAAE,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAC1O,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBAC5G,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F;YACf,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,gBAAY,kBAAkB,EAAC,IAAI,EAAC,OAAO,IAC9H,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IAC1H,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACH,CAAC,CAAC,CAAC,SAAS,IAAM,QAAQ,EAAI,CAAC;AACjD,CAAC,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 { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { localCameraSwitcherContainerStyles, moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  return <ExpandedLocalVideoTile localParticipantVideoStream={props.localParticipantVideoStream} overlayContent={props.overlayProps ? <Stack verticalFill horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContainerStyle)} aria-atomic>\n            {props.showLocalVideoCameraCycleButton && isVideoReady && <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live=\"assertive\" data-ui-id=\"lobbyScreenTitle\" role=\"alert\">\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>}\n          </Stack> : undefined} {...handlers} />;\n};"]}
+{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LobbyTile.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,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EACL,kCAAkC,EAClC,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IAEvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IAExE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAG5C,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,CACxD,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBACpD,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F,CACd;YACD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAC/C,WAAW,gBACV,kBAAkB,EAC7B,IAAI,EAAC,OAAO,IAEX,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,CACjC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACzF,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACR,CACK,CACT,CAAC,CAAC,CAAC,SAAS,IAEX,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,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 { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport {\n  localCameraSwitcherContainerStyles,\n  moreDetailsStyle,\n  overlayContainerStyle,\n  titleStyle\n} from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        props.overlayProps ? (\n          <Stack\n            verticalFill\n            horizontalAlign=\"center\"\n            verticalAlign=\"center\"\n            className={mergeStyles(overlayContainerStyle)}\n            aria-atomic\n          >\n            {props.showLocalVideoCameraCycleButton && isVideoReady && (\n              <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>\n            )}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text\n              className={mergeStyles(titleStyle(palette, isVideoReady))}\n              aria-live=\"assertive\"\n              data-ui-id=\"lobbyScreenTitle\"\n              role=\"alert\"\n            >\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && (\n              <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>\n            )}\n          </Stack>\n        ) : undefined\n      }\n      {...handlers}\n    />\n  );\n};\n"]}

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

@@ -23,23 +23,32 @@ export const LocalAndRemotePIP = (props) => {
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
             raisedHand: localParticipant.raisedHand
         });
-    }, [localParticipant.displayName, (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);
+    }, [
+        localParticipant.displayName,
+        (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+        (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        localParticipant.raisedHand
+    ]);
     const remoteVideoTileProps = useMemo(() => {
         var _a, _b, _c;
-        return !remoteParticipant ? undefined : {
-            remoteParticipant: remoteParticipant,
-            onCreateRemoteStreamView,
-            onDisposeRemoteStreamView,
-            remoteVideoViewOptions,
-            displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
-            showLabel: false,
-            showMuteIndicator: false,
-            isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
-            isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
-            renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
-            userId: remoteParticipant.userId,
-            key: remoteParticipant.userId
-        };
+        return !remoteParticipant
+            ? undefined
+            : {
+                remoteParticipant: remoteParticipant,
+                onCreateRemoteStreamView,
+                onDisposeRemoteStreamView,
+                remoteVideoViewOptions,
+                displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
+                showLabel: false,
+                showMuteIndicator: false,
+                isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+                isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
+                renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
+                userId: remoteParticipant.userId,
+                key: remoteParticipant.userId
+            };
     }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
@@ -48,17 +57,19 @@ export const LocalAndRemotePIP = (props) => {
     }), [ariaLabel]);
     // If there are no remote participants, show the local participant as the primary tile
     const primaryTileProps = useMemo(() => ({
-        children: remoteVideoTileProps ? React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => { } })) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
+        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => { } }))) : (React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
         // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
         orientation: 'portrait'
     }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
     // If we are showing the local participant as the primary tile, show nothing for the secondary tile
-    const secondaryTileProps = useMemo(() => remoteVideoTileProps ? {
-        children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
-        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
-        orientation: 'portrait'
-    } : undefined, [localVideoTileProps, remoteVideoTileProps]);
-    return React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps });
+    const secondaryTileProps = useMemo(() => remoteVideoTileProps
+        ? {
+            children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
+            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
+            orientation: 'portrait'
+        }
+        : undefined, [localVideoTileProps, remoteVideoTileProps]);
+    return (React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps }));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',

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

@@ -1 +1 @@
-{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions, _LocalVideoTile, _RemoteVideoTile, _PictureInPictureInPicture, _PictureInPictureInPictureTileProps } from '@internal/react-components';\nimport { useLocale } from '../../localization';\nimport { RaisedHand } from '@internal/react-components';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n    raisedHand?: RaisedHand;\n  };\n  remoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const localVideoTileProps = useMemo(() => ({\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    displayName: localParticipant.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    showCameraSwitcherInLocalPreview: false,\n    isAvailable: localParticipant.videoStream?.isAvailable,\n    renderElement: localParticipant.videoStream?.renderElement,\n    raisedHand: localParticipant.raisedHand\n  }), [localParticipant.displayName, localParticipant.videoStream?.isAvailable, localParticipant.videoStream?.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);\n  const remoteVideoTileProps = useMemo(() => !remoteParticipant ? undefined : {\n    remoteParticipant: remoteParticipant,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    displayName: remoteParticipant?.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    isAvailable: remoteParticipant.videoStream?.isAvailable,\n    isReceiving: remoteParticipant.videoStream?.isReceiving,\n    renderElement: remoteParticipant.videoStream?.renderElement,\n    userId: remoteParticipant.userId,\n    key: remoteParticipant.userId\n  }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(() => ({\n    rootAriaLabel: ariaLabel\n  }), [ariaLabel]);\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(() => ({\n    children: remoteVideoTileProps ? <_RemoteVideoTile {...remoteVideoTileProps} strings={locale.component.strings.videoGallery} onLongTouch={() => {}} /> : <_LocalVideoTile {...localVideoTileProps} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(() => remoteVideoTileProps ? {\n    children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  } : undefined, [localVideoTileProps, remoteVideoTileProps]);\n  return <_PictureInPictureInPicture onClick={props.onClick} strings={strings} primaryTile={primaryTileProps} secondaryTile={secondaryTileProps} />;\n};\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};"]}
+{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  VideoGalleryStream,\n  VideoStreamOptions,\n  _LocalVideoTile,\n  _RemoteVideoTile,\n  _PictureInPictureInPicture,\n  _PictureInPictureInPictureTileProps\n} from '@internal/react-components';\n\nimport { useLocale } from '../../localization';\n\nimport { RaisedHand } from '@internal/react-components';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n    raisedHand?: RaisedHand;\n  };\n  remoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n\n  const localVideoTileProps = useMemo(\n    () => ({\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      displayName: localParticipant.displayName,\n      showLabel: false,\n      showMuteIndicator: false,\n      showCameraSwitcherInLocalPreview: false,\n      isAvailable: localParticipant.videoStream?.isAvailable,\n      renderElement: localParticipant.videoStream?.renderElement,\n      raisedHand: localParticipant.raisedHand\n    }),\n    [\n      localParticipant.displayName,\n      localParticipant.videoStream?.isAvailable,\n      localParticipant.videoStream?.renderElement,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localParticipant.raisedHand\n    ]\n  );\n\n  const remoteVideoTileProps = useMemo(\n    () =>\n      !remoteParticipant\n        ? undefined\n        : {\n            remoteParticipant: remoteParticipant,\n            onCreateRemoteStreamView,\n            onDisposeRemoteStreamView,\n            remoteVideoViewOptions,\n            displayName: remoteParticipant?.displayName,\n            showLabel: false,\n            showMuteIndicator: false,\n            isAvailable: remoteParticipant.videoStream?.isAvailable,\n            isReceiving: remoteParticipant.videoStream?.isReceiving,\n            renderElement: remoteParticipant.videoStream?.renderElement,\n            userId: remoteParticipant.userId,\n            key: remoteParticipant.userId\n          },\n    [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]\n  );\n\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(\n    () => ({\n      rootAriaLabel: ariaLabel\n    }),\n    [ariaLabel]\n  );\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(\n    () => ({\n      children: remoteVideoTileProps ? (\n        <_RemoteVideoTile\n          {...remoteVideoTileProps}\n          strings={locale.component.strings.videoGallery}\n          onLongTouch={() => {}}\n        />\n      ) : (\n        <_LocalVideoTile {...localVideoTileProps} />\n      ),\n      // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n      orientation: 'portrait'\n    }),\n    [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]\n  );\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(\n    () =>\n      remoteVideoTileProps\n        ? {\n            children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n            orientation: 'portrait'\n          }\n        : undefined,\n    [localVideoTileProps, remoteVideoTileProps]\n  );\n\n  return (\n    <_PictureInPictureInPicture\n      onClick={props.onClick}\n      strings={strings}\n      primaryTile={primaryTileProps}\n      secondaryTile={secondaryTileProps}\n    />\n  );\n};\n\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\n\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};\n"]}

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

@@ -20,6 +20,7 @@ import { deviceSelectionContainerStyles, dropDownStyles, dropDownTitleIconStyles
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';
 import { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';
+/* @conditional-compile-remove(call-readiness) */
 import { useHandlers } from '../hooks/useHandlers';
 import { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';
 import { effectsButtonStyles } from '../styles/CallConfiguration.styles';
@@ -59,9 +60,9 @@ const getOptionIcon = (type) => {
 };
 const onRenderTitle = (iconType, props) => {
     var _a;
-    return props ? React.createElement("div", { className: dropDownTitleIconStyles },
+    return props ? (React.createElement("div", { className: dropDownTitleIconStyles },
         getOptionIcon(iconType),
-        React.createElement("span", null, (_a = props[0]) === null || _a === void 0 ? void 0 : _a.text)) : React.createElement(React.Fragment, null);
+        React.createElement("span", null, (_a = props[0]) === null || _a === void 0 ? void 0 : _a.text))) : (React.createElement(React.Fragment, null));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',
@@ -99,6 +100,7 @@ export const LocalDeviceSettings = (props) => {
         }
         adapter.querySpeakers();
     }, [adapter, cameraPermissionGranted, micPermissionGranted]);
+    /* @conditional-compile-remove(call-readiness) */
     const dropdownProps = useHandlers(_DevicePermissionDropdown);
     const hasCameras = props.cameras.length > 0;
     const hasMicrophones = props.microphones.length > 0;
@@ -107,10 +109,15 @@ export const LocalDeviceSettings = (props) => {
     const isSafariWithNoSpeakers = _isSafari(environmentInfo) && !hasSpeakers;
     const cameraLabelId = useId('camera-label');
     const soundLabelId = useId('sound-label');
-    const cameraGrantedDropdown = React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": cameraLabelId, placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{
-                key: 'deniedOrUnknown',
-                text: ''
-            }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted ? undefined : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted ? props.selectedCamera ? props.selectedCamera.id : props.cameras ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id : '' : 'deniedOrUnknown', onChange: (event, option, index) => __awaiter(void 0, void 0, void 0, function* () {
+    const cameraGrantedDropdown = (React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": cameraLabelId, placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
+            ? undefined
+            : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
+            ? props.selectedCamera
+                ? props.selectedCamera.id
+                : props.cameras
+                    ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
+                    : ''
+            : 'deniedOrUnknown', onChange: (event, option, index) => __awaiter(void 0, void 0, void 0, function* () {
             const camera = props.cameras[index !== null && index !== void 0 ? index : 0];
             if (camera) {
                 yield props.onSelectCamera(camera, localVideoViewOptions);
@@ -118,11 +125,14 @@ export const LocalDeviceSettings = (props) => {
             else {
                 console.error('No cameras available');
             }
-        }), onRenderTitle: (props) => onRenderTitle('Camera', props) });
-    const micGrantedDropdown = React.createElement(React.Fragment, null, roleCanUseMic && React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted ? undefined : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{
-                key: 'deniedOrUnknown',
-                text: ''
-            }], defaultSelectedKey: micPermissionGranted ? props.selectedMicrophone ? props.selectedMicrophone.id : defaultDeviceId(props.microphones) : 'deniedOrUnknown', onChange: (event, option, index) => {
+        }), onRenderTitle: (props) => onRenderTitle('Camera', props) }));
+    const micGrantedDropdown = (React.createElement(React.Fragment, null, roleCanUseMic && (React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+            ? undefined
+            : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: micPermissionGranted
+            ? props.selectedMicrophone
+                ? props.selectedMicrophone.id
+                : defaultDeviceId(props.microphones)
+            : 'deniedOrUnknown', onChange: (event, option, index) => {
             const microphone = props.microphones[index !== null && index !== void 0 ? index : 0];
             if (microphone) {
                 props.onSelectMicrophone(microphone);
@@ -130,8 +140,8 @@ export const LocalDeviceSettings = (props) => {
             else {
                 console.error('No microphones available');
             }
-        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }));
-    const speakerDropdown = React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
+        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }))));
+    const speakerDropdown = (React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
             const speaker = props.speakers[index !== null && index !== void 0 ? index : 0];
             if (speaker) {
                 props.onSelectSpeaker(speaker);
@@ -139,27 +149,33 @@ export const LocalDeviceSettings = (props) => {
             else {
                 console.error('No speakers available');
             }
-        }, onRenderTitle: (props) => onRenderTitle('Speaker', props) });
-    return React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens, styles: deviceSelectionContainerStyles },
-        roleCanUseCamera && React.createElement(Stack, null,
+        }, onRenderTitle: (props) => onRenderTitle('Speaker', props) }));
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens, styles: deviceSelectionContainerStyles },
+        roleCanUseCamera && (React.createElement(Stack, null,
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
                 React.createElement(Label, { id: cameraLabelId, className: mergeStyles(dropDownStyles(theme).label) }, cameraLabel),
-                onResolveVideoEffectDependency && React.createElement(DefaultButton, { iconProps: {
-                        iconName: 'ConfigurationScreenVideoEffectsButton'
-                    }, styles: effectsButtonStyles(theme, !cameraPermissionGranted), onClick: props.onClickVideoEffects, disabled: !cameraPermissionGranted, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel)),
-            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, dropdownProps: dropdownProps, onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: cameraLabelId })),
+                onResolveVideoEffectDependency && (React.createElement(DefaultButton, { iconProps: { iconName: 'ConfigurationScreenVideoEffectsButton' }, styles: effectsButtonStyles(theme, !cameraPermissionGranted), onClick: props.onClickVideoEffects, disabled: !cameraPermissionGranted, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel))),
+            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, 
+                /* @conditional-compile-remove(call-readiness) */
+                dropdownProps: dropdownProps, 
+                /* @conditional-compile-remove(call-readiness) */
+                onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: cameraLabelId }))),
         React.createElement(Stack, null,
             React.createElement(Label, { id: soundLabelId, className: mergeStyles(dropDownStyles(theme).label) }, soundLabel),
             React.createElement(Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
-                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, dropdownProps: dropdownProps, onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: soundLabelId }),
-                isSafariWithNoSpeakers ? React.createElement(React.Fragment, null) : speakerDropdown)));
+                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    dropdownProps: dropdownProps, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: soundLabelId }),
+                isSafariWithNoSpeakers ? React.createElement(React.Fragment, null) : speakerDropdown))));
 };
 const defaultDeviceId = (devices) => {
     var _a;
     if (devices.length === 0) {
         return undefined;
     }
-    const defaultDevice = devices.find(device => device.isSystemDefault);
+    const defaultDevice = devices.find((device) => device.isSystemDefault);
     if (defaultDevice) {
         return defaultDevice.id;
     }