@azure/communication-react 1.2.3-alpha-202205130015.0 → 1.2.3-alpha-202205180014.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-202205180014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2031,7 +2031,8 @@ const _FileCard = (props) => {
         width: '12rem',
         background: theme.palette.neutralLighter,
         borderRadius: theme.effects.roundedCorner4,
-        border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`
+        border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,
+        cursor: 'pointer'
     });
     const fileInfoWrapperClassName = react.mergeStyles({
         padding: _pxToRem(12),
@@ -2063,7 +2064,9 @@ const _FileCard = (props) => {
             height: _pxToRem(progressBarThicknessPx)
         }
     };
-    return (React__default['default'].createElement(react.Stack, { className: containerClassName },
+    return (React__default['default'].createElement(react.Stack, { className: containerClassName, onClick: () => {
+            props.actionHandler && props.actionHandler();
+        } },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: fileInfoWrapperClassName },
             React__default['default'].createElement(react.Stack, null,
                 React__default['default'].createElement(react.Icon, Object.assign({}, reactFileTypeIcons.getFileTypeIconProps({
@@ -2073,9 +2076,7 @@ const _FileCard = (props) => {
                 })))),
             React__default['default'].createElement(react.Stack, { className: fileNameContainerClassName },
                 React__default['default'].createElement(react.Text, { className: fileNameTextClassName }, fileName)),
-            React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: actionIconClassName, onClick: () => {
-                    props.actionHandler && props.actionHandler();
-                } }, actionIcon && actionIcon)),
+            React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: actionIconClassName }, actionIcon && actionIcon)),
         showProgressIndicator && React__default['default'].createElement(react.ProgressIndicator, { percentComplete: progress, styles: progressIndicatorStyles })));
 };
 
@@ -6809,6 +6810,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 +6821,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 +6829,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 +6887,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) {
@@ -15382,7 +15448,7 @@ const CallWithChatControlBar = (props) => {
                             isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
                             isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles })),
-                            props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked })),
+                            props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
                             React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined },
             isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: true, onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage, strings: peopleButtonStrings, styles: commonButtonStyles })),
@@ -16369,10 +16435,20 @@ const CallWithChatScreen = (props) => {
     const closePane = React.useCallback(() => {
         setActivePane('none');
     }, [setActivePane]);
+    const chatProps = React.useMemo(() => {
+        return {
+            adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)
+        };
+    }, [callWithChatAdapter]);
+    const modalLayerHostId = reactHooks.useId('modalLayerhost');
+    const isInLobbyOrConnecting = currentPage === 'lobby';
+    const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
+    const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
+    const isMobileWithActivePane = mobileView && activePane !== 'none';
     /** Constant setting of id for the parent stack of the composite */
     const compositeParentDivId = reactHooks.useId('callWithChatCompositeParentDiv-internal');
     const toggleChat = React.useCallback(() => {
-        if (activePane === 'chat') {
+        if (activePane === 'chat' || !hasJoinedCall) {
             setActivePane('none');
         }
         else {
@@ -16391,21 +16467,25 @@ const CallWithChatScreen = (props) => {
                 clearInterval(chatFocusTimeout);
             }, 300);
         }
-    }, [activePane, setActivePane, compositeParentDivId]);
+    }, [activePane, setActivePane, compositeParentDivId, hasJoinedCall]);
     const togglePeople = React.useCallback(() => {
-        if (activePane === 'people') {
+        if (activePane === 'people' || !hasJoinedCall) {
             setActivePane('none');
         }
         else {
             setActivePane('people');
         }
-    }, [activePane, setActivePane]);
+    }, [activePane, setActivePane, hasJoinedCall]);
     const selectChat = React.useCallback(() => {
-        setActivePane('chat');
-    }, [setActivePane]);
+        if (hasJoinedCall) {
+            setActivePane('chat');
+        }
+    }, [setActivePane, hasJoinedCall]);
     const selectPeople = React.useCallback(() => {
-        setActivePane('people');
-    }, [setActivePane]);
+        if (hasJoinedCall) {
+            setActivePane('people');
+        }
+    }, [setActivePane, hasJoinedCall]);
     const [showDrawer, setShowDrawer] = React.useState(false);
     const onMoreButtonClicked = React.useCallback(() => {
         closePane();
@@ -16418,16 +16498,6 @@ const CallWithChatScreen = (props) => {
         setShowDrawer(false);
         togglePeople();
     }, [togglePeople]);
-    const chatProps = React.useMemo(() => {
-        return {
-            adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)
-        };
-    }, [callWithChatAdapter]);
-    const modalLayerHostId = reactHooks.useId('modalLayerhost');
-    const isInLobbyOrConnecting = currentPage === 'lobby';
-    const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
-    const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
-    const isMobileWithActivePane = mobileView && activePane !== 'none';
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },