@azure/communication-react 1.4.3-alpha-202301110013.0 → 1.4.3-alpha-202301130014.0

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

@@ -158,7 +158,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202301110013.0';
+var telemetryVersion = '1.4.3-alpha-202301130014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7893,9 +7893,25 @@ const DrawerContentContainer = (props) => {
     const backgroundColor = theme.palette.white;
     const borderRadius = theme.effects.roundedCorner4;
     const rootStyles = react.mergeStyles(containerStyles$4(backgroundColor, borderRadius), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root);
-    return React__default['default'].createElement(react.Stack, { className: rootStyles }, props.children);
+    return (React__default['default'].createElement(react.Stack, { className: rootStyles },
+        props.heading && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(headingContainerStyles) },
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(headingStyles(theme)) }, props.heading))),
+        props.children));
 };
 const containerStyles$4 = (backgroundColor, borderRadius) => (Object.assign({ background: backgroundColor, borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }, react.AnimationStyles.slideUpIn10));
+const headingContainerStyles = {
+    textAlign: 'center',
+    width: '100%',
+    padding: '0.5rem'
+};
+const headingStyles = (theme) => ({
+    color: theme.palette.neutralSecondary,
+    fontSize: theme.fonts.smallPlus.fontSize,
+    lineHeight: '1rem',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7929,7 +7945,7 @@ const _DrawerSurface = (props) => {
             // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
             // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
             isClickableOutsideFocusTrap: true },
-            React__default['default'].createElement(DrawerContentContainer, { styles: (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer }, props.children))));
+            React__default['default'].createElement(DrawerContentContainer, { styles: (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer, heading: props.heading }, props.children))));
 };
 const drawerSurfaceStyles = {
     width: '100%',
@@ -7976,7 +7992,7 @@ const _DrawerMenu = (props) => {
             borderTopLeftRadius: borderRadius
         }
     }), [firstItemStyle, borderRadius]);
-    return (React__default['default'].createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss },
+    return (React__default['default'].createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React__default['default'].createElement(react.Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React__default['default'].createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
@@ -8156,7 +8172,8 @@ const useVideoTileContextualMenuProps = (props) => {
                     },
                     onClick: () => {
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
-                    }
+                    },
+                    'data-ui-id': 'video-tile-fit-to-frame'
                 });
             }
             else if (scalingMode === 'Fit' && (strings === null || strings === void 0 ? void 0 : strings.fillRemoteParticipantFrame)) {
@@ -8170,7 +8187,8 @@ const useVideoTileContextualMenuProps = (props) => {
                         },
                         onClick: () => {
                             view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
-                        }
+                        },
+                        'data-ui-id': 'video-tile-fill-frame'
                     });
                 }
             }
@@ -8634,7 +8652,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
             onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))) })),
         drawerMenuItemProps.length > 0 && (React__default['default'].createElement(react.Layer, { hostId: props.drawerMenuHostId },
             React__default['default'].createElement(react.Stack, { styles: drawerMenuWrapperStyles },
-                React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps }))))));
+                React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
 const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
     if (!contextualMenuProps) {
@@ -12193,7 +12211,8 @@ const messageBarStyle = (theme, errorType) => ({
     },
     icon: {
         marginTop: '0.375rem',
-        marginBottom: '0.375rem'
+        marginBottom: '0.375rem',
+        paddingTop: '0.25rem'
     },
     content: {
         lineHeight: 'inherit'
@@ -15326,8 +15345,12 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$d(void 0, vo
  * @private
  */
 const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$d(void 0, void 0, void 0, function* () {
-    setVideoState(yield queryCameraPermissionFromPermissionsAPI());
-    setAudioState(yield queryMicrophonePermissionFromPermissionsAPI());
+    const [cameraResult, microphoneResult] = yield Promise.all([
+        queryCameraPermissionFromPermissionsAPI(),
+        queryMicrophonePermissionFromPermissionsAPI()
+    ]);
+    setVideoState(cameraResult);
+    setAudioState(microphoneResult);
 });
 /* @conditional-compile-remove(unsupported-browser) */
 const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {