@azure/communication-react 1.8.1-alpha-202309290012 → 1.8.1-alpha-202309300012

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

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.1-alpha-202309290012';
+var telemetryVersion = '1.8.1-alpha-202309300012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5085,7 +5085,11 @@ const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
 const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameStyles) => {
     const userElements = [];
     typingUsers.forEach((user, index) => {
-        userElements.push(onRenderUser ? (onRenderUser(user)) : (React__default["default"].createElement(react.Text, { className: react.mergeStyles(userDisplayNameStyles), key: `user-${index}` }, user.displayName)));
+        let truncatedDisplayName = user.displayName;
+        if (truncatedDisplayName && truncatedDisplayName.length > 50) {
+            truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';
+        }
+        userElements.push(onRenderUser ? (onRenderUser(user)) : (React__default["default"].createElement(react.Text, { className: react.mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName)));
         userElements.push(React__default["default"].createElement(react.Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma
@@ -11555,8 +11559,7 @@ const focusTrapZoneStyles = {
 };
 const drawerContentContainerStyles = {
     root: {
-        // Needed to fill max height from parent, drawerSurfaceStyles
-        height: '100%'
+        height: 'auto'
     }
 };
 
@@ -13003,11 +13006,11 @@ const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenShareP
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
-        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: `${localVideoTileOuterPaddingRem}rem`
+        right: `${dockedlocalVideoTileContainerPaddingRem}rem`
     };
 };
 /**
@@ -13023,7 +13026,10 @@ const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem)
  */
 const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSizeRem)
+        main: react.mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {
+            bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,
+            right: `${floatinglocalVideoModalInitialPositionGapRem}rem`
+        })
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -13035,11 +13041,17 @@ const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     }, localVideoModalStyles);
 };
 /**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
+ * Initial position gap of the floating local video modal.
+ * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from
+ * the bottom and 1rem from the right.
+ * @private
+ */
+const floatinglocalVideoModalInitialPositionGapRem = 1;
+/**
+ * Padding of the docked local video tile container.
  * @private
  */
-const localVideoTileOuterPaddingRem = 0.5;
+const dockedlocalVideoTileContainerPaddingRem = 0.5;
 /**
  * @private
  */
@@ -14386,8 +14398,8 @@ const DRAG_OPTIONS$1 = {
 // Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
 // position the modal can be dragged to.
 const modalMaxDragPosition = {
-    x: _convertRemToPx(localVideoTileOuterPaddingRem),
-    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+    x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+    y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
 };
 /**
  * @private
@@ -14401,8 +14413,12 @@ const FloatingLocalVideo = (props) => {
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
-            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
+            x: -parentWidth +
+                _convertRemToPx(localVideoSizeRem.width) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+            y: -parentHeight +
+                _convertRemToPx(localVideoSizeRem.height) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
         }
         : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
     const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
@@ -27928,7 +27944,7 @@ const CallReadinessModal = (props) => {
                 main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
             }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                 setIsPermissionsModalDismissed(false);
-            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()));
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()));
     }
     else {
         return React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -28006,7 +28022,7 @@ const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } },
                 React__default["default"].createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
                     /* @conditional-compile-remove(unsupported-browser) */
                     browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
@@ -28019,7 +28035,7 @@ const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()))));
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()))));
     }
 };