@azure/communication-react 1.7.0-beta.1 → 1.7.0-beta.2

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VideoGalleryStream } from "../../../../../react-components/src";
 /**
  * @private

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions } from "../../../../../react-components/src";
 /**
  * @private

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';
 import { VideoStreamOptions } from "../../../../../react-components/src";
 /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @private
  */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OnRenderAvatarCallback } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { RemoteVideoTileMenuOptions } from '../CallComposite';

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

@@ -45,6 +45,8 @@ export const MediaGallery = (props) => {
     const containerWidth = _useContainerWidth(containerRef);
     /* @conditional-compile-remove(vertical-gallery) */
     const containerHeight = _useContainerHeight(containerRef);
+    /* @conditional-compile-remove(click-to-call) */
+    const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
     const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(/* @conditional-compile-remove(click-to-call) */ (_a = props.localVideoTileOptions) === null || _a === void 0 ? void 0 : _a.position);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
@@ -80,8 +82,9 @@ export const MediaGallery = (props) => {
         return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnTilePosition, showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition: overflowGalleryPosition, 
-            /* @conditional-compile-remove(click-to-call) */ localVideoTileSize: props.localVideoTileOptions === false ? 'hidden' : props.isMobile ? 'followDeviceOrientation' : '16:9' }));
-    }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions, layoutBasedOnTilePosition]);
+            /* @conditional-compile-remove(click-to-call) */ localVideoTileSize: props.localVideoTileOptions === false ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9' }));
+    }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions, layoutBasedOnTilePosition,
+        containerAspectRatio]);
     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, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, OnRenderAvatarCallback, CustomAvatarOptions, Announcer, VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileOptions } from '../CallComposite';\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem',\n    // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\nconst remoteVideoViewOptions = ({\n  scalingMode: 'Crop'\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerHeight = _useContainerHeight(containerRef);\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline( /* @conditional-compile-remove(click-to-call) */(props.localVideoTileOptions as LocalVideoTileOptions)?.position);\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <Stack className={mergeStyles({\n      position: 'absolute',\n      height: '100%',\n      width: '100%'\n    })}>\n          <Stack styles={{\n        root: {\n          margin: 'auto',\n          maxHeight: '100%'\n        }\n      }}>\n            {options?.coinSize && <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />}\n          </Stack>\n        </Stack>;\n  }, [props.onFetchAvatarPersonaData]);\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden ? false : props.isMobile ? {\n      kind: 'drawer',\n      hostId: props.drawerMenuHostId\n    } : {\n      kind: 'contextual'\n    };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'VerticalRight' : 'HorizontalBottom', [containerWidth, containerHeight]);\n  const VideoGalleryMemoized = useMemo(() => {\n    return <VideoGallery {...videoGalleryProps} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={VideoGalleryStyles} layout={layoutBasedOnTilePosition} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={props.onRenderAvatar ?? onRenderAvatar}\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition}\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize={props.localVideoTileOptions === false ? 'hidden' : props.isMobile ? 'followDeviceOrientation' : '16:9'} />;\n  }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, /* @conditional-compile-remove(pinned-participants) */remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */props.localVideoTileOptions, layoutBasedOnTilePosition]);\n  return <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst localVideoTileLayoutTrampoline = (localTileOptions?: string): VideoGalleryLayout => {\n  /* @conditional-compile-remove(click-to-call) */\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n  return 'floatingLocalVideo';\n};\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, OnRenderAvatarCallback, CustomAvatarOptions, Announcer, VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileOptions } from '../CallComposite';\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem',\n    // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\nconst remoteVideoViewOptions = ({\n  scalingMode: 'Crop'\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */\n  localVideoTileOptions?: boolean | LocalVideoTileOptions;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerHeight = _useContainerHeight(containerRef);\n  /* @conditional-compile-remove(click-to-call) */\n  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline( /* @conditional-compile-remove(click-to-call) */(props.localVideoTileOptions as LocalVideoTileOptions)?.position);\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <Stack className={mergeStyles({\n      position: 'absolute',\n      height: '100%',\n      width: '100%'\n    })}>\n          <Stack styles={{\n        root: {\n          margin: 'auto',\n          maxHeight: '100%'\n        }\n      }}>\n            {options?.coinSize && <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />}\n          </Stack>\n        </Stack>;\n  }, [props.onFetchAvatarPersonaData]);\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden ? false : props.isMobile ? {\n      kind: 'drawer',\n      hostId: props.drawerMenuHostId\n    } : {\n      kind: 'contextual'\n    };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'VerticalRight' : 'HorizontalBottom', [containerWidth, containerHeight]);\n  const VideoGalleryMemoized = useMemo(() => {\n    return <VideoGallery {...videoGalleryProps} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={VideoGalleryStyles} layout={layoutBasedOnTilePosition} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={props.onRenderAvatar ?? onRenderAvatar}\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition={overflowGalleryPosition}\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize={props.localVideoTileOptions === false ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9'} />;\n  }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, /* @conditional-compile-remove(pinned-participants) */remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */props.localVideoTileOptions, layoutBasedOnTilePosition, /* @conditional-compile-remove(click-to-call) */\n  containerAspectRatio]);\n  return <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst localVideoTileLayoutTrampoline = (localTileOptions?: string): VideoGalleryLayout => {\n  /* @conditional-compile-remove(click-to-call) */\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n  return 'floatingLocalVideo';\n};\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @private
  */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VideoGalleryStream } from "../../../../../react-components/src";
 /**
  * @private

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidePaneRenderer } from './SidePaneProvider';
 /** @private */
 export interface SidePaneProps {

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

@@ -1,10 +1,11 @@
 import { SidePaneRenderer } from './SidePaneProvider';
+import { ActiveErrorMessage } from "../../../../../../react-components/src";
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_ID = "videoeffects";
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean) => {
+export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void) => {
     openVideoEffectsPane: () => void;
     closeVideoEffectsPane: () => void;
     toggleVideoEffectsPane: () => void;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IButtonProps } from '@fluentui/react';
 /**
  * @private

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CustomCallControlButtonCallback, CustomCallControlButtonPlacement } from '../../../common/ControlBar/CustomButton';
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 import { CallControlOptions } from '../../types/CallControlOptions';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /** @private */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /** @private */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles, ParticipantMenuItemsCallback } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /** @private */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonProps } from "../../../../../../react-components/src";
 /**
  * @private

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /** @private */

package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/usePropsFor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Common } from "../../../../../acs-ui-common/src";
 import { CallingHandlers, GetCallingSelector } from "../../../../../calling-component-bindings/src";
 declare type Selector = (state: any, props: any) => any;

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { DiagnosticQuality } from '@azure/communication-calling';
-import { OnRenderAvatarCallback, ParticipantMenuItemsCallback } from "../../../../../react-components/src";
+import { ActiveErrorMessage, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { CallCompositeOptions } from '../CallComposite';
 import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
@@ -18,6 +17,8 @@ export interface CallPageProps {
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
     mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
     options?: CallCompositeOptions;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js

@@ -36,9 +36,7 @@ export const CallPage = (props) => {
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
     const drawerMenuHostId = useId('drawerMenuHost');
-    return React.createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), mutedNotificationProps: mutedNotificationProps, callControlProps: {
+    return React.createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && errorBarProps, mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
             options: callControlOptions,
@@ -46,7 +44,7 @@ export const CallPage = (props) => {
         }, 
         /* @conditional-compile-remove(one-to-n-calling) */ onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
             /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId, 
-            /* @conditional-compile-remove(click-to-call) */ localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile })) : React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)) : React.createElement(React.Fragment, null), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page' });
+            /* @conditional-compile-remove(click-to-call) */ localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile })) : React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)) : React.createElement(React.Fragment, null), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError });
 };
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ErrorBar, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const {\n    callStatus\n  } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n  const drawerMenuHostId = useId('drawerMenuHost');\n  return <CallArrangement id={drawerMenuHostId} complianceBannerProps={{\n    ...complianceBannerProps,\n    strings\n  }}\n  // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n  errorBarProps={options?.errorBar !== false && {\n    ...errorBarProps,\n    ignorePremountErrors: true\n  }} mutedNotificationProps={mutedNotificationProps} callControlProps={{\n    callInvitationURL: callInvitationURL,\n    onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n    options: callControlOptions,\n    increaseFlyoutItemSize: mobileView\n  }}\n  /* @conditional-compile-remove(one-to-n-calling) */ onFetchAvatarPersonaData={onFetchAvatarPersonaData} mobileView={mobileView} modalLayerHostId={props.modalLayerHostId} onRenderGalleryContent={() => _isInCall(callStatus) ? isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? <MediaGallery isMobile={mobileView} {...mediaGalleryProps} {...mediaGalleryHandlers} onRenderAvatar={onRenderAvatar} onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n  /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions={options?.remoteVideoTileMenu} drawerMenuHostId={drawerMenuHostId}\n  /* @conditional-compile-remove(click-to-call) */ localVideoTileOptions={options?.localVideoTile} /> : <NetworkReconnectTile {...networkReconnectTileProps} /> : <></>} updateSidePaneRenderer={props.updateSidePaneRenderer} mobileChatTabHeader={props.mobileChatTabHeader} dataUiId={'call-page'} />;\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ActiveErrorMessage, ErrorBar, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const {\n    callStatus\n  } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n  const drawerMenuHostId = useId('drawerMenuHost');\n  return <CallArrangement id={drawerMenuHostId} complianceBannerProps={{\n    ...complianceBannerProps,\n    strings\n  }} errorBarProps={options?.errorBar !== false && errorBarProps} mutedNotificationProps={mutedNotificationProps} callControlProps={{\n    callInvitationURL: callInvitationURL,\n    onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n    options: callControlOptions,\n    increaseFlyoutItemSize: mobileView\n  }}\n  /* @conditional-compile-remove(one-to-n-calling) */ onFetchAvatarPersonaData={onFetchAvatarPersonaData} mobileView={mobileView} modalLayerHostId={props.modalLayerHostId} onRenderGalleryContent={() => _isInCall(callStatus) ? isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? <MediaGallery isMobile={mobileView} {...mediaGalleryProps} {...mediaGalleryHandlers} onRenderAvatar={onRenderAvatar} onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n  /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions={options?.remoteVideoTileMenu} drawerMenuHostId={drawerMenuHostId}\n  /* @conditional-compile-remove(click-to-call) */ localVideoTileOptions={options?.localVideoTile} /> : <NetworkReconnectTile {...networkReconnectTileProps} /> : <></>} updateSidePaneRenderer={props.updateSidePaneRenderer} mobileChatTabHeader={props.mobileChatTabHeader} dataUiId={'call-page'} latestErrors={props.latestErrors} onDismissError={props.onDismissError} />;\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ActiveErrorMessage } from "../../../../../react-components/src";
 import { DeviceCheckOptions } from '../CallComposite';
 import { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';
 /**
@@ -8,6 +8,8 @@ export interface ConfigurationPageProps {
     mobileView: boolean;
     startCallHandler(): void;
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
+    latestErrors: ActiveErrorMessage[];
+    onDismissError: (error: ActiveErrorMessage) => void;
     modalLayerHostId: string;
     deviceChecks?: DeviceCheckOptions;
     onPermissionsTroubleshootingClick?: (permissionsState: {

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js

@@ -61,7 +61,7 @@ export const ConfigurationPage = (props) => {
     const [audioState, setAudioState] = useState(undefined);
     /* @conditional-compile-remove(call-readiness) */
     getDevicePermissionState(setVideoState, setAudioState);
-    let errorBarProps = usePropsFor(ErrorBar);
+    const errorBarProps = usePropsFor(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
     /* @conditional-compile-remove(unsupported-browser) */
@@ -71,14 +71,15 @@ export const ConfigurationPage = (props) => {
     const rolePermissions = _usePermissions();
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
+    let filteredLatestErrors = props.latestErrors;
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (!rolePermissions.cameraButton) {
-        errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
+        filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     /* @conditional-compile-remove(video-background-effects) */
     if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter(e => e.type !== 'unableToStartVideoEffect') });
+        filteredLatestErrors = filteredLatestErrors.filter(e => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(rooms) */
     if (!rolePermissions.microphoneButton) {
@@ -123,7 +124,7 @@ export const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
     /* @conditional-compile-remove(video-background-effects) */
-    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView);
+    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView, props.latestErrors, props.onDismissError);
     const startCall = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         /* @conditional-compile-remove(video-background-effects) */
         closeVideoEffectsPane();
@@ -132,6 +133,7 @@ export const ConfigurationPage = (props) => {
     const panelLayerProps = useMemo(() => ({
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
+    const filteredErrorBarProps = useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
     return React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React.createElement(Stack, { styles: bannerNotificationStyles },
             React.createElement(ConfigurationPageErrorBar
@@ -143,7 +145,7 @@ export const ConfigurationPage = (props) => {
                 showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
                 /* @conditional-compile-remove(call-readiness) */ permissionsState: permissionsState, 
                 /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
-                /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
+                /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: filteredErrorBarProps, onDismissError: props.onDismissError })),
         // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values
         videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && React.createElement(CallReadinessModal, { modalLayerHostId: modalLayerHostId, mobileView: mobileView, 
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick }),