@azure/communication-react 1.2.3-alpha-202204290013.0 → 1.2.3-alpha-202205040013.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-202204290013.0';
+var telemetryVersion = '1.2.3-alpha-202205040013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2180,8 +2180,9 @@ const SendBox = (props) => {
             return;
         }
         // we dont want to send empty messages including spaces, newlines, tabs
-        if (!EMPTY_MESSAGE_REGEX.test(textValue)) {
-            onSendMessage && onSendMessage(textValue);
+        // Message can be empty if there is a valid file upload
+        if (!EMPTY_MESSAGE_REGEX.test(textValue) || hasFile(props)) {
+            onSendMessage && onSendMessage(sanitizeText(textValue));
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2203,9 +2204,10 @@ const SendBox = (props) => {
     const mergedSendButtonStyle = React.useMemo(() => react.mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = React.useMemo(() => react.concatStyleSets(styles), [styles]);
     const hasText = !!textValue;
+    const hasTextOrFile = hasText || hasFile(props);
     const mergedSendIconStyle = React.useMemo(() => react.mergeStyles(sendIconStyle, {
-        color: !!errorMessage || !hasText ? theme.palette.neutralTertiary : theme.palette.themePrimary
-    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasText, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
+        color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
+    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React__default['default'].createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     /* @conditional-compile-remove(file-sharing) */
     // Ensure that errors are cleared when there are no files in sendbox
@@ -2264,6 +2266,19 @@ const hasIncompleteFileUploads = (props) => {
     return !!(((_a = props.activeFileUploads) === null || _a === void 0 ? void 0 : _a.length) &&
         !props.activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
 };
+const hasFile = (props) => {
+    var _a;
+    /* @conditional-compile-remove(file-sharing) */
+    return !!((_a = props.activeFileUploads) === null || _a === void 0 ? void 0 : _a.find((file) => !file.error));
+};
+const sanitizeText = (message) => {
+    if (EMPTY_MESSAGE_REGEX.test(message)) {
+        return '';
+    }
+    else {
+        return message;
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 /** @private */
@@ -3871,14 +3886,14 @@ const StreamMedia = (props) => {
 /**
  * @private
  */
-const participantItemContainerStyle = (isMe) => {
+const participantItemContainerStyle = (options) => {
     return {
         paddingTop: '0.25rem',
         paddingBottom: '0.25rem',
         display: 'flex',
         maxWidth: '100%',
         minWidth: '8rem',
-        cursor: isMe ? 'default' : 'pointer',
+        cursor: options.localparticipant || !options.clickable ? 'default' : 'pointer',
         alignItems: 'center'
     };
 };
@@ -3950,14 +3965,14 @@ const ParticipantItem = (props) => {
         setItemHovered(false);
         setMenuHidden(true);
     };
-    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle(me), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             setItemHovered(true);
             setMenuHidden(false);
             onClick === null || onClick === void 0 ? void 0 : onClick(props);
         } },
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({ width: `calc(100% - ${menuButtonContainerStyle.width})`, alignItems: 'center' }) },
             avatar,
-            me && React__default['default'].createElement(react.Stack, { className: meTextStyle }, isMeText),
+            me && React__default['default'].createElement(react.Text, { className: meTextStyle }, isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
         menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
             menuButton,
@@ -5496,7 +5511,7 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, 
     /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     showCameraSwitcherInLocalPreview, 
@@ -5541,16 +5556,23 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
     });
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-    const localCameraCycleButton = (localVideoCameraCycleButtonProps) => {
-        const ariaDescription = _formatString(strings.localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
+    const LocalCameraCycleButton = React.useCallback(() => {
+        const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+            _formatString(strings.localVideoSelectedDescription, {
+                cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+            });
         return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: strings.localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
-    };
+    }, [
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras,
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera,
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera,
+        showCameraSwitcherInLocalPreview,
+        strings.localVideoCameraSwitcherLabel,
+        strings.localVideoSelectedDescription
+    ]);
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -5568,18 +5590,20 @@ const VideoGallery = (props) => {
         }
         return (React__default['default'].createElement(react.Stack, { tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(VideoTile, { key: localParticipant.userId, userId: localParticipant.userId, renderElement: (localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-                    localCameraCycleButton(localVideoCameraCycleButtonProps),
+                    React__default['default'].createElement(LocalCameraCycleButton, null),
                     React__default['default'].createElement(StreamMedia, { videoStreamElement: localVideoStream.renderElement }))) : undefined, showLabel: !(shouldFloatLocalVideo && isNarrow), displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, styles: localVideoTileStylesThemed, onRenderPlaceholder: onRenderAvatar, isMuted: localParticipant.isMuted, showMuteIndicator: showMuteIndicator })));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         localParticipant,
-        localParticipant.isScreenSharingOn,
-        localParticipant.videoStream,
-        (_c = localParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
         isNarrow,
         onCreateLocalStreamView,
         onRenderLocalVideoTile,
+        theme.effects.roundedCorner4,
+        styles === null || styles === void 0 ? void 0 : styles.localVideo,
+        strings.localVideoMovementLabel,
+        strings.localVideoLabel,
+        LocalCameraCycleButton,
+        showMuteIndicator,
+        localVideoViewOptions,
         onRenderAvatar,
         shouldFloatLocalVideo
     ]);
@@ -5617,7 +5641,7 @@ const VideoGallery = (props) => {
         gridTiles.push(localVideoTile);
     }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
     const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     const layerHostId = reactHooks.useId('layerhost');
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
@@ -7573,7 +7597,7 @@ const messageThreadSelector = reselect.createSelector([getUserId, getChatMessage
         // TODO: Add support for topicUpdated system messages in MessageThread component.
         // message.type === ACSKnownMessageType.topicUpdated ||
         message.clientMessageId !== undefined)
-        .filter((message) => message.content && message.content.message !== '') // TODO: deal with deleted message and remove
+        .filter(messagesWithContentOrFileSharingMetadata)
         .map((message) => {
         var _a;
         return memoizedFn((_a = message.id) !== null && _a !== void 0 ? _a : message.clientMessageId, message, userId, message.createdOn <= latestReadTime, isLargeGroup);
@@ -7593,6 +7617,16 @@ const sanitizedMessageContentType = (type) => {
         ? lowerCaseType
         : 'unknown';
 };
+const messagesWithContentOrFileSharingMetadata = (message) => {
+    var _a, _b;
+    if (message.deletedOn) {
+        return false;
+    }
+    if ((_a = message.metadata) === null || _a === void 0 ? void 0 : _a['fileSharingMetadata']) {
+        return true;
+    }
+    return !!(message.content && ((_b = message.content) === null || _b === void 0 ? void 0 : _b.message) !== '');
+};
 
 // Copyright (c) Microsoft Corporation.
 const filterTypingIndicators = (typingIndicators, userId) => {
@@ -10657,7 +10691,8 @@ class ProxyChatThreadClient {
             case 'sendMessage': {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     // Retry logic?
-                    const { content } = args[0];
+                    const [request, options] = args;
+                    const { content } = request;
                     const clientMessageId = nanoid.nanoid(); // Generate a local short uuid for message
                     const newMessage = {
                         content: { message: content },
@@ -10669,7 +10704,8 @@ class ProxyChatThreadClient {
                         createdOn: new Date(),
                         status: 'sending',
                         senderDisplayName: this._context.getState().displayName,
-                        sender: this._context.getState().userId
+                        sender: this._context.getState().userId,
+                        metadata: options === null || options === void 0 ? void 0 : options.metadata
                     };
                     this._context.setChatMessage(chatThreadClient.threadId, newMessage);
                     let result = undefined;