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

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":"AAWA;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\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;AAClC,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;AAavD;;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,IAC5C,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/* @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}\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    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n  return props.cameraGrantedDropdown;\n};\n\"../../../../../react-components/src\""]}

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

@@ -1,12 +1,30 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React from 'react';
-import { ErrorBar } from "../../../../../react-components/src";
+import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-components/src";
 /**
  * @private
  */
 export const ConfigurationPageErrorBar = (props) => {
-    const { errorBarProps } = 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)));
+    }
     return React.createElement(ErrorBar, Object.assign({}, errorBarProps));
 };
 //# 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;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuM,QAAQ,EAAE,4CAAmC;AAuB3P;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa,EACd,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,QAAQ,oBAAK,aAAa,EAAI,CAAC;AACzC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\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';\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}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps\n  } = props;\n  return <ErrorBar {...errorBarProps} />;\n};\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\"\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;AAuBpC;;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;QAC/B,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,EACjB,CACH,CAAC;KACH;IAED,OAAO,oBAAC,QAAQ,oBAAK,aAAa,EAAI,CAAC;AACzC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\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';\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}\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      />\n    );\n  }\n\n  return <ErrorBar {...errorBarProps} />;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\"\"../../../../../acs-ui-common/src\""]}

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { _DevicePermissionDropdownProps } from "../../../../../react-components/src";
 /**
  * @private
  */
 export interface ConfigurationPageMicDropdownProps {
     micGrantedDropdown: JSX.Element;
     micPermissionGranted: boolean;
+    dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
 }
 /**

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

@@ -1,7 +1,28 @@
+// 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'
+    };
+    /* @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 })));
+    /* @conditional-compile-remove(call-readiness) */
+    return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
     return props.micGrantedDropdown;
 };
 //# sourceMappingURL=ConfigurationPageMicDropdown.js.map

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":"AAWA;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\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;AAClC,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;AAavD;;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,IAC5C,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/* @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}\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    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n\n  return props.micGrantedDropdown;\n};\n\"../../../../../react-components/src\""]}

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

@@ -20,12 +20,13 @@ export const ExpandedLocalVideoTile = (props) => {
     const palette = useTheme().palette;
     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(palette, 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,EAAE,QAAQ,EAAmD,4CAAmC;AACnJ,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,GAAI;IAC7B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACM,CAAC;AAWzB;;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,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE;YAC/B,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;SAC9I;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,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,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, useTheme, 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  const palette = useTheme().palette;\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(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>}\n      </VideoTile>\n    </Stack>;\n};\"../../../../../react-components/src\""]}
+{"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,EACT,QAAQ,EAGT,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;IACjD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE;YAC/B,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;SACjH;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,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,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  useTheme,\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  const palette = useTheme().palette;\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(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>\n        )}\n      </VideoTile>\n    </Stack>\n  );\n};\n\"../../../../../react-components/src\""]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Hold pane to display when the user places themselves on hold
+ *
+ * @beta
+ */
+export declare const HoldPane: () => JSX.Element;
+/**
+ * @internal
+ */
+export declare const getReadableTime: (time: number) => string;
+//# sourceMappingURL=HoldPane.d.ts.map

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

@@ -0,0 +1,93 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { PrimaryButton, Stack, Text } from '@fluentui/react';
+import React, { useRef, useState } from 'react';
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { HoldButton } from "../../../../../react-components/src";
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { usePropsFor } from '../hooks/usePropsFor';
+import { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';
+/**
+ * Hold pane to display when the user places themselves on hold
+ *
+ * @beta
+ */
+export const HoldPane = () => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor(HoldButton);
+    const locale = useLocale();
+    const strings = stringsTrampoline(locale);
+    const [time, setTime] = useState(0);
+    const elapsedTime = getReadableTime(time);
+    const startTime = useRef(performance.now());
+    const [resumingCall, setResumingCall] = useState(false);
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(performance.now() - startTime.current);
+        }, 10);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [startTime]);
+    return (React.createElement(Stack, { styles: paneStyles },
+        React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
+            React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
+            React.createElement(Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
+            React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    setResumingCall(true);
+                    try {
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        yield holdButtonProps.onToggleHold();
+                    }
+                    catch (e) {
+                        setResumingCall(false);
+                        throw e;
+                    }
+                }), "data-ui-id": "hold-page-resume-call-button" }))));
+};
+const getMinutes = (time) => {
+    return Math.floor(getSeconds(time) / 60);
+};
+const getSeconds = (time) => {
+    return Math.floor(time / 1000);
+};
+const getHours = (time) => {
+    return Math.floor(getMinutes(time) / 60);
+};
+/**
+ * @internal
+ */
+export const getReadableTime = (time) => {
+    const hours = getHours(time);
+    const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
+    return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
+};
+const stringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return {
+        holdScreenLabel: locale.strings.call.holdScreenLabel,
+        resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,
+        resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,
+        resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,
+        resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel
+    };
+    return {
+        holdScreenLabel: '',
+        resumeCallButtonLabel: '',
+        resumeCallButtonAriaLabel: '',
+        resumingCallButtonLabel: '',
+        resumingCallButtonAriaLabel: ''
+    };
+};
+//# sourceMappingURL=HoldPane.js.map

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

@@ -0,0 +1 @@
+{"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 { CompositeLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\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  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n\n  const strings = stringsTrampoline(locale);\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}>{strings.holdScreenLabel}</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              /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\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        ></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\nconst stringsTrampoline = (locale: CompositeLocale): HoldPaneStrings => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return {\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  return {\n    holdScreenLabel: '',\n    resumeCallButtonLabel: '',\n    resumeCallButtonAriaLabel: '',\n    resumingCallButtonLabel: '',\n    resumingCallButtonAriaLabel: ''\n  };\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}

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

@@ -15,9 +15,9 @@ export const LobbyTile = (props) => {
     const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
     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 },
+    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 },
             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" }, 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,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD;;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,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;YAC3O,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,IACjH,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 { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\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}\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 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            <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\">\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};\"../../../../../react-components/src\""]}
+{"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,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD;;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,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;YAG7C,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,IAE5B,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 { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\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}\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 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            <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            >\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\"../../../../../react-components/src\""]}

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

@@ -22,23 +22,31 @@ export const LocalAndRemotePIP = (props) => {
             isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement
         });
-    }, [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.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
+    ]);
     const remoteVideoTileProps = useMemo(() => {
         var _a, _b, _c;
-        return !dominantRemoteParticipant ? undefined : {
-            remoteParticipant: dominantRemoteParticipant,
-            onCreateRemoteStreamView,
-            onDisposeRemoteStreamView,
-            remoteVideoViewOptions,
-            displayName: dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.displayName,
-            showLabel: false,
-            showMuteIndicator: false,
-            isAvailable: (_a = dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
-            isReceiving: (_b = dominantRemoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
-            renderElement: (_c = dominantRemoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
-            userId: dominantRemoteParticipant.userId,
-            key: dominantRemoteParticipant.userId
-        };
+        return !dominantRemoteParticipant
+            ? undefined
+            : {
+                remoteParticipant: dominantRemoteParticipant,
+                onCreateRemoteStreamView,
+                onDisposeRemoteStreamView,
+                remoteVideoViewOptions,
+                displayName: dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.displayName,
+                showLabel: false,
+                showMuteIndicator: false,
+                isAvailable: (_a = dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+                isReceiving: (_b = dominantRemoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
+                renderElement: (_c = dominantRemoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
+                userId: dominantRemoteParticipant.userId,
+                key: dominantRemoteParticipant.userId
+            };
     }, [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
@@ -47,17 +55,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)) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
+        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps))) : (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]);
     // 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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuE,eAAe,EAAE,gBAAgB,EAAE,0BAA0B,EAAuC,4CAAmC;AACrN,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AA2B/C;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,EAC1B,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,CAAC;YACzC,uBAAuB;YACvB,wBAAwB;YACxB,qBAAqB;YACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW;YACzC,SAAS,EAAE,KAAK;YAChB,iBAAiB,EAAE,KAAK;YACxB,gCAAgC,EAAE,KAAK;YACvC,WAAW,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,WAAW;YACtD,aAAa,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,aAAa;SAC3D,CAAC,CAAA;KAAA,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,WAAW,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,aAAa,EAAE,uBAAuB,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAC/K,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;YAClF,iBAAiB,EAAE,yBAAyB;YAC5C,wBAAwB;YACxB,yBAAyB;YACzB,sBAAsB;YACtB,WAAW,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,WAAW;YACnD,SAAS,EAAE,KAAK;YAChB,iBAAiB,EAAE,KAAK;YACxB,WAAW,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,WAAW;YAC/D,WAAW,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,WAAW;YAC/D,aAAa,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,aAAa;YACnE,MAAM,EAAE,yBAAyB,CAAC,MAAM;YACxC,GAAG,EAAE,yBAAyB,CAAC,MAAM;SACtC,CAAA;KAAA,EAAE,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IACrF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,6BAA6B,CAAC;IAC5E,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,aAAa,EAAE,SAAS;KACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEjB,sFAAsF;IACtF,MAAM,gBAAgB,GAAwC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3E,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,oBAAC,gBAAgB,oBAAK,oBAAoB,EAAI,CAAC,CAAC,CAAC,oBAAC,eAAe,oBAAK,mBAAmB,EAAI;QAC9H,uHAAuH;QACvH,WAAW,EAAE,UAAU;KACxB,CAAC,EAAE,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEjD,mGAAmG;IACnG,MAAM,kBAAkB,GAAoD,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;QAC/G,QAAQ,EAAE,oBAAC,eAAe,oBAAK,mBAAmB,IAAE,cAAc,EAAE,EAAE,IAAI;QAC1E,uHAAuH;QACvH,WAAW,EAAE,UAAU;KACxB,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC5D,OAAO,oBAAC,0BAA0B,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,kBAAkB,GAAI,CAAC;AACpJ,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAuB;IAChD,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACjB,CAAC;AACF,MAAM,sBAAsB,GAAuB;IACjD,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,KAAK;CAClB,CAAC","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';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n  dominantRemoteParticipant?: {\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    dominantRemoteParticipant,\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  }), [localParticipant.displayName, localParticipant.videoStream?.isAvailable, localParticipant.videoStream?.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView]);\n  const remoteVideoTileProps = useMemo(() => !dominantRemoteParticipant ? undefined : {\n    remoteParticipant: dominantRemoteParticipant,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    displayName: dominantRemoteParticipant?.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    isAvailable: dominantRemoteParticipant.videoStream?.isAvailable,\n    isReceiving: dominantRemoteParticipant.videoStream?.isReceiving,\n    renderElement: dominantRemoteParticipant.videoStream?.renderElement,\n    userId: dominantRemoteParticipant.userId,\n    key: dominantRemoteParticipant.userId\n  }, [dominantRemoteParticipant, 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} /> : <_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]);\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};\"../../../../../react-components/src\""]}
+{"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\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: { displayName?: string; videoStream?: VideoGalleryStream };\n  dominantRemoteParticipant?: {\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    dominantRemoteParticipant,\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    }),\n    [\n      localParticipant.displayName,\n      localParticipant.videoStream?.isAvailable,\n      localParticipant.videoStream?.renderElement,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView\n    ]\n  );\n\n  const remoteVideoTileProps = useMemo(\n    () =>\n      !dominantRemoteParticipant\n        ? undefined\n        : {\n            remoteParticipant: dominantRemoteParticipant,\n            onCreateRemoteStreamView,\n            onDisposeRemoteStreamView,\n            remoteVideoViewOptions,\n            displayName: dominantRemoteParticipant?.displayName,\n            showLabel: false,\n            showMuteIndicator: false,\n            isAvailable: dominantRemoteParticipant.videoStream?.isAvailable,\n            isReceiving: dominantRemoteParticipant.videoStream?.isReceiving,\n            renderElement: dominantRemoteParticipant.videoStream?.renderElement,\n            userId: dominantRemoteParticipant.userId,\n            key: dominantRemoteParticipant.userId\n          },\n    [dominantRemoteParticipant, 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 {...remoteVideoTileProps} />\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]\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\"../../../../../react-components/src\""]}

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

@@ -16,6 +16,8 @@ export interface LocalDeviceSettingsType {
     onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;
     onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;
     onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;
+    onClickEnableDevicePermission?: () => void;
+    onVideoEffectsClick?: () => void;
 }
 /**
  * @private