@azure/communication-react 1.9.0 → 1.10.0-alpha-202311050013

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

@@ -36,55 +36,46 @@ export const LocalPreview = (props) => {
     const onToggleMic = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
-    const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;
+    const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
+        devicesButtonProps.microphones.length === 0 &&
+        devicesButtonProps.speakers.length === 0;
     const hasCameras = devicesButtonProps.cameras.length > 0;
     const hasMicrophones = devicesButtonProps.microphones.length > 0;
     const theme = useTheme();
     const onRenderPlaceholder = useCallback(() => {
-        return React.createElement(Stack, { className: mergeStyles({
-                width: '100%',
-                height: '100%'
-            }), verticalAlign: "center", tokens: {
-                childrenGap: '0.25rem'
-            } },
+        return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), verticalAlign: "center", tokens: { childrenGap: '0.25rem' } },
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, {
-                        color: theme.palette.neutralTertiary
-                    }) })),
+                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, {
-                        color: theme.palette.neutralSecondary
-                    }) }, locale.strings.call.cameraTurnedOff)));
+                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
     }, [theme, locale.strings.call.cameraTurnedOff]);
-    const devicesButtonStyles = props.mobileView ? {
-        menuStyles: {
-            menuItemStyles: buttonFlyoutIncreasedSizeStyles
+    const devicesButtonStyles = props.mobileView
+        ? {
+            menuStyles: {
+                menuItemStyles: buttonFlyoutIncreasedSizeStyles
+            }
         }
-    } : undefined;
-    return React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
-        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement }) : undefined, onRenderPlaceholder: onRenderPlaceholder },
+        : undefined;
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
+        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? (React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement })) : undefined, onRenderPlaceholder: onRenderPlaceholder },
             React.createElement(ControlBar, { layout: "floatingBottom" },
                 React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true, 
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipOnContent: '',
-                        tooltipOffContent: '',
-                        tooltipDisabledContent: ''
-                    } : {}, styles: localPreviewButtonStyle }),
+                    strings: props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}, styles: localPreviewButtonStyle }),
                 React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras, 
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipOnContent: '',
-                        tooltipOffContent: '',
-                        tooltipDisabledContent: '',
-                        tooltipVideoLoadingContent: ''
-                    } : {}, styles: localPreviewButtonStyle })),
-                props.showDevicesButton && React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
+                    strings: props.mobileView
+                        ? {
+                            tooltipOnContent: '',
+                            tooltipOffContent: '',
+                            tooltipDisabledContent: '',
+                            tooltipVideoLoadingContent: ''
+                        }
+                        : {}, styles: localPreviewButtonStyle })),
+                props.showDevicesButton && (React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
                     // disable button whilst all other buttons are disabled
                     disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, 
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipContent: ''
-                    } : {}, styles: devicesButtonStyles })))));
+                    strings: props.mobileView ? { tooltipContent: '' } : {}, styles: devicesButtonStyles })))))));
 };
 //# sourceMappingURL=LocalPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const {\n    audio: microphonePermissionGranted,\n    video: cameraPermissionGranted\n  } = useSelector(devicePermissionSelector);\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n  const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return <Stack className={mergeStyles({\n      width: '100%',\n      height: '100%'\n    })} verticalAlign=\"center\" tokens={{\n      childrenGap: '0.25rem'\n    }}>\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon iconName=\"LocalPreviewPlaceholder\" className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralTertiary\n        })} />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralSecondary\n        })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>;\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n  const devicesButtonStyles = props.mobileView ? {\n    menuStyles: {\n      menuItemStyles: buttonFlyoutIncreasedSizeStyles\n    }\n  } : undefined;\n  return <Stack data-ui-id=\"call-composite-local-preview\" className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}>\n      <VideoTile styles={localPreviewTileStyle} renderElement={localPreviewProps?.videoStreamElement ? <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} /> : undefined} onRenderPlaceholder={onRenderPlaceholder}>\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton data-ui-id=\"call-composite-local-device-settings-microphone-button\" checked={isLocalMicrophoneEnabled} onToggleMicrophone={onToggleMic} disabled={!microphonePermissionGranted || !hasMicrophones} showLabel={true}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipOnContent: '',\n          tooltipOffContent: '',\n          tooltipDisabledContent: ''\n        } : {}} styles={localPreviewButtonStyle} />\n          <CameraButton data-ui-id=\"call-composite-local-device-settings-camera-button\" {...cameraButtonProps} showLabel={true} disabled={!cameraPermissionGranted || !hasCameras}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipOnContent: '',\n          tooltipOffContent: '',\n          tooltipDisabledContent: '',\n          tooltipVideoLoadingContent: ''\n        } : {}} styles={localPreviewButtonStyle} />\n          {props.showDevicesButton && <DevicesButton data-ui-id=\"call-composite-local-device-settings-options-button\" {...devicesButtonProps}\n        // disable button whilst all other buttons are disabled\n        disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices} showLabel={true}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipContent: ''\n        } : {}} styles={devicesButtonStyles} />}\n        </ControlBar>\n      </VideoTile>\n    </Stack>;\n};\"../../../../../react-components/src\""]}
+{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  CameraButton,\n  ControlBar,\n  MicrophoneButton,\n  DevicesButton,\n  StreamMedia,\n  useTheme,\n  VideoTile\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n  cameraOffLabelStyle,\n  localPreviewButtonStyle,\n  localPreviewContainerStyleDesktop,\n  localPreviewContainerStyleMobile,\n  localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n\n  const hasNoDevices =\n    devicesButtonProps.cameras.length === 0 &&\n    devicesButtonProps.microphones.length === 0 &&\n    devicesButtonProps.speakers.length === 0;\n\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return (\n      <Stack\n        className={mergeStyles({ width: '100%', height: '100%' })}\n        verticalAlign=\"center\"\n        tokens={{ childrenGap: '0.25rem' }}\n      >\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon\n            iconName=\"LocalPreviewPlaceholder\"\n            className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n          />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>\n    );\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n\n  const devicesButtonStyles = props.mobileView\n    ? {\n        menuStyles: {\n          menuItemStyles: buttonFlyoutIncreasedSizeStyles\n        }\n      }\n    : undefined;\n\n  return (\n    <Stack\n      data-ui-id=\"call-composite-local-preview\"\n      className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}\n    >\n      <VideoTile\n        styles={localPreviewTileStyle}\n        renderElement={\n          localPreviewProps?.videoStreamElement ? (\n            <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n          ) : undefined\n        }\n        onRenderPlaceholder={onRenderPlaceholder}\n      >\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton\n            data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n            checked={isLocalMicrophoneEnabled}\n            onToggleMicrophone={onToggleMic}\n            disabled={!microphonePermissionGranted || !hasMicrophones}\n            showLabel={true}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}\n            }\n            styles={localPreviewButtonStyle}\n          />\n          <CameraButton\n            data-ui-id=\"call-composite-local-device-settings-camera-button\"\n            {...cameraButtonProps}\n            showLabel={true}\n            disabled={!cameraPermissionGranted || !hasCameras}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView\n                ? {\n                    tooltipOnContent: '',\n                    tooltipOffContent: '',\n                    tooltipDisabledContent: '',\n                    tooltipVideoLoadingContent: ''\n                  }\n                : {}\n            }\n            styles={localPreviewButtonStyle}\n          />\n          {props.showDevicesButton && (\n            <DevicesButton\n              data-ui-id=\"call-composite-local-device-settings-options-button\"\n              {...devicesButtonProps}\n              // disable button whilst all other buttons are disabled\n              disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}\n              showLabel={true}\n              // disable tooltip as it obscures list of devices on mobile\n              strings={props.mobileView ? { tooltipContent: '' } : {}}\n              styles={devicesButtonStyles}\n            />\n          )}\n        </ControlBar>\n      </VideoTile>\n    </Stack>\n  );\n};\n\"../../../../../react-components/src\""]}

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { OnRenderAvatarCallback } from "../../../../../react-components/src";
 import { VideoGalleryLayout } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { RemoteVideoTileMenuOptions } from '../CallComposite';
@@ -11,7 +10,6 @@ export interface MediaGalleryProps {
     isVideoStreamOn?: boolean;
     isMicrophoneChecked?: boolean;
     onStartLocalVideo: () => Promise<void>;
-    onRenderAvatar?: OnRenderAvatarCallback;
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
     isMobile?: boolean;
     drawerMenuHostId?: string;
@@ -24,11 +22,4 @@ export interface MediaGalleryProps {
  * @private
  */
 export declare const MediaGallery: (props: MediaGalleryProps) => JSX.Element;
-/**
- * @private
- *
- * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.
- * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.
- */
-export declare const useLocalVideoStartTrigger: (isLocalVideoAvailable: boolean, shouldTransition?: boolean | undefined) => void;
 //# sourceMappingURL=MediaGallery.d.ts.map

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
 import { useRef } from 'react';
 import { VideoGallery, Announcer } from "../../../../../react-components/src";
@@ -9,17 +9,17 @@ import { _useContainerWidth, _useContainerHeight } from "../../../../../react-co
 import { usePropsFor } from '../hooks/usePropsFor';
 import { AvatarPersona } from '../../common/AvatarPersona';
 import { mergeStyles, Stack } from '@fluentui/react';
-import { getIsPreviewCameraOn } from '../selectors/baseSelectors';
 import { useHandlers } from '../hooks/useHandlers';
 import { useSelector } from '../hooks/useSelector';
 import { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';
 import { LocalVideoCameraCycleButton } from "../../../../../react-components/src";
 import { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';
+/* @conditional-compile-remove(rooms) */
+import { useAdapter } from '../adapter/CallAdapterProvider';
 const VideoGalleryStyles = {
     root: {
         height: '100%',
         minHeight: '10rem',
-        // space affordance to ensure media gallery is never collapsed
         minWidth: '6rem'
     }
 };
@@ -34,13 +34,18 @@ const remoteVideoViewOptions = {
  * @private
  */
 export const MediaGallery = (props) => {
-    var _a;
+    var _a, _b, _c;
     const videoGalleryProps = usePropsFor(VideoGallery);
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const announcerString = useParticipantChangedAnnouncement();
-    /* @conditional-compile-remove(vertical-gallery) */
     /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const userRole = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerRef = useRef(null);
     /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerWidth = _useContainerWidth(containerRef);
@@ -48,92 +53,85 @@ export const MediaGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
-    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline();
+    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
+    /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const onRenderAvatar = useCallback((userId, options) => {
-        return React.createElement(Stack, { className: mergeStyles({
-                position: 'absolute',
-                height: '100%',
-                width: '100%'
-            }) },
-            React.createElement(Stack, { styles: {
-                    root: {
-                        margin: 'auto',
-                        maxHeight: '100%'
-                    }
-                } }, (options === null || options === void 0 ? void 0 : options.coinSize) && React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))));
+        return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+            React.createElement(Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } }, (options === null || options === void 0 ? void 0 : options.coinSize) && (React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))))));
     }, [props.onFetchAvatarPersonaData]);
-    useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     /* @conditional-compile-remove(pinned-participants) */
     const remoteVideoTileMenuOptions = useMemo(() => {
         var _a;
-        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden) ? false : props.isMobile ? {
-            kind: 'drawer',
-            hostId: props.drawerMenuHostId
-        } : {
-            kind: 'contextual'
-        };
-    }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
+        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden)
+            ? false
+            : props.isMobile
+                ? { kind: 'drawer', hostId: props.drawerMenuHostId }
+                : { kind: 'contextual' };
+    }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = useMemo(() => {
         /* @conditional-compile-remove(gallery-layouts) */
         if (props.userSetOverflowGalleryPosition === 'horizontalTop') {
             return props.userSetOverflowGalleryPosition;
         }
-        return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';
-    }, [/* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition, containerWidth, containerHeight]);
+        return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+            ? 'verticalRight'
+            : 'horizontalBottom';
+    }, [
+        /* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition,
+        containerWidth,
+        containerHeight
+    ]);
     const VideoGalleryMemoized = useMemo(() => {
-        var _a;
         const layoutBasedOnUserSelection = () => {
             /* @conditional-compile-remove(gallery-layouts) */
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
             return layoutBasedOnTilePosition;
         };
-        return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar, 
-            /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenu: remoteVideoTileMenuOptions, 
-            /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition: overflowGalleryPosition }));
-    }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, cameraSwitcherProps, onRenderAvatar,
+        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
+            /* @conditional-compile-remove(pinned-participants) */
+            remoteVideoTileMenu: remoteVideoTileMenuOptions, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition, 
+            /* @conditional-compile-remove(rooms) */
+            localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
+                ? 'hidden'
+                : props.isMobile && containerAspectRatio < 1
+                    ? '9:16'
+                    : '16:9' })));
+    }, [
+        videoGalleryProps,
+        props.isMobile,
+        /* @conditional-compile-remove(rooms) */
+        props.localVideoTileOptions,
+        cameraSwitcherProps,
+        onRenderAvatar,
+        /* @conditional-compile-remove(pinned-participants) */
         remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(vertical-gallery) */
         overflowGalleryPosition,
+        /* @conditional-compile-remove(rooms) */
+        userRole,
+        /* @conditional-compile-remove(rooms) */
+        isRoomsCall,
+        /* @conditional-compile-remove(vertical-gallery) */
         containerAspectRatio,
-        props.userSetGalleryLayout, layoutBasedOnTilePosition]);
-    return React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
+        /* @conditional-compile-remove(gallery-layouts) */
+        props.userSetGalleryLayout,
+        layoutBasedOnTilePosition
+    ]);
+    return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        VideoGalleryMemoized);
-};
-/**
- * @private
- *
- * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.
- * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.
- */
-export const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransition) => {
-    // Once a call is joined, we need to transition the local preview camera setting into the call.
-    // This logic is needed on any screen that we might join a call from:
-    // - The Media gallery
-    // - The lobby page
-    // - The networkReconnect interstitial that may show at the start of a call.
-    //
-    // @TODO: Can we simply have the callHandlers handle this transition logic.
-    const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);
-    const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);
-    const mediaGalleryHandlers = useHandlers(MediaGallery);
-    useEffect(() => {
-        if (shouldTransition !== false) {
-            if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {
-                mediaGalleryHandlers.onStartLocalVideo();
-            }
-            setIsButtonStatusSynced(true);
-        }
-    }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
-};
-const mediaGalleryContainerStyles = {
-    width: '100%',
-    height: '100%'
+        VideoGalleryMemoized));
 };
-const localVideoTileLayoutTrampoline = (localTileOptions) => {
+const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
+const localVideoTileLayoutTrampoline = (
+/* @conditional-compile-remove(click-to-call) */ localTileOptions) => {
+    /* @conditional-compile-remove(click-to-call) */
+    return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';
     return 'floatingLocalVideo';
 };
 //# sourceMappingURL=MediaGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, OnRenderAvatarCallback, CustomAvatarOptions, Announcer } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\nimport { LocalVideoTileOptions } from '../CallComposite';\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem',\n    // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\nconst remoteVideoViewOptions = ({\n  scalingMode: 'Crop'\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout: VideoGalleryLayout;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n  /* @conditional-compile-remove(vertical-gallery) */\n  /* @conditional-compile-remove(rooms) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\n  const containerHeight = _useContainerHeight(containerRef);\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline();\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <Stack className={mergeStyles({\n      position: 'absolute',\n      height: '100%',\n      width: '100%'\n    })}>\n          <Stack styles={{\n        root: {\n          margin: 'auto',\n          maxHeight: '100%'\n        }\n      }}>\n            {options?.coinSize && <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />}\n          </Stack>\n        </Stack>;\n  }, [props.onFetchAvatarPersonaData]);\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden ? false : props.isMobile ? {\n      kind: 'drawer',\n      hostId: props.drawerMenuHostId\n    } : {\n      kind: 'contextual'\n    };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(() => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (props.userSetOverflowGalleryPosition === 'horizontalTop') {\n      return props.userSetOverflowGalleryPosition;\n    }\n    return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';\n  }, [/* @conditional-compile-remove(gallery-layouts) */props.userSetOverflowGalleryPosition, containerWidth, containerHeight]);\n  const VideoGalleryMemoized = useMemo(() => {\n    const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n      /* @conditional-compile-remove(gallery-layouts) */\n      return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n      return layoutBasedOnTilePosition;\n    };\n    return <VideoGallery {...videoGalleryProps} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={VideoGalleryStyles} layout={layoutBasedOnUserSelection()} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={props.onRenderAvatar ?? onRenderAvatar}\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenu={remoteVideoTileMenuOptions}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition} />;\n  }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, cameraSwitcherProps, onRenderAvatar, /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition, /* @conditional-compile-remove(vertical-gallery) */\n  containerAspectRatio, /* @conditional-compile-remove(gallery-layouts) */\n  props.userSetGalleryLayout, layoutBasedOnTilePosition]);\n  return <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst localVideoTileLayoutTrampoline = (localTileOptions?: string): VideoGalleryLayout => {\n  return 'floatingLocalVideo';\n};\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACnE,mDAAmD,CAAC,wCAAwC;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAA2C,SAAS,EAAE,4CAAmC;AAE9G,mDAAmD,CAAC,wCAAwC;AAC5F,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,4CAAmC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,aAAa,EAA6B,MAAM,4BAA4B,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,2BAA2B,EAAE,4CAAmC;AAEzE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAK/E,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAExB,MAAM,sBAAsB,GAAG;IAC7B,WAAW,EAAE,MAAM;CACE,CAAC;AAsBxB;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxE,MAAM,eAAe,GAAG,iCAAiC,EAAE,CAAC;IAE5D,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,QAAQ,GAAG,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,CAAC;IAC/C,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IAEnD,mDAAmD,CAAC,wCAAwC;IAC5F,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,mDAAmD,CAAC,wCAAwC;IAC5F,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,mDAAmD,CAAC,wCAAwC;IAC5F,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,gDAAgD,CAAC,wCAAwC,CAAC,mDAAmD;IAC7I,MAAM,oBAAoB,GAAG,cAAc,IAAI,eAAe,CAAC,CAAC,CAAC,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtG,MAAM,yBAAyB,GAAuB,8BAA8B;IAClF,gDAAgD,CAAC,MAAC,KAAK,CAAC,qBAA+C,0CAAE,QAAQ,CAClH,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,uCACK,sBAAsB,GACtB,qBAAqB,EACxB;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,MAAe,EAAE,OAA6B,EAAE,EAAE;QACjD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;YACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,IAC3D,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,KAAI,CACpB,oBAAC,aAAa,kBAAC,MAAM,EAAE,MAAM,IAAM,OAAO,IAAE,YAAY,EAAE,KAAK,CAAC,wBAAwB,IAAI,CAC7F,CACK,CACF,CACT,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,CAAC,wBAAwB,CAAC,CACjC,CAAC;IAEF,sDAAsD;IACtD,MAAM,0BAA0B,GAAoE,OAAO,CAAC,GAAG,EAAE;;QAC/G,OAAO,CAAA,MAAA,KAAK,CAAC,0BAA0B,0CAAE,QAAQ;YAC/C,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,KAAK,CAAC,QAAQ;gBAChB,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE;gBACpD,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,0BAA0B,0CAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEzF,mDAAmD;IACnD,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3C,kDAAkD;QAClD,IAAI,KAAK,CAAC,8BAA8B,KAAK,eAAe,EAAE;YAC5D,OAAO,KAAK,CAAC,8BAA8B,CAAC;SAC7C;QACD,OAAO,cAAc,IAAI,eAAe,IAAI,cAAc,GAAG,eAAe,IAAI,EAAE,GAAG,CAAC;YACpF,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,kBAAkB,CAAC;IACzB,CAAC,EAAE;QACD,kDAAkD,CAAC,KAAK,CAAC,8BAA8B;QACvF,cAAc;QACd,eAAe;KAChB,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,0BAA0B,GAAG,GAAuB,EAAE;YAC1D,kDAAkD;YAClD,OAAO,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB,CAAC;YAC5F,OAAO,yBAAyB,CAAC;QACnC,CAAC,CAAC;QAEF,OAAO,CACL,oBAAC,YAAY,oBACP,iBAAiB,IACrB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,MAAM,EAAE,kBAAkB,EAC1B,MAAM,EAAE,0BAA0B,EAAE,EACpC,gCAAgC,EAAE,KAAK,CAAC,QAAQ,EAChD,gCAAgC,EAAE,mBAAmB,EACrD,cAAc,EAAE,cAAc;YAC9B,sDAAsD;YACtD,mBAAmB,EAAE,0BAA0B;YAC/C,mDAAmD;YACnD,uBAAuB,EAAE,uBAAuB;YAChD,wCAAwC;YACxC,kBAAkB,EAChB,KAAK,CAAC,qBAAqB,KAAK,KAAK,IAAI,QAAQ,KAAK,UAAU,IAAI,CAAC,WAAW,IAAI,QAAQ,KAAK,SAAS,CAAC;gBACzG,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,oBAAoB,GAAG,CAAC;oBAC5C,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,MAAM,IAEZ,CACH,CAAC;IACJ,CAAC,EAAE;QACD,iBAAiB;QACjB,KAAK,CAAC,QAAQ;QACd,wCAAwC;QACxC,KAAK,CAAC,qBAAqB;QAC3B,mBAAmB;QACnB,cAAc;QACd,sDAAsD;QACtD,0BAA0B;QAC1B,mDAAmD;QACnD,uBAAuB;QACvB,wCAAwC;QACxC,QAAQ;QACR,wCAAwC;QACxC,WAAW;QACX,mDAAmD;QACnD,oBAAoB;QACpB,kDAAkD;QAClD,KAAK,CAAC,oBAAoB;QAC1B,yBAAyB;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,6BAAyD,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,2BAA2B;QAC5G,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACrE,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAErF,MAAM,8BAA8B,GAAG;AACrC,gDAAgD,CAAC,gBAAyB,EACtD,EAAE;IACtB,gDAAgD;IAChD,OAAO,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC;IACtE,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { CSSProperties, useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, CustomAvatarOptions, Announcer } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\nimport { LocalVideoTileOptions } from '../CallComposite';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n  scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout: VideoGalleryLayout;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  /* @conditional-compile-remove(rooms) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const userRole = adapter.getState().call?.role;\n  /* @conditional-compile-remove(rooms) */\n  const isRoomsCall = adapter.getState().isRoomsCall;\n\n  /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */\n  const containerHeight = _useContainerHeight(containerRef);\n  /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline(\n    /* @conditional-compile-remove(click-to-call) */ (props.localVideoTileOptions as LocalVideoTileOptions)?.position\n  );\n\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return (\n        <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n          <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n            {options?.coinSize && (\n              <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n            )}\n          </Stack>\n        </Stack>\n      );\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden\n      ? false\n      : props.isMobile\n      ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n      : { kind: 'contextual' };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(() => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    if (props.userSetOverflowGalleryPosition === 'horizontalTop') {\n      return props.userSetOverflowGalleryPosition;\n    }\n    return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9\n      ? 'verticalRight'\n      : 'horizontalBottom';\n  }, [\n    /* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition,\n    containerWidth,\n    containerHeight\n  ]);\n\n  const VideoGalleryMemoized = useMemo(() => {\n    const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n      /* @conditional-compile-remove(gallery-layouts) */\n      return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n      return layoutBasedOnTilePosition;\n    };\n\n    return (\n      <VideoGallery\n        {...videoGalleryProps}\n        localVideoViewOptions={localVideoViewOptions}\n        remoteVideoViewOptions={remoteVideoViewOptions}\n        styles={VideoGalleryStyles}\n        layout={layoutBasedOnUserSelection()}\n        showCameraSwitcherInLocalPreview={props.isMobile}\n        localVideoCameraCycleButtonProps={cameraSwitcherProps}\n        onRenderAvatar={onRenderAvatar}\n        /* @conditional-compile-remove(pinned-participants) */\n        remoteVideoTileMenu={remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        /* @conditional-compile-remove(rooms) */\n        localVideoTileSize={\n          props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')\n            ? 'hidden'\n            : props.isMobile && containerAspectRatio < 1\n            ? '9:16'\n            : '16:9'\n        }\n      />\n    );\n  }, [\n    videoGalleryProps,\n    props.isMobile,\n    /* @conditional-compile-remove(rooms) */\n    props.localVideoTileOptions,\n    cameraSwitcherProps,\n    onRenderAvatar,\n    /* @conditional-compile-remove(pinned-participants) */\n    remoteVideoTileMenuOptions,\n    /* @conditional-compile-remove(vertical-gallery) */\n    overflowGalleryPosition,\n    /* @conditional-compile-remove(rooms) */\n    userRole,\n    /* @conditional-compile-remove(rooms) */\n    isRoomsCall,\n    /* @conditional-compile-remove(vertical-gallery) */\n    containerAspectRatio,\n    /* @conditional-compile-remove(gallery-layouts) */\n    props.userSetGalleryLayout,\n    layoutBasedOnTilePosition\n  ]);\n\n  return (\n    <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>\n  );\n};\n\nconst mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };\n\nconst localVideoTileLayoutTrampoline = (\n  /* @conditional-compile-remove(click-to-call) */ localTileOptions?: string\n): VideoGalleryLayout => {\n  /* @conditional-compile-remove(click-to-call) */\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n  return 'floatingLocalVideo';\n};\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

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

@@ -10,10 +10,10 @@ import { useLocale } from '../../localization';
 export function MutedNotification(props) {
     const locale = useLocale();
     const theme = useTheme();
-    return React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
+    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
         React.createElement(Stack, { horizontal: true, className: mergeStyles(stackStyle(theme)) },
             React.createElement(CallCompositeIcon, { iconName: "Muted", className: mergeStyles(iconStyle(theme)) }),
-            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage)));
+            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage))));
 }
 const stackStyle = (theme) => {
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,CAAC;QAClL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CAAC;AACb,CAAC;AACD,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;AACF,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface MutedNotificationProps {\n  speakingWhileMuted: boolean;\n}\n\n/**\n * Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n  const locale = useLocale();\n  const theme = useTheme();\n  return <Stack horizontal horizontalAlign=\"center\" className={mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles)}>\n      <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n        <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n        <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n          {locale.strings.call.mutedMessage}\n        </Text>\n      </Stack>\n    </Stack>;\n}\nconst stackStyle = (theme: ITheme): IStyle => {\n  return {\n    background: theme.palette.black,\n    gap: `1rem`,\n    padding: `1rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    width: 'fit-content',\n    opacity: 0.8\n  };\n};\nconst iconStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    maxHeight: '1.25rem'\n  };\n};\nconst textStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    fontSize: `1rem`\n  };\n};\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeIn100\n};\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeOut200,\n  display: 'none'\n};"]}
+{"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,WAAW,CACpB,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,CAC7G;QAED,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CACT,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;AAEF,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface MutedNotificationProps {\n  speakingWhileMuted: boolean;\n}\n\n/**\n * Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n  const locale = useLocale();\n  const theme = useTheme();\n\n  return (\n    <Stack\n      horizontal\n      horizontalAlign=\"center\"\n      className={mergeStyles(\n        props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles\n      )}\n    >\n      <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n        <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n        <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n          {locale.strings.call.mutedMessage}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n}\n\nconst stackStyle = (theme: ITheme): IStyle => {\n  return {\n    background: theme.palette.black,\n    gap: `1rem`,\n    padding: `1rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    width: 'fit-content',\n    opacity: 0.8\n  };\n};\n\nconst iconStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    maxHeight: '1.25rem'\n  };\n};\n\nconst textStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    fontSize: `1rem`\n  };\n};\n\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeIn100\n};\n\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeOut200,\n  display: 'none'\n};\n"]}

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

@@ -7,7 +7,6 @@ import { mergeStyles, Stack, Text } from '@fluentui/react';
 import { useLocale } from '../../localization';
 import { containerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';
 import { useHandlers } from '../hooks/useHandlers';
-import { useLocalVideoStartTrigger } from './MediaGallery';
 import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
@@ -19,13 +18,10 @@ export const NetworkReconnectTile = (props) => {
     const palette = useTheme().palette;
     const strings = useLocale().strings.call;
     const handlers = useHandlers(ExpandedLocalVideoTile);
-    // This tile may be shown at the beginning of a call.
-    // So we need to transition local video to the call.
-    useLocalVideoStartTrigger(!!props.localParticipantVideoStream.isAvailable);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
             React.createElement(Stack, { horizontal: true, className: mergeStyles(titleContainerStyle) },
                 React.createElement(CallCompositeIcon, { iconName: "NetworkReconnectIcon", className: mergeStyles(titleStyle(palette, isVideoReady)) }),
                 React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectTitle)),
-            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers));
+            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers)));
 };
 //# sourceMappingURL=NetworkReconnectTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC1H,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;;IACpF,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,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,qDAAqD;IACrD,oDAAoD;IACpD,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,WAAW,CAAC,CAAC;IAC3E,OAAO,oBAAC,sBAAsB,kBAAC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAAE,cAAc,EAAE,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;YACjN,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;gBAC3D,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,sBAAsB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;gBAChH,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IACpF,OAAO,CAAC,qBAAqB,CACzB,CACD;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IAC1F,OAAO,CAAC,2BAA2B,CAC/B,CACD,IAAM,QAAQ,EAAI,CAAC;AACnC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { containerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useLocalVideoStartTrigger } from './MediaGallery';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n}\n\n/**\n * @private\n */\nexport const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const palette = useTheme().palette;\n  const strings = useLocale().strings.call;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  // This tile may be shown at the beginning of a call.\n  // So we need to transition local video to the call.\n  useLocalVideoStartTrigger(!!props.localParticipantVideoStream.isAvailable);\n  return <ExpandedLocalVideoTile localParticipantVideoStream={props.localParticipantVideoStream} overlayContent={<Stack verticalFill horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(containerStyle)} aria-atomic>\n          <Stack horizontal className={mergeStyles(titleContainerStyle)}>\n            <CallCompositeIcon iconName=\"NetworkReconnectIcon\" className={mergeStyles(titleStyle(palette, isVideoReady))} />\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live={'assertive'}>\n              {strings.networkReconnectTitle}\n            </Text>\n          </Stack>\n          <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live={'assertive'}>\n            {strings.networkReconnectMoreDetails}\n          </Text>\n        </Stack>} {...handlers} />;\n};\"../../../../../react-components/src\""]}
+{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACX,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;;IACpF,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,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;YAGtC,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;gBAC3D,oBAAC,iBAAiB,IAChB,QAAQ,EAAC,sBAAsB,EAC/B,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GACzD;gBACF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IACpF,OAAO,CAAC,qBAAqB,CACzB,CACD;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IAC1F,OAAO,CAAC,2BAA2B,CAC/B,CACD,IAEN,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport {\n  containerStyle,\n  moreDetailsStyle,\n  titleContainerStyle,\n  titleStyle\n} from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n}\n\n/**\n * @private\n */\nexport const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const palette = useTheme().palette;\n  const strings = useLocale().strings.call;\n\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        <Stack\n          verticalFill\n          horizontalAlign=\"center\"\n          verticalAlign=\"center\"\n          className={mergeStyles(containerStyle)}\n          aria-atomic\n        >\n          <Stack horizontal className={mergeStyles(titleContainerStyle)}>\n            <CallCompositeIcon\n              iconName=\"NetworkReconnectIcon\"\n              className={mergeStyles(titleStyle(palette, isVideoReady))}\n            />\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live={'assertive'}>\n              {strings.networkReconnectTitle}\n            </Text>\n          </Stack>\n          <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live={'assertive'}>\n            {strings.networkReconnectMoreDetails}\n          </Text>\n        </Stack>\n      }\n      {...handlers}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}

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

@@ -11,10 +11,16 @@ import { hiddenStyles } from '../../../common/styles/Pane.styles';
 export const SidePane = (props) => {
     var _a;
     const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();
-    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;
+    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) &&
+        overrideSidePane.persistRenderingWhenClosed &&
+        !overrideSidePane.isActive;
     const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
     const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);
-    const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : maxWidthStyles;
+    const paneStyles = renderingOnlyHiddenContent
+        ? hiddenStyles
+        : props.mobileView
+            ? availableSpaceStyles
+            : maxWidthStyles;
     const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
     /**
      * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
@@ -27,26 +33,38 @@ export const SidePane = (props) => {
     }, [updateSidePaneRenderer]);
     const LegacyHeader = useMemo(() => {
         var _a;
-        return React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
+        return (React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
             // legacy arguments to be removed in breaking change:
-            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked });
-    }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer, closePane]);
+            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked }));
+    }, [
+        overrideSidePaneId,
+        props.onChatButtonClicked,
+        props.onPeopleButtonClicked,
+        props.disablePeopleButton,
+        props.disableChatButton,
+        sidePaneRenderer,
+        closePane
+    ]);
     const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
     const ContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? undefined : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.contentRenderer;
-    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? overrideSidePane.renderer.contentRenderer : undefined;
+    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+        ? overrideSidePane.renderer.contentRenderer
+        : undefined;
     if (!ContentRender && !OverrideContentRender) {
         return React.createElement(EmptyElement, null);
     }
-    return React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
+    return (React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
         HeaderToRender,
         React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },
-                ContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
+                ContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(ContentRender, null))),
-                OverrideContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? hiddenStyles : scrollableContainerContents },
+                        React.createElement(ContentRender, null)))),
+                OverrideContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+                        ? hiddenStyles
+                        : scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(OverrideContentRender, null))))));
+                        React.createElement(OverrideContentRender, null))))))));
 };
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };