@azure/communication-react 1.20.0-beta.1 → 1.20.0

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

@@ -12,8 +12,9 @@ import { useSelector } from '../hooks/useSelector';
 import { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';
 import { LocalVideoCameraCycleButton } from "../../../../../react-components/src";
 import { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';
-import { useAdapter } from '../adapter/CallAdapterProvider';
 import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt } from '../utils/spotlightUtils';
+import { getIsRoomsCall, getReactionResources, getRole } from '../selectors/baseSelectors';
+import { getCapabilites } from '../selectors/baseSelectors';
 const VideoGalleryStyles = {
     root: {
         height: '100%',
@@ -33,21 +34,21 @@ const remoteVideoViewOptions = {
  * @private
  */
 export const MediaGallery = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { pinnedParticipants = [], setPinnedParticipants, setIsPromptOpen, setPromptProps, hideSpotlightButtons, videoTilesOptions, captionsOptions } = props;
     const videoGalleryProps = usePropsFor(VideoGallery);
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const announcerString = useParticipantChangedAnnouncement();
-    const adapter = useAdapter();
-    const userRole = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
-    const isRoomsCall = adapter.getState().isRoomsCall;
+    const userRole = useSelector(getRole);
+    const capabilities = useSelector(getCapabilites);
+    const isRoomsCall = useSelector(getIsRoomsCall);
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
-    const reactionResources = adapter.getState().reactions;
-    const layoutBasedOnTilePosition = getVideoGalleryLayoutBasedOnLocalOptions((_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
+    const reactionResources = useSelector(getReactionResources);
+    const layoutBasedOnTilePosition = getVideoGalleryLayoutBasedOnLocalOptions((_a = props.localVideoTileOptions) === null || _a === void 0 ? void 0 : _a.position);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -72,7 +73,7 @@ export const MediaGallery = (props) => {
         } : {
             kind: 'contextual'
         };
-    }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
+    }, [(_b = props.remoteVideoTileMenuOptions) === null || _b === void 0 ? void 0 : _b.isHidden, props.isMobile, props.drawerMenuHostId]);
     const overflowGalleryPosition = useMemo(() => {
         return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';
     }, [containerWidth, containerHeight]);
@@ -99,12 +100,13 @@ export const MediaGallery = (props) => {
         } : undefined;
     }, [setPinnedParticipants, pinnedParticipants]);
     const VideoGalleryMemoized = useMemo(() => {
+        var _a;
         const layoutBasedOnUserSelection = () => {
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
             return layoutBasedOnTilePosition;
         };
-        return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { videoTilesOptions: videoTilesOptions, localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: galleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions, overflowGalleryPosition: overflowGalleryPosition, localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9', pinnedParticipants: pinnedParticipants, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, reactionResources: reactionResources, onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt, onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt, onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt, onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(userRole !== null && userRole !== void 0 ? userRole : '') ? videoGalleryProps.onMuteParticipant : undefined }));
-    }, [videoGalleryProps, videoTilesOptions, galleryStyles, props.isMobile, props.localVideoTileOptions, props.userSetGalleryLayout, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, overflowGalleryPosition, userRole, isRoomsCall, containerAspectRatio, pinnedParticipants, onPinParticipant, onUnpinParticipant, reactionResources, hideSpotlightButtons, onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, layoutBasedOnTilePosition]);
+        return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { videoTilesOptions: videoTilesOptions, localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: galleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions, overflowGalleryPosition: overflowGalleryPosition, localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9', pinnedParticipants: pinnedParticipants, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, reactionResources: reactionResources, onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt, onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt, onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt, onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || userRole === 'Unknown' ? videoGalleryProps.onMuteParticipant : undefined }));
+    }, [videoGalleryProps, videoTilesOptions, galleryStyles, props.isMobile, props.localVideoTileOptions, props.userSetGalleryLayout, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, overflowGalleryPosition, userRole, isRoomsCall, containerAspectRatio, pinnedParticipants, onPinParticipant, onUnpinParticipant, reactionResources, hideSpotlightButtons, onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, layoutBasedOnTilePosition, capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers]);
     return React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized);

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

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { CSSProperties, useCallback, useMemo } from 'react';\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, CustomAvatarOptions, Announcer, VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { PromptProps } from './Prompt';\nimport { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt } from '../utils/spotlightUtils';\nimport { VideoTilesOptions } from '@internal/react-components';\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  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  userSetGalleryLayout: VideoGalleryLayout;\n  pinnedParticipants?: string[];\n  setPinnedParticipants?: (pinnedParticipants: string[]) => void;\n  setIsPromptOpen: (isOpen: boolean) => void;\n  setPromptProps: (props: PromptProps) => void;\n  hideSpotlightButtons?: boolean;\n  videoTilesOptions?: VideoTilesOptions;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const {\n    pinnedParticipants = [],\n    setPinnedParticipants,\n    setIsPromptOpen,\n    setPromptProps,\n    hideSpotlightButtons,\n    videoTilesOptions,\n    captionsOptions\n  } = props;\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n  const adapter = useAdapter();\n  const userRole = adapter.getState().call?.role;\n  const isRoomsCall = adapter.getState().isRoomsCall;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n  const reactionResources = adapter.getState().reactions;\n  const layoutBasedOnTilePosition: VideoGalleryLayout = getVideoGalleryLayoutBasedOnLocalOptions((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  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  const overflowGalleryPosition = useMemo(() => {\n    return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';\n  }, [containerWidth, containerHeight]);\n  const {\n    onStartLocalSpotlight,\n    onStopLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopRemoteSpotlight\n  } = videoGalleryProps;\n  const {\n    onStartLocalSpotlightWithPrompt,\n    onStopLocalSpotlightWithPrompt\n  } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);\n  const {\n    onStartRemoteSpotlightWithPrompt,\n    onStopRemoteSpotlightWithPrompt\n  } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);\n  const galleryStyles = useMemo(() => {\n    return {\n      ...VideoGalleryStyles,\n      ...(captionsOptions?.height === 'full' ? {\n        root: {\n          postion: 'absolute'\n        }\n      } : {})\n    };\n  }, [captionsOptions?.height]);\n  const onPinParticipant = useMemo(() => {\n    return setPinnedParticipants ? (userId: string) => {\n      if (!pinnedParticipants.includes(userId)) {\n        setPinnedParticipants(pinnedParticipants.concat(userId));\n      }\n    } : undefined;\n  }, [setPinnedParticipants, pinnedParticipants]);\n  const onUnpinParticipant = useMemo(() => {\n    return setPinnedParticipants ? (userId: string) => {\n      setPinnedParticipants(pinnedParticipants.filter(participantId => participantId !== userId));\n    } : undefined;\n  }, [setPinnedParticipants, pinnedParticipants]);\n  const VideoGalleryMemoized = useMemo(() => {\n    const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n      return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n      return layoutBasedOnTilePosition;\n    };\n    return <VideoGallery {...videoGalleryProps} videoTilesOptions={videoTilesOptions} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={galleryStyles} layout={layoutBasedOnUserSelection()} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={onRenderAvatar} remoteVideoTileMenu={remoteVideoTileMenuOptions} overflowGalleryPosition={overflowGalleryPosition} localVideoTileSize={props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9'} pinnedParticipants={pinnedParticipants} onPinParticipant={onPinParticipant} onUnpinParticipant={onUnpinParticipant} reactionResources={reactionResources} onStartLocalSpotlight={hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt} onStopLocalSpotlight={hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt} onStartRemoteSpotlight={hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt} onStopRemoteSpotlight={hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt} onMuteParticipant={['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(userRole ?? '') ? videoGalleryProps.onMuteParticipant : undefined} />;\n  }, [videoGalleryProps, videoTilesOptions, galleryStyles, props.isMobile, props.localVideoTileOptions, props.userSetGalleryLayout, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, overflowGalleryPosition, userRole, isRoomsCall, containerAspectRatio, pinnedParticipants, onPinParticipant, onUnpinParticipant, reactionResources, hideSpotlightButtons, onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, layoutBasedOnTilePosition]);\n  return <div ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst getVideoGalleryLayoutBasedOnLocalOptions = (localTileOptions?: string): VideoGalleryLayout => {\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n};"]}
+{"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, useMemo } from 'react';\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, CustomAvatarOptions, Announcer, VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite';\nimport { PromptProps } from './Prompt';\nimport { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt } from '../utils/spotlightUtils';\nimport { VideoTilesOptions } from '@internal/react-components';\nimport { getIsRoomsCall, getReactionResources, getRole } from '../selectors/baseSelectors';\nimport { getCapabilites } from '../selectors/baseSelectors';\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  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  userSetGalleryLayout: VideoGalleryLayout;\n  pinnedParticipants?: string[];\n  setPinnedParticipants?: (pinnedParticipants: string[]) => void;\n  setIsPromptOpen: (isOpen: boolean) => void;\n  setPromptProps: (props: PromptProps) => void;\n  hideSpotlightButtons?: boolean;\n  videoTilesOptions?: VideoTilesOptions;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const {\n    pinnedParticipants = [],\n    setPinnedParticipants,\n    setIsPromptOpen,\n    setPromptProps,\n    hideSpotlightButtons,\n    videoTilesOptions,\n    captionsOptions\n  } = props;\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n  const userRole = useSelector(getRole);\n  const capabilities = useSelector(getCapabilites);\n  const isRoomsCall = useSelector(getIsRoomsCall);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n  const reactionResources = useSelector(getReactionResources);\n  const layoutBasedOnTilePosition: VideoGalleryLayout = getVideoGalleryLayoutBasedOnLocalOptions((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  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  const overflowGalleryPosition = useMemo(() => {\n    return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';\n  }, [containerWidth, containerHeight]);\n  const {\n    onStartLocalSpotlight,\n    onStopLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopRemoteSpotlight\n  } = videoGalleryProps;\n  const {\n    onStartLocalSpotlightWithPrompt,\n    onStopLocalSpotlightWithPrompt\n  } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);\n  const {\n    onStartRemoteSpotlightWithPrompt,\n    onStopRemoteSpotlightWithPrompt\n  } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);\n  const galleryStyles = useMemo(() => {\n    return {\n      ...VideoGalleryStyles,\n      ...(captionsOptions?.height === 'full' ? {\n        root: {\n          postion: 'absolute'\n        }\n      } : {})\n    };\n  }, [captionsOptions?.height]);\n  const onPinParticipant = useMemo(() => {\n    return setPinnedParticipants ? (userId: string) => {\n      if (!pinnedParticipants.includes(userId)) {\n        setPinnedParticipants(pinnedParticipants.concat(userId));\n      }\n    } : undefined;\n  }, [setPinnedParticipants, pinnedParticipants]);\n  const onUnpinParticipant = useMemo(() => {\n    return setPinnedParticipants ? (userId: string) => {\n      setPinnedParticipants(pinnedParticipants.filter(participantId => participantId !== userId));\n    } : undefined;\n  }, [setPinnedParticipants, pinnedParticipants]);\n  const VideoGalleryMemoized = useMemo(() => {\n    const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n      return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n      return layoutBasedOnTilePosition;\n    };\n    return <VideoGallery {...videoGalleryProps} videoTilesOptions={videoTilesOptions} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={galleryStyles} layout={layoutBasedOnUserSelection()} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={onRenderAvatar} remoteVideoTileMenu={remoteVideoTileMenuOptions} overflowGalleryPosition={overflowGalleryPosition} localVideoTileSize={props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9'} pinnedParticipants={pinnedParticipants} onPinParticipant={onPinParticipant} onUnpinParticipant={onUnpinParticipant} reactionResources={reactionResources} onStartLocalSpotlight={hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt} onStopLocalSpotlight={hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt} onStartRemoteSpotlight={hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt} onStopRemoteSpotlight={hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt} onMuteParticipant={capabilities?.muteOthers?.isPresent || userRole === 'Unknown' ? videoGalleryProps.onMuteParticipant : undefined} />;\n  }, [videoGalleryProps, videoTilesOptions, galleryStyles, props.isMobile, props.localVideoTileOptions, props.userSetGalleryLayout, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, overflowGalleryPosition, userRole, isRoomsCall, containerAspectRatio, pinnedParticipants, onPinParticipant, onUnpinParticipant, reactionResources, hideSpotlightButtons, onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, layoutBasedOnTilePosition, capabilities?.muteOthers]);\n  return <div ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst getVideoGalleryLayoutBasedOnLocalOptions = (localTileOptions?: string): VideoGalleryLayout => {\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n};"]}

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

@@ -35,7 +35,7 @@ export const NetworkReconnectTile = (props) => {
                 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),
-            isTeamsMeeting && meetingCoordinates && meetingCoordinates.length > 0 && React.createElement(Stack, null,
+            isTeamsMeeting && meetingCoordinates && meetingCoordinates[0] && React.createElement(Stack, null,
                 React.createElement(Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", className: titleContainerClassName },
                     React.createElement(Text, { className: titleClassName }, localeStrings.meetingConferencePhoneInfoModalTitle)),
                 React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInstructionLine },

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

@@ -1 +1 @@
-{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"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","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';\n// eslint-disable-next-line no-restricted-imports\nimport { Icon } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { containerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../selectors/baseSelectors';\nimport { useSelector } from '../hooks/useSelector';\nimport { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, titleClassName, titleContainerClassName, infoConnectionLinkStyle } from '../../common/styles/TeamsMeetingConferenceInfo.style';\nimport { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Link } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  isMobile?: boolean;\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 localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;\n  const theme = useTheme();\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  const isTeamsMeeting = useSelector(getIsTeamsMeeting);\n  const meetingCoordinates = useSelector(getTeamsMeetingCoordinates);\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          {isTeamsMeeting && meetingCoordinates && meetingCoordinates.length > 0 && <Stack>\n              <Stack horizontal horizontalAlign=\"center\" verticalAlign=\"center\" className={titleContainerClassName}>\n                <Text className={titleClassName}>{localeStrings.meetingConferencePhoneInfoModalTitle}</Text>\n              </Stack>\n              <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInstructionLine}>\n                <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                <Stack.Item>\n                  <Stack horizontal className={phoneInfoStep}>\n                    <Stack.Item className={phoneInfoIcon(theme)}>\n                      <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                        <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                      </Stack>\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>{localeStrings.meetingConferencePhoneInfoModalDialIn}</Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack.Item>\n                <Stack.Item className={phoneInfoStep}>\n                  {meetingCoordinates.map((phoneNumber, index) => <Stack.Item key={index}>\n                      <Text className={phoneInfoTextStyle}>\n                        {props.isMobile && <Link className={phoneInfoTextStyle} href={formatPhoneNumberLink(phoneNumber)}>\n                            {_formatPhoneNumber(phoneNumber.phoneNumber, true)}\n                          </Link>}\n                        {!props.isMobile && <Text className={phoneInfoTextStyle}>\n                            {_formatPhoneNumber(phoneNumber.phoneNumber, true)}\n                          </Text>}{' '}\n                        {phoneNumber.isTollFree ? localeStrings.meetingConferencePhoneInfoModalTollFree : localeStrings.meetingConferencePhoneInfoModalToll}\n                      </Text>\n                      <br />\n                      <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, localeStrings)}</Text>\n                    </Stack.Item>)}\n                </Stack.Item>\n              </Stack>\n              <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInstructionLine}>\n                <Stack.Item>\n                  <Stack horizontal>\n                    {!props.isMobile && <Stack className={infoConnectionLinkStyle(theme)}></Stack>}\n                    <Stack.Item className={phoneInfoIcon(theme)}>\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>\n                        {localeStrings.meetingConferencePhoneInfoModalMeetingId}\n                      </Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack.Item>\n                <Text className={phoneInfoTextStyle}>{meetingCoordinates[0].conferenceId}#</Text>\n              </Stack>\n              {!props.isMobile && <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInstructionLine}>\n                  <Stack horizontal>\n                    <Stack.Item className={phoneInfoIcon(theme)} style={{\n            marginLeft: _pxToRem(2)\n          }}>\n                      <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>{localeStrings.meetingConferencePhoneInfoModalWait}</Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack>}\n            </Stack>}\n        </Stack>} {...handlers} />;\n};"]}
+{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"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","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';\n// eslint-disable-next-line no-restricted-imports\nimport { Icon } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { containerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../selectors/baseSelectors';\nimport { useSelector } from '../hooks/useSelector';\nimport { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, titleClassName, titleContainerClassName, infoConnectionLinkStyle } from '../../common/styles/TeamsMeetingConferenceInfo.style';\nimport { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Link } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  isMobile?: boolean;\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 localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;\n  const theme = useTheme();\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  const isTeamsMeeting = useSelector(getIsTeamsMeeting);\n  const meetingCoordinates = useSelector(getTeamsMeetingCoordinates);\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          {isTeamsMeeting && meetingCoordinates && meetingCoordinates[0] && <Stack>\n              <Stack horizontal horizontalAlign=\"center\" verticalAlign=\"center\" className={titleContainerClassName}>\n                <Text className={titleClassName}>{localeStrings.meetingConferencePhoneInfoModalTitle}</Text>\n              </Stack>\n              <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInstructionLine}>\n                <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                <Stack.Item>\n                  <Stack horizontal className={phoneInfoStep}>\n                    <Stack.Item className={phoneInfoIcon(theme)}>\n                      <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                        <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                      </Stack>\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>{localeStrings.meetingConferencePhoneInfoModalDialIn}</Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack.Item>\n                <Stack.Item className={phoneInfoStep}>\n                  {meetingCoordinates.map((phoneNumber, index) => <Stack.Item key={index}>\n                      <Text className={phoneInfoTextStyle}>\n                        {props.isMobile && <Link className={phoneInfoTextStyle} href={formatPhoneNumberLink(phoneNumber)}>\n                            {_formatPhoneNumber(phoneNumber.phoneNumber, true)}\n                          </Link>}\n                        {!props.isMobile && <Text className={phoneInfoTextStyle}>\n                            {_formatPhoneNumber(phoneNumber.phoneNumber, true)}\n                          </Text>}{' '}\n                        {phoneNumber.isTollFree ? localeStrings.meetingConferencePhoneInfoModalTollFree : localeStrings.meetingConferencePhoneInfoModalToll}\n                      </Text>\n                      <br />\n                      <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, localeStrings)}</Text>\n                    </Stack.Item>)}\n                </Stack.Item>\n              </Stack>\n              <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInstructionLine}>\n                <Stack.Item>\n                  <Stack horizontal>\n                    {!props.isMobile && <Stack className={infoConnectionLinkStyle(theme)}></Stack>}\n                    <Stack.Item className={phoneInfoIcon(theme)}>\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>\n                        {localeStrings.meetingConferencePhoneInfoModalMeetingId}\n                      </Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack.Item>\n                <Text className={phoneInfoTextStyle}>{meetingCoordinates[0].conferenceId}#</Text>\n              </Stack>\n              {!props.isMobile && <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInstructionLine}>\n                  <Stack horizontal>\n                    <Stack.Item className={phoneInfoIcon(theme)} style={{\n            marginLeft: _pxToRem(2)\n          }}>\n                      <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack.Item>\n                    <Stack.Item>\n                      <Text className={phoneInfoLabelStyle}>{localeStrings.meetingConferencePhoneInfoModalWait}</Text>\n                    </Stack.Item>\n                  </Stack>\n                </Stack>}\n            </Stack>}\n        </Stack>} {...handlers} />;\n};"]}

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

@@ -10,6 +10,7 @@ export interface PromptProps {
     text?: string;
     confirmButtonLabel?: string;
     cancelButtonLabel?: string;
+    closeButtonLabel?: string;
     onConfirm?: () => void;
     onCancel?: () => void;
     styles?: Partial<IModalStyles>;

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

@@ -20,7 +20,7 @@ export const Prompt = (props) => {
                 }) }, props.heading),
             React.createElement(IconButton, { styles: iconButtonStyles(theme), iconProps: {
                     iconName: 'Cancel'
-                }, onClick: props.onCancel })),
+                }, onClick: props.onCancel, ariaLabel: props.closeButtonLabel })),
         React.createElement(Stack, { verticalAlign: "center", className: mergeStyles({
                 minHeight: '6rem'
             }) },

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

@@ -1 +1 @@
-{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/Prompt.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAiB,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAS,WAAW,EAAgB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACjK,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,eAAe,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAChE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK;QAC7F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC;gBAC9B,QAAQ,EAAE,UAAU;aACrB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,UAAU,EAAE,GAAG;oBACf,QAAQ,EAAE,SAAS;iBACpB,CAAC,IAAG,KAAK,CAAC,OAAO,CAAQ;YACxB,oBAAC,UAAU,IAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;oBACxD,QAAQ,EAAE,QAAQ;iBACnB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CACtB;QACR,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC;gBACrD,SAAS,EAAE,MAAM;aAClB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,QAAQ,EAAE,UAAU;iBACrB,CAAC,IAAG,KAAK,CAAC,IAAI,CAAQ,CACf;QACR,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAE;gBAChD,WAAW,EAAE,QAAQ;aACtB;YACG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI;YACrG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC7F,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IACzD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KACpC;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;KACjC;CACF,CAAC,CAAC;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AACF,MAAM,gBAAgB,GAAkB;IACtC,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, Modal, PrimaryButton, Stack, Text, Theme, mergeStyles, IModalStyles, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface PromptProps {\n  isOpen?: boolean;\n  onDismiss?: () => void;\n  heading?: string;\n  text?: string;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  styles?: Partial<IModalStyles>;\n}\n\n/**\n * @private\n */\nexport const Prompt = (props: PromptProps): JSX.Element => {\n  const theme = useTheme();\n  const styles = concatStyleSets(modalStyles, props.styles ?? {});\n  return <Modal styles={styles} isOpen={props.isOpen} onDismiss={props.onDismiss} isBlocking={false}>\n      <Stack className={mergeStyles({\n      position: 'relative'\n    })}>\n        <Text className={mergeStyles({\n        fontWeight: 600,\n        fontSize: '1.25rem'\n      })}>{props.heading}</Text>\n        <IconButton styles={iconButtonStyles(theme)} iconProps={{\n        iconName: 'Cancel'\n      }} onClick={props.onCancel} />\n      </Stack>\n      <Stack verticalAlign=\"center\" className={mergeStyles({\n      minHeight: '6rem'\n    })}>\n        <Text className={mergeStyles({\n        fontSize: '0.875rem'\n      })}>{props.text}</Text>\n      </Stack>\n      <Stack horizontal horizontalAlign=\"end\" tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        <PrimaryButton styles={buttonTextStyles} text={props.confirmButtonLabel} onClick={props.onConfirm} />\n        <DefaultButton styles={buttonTextStyles} text={props.cancelButtonLabel} onClick={props.onCancel} />\n      </Stack>\n    </Modal>;\n};\nconst iconButtonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    color: theme.palette.neutralPrimary\n  },\n  rootHovered: {\n    color: theme.palette.neutralDark\n  }\n});\nconst modalStyles = {\n  main: {\n    padding: '1.5rem ',\n    maxWidth: '30rem'\n  }\n};\nconst buttonTextStyles: IButtonStyles = {\n  label: {\n    fontSize: '0.875rem'\n  }\n};\n\n/**\n * Strings used in prompt related to spotlight\n * @public\n */\nexport interface SpotlightPromptStrings {\n  /**\n   * Heading for prompt when starting spotlight on participant\n   */\n  startSpotlightHeading: string;\n  /**\n   * Text for prompt when starting spotlight on participant\n   */\n  startSpotlightText: string;\n  /**\n   * Label for button to confirm starting spotlight on local user in prompt\n   */\n  startSpotlightOnSelfText: string;\n  /**\n   * Label for button to confirm starting spotlight on participant in prompt\n   */\n  startSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel starting spotlight on participant in prompt\n   */\n  startSpotlightCancelButtonLabel: string;\n  /**\n   * Heading for prompt when stopping spotlight on participant\n   */\n  stopSpotlightHeading: string;\n  /**\n   * Heading for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfHeading: string;\n  /**\n   * Heading for prompt when stopping all spotlight\n   */\n  stopAllSpotlightHeading: string;\n  /**\n   * Text for prompt when stopping spotlight on participant\n   */\n  stopSpotlightText: string;\n  /**\n   * Text for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfText: string;\n  /**\n   * Text for prompt when stopping all spotlight\n   */\n  stopAllSpotlightText: string;\n  /**\n   * Label for button to confirm stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to confirm stopping spotlight on local user in prompt\n   */\n  stopSpotlightOnSelfConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightCancelButtonLabel: string;\n}"]}
+{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/Prompt.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAiB,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAS,WAAW,EAAgB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACjK,OAAO,EAAE,QAAQ,EAAE,4CAAmC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAe,EAAE;;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,eAAe,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAChE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK;QAC7F,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC;gBAC9B,QAAQ,EAAE,UAAU;aACrB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,UAAU,EAAE,GAAG;oBACf,QAAQ,EAAE,SAAS;iBACpB,CAAC,IAAG,KAAK,CAAC,OAAO,CAAQ;YACxB,oBAAC,UAAU,IAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;oBACxD,QAAQ,EAAE,QAAQ;iBACnB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,gBAAgB,GAAI,CACzD;QACR,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC;gBACrD,SAAS,EAAE,MAAM;aAClB,CAAC;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC;oBAC7B,QAAQ,EAAE,UAAU;iBACrB,CAAC,IAAG,KAAK,CAAC,IAAI,CAAQ,CACf;QACR,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAE;gBAChD,WAAW,EAAE,QAAQ;aACtB;YACG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI;YACrG,oBAAC,aAAa,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC7F,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IACzD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KACpC;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;KACjC;CACF,CAAC,CAAC;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AACF,MAAM,gBAAgB,GAAkB;IACtC,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, Modal, PrimaryButton, Stack, Text, Theme, mergeStyles, IModalStyles, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface PromptProps {\n  isOpen?: boolean;\n  onDismiss?: () => void;\n  heading?: string;\n  text?: string;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  closeButtonLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  styles?: Partial<IModalStyles>;\n}\n\n/**\n * @private\n */\nexport const Prompt = (props: PromptProps): JSX.Element => {\n  const theme = useTheme();\n  const styles = concatStyleSets(modalStyles, props.styles ?? {});\n  return <Modal styles={styles} isOpen={props.isOpen} onDismiss={props.onDismiss} isBlocking={false}>\n      <Stack className={mergeStyles({\n      position: 'relative'\n    })}>\n        <Text className={mergeStyles({\n        fontWeight: 600,\n        fontSize: '1.25rem'\n      })}>{props.heading}</Text>\n        <IconButton styles={iconButtonStyles(theme)} iconProps={{\n        iconName: 'Cancel'\n      }} onClick={props.onCancel} ariaLabel={props.closeButtonLabel} />\n      </Stack>\n      <Stack verticalAlign=\"center\" className={mergeStyles({\n      minHeight: '6rem'\n    })}>\n        <Text className={mergeStyles({\n        fontSize: '0.875rem'\n      })}>{props.text}</Text>\n      </Stack>\n      <Stack horizontal horizontalAlign=\"end\" tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        <PrimaryButton styles={buttonTextStyles} text={props.confirmButtonLabel} onClick={props.onConfirm} />\n        <DefaultButton styles={buttonTextStyles} text={props.cancelButtonLabel} onClick={props.onCancel} />\n      </Stack>\n    </Modal>;\n};\nconst iconButtonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    color: theme.palette.neutralPrimary\n  },\n  rootHovered: {\n    color: theme.palette.neutralDark\n  }\n});\nconst modalStyles = {\n  main: {\n    padding: '1.5rem ',\n    maxWidth: '30rem'\n  }\n};\nconst buttonTextStyles: IButtonStyles = {\n  label: {\n    fontSize: '0.875rem'\n  }\n};\n\n/**\n * Strings used in prompt related to spotlight\n * @public\n */\nexport interface SpotlightPromptStrings {\n  /**\n   * Heading for prompt when starting spotlight on participant\n   */\n  startSpotlightHeading: string;\n  /**\n   * Text for prompt when starting spotlight on participant\n   */\n  startSpotlightText: string;\n  /**\n   * Label for button to confirm starting spotlight on local user in prompt\n   */\n  startSpotlightOnSelfText: string;\n  /**\n   * Label for button to confirm starting spotlight on participant in prompt\n   */\n  startSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel starting spotlight on participant in prompt\n   */\n  startSpotlightCancelButtonLabel: string;\n  /**\n   * Heading for prompt when stopping spotlight on participant\n   */\n  stopSpotlightHeading: string;\n  /**\n   * Heading for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfHeading: string;\n  /**\n   * Heading for prompt when stopping all spotlight\n   */\n  stopAllSpotlightHeading: string;\n  /**\n   * Text for prompt when stopping spotlight on participant\n   */\n  stopSpotlightText: string;\n  /**\n   * Text for prompt when stopping spotlight on local user\n   */\n  stopSpotlightOnSelfText: string;\n  /**\n   * Text for prompt when stopping all spotlight\n   */\n  stopAllSpotlightText: string;\n  /**\n   * Label for button to confirm stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightConfirmButtonLabel: string;\n  /**\n   * Label for button to confirm stopping spotlight on local user in prompt\n   */\n  stopSpotlightOnSelfConfirmButtonLabel: string;\n  /**\n   * Label for button to cancel stopping spotlight on participant(s) in prompt\n   */\n  stopSpotlightCancelButtonLabel: string;\n}"]}

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

@@ -6,6 +6,7 @@ export interface SidePaneProps {
     mobileView?: boolean;
     maxWidth?: string;
     minWidth?: string;
+    ariaLabel?: string;
     disablePeopleButton?: boolean;
     disableChatButton?: boolean;
     onChatButtonClicked?: () => void;

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

@@ -37,7 +37,7 @@ export const SidePane = (props) => {
     if (!ContentRenderer && !OverrideContentRenderer) {
         return React.createElement(EmptyElement, null);
     }
-    return React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView || !props.showAddPeopleButton && (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? {} : sidePaneTokens },
+    return React.createElement(Stack, { "aria-label": props.ariaLabel, "data-is-focusable": !!props.ariaLabel, role: props.ariaLabel ? 'navigation' : undefined, tabIndex: props.ariaLabel ? 0 : undefined, verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView || !props.showAddPeopleButton && (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? {} : sidePaneTokens },
         HeaderToRender,
         React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },

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

@@ -1 +1 @@
-{"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  minWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n  showAddPeopleButton?: boolean;\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 widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;\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?.id, closePane]);\n  const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n  const ContentRenderer = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRenderer = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRenderer && !OverrideContentRenderer) {\n    return <EmptyElement />;\n  }\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView || !props.showAddPeopleButton && sidePaneRenderer?.id === 'people' ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRenderer && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>{ContentRenderer?.()}</Stack>\n            </Stack.Item>}\n          {OverrideContentRenderer && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>{OverrideContentRenderer?.()}</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 => <></>;"]}
+{"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  minWidth?: string;\n  ariaLabel?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n  showAddPeopleButton?: boolean;\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 widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;\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?.id, closePane]);\n  const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n  const ContentRenderer = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRenderer = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRenderer && !OverrideContentRenderer) {\n    return <EmptyElement />;\n  }\n  return <Stack aria-label={props.ariaLabel} data-is-focusable={!!props.ariaLabel} role={props.ariaLabel ? 'navigation' : undefined} tabIndex={props.ariaLabel ? 0 : undefined} verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView || !props.showAddPeopleButton && sidePaneRenderer?.id === 'people' ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRenderer && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>{ContentRenderer?.()}</Stack>\n            </Stack.Item>}\n          {OverrideContentRenderer && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>{OverrideContentRenderer?.()}</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/usePeoplePane.js

@@ -5,8 +5,9 @@ import { useIsParticularSidePaneOpen } from './SidePaneProvider';
 import { SidePaneHeader } from '../../../common/SidePaneHeader';
 import { PeoplePaneContent } from '../../../common/PeoplePaneContent';
 import { useLocale } from '../../../localization';
-import { getRemoteParticipants } from '../../selectors/baseSelectors';
 import { useSelector } from '../../hooks/useSelector';
+import { getAlternateCallerId, getRole } from '../../selectors/baseSelectors';
+import { getRemoteParticipants } from '../../selectors/baseSelectors';
 import { Prompt } from '../Prompt';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
@@ -92,7 +93,7 @@ export const usePeoplePane = (props) => {
         isPinned = isSpotlighted ? false : isPinned;
         if (onMuteParticipant && !isMe && remoteParticipants && remoteParticipants[participantId]) {
             const participant = remoteParticipants[participantId];
-            const isMuted = participant.isMuted;
+            const isMuted = !!(participant === null || participant === void 0 ? void 0 : participant.isMuted);
             _defaultMenuItems.push({
                 key: 'mute',
                 text: 'Mute',
@@ -207,6 +208,8 @@ export const usePeoplePane = (props) => {
         }
         return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;
     }, [spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onFetchParticipantMenuItems, onMuteParticipant, remoteParticipants, localeStrings.stopSpotlightMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, maxParticipantsToSpotlight, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, localeStrings.pinParticipantMenuLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.unpinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantMenuItemAriaLabel]);
+    const role = useSelector(getRole);
+    const alternateCallerId = useSelector(getAlternateCallerId);
     const onRenderContent = useCallback(() => {
         return React.createElement(React.Fragment, null,
             React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: {
@@ -215,8 +218,8 @@ export const usePeoplePane = (props) => {
                         padding: '1.5rem'
                     }
                 }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
-            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants }));
-    }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, showMuteAllPrompt, setShowMuteAllPrompt, muteAllPromptLabels, onMuteAllPromptConfirm]);
+            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId }));
+    }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, role, alternateCallerId, showMuteAllPrompt, setShowMuteAllPrompt, muteAllPromptLabels, onMuteAllPromptConfirm]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,

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

@@ -1 +1 @@
-{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"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","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, IContextualMenuProps, IContextualMenuItem } from '@fluentui/react';\nimport { getRemoteParticipants } from '../../selectors/baseSelectors';\nimport { useSelector } from '../../hooks/useSelector';\nimport { Prompt } from '../Prompt';\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  setParticipantActioned?: (userId: string) => void;\n  spotlightedParticipantUserIds?: string[];\n  onStartLocalSpotlight?: () => Promise<void>;\n  onStopLocalSpotlight?: () => Promise<void>;\n  onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  onStopAllSpotlight?: () => Promise<void>;\n  maxParticipantsToSpotlight?: number;\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  onMuteAllRemoteParticipants?: () => Promise<void>;\n  pinnedParticipants?: string[];\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\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    setParticipantActioned,\n    spotlightedParticipantUserIds,\n    onStartLocalSpotlight,\n    onStopLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopRemoteSpotlight,\n    onStopAllSpotlight,\n    maxParticipantsToSpotlight,\n    onMuteParticipant,\n    pinnedParticipants,\n    onPinParticipant,\n    onUnpinParticipant,\n    disablePinMenuItem,\n    onMuteAllRemoteParticipants\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n  const localeStrings = useLocale().strings.call;\n  const remoteParticipants = useSelector(getRemoteParticipants);\n  const [showMuteAllPrompt, setShowMuteAllPrompt] = React.useState(false);\n  const muteAllPromptLabels = useMemo(() => ({\n    confirmButtonLabel: localeStrings.muteAllConfirmButtonLabel,\n    heading: localeStrings.muteAllDialogTitle,\n    text: localeStrings.muteAllDialogContent,\n    cancelButtonLabel: localeStrings.muteAllCancelButtonLabel\n  }), [localeStrings.muteAllConfirmButtonLabel, localeStrings.muteAllDialogTitle, localeStrings.muteAllDialogContent, localeStrings.muteAllCancelButtonLabel]);\n  const onMuteAllPromptConfirm = useCallback(() => {\n    onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();\n    setShowMuteAllPrompt(false);\n  }, [onMuteAllRemoteParticipants, setShowMuteAllPrompt]);\n  const sidePaneHeaderMenuProps: IContextualMenuProps = useMemo(() => {\n    const menuItems: IContextualMenuItem[] = [];\n    if (onMuteAllRemoteParticipants && remoteParticipants) {\n      let isAllMuted = true;\n      if (remoteParticipants) {\n        for (const participant of Object.values(remoteParticipants)) {\n          if (!participant.isMuted) {\n            isAllMuted = false;\n            break;\n          }\n        }\n      }\n      menuItems.push({\n        ['data-ui-id']: 'people-pane-mute-all-remote-participants',\n        key: 'muteAllRemoteParticipants',\n        text: localeStrings.muteAllMenuLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          setShowMuteAllPrompt(true);\n        },\n        ariaLabel: localeStrings.muteAllMenuLabel,\n        disabled: isAllMuted\n      });\n    }\n    if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {\n      menuItems.push({\n        key: 'stopAllSpotlightKey',\n        text: localeStrings.stopAllSpotlightMenuLabel,\n        iconProps: {\n          iconName: 'StopAllSpotlightMenuButton',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          onStopAllSpotlight();\n        },\n        ariaLabel: localeStrings.stopAllSpotlightMenuLabel\n      });\n    }\n    return {\n      items: menuItems\n    };\n  }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel, localeStrings.muteAllMenuLabel, onMuteAllRemoteParticipants, setShowMuteAllPrompt, remoteParticipants]);\n  const onRenderHeader = useCallback(() => <SidePaneHeader onClose={closePane} headingText={localeStrings.peoplePaneTitle} dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel} mobileView={mobileView ?? false} />, [mobileView, closePane, localeStrings]);\n  const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId: string, myUserId?: string, defaultMenuItems?: IContextualMenuItem[]): IContextualMenuItem[] => {\n    let isPinned = pinnedParticipants?.includes(participantId);\n    const _defaultMenuItems: IContextualMenuItem[] = [];\n    const isSpotlighted = spotlightedParticipantUserIds?.includes(participantId);\n    const isMe = myUserId === participantId;\n    isPinned = isSpotlighted ? false : isPinned;\n    if (onMuteParticipant && !isMe && remoteParticipants && remoteParticipants[participantId]) {\n      const participant = remoteParticipants[participantId];\n      const isMuted = participant.isMuted;\n      _defaultMenuItems.push({\n        key: 'mute',\n        text: 'Mute',\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          onMuteParticipant(participantId);\n        },\n        'data-ui-id': 'participant-item-mute-participant',\n        ariaLabel: 'Mute',\n        disabled: isMuted\n      });\n    }\n    if (isSpotlighted) {\n      const stopSpotlightMenuText = isMe ? localeStrings.stopSpotlightOnSelfMenuLabel : localeStrings.stopSpotlightMenuLabel;\n      const onStopSpotlight = isMe ? onStopLocalSpotlight : onStopRemoteSpotlight ? () => {\n        onStopRemoteSpotlight([participantId]);\n      } : undefined;\n      if (onStopSpotlight && stopSpotlightMenuText) {\n        _defaultMenuItems.push({\n          key: 'stop-spotlight',\n          text: stopSpotlightMenuText,\n          onClick: onStopSpotlight,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          },\n          ariaLabel: stopSpotlightMenuText\n        });\n      }\n    } else {\n      const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? localeStrings.addSpotlightMenuLabel : localeStrings.startSpotlightMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false : false;\n      const onStartSpotlight = isMe ? onStartLocalSpotlight : onStartRemoteSpotlight ? () => {\n        onStartRemoteSpotlight([participantId]);\n      } : undefined;\n      if (onStartSpotlight && startSpotlightMenuText) {\n        _defaultMenuItems.push({\n          key: 'start-spotlight',\n          text: startSpotlightMenuText,\n          onClick: onStartSpotlight,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          },\n          ariaLabel: startSpotlightMenuText,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? localeStrings.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (!isMe && isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && localeStrings?.unpinParticipantMenuLabel) {\n        _defaultMenuItems.push({\n          key: 'unpin',\n          text: localeStrings?.unpinParticipantMenuLabel,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant?.(participantId);\n          },\n          'data-ui-id': 'participant-item-unpin-participant-button',\n          ariaLabel: localeStrings.unpinParticipantMenuItemAriaLabel\n        });\n      }\n      if (!isPinned && onPinParticipant && localeStrings?.pinParticipantMenuLabel) {\n        _defaultMenuItems.push({\n          key: 'pin',\n          text: disablePinMenuItem ? localeStrings.pinParticipantLimitReachedMenuLabel : localeStrings.pinParticipantMenuLabel,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(participantId);\n          },\n          'data-ui-id': 'participant-item-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: localeStrings.pinParticipantMenuItemAriaLabel\n        });\n      }\n    }\n    if (defaultMenuItems) {\n      _defaultMenuItems.push(...defaultMenuItems);\n    }\n    return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;\n  }, [spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onFetchParticipantMenuItems, onMuteParticipant, remoteParticipants, localeStrings.stopSpotlightMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, maxParticipantsToSpotlight, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, localeStrings.pinParticipantMenuLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.unpinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantMenuItemAriaLabel]);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <>\n        {<Prompt {...muteAllPromptLabels} styles={{\n        main: {\n          minWidth: '22.5rem',\n          padding: '1.5rem'\n        }\n      }} onConfirm={() => onMuteAllPromptConfirm()} isOpen={showMuteAllPrompt} onCancel={() => setShowMuteAllPrompt(false)} />}\n        <PeoplePaneContent inviteLink={inviteLink} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={onFetchParticipantMenuItemsForCallComposite} setDrawerMenuItems={setDrawerMenuItems} mobileView={mobileView} setParticipantActioned={setParticipantActioned} participantListHeadingMoreButtonProps={sidePaneHeaderMenuProps} pinnedParticipants={pinnedParticipants} />\n      </>;\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, showMuteAllPrompt, setShowMuteAllPrompt, muteAllPromptLabels, onMuteAllPromptConfirm]);\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};"]}
+{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"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","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, IContextualMenuProps, IContextualMenuItem } from '@fluentui/react';\nimport { useSelector } from '../../hooks/useSelector';\nimport { getAlternateCallerId, getRole } from '../../selectors/baseSelectors';\nimport { getRemoteParticipants } from '../../selectors/baseSelectors';\nimport { Prompt } from '../Prompt';\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  setParticipantActioned?: (userId: string) => void;\n  spotlightedParticipantUserIds?: string[];\n  onStartLocalSpotlight?: () => Promise<void>;\n  onStopLocalSpotlight?: () => Promise<void>;\n  onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n  onStopAllSpotlight?: () => Promise<void>;\n  maxParticipantsToSpotlight?: number;\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  onMuteAllRemoteParticipants?: () => Promise<void>;\n  pinnedParticipants?: string[];\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\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    setParticipantActioned,\n    spotlightedParticipantUserIds,\n    onStartLocalSpotlight,\n    onStopLocalSpotlight,\n    onStartRemoteSpotlight,\n    onStopRemoteSpotlight,\n    onStopAllSpotlight,\n    maxParticipantsToSpotlight,\n    onMuteParticipant,\n    pinnedParticipants,\n    onPinParticipant,\n    onUnpinParticipant,\n    disablePinMenuItem,\n    onMuteAllRemoteParticipants\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n  const localeStrings = useLocale().strings.call;\n  const remoteParticipants = useSelector(getRemoteParticipants);\n  const [showMuteAllPrompt, setShowMuteAllPrompt] = React.useState(false);\n  const muteAllPromptLabels = useMemo(() => ({\n    confirmButtonLabel: localeStrings.muteAllConfirmButtonLabel,\n    heading: localeStrings.muteAllDialogTitle,\n    text: localeStrings.muteAllDialogContent,\n    cancelButtonLabel: localeStrings.muteAllCancelButtonLabel\n  }), [localeStrings.muteAllConfirmButtonLabel, localeStrings.muteAllDialogTitle, localeStrings.muteAllDialogContent, localeStrings.muteAllCancelButtonLabel]);\n  const onMuteAllPromptConfirm = useCallback(() => {\n    onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();\n    setShowMuteAllPrompt(false);\n  }, [onMuteAllRemoteParticipants, setShowMuteAllPrompt]);\n  const sidePaneHeaderMenuProps: IContextualMenuProps = useMemo(() => {\n    const menuItems: IContextualMenuItem[] = [];\n    if (onMuteAllRemoteParticipants && remoteParticipants) {\n      let isAllMuted = true;\n      if (remoteParticipants) {\n        for (const participant of Object.values(remoteParticipants)) {\n          if (!participant.isMuted) {\n            isAllMuted = false;\n            break;\n          }\n        }\n      }\n      menuItems.push({\n        ['data-ui-id']: 'people-pane-mute-all-remote-participants',\n        key: 'muteAllRemoteParticipants',\n        text: localeStrings.muteAllMenuLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          setShowMuteAllPrompt(true);\n        },\n        ariaLabel: localeStrings.muteAllMenuLabel,\n        disabled: isAllMuted\n      });\n    }\n    if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {\n      menuItems.push({\n        key: 'stopAllSpotlightKey',\n        text: localeStrings.stopAllSpotlightMenuLabel,\n        iconProps: {\n          iconName: 'StopAllSpotlightMenuButton',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          onStopAllSpotlight();\n        },\n        ariaLabel: localeStrings.stopAllSpotlightMenuLabel\n      });\n    }\n    return {\n      items: menuItems\n    };\n  }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel, localeStrings.muteAllMenuLabel, onMuteAllRemoteParticipants, setShowMuteAllPrompt, remoteParticipants]);\n  const onRenderHeader = useCallback(() => <SidePaneHeader onClose={closePane} headingText={localeStrings.peoplePaneTitle} dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel} mobileView={mobileView ?? false} />, [mobileView, closePane, localeStrings]);\n  const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId: string, myUserId?: string, defaultMenuItems?: IContextualMenuItem[]): IContextualMenuItem[] => {\n    let isPinned = pinnedParticipants?.includes(participantId);\n    const _defaultMenuItems: IContextualMenuItem[] = [];\n    const isSpotlighted = spotlightedParticipantUserIds?.includes(participantId);\n    const isMe = myUserId === participantId;\n    isPinned = isSpotlighted ? false : isPinned;\n    if (onMuteParticipant && !isMe && remoteParticipants && remoteParticipants[participantId]) {\n      const participant = remoteParticipants[participantId];\n      const isMuted = !!participant?.isMuted;\n      _defaultMenuItems.push({\n        key: 'mute',\n        text: 'Mute',\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        onClick: () => {\n          onMuteParticipant(participantId);\n        },\n        'data-ui-id': 'participant-item-mute-participant',\n        ariaLabel: 'Mute',\n        disabled: isMuted\n      });\n    }\n    if (isSpotlighted) {\n      const stopSpotlightMenuText = isMe ? localeStrings.stopSpotlightOnSelfMenuLabel : localeStrings.stopSpotlightMenuLabel;\n      const onStopSpotlight = isMe ? onStopLocalSpotlight : onStopRemoteSpotlight ? () => {\n        onStopRemoteSpotlight([participantId]);\n      } : undefined;\n      if (onStopSpotlight && stopSpotlightMenuText) {\n        _defaultMenuItems.push({\n          key: 'stop-spotlight',\n          text: stopSpotlightMenuText,\n          onClick: onStopSpotlight,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          },\n          ariaLabel: stopSpotlightMenuText\n        });\n      }\n    } else {\n      const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? localeStrings.addSpotlightMenuLabel : localeStrings.startSpotlightMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false : false;\n      const onStartSpotlight = isMe ? onStartLocalSpotlight : onStartRemoteSpotlight ? () => {\n        onStartRemoteSpotlight([participantId]);\n      } : undefined;\n      if (onStartSpotlight && startSpotlightMenuText) {\n        _defaultMenuItems.push({\n          key: 'start-spotlight',\n          text: startSpotlightMenuText,\n          onClick: onStartSpotlight,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          },\n          ariaLabel: startSpotlightMenuText,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? localeStrings.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (!isMe && isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && localeStrings?.unpinParticipantMenuLabel) {\n        _defaultMenuItems.push({\n          key: 'unpin',\n          text: localeStrings?.unpinParticipantMenuLabel,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant?.(participantId);\n          },\n          'data-ui-id': 'participant-item-unpin-participant-button',\n          ariaLabel: localeStrings.unpinParticipantMenuItemAriaLabel\n        });\n      }\n      if (!isPinned && onPinParticipant && localeStrings?.pinParticipantMenuLabel) {\n        _defaultMenuItems.push({\n          key: 'pin',\n          text: disablePinMenuItem ? localeStrings.pinParticipantLimitReachedMenuLabel : localeStrings.pinParticipantMenuLabel,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(participantId);\n          },\n          'data-ui-id': 'participant-item-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: localeStrings.pinParticipantMenuItemAriaLabel\n        });\n      }\n    }\n    if (defaultMenuItems) {\n      _defaultMenuItems.push(...defaultMenuItems);\n    }\n    return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;\n  }, [spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onFetchParticipantMenuItems, onMuteParticipant, remoteParticipants, localeStrings.stopSpotlightMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, maxParticipantsToSpotlight, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, localeStrings.pinParticipantMenuLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.unpinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantMenuItemAriaLabel]);\n  const role = useSelector(getRole);\n  const alternateCallerId = useSelector(getAlternateCallerId);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <>\n        {<Prompt {...muteAllPromptLabels} styles={{\n        main: {\n          minWidth: '22.5rem',\n          padding: '1.5rem'\n        }\n      }} onConfirm={() => onMuteAllPromptConfirm()} isOpen={showMuteAllPrompt} onCancel={() => setShowMuteAllPrompt(false)} />}\n        <PeoplePaneContent inviteLink={inviteLink} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={onFetchParticipantMenuItemsForCallComposite} setDrawerMenuItems={setDrawerMenuItems} mobileView={mobileView} setParticipantActioned={setParticipantActioned} participantListHeadingMoreButtonProps={sidePaneHeaderMenuProps} pinnedParticipants={pinnedParticipants} role={role} alternateCallerId={alternateCallerId} />\n      </>;\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, role, alternateCallerId, showMuteAllPrompt, setShowMuteAllPrompt, muteAllPromptLabels, onMuteAllPromptConfirm]);\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};"]}

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

@@ -5,6 +5,8 @@ import { useIsParticularSidePaneOpen } from './SidePaneProvider';
 import { SidePaneHeader } from '../../../common/SidePaneHeader';
 import { useLocale } from '../../../localization';
 import { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';
+import { useSelector } from '../../hooks/useSelector';
+import { getVideoBackgroundImages } from '../../selectors/baseSelectors';
 /** @private */
 export const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
 /** @private */
@@ -23,12 +25,13 @@ export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestEr
     }, [closePane, locale.strings, mobileView]);
     const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');
     const updateFocusHandle = useMemo(() => createRef(), []);
+    const backgroundImages = useSelector(getVideoBackgroundImages);
     const onRenderContent = useCallback(() => {
         return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                 // Clear any existing video effects error when the user clicks on a new video effect
                 latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
-            }, updateFocusHandle: updateFocusHandle });
-    }, [latestVideoEffectError, onDismissError, updateFocusHandle]);
+            }, updateFocusHandle: updateFocusHandle, backgroundImages: backgroundImages });
+    }, [latestVideoEffectError, onDismissError, updateFocusHandle, backgroundImages]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,

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

@@ -1 +1 @@
-{"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, { createRef, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\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  const locale = useLocale();\n  const onRenderHeader = useCallback(() => {\n    return <SidePaneHeader onClose={closePane} headingText={locale.strings.call.videoEffectsPaneTitle} dismissSidePaneButtonAriaLabel={locale.strings.call.dismissSidePaneButtonLabel ?? locale.strings.callWithChat.dismissSidePaneButtonLabel ?? 'Close'} mobileView={mobileView} />;\n  }, [closePane, locale.strings, mobileView]);\n  const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');\n  const updateFocusHandle = useMemo(() => createRef<{\n    focus: () => void;\n  }>(), []);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <VideoEffectsPaneContent onDismissError={onDismissError} activeVideoEffectError={latestVideoEffectError} activeVideoEffectChange={() => {\n      // Clear any existing video effects error when the user clicks on a new video effect\n\n      latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n    }} updateFocusHandle={updateFocusHandle} />;\n  }, [latestVideoEffectError, onDismissError, updateFocusHandle]);\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\n    // Run in a setTimeout as it must be called only once the imperative handle is available\n    setTimeout(() => updateFocusHandle.current?.focus(), 0);\n  }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);\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}"]}
+{"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, { createRef, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\nimport { useSelector } from '../../hooks/useSelector';\nimport { getVideoBackgroundImages } from '../../selectors/baseSelectors';\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  const locale = useLocale();\n  const onRenderHeader = useCallback(() => {\n    return <SidePaneHeader onClose={closePane} headingText={locale.strings.call.videoEffectsPaneTitle} dismissSidePaneButtonAriaLabel={locale.strings.call.dismissSidePaneButtonLabel ?? locale.strings.callWithChat.dismissSidePaneButtonLabel ?? 'Close'} mobileView={mobileView} />;\n  }, [closePane, locale.strings, mobileView]);\n  const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');\n  const updateFocusHandle = useMemo(() => createRef<{\n    focus: () => void;\n  }>(), []);\n  const backgroundImages = useSelector(getVideoBackgroundImages);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <VideoEffectsPaneContent onDismissError={onDismissError} activeVideoEffectError={latestVideoEffectError} activeVideoEffectChange={() => {\n      // Clear any existing video effects error when the user clicks on a new video effect\n\n      latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n    }} updateFocusHandle={updateFocusHandle} backgroundImages={backgroundImages} />;\n  }, [latestVideoEffectError, onDismissError, updateFocusHandle, backgroundImages]);\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\n    // Run in a setTimeout as it must be called only once the imperative handle is available\n    setTimeout(() => updateFocusHandle.current?.focus(), 0);\n  }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);\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}"]}