@azure/communication-react 1.2.3-alpha-202205110014.0 → 1.2.3-alpha-202205120015.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-202205110014.0';
+var telemetryVersion = '1.2.3-alpha-202205120015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1539,9 +1539,9 @@ const defaultSendBoxActiveBorderThicknessREM = 0.125;
  * @private
  */
 const borderAndBoxShadowStyle = (props) => {
-    const { theme, errorColor, hasErrorMessage, disabled } = props;
-    const borderColor = hasErrorMessage ? errorColor : theme.palette.neutralSecondary;
-    const borderColorActive = hasErrorMessage ? errorColor : theme.palette.themePrimary;
+    const { theme, hasErrorMessage, disabled } = props;
+    const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;
+    const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
     const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
     const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;
     return {
@@ -1594,6 +1594,9 @@ const lightTheme = {
         callRedDark: '#8b2c3d',
         callRedDarker: '#772a38',
         iconWhite: '#ffffff'
+    },
+    semanticColors: {
+        errorText: '#a80000'
     }
 };
 /**
@@ -1631,6 +1634,9 @@ const darkTheme = {
         callRedDark: '#a42e43',
         callRedDarker: '#8b2c3d',
         iconWhite: '#ffffff'
+    },
+    semanticColors: {
+        errorText: '#f1707b'
     }
 };
 
@@ -1822,31 +1828,26 @@ const textContainerStyle = {
 /**
  * @private
  */
-const textFieldStyle = (errorColor) => {
-    return {
-        root: {
-            width: '100%',
-            minHeight: '0',
-            fontSize: '8.25rem'
-        },
-        wrapper: {},
-        fieldGroup: {
-            outline: 'none',
-            border: 'none',
-            height: 'auto',
-            minHeight: '0',
-            /**
-             * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
-             */
-            ':after': { border: 'none' }
-        },
-        field: {
-            borderRadius: '0.25rem'
-        },
-        errorMessage: {
-            color: errorColor
-        }
-    };
+const textFieldStyle = {
+    root: {
+        width: '100%',
+        minHeight: '0',
+        fontSize: '8.25rem'
+    },
+    wrapper: {},
+    fieldGroup: {
+        outline: 'none',
+        border: 'none',
+        height: 'auto',
+        minHeight: '0',
+        /**
+         * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
+         */
+        ':after': { border: 'none' }
+    },
+    field: {
+        borderRadius: '0.25rem'
+    }
 };
 /**
  * @private
@@ -1919,11 +1920,10 @@ const getPerceptualBrightnessOfHexColor = (hexColor) => {
  */
 const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
-    const theme = useTheme();
     const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     const mergedTextFiledStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
-    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle(isDarkThemed(theme) ? '#f1707b' : '#a80000'), {
+    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
         errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
     });
@@ -2233,7 +2233,6 @@ const SendBox = (props) => {
         React__default['default'].createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
                 theme,
-                errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
@@ -2612,7 +2611,6 @@ const ChatMessageComponentAsEditBox = (props) => {
     }, [message.attachedFilesMetadata]);
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
             theme,
-            errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
             hasErrorMessage: false,
             disabled: false
         })) },
@@ -2679,7 +2677,7 @@ const chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: rea
 /**
  * @private
  */
-const chatMessageFailedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.light, color: isDarkThemed(theme) ? '#f1707b' : '#a80000' });
+const chatMessageFailedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.light, color: theme.semanticColors.errorText });
 /**
  * @private
  */
@@ -4329,6 +4327,8 @@ const VideoTile = (props) => {
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
  * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ *
+ * @private
  */
 const RemoteVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
@@ -4805,25 +4805,6 @@ const LoadingSpinner = (props) => {
         React__default['default'].createElement(react.Spinner, { label: props.loadingMessage, size: react.SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * local video tile camera cycle button - for use on mobile screens only.
- * @internal
- */
-const LocalVideoCameraCycleButton = (props) => {
-    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
-            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
-                const newCamera = cameras[(index + 1) % cameras.length];
-                if (onSelectCamera !== undefined) {
-                    onSelectCamera(newCamera);
-                }
-            }
-        } }));
-};
-
 // Copyright (c) Microsoft Corporation.
 const animationDuration = react.AnimationVariables.durationValue2;
 const ZERO = { x: 0, y: 0 };
@@ -5496,6 +5477,84 @@ const _ModalClone = react.styled(ModalBase, getStyles, undefined, {
 });
 _ModalClone.displayName = 'Modal';
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * local video tile camera cycle button - for use on mobile screens only.
+ * @internal
+ */
+const LocalVideoCameraCycleButton = (props) => {
+    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
+    const theme = react.useTheme();
+    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
+                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const newCamera = cameras[(index + 1) % cameras.length];
+                if (onSelectCamera !== undefined) {
+                    onSelectCamera(newCamera);
+                }
+            }
+        } }));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering local participant.
+ *
+ * @private
+ */
+const LocalVideoTile = React__default['default'].memo((props) => {
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    React.useEffect(() => {
+        if (isAvailable && !renderElement) {
+            onCreateLocalStreamView === null || onCreateLocalStreamView === void 0 ? void 0 : onCreateLocalStreamView(localVideoViewOptions);
+        }
+        // Always clean up element to make tile up to date and be able to dispose correctly
+        return () => {
+            if (renderElement) {
+                onDisposeLocalStreamView === null || onDisposeLocalStreamView === void 0 ? void 0 : onDisposeLocalStreamView();
+            }
+        };
+    }, [isAvailable, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement]);
+    // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
+    // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.
+    // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed
+    React.useEffect(() => {
+        return () => {
+            onDisposeLocalStreamView === null || onDisposeLocalStreamView === void 0 ? void 0 : onDisposeLocalStreamView();
+        };
+    }, [onDisposeLocalStreamView]);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
+        }
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
+            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement })));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview
+    ]);
+    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator }));
+});
+const FloatingLocalCameraCycleButton = (props) => {
+    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(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: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Currently the Calling JS SDK supports up to 4 remote video streams
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
@@ -5520,7 +5579,7 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  */
 const VideoGallery = (props) => {
     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, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -5559,56 +5618,37 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
     });
-    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.
      */
     const localVideoTile = React.useMemo(() => {
-        const localVideoStream = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream;
+        var _a, _b;
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
-        const localVideoTileStyles = shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {};
-        const localVideoTileStylesThemed = react.concatStyleSets(localVideoTileStyles, {
+        const localVideoTileStyles = react.concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
-        if (localVideoStream && !localVideoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOptions);
-        }
         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,
-                    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 })));
+            React__default['default'].createElement(LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
-        localParticipant,
         isNarrow,
+        localParticipant,
+        localVideoCameraCycleButtonProps,
+        localVideoViewOptions,
         onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        onRenderAvatar,
         onRenderLocalVideoTile,
-        theme.effects.roundedCorner4,
-        styles === null || styles === void 0 ? void 0 : styles.localVideo,
-        strings.localVideoMovementLabel,
-        strings.localVideoLabel,
-        LocalCameraCycleButton,
+        shouldFloatLocalVideo,
+        showCameraSwitcherInLocalPreview,
         showMuteIndicator,
-        localVideoViewOptions,
-        onRenderAvatar,
-        shouldFloatLocalVideo
+        strings.localVideoCameraSwitcherLabel,
+        strings.localVideoLabel,
+        strings.localVideoMovementLabel,
+        strings.localVideoSelectedDescription,
+        styles === null || styles === void 0 ? void 0 : styles.localVideo,
+        theme.effects.roundedCorner4
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
@@ -16307,7 +16347,7 @@ const CallWithChatScreen = (props) => {
         setActivePane('none');
     }, [setActivePane]);
     /** Constant setting of id for the parent stack of the composite */
-    const compositeParentDivId = 'callWithChatCompositeParentDiv-internal';
+    const compositeParentDivId = reactHooks.useId('callWithChatCompositeParentDiv-internal');
     const toggleChat = React.useCallback(() => {
         if (activePane === 'chat') {
             setActivePane('none');