@azure/communication-react 1.7.1-alpha-202309010013 → 1.8.0-beta.1

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

@@ -21,6 +21,7 @@ const VideoGalleryStyles = {
     root: {
         height: '100%',
         minHeight: '10rem',
+        // space affordance to ensure media gallery is never collapsed
         minWidth: '6rem'
     }
 };
@@ -54,82 +55,57 @@ export const MediaGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
-    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
-    /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
+    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' };
+        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';
+    }, [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) */
-            remoteVideoTileMenuOptions: 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,
-        props.onRenderAvatar,
-        /* @conditional-compile-remove(rooms) */
-        props.localVideoTileOptions,
-        cameraSwitcherProps,
-        onRenderAvatar,
-        /* @conditional-compile-remove(pinned-participants) */
+        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) */ remoteVideoTileMenuOptions: 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, props.onRenderAvatar,
+        props.localVideoTileOptions, cameraSwitcherProps, onRenderAvatar,
         remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(vertical-gallery) */
         overflowGalleryPosition,
-        /* @conditional-compile-remove(rooms) */
         userRole,
-        /* @conditional-compile-remove(rooms) */
         isRoomsCall,
-        /* @conditional-compile-remove(vertical-gallery) */
-        containerAspectRatio,
-        /* @conditional-compile-remove(gallery-layouts) */
-        props.userSetGalleryLayout,
-        layoutBasedOnTilePosition
-    ]);
-    return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
+        containerAspectRatio, layoutBasedOnTilePosition]);
+    return React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        VideoGalleryMemoized));
+        VideoGalleryMemoized);
 };
 /**
  * @private
@@ -157,9 +133,11 @@ export const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransitio
         }
     }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
-const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
-const localVideoTileLayoutTrampoline = (
-/* @conditional-compile-remove(click-to-call) */ localTileOptions) => {
+const mediaGalleryContainerStyles = {
+    width: '100%',
+    height: '100%'
+};
+const localVideoTileLayoutTrampoline = (localTileOptions) => {
     /* @conditional-compile-remove(click-to-call) */
     return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';
     return 'floatingLocalVideo';

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

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../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 {\n  VideoGallery,\n  VideoStreamOptions,\n  OnRenderAvatarCallback,\n  CustomAvatarOptions,\n  Announcer\n} 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) */\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  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) */\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) */\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  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\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={props.onRenderAvatar ?? onRenderAvatar}\n        /* @conditional-compile-remove(pinned-participants) */\n        remoteVideoTileMenuOptions={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    props.onRenderAvatar,\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\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};\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\""]}
+{"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) */\nimport { LocalVideoTileOptions } from '../CallComposite';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\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) */\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\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) */\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline( /* @conditional-compile-remove(click-to-call) */(props.localVideoTileOptions as LocalVideoTileOptions)?.position);\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    return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'VerticalRight' : 'HorizontalBottom';\n  }, [containerWidth, containerHeight]);\n  const VideoGalleryMemoized = useMemo(() => {\n    const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\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) */ remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition}\n    /* @conditional-compile-remove(rooms) */ localVideoTileSize={props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9'} />;\n  }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, /* @conditional-compile-remove(rooms) */\n  props.localVideoTileOptions, cameraSwitcherProps, onRenderAvatar, /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition, /* @conditional-compile-remove(rooms) */\n  userRole, /* @conditional-compile-remove(rooms) */\n  isRoomsCall, /* @conditional-compile-remove(vertical-gallery) */\n  containerAspectRatio, 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  /* @conditional-compile-remove(click-to-call) */\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n  return 'floatingLocalVideo';\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":["../../../../../../../../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"]}
+{"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};"]}

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

@@ -22,10 +22,10 @@ export const NetworkReconnectTile = (props) => {
     // 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":["../../../../../../../../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,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;IAEzC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,qDAAqD;IACrD,oDAAoD;IACpD,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,WAAW,CAAC,CAAC;IAE3E,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 { 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\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\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\""]}
+{"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\""]}

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

@@ -11,16 +11,10 @@ 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.
@@ -33,38 +27,26 @@ 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 = () => { };

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

@@ -1 +1 @@
-{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport {\n  containerContextStyles,\n  paneBodyContainer,\n  scrollableContainer,\n  scrollableContainerContents\n} from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  const renderingHiddenOverrideContent =\n    overrideSidePane?.renderer.contentRenderer &&\n    overrideSidePane.persistRenderingWhenClosed &&\n    !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n\n  const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);\n  const paneStyles = renderingOnlyHiddenContent\n    ? hiddenStyles\n    : props.mobileView\n    ? availableSpaceStyles\n    : maxWidthStyles;\n\n  const Header =\n    (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ??\n    EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const { updateSidePaneRenderer } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return (\n      <PeopleAndChatHeader\n        onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane}\n        activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n        // legacy arguments to be removed in breaking change:\n        disablePeopleButton={props.disablePeopleButton}\n        disableChatButton={props.disableChatButton}\n        onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked}\n        onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked}\n      />\n    );\n  }, [\n    overrideSidePaneId,\n    props.onChatButtonClicked,\n    props.onPeopleButtonClicked,\n    props.disablePeopleButton,\n    props.disableChatButton,\n    sidePaneRenderer,\n    closePane\n  ]);\n\n  const HeaderToRender =\n    props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender =\n    overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed\n      ? overrideSidePane.renderer.contentRenderer\n      : undefined;\n\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n\n  return (\n    <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && (\n            <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n          {OverrideContentRender && (\n            <Stack.Item\n              verticalFill\n              styles={\n                !overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed\n                  ? hiddenStyles\n                  : scrollableContainerContents\n              }\n            >\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n        </Stack>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;\n"]}
+{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  const renderingHiddenOverrideContent = overrideSidePane?.renderer.contentRenderer && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n  const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : maxWidthStyles;\n  const Header = (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ?? EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const {\n    updateSidePaneRenderer\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return <PeopleAndChatHeader onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane} activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n    // legacy arguments to be removed in breaking change:\n    disablePeopleButton={props.disablePeopleButton} disableChatButton={props.disableChatButton} onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked} onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked} />;\n  }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer, closePane]);\n  const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>}\n          {OverrideContentRender && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>}\n        </Stack>\n      </Stack.Item>\n    </Stack>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACpE,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\n\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const { sidePaneRenderer } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};\n"]}
+{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EACJ,gBAAgB,EAChB,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EACJ,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const {\n    sidePaneRenderer\n  } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};"]}

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

@@ -15,9 +15,9 @@ export const usePeoplePane = (props) => {
         (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = useLocale().strings.call;
-    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
+    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false }), [mobileView, closePane, localeStrings]);
     const onRenderContent = useCallback(() => {
-        return (React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView }));
+        return React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView });
     }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
@@ -34,6 +34,10 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
+    return {
+        openPeoplePane: openPane,
+        closePeoplePane: closePane,
+        isPeoplePaneOpen: isOpen
+    };
 };
 //# sourceMappingURL=usePeoplePane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKlD,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAQ7B,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,EACV,eAAe,EAChB,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAE/C,MAAM,cAAc,GAAG,WAAW,CAChC,GAAG,EAAE,CAAC,CACJ,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,aAAa,CAAC,eAAe,EAC1C,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EACxE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAC/B,CACH,EACD,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,CACvC,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,UAAU,EACtB,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,2BAA2B,EACxD,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAExG,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC;AAC5F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\n\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n  peopleButtonRef?: RefObject<IButton>;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView,\n    peopleButtonRef\n  } = props;\n\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n\n  const localeStrings = useLocale().strings.call;\n\n  const onRenderHeader = useCallback(\n    () => (\n      <SidePaneHeader\n        onClose={closePane}\n        headingText={localeStrings.peoplePaneTitle}\n        dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}\n        mobileView={mobileView ?? false}\n      />\n    ),\n    [mobileView, closePane, localeStrings]\n  );\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <PeoplePaneContent\n        inviteLink={inviteLink}\n        onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        setDrawerMenuItems={setDrawerMenuItems}\n        mobileView={mobileView}\n      />\n    );\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: PEOPLE_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };\n};\n\"../../../../../../react-components/src\""]}
+{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAQ7B,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,EACV,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAC/C,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,eAAe,EAAE,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EAAE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAAI,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAChR,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,oBAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;IACrO,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACxG,MAAM,gBAAgB,GAAqB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACxD,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,OAAO;QACL,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,MAAM;KACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n  peopleButtonRef?: RefObject<IButton>;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView,\n    peopleButtonRef\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n  const localeStrings = useLocale().strings.call;\n  const onRenderHeader = useCallback(() => <SidePaneHeader onClose={closePane} headingText={localeStrings.peoplePaneTitle} dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel} mobileView={mobileView ?? false} />, [mobileView, closePane, localeStrings]);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <PeoplePaneContent inviteLink={inviteLink} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={onFetchParticipantMenuItems} setDrawerMenuItems={setDrawerMenuItems} mobileView={mobileView} />;\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: PEOPLE_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  return {\n    openPeoplePane: openPane,\n    closePeoplePane: closePane,\n    isPeoplePaneOpen: isOpen\n  };\n};\"../../../../../../react-components/src\""]}

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

@@ -21,26 +21,21 @@ export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestEr
     const locale = useLocale();
     const onRenderHeader = useCallback(() => {
         var _a, _b;
-        return (React.createElement(SidePaneHeader, { onClose: closePane, 
-            /* @conditional-compile-remove(video-background-effects) */
-            headingText: locale.strings.call.videoEffectsPaneTitle, 
-            /* @conditional-compile-remove(video-background-effects) */
-            dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView }));
+        return React.createElement(SidePaneHeader, { onClose: closePane, 
+            /* @conditional-compile-remove(video-background-effects) */ headingText: locale.strings.call.videoEffectsPaneTitle, 
+            /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView });
     }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);
     /* @conditional-compile-remove(video-background-effects) */
-    const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');
+    const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');
     const onRenderContent = useCallback(() => {
-        return (React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
-            /* @conditional-compile-remove(video-background-effects) */
-            activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
+        return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
+            /* @conditional-compile-remove(video-background-effects) */ activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                 // Clear any existing video effects error when the user clicks on a new video effect
                 /* @conditional-compile-remove(video-background-effects) */
                 latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
-            } }));
+            } });
     }, [
-        /* @conditional-compile-remove(video-background-effects) */
-        latestVideoEffectError,
-        onDismissError
+        latestVideoEffectError, onDismissError
     ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void,\n  mobileView: boolean,\n  latestErrors: ActiveErrorMessage[],\n  onDismissError: (error: ActiveErrorMessage) => void,\n  cameraButtonRef?: React.RefObject<IButton>\n): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    cameraButtonRef?.current?.focus();\n  }, [cameraButtonRef, updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  const onRenderHeader = useCallback(() => {\n    return (\n      <SidePaneHeader\n        onClose={closePane}\n        /* @conditional-compile-remove(video-background-effects) */\n        headingText={locale.strings.call.videoEffectsPaneTitle}\n        /* @conditional-compile-remove(video-background-effects) */\n        dismissSidePaneButtonAriaLabel={\n          locale.strings.call.dismissSidePaneButtonLabel ??\n          locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n          'Close'\n        }\n        mobileView={mobileView}\n      />\n    );\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <VideoEffectsPaneContent\n        onDismissError={onDismissError}\n        /* @conditional-compile-remove(video-background-effects) */\n        activeVideoEffectError={latestVideoEffectError}\n        activeVideoEffectChange={() => {\n          // Clear any existing video effects error when the user clicks on a new video effect\n          /* @conditional-compile-remove(video-background-effects) */\n          latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n        }}\n      />\n    );\n  }, [\n    /* @conditional-compile-remove(video-background-effects) */\n    latestVideoEffectError,\n    onDismissError\n  ]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: VIDEO_EFFECTS_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}\n\"../../../../../../react-components/src\""]}
+{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void, cameraButtonRef?: React.RefObject<IButton>): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    cameraButtonRef?.current?.focus();\n  }, [cameraButtonRef, updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  const onRenderHeader = useCallback(() => {\n    return <SidePaneHeader onClose={closePane}\n    /* @conditional-compile-remove(video-background-effects) */ headingText={locale.strings.call.videoEffectsPaneTitle}\n    /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel={locale.strings.call.dismissSidePaneButtonLabel ?? locale.strings.callWithChat.dismissSidePaneButtonLabel ?? 'Close'} mobileView={mobileView} />;\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */locale.strings, mobileView]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <VideoEffectsPaneContent onDismissError={onDismissError}\n    /* @conditional-compile-remove(video-background-effects) */ activeVideoEffectError={latestVideoEffectError} activeVideoEffectChange={() => {\n      // Clear any existing video effects error when the user clicks on a new video effect\n      /* @conditional-compile-remove(video-background-effects) */\n      latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n    }} />;\n  }, [/* @conditional-compile-remove(video-background-effects) */\n  latestVideoEffectError, onDismissError]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: VIDEO_EFFECTS_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}\"../../../../../../react-components/src\""]}

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

@@ -11,6 +11,6 @@ import { useLocale } from '../../localization';
 export const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return (React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) })));
+    return React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) }));
 };
 //# sourceMappingURL=StartCallButton.js.map