@azure/communication-react 1.2.3-alpha-202205140015.0 → 1.2.3-alpha-202205200012.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-202205140015.0';
+var telemetryVersion = '1.2.3-alpha-202205200012.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -569,7 +569,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStopScreenShare = () => __awaiter$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
     const onToggleScreenShare = () => __awaiter$q(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
     const onHangUp = () => __awaiter$q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
-    const onCreateLocalStreamView = (options) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$q(void 0, void 0, void 0, function* () {
         if (!call || call.localVideoStreams.length === 0) {
             return;
         }
@@ -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 })));
 };
 
@@ -6808,8 +6809,125 @@ const computeVariant = (callRecordState, callTranscribeState) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/** @private */
+function BannerMessage(props) {
+    const { variant, strings } = props;
+    switch (variant) {
+        case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStopped),
+                ` ${strings.complianceBannerNowOnlyRecording}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStopped),
+                ` ${strings.complianceBannerNowOnlyTranscription}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
+                ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+        case 'RECORDING_AND_TRANSCRIPTION_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'TRANSCRIPTION_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingSaving),
+                ` ${strings.complianceBannerRecordingStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+        case 'RECORDING_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'TRANSCRIPTION_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionSaving),
+                ` ${strings.complianceBannerTranscriptionStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+    }
+    return React__default['default'].createElement(React__default['default'].Fragment, null);
+}
+function PrivacyPolicy(props) {
+    return (React__default['default'].createElement(react.Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
+}
+function LearnMore(props) {
+    return (React__default['default'].createElement(react.Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
+}
+
 // Copyright (c) Microsoft Corporation.
 const BANNER_OVERWRITE_DELAY_MS = 3000;
+/**
+ * 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);
+        }
+        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 })));
+}
+
+// Copyright (c) Microsoft Corporation.
 /**
  * A component that displays banners to notify the user when call recording and
  * transcription is enabled or disabled in a call.
@@ -6886,119 +7004,6 @@ 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) {
-        case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStopped),
-                ` ${strings.complianceBannerNowOnlyRecording}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
-        case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStopped),
-                ` ${strings.complianceBannerNowOnlyTranscription}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
-        case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
-                ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
-        case 'RECORDING_AND_TRANSCRIPTION_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
-                ` ${strings.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
-        case 'TRANSCRIPTION_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStarted),
-                ` ${strings.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
-        case 'RECORDING_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerRecordingSaving),
-                ` ${strings.complianceBannerRecordingStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
-        case 'RECORDING_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStarted),
-                ` ${strings.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
-        case 'TRANSCRIPTION_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionSaving),
-                ` ${strings.complianceBannerTranscriptionStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
-    }
-    return React__default['default'].createElement(React__default['default'].Fragment, null);
-}
-function PrivacyPolicy(props) {
-    return (React__default['default'].createElement(react.Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
-}
-function LearnMore(props) {
-    return (React__default['default'].createElement(react.Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
-}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -15447,7 +15452,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 })),
@@ -16434,10 +16439,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 {
@@ -16456,21 +16471,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();
@@ -16483,16 +16502,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 },