@azure/communication-react 1.12.1-alpha-202402010012 → 1.13.0-alpha-202402020012

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;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,EACT,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AACpC,gDAAgD;AAChD,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;AAsLpC,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  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\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(reaction) */\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite\n} from '../../react-components/src';\n/* @conditional-compile-remove(spotlight) */\nexport type { Spotlight } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { ImageGalleryProps, ImageGalleryImageProps, ImageGalleryStrings } 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 {\n  DialpadMode,\n  DialpadProps,\n  DialpadStrings,\n  DialpadStyles,\n  DtmfTone,\n  LongPressTrigger\n} 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 { AttachmentMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ChatAttachmentType, AttachmentDownloadResult, InlineImageMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { InlineImageOptions, InlineImage } 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 { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssues } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { CallSurveyImprovementSuggestions } 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,EACT,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AACpC,gDAAgD;AAChD,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;AAsLpC,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  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\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  VideoTileContextualMenuProps,\n  VideoTileDrawerMenuProps\n} from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(reaction) */\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite\n} from '../../react-components/src';\n/* @conditional-compile-remove(spotlight) */\nexport type { Spotlight } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { ImageGalleryProps, ImageGalleryImageProps, ImageGalleryStrings } 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 {\n  DialpadMode,\n  DialpadProps,\n  DialpadStrings,\n  DialpadStyles,\n  DtmfTone,\n  LongPressTrigger\n} 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 { AttachmentMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ChatAttachmentType, AttachmentDownloadResult, InlineImageMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { InlineImageOptions, InlineImage } 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(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 { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssues } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { CallSurveyImprovementSuggestions } from '../../react-components/src';\n"]}

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

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 import { Layer, Stack } from '@fluentui/react';
 import React, { useMemo } from 'react';
-/* @conditional-compile-remove(pinned-participants) */
 import { useCallback } from 'react';
 import { _DrawerMenu } from './Drawer';
 import { StreamMedia } from './StreamMedia';
@@ -56,7 +55,6 @@ export const _RemoteVideoTile = React.memo((props) => {
     const contextualMenuProps = useVideoTileContextualMenuProps({
         remoteParticipant,
         view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
-        /* @conditional-compile-remove(pinned-participants) */
         strings: Object.assign({}, props.strings),
         isPinned,
         onPinParticipant,
@@ -70,10 +68,12 @@ export const _RemoteVideoTile = React.memo((props) => {
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight
     });
     const videoTileContextualMenuProps = useMemo(() => {
-        if (menuKind !== 'contextual') {
+        if (menuKind !== 'contextual' || !contextualMenuProps) {
             return {};
         }
-        return videoTileContextualMenuPropsTrampoline(contextualMenuProps);
+        return {
+            contextualMenu: contextualMenuProps
+        };
     }, [contextualMenuProps, menuKind]);
     const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';
     const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
@@ -86,7 +86,6 @@ export const _RemoteVideoTile = React.memo((props) => {
         }
         return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    /* @conditional-compile-remove(pinned-participants) */
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
             setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
@@ -104,13 +103,7 @@ export const _RemoteVideoTile = React.memo((props) => {
     };
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
-    return (React.createElement(Stack
-    /* @conditional-compile-remove(pinned-participants) */
-    , { 
-        /* @conditional-compile-remove(pinned-participants) */
-        tabIndex: menuKind === 'drawer' ? 0 : undefined, 
-        /* @conditional-compile-remove(pinned-participants) */
-        onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
+    return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
             /* @conditional-compile-remove(raise-hand) */
             raisedHand: remoteParticipant.raisedHand, 
@@ -118,11 +111,7 @@ export const _RemoteVideoTile = React.memo((props) => {
             reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participantState }, videoTileContextualMenuProps, { 
-            /* @conditional-compile-remove(pinned-participants) */
-            isPinned: props.isPinned, 
-            /* @conditional-compile-remove(pinned-participants) */
-            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, 
             /* @conditional-compile-remove(reaction) */
@@ -131,17 +120,6 @@ export const _RemoteVideoTile = React.memo((props) => {
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
-const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
-    if (!contextualMenuProps) {
-        return {};
-    }
-    /* @conditional-compile-remove(pinned-participants) */
-    return {
-        contextualMenu: contextualMenuProps
-    };
-    return {};
-};
-/* @conditional-compile-remove(pinned-participants) */
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    strings?: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userId: string) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userId: string) => void;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    /* @conditional-compile-remove(reaction) */ reactionResources?: ReactionResources;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      /* @conditional-compile-remove(reaction) */ reactionResources\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual') {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    /* @conditional-compile-remove(pinned-participants) */\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    let displayName = remoteParticipant.displayName || strings?.displayNamePlaceholder;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string | undefined => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    displayName = formatDisplayName();\n    return (\n      <Stack\n        /* @conditional-compile-remove(pinned-participants) */\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        /* @conditional-compile-remove(pinned-participants) */\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={remoteParticipant.displayName ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={remoteParticipant.raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={remoteParticipant.reaction}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={props.isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={remoteParticipant.displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    strings?: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userId: string) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userId: string) => void;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    /* @conditional-compile-remove(reaction) */ reactionResources?: ReactionResources;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      /* @conditional-compile-remove(reaction) */ reactionResources\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    let displayName = remoteParticipant.displayName || strings?.displayNamePlaceholder;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string | undefined => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    displayName = formatDisplayName();\n    return (\n      <Stack\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={remoteParticipant.displayName ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={remoteParticipant.raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={remoteParticipant.reaction}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          isPinned={props.isPinned}\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={remoteParticipant.displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}

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

@@ -38,7 +38,7 @@ export const DefaultLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        pinnedParticipantUserIds,
         /* @conditional-compile-remove(gallery-layouts) */ layout: 'default',
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });

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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\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    parentWidth\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"]}
+{"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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'default',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\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    parentWidth\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

@@ -42,7 +42,7 @@ export const FloatingLocalVideoLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        pinnedParticipantUserIds,
         /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo',
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });

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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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={!!localVideoComponent}\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        parentWidth={parentWidth}\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    parentWidth,\n    localVideoComponent\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    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\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={!!localVideoComponent}\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        parentWidth={parentWidth}\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    parentWidth,\n    localVideoComponent\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/LargeGalleryLayout.js

@@ -51,7 +51,7 @@ export const LargeGalleryLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        pinnedParticipantUserIds,
         /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
     });
     let activeVideoStreams = 0;

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

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

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

@@ -64,7 +64,6 @@ export const OverflowGallery = (props) => {
         return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
     }
     SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;
-    /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport {\n  verticalGalleryContainerStyle,\n  verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n *\n * @private\n */\nexport const OverflowGallery = (props: {\n  shouldFloatLocalVideo?: boolean;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  isNarrow?: boolean;\n  /* @conditional-compile-remove(vertical-gallery) */\n  isShort?: boolean;\n  overflowGalleryElements?: JSX.Element[];\n  horizontalGalleryStyles?: HorizontalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n  parentWidth?: number;\n}): JSX.Element => {\n  const {\n    shouldFloatLocalVideo = false,\n    onFetchTilesToRender,\n    isNarrow = false,\n    /* @conditional-compile-remove(vertical-gallery) */\n    isShort = false,\n    overflowGalleryElements,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles,\n    onChildrenPerPageChange,\n    parentWidth\n  } = props;\n\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n    }\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [\n    shouldFloatLocalVideo,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition\n  ]);\n\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n    }\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles\n  ]);\n\n  const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n    if (isNarrow && parentWidth) {\n      return {\n        width: shouldFloatLocalVideo\n          ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`\n          : `${_convertPxToRem(parentWidth) - 1}rem`\n      };\n    }\n    return undefined;\n  }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === 'verticalRight') {\n    return (\n      <ResponsiveVerticalGallery\n        key=\"responsive-vertical-gallery\"\n        containerStyles={containerStyles}\n        verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n        controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n        gapHeightRem={HORIZONTAL_GALLERY_GAP}\n        isShort={isShort}\n        onFetchTilesToRender={onFetchTilesToRender}\n        onChildrenPerPageChange={onChildrenPerPageChange}\n      >\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>\n    );\n  }\n\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\n\n  /* @conditional-compile-remove(pinned-participants) */\n  if (isNarrow) {\n    // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n    // participant tiles are visible\n    onChildrenPerPageChange?.(3);\n\n    return (\n      <ScrollableHorizontalGallery\n        horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}\n        onFetchTilesToRender={onFetchTilesToRender}\n        key=\"scrollable-horizontal-gallery\"\n        containerStyles={scrollableHorizontalGalleryContainerStyles}\n      />\n    );\n  }\n\n  return (\n    <ResponsiveHorizontalGallery\n      key=\"responsive-horizontal-gallery\"\n      containerStyles={containerStyles}\n      onFetchTilesToRender={onFetchTilesToRender}\n      horizontalGalleryStyles={galleryStyles}\n      buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n      gapWidthRem={HORIZONTAL_GALLERY_GAP}\n      onChildrenPerPageChange={onChildrenPerPageChange}\n    >\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>\n  );\n};\n"]}
+{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryPosition } from '../VideoGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _convertPxToRem } from '@internal/acs-ui-common';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport {\n  verticalGalleryContainerStyle,\n  verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n *\n * @private\n */\nexport const OverflowGallery = (props: {\n  shouldFloatLocalVideo?: boolean;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  isNarrow?: boolean;\n  /* @conditional-compile-remove(vertical-gallery) */\n  isShort?: boolean;\n  overflowGalleryElements?: JSX.Element[];\n  horizontalGalleryStyles?: HorizontalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n  parentWidth?: number;\n}): JSX.Element => {\n  const {\n    shouldFloatLocalVideo = false,\n    onFetchTilesToRender,\n    isNarrow = false,\n    /* @conditional-compile-remove(vertical-gallery) */\n    isShort = false,\n    overflowGalleryElements,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles,\n    onChildrenPerPageChange,\n    parentWidth\n  } = props;\n\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n    }\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [\n    shouldFloatLocalVideo,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition\n  ]);\n\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'verticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n    }\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    horizontalGalleryStyles,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles\n  ]);\n\n  const scrollableHorizontalGalleryContainerStyles = useMemo(() => {\n    if (isNarrow && parentWidth) {\n      return {\n        width: shouldFloatLocalVideo\n          ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`\n          : `${_convertPxToRem(parentWidth) - 1}rem`\n      };\n    }\n    return undefined;\n  }, [isNarrow, parentWidth, shouldFloatLocalVideo]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === 'verticalRight') {\n    return (\n      <ResponsiveVerticalGallery\n        key=\"responsive-vertical-gallery\"\n        containerStyles={containerStyles}\n        verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n        controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n        gapHeightRem={HORIZONTAL_GALLERY_GAP}\n        isShort={isShort}\n        onFetchTilesToRender={onFetchTilesToRender}\n        onChildrenPerPageChange={onChildrenPerPageChange}\n      >\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>\n    );\n  }\n\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;\n\n  if (isNarrow) {\n    // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n    // participant tiles are visible\n    onChildrenPerPageChange?.(3);\n\n    return (\n      <ScrollableHorizontalGallery\n        horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}\n        onFetchTilesToRender={onFetchTilesToRender}\n        key=\"scrollable-horizontal-gallery\"\n        containerStyles={scrollableHorizontalGalleryContainerStyles}\n      />\n    );\n  }\n\n  return (\n    <ResponsiveHorizontalGallery\n      key=\"responsive-horizontal-gallery\"\n      containerStyles={containerStyles}\n      onFetchTilesToRender={onFetchTilesToRender}\n      horizontalGalleryStyles={galleryStyles}\n      buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n      gapWidthRem={HORIZONTAL_GALLERY_GAP}\n      onChildrenPerPageChange={onChildrenPerPageChange}\n    >\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>\n  );\n};\n"]}

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

@@ -40,7 +40,7 @@ export const SpeakerVideoLayout = (props) => {
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+        pinnedParticipantUserIds,
         /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
     });
     let activeVideoStreams = 0;