@azure/communication-react 1.2.3-alpha-202205130015.0 → 1.2.3-alpha-202205140015.0

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

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.2.3-alpha-202205130015.0';
+var telemetryVersion = '1.2.3-alpha-202205140015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6809,6 +6809,7 @@ const computeVariant = (callRecordState, callTranscribeState) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+const BANNER_OVERWRITE_DELAY_MS = 3000;
 /**
  * A component that displays banners to notify the user when call recording and
  * transcription is enabled or disabled in a call.
@@ -6819,10 +6820,6 @@ const computeVariant = (callRecordState, callTranscribeState) => {
  * @internal
  */
 const _ComplianceBanner = (props) => {
-    //set variant when incoming state is different from current state
-    //when variant change, return message bar
-    //when message bar is dismissed,set variant to default nostate and if current state is stopped, set to off
-    const [variant, setVariant] = React.useState('NO_STATE');
     const cachedProps = React.useRef({
         latestBooleanState: {
             callTranscribeState: false,
@@ -6831,39 +6828,46 @@ const _ComplianceBanner = (props) => {
         latestStringState: {
             callTranscribeState: 'off',
             callRecordState: 'off'
-        }
+        },
+        lastUpdated: Date.now()
     });
     // Only update cached props and variant if there is _some_ change in the latest props.
     // This ensures that state machine is only updated if there is an actual change in the props.
-    if (props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
-        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState) {
+    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
+        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
+    // The following three operations must be performed in this exact order:
+    // [1]: Update cached state to transition the state machine.
+    if (shouldUpdateCached) {
         cachedProps.current = {
             latestBooleanState: props,
             latestStringState: {
                 callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),
                 callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)
-            }
+            },
+            lastUpdated: Date.now()
         };
-        setVariant(computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState));
-        // when both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state)
-        if (cachedProps.current.latestStringState.callRecordState === 'stopped' &&
-            cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
-            cachedProps.current.latestStringState.callRecordState = 'off';
-            cachedProps.current.latestStringState.callTranscribeState = 'off';
-        }
     }
-    return variant === 'NO_STATE' ? (React__default['default'].createElement(React__default['default'].Fragment, null)) : (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
-            // when closing the banner, change variant to nostate and change stopped state to off state.
-            // Reason: on banner close, going back to the default state
-            setVariant('NO_STATE');
+    // [2]: Compute the variant, using the transitioned state machine.
+    const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);
+    // [3]: Transition the state machine again to deal with some end-states.
+    if (shouldUpdateCached &&
+        cachedProps.current.latestStringState.callRecordState === 'stopped' &&
+        cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
+        // When both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state).
+        cachedProps.current.latestStringState.callRecordState = 'off';
+        cachedProps.current.latestStringState.callTranscribeState = 'off';
+    }
+    return (React__default['default'].createElement(DelayedUpdateBanner, { variant: {
+            variant,
+            lastUpdated: cachedProps.current.lastUpdated
+        }, strings: props.strings, onDismiss: () => {
             if (cachedProps.current.latestStringState.callRecordState === 'stopped') {
                 cachedProps.current.latestStringState.callRecordState = 'off';
             }
             if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
                 cachedProps.current.latestStringState.callTranscribeState = 'off';
             }
-        }, dismissButtonAriaLabel: props.strings.close },
-        React__default['default'].createElement(BannerMessage, { variant: variant, strings: props.strings })));
+        } }));
 };
 function determineStates(previous, current) {
     // if current state is on, then return on
@@ -6882,6 +6886,67 @@ function determineStates(previous, current) {
         }
     }
 }
+/**
+ * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.
+ *
+ * This component delays and combines frequent updates to `variant` such that:
+ * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.
+ * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.
+ *
+ * This ensures that there is enough time for the user to see a banner message before it is overwritten.
+ * In case of multiple delayed messages, the user always sees the final message as it reflects the final state
+ * of recording and transcription.
+ *
+ * @private
+ */
+function DelayedUpdateBanner(props) {
+    const { variant, lastUpdated: variantLastUpdated } = props.variant;
+    // Tracks the variant that is currently visible in the UI.
+    const [visible, setVisible] = React.useState({
+        variant,
+        lastUpdated: Date.now()
+    });
+    const pendingUpdateHandle = React.useRef(null);
+    if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {
+        // Always clear pending updates.
+        // We'll either update now, or schedule an update for later.
+        if (pendingUpdateHandle.current) {
+            clearTimeout(pendingUpdateHandle.current);
+            pendingUpdateHandle.current = null;
+        }
+        const now = Date.now();
+        const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);
+        if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {
+            setVisible({
+                variant,
+                lastUpdated: now
+            });
+        }
+        else {
+            pendingUpdateHandle.current = setTimeout(() => {
+                // Set the actual update time, not the computed time when the update should happen.
+                // The actual update might be later than we planned.
+                setVisible({
+                    variant,
+                    lastUpdated: Date.now()
+                });
+            }, timeToNextUpdate);
+        }
+    }
+    if (visible.variant === 'NO_STATE') {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    return (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
+            // when closing the banner, change variant to nostate and change stopped state to off state.
+            // Reason: on banner close, going back to the default state.
+            setVisible({
+                variant: 'NO_STATE',
+                lastUpdated: Date.now()
+            });
+            props.onDismiss();
+        }, dismissButtonAriaLabel: props.strings.close },
+        React__default['default'].createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
+}
 function BannerMessage(props) {
     const { variant, strings } = props;
     switch (variant) {