@azure/communication-react 1.8.1-alpha-202309200012 → 1.8.1-alpha-202309210012

package/dist/dist-esm/acs-ui-common/src/areEqual.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Compare if two types are equal, result type will be true/false
  *

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.8.1-alpha-202309200012';
+module.exports = '1.8.1-alpha-202309210012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.8.1-alpha-202309200012';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.8.1-alpha-202309210012';\n"]}

package/dist/dist-esm/calling-component-bindings/src/hooks/usePropsFor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CameraButton, EndCallButton, ErrorBar, MicrophoneButton, DevicesButton, ParticipantList, ScreenShareButton, VideoGallery } from "../../../react-components/src";
 import { Dialpad } from "../../../react-components/src";
 import { HoldButton } from "../../../react-components/src";

package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } from "../../../react-components/src";
 import { SendBoxSelector } from '../sendBoxSelector';
 import { MessageThreadSelector } from '../messageThreadSelector';

package/dist/dist-esm/communication-react/src/mergedHooks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallingHandlers, GetCallingSelector } from "../../calling-component-bindings/src";
 import { ChatHandlers, GetChatSelector } from "../../chat-component-bindings/src";
 import { ChatClientState } from "../../chat-stateful-client/src";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /** @private */
 export declare type AnnouncerMessageBag = {
     message: string;

package/dist/dist-esm/react-components/src/components/Announcer/LiveMessage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /** @private */
 declare const LiveMessage: (props: {
     message: string;

package/dist/dist-esm/react-components/src/components/Announcer/MessageBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /** @private */
 declare const MessageBlock: (props: {
     message: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @internal
  *  aria props for this hidden component.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VideoStreamOptions } from '../types';
 import { ControlBarButtonProps } from './ControlBarButton';
 import { IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OnRenderAvatarCallback } from '../types';
 import { _CaptionsInfo } from './CaptionsBanner';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OnRenderAvatarCallback } from '../types';
 /**
  * @internal

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _captionsOptions } from './StartCaptionsButton';
 import { SpokenLanguageStrings, CaptionLanguageStrings } from '../types';
 /**

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Target } from '@fluentui/react';
 import { OnRenderAvatarCallback } from '../../types';
 import { MessageThreadStrings } from '../MessageThread';

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { BlockedMessage } from '../../types';

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage } from '../../types';
 import { FileMetadata } from '../FileDownloadCards';

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MentionDisplayOptions } from '../MentionPopover';

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Mention } from '../MentionPopover';
 /**
  * Provides the default implementation for rendering an Mention in a message thread

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _ComplianceBannerStrings } from './types';
 import { ComplianceBannerVariant } from './Utils';
 /** @private */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _ComplianceBannerProps } from './types';
 /**
  * A component that displays banners to notify the user when call recording and

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _ComplianceBannerStrings } from './types';
 import { ComplianceBannerVariant } from './Utils';
 /** @private */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IButtonProps, IRenderFunction, IButtonStyles } from '@fluentui/react';
 /**
  * Strings of {@link ControlBarButton} that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ITooltipHostProps } from '@fluentui/react';
 /**
  * Tooltip that should wrap control bar buttons.

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IButtonStyles, ILinkStyles } from '@fluentui/react';
 import { BaseCustomStyles } from '../../types';
 /**

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';
 /**
  * @beta

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IDropdownOption, IDropdownStyles } from '@fluentui/react';
 /**
  * Strings of {@link DevicePermissionDropdown} that can be overridden.

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';
 /**
  * @beta

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ILinkStyles, IButtonStyles } from '@fluentui/react';
 import { BaseCustomStyles } from '../../types';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';
 import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';
 /**
  * Strings of {@link Dialpad} that can be overridden.

package/dist/dist-esm/react-components/src/components/Drawer/DrawerLightDismiss.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseCustomStyles } from '../../types';
 /**
  * An element that fills the space the DrawerContentContainer does not take up.

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseCustomStyles } from '../../types';
 import { _DrawerMenuItemProps } from './DrawerMenuItem';
 import { _DrawerSurfaceStyles } from './DrawerSurface';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
  * Strings of {@link EndCallButton} that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IMessageBarProps } from '@fluentui/react';
 /**
  * Props for {@link ErrorBar}.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _FileUploadCardsStrings } from './FileUploadCards';
 /**
  * @internal

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @beta
  */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ActiveFileUpload } from './SendBox';
 /**
  * Strings of _FileUploadCards that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @internal
  */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
  *@beta

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OptionsDevice } from './DevicesButton';
 /**
  * @public

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MessageStatus } from "../../../acs-ui-common/src";
 import { BaseCustomStyles } from '../types';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
 import { BlockedMessage } from '../types';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 import { IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';
 import { ControlBarButtonStyles } from './ControlBarButton';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IContextualMenuItem, IStyle, PersonaPresence } from '@fluentui/react';
 import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
 import { ParticipantState } from '../types';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IContextualMenuItem, IContextualMenuItemStyles } from '@fluentui/react';
 import { BaseCustomStyles, OnRenderAvatarCallback, ParticipantListParticipant } from '../types';
 import { ParticipantItemStyles } from './ParticipantItem';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IContextualMenuStyles, IContextualMenuItemStyles } from '@fluentui/react';
 import { ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';
 import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _PictureInPictureInPictureTileProps } from './PictureInPictureInPictureTile';
 /**
  * Strings of {@link _PictureInPictureInPicture} that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
  * Strings of {@link RaiseHandButton} that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
  * Strings of {@link ScreenShareButton} that can be overridden.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @beta
  * Error to be displayed to the user in an error bar above sendbox.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SendBoxErrorBarError } from './SendBoxErrorBar';
 /**
  * @private

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
  * options bag to start captions

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseCustomStyles } from '../types';
 /**
  * Whether the stream is loading or not.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentSlotStyle } from '../types';
 /**
  * Todo: We need to add more types of system messages that we support.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ErrorBarProps } from './ErrorBar';
 /**
  * Strings for {@link _TroubleshootingGuideErrorBar}.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseCustomStyles, CommunicationParticipant } from '../types';
 import { IStyle } from '@fluentui/react';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Strings for UnsupportedBrowser component
  *

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Strings for UnsupportedBrowser component
  *

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @private
  */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Strings for UnsupportedBrowser component
  *

package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { _VideoEffectsItemProps } from './VideoEffectsItem';
 /**
  * 'None' Video Effects Item.

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { _VideoEffectsItemProps } from './VideoEffectsItem';
 /**

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IIconProps, IStyle, ITooltipHostProps } from '@fluentui/react';
 /**
  * Props for {@link _VideoEffectsItem}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LayoutProps } from './Layout';
 /**
  * Props for {@link DefaultLayout}.

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @private
  */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LayoutProps } from './Layout';
 import { LocalVideoTileSize } from '../VideoGallery';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LayoutProps } from './Layout';
 /**
  * Props for {@link FocusedContentLayout}.

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { LayoutProps } from './Layout';
+/**
+ * Props for {@link LargeGalleryLayout}.
+ *
+ * @private
+ */
+export declare type LargeGalleryProps = LayoutProps;
+/**
+ * VideoGallery Layout for when user is in a large meeting and wants to see more participants
+ *
+ * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.
+ *
+ * @private
+ */
+export declare const LargeGalleryLayout: (props: LargeGalleryProps) => JSX.Element;
+//# sourceMappingURL=LargeGalleryLayout.d.ts.map

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

@@ -0,0 +1,126 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React, { useMemo, useRef, useState } from 'react';
+import { isNarrowWidth } from '../utils/responsive';
+/* @conditional-compile-remove(gallery-layouts) */
+import { isShortHeight } from '../utils/responsive';
+import { OverflowGallery } from './OverflowGallery';
+import { GridLayout } from '../GridLayout';
+import { Stack } from '@fluentui/react';
+import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { rootLayoutStyle } from './styles/DefaultLayout.styles';
+import { videoGalleryLayoutGap } from './styles/Layout.styles';
+/* @conditional-compile-remove(gallery-layouts) */
+import { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/* @conditional-compile-remove(gallery-layouts) */
+const REM_TO_PIXEL = 16;
+/* @conditional-compile-remove(gallery-layouts) */
+const LARGE_GALLERY_PARTICIPANT_CAP = 48;
+/**
+ * VideoGallery Layout for when user is in a large meeting and wants to see more participants
+ *
+ * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.
+ *
+ * @private
+ */
+export const LargeGalleryLayout = (props) => {
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(gallery-layouts) */ parentHeight, pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    /* @conditional-compile-remove(gallery-layouts) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    const maxStreamsTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return parentWidth && parentHeight
+            ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)
+            : maxRemoteVideoStreams;
+        return maxRemoteVideoStreams;
+    };
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
+    const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
+        remoteParticipants,
+        localParticipant,
+        dominantSpeakers,
+        maxRemoteVideoStreams: maxStreamsTrampoline(),
+        isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'largeGallery'
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = useState([]);
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    if (localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    const overflowGallery = useMemo(() => {
+        if (overflowGalleryTiles.length === 0) {
+            return null;
+        }
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, 
+            /* @conditional-compile-remove(gallery-layouts) */
+            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            } }));
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(gallery-layouts) */ isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        setIndexesToRender,
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+    ]);
+    return (React.createElement(Stack
+    /* @conditional-compile-remove(vertical-gallery) */
+    , { 
+        /* @conditional-compile-remove(vertical-gallery) */
+        horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
+        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        overflowGalleryTrampoline(overflowGallery, 
+        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+};
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return galleryPosition !== 'HorizontalTop' ? gallery : React.createElement(React.Fragment, null);
+    return gallery;
+};
+/* @conditional-compile-remove(gallery-layouts) */
+const calculateMaxTilesInLargeGrid = (parentWidth, parentHeight) => {
+    const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));
+    const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));
+    return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP
+        ? xAxisTiles * yAxisTiles
+        : LARGE_GALLERY_PARTICIPANT_CAP;
+};
+//# sourceMappingURL=LargeGalleryLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n/* @conditional-compile-remove(gallery-layouts) */\nconst REM_TO_PIXEL = 16;\n/* @conditional-compile-remove(gallery-layouts) */\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(gallery-layouts) */ parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  /* @conditional-compile-remove(gallery-layouts) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    /* @conditional-compile-remove(gallery-layouts) */\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'largeGallery'\n  });\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(gallery-layouts) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(gallery-layouts) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'VerticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (\n          overflowGallery\n        ) : (\n          <></>\n        )\n      }\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(\n        overflowGallery,\n        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition\n      )}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): JSX.Element | null => {\n  /* @conditional-compile-remove(gallery-layouts) */\n  return galleryPosition !== 'HorizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\n/* @conditional-compile-remove(gallery-layouts) */\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}