@azure/communication-react 1.7.0-alpha-202307070015 → 1.7.0-alpha-202307110015

package/dist/dist-cjs/communication-react/index.js

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202307070015';
+var telemetryVersion = '1.7.0-alpha-202307110015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -379,7 +379,7 @@ const getIdentifier = (state) => toFlatCommunicationIdentifier(state.userId);
 /**
  * @private
  */
-const getLatestErrors$2 = (state) => state.latestErrors;
+const getLatestErrors$1 = (state) => state.latestErrors;
 /**
  * @private
  */
@@ -5299,13 +5299,17 @@ const ErrorBar = (props) => {
     var _a;
     const localeStrings = useLocale$1().strings.errorBar;
     const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
+    const trackDismissedErrorsInternally = !props.onDismissError;
     // Timestamp for when this comopnent is first mounted.
     // Never updated through the lifecycle of this component.
     const mountTimestamp = React.useRef(new Date(Date.now()));
     const [dismissedErrors, setDismissedErrors] = React.useState([]);
     // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
     // Without this behaviour, this `useEffect` block would cause a render loop.
-    React.useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
+    React.useEffect(() => {
+        trackDismissedErrorsInternally &&
+            setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
+    }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: {
             innerText: {
@@ -5321,7 +5325,12 @@ const ErrorBar = (props) => {
                 height: 0,
                 paddingTop: '0.8rem'
             }
-        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => setDismissedErrors(dismissError(dismissedErrors, error)), dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
+        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => {
+            var _a;
+            return trackDismissedErrorsInternally
+                ? setDismissedErrors(dismissError(dismissedErrors, error))
+                : (_a = props.onDismissError) === null || _a === void 0 ? void 0 : _a.call(props, error);
+        }, dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -16783,7 +16792,7 @@ const useSelector$4 = (selector, selectorProps) => {
  *
  * @public
  */
-const errorBarSelector$1 = reselect.createSelector([getLatestErrors$2, getDiagnostics, getDeviceManager$1, getEnvironmentInfo], (latestErrors, diagnostics, deviceManager, environmentInfo) => {
+const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagnostics, getDeviceManager$1, getEnvironmentInfo], (latestErrors, diagnostics, deviceManager, environmentInfo) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.
     // There are several options for the ordering:
@@ -17239,7 +17248,7 @@ const getTypingIndicators = (state, props) => {
 /**
  * @private
  */
-const getLatestErrors$1 = (state) => state.latestErrors;
+const getLatestErrors = (state) => state.latestErrors;
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17688,7 +17697,7 @@ const chatParticipantListSelector = reselect__namespace.createSelector([getUserI
  *
  * @public
  */
-const errorBarSelector = reselect.createSelector([getLatestErrors$1], (latestErrors) => {
+const errorBarSelector = reselect.createSelector([getLatestErrors], (latestErrors) => {
     var _a;
     // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.
     // There are several options for the ordering:
@@ -20808,6 +20817,49 @@ const adaptCompositeState = (compositeState) => {
     compositeState.environmentInfo);
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Take the set of active errors, and filter to only those that are newer than previously dismissed errors or have never been dismissed.
+ *
+ * @private
+ */
+const filterLatestErrors = (activeErrors, trackedErrors) => {
+    const filteredErrors = activeErrors.filter((activeError) => {
+        const trackedError = trackedErrors[activeError.type];
+        return (!trackedError || !trackedError.lastDismissedAt || trackedError.lastDismissedAt < trackedError.mostRecentlyActive);
+    });
+    return filteredErrors;
+};
+/**
+ * Maintain a record of the most recently active error for each error type.
+ *
+ * @private
+ */
+const updateTrackedErrorsWithActiveErrors = (existingTrackedErrors, activeErrors) => {
+    var _a, _b;
+    const trackedErrors = {};
+    // Only care about active errors. If errors are no longer active we do not track that they have been previously dismissed.
+    for (const activeError of activeErrors) {
+        const existingTrackedError = existingTrackedErrors[activeError.type];
+        trackedErrors[activeError.type] = {
+            mostRecentlyActive: (_b = (_a = activeError.timestamp) !== null && _a !== void 0 ? _a : existingTrackedError === null || existingTrackedError === void 0 ? void 0 : existingTrackedError.mostRecentlyActive) !== null && _b !== void 0 ? _b : new Date(Date.now()),
+            lastDismissedAt: existingTrackedError === null || existingTrackedError === void 0 ? void 0 : existingTrackedError.lastDismissedAt
+        };
+    }
+    return trackedErrors;
+};
+/**
+ * Create a record for when the error was most recently dismissed for tracking dismissed errors.
+ *
+ * @private
+ */
+const trackErrorAsDismissed = (errorType, trackedErrors) => {
+    const now = new Date(Date.now());
+    const existingError = trackedErrors[errorType];
+    return Object.assign(Object.assign({}, trackedErrors), { [errorType]: Object.assign(Object.assign({}, (existingError || {})), { lastDismissedAt: now }) });
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -21147,19 +21199,6 @@ const createParticipantModifier = (createModifiedParticipant) => {
                 ? Object.assign(Object.assign({}, state.call), { remoteParticipants: modifiedParticipants }) : undefined });
     };
 };
-/**
- * @private
- */
-const dismissVideoEffectsError = (toDismiss) => {
-    var _a;
-    const now = new Date(Date.now());
-    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
-    // Record that this error was dismissed for the first time right now.
-    return {
-        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
-        activeSince: toDismiss.timestamp
-    };
-};
 /* @conditional-compile-remove(video-background-effects) */
 /** @private */
 const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'blur'
@@ -21167,7 +21206,6 @@ const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffec
     : (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'replacement'
         ? new communicationCallingEffects.BackgroundReplacementEffect({ backgroundImageUrl: selectedEffect.backgroundImageUrl })
         : undefined;
-/* @conditional-compile-remove(video-background-effects) */
 /**
  * @remarks this logic should mimic the onToggleCamera in the common call handlers.
  * @private
@@ -21771,10 +21809,6 @@ const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
  * @private
  */
 const getIsTeamsCall = (state) => state.isTeamsCall;
-/**
- * @private
- */
-const getLatestErrors = (state) => state.latestErrors;
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -23942,7 +23976,7 @@ var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments,
 const VideoEffectsPaneContent = (props) => {
     const { onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
-    setActiveVideoEffect } = props;
+    activeVideoEffectChange } = props;
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
@@ -23997,7 +24031,7 @@ const VideoEffectsPaneContent = (props) => {
                 effectName: effectKey
             };
             adapter.updateSelectedVideoBackgroundEffect(blurEffect);
-            setActiveVideoEffect({
+            activeVideoEffectChange({
                 type: 'blur',
                 timestamp: new Date(Date.now())
             });
@@ -24021,14 +24055,14 @@ const VideoEffectsPaneContent = (props) => {
                     backgroundImageUrl: backgroundImg.backgroundProps.url
                 };
                 adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
-                setActiveVideoEffect({
+                activeVideoEffectChange({
                     type: 'replacement',
                     timestamp: new Date(Date.now())
                 });
                 yield adapter.startVideoBackgroundEffect(replaceEffect);
             }
         }
-    }), [adapter, setActiveVideoEffect, selectableVideoEffects]);
+    }), [adapter, activeVideoEffectChange, selectableVideoEffects]);
     return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
     selectableVideoEffects, 
@@ -24036,8 +24070,6 @@ const VideoEffectsPaneContent = (props) => {
     onEffectChange);
 };
 const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
-    /* @conditional-compile-remove(video-background-effects) */
-    const videoEffectError = activeVideoEffectError && activeVideoEffectError();
     /* @conditional-compile-remove(video-background-effects) */
     const selectedEffect = useSelector$1(activeVideoBackgroundEffectSelector);
     /* @conditional-compile-remove(video-background-effects) */
@@ -24048,7 +24080,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-        videoEffectError && isCameraOn && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(videoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
+        activeVideoEffectError && isCameraOn && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         React__default['default'].createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
 };
@@ -24061,24 +24093,13 @@ const backgroundPickerStyles = {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const videoBackgroundErrorsSelector = reselect__namespace.createSelector([getLatestErrors], (errors) => {
-    if (errors && errors['VideoEffectsFeature.startEffects']) {
-        return errors['VideoEffectsFeature.startEffects'];
-    }
-    return undefined;
-});
-
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
 /** @private */
 const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-const useVideoEffectsPane = (updateSidePaneRenderer, mobileView) => {
+const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError) => {
     const closePane = React.useCallback(() => {
         updateSidePaneRenderer(undefined);
     }, [updateSidePaneRenderer]);
@@ -24092,23 +24113,21 @@ const useVideoEffectsPane = (updateSidePaneRenderer, mobileView) => {
             /* @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] = React.useState();
-    const [activeVideoEffect, setActiveVideoEffect] = React.useState();
-    const onDismissVideoEffectError = React.useCallback((error) => {
-        setDismissedVideoEffectsError(dismissVideoEffectsError(error));
-    }, []);
-    const latestVideoEffectError = useSelector$1(videoBackgroundErrorsSelector);
-    const activeVideoEffectError = React.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 = React.useCallback(() => {
-        return (React__default['default'].createElement(VideoEffectsPaneContent, { onDismissError: onDismissVideoEffectError, activeVideoEffectError: activeVideoEffectError, setActiveVideoEffect: setActiveVideoEffect }));
-    }, [onDismissVideoEffectError, activeVideoEffectError]);
+        return (React__default['default'].createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
+            /* @conditional-compile-remove(video-background-effects) */
+            activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
+                // Clear any existing video effects error when the user clicks on a new video effect
+                /* @conditional-compile-remove(video-background-effects) */
+                latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
+            } }));
+    }, [
+        /* @conditional-compile-remove(video-background-effects) */
+        latestVideoEffectError,
+        onDismissError
+    ]);
     const sidePaneRenderer = React.useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -24482,7 +24501,7 @@ const CallArrangement = (props) => {
         placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
     }), [callWithChatStrings]);
     /* @conditional-compile-remove(video-background-effects) */
-    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView);
+    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError);
     const [showDrawer, setShowDrawer] = React.useState(false);
     const onMoreButtonClicked = React.useCallback(() => {
         setShowDrawer(true);
@@ -24512,19 +24531,19 @@ const CallArrangement = (props) => {
     let canUnmute = true;
     /* @conditional-compile-remove(rooms) */
     canUnmute = rolePermissions.microphoneButton;
-    let errorBarProps = props.errorBarProps;
+    let filteredLatestErrors = props.errorBarProps !== false ? props.latestErrors : [];
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector$1(localVideoSelector).isAvailable;
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (!rolePermissions.cameraButton && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.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) */
     const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     /* @conditional-compile-remove(video-background-effects) */
     if ((isVideoPaneOpen || !isCameraOn) && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'unableToStartVideoEffect') });
+        filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(close-captions) */
     const isTeamsCall = useSelector$1(getIsTeamsCall);
@@ -24566,8 +24585,8 @@ const CallArrangement = (props) => {
                                 React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
                                     React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                                         React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
-                                    errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-                                        React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
+                                    props.errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
+                                        React__default['default'].createElement(ErrorBar, Object.assign({}, props.errorBarProps, { onDismissError: props.onDismissError, activeErrorMessages: filteredLatestErrors })))),
                                     canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent(),
                                 /* @conditional-compile-remove(close-captions) */
@@ -25047,9 +25066,7 @@ 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 = reactHooks.useId('drawerMenuHost');
-    return (React__default['default'].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__default['default'].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,
@@ -25060,7 +25077,7 @@ const CallPage = (props) => {
             /* @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__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page' }));
+            localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 /**
  * @private
@@ -25665,9 +25682,9 @@ const ConfigurationPageErrorBar = (props) => {
     };
     /* @conditional-compile-remove(call-readiness) */
     if (showTroubleShootingErrorBar) {
-        return (React__default['default'].createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
+        return (React__default['default'].createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError })));
     }
-    return React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps));
+    return React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -25893,7 +25910,7 @@ const ConfigurationPage = (props) => {
     const [audioState, setAudioState] = React.useState(undefined);
     /* @conditional-compile-remove(call-readiness) */
     getDevicePermissionState(setVideoState, setAudioState);
-    let errorBarProps = usePropsFor$1(ErrorBar);
+    const errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
     /* @conditional-compile-remove(unsupported-browser) */
@@ -25903,14 +25920,15 @@ const ConfigurationPage = (props) => {
     const rolePermissions = _usePermissions();
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector$1(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) {
@@ -25972,7 +25990,7 @@ 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 = React.useCallback(() => __awaiter$7(void 0, void 0, void 0, function* () {
         /* @conditional-compile-remove(video-background-effects) */
         closeVideoEffectsPane();
@@ -25981,6 +25999,7 @@ const ConfigurationPage = (props) => {
     const panelLayerProps = React.useMemo(() => ({
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
+    const filteredErrorBarProps = React.useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default['default'].createElement(ConfigurationPageErrorBar
@@ -25995,7 +26014,7 @@ const ConfigurationPage = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: filteredErrorBarProps, onDismissError: props.onDismissError })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values
         videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { modalLayerHostId: modalLayerHostId, mobileView: mobileView, 
@@ -26175,12 +26194,10 @@ const LobbyPage = (props) => {
         ? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls)
         : (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
     callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 const overlayProps = (strings, inLobby, remoteParticipants) => {
     /**
@@ -26334,14 +26351,14 @@ const TransferPage = (props) => {
         React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: "polite" }),
         React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
             // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && errorBarProps, callControlProps: {
                 options: callControlOptions,
                 increaseFlyoutItemSize: props.mobileView
             }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
                 /* @conditional-compile-remove(call-transfer) */
                 statusText: pageSubject === 'transferTarget'
                     ? strings.transferPageTransferTargetText
-                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
+                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError })));
 };
 const TransferTile = (props) => {
     const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;
@@ -26557,12 +26574,10 @@ const HoldPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         'holdButton'
     ]);
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && errorBarProps, callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(HoldPane, null), dataUiId: 'hold-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(HoldPane, null), dataUiId: 'hold-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26645,6 +26660,18 @@ const MainScreen = (props) => {
     React.useEffect(() => {
         onSidePaneIdChange === null || onSidePaneIdChange === void 0 ? void 0 : onSidePaneIdChange(sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id);
     }, [sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, onSidePaneIdChange]);
+    // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
+    // This works by tracking the most recent timestamp of any active error type.
+    // And then tracking when that error type was last dismissed.
+    const activeErrors = usePropsFor$1(ErrorBar).activeErrorMessages;
+    const [trackedErrors, setTrackedErrors] = React.useState({});
+    React.useEffect(() => {
+        setTrackedErrors((prev) => updateTrackedErrorsWithActiveErrors(prev, activeErrors));
+    }, [activeErrors]);
+    const onDismissError = React.useCallback((error) => {
+        setTrackedErrors((prev) => trackErrorAsDismissed(error.type, prev));
+    }, []);
+    const latestErrors = React.useMemo(() => filterLatestErrors(activeErrors, trackedErrors), [activeErrors, trackedErrors]);
     const adapter = useAdapter();
     const locale = useLocale();
     const palette = useTheme().palette;
@@ -26665,7 +26692,7 @@ const MainScreen = (props) => {
         case 'configuration':
             pageElement = (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     adapter.joinCall();
-                }, updateSidePaneRenderer: setSidePaneRenderer, modalLayerHostId: props.modalLayerHostId, 
+                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
                 /* @conditional-compile-remove(call-readiness) */
                 deviceChecks: (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks, 
                 /* @conditional-compile-remove(call-readiness) */
@@ -26691,18 +26718,18 @@ const MainScreen = (props) => {
             break;
         }
         case 'lobby':
-            pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+            pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError }));
             break;
         /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
-            pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }));
+            pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError }));
             break;
         case 'call':
-            pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+            pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':
-            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError })));
             break;
     }
     /* @conditional-compile-remove(unsupported-browser) */
@@ -27248,6 +27275,7 @@ class AzureCommunicationCallAdapter {
         this.getState.bind(this);
         this.dispose.bind(this);
         this.joinCall.bind(this);
+        this.joinCallWithOptions.bind(this);
         this.leaveCall.bind(this);
         this.setCamera.bind(this);
         this.setMicrophone.bind(this);
@@ -27368,6 +27396,32 @@ class AzureCommunicationCallAdapter {
             return call;
         });
     }
+    joinCallWithOptions(options) {
+        var _a, _b;
+        if (_isInCall((_b = (_a = this.getState().call) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'None')) {
+            throw new Error('You are already in the call!');
+        }
+        const { microphoneOn, cameraOn } = options !== null && options !== void 0 ? options : {};
+        return this.teeErrorToEventEmitter(() => {
+            const audioOptions = { muted: !(microphoneOn !== null && microphoneOn !== void 0 ? microphoneOn : this.getState().isLocalPreviewMicrophoneEnabled) };
+            const selectedCamera = getSelectedCameraFromAdapterState(this.getState());
+            const localStream = selectedCamera ? new communicationCalling.LocalVideoStream(selectedCamera) : undefined;
+            const videoOptions = localStream && cameraOn ? { localVideoStreams: [localStream] } : {};
+            /* @conditional-compile-remove(teams-adhoc-call) */
+            /* @conditional-compile-remove(PSTN-calls) */
+            if (isOutboundCall(this.locator)) {
+                const phoneNumber = this.getState().alternateCallerId;
+                return this.startCall(this.locator.participantIds, {
+                    alternateCallerId: phoneNumber ? { phoneNumber: phoneNumber } : undefined,
+                    audioOptions,
+                    videoOptions
+                });
+            }
+            const call = this._joinCall(audioOptions, videoOptions);
+            this.processNewCall(call);
+            return call;
+        });
+    }
     _joinCall(audioOptions, videoOptions) {
         const isTeamsMeeting = 'meetingLink' in this.locator;
         /* @conditional-compile-remove(rooms) */
@@ -28081,6 +28135,7 @@ beforeDispose) => {
  */
 const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator, options) => __awaiter$3(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
+    yield Promise.all([deviceManager.getCameras(), deviceManager.getMicrophones(), deviceManager.getSpeakers()]);
     /* @conditional-compile-remove(unsupported-browser) */
     yield callClient.feature(communicationCalling.Features.DebugInfo).getEnvironmentInfo();
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager, 
@@ -28097,6 +28152,7 @@ const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, lo
  */
 const createTeamsCallAdapterFromClient = (callClient, callAgent, locator, options) => __awaiter$3(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
+    yield Promise.all([deviceManager.getCameras(), deviceManager.getMicrophones(), deviceManager.getSpeakers()]);
     /* @conditional-compile-remove(unsupported-browser) */
     yield callClient.feature(communicationCalling.Features.DebugInfo).getEnvironmentInfo();
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager, options);
@@ -28195,6 +28251,9 @@ class CallWithChatBackedCallAdapter {
         this.joinCall = (microphoneOn) => {
             return this.callWithChatAdapter.joinCall(microphoneOn);
         };
+        this.joinCallWithOptions = (options) => {
+            return this.callWithChatAdapter.joinCallWithOptions(options);
+        };
         this.leaveCall = (forEveryone) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.leaveCall(forEveryone); });
         this.startCall = (participants, options) => {
             let communicationParticipants = participants;
@@ -28951,6 +29010,7 @@ class AzureCommunicationCallWithChatAdapter {
     }
     bindPublicMethods() {
         this.joinCall.bind(this);
+        this.joinCallWithOptions.bind(this);
         this.leaveCall.bind(this);
         this.startCall.bind(this);
         this.onStateChange.bind(this);
@@ -29026,6 +29086,10 @@ class AzureCommunicationCallWithChatAdapter {
     joinCall(microphoneOn) {
         return this.callAdapter.joinCall(microphoneOn);
     }
+    /** Join existing Call. */
+    joinCallWithOptions(options) {
+        return this.callAdapter.joinCallWithOptions(options);
+    }
     /** Leave current Call. */
     leaveCall(forEveryone) {
         return __awaiter(this, void 0, void 0, function* () {