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

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

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Spinner, SpinnerSize, Stack } from '@fluentui/react';
+import React, { useEffect } from 'react';
+import { useLocale } from '../../localization';
+import { StreamMedia } from '../StreamMedia';
+import { VideoTile } from '../VideoTile';
+import { loadingStyle } from './styles/RemoteScreenShare.styles';
+import { _formatString } from "../../../../acs-ui-common/src";
+/**
+ * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
+ * https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export const RemoteScreenShare = React.memo((props) => {
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
+    const locale = useLocale();
+    if (!renderElement) {
+        onCreateRemoteStreamView && onCreateRemoteStreamView(userId);
+    }
+    useEffect(() => {
+        return () => {
+            // TODO: Isolate disposing behaviors for screenShare and videoStream
+            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+        };
+    }, [onDisposeRemoteStreamView, userId]);
+    const loadingMessage = displayName
+        ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
+            participant: displayName
+        })
+        : '';
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+});
+const LoadingSpinner = (props) => {
+    return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
+        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' })));
+};
+//# sourceMappingURL=RemoteScreenShare.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KASA,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IACnH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE;QAClB,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;KAC9D;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAC7F,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,22 @@
+import { Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const screenSharingContainerStyle: string;
+/**
+ * @private
+ */
+export declare const screenSharingNotificationContainerStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const screenSharingNotificationIconContainerStyle: string;
+/**
+ * @private
+ */
+export declare const screenSharingNotificationIconStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const screenSharingNotificationTextStyle: string;
+//# sourceMappingURL=LocalScreenShare.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocalScreenShare.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,2BAA2B,QAGtC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,uCAAuC,UAAW,KAAK,KAAG,MAOnE,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,2CAA2C,QAGtD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kCAAkC,UAAW,KAAK,KAAG,MAK9D,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,kCAAkC,QAI7C,CAAC"}

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

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
+export const screenSharingContainerStyle = mergeStyles({
+    width: '100%',
+    height: '100%'
+});
+/**
+ * @private
+ */
+export const screenSharingNotificationContainerStyle = (theme) => mergeStyles({
+    backgroundColor: 'inherit',
+    padding: '1rem',
+    maxWidth: '95%',
+    borderRadius: theme.effects.roundedCorner4,
+    color: theme.palette.neutralSecondary
+});
+/**
+ * @private
+ */
+export const screenSharingNotificationIconContainerStyle = mergeStyles({
+    height: '2rem',
+    lineHeight: 0
+});
+/**
+ * @private
+ */
+export const screenSharingNotificationIconStyle = (theme) => mergeStyles({
+    // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px
+    transform: 'scale(2.5)',
+    color: theme.palette.neutralTertiary
+});
+/**
+ * @private
+ */
+export const screenSharingNotificationTextStyle = mergeStyles({
+    fontSize: '1rem',
+    // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color
+    color: 'inherit'
+});
+//# sourceMappingURL=LocalScreenShare.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocalScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,KAAY,EAAU,EAAE,CAC9E,WAAW,CAAC;IACV,eAAe,EAAE,SAAS;IAC1B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,2CAA2C,GAAG,WAAW,CAAC;IACrE,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,CAAC;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAAY,EAAU,EAAE,CACzE,WAAW,CAAC;IACV,2FAA2F;IAC3F,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;CACrC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,QAAQ,EAAE,MAAM;IAChB,kHAAkH;IAClH,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+/**
+ * @private
+ */
+export declare const loadingStyle: string;
+//# sourceMappingURL=RemoteScreenShare.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteScreenShare.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteScreenShare.styles.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,YAAY,QAGvB,CAAC"}

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

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
+export const loadingStyle = mergeStyles({
+    height: '100%',
+    width: '100%'
+});
+//# sourceMappingURL=RemoteScreenShare.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC,CAAC"}

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

@@ -1,7 +1,37 @@
 /// <reference types="react" />
-import { BaseCustomStylesProps, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions } from '../types';
+import { IStyle } from '@fluentui/react';
+import { GridLayoutStyles } from '.';
+import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions } from '../types';
+import { HorizontalGalleryStyles } from './HorizontalGallery';
 /**
- * Props for component `VideoGallery`
+ * All strings that may be shown on the UI in the {@link VideoGallery}.
+ *
+ * @public
+ */
+export interface VideoGalleryStrings {
+    /** String to notify that local user is sharing their screen */
+    screenIsBeingSharedMessage: string;
+    /** String to show when remote screen share stream is loading */
+    screenShareLoadingMessage: string;
+    /** String for local video label. Default is "You" */
+    localVideoLabel: string;
+}
+/**
+ * {@link VideoGallery} Component Styles.
+ * @public
+ */
+export interface VideoGalleryStyles extends BaseCustomStyles {
+    /** Styles for the grid layout */
+    gridLayout?: GridLayoutStyles;
+    /** Styles for the horizontal gallery  */
+    horizontalGallery?: HorizontalGalleryStyles;
+    /** Styles for the local video  */
+    localVideo?: IStyle;
+}
+/**
+ * Props for {@link VideoGallery}.
+ *
+ * @public
  */
 export interface VideoGalleryProps {
     /**
@@ -12,17 +42,19 @@ export interface VideoGalleryProps {
      * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />
      * ```
      */
-    styles?: BaseCustomStylesProps;
+    styles?: VideoGalleryStyles;
     /** Layout of the video tiles. */
     layout?: 'default' | 'floatingLocalVideo';
     /** Local video particpant */
     localParticipant: VideoGalleryLocalParticipant;
     /** List of remote video particpants */
     remoteParticipants?: VideoGalleryRemoteParticipant[];
+    /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */
+    dominantSpeakers?: string[];
     /** Local video view options */
-    localVideoViewOption?: VideoStreamOptions;
+    localVideoViewOptions?: VideoStreamOptions;
     /** Remote videos view options */
-    remoteVideoViewOption?: VideoStreamOptions;
+    remoteVideoViewOptions?: VideoStreamOptions;
     /** Callback to create the local video stream view */
     onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void>;
     /** Callback to dispose of the local video stream view */
@@ -33,6 +65,7 @@ export interface VideoGalleryProps {
     onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void>;
     /** Callback to render a remote video tile */
     onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
+    /** Callback to dispose a remote video stream view */
     onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
     /** Callback to render a particpant avatar */
     onRenderAvatar?: OnRenderAvatarCallback;
@@ -41,14 +74,19 @@ export interface VideoGalleryProps {
      * @defaultValue `true`
      */
     showMuteIndicator?: boolean;
+    /** Optional strings to override in component  */
+    strings?: Partial<VideoGalleryStrings>;
+    /**
+     * Maximum number of participant remote video streams that is rendered.
+     * @defaultValue 4
+     */
+    maxRemoteVideoStreams?: number;
 }
 /**
- * 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`
+ * VideoGallery represents a layout of video tiles for a specific call.
+ * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
  *
- * @returns a JSX Element
+ * @public
  */
 export declare const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 //# sourceMappingURL=VideoGallery.d.ts.map

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":";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"}
+{"version":3,"file":"VideoGallery.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAiD,MAAM,EAA6B,MAAM,iBAAiB,CAAC;AAEnH,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAKrC,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AA4B9D;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,0BAA0B,EAAE,MAAM,CAAC;IACnC,gEAAgE;IAChE,yBAAyB,EAAE,MAAM,CAAC;IAClC,qDAAqD;IACrD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,iCAAiC;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAC5C,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,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,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,iCAAiC;IACjC,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;IAC5C,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,qDAAqD;IACrD,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;IAC5B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACvC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AASD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WA8NvD,CAAC"}

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

@@ -1,13 +1,26 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { ContextualMenu, Modal, Stack } from '@fluentui/react';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { concatStyleSets, ContextualMenu, mergeStyles, Modal, Stack } from '@fluentui/react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+import { smartDominantSpeakerParticipants } from '../gallery';
 import { useIdentifiers } from '../identifiers/IdentifierProvider';
+import { useLocale } from '../localization';
+import { useTheme } from '../theming';
 import { GridLayout } from './GridLayout';
+import { RemoteVideoTile } from './RemoteVideoTile';
+import { ResponsiveHorizontalGallery } from './ResponsiveHorizontalGallery';
 import { StreamMedia } from './StreamMedia';
-import { floatingLocalVideoModalStyle, floatingLocalVideoTileStyle, gridStyle, videoGalleryContainerStyle } from './styles/VideoGallery.styles';
+import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from './styles/HorizontalGallery.styles';
+import { floatingLocalVideoTileStyle, horizontalGalleryContainerStyle, horizontalGalleryStyle, LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM, localVideoTileContainerStyle, floatingLocalVideoModalStyle, SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, videoGalleryContainerStyle, videoGalleryContainerTokens, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
+import { isNarrowWidth, useContainerWidth } from './utils/responsive';
+import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
+import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
 import { VideoTile } from './VideoTile';
-const emptyStyles = {};
+import { v4 as uuidv4 } from 'uuid';
+// Currently the Calling JS SDK supports up to 4 remote video streams
+const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+// Set aside only 6 dominant speakers for remaining audio participants
+const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
 const DRAG_OPTIONS = {
     moveMenuItemText: 'Move',
     closeMenuItemText: 'Close',
@@ -15,109 +28,111 @@ const DRAG_OPTIONS = {
     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.
+ * VideoGallery represents a layout of video tiles for a specific call.
+ * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
  *
- * @param props - of type `VideoGalleryProps`
- *
- * @returns a JSX Element
+ * @public
  */
 export const VideoGallery = (props) => {
-    const { localParticipant, remoteParticipants, localVideoViewOption, remoteVideoViewOption, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator } = props;
+    var _a, _b, _c, _d, _e;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS } = props;
     const ids = useIdentifiers();
-    const shouldFloatLocalVideo = useCallback(() => {
-        return !!(layout === 'floatingLocalVideo' && remoteParticipants && remoteParticipants.length > 0);
-    }, [layout, remoteParticipants]);
+    const theme = useTheme();
+    const localeStrings = useLocale().strings.videoGallery;
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
+    const containerRef = useRef(null);
+    const containerWidth = useContainerWidth(containerRef);
+    const isNarrow = isNarrowWidth(containerWidth);
+    const visibleVideoParticipants = useRef([]);
+    const visibleAudioParticipants = useRef([]);
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    // This set will be used to filter out participants already in visibleVideoParticipants
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
+    });
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
-    const defaultOnRenderLocalVideoTile = useMemo(() => {
+    const localVideoTile = useMemo(() => {
         const localVideoStream = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream;
-        if (onRenderLocalVideoTile)
+        if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
-        let localVideoTileStyles = {};
-        if (shouldFloatLocalVideo()) {
-            localVideoTileStyles = floatingLocalVideoTileStyle;
         }
+        const localVideoTileStyles = shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {};
+        const localVideoTileStylesThemed = concatStyleSets(localVideoTileStyles, {
+            root: { borderRadius: theme.effects.roundedCorner4 }
+        }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         if (localVideoStream && !localVideoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOption);
+            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOptions);
         }
-        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 }));
+        return (React.createElement(VideoTile, { key: localParticipant.userId, userId: localParticipant.userId, renderElement: (localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) ? (React.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,
         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 }));
+    const defaultOnRenderVideoTile = useCallback((participant, isVideoParticipant) => {
+        const remoteVideoStream = participant.videoStream;
+        return (React.createElement(RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
+    }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
+    const videoTiles = onRenderRemoteVideoTile
+        ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
+        : visibleVideoParticipants.current.map((participant) => {
+            return defaultOnRenderVideoTile(participant, true);
         });
-    }, [
-        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)));
+    const audioTiles = onRenderRemoteVideoTile
+        ? visibleAudioParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
+        : visibleAudioParticipants.current.map((participant) => {
+            return defaultOnRenderVideoTile(participant, false);
+        });
+    const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const screenShareActive = screenShareParticipant || (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn);
+    let gridTiles = [];
+    let horizontalGalleryTiles = [];
+    if (screenShareActive) {
+        // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+        horizontalGalleryTiles = videoTiles.concat(audioTiles);
     }
-    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
-    ]);
+    else {
+        // If screen sharing is not active, then assign all video tiles as grid tiles.
+        // If there are no video tiles, then assign audio tiles as grid tiles.
+        gridTiles = videoTiles.length > 0 ? videoTiles : audioTiles;
+        horizontalGalleryTiles = videoTiles.length > 0 ? audioTiles : [];
+    }
+    if (!shouldFloatLocalVideo && localParticipant) {
+        gridTiles.push(localVideoTile);
+    }
+    const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
+    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
     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;
+        if (containerRef.current) {
+            containerRef.current.id = `video-gallery-${uuidv4()}`;
         }
-        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 })));
-});
+    }, [containerRef]);
+    const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
+    return (React.createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+        shouldFloatLocalVideo &&
+            localParticipant &&
+            (horizontalGalleryPresent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React.createElement(Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.id } }, localVideoTile))),
+        React.createElement(Stack, { horizontal: false, styles: videoGalleryContainerStyle, tokens: videoGalleryContainerTokens },
+            screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            horizontalGalleryPresent && (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles)))));
+};
 //# 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,7 +1,12 @@
 import { IStyle } from '@fluentui/react';
 import React from 'react';
-import { BaseCustomStylesProps, OnRenderAvatarCallback } from '../types';
-export interface VideoTileStylesProps extends BaseCustomStylesProps {
+import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
+/**
+ * Fluent styles for {@link VideoTile}.
+ *
+ * @public
+ */
+export interface VideoTileStylesProps extends BaseCustomStyles {
     /** Styles for video container. */
     videoContainer?: IStyle;
     /** Styles for container overlayed on the video container. */
@@ -10,7 +15,9 @@ export interface VideoTileStylesProps extends BaseCustomStylesProps {
     displayNameContainer?: IStyle;
 }
 /**
- * Props for VideoTile component
+ * Props for {@link VideoTile}.
+ *
+ * @public
  */
 export interface VideoTileProps {
     /** React Child components. Child Components will show as overlay component in the VideoTile. */
@@ -31,8 +38,14 @@ export interface VideoTileProps {
     isMirrored?: boolean;
     /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */
     onRenderPlaceholder?: OnRenderAvatarCallback;
+    /**
+     * Show label on the VideoTile
+     * @defaultValue true
+     */
+    showLabel?: boolean;
     /**
      * Whether to display a mute icon beside the user's display name.
+     * @defaultValue true
      */
     showMuteIndicator?: boolean;
     /**
@@ -40,13 +53,25 @@ export interface VideoTileProps {
      */
     isMuted?: boolean;
     /**
-     * Display Name of the Participant
+     * Display Name of the Participant to be shown in the label.
+     * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.
      */
     displayName?: string;
+    /** Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.
+     * @remarks `displayName` is used if this property is not specified.
+     */
+    initialsName?: 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;
 }
+/**
+ * A component to render the video stream for a single call participant.
+ *
+ * Use with {@link GridLayout} in a {@link VideoGallery}.
+ *
+ * @public
+ */
 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,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"}
+{"version":3,"file":"VideoTile.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,MAAM,EAAqC,MAAM,iBAAiB,CAAC;AAElF,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,gBAAgB,EAAuB,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAczF;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,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;;;;GAIG;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;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iGAAiG;IACjG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA0BD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,WA8HjD,CAAC"}