@azure/communication-react 1.0.0-beta.1 → 1.0.0-beta.5

package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":";AAKA,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,6BAA6B,EAC7B,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAKlB,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,6BAA6B;IAC7B,gBAAgB,EAAE,4BAA4B,CAAC;IAC/C,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,6BAA6B,EAAE,CAAC;IACrD,+BAA+B;IAC/B,oBAAoB,CAAC,EAAE,kBAAkB,CAAC;IAC1C,iCAAiC;IACjC,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,qDAAqD;IACrD,uBAAuB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtF,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,CAAC,gBAAgB,EAAE,4BAA4B,KAAK,GAAG,CAAC,OAAO,CAAC;IACzF,oDAAoD;IACpD,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3F,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,iBAAiB,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5F,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CACtH;AA+BD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WA2EvD,CAAC"}
+{"version":3,"file":"VideoGallery.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":";AAMA,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAalB;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,iCAAiC;IACjC,MAAM,CAAC,EAAE,SAAS,GAAG,oBAAoB,CAAC;IAC1C,6BAA6B;IAC7B,gBAAgB,EAAE,4BAA4B,CAAC;IAC/C,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,6BAA6B,EAAE,CAAC;IACrD,+BAA+B;IAC/B,oBAAoB,CAAC,EAAE,kBAAkB,CAAC;IAC1C,iCAAiC;IACjC,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,qDAAqD;IACrD,uBAAuB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,CAAC,gBAAgB,EAAE,4BAA4B,KAAK,GAAG,CAAC,OAAO,CAAC;IACzF,oDAAoD;IACpD,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3F,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,iBAAiB,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5F,yBAAyB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,6CAA6C;IAC7C,cAAc,CAAC,EAAE,sBAAsB,CAAC;IAExC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAiIvD,CAAC"}

package/dist/dist-esm/react-components/src/components/VideoGallery.js

@@ -1,65 +1,123 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { Stack } from '@fluentui/react';
-import React, { useMemo } from 'react';
-import { GridLayout } from './GridLayout';
-import { StreamMedia } from './StreamMedia';
-import { gridStyle, videoTileStyle } from './styles/VideoGallery.styles';
-import { memoizeFnAll } from "../../../acs-ui-common/src";
-import { VideoTile } from './VideoTile';
-// @todo: replace with React.memo method
-const memoizeAllRemoteParticipants = memoizeFnAll((userId, onCreateRemoteStreamView, isAvailable, renderElement, displayName, remoteVideoViewOption, onRenderAvatar) => {
-    if (isAvailable && !renderElement) {
-        onCreateRemoteStreamView && onCreateRemoteStreamView(userId, remoteVideoViewOption);
-    }
-    return (React.createElement(Stack, { className: gridStyle, key: userId, grow: true },
-        React.createElement(VideoTile, { userId: userId, isVideoReady: isAvailable, renderElement: React.createElement(StreamMedia, { videoStreamElement: renderElement !== null && renderElement !== void 0 ? renderElement : null }), displayName: displayName, styles: videoTileStyle, onRenderPlaceholder: onRenderAvatar })));
-});
-/**
- * VideoGallery represents a `GridLayout` of video tiles for a specific call.
- * It displays a `VideoTile` for the local user as well as for each remote participants who joined the call.
- *
- * @param props - of type `VideoGalleryProps`
- *
- * @returns a JSX Element
- */
-export const VideoGallery = (props) => {
-    const { localParticipant, remoteParticipants, localVideoViewOption, remoteVideoViewOption, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, styles, onRenderAvatar } = props;
-    /**
-     * Utility function for meoized rendering of LocalParticipant.
-     */
-    const defaultOnRenderLocalVideoTile = useMemo(() => {
-        var _a;
-        const localVideoStream = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream;
-        const isLocalVideoReady = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.isAvailable;
-        if (onRenderLocalVideoTile)
-            return onRenderLocalVideoTile(localParticipant);
-        if (localVideoStream && !localVideoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOption);
-        }
-        return (React.createElement(VideoTile, { userId: localParticipant.userId, isVideoReady: isLocalVideoReady, renderElement: React.createElement(StreamMedia, { videoStreamElement: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) !== null && _a !== void 0 ? _a : null }), displayName: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName, styles: videoTileStyle, onRenderPlaceholder: onRenderAvatar }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localParticipant, localParticipant.videoStream, onCreateLocalStreamView]);
-    /**
-     * Utility function for memoized rendering of RemoteParticipants.
-     */
-    const defaultOnRenderRemoteParticipants = useMemo(() => {
-        if (!remoteParticipants)
-            return null;
-        // If user provided a custom onRender function return that function.
-        if (onRenderRemoteVideoTile) {
-            return remoteParticipants.map((participant) => onRenderRemoteVideoTile(participant));
-        }
-        return memoizeAllRemoteParticipants((memoizedRemoteParticipantFn) => {
-            // Else return Remote Stream Video Tiles
-            return remoteParticipants.map((participant) => {
-                const remoteVideoStream = participant.videoStream;
-                return memoizedRemoteParticipantFn(participant.userId, onCreateRemoteStreamView, remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable, remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement, participant.displayName, remoteVideoViewOption, onRenderAvatar);
-            });
-        });
-    }, [remoteParticipants, onRenderRemoteVideoTile, onCreateRemoteStreamView, remoteVideoViewOption]);
-    return (React.createElement(GridLayout, { styles: styles },
-        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: gridStyle, grow: true }, localParticipant && defaultOnRenderLocalVideoTile),
-        defaultOnRenderRemoteParticipants));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { ContextualMenu, Modal, Stack } from '@fluentui/react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useIdentifiers } from '../identifiers/IdentifierProvider';
+import { GridLayout } from './GridLayout';
+import { StreamMedia } from './StreamMedia';
+import { floatingLocalVideoModalStyle, floatingLocalVideoTileStyle, gridStyle, videoGalleryContainerStyle } from './styles/VideoGallery.styles';
+import { VideoTile } from './VideoTile';
+const emptyStyles = {};
+const DRAG_OPTIONS = {
+    moveMenuItemText: 'Move',
+    closeMenuItemText: 'Close',
+    menu: ContextualMenu,
+    keepInBounds: true
+};
+/**
+ * VideoGallery represents a `GridLayout` of video tiles for a specific call.
+ * It displays a `VideoTile` for the local user as well as for each remote participants who joined the call.
+ *
+ * @param props - of type `VideoGalleryProps`
+ *
+ * @returns a JSX Element
+ */
+export const VideoGallery = (props) => {
+    const { localParticipant, remoteParticipants, localVideoViewOption, remoteVideoViewOption, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator } = props;
+    const ids = useIdentifiers();
+    const shouldFloatLocalVideo = useCallback(() => {
+        return !!(layout === 'floatingLocalVideo' && remoteParticipants && remoteParticipants.length > 0);
+    }, [layout, remoteParticipants]);
+    /**
+     * Utility function for memoized rendering of LocalParticipant.
+     */
+    const defaultOnRenderLocalVideoTile = useMemo(() => {
+        const localVideoStream = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream;
+        if (onRenderLocalVideoTile)
+            return onRenderLocalVideoTile(localParticipant);
+        let localVideoTileStyles = {};
+        if (shouldFloatLocalVideo()) {
+            localVideoTileStyles = floatingLocalVideoTileStyle;
+        }
+        if (localVideoStream && !localVideoStream.renderElement) {
+            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOption);
+        }
+        return (React.createElement(VideoTile, { userId: localParticipant.userId, renderElement: (localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) ? (React.createElement(StreamMedia, { videoStreamElement: localVideoStream.renderElement })) : undefined, displayName: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName, styles: localVideoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: localParticipant.isMuted, showMuteIndicator: showMuteIndicator }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        localParticipant,
+        localParticipant.videoStream,
+        onCreateLocalStreamView,
+        onRenderLocalVideoTile,
+        onRenderAvatar,
+        shouldFloatLocalVideo
+    ]);
+    /**
+     * Utility function for memoized rendering of RemoteParticipants.
+     */
+    const defaultOnRenderRemoteParticipants = useMemo(() => {
+        // If user provided a custom onRender function return that function.
+        if (onRenderRemoteVideoTile) {
+            return remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map((participant) => onRenderRemoteVideoTile(participant));
+        }
+        // Else return Remote Stream Video Tiles
+        return remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map((participant) => {
+            const remoteVideoStream = participant.videoStream;
+            return (React.createElement(RemoteVideoTile, { key: participant.userId, userId: participant.userId, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isAvailable: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable, isMuted: participant.isMuted, isSpeaking: participant.isSpeaking, renderElement: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement, displayName: participant.displayName, remoteVideoViewOption: remoteVideoViewOption, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator }));
+        });
+    }, [
+        remoteParticipants,
+        onRenderRemoteVideoTile,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOption,
+        onRenderAvatar,
+        showMuteIndicator
+    ]);
+    if (shouldFloatLocalVideo()) {
+        const floatingTileHostId = 'UILibraryFloatingTileHost';
+        return (React.createElement(Stack, { id: floatingTileHostId, grow: true, styles: videoGalleryContainerStyle },
+            React.createElement(Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle, layerProps: { hostId: floatingTileHostId } }, localParticipant && defaultOnRenderLocalVideoTile),
+            React.createElement(GridLayout, { styles: styles !== null && styles !== void 0 ? styles : emptyStyles }, defaultOnRenderRemoteParticipants)));
+    }
+    return (React.createElement(GridLayout, { styles: styles !== null && styles !== void 0 ? styles : emptyStyles },
+        React.createElement(Stack, { "data-ui-id": ids.videoGallery, horizontalAlign: "center", verticalAlign: "center", className: gridStyle, grow: true }, localParticipant && defaultOnRenderLocalVideoTile),
+        defaultOnRenderRemoteParticipants));
+};
+// Use React.memo to create memoize cache for each RemoteVideoTile
+const RemoteVideoTile = React.memo((props) => {
+    const { isAvailable, isMuted, isSpeaking, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOption, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    useEffect(() => {
+        if (isAvailable && !renderElement) {
+            onCreateRemoteStreamView && onCreateRemoteStreamView(userId, remoteVideoViewOption);
+        }
+        if (!isAvailable) {
+            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+        }
+    }, [
+        isAvailable,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOption,
+        renderElement,
+        userId
+    ]);
+    useEffect(() => {
+        return () => {
+            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+        };
+    }, [onDisposeRemoteStreamView, userId]);
+    const renderVideoStreamElement = 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.createElement(StreamMedia, { videoStreamElement: renderElement });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [renderElement, renderElement === null || renderElement === void 0 ? void 0 : renderElement.childElementCount]);
+    return (React.createElement(Stack, { className: gridStyle, key: userId, grow: true },
+        React.createElement(VideoTile, { userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator })));
+});
 //# sourceMappingURL=VideoGallery.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/VideoTile.d.ts

@@ -1,50 +1,52 @@
-import { IStyle } from '@fluentui/react';
-import React from 'react';
-import { BaseCustomStylesProps } from '../types';
-export interface VideoTileStylesProps extends BaseCustomStylesProps {
-    /** Styles for video container. */
-    videoContainer?: IStyle;
-    /** Styles for container overlayed on the video container. */
-    overlayContainer?: IStyle;
-    /** Styles for displayName on the video container. */
-    displayNameContainer?: IStyle;
-}
-/**
- * Props for VideoTile component
- */
-export interface VideoTileProps extends PlaceholderProps {
-    /** React Child components. Child Components will show as overlay component in the VideoTile. */
-    children?: React.ReactNode;
-    /**
-     * Allows users to pass in an object contains custom CSS styles.
-     * @Example
-     * ```
-     * <VideoTile styles={{ root: { background: 'blue' } }} />
-     * ```
-     */
-    styles?: VideoTileStylesProps;
-    /** Determines if the static image or video stream should be rendered. */
-    isVideoReady?: boolean;
-    /** Component with the video stream. */
-    renderElement?: JSX.Element | null;
-    /** Determines if the video is mirrored or not. */
-    isMirrored?: boolean;
-    /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */
-    onRenderPlaceholder?: (props: PlaceholderProps, defaultOnRender: (props: PlaceholderProps) => JSX.Element) => JSX.Element | null;
-    /**
-     * Whether the displayName is displayed or not.
-     *
-     * @defaultValue `true`
-     */
-    showDisplayName?: boolean;
-}
-export interface PlaceholderProps {
-    /** user id for the VideoTile placeholder. */
-    userId?: string;
-    /** Optional participant display name for the VideoTile default placeholder. */
-    displayName?: string;
-    /** Optional property to set the aria label of the video tile if there is no available stream. */
-    noVideoAvailableAriaLabel?: string;
-}
-export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
+import { IStyle } from '@fluentui/react';
+import React from 'react';
+import { BaseCustomStylesProps, OnRenderAvatarCallback } from '../types';
+export interface VideoTileStylesProps extends BaseCustomStylesProps {
+    /** Styles for video container. */
+    videoContainer?: IStyle;
+    /** Styles for container overlayed on the video container. */
+    overlayContainer?: IStyle;
+    /** Styles for displayName on the video container. */
+    displayNameContainer?: IStyle;
+}
+/**
+ * Props for VideoTile component
+ */
+export interface VideoTileProps {
+    /** React Child components. Child Components will show as overlay component in the VideoTile. */
+    children?: React.ReactNode;
+    /**
+     * Allows users to pass in an object contains custom CSS styles.
+     * @Example
+     * ```
+     * <VideoTile styles={{ root: { background: 'blue' } }} />
+     * ```
+     */
+    styles?: VideoTileStylesProps;
+    /** user id for the VideoTile placeholder. */
+    userId?: string;
+    /** Component with the video stream. */
+    renderElement?: JSX.Element | null;
+    /** Determines if the video is mirrored or not. */
+    isMirrored?: boolean;
+    /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */
+    onRenderPlaceholder?: OnRenderAvatarCallback;
+    /**
+     * Whether to display a mute icon beside the user's display name.
+     */
+    showMuteIndicator?: boolean;
+    /**
+     * Whether the video is muted or not.
+     */
+    isMuted?: boolean;
+    /**
+     * Display Name of the Participant
+     */
+    displayName?: string;
+    /** Optional property to set the aria label of the video tile if there is no available stream. */
+    noVideoAvailableAriaLabel?: string;
+    /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */
+    isSpeaking?: boolean;
+}
+export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
 //# sourceMappingURL=VideoTile.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAkD,MAAM,iBAAiB,CAAC;AACzF,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uCAAuC;IACvC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACnC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sGAAsG;IACtG,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,gBAAgB,EACvB,eAAe,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,KACtD,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAmBD,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,WAqDjD,CAAC"}
+{"version":3,"file":"VideoTile.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,MAAM,EAAqC,MAAM,iBAAiB,CAAC;AAE7G,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,qBAAqB,EAAuB,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAa9F,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACnC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sGAAsG;IACtG,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;IAC7C;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iGAAiG;IACjG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwBD,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,WAiHjD,CAAC"}

package/dist/dist-esm/react-components/src/components/VideoTile.js

@@ -1,24 +1,54 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { mergeStyles, Persona, PersonaSize, Stack, Text } from '@fluentui/react';
-import React from 'react';
-import { disabledVideoHint, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint } from './styles/VideoTile.styles';
-import { useTheme } from '@fluentui/react-theme-provider';
-const DefaultPlaceholder = (props) => {
-    const { displayName, noVideoAvailableAriaLabel } = props;
-    const personaStyles = { root: { margin: 'auto' } };
-    return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React.createElement(Persona, { styles: personaStyles, size: PersonaSize.size100, hidePersonaDetails: true, text: displayName, initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel })));
-};
-export const VideoTile = (props) => {
-    const { children, displayName, isMirrored, isVideoReady, onRenderPlaceholder, renderElement, showDisplayName = true, styles, userId, noVideoAvailableAriaLabel } = props;
-    const placeHolderProps = { userId, displayName, noVideoAvailableAriaLabel };
-    const theme = useTheme();
-    return (React.createElement(Stack, { className: mergeStyles(rootStyles, { background: theme.palette.neutralLighter }, styles === null || styles === void 0 ? void 0 : styles.root) },
-        isVideoReady && renderElement ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && {
-                transform: 'scaleX(-1)'
-            }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(placeHolderProps, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeHolderProps))))),
-        displayName && showDisplayName && (React.createElement(Text, { className: mergeStyles(isVideoReady ? videoHint : disabledVideoHint, { color: isVideoReady ? 'white' : theme.palette.neutralPrimaryAlt }, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer) }, displayName)),
-        children && React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { DefaultPalette as palette, Icon, mergeStyles, Persona, Stack, Text } from '@fluentui/react';
+import { Ref } from '@fluentui/react-northstar';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIdentifiers } from '../identifiers';
+import { useTheme } from '../theming';
+import { disabledVideoHint, displayNameStyle, iconContainerStyle, isSpeakingStyles, overlayContainerStyles, rootStyles, tileInfoStackItemStyle, videoContainerStyles, videoHint } from './styles/VideoTile.styles';
+// Coin max size is set to 100px (PersonaSize.size100)
+const personaMaxSize = 200;
+const DefaultPlaceholder = (props) => {
+    const { text, noVideoAvailableAriaLabel, coinSize, styles, hidePersonaDetails } = props;
+    return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        React.createElement(Persona, { styles: styles, coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '' })));
+};
+const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
+export const VideoTile = (props) => {
+    var _a, _b;
+    const { children, displayName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking } = props;
+    const [personaSize, setPersonaSize] = useState(100);
+    const videoTileRef = useRef(null);
+    const theme = useTheme();
+    const isVideoRendered = !!renderElement;
+    useLayoutEffect(() => {
+        if (videoTileRef.current && videoTileRef.current) {
+            const minSize = Math.min(videoTileRef.current.clientHeight, videoTileRef.current.clientWidth, personaMaxSize);
+            setPersonaSize(minSize / 2);
+        }
+    }, [(_a = videoTileRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, (_b = videoTileRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth]);
+    const placeholderOptions = {
+        userId,
+        text: displayName,
+        noVideoAvailableAriaLabel,
+        coinSize: personaSize,
+        styles: defaultPersonaStyles,
+        hidePersonaDetails: true
+    };
+    const nametagColorOverride = useMemo(() => ({ color: isVideoRendered ? palette.neutralPrimary : theme.palette.neutralPrimary }), [isVideoRendered, theme.palette.neutralPrimary]);
+    const tileInfoContainerStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHint : disabledVideoHint, 
+    // when video is being rendered, the displayName has a grey-ish background, so no use of theme
+    nametagColorOverride, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, nametagColorOverride, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
+    const tileInfoDisplayNameStyle = useMemo(() => mergeStyles(displayNameStyle, nametagColorOverride), [nametagColorOverride]);
+    const ids = useIdentifiers();
+    return (React.createElement(Ref, { innerRef: videoTileRef },
+        React.createElement(Stack, { "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, isSpeaking ? isSpeakingStyles : {}, { background: theme.palette.neutralLighter }, styles === null || styles === void 0 ? void 0 : styles.root) },
+            isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
+            (displayName || (showMuteIndicator && isMuted !== undefined)) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle },
+                displayName && (React.createElement(Stack.Item, { className: mergeStyles(tileInfoStackItemStyle) },
+                    React.createElement(Text, { className: tileInfoDisplayNameStyle }, displayName))),
+                showMuteIndicator && isMuted && (React.createElement(Stack.Item, { className: mergeStyles(iconContainerStyle, tileInfoStackItemStyle) },
+                    React.createElement(Icon, { iconName: "VideoTileMicOff" }))))),
+            children && (React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
+};
 //# sourceMappingURL=VideoTile.js.map

package/dist/dist-esm/react-components/src/components/VideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,UAAU,EACV,oBAAoB,EACpB,SAAS,EACV,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAsD1D,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,EAAE,WAAW,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpF,oBAAC,OAAO,IACN,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,kBAAkB,EAAE,IAAI,EACxB,IAAI,EAAE,WAAW,EACjB,iBAAiB,EAAC,OAAO,gBACb,yBAAyB,GACrC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,eAAe,GAAG,IAAI,EACtB,MAAM,EACN,MAAM,EACN,yBAAyB,EAC1B,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,yBAAyB,EAAE,CAAC;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;QAClG,YAAY,IAAI,aAAa,CAAC,CAAC,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,oBAAoB,EACpB,UAAU,IAAI;gBACZ,SAAS,EAAE,YAAY;aACxB,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CACvB,IAEA,aAAa,CACR,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChD,mBAAmB,CAAC,CAAC,CAAC,CACrB,mBAAmB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAC1D,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,oBAAK,gBAAgB,EAAI,CAC7C,CACK,CACT;QACA,WAAW,IAAI,eAAe,IAAI,CACjC,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CACpB,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAC5C,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EACnE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAC7B,IAEA,WAAW,CACP,CACR;QACA,QAAQ,IAAI,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAG,QAAQ,CAAS,CAC1G,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/index.d.ts

@@ -1,33 +1,40 @@
-export { TypingIndicator } from './TypingIndicator';
-export type { TypingIndicatorProps, TypingIndicatorStylesProps } from './TypingIndicator';
-export { GridLayout } from './GridLayout';
-export type { GridLayoutProps, GridLayoutType } from './GridLayout';
-export { SendBox } from './SendBox';
-export type { SendBoxProps, SendBoxStylesProps } from './SendBox';
-export { MessageStatusIndicator } from './MessageStatusIndicator';
-export type { MessageStatusIndicatorProps } from './MessageStatusIndicator';
-export { MessageThread } from './MessageThread';
-export type { MessageProps, MessageThreadProps, MessageThreadStylesProps, JumpToNewMessageButtonProps, DefaultMessageRendererType } from './MessageThread';
-export { StreamMedia } from './StreamMedia';
-export type { StreamMediaProps } from './StreamMedia';
-export { ParticipantItem } from './ParticipantItem';
-export type { ParticipantItemProps, ParticipantItemStylesProps } from './ParticipantItem';
-export { ParticipantList } from './ParticipantList';
-export type { ParticipantListProps } from './ParticipantList';
-export { VideoGallery } from './VideoGallery';
-export type { VideoGalleryProps } from './VideoGallery';
-export { CameraButton } from './CameraButton';
-export type { CameraButtonProps } from './CameraButton';
-export { ControlBar } from './ControlBar';
-export type { ControlBarProps, ControlBarLayoutType } from './ControlBar';
-export { EndCallButton } from './EndCallButton';
-export type { EndCallButtonProps } from './EndCallButton';
-export { MicrophoneButton } from './MicrophoneButton';
-export type { MicrophoneButtonProps } from './MicrophoneButton';
-export { OptionsButton } from './OptionsButton';
-export type { OptionsButtonProps } from './OptionsButton';
-export { ScreenShareButton } from './ScreenShareButton';
-export type { ScreenShareButtonProps } from './ScreenShareButton';
-export { VideoTile } from './VideoTile';
-export type { VideoTileProps, VideoTileStylesProps, PlaceholderProps } from './VideoTile';
+export { TypingIndicator } from './TypingIndicator';
+export type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';
+export { ErrorBar } from './ErrorBar';
+export type { ActiveError, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';
+export { GridLayout } from './GridLayout';
+export type { GridLayoutProps, GridLayoutType } from './GridLayout';
+export { SendBox } from './SendBox';
+export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';
+export { MessageStatusIndicator } from './MessageStatusIndicator';
+export type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';
+export type { InputBoxButtonProps } from './InputBoxComponent';
+export { MessageThread } from './MessageThread';
+export type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStylesProps, JumpToNewMessageButtonProps, DefaultMessageRendererType } from './MessageThread';
+export { StreamMedia } from './StreamMedia';
+export type { StreamMediaProps } from './StreamMedia';
+export { ParticipantItem } from './ParticipantItem';
+export type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStylesProps } from './ParticipantItem';
+export { ParticipantList } from './ParticipantList';
+export type { ParticipantListProps } from './ParticipantList';
+export { VideoGallery } from './VideoGallery';
+export type { VideoGalleryProps } from './VideoGallery';
+export { CameraButton } from './CameraButton';
+export type { CameraButtonProps, CameraButtonStrings } from './CameraButton';
+export { ControlBar } from './ControlBar';
+export type { ControlBarProps, ControlBarLayoutType } from './ControlBar';
+export { ControlBarButton } from './ControlBarButton';
+export type { ControlBarButtonProps, ControlBarButtonStrings } from './ControlBarButton';
+export { EndCallButton } from './EndCallButton';
+export type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';
+export { MicrophoneButton } from './MicrophoneButton';
+export type { MicrophoneButtonProps, MicrophoneButtonStrings } from './MicrophoneButton';
+export { OptionsButton } from './OptionsButton';
+export type { OptionsDevice, OptionsButtonProps, OptionsButtonStrings } from './OptionsButton';
+export { ParticipantsButton } from './ParticipantsButton';
+export type { ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStylesProps } from './ParticipantsButton';
+export { ScreenShareButton } from './ScreenShareButton';
+export type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';
+export { VideoTile } from './VideoTile';
+export type { VideoTileProps, VideoTileStylesProps } from './VideoTile';
 //# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-components/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/index.js

@@ -1,19 +1,22 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-export { TypingIndicator } from './TypingIndicator';
-export { GridLayout } from './GridLayout';
-export { SendBox } from './SendBox';
-export { MessageStatusIndicator } from './MessageStatusIndicator';
-export { MessageThread } from './MessageThread';
-export { StreamMedia } from './StreamMedia';
-export { ParticipantItem } from './ParticipantItem';
-export { ParticipantList } from './ParticipantList';
-export { VideoGallery } from './VideoGallery';
-export { CameraButton } from './CameraButton';
-export { ControlBar } from './ControlBar';
-export { EndCallButton } from './EndCallButton';
-export { MicrophoneButton } from './MicrophoneButton';
-export { OptionsButton } from './OptionsButton';
-export { ScreenShareButton } from './ScreenShareButton';
-export { VideoTile } from './VideoTile';
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+export { TypingIndicator } from './TypingIndicator';
+export { ErrorBar } from './ErrorBar';
+export { GridLayout } from './GridLayout';
+export { SendBox } from './SendBox';
+export { MessageStatusIndicator } from './MessageStatusIndicator';
+export { MessageThread } from './MessageThread';
+export { StreamMedia } from './StreamMedia';
+export { ParticipantItem } from './ParticipantItem';
+export { ParticipantList } from './ParticipantList';
+export { VideoGallery } from './VideoGallery';
+export { CameraButton } from './CameraButton';
+export { ControlBar } from './ControlBar';
+export { ControlBarButton } from './ControlBarButton';
+export { EndCallButton } from './EndCallButton';
+export { MicrophoneButton } from './MicrophoneButton';
+export { OptionsButton } from './OptionsButton';
+export { ParticipantsButton } from './ParticipantsButton';
+export { ScreenShareButton } from './ScreenShareButton';
+export { VideoTile } from './VideoTile';
 //# sourceMappingURL=index.js.map

package/dist/dist-esm/react-components/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}