@azure/communication-react 1.5.1-alpha-202304250012 → 1.5.1-alpha-202304260013

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304250012';
+var telemetryVersion = '1.5.1-alpha-202304260013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1025,10 +1025,12 @@ const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSup
 const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus], (captions, isCaptionsFeatureActive) => {
     const captionsInfo = captions === null || captions === void 0 ? void 0 : captions.map((c) => {
         var _a, _b;
+        const userId = c.speaker.identifier ? toFlatCommunicationIdentifier(c.speaker.identifier) : '';
         return {
+            id: c.timestamp.getTime() + userId + c.speaker.displayName,
             displayName: (_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant',
             captionText: (_b = c.captionText) !== null && _b !== void 0 ? _b : '',
-            userId: c.speaker.identifier ? toFlatCommunicationIdentifier(c.speaker.identifier) : ''
+            userId
         };
     });
     return {
@@ -1327,7 +1329,7 @@ const _isTeamsCallAgent = (callAgent) => {
 };
 /* @conditional-compile-remove(close-captions) */
 /**
- * @private
+ * @internal
  * Determine whether a call is:
  * A TeamsCall
  * or a ACS Call joining the teams meeting
@@ -4850,6 +4852,7 @@ const extension = (fileName) => fileName.split('.').pop() || '';
  * Always returns a new Array so that the state variable is updated, trigerring a render.
  */
 const dismissError = (dismissedErrors, toDismiss) => {
+    var _a;
     const now = new Date(Date.now());
     for (const error of dismissedErrors) {
         if (error.type === toDismiss.type) {
@@ -4859,12 +4862,15 @@ const dismissError = (dismissedErrors, toDismiss) => {
             return Array.from(dismissedErrors);
         }
     }
+    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
     // Record that this error was dismissed for the first time right now.
     return [
         ...dismissedErrors,
         {
             type: toDismiss.type,
-            dismissedAt: now,
+            // the error time could be sometimes later than the button click time, which cause the dismiss not working
+            // so we set the dismiss time to the later one
+            dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
             activeSince: toDismiss.timestamp
         }
     ];
@@ -14001,7 +14007,7 @@ const captionsContainerClassName = react.mergeStyles({
 const captionContainerClassName = react.mergeStyles({
     marginTop: _pxToRem(6),
     marginBottom: _pxToRem(6),
-    overflowAnchor: 'none'
+    overflowAnchor: 'auto'
 });
 /**
  * @private
@@ -14087,8 +14093,8 @@ const _CaptionsBanner = (props) => {
     }, [captions, isAtBottomOfScroll]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null, isCaptionsOn && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
         React__default['default'].createElement(reactNorthstar.Ref, { innerRef: captionsScrollDivRef },
-            React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption, key) => {
-                return (React__default['default'].createElement("div", { key: key, className: captionContainerClassName, "data-is-focusable": true },
+            React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
+                return (React__default['default'].createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
             })))))));
 };
@@ -19649,6 +19655,98 @@ const SendDtmfDialpad = (props) => {
             React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+const controlBarContainerStyles$1 = {
+    paddingTop: '0.25rem',
+    paddingBottom: '0.25rem',
+    // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
+    boxShadow: `
+    0px 6.400000095367432px 14.399999618530273px 0px #00000021;
+    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;
+  `
+};
+
+// Copyright (c) Microsoft Corporation.
+const VIDEO_GALLERY_Z_INDEX = 1;
+// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery
+/** @private */
+const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
+// The notification container should be in the highest z-band to ensure it shows on top of all other content.
+const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;
+/** @private */
+const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;
+/**
+ * @private
+ */
+const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles$1, {
+    zIndex: CONTROL_BAR_Z_INDEX
+});
+const containerStyle$2 = {
+    width: '100%',
+    position: 'relative',
+    minHeight: '13rem' // linked to minimum space allocated to media gallery
+};
+/**
+ * @private
+ */
+const containerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, containerStyle$2), { minWidth: '30rem' }));
+/**
+ * @private
+ */
+const containerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, containerStyle$2), { minWidth: '17.5rem' }));
+/**
+ * @private
+ */
+const galleryParentContainerStyles = (backgroundColor) => ({
+    root: {
+        zIndex: VIDEO_GALLERY_Z_INDEX,
+        width: '100%',
+        background: backgroundColor
+    }
+});
+/**
+ * @private
+ */
+const mediaGalleryContainerStyles$1 = {
+    root: {
+        height: '100%'
+    }
+};
+/**
+ * @private
+ */
+const notificationsContainerStyles = {
+    root: {
+        width: '100%',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        padding: '1rem',
+        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
+        pointerEvents: 'none' // to allow the operation of controls underneath the notification container
+    }
+};
+/**
+ * @private
+ */
+const bannerNotificationStyles = {
+    root: {
+        pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
+    }
+};
+/**
+ * @private
+ */
+const callArrangementContainerStyles = {
+    root: {
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Enforce a background color on control bar to ensure it matches the composite background color.
 const controlBarStyles = react.memoizeFunction((background) => ({ root: { background: background } }));
@@ -19756,7 +19854,7 @@ const CallControls = (props) => {
     let cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
     /* @conditional-compile-remove(rooms) */
     cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
@@ -19803,95 +19901,6 @@ const PeopleButton = (props) => {
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/** @private */
-const controlBarContainerStyles$1 = {
-    paddingTop: '0.25rem',
-    paddingBottom: '0.25rem',
-    // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
-    boxShadow: `
-    0px 6.400000095367432px 14.399999618530273px 0px #00000021;
-    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;
-  `
-};
-
-// Copyright (c) Microsoft Corporation.
-const VIDEO_GALLERY_Z_INDEX = 1;
-// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery
-const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
-// The notification container should be in the highest z-band to ensure it shows on top of all other content.
-const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;
-/**
- * @private
- */
-const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles$1, {
-    zIndex: CONTROL_BAR_Z_INDEX
-});
-const containerStyle$2 = {
-    width: '100%',
-    position: 'relative',
-    minHeight: '13rem' // linked to minimum space allocated to media gallery
-};
-/**
- * @private
- */
-const containerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, containerStyle$2), { minWidth: '30rem' }));
-/**
- * @private
- */
-const containerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, containerStyle$2), { minWidth: '17.5rem' }));
-/**
- * @private
- */
-const galleryParentContainerStyles = (backgroundColor) => ({
-    root: {
-        zIndex: VIDEO_GALLERY_Z_INDEX,
-        width: '100%',
-        background: backgroundColor
-    }
-});
-/**
- * @private
- */
-const mediaGalleryContainerStyles$1 = {
-    root: {
-        height: '100%'
-    }
-};
-/**
- * @private
- */
-const notificationsContainerStyles = {
-    root: {
-        width: '100%',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        padding: '1rem',
-        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
-        pointerEvents: 'none' // to allow the operation of controls underneath the notification container
-    }
-};
-/**
- * @private
- */
-const bannerNotificationStyles = {
-    root: {
-        pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
-    }
-};
-/**
- * @private
- */
-const callArrangementContainerStyles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * The hook to bypass limitation of conditional build for CallWithChatComposite
@@ -22099,7 +22108,7 @@ const CallArrangement = (props) => {
     const onClickShowDialpad = () => {
         setShowDtmfDialpad(true);
     };
-    const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(10), []);
+    const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     // To be removed once feature is out of beta, replace with callCompositeContainerCSS
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const callCompositeContainerFlex = () => {
@@ -22145,7 +22154,7 @@ const CallArrangement = (props) => {
             React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
                 ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                    !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles({ zIndex: CONTROL_BAR_Z_INDEX }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -24392,6 +24401,14 @@ class AzureCommunicationCallAdapter {
         this.locator = locator;
         this.deviceManager = deviceManager;
         const isTeamsMeeting = 'meetingLink' in this.locator;
+        /* @conditional-compile-remove(rooms) */
+        const isRoomsCall = 'roomId' in this.locator;
+        /* @conditional-compile-remove(rooms) */
+        // to prevent showing components that depend on role such as local video tile, camera button, etc. in a rooms call
+        // we set the default roleHint as 'Consumer' when roleHint is undefined since it has the lowest level of permissions
+        if (isRoomsCall && (options === null || options === void 0 ? void 0 : options.roleHint) === undefined) {
+            options = Object.assign(Object.assign({}, options), { roleHint: 'Consumer' });
+        }
         this.context = new CallContext(callClient.getState(), isTeamsMeeting, options);
         this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
@@ -24837,11 +24854,11 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(close-captions) */
     subscribeToCaptionEvents() {
-        var _a, _b, _c, _d;
-        if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'Connected') {
-            (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.TeamsCaptions).on('captionsReceived', this.captionsReceived.bind(this));
-            (_c = this.call) === null || _c === void 0 ? void 0 : _c.feature(communicationCalling.Features.TeamsCaptions).on('isCaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-            (_d = this.call) === null || _d === void 0 ? void 0 : _d.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
+        var _a, _b, _c;
+        if (this.call && this.call.state === 'Connected' && _isTeamsMeetingCall(this.call)) {
+            (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.TeamsCaptions).on('captionsReceived', this.captionsReceived.bind(this));
+            (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.TeamsCaptions).on('isCaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+            (_c = this.call) === null || _c === void 0 ? void 0 : _c.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
         }
     }
     subscribeCallEvents() {