@azure/communication-react 1.7.1-alpha-202308170011 → 1.7.1-alpha-202308172328

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

@@ -25,11 +25,13 @@ export { useTeamsCallAgent, useTeamsCall, createDefaultTeamsCallingHandlers } fr
 export type { TeamsCallingHandlers } from '../../calling-component-bindings/src';
 export type { ScreenShareButtonSelector, CameraButtonSelector, VideoGallerySelector, DevicesButtonSelector, EmptySelector, ErrorBarSelector as CallErrorBarSelector, ParticipantListSelector, MicrophoneButtonSelector, ParticipantsButtonSelector, CreateDefaultCallingHandlers } from '../../calling-component-bindings/src';
 export type { HoldButtonSelector } from '../../calling-component-bindings/src';
+export type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';
 export { ChatClientProvider, ChatThreadClientProvider, useChatClient, useChatThreadClient, getChatSelector, createDefaultChatHandlers } from '../../chat-component-bindings/src';
 export type { MessageThreadSelector, TypingIndicatorSelector, ChatParticipantListSelector, SendBoxSelector, ErrorBarSelector as ChatErrorBarSelector } from '../../chat-component-bindings/src';
 export { _IdentifierProvider, CameraButton, ControlBar, ControlBarButton, DevicesButton, EndCallButton, ErrorBar, GridLayout, LocalizationProvider, MessageStatusIndicator, MessageThread, MicrophoneButton, ParticipantItem, ParticipantList, ParticipantsButton, ScreenShareButton, SendBox, StreamMedia, TypingIndicator, VideoGallery, VideoTile } from '../../react-components/src';
 export { ImageGallery } from '../../react-components/src';
 export { HoldButton } from '../../react-components/src';
+export { RaiseHandButton } from '../../react-components/src';
 export { Dialpad } from '../../react-components/src';
 export { CameraAndMicrophoneSitePermissions, MicrophoneSitePermissions, CameraSitePermissions } from '../../react-components/src';
 export type { CameraAndMicrophoneSitePermissionsStrings, CameraAndMicrophoneSitePermissionsProps, CameraSitePermissionsStrings, CameraSitePermissionsProps, CommonSitePermissionsProps, SitePermissionsStrings, SitePermissionsStyles, MicrophoneSitePermissionsStrings, MicrophoneSitePermissionsProps } from '../../react-components/src';

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

@@ -26,6 +26,8 @@ export { _IdentifierProvider, CameraButton, ControlBar, ControlBarButton, Device
 export { ImageGallery } from '../../react-components/src';
 /* @conditional-compile-remove(PSTN-calls) */
 export { HoldButton } from '../../react-components/src';
+/* @conditional-compile-remove(raise-hand) */
+export { RaiseHandButton } from '../../react-components/src';
 /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
 export { Dialpad } from '../../react-components/src';
 /* @conditional-compile-remove(call-readiness) */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAmCzG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,sCAAsC,CAAC;AAE9C,yDAAyD;AACzD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iCAAiC,EAClC,MAAM,sCAAsC,CAAC;AAoB9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EAC1B,MAAM,mCAAmC,CAAC;AAU3C,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACV,MAAM,4BAA4B,CAAC;AACpC,uEAAuE;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,0CAA0C,CAAC,6CAA6C;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,iDAAiD;AACjD,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAuKpC,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa1E,cAAc,yCAAyC,CAAC;AACxD,cAAc,eAAe,CAAC;AAE9B,sDAAsD;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,sDAAsD;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAGvE,sDAAsD;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { VideoBackgroundEffectsDependency, CallingHandlersOptions } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsOptions } from '../../calling-component-bindings/src';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonSelector } from '../../calling-component-bindings/src';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile\n} from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport { ImageGallery } from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from '../../react-components/src';\n\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport { Dialpad } from '../../react-components/src';\n\n/* @conditional-compile-remove(call-readiness) */\nexport {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from '../../react-components/src';\n\n/* @conditional-compile-remove(mention) */\nexport type {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode\n} from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ImageGalleryProps, ImageGalleryImageProps } from '../../react-components/src';\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type {\n  BaseFileMetadata,\n  FileMetadataAttachmentType,\n  AttachmentDownloadResult,\n  FileSharingMetadata,\n  ImageFileMetadata\n} from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} from '../../react-components/src';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { OverflowGalleryPosition } from '../../react-components/src';\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\nexport type { LocalVideoTileSize } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\n/* @conditional-compile-remove(one-to-n-calling) */\nexport type { DeclarativeCallAgent } from '../../calling-stateful-client/src';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowser } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowserVersion } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedOperatingSystem } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsAvailableLanguageStrings } from '../../react-components/src';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAmCzG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,sCAAsC,CAAC;AAE9C,yDAAyD;AACzD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iCAAiC,EAClC,MAAM,sCAAsC,CAAC;AAuB9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EAC1B,MAAM,mCAAmC,CAAC;AAU3C,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACV,MAAM,4BAA4B,CAAC;AACpC,uEAAuE;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,6CAA6C;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,0CAA0C,CAAC,6CAA6C;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,iDAAiD;AACjD,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAuKpC,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa1E,cAAc,yCAAyC,CAAC;AACxD,cAAc,eAAe,CAAC;AAE9B,sDAAsD;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,sDAAsD;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAGvE,sDAAsD;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { VideoBackgroundEffectsDependency, CallingHandlersOptions } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsOptions } from '../../calling-component-bindings/src';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonSelector } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile\n} from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport { ImageGallery } from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from '../../react-components/src';\n\n/* @conditional-compile-remove(raise-hand) */\nexport { RaiseHandButton } from '../../react-components/src';\n\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport { Dialpad } from '../../react-components/src';\n\n/* @conditional-compile-remove(call-readiness) */\nexport {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} from '../../react-components/src';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from '../../react-components/src';\n\n/* @conditional-compile-remove(mention) */\nexport type {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode\n} from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ImageGalleryProps, ImageGalleryImageProps } from '../../react-components/src';\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type {\n  BaseFileMetadata,\n  FileMetadataAttachmentType,\n  AttachmentDownloadResult,\n  FileSharingMetadata,\n  ImageFileMetadata\n} from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} from '../../react-components/src';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { OverflowGalleryPosition } from '../../react-components/src';\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\nexport type { LocalVideoTileSize } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\n/* @conditional-compile-remove(one-to-n-calling) */\nexport type { DeclarativeCallAgent } from '../../calling-stateful-client/src';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowser } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowserVersion } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedOperatingSystem } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsAvailableLanguageStrings } from '../../react-components/src';\n"]}

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

@@ -29,25 +29,56 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
         (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
         (
         /* @conditional-compile-remove(raise-hand) */ callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
-        ? () => (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-            /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
-                    alignItems: 'center',
-                    padding: '0.2rem',
-                    backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
-                    borderRadius: '1rem'
-                } },
-                callingParticipant.raisedHand.order && (React.createElement(Stack.Item, null,
-                    React.createElement(Text, null, callingParticipant.raisedHand.order))),
-                React.createElement(Stack.Item, null,
-                    React.createElement(RaisedHandIcon, null)))),
-            callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel })),
-            callingParticipant.isMuted && (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel }))))
+        ? () => {
+            var _a;
+            return (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
+                /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                        alignItems: 'center',
+                        padding: '0.2rem',
+                        backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
+                        borderRadius: '1rem'
+                    } },
+                    callingParticipant.raisedHand.raisedHandOrderPosition && (React.createElement(Stack.Item, null,
+                        React.createElement(Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition))),
+                    React.createElement(Stack.Item, null,
+                        React.createElement(RaisedHandIcon, null)))),
+                callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel })),
+                callingParticipant.isMuted && (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel }))));
+        }
         : () => null;
     return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
 };
+/**
+ * Sort participants by raised hand order position
+ */
+const sortParticipants = (participants) => {
+    /* @conditional-compile-remove(raise-hand) */
+    const isParticipantListCallParticipant = function (participant) {
+        return 'raisedHand' in participant;
+    };
+    /* @conditional-compile-remove(raise-hand) */
+    participants.sort((a, b) => {
+        if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {
+            return 0;
+        }
+        const callA = a;
+        const callB = b;
+        if (callA.raisedHand && callB.raisedHand) {
+            return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;
+        }
+        else if (callA.raisedHand) {
+            return -1;
+        }
+        else if (callB.raisedHand) {
+            return 1;
+        }
+        return 0;
+    });
+    return participants;
+};
 const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
         return [...participants];
@@ -83,6 +114,7 @@ export const ParticipantList = (props) => {
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
+    sortParticipants(displayedParticipants);
     const createParticipantMenuItems = useCallback((participant) => {
         var _a, _b;
         let menuItems = [];

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} from '@fluentui/react';\n/* @conditional-compile-remove(total-participant-count) */\nimport { Text } from '@fluentui/react';\n/* @conditional-compile-remove(raise-hand) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing ||\n    callingParticipant?.isMuted ||\n    /* @conditional-compile-remove(raise-hand) */ callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {\n              /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (\n                <Stack\n                  horizontal={true}\n                  tokens={{ childrenGap: '0.2rem' }}\n                  style={{\n                    alignItems: 'center',\n                    padding: '0.2rem',\n                    backgroundColor: theme?.palette.neutralLighter,\n                    borderRadius: '1rem'\n                  }}\n                >\n                  {callingParticipant.raisedHand.order && (\n                    <Stack.Item>\n                      <Text>{callingParticipant.raisedHand.order}</Text>\n                    </Stack.Item>\n                  )}\n                  <Stack.Item>\n                    <RaisedHandIcon />\n                  </Stack.Item>\n                </Stack>\n              )\n            }\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={participant.displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  /* @conditional-compile-remove(raise-hand) */\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\n      const participantIsRemovable = participant.isRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: participantItemStrings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      /* @conditional-compile-remove(raise-hand) */\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              /* @conditional-compile-remove(raise-hand) */\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} from '@fluentui/react';\n/* @conditional-compile-remove(total-participant-count) */\nimport { Text } from '@fluentui/react';\n/* @conditional-compile-remove(raise-hand) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing ||\n    callingParticipant?.isMuted ||\n    /* @conditional-compile-remove(raise-hand) */ callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {\n              /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (\n                <Stack\n                  horizontal={true}\n                  tokens={{ childrenGap: '0.2rem' }}\n                  style={{\n                    alignItems: 'center',\n                    padding: '0.2rem',\n                    backgroundColor: theme?.palette.neutralLighter,\n                    borderRadius: '1rem'\n                  }}\n                >\n                  {callingParticipant.raisedHand.raisedHandOrderPosition && (\n                    <Stack.Item>\n                      <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                    </Stack.Item>\n                  )}\n                  <Stack.Item>\n                    <RaisedHandIcon />\n                  </Stack.Item>\n                </Stack>\n              )\n            }\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={participant.displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  /* @conditional-compile-remove(raise-hand) */\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n\n  /* @conditional-compile-remove(raise-hand) */\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  /* @conditional-compile-remove(raise-hand) */\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  sortParticipants(displayedParticipants);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\n      const participantIsRemovable = participant.isRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: participantItemStrings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      /* @conditional-compile-remove(raise-hand) */\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              /* @conditional-compile-remove(raise-hand) */\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -37,7 +37,8 @@ export const DefaultLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -90,7 +91,14 @@ export const DefaultLayout = (props) => {
     , { 
         /* @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)),
-        overflowGallery));
+        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;
 };
 //# sourceMappingURL=DefaultLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): 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(vertical-gallery) */\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\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(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\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  });\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(vertical-gallery) */\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(pinned-participants) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ 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      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGallery}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): 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(vertical-gallery) */\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\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(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\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: 'default'\n  });\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(vertical-gallery) */\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(pinned-participants) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ 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"]}

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

@@ -41,7 +41,8 @@ export const FloatingLocalVideoLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /* @conditional-compile-remove(click-to-call) */\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\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  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\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  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\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 &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@conditional-compile-remove(click-to-call) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(\n              theme,\n              localVideoSizeRem,\n              !!screenShareComponent,\n              /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition\n            )\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\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        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\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 styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'VerticalRight'}\n        styles={innerLayoutStyle}\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    </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"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /* @conditional-compile-remove(click-to-call) */\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\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  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'\n  });\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  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\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 &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    /* @conditional-compile-remove(vertical-gallery) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    /*@conditional-compile-remove(click-to-call) */\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(\n              theme,\n              localVideoSizeRem,\n              !!screenShareComponent,\n              /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition\n            )\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\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        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    screenShareComponent,\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 styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        /* @conditional-compile-remove(vertical-gallery) */\n        horizontal={overflowGalleryPosition === 'VerticalRight'}\n        styles={innerLayoutStyle}\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    </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"]}

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

@@ -0,0 +1,28 @@
+import { LocalVideoTileSize } from '../VideoGallery';
+import { LayoutProps } from './Layout';
+/**
+ * Props for {@link FloatingLocalVideoLayout}.
+ *
+ * @private
+ */
+export interface SpeakerVideoLayoutProps extends LayoutProps {
+    /**
+     * Whether to display the local video camera switcher button
+     */
+    showCameraSwitcherInLocalPreview?: boolean;
+    /**
+     * Height of parent element
+     */
+    parentHeight?: number;
+    /**
+     * Local video tile mode
+     */
+    localVideoTileSize?: LocalVideoTileSize;
+}
+/**
+ * Layout for the gallery mode to highlight the current dominant speaker
+ *
+ * @private
+ */
+export declare const SpeakerVideoLayout: (props: SpeakerVideoLayoutProps) => JSX.Element;
+//# sourceMappingURL=SpeakerVideoLayout.d.ts.map