npm - @azure/communication-react - Versions diffs - 1.22.0 → 1.23.0-alpha-202412190017 - Mend

@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1271) hide show

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.js ADDED Viewed

@@ -0,0 +1,220 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+import { _ModalClone } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+import { drawerContainerStyles } from '../styles/CallComposite.styles';
+/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */
+import { _isSafari } from '../utils';
+/* @conditional-compile-remove(call-readiness) */
+const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * @private
+ */
+export const CallReadinessModal = (props) => {
+    const { mobileView, permissionsState,
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const onLightDismissTriggered = () => {
+        // do nothing here
+        // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+    };
+    // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    const showModal = (!props.doNotPromptCamera && videoState === 'denied') ||
+        (!props.doNotPromptCamera && videoState === 'prompt') ||
+        audioState === 'denied' ||
+        audioState === 'prompt';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
+    const modal = !showModal
+        ? undefined
+        : () => {
+            // if both video and audio permission are not set
+            if (videoState === 'prompt' && !props.doNotPromptCamera && audioState === 'prompt') {
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "request" }));
+            }
+            // if audio permission is set up but video is not
+            else if (videoState === 'prompt' && !props.doNotPromptCamera) {
+                return (React.createElement(CameraSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "request" }));
+            }
+            // if video permission is set up but audio is not
+            else if (audioState === 'prompt') {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "request" }));
+            }
+            // if both video and audio are denied
+            else if (videoState === 'denied' && !props.doNotPromptCamera && audioState === 'denied') {
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+            // if only video is denied
+            else if (videoState === 'denied' && !props.doNotPromptCamera) {
+                return (React.createElement(CameraSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "denied" }));
+            }
+            // if only audio is denied
+            else {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+        };
+    if (mobileView && modal !== undefined) {
+        return (React.createElement(React.Fragment, null, isPermissionsModalDismissed && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+    }
+    else if (!mobileView && modal !== undefined) {
+        return (React.createElement(_ModalClone, { styles: {
+                root: { position: 'unset' },
+                main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+            }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                setIsPermissionsModalDismissed(false);
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } }, forceFocusInsideTrap: true, focusTrapZoneProps: {
+                disabled: false,
+                onKeyDown: (ev) => {
+                    if (ev.key === 'Escape') {
+                        setIsPermissionsModalDismissed(false);
+                    }
+                }
+            } }, modal()));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * This is used when permission API is not supported
+ * @private
+ */
+export const CallReadinessModalFallBack = (props) => {
+    const { mobileView, checkPermissionModalShowing, permissionsState,
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const onLightDismissTriggered = () => {
+        // do nothing here
+        // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+    };
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    // When permissions are not set, do nothing here
+    // When permissions are set to denied, show helper screen
+    const showModal = videoState === 'denied' || audioState === 'denied';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
+    const modal = !showModal
+        ? undefined
+        : () => {
+            if (videoState === 'denied' && audioState === 'denied') {
+                return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+            else if (videoState === 'denied' && audioState === 'granted') {
+                return (React.createElement(CameraSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, onContinueAnywayClick: () => {
+                        setIsPermissionsModalDismissed(false);
+                    }, kind: "denied" }));
+            }
+            else {
+                return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "denied" }));
+            }
+        };
+    if (mobileView) {
+        return (React.createElement(React.Fragment, null,
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "check" }))),
+            isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } },
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                        ? () => {
+                            onPermissionsTroubleshootingClick(permissionsState);
+                        }
+                        : undefined, kind: "check" }))),
+            !checkPermissionModalShowing && modal !== undefined && (React.createElement(_ModalClone, { styles: {
+                    root: { position: 'unset' },
+                    main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
+                }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()))));
+    }
+};
+/**
+ * Placeholder for conditional compile
+ * @private
+ */
+export const CallReadinessModalPlaceHolder = () => {
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CallReadinessModal.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallReadinessModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n CameraAndMicrophoneSitePermissions,\n CameraSitePermissions,\n MicrophoneSitePermissions,\n _DrawerSurface\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { _ModalClone } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nconst DRAWER_HIGH_Z_BAND = 99; // setting z index to 99 so that it sit above all components\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n mobileView: boolean;\n modalLayerHostId: string;\n permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /* @conditional-compile-remove(unsupported-browser) */\n environmentInfo?: EnvironmentInfo;\n isPermissionsModalDismissed: boolean;\n setIsPermissionsModalDismissed: (dismissedState: boolean) => void;\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n doNotPromptCamera: boolean;\n}): JSX.Element => {\n const {\n mobileView,\n permissionsState,\n /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n isPermissionsModalDismissed,\n setIsPermissionsModalDismissed,\n onPermissionsTroubleshootingClick\n } = props;\n const onLightDismissTriggered = (): void => {\n // do nothing here\n // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n };\n\n // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)\n const videoState: PermissionState = permissionsState.camera;\n const audioState: PermissionState = permissionsState.microphone;\n\n const showModal =\n (!props.doNotPromptCamera && videoState === 'denied') ||\n (!props.doNotPromptCamera && videoState === 'prompt') ||\n audioState === 'denied' ||\n audioState === 'prompt';\n /* @conditional-compile-remove(unsupported-browser) */\n const isSafari = _isSafari(environmentInfo);\n\n const modal: undefined | (() => JSX.Element) = !showModal\n ? undefined\n : () => {\n // if both video and audio permission are not set\n if (videoState === 'prompt' && !props.doNotPromptCamera && audioState === 'prompt') {\n return (\n <CameraAndMicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"request\"\n />\n );\n }\n // if audio permission is set up but video is not\n else if (videoState === 'prompt' && !props.doNotPromptCamera) {\n return (\n <CameraSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n onContinueAnywayClick={() => {\n setIsPermissionsModalDismissed(false);\n }}\n kind=\"request\"\n />\n );\n }\n // if video permission is set up but audio is not\n else if (audioState === 'prompt') {\n return (\n <MicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"request\"\n />\n );\n }\n // if both video and audio are denied\n else if (videoState === 'denied' && !props.doNotPromptCamera && audioState === 'denied') {\n return (\n <CameraAndMicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"denied\"\n />\n );\n }\n // if only video is denied\n else if (videoState === 'denied' && !props.doNotPromptCamera) {\n return (\n <CameraSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n onContinueAnywayClick={() => {\n setIsPermissionsModalDismissed(false);\n }}\n kind=\"denied\"\n />\n );\n }\n // if only audio is denied\n else {\n return (\n <MicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"denied\"\n />\n );\n }\n };\n\n if (mobileView && modal !== undefined) {\n return (\n <>\n {isPermissionsModalDismissed && (\n <_DrawerSurface\n disableMaxHeight={true}\n onLightDismiss={onLightDismissTriggered}\n styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n >\n {modal()}\n </_DrawerSurface>\n )}\n </>\n );\n } else if (!mobileView && modal !== undefined) {\n return (\n <_ModalClone\n styles={{\n root: { position: 'unset' },\n main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n }}\n layerProps={{ hostId: props.modalLayerHostId }}\n isOpen={isPermissionsModalDismissed}\n isBlocking={false}\n onDismiss={() => {\n setIsPermissionsModalDismissed(false);\n }}\n overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n forceFocusInsideTrap={true}\n focusTrapZoneProps={{\n disabled: false,\n onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === 'Escape') {\n setIsPermissionsModalDismissed(false);\n }\n }\n }}\n >\n {modal()}\n </_ModalClone>\n );\n } else {\n return <></>;\n }\n};\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n mobileView: boolean;\n checkPermissionModalShowing: boolean;\n permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n modalLayerHostId: string;\n /* @conditional-compile-remove(unsupported-browser) */\n environmentInfo?: EnvironmentInfo;\n isPermissionsModalDismissed: boolean;\n setIsPermissionsModalDismissed: (dismissedState: boolean) => void;\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n}): JSX.Element => {\n const {\n mobileView,\n checkPermissionModalShowing,\n permissionsState,\n /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n isPermissionsModalDismissed,\n setIsPermissionsModalDismissed,\n onPermissionsTroubleshootingClick\n } = props;\n const onLightDismissTriggered = (): void => {\n // do nothing here\n // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n };\n\n const videoState = permissionsState.camera;\n const audioState = permissionsState.microphone;\n\n // When permissions are not set, do nothing here\n // When permissions are set to denied, show helper screen\n const showModal = videoState === 'denied' || audioState === 'denied';\n\n /* @conditional-compile-remove(unsupported-browser) */\n const isSafari = _isSafari(environmentInfo);\n\n const modal: undefined | (() => JSX.Element) = !showModal\n ? undefined\n : () => {\n if (videoState === 'denied' && audioState === 'denied') {\n return (\n <CameraAndMicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"denied\"\n />\n );\n } else if (videoState === 'denied' && audioState === 'granted') {\n return (\n <CameraSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n onContinueAnywayClick={() => {\n setIsPermissionsModalDismissed(false);\n }}\n kind=\"denied\"\n />\n );\n } else {\n return (\n <MicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"denied\"\n />\n );\n }\n };\n\n if (mobileView) {\n return (\n <>\n {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n <_DrawerSurface\n disableMaxHeight={true}\n onLightDismiss={onLightDismissTriggered}\n styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n >\n <CameraAndMicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"check\"\n />\n </_DrawerSurface>\n )}\n {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n <_DrawerSurface\n disableMaxHeight={true}\n onLightDismiss={onLightDismissTriggered}\n styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n >\n {modal()}\n </_DrawerSurface>\n )}\n </>\n );\n } else {\n return (\n <>\n {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n <_ModalClone\n styles={{\n root: { position: 'unset' },\n main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n }}\n layerProps={{ hostId: props.modalLayerHostId }}\n isOpen={isPermissionsModalDismissed}\n isBlocking={false}\n onDismiss={() => {\n setIsPermissionsModalDismissed(false);\n }}\n overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n >\n <CameraAndMicrophoneSitePermissions\n appName={'app'}\n /* @conditional-compile-remove(unsupported-browser) */\n browserHint={isSafari ? 'safari' : 'unset'}\n onTroubleshootingClick={\n onPermissionsTroubleshootingClick\n ? () => {\n onPermissionsTroubleshootingClick(permissionsState);\n }\n : undefined\n }\n kind=\"check\"\n />\n </_ModalClone>\n )}\n\n {!checkPermissionModalShowing && modal !== undefined && (\n <_ModalClone\n styles={{\n root: { position: 'unset' },\n main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n }}\n layerProps={{ hostId: props.modalLayerHostId }}\n isOpen={isPermissionsModalDismissed}\n isBlocking={false}\n onDismiss={() => {\n setIsPermissionsModalDismissed(false);\n }}\n overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n >\n {modal()}\n </_ModalClone>\n )}\n </>\n );\n }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js CHANGED Viewed

@@ -9,28 +9,30 @@ import { useLocale } from '../../localization';
  */
 export const CapabilitiesChangedNotificationBar = (props) => {
     const locale = useLocale();
-    return React.createElement(Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map(notification => {
+    return (React.createElement(Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map((notification) => {
         const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);
         if (!message) {
             return null;
         }
         const iconProps = getCustomMessageBarIconProps(notification);
-        return React.createElement(MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: MessageBarType.warning, dismissIconProps: {
-                iconName: 'ErrorBarClear'
-            }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message);
-    }));
+        return (React.createElement(MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message));
+    })));
 };
 const getCapabilityChangedNotificationString = (notification, strings) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     switch (notification.capabilityName) {
         case 'turnVideoOn':
             if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
-                return notification.isPresent ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
+                return notification.isPresent
+                    ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption
+                    : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
             }
             break;
         case 'unmuteMic':
             if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
-                return notification.isPresent ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
+                return notification.isPresent
+                    ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption
+                    : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
             }
             break;
         case 'shareScreen':
@@ -42,10 +44,14 @@ const getCapabilityChangedNotificationString = (notification, strings) => {
             }
             break;
         case 'viewAttendeeNames':
-            if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Attendee') {
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Attendee') {
                 return (_g = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _g === void 0 ? void 0 : _g.hideAttendeeNameAttendee;
             }
-            if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Presenter') {
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Presenter') {
                 return (_h = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _h === void 0 ? void 0 : _h.hideAttendeeNamePresenter;
             }
     }
@@ -73,17 +79,7 @@ const getCustomMessageBarIconProps = (notification) => {
         default:
             return undefined;
     }
-    return {
-        iconName,
-        styles: {
-            root: {
-                '> *': {
-                    height: '1rem',
-                    width: '1rem'
-                }
-            }
-        }
-    };
+    return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };
 };
 const messageBarStyles = {
     innerText: {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\nimport { useLocale } from '../../localization';\n\n/*\n @private\n /\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n capabilitiesChangedNotifications: CapabalityChangedNotification[];\n onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/\n @private\n /\nexport interface CapabalityChangedNotification {\n /\n Name of capability\n /\n capabilityName: ParticipantCapabilityName;\n /\n Is capability now available\n /\n isPresent: boolean;\n\n /\n Reason capability was changed\n /\n changedReason?: CapabilitiesChangedReason;\n\n /\n Role of participant when capability changed\n /\n role?: ParticipantRole;\n /\n The latest timestamp when this notification was observed.\n \n When available, this is used to track notifications that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n Notification bar for capabilities changed\n * @private\n /\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n const locale = useLocale();\n return <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n {props.capabilitiesChangedNotifications.map(notification => {\n const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);\n if (!message) {\n return null;\n }\n const iconProps = getCustomMessageBarIconProps(notification);\n return <MessageBar key={notification.capabilityName} styles={messageBarStyles} messageBarType={MessageBarType.warning} dismissIconProps={{\n iconName: 'ErrorBarClear'\n }} onDismiss={() => props.onDismissNotification(notification)} messageBarIconProps={iconProps}>\n {message}\n </MessageBar>;\n })}\n </Stack>;\n};\nconst getCapabilityChangedNotificationString = (notification: CapabalityChangedNotification, strings?: CapabilityChangedNotificationStrings): string \| undefined => {\n switch (notification.capabilityName) {\n case 'turnVideoOn':\n if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n return notification.isPresent ? strings?.turnVideoOn?.grantedDueToMeetingOption : strings?.turnVideoOn?.lostDueToMeetingOption;\n }\n break;\n case 'unmuteMic':\n if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n return notification.isPresent ? strings?.unmuteMic?.grantedDueToMeetingOption : strings?.unmuteMic?.lostDueToMeetingOption;\n }\n break;\n case 'shareScreen':\n if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n }\n if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n }\n break;\n case 'viewAttendeeNames':\n if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Attendee') {\n return strings?.hideAttendeeNames?.hideAttendeeNameAttendee;\n }\n if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Presenter') {\n return strings?.hideAttendeeNames?.hideAttendeeNamePresenter;\n }\n }\n return undefined;\n};\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps \| undefined => {\n let iconName: string \| undefined = undefined;\n switch (notification.capabilityName) {\n case 'turnVideoOn':\n if (notification.isPresent) {\n iconName = 'ControlButtonCameraOn';\n } else {\n iconName = 'ControlButtonCameraProhibited';\n }\n break;\n case 'unmuteMic':\n if (notification.isPresent) {\n iconName = 'ControlButtonMicOn';\n } else {\n iconName = 'ControlButtonMicProhibited';\n }\n break;\n default:\n return undefined;\n }\n return {\n iconName,\n styles: {\n root: {\n '> ': {\n height: '1rem',\n width: '1rem'\n }\n }\n }\n };\n};\nconst messageBarStyles = {\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n};\n\n/*\n Strings for capability changed notification\n * @public\n /\nexport interface CapabilityChangedNotificationStrings {\n /\n Strings for 'turnVideoOn' capability\n /\n turnVideoOn?: {\n /\n Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n /\n lostDueToMeetingOption?: string;\n /\n Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n /\n grantedDueToMeetingOption?: string;\n };\n /\n Strings for 'unmuteMic' capability\n /\n unmuteMic?: {\n /\n Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n /\n lostDueToMeetingOption?: string;\n /\n Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n /\n grantedDueToMeetingOption?: string;\n };\n /\n Strings for 'shareScreen' capability\n /\n shareScreen?: {\n /\n Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n /\n lostDueToRoleChangeToAttendee?: string;\n /\n Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n /\n grantedDueToRoleChangeToPresenter?: string;\n };\n\n /\n Strings for hidden attendee names capability\n /\n hideAttendeeNames?: {\n /\n Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Attendee\n /\n hideAttendeeNameAttendee?: string;\n /\n Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Presenter\n */\n hideAttendeeNamePresenter?: string;\n };\n}"]}
1	+ {"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\n\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport { useLocale } from '../../localization';\n\n/*\n @private\n /\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n capabilitiesChangedNotifications: CapabalityChangedNotification[];\n onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/\n @private\n /\nexport interface CapabalityChangedNotification {\n /\n Name of capability\n /\n capabilityName: ParticipantCapabilityName;\n /\n Is capability now available\n /\n isPresent: boolean;\n\n /\n Reason capability was changed\n /\n changedReason?: CapabilitiesChangedReason;\n\n /\n Role of participant when capability changed\n /\n role?: ParticipantRole;\n /\n The latest timestamp when this notification was observed.\n \n When available, this is used to track notifications that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n Notification bar for capabilities changed\n * @private\n /\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n const locale = useLocale();\n\n return (\n <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n {props.capabilitiesChangedNotifications.map((notification) => {\n const message = getCapabilityChangedNotificationString(\n notification,\n locale.strings.call.capabilityChangedNotification\n );\n if (!message) {\n return null;\n }\n const iconProps = getCustomMessageBarIconProps(notification);\n return (\n <MessageBar\n key={notification.capabilityName}\n styles={messageBarStyles}\n messageBarType={MessageBarType.warning}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n onDismiss={() => props.onDismissNotification(notification)}\n messageBarIconProps={iconProps}\n >\n {message}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst getCapabilityChangedNotificationString = (\n notification: CapabalityChangedNotification,\n strings?: CapabilityChangedNotificationStrings\n): string \| undefined => {\n switch (notification.capabilityName) {\n case 'turnVideoOn':\n if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n return notification.isPresent\n ? strings?.turnVideoOn?.grantedDueToMeetingOption\n : strings?.turnVideoOn?.lostDueToMeetingOption;\n }\n break;\n case 'unmuteMic':\n if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n return notification.isPresent\n ? strings?.unmuteMic?.grantedDueToMeetingOption\n : strings?.unmuteMic?.lostDueToMeetingOption;\n }\n break;\n case 'shareScreen':\n if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n }\n if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n }\n break;\n case 'viewAttendeeNames':\n if (\n !notification.isPresent &&\n notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n notification.role === 'Attendee'\n ) {\n return strings?.hideAttendeeNames?.hideAttendeeNameAttendee;\n }\n if (\n !notification.isPresent &&\n notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n notification.role === 'Presenter'\n ) {\n return strings?.hideAttendeeNames?.hideAttendeeNamePresenter;\n }\n }\n return undefined;\n};\n\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps \| undefined => {\n let iconName: string \| undefined = undefined;\n switch (notification.capabilityName) {\n case 'turnVideoOn':\n if (notification.isPresent) {\n iconName = 'ControlButtonCameraOn';\n } else {\n iconName = 'ControlButtonCameraProhibited';\n }\n break;\n case 'unmuteMic':\n if (notification.isPresent) {\n iconName = 'ControlButtonMicOn';\n } else {\n iconName = 'ControlButtonMicProhibited';\n }\n break;\n default:\n return undefined;\n }\n return { iconName, styles: { root: { '> ': { height: '1rem', width: '1rem' } } } };\n};\n\nconst messageBarStyles = {\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n};\n\n/*\n Strings for capability changed notification\n * @public\n /\nexport interface CapabilityChangedNotificationStrings {\n /\n Strings for 'turnVideoOn' capability\n /\n turnVideoOn?: {\n /\n Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n /\n lostDueToMeetingOption?: string;\n /\n Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n /\n grantedDueToMeetingOption?: string;\n };\n /\n Strings for 'unmuteMic' capability\n /\n unmuteMic?: {\n /\n Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n /\n lostDueToMeetingOption?: string;\n /\n Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n /\n grantedDueToMeetingOption?: string;\n };\n /\n Strings for 'shareScreen' capability\n /\n shareScreen?: {\n /\n Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n /\n lostDueToRoleChangeToAttendee?: string;\n /\n Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n /\n grantedDueToRoleChangeToPresenter?: string;\n };\n\n /\n Strings for hidden attendee names capability\n /\n hideAttendeeNames?: {\n /\n Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Attendee\n /\n hideAttendeeNameAttendee?: string;\n /\n Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Presenter\n */\n hideAttendeeNamePresenter?: string;\n };\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.d.ts CHANGED Viewed

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

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

@@ -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 ConfigurationPageCameraDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
+    const devicePermissionDropdownStringsCamera = {
+        placeHolderText: 'Enable Camera (optional)',
+        actionButtonContent: 'Allow'
+    };
+    /* @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;
 };
 //# sourceMappingURL=ConfigurationPageCameraDropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["~~../../../../../../../preprocess-dist/~~react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"~~AAYA~~;;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 ariaLabelledby?: string;\n}\n\n/\n @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n return props.cameraGrantedDropdown;\n};"]}
1	+ {"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 CHANGED Viewed

@@ -1,17 +1,35 @@
 // 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";
 import { FocusZone } from '@fluentui/react';
 /**
  * @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, { 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 CHANGED Viewed

	@@ -1 +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,~~EAAuM~~,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,~~EACd~~,GAAG,KAAK,CAAC;~~IACV~~,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 } = props;\n if (errorBarProps.activeErrorMessages.length === 0) {\n return <></>;\n }\n return <FocusZone shouldFocusOnMount>\n <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n </FocusZone~~>;\~~n};"]}
1	+ {"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.d.ts CHANGED Viewed

@@ -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;
     ariaLabelledby?: string;
 }

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

@@ -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, ariaLabelledby: props.ariaLabelledby })));
+    /* @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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["~~../../../../../../../preprocess-dist/~~react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"~~AAYA~~;;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 ariaLabelledby?: string;\n}\n\n/\n @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n return props.micGrantedDropdown;\n};"]}
1	+ {"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 CHANGED Viewed

@@ -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