@azure/communication-react 1.16.0-alpha-202404180013 → 1.16.0-alpha-202404190012

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';\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(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n/* @conditional-compile-remove(reaction) */\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\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    streamId?: number;\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?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight?: number;\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      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      /* @conditional-compile-remove(reaction) */ reactionResources,\n      streamId\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        streamId\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId,\n        streamId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: 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      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\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 = props.strings?.attendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    /* @conditional-compile-remove(reaction) */\n    const reactionOverlay = (\n      <MeetingReactionOverlay\n        overlayMode=\"grid-tiles\"\n        reaction={remoteParticipant.reaction}\n        reactionResources={reactionResources!}\n      />\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          raisedHand={remoteParticipant.raisedHand}\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          overlay={reactionOverlay}\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"]}
+{"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';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\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    streamId?: number;\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?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight?: number;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    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      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      reactionResources,\n      streamId\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        streamId\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId,\n        streamId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: 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      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\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 = props.strings?.attendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    const reactionOverlay = (\n      <MeetingReactionOverlay\n        overlayMode=\"grid-tiles\"\n        reaction={remoteParticipant.reaction}\n        reactionResources={reactionResources!}\n      />\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          raisedHand={remoteParticipant.raisedHand}\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          overlay={reactionOverlay}\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/ParticipantVideoTileOverlay.js

@@ -1,16 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
 import React, { useCallback, useEffect, useState } from 'react';
-/* @conditional-compile-remove(reaction) */
 import { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';
-/* @conditional-compile-remove(reaction) */
 import { Stack, mergeStyles } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
 import { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';
-/* @conditional-compile-remove(reaction) */
 import { REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX, REACTION_NUMBER_OF_ANIMATION_FRAMES, REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getReceivedUnixTime } from './utils/reactionUtils';
-/* @conditional-compile-remove(reaction) */
 /**
  * Reaction overlay component for Grid
  *

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantVideoTileOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX,\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component for Grid\n *\n * Can be used with {@link MeetingReactionOverlay}.\n *\n * @internal\n */\nexport const ParticipantVideoTileOverlay = React.memo(\n  (props: { reaction?: Reaction; reactionResources: ReactionResources; emojiSize?: number }) => {\n    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;\n    const [isValidImageSource, setIsValidImageSource] = useState<boolean>(false);\n\n    const backgroundImageUrl =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiResource(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const frameCount =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiFrameCount(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const currentUnixTimeStamp = Date.now();\n    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;\n    const canRenderReaction =\n      (receivedUnixTimestamp\n        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS\n        : false) && backgroundImageUrl !== undefined;\n\n    useEffect(() => {\n      if (!backgroundImageUrl || backgroundImageUrl.length === 0) {\n        return;\n      }\n\n      fetch(`${backgroundImageUrl}`)\n        .then((res) => {\n          setIsValidImageSource(res.ok);\n        })\n        .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));\n\n      return () => setIsValidImageSource(false);\n    }, [backgroundImageUrl]);\n\n    const spriteImageUrl = backgroundImageUrl ?? undefined;\n    const reactionContainerStyles = useCallback(\n      () =>\n        reactionRenderingStyle({\n          spriteImageUrl: spriteImageUrl ?? '',\n          emojiSize: emojiSize,\n          frameCount: frameCount ?? REACTION_NUMBER_OF_ANIMATION_FRAMES,\n          rawFrameSize: REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX\n        }),\n      [spriteImageUrl, emojiSize, frameCount]\n    );\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent',\n          borderRadius: '0.25rem'\n        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div\n            style={{\n              minHeight: `${emojiSize}px`,\n              height: `${emojiSize}px`,\n              width: `${emojiSize}px`\n            }}\n          >\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}
+{"version":3,"file":"ParticipantVideoTileOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Reaction, ReactionResources } from '../../types';\nimport { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';\nimport { Stack, mergeStyles } from '@fluentui/react';\nimport { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';\nimport {\n  REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX,\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/**\n * Reaction overlay component for Grid\n *\n * Can be used with {@link MeetingReactionOverlay}.\n *\n * @internal\n */\nexport const ParticipantVideoTileOverlay = React.memo(\n  (props: { reaction?: Reaction; reactionResources: ReactionResources; emojiSize?: number }) => {\n    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;\n    const [isValidImageSource, setIsValidImageSource] = useState<boolean>(false);\n\n    const backgroundImageUrl =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiResource(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const frameCount =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiFrameCount(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const currentUnixTimeStamp = Date.now();\n    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;\n    const canRenderReaction =\n      (receivedUnixTimestamp\n        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS\n        : false) && backgroundImageUrl !== undefined;\n\n    useEffect(() => {\n      if (!backgroundImageUrl || backgroundImageUrl.length === 0) {\n        return;\n      }\n\n      fetch(`${backgroundImageUrl}`)\n        .then((res) => {\n          setIsValidImageSource(res.ok);\n        })\n        .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));\n\n      return () => setIsValidImageSource(false);\n    }, [backgroundImageUrl]);\n\n    const spriteImageUrl = backgroundImageUrl ?? undefined;\n    const reactionContainerStyles = useCallback(\n      () =>\n        reactionRenderingStyle({\n          spriteImageUrl: spriteImageUrl ?? '',\n          emojiSize: emojiSize,\n          frameCount: frameCount ?? REACTION_NUMBER_OF_ANIMATION_FRAMES,\n          rawFrameSize: REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX\n        }),\n      [spriteImageUrl, emojiSize, frameCount]\n    );\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent',\n          borderRadius: '0.25rem'\n        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div\n            style={{\n              minHeight: `${emojiSize}px`,\n              height: `${emojiSize}px`,\n              width: `${emojiSize}px`\n            }}\n          >\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}

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

@@ -1,24 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-/* @conditional-compile-remove(reaction) */
 import { Stack, mergeStyles } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
 import { videoContainerStyles } from '../styles/VideoTile.styles';
-/* @conditional-compile-remove(reaction) */
 import { getEmojiResource } from './utils/videoGalleryLayoutUtils';
-/* @conditional-compile-remove(reaction) */
 import { generateStartPositionWave, getReactionMovementStyle, getReactionStyleBucket, moveAnimationStyles, opacityAnimationStyles, reactionOverlayStyle, spriteAnimationStyles } from '../styles/ReactionOverlay.style';
-/* @conditional-compile-remove(reaction) */
 import { REACTION_NUMBER_OF_ANIMATION_FRAMES, REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getCombinedKey, getReceivedUnixTime } from './utils/reactionUtils';
-/* @conditional-compile-remove(reaction) */
 const MAX_NUMBER_OF_EMOJIS = 50;
-/* @conditional-compile-remove(reaction) */
 const NUMBER_OF_EMOJI_TYPES = 5;
-/* @conditional-compile-remove(reaction) */
 const REACTION_POSITION_ARRAY_SIZE = 55;
-/* @conditional-compile-remove(reaction) */
 /**
  * The overlay responsible for rendering multiple reactions all at once in presentation mode
  * @internal

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport {\n  IReactionStyleBucket,\n  generateStartPositionWave,\n  getReactionMovementStyle,\n  getReactionStyleBucket,\n  moveAnimationStyles,\n  opacityAnimationStyles,\n  reactionOverlayStyle,\n  spriteAnimationStyles\n} from '../styles/ReactionOverlay.style';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getCombinedKey,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\n/* @conditional-compile-remove(reaction) */\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\n/* @conditional-compile-remove(reaction) */\nconst MAX_NUMBER_OF_EMOJIS = 50;\n/* @conditional-compile-remove(reaction) */\nconst NUMBER_OF_EMOJI_TYPES = 5;\n/* @conditional-compile-remove(reaction) */\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/* @conditional-compile-remove(reaction) */\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo(\n  (props: {\n    reactionResources: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    hostDivHeight?: number;\n    hostDivWidth?: number;\n  }) => {\n    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;\n\n    // Reactions that are currently being animated\n    const [visibleReactions, setVisibleReactions] = useState<VisibleReaction[]>([]);\n\n    // Dictionary of userId to a reaction status. This is used to track the latest received reaction\n    // per user to avoid animating the same reaction multiple times and to limit the number of\n    // active reactions of a certain type.\n    const latestReceivedReaction = useRef<Record<string, ReceivedReaction>>({});\n\n    // Track the number of active reactions of each type to limit the number of active reactions\n    // of a certain type.\n    const activeTypeCount = useRef<Record<string, number>>({\n      like: 0,\n      heart: 0,\n      laugh: 0,\n      applause: 0,\n      surprised: 0\n    });\n\n    // Used to track the total number of reactions ever played. This is a helper variable\n    // to calculate the reaction movement index (i.e. the .left position of the reaction)\n    const visibleReactionPosition = useRef<boolean[]>(new Array<boolean>(REACTION_POSITION_ARRAY_SIZE).fill(false));\n\n    const remoteParticipantReactions: Reaction[] = useMemo(\n      () =>\n        remoteParticipants\n          ?.map((remoteParticipant) => remoteParticipant.reaction)\n          .filter((reaction): reaction is Reaction => !!reaction) ?? [],\n      [remoteParticipants]\n    );\n\n    const findFirstEmptyPosition = (): number => {\n      return visibleReactionPosition.current.findIndex((item) => item === false);\n    };\n\n    const updateVisibleReactions = useCallback(\n      (reaction: Reaction, userId: string): void => {\n        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n\n        const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n        if (alreadyHandled) {\n          return;\n        }\n\n        const activeCount = activeTypeCount.current[reaction.reactionType];\n\n        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {\n          latestReceivedReaction.current[userId] = {\n            id: combinedKey,\n            status: 'ignored'\n          };\n          return;\n        }\n\n        activeTypeCount.current[reaction.reactionType] += 1;\n        latestReceivedReaction.current[userId] = {\n          id: combinedKey,\n          status: 'animating'\n        };\n        const reactionMovementIndex = findFirstEmptyPosition();\n        visibleReactionPosition.current[reactionMovementIndex] = true;\n        setVisibleReactions([\n          ...visibleReactions,\n          {\n            reaction: reaction,\n            id: combinedKey,\n            reactionMovementIndex: reactionMovementIndex,\n            styleBucket: getReactionStyleBucket()\n          }\n        ]);\n        return;\n      },\n      [activeTypeCount, visibleReactions]\n    );\n\n    const removeVisibleReaction = (reactionType: string, id: string, index: number): void => {\n      setVisibleReactions(visibleReactions.filter((reaction) => reaction.id !== id));\n      visibleReactionPosition.current[index] = false;\n      activeTypeCount.current[reactionType] -= 1;\n      Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {\n        if (reaction.id === id) {\n          latestReceivedReaction.current[userId].status = 'completedAnimating';\n        }\n      });\n    };\n\n    // Update visible reactions when local participant sends a reaction\n    useEffect(() => {\n      if (localParticipant?.reaction) {\n        updateVisibleReactions(localParticipant.reaction, localParticipant.userId);\n      }\n    }, [localParticipant, updateVisibleReactions]);\n\n    // Update visible reactions when remote participants send a reaction\n    useEffect(() => {\n      remoteParticipants?.map((participant) => {\n        if (participant?.reaction) {\n          updateVisibleReactions(participant.reaction, participant.userId);\n        }\n      });\n    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);\n\n    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event\n    const canRenderReaction = (reaction: Reaction, id: string, movementIndex: number): boolean => {\n      // compare current time to reaction.received at and see if more than 4 seconds has elapsed\n      const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;\n\n      // Clean up the reaction if it's not in the visible reaction list\n      if (!canRender) {\n        removeVisibleReaction(reaction?.reactionType, id, movementIndex);\n      }\n\n      return canRender;\n    };\n\n    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\n\n    const containerHeight = hostDivHeight ?? 0;\n    const containerWidth = (hostDivWidth ?? 0) - displaySizePx();\n\n    const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n    const reactionMovementStyle = (position: number): React.CSSProperties =>\n      getReactionMovementStyle(leftPosition(position));\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'transparent'\n        })}\n      >\n        {visibleReactions.map((reaction) => (\n          <div key={reaction.id} style={reactionOverlayStyle}>\n            <div className=\"reaction-item\">\n              {canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) && (\n                // First div - Section that fixes the travel height and applies the movement animation\n                // Second div - Keeps track of active sprites and responsible for marking, counting\n                //              and removing reactions. Responsible for opacity controls as the sprite emoji animates\n                // Third div - Responsible for calculating the point of X axis where the reaction will start animation\n                // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite\n                <div\n                  style={moveAnimationStyles(\n                    containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%\n                    (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)\n                  )}\n                >\n                  <div\n                    onAnimationEnd={() => {\n                      removeVisibleReaction(\n                        reaction.reaction.reactionType,\n                        reaction.id,\n                        reaction.reactionMovementIndex\n                      );\n                    }}\n                    style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}\n                  >\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div\n                        style={spriteAnimationStyles(\n                          REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                          displaySizePx(),\n                          getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''\n                        )}\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </Stack>\n    );\n  }\n);\n"]}
+{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,mCAAmC,EACnC,uCAAuC,EACvC,2BAA2B,EAC3B,cAAc,EACd,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAc/B,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,MAAM,4BAA4B,GAAG,EAAE,CAAC;AAExC;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,KAAK,CAAC,IAAI,CACzD,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEvG,8CAA8C;IAC9C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IAEhF,gGAAgG;IAChG,0FAA0F;IAC1F,sCAAsC;IACtC,MAAM,sBAAsB,GAAG,MAAM,CAAmC,EAAE,CAAC,CAAC;IAE5E,4FAA4F;IAC5F,qBAAqB;IACrB,MAAM,eAAe,GAAG,MAAM,CAAyB;QACrD,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;KACb,CAAC,CAAC;IAEH,qFAAqF;IACrF,qFAAqF;IACrF,MAAM,uBAAuB,GAAG,MAAM,CAAY,IAAI,KAAK,CAAU,4BAA4B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhH,MAAM,0BAA0B,GAAe,OAAO,CACpD,GAAG,EAAE;;QACH,OAAA,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CACd,GAAG,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EACtD,MAAM,CAAC,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAA;KAAA,EACjE,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAW,EAAE;QAC1C,OAAO,uBAAuB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,QAAkB,EAAE,MAAc,EAAQ,EAAE;;QAC3C,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;QAEvF,MAAM,cAAc,GAAG,CAAA,MAAA,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,0CAAE,EAAE,MAAK,WAAW,CAAC;QAClF,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEnE,IAAI,WAAW,IAAI,oBAAoB,GAAG,qBAAqB,EAAE,CAAC;YAChE,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG;gBACvC,EAAE,EAAE,WAAW;gBACf,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpD,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG;YACvC,EAAE,EAAE,WAAW;YACf,MAAM,EAAE,WAAW;SACpB,CAAC;QACF,MAAM,qBAAqB,GAAG,sBAAsB,EAAE,CAAC;QACvD,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;QAC9D,mBAAmB,CAAC;YAClB,GAAG,gBAAgB;YACnB;gBACE,QAAQ,EAAE,QAAQ;gBAClB,EAAE,EAAE,WAAW;gBACf,qBAAqB,EAAE,qBAAqB;gBAC5C,WAAW,EAAE,sBAAsB,EAAE;aACtC;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC,EACD,CAAC,eAAe,EAAE,gBAAgB,CAAC,CACpC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,YAAoB,EAAE,EAAU,EAAE,KAAa,EAAQ,EAAE;QACtF,mBAAmB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC/E,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC/C,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE;YAC5E,IAAI,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACvB,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,oBAAoB,CAAC;YACvE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,EAAE,CAAC;YAC/B,sBAAsB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;YACtC,IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,EAAE,CAAC;gBAC1B,sBAAsB,CAAC,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE7E,qGAAqG;IACrG,MAAM,iBAAiB,GAAG,CAAC,QAAkB,EAAE,EAAU,EAAE,aAAqB,EAAW,EAAE;QAC3F,0FAA0F;QAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,uCAAuC,CAAC;QAElH,iEAAiE;QACjE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,qBAAqB,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;QACnE,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAyB,EAAE,CAAC,sBAAsB,EAAE,CAAC;IACzE,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC,2BAA2B,GAAG,WAAW,EAAE,CAAC,SAAS,CAAC;IAE1F,MAAM,eAAe,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,CAAC,GAAG,aAAa,EAAE,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAU,EAAE,CAAC,yBAAyB,CAAC,QAAQ,EAAE,cAAc,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IACjH,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAuB,EAAE,CACtE,wBAAwB,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE;YAC3C,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,aAAa;SAC/B,CAAC,IAED,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;;QAAC,OAAA,CAClC,6BAAK,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,oBAAoB;YAChD,6BAAK,SAAS,EAAC,eAAe,IAC3B,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,qBAAqB,CAAC,IAAI;YACpF,sFAAsF;YACtF,mFAAmF;YACnF,qGAAqG;YACrG,sGAAsG;YACtG,uGAAuG;YACvG,6BACE,KAAK,EAAE,mBAAmB,CACxB,eAAe,GAAG,CAAC,EAAE,oEAAoE;gBACzF,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,cAAc,CAAC,CAClE;gBAED,6BACE,cAAc,EAAE,GAAG,EAAE;wBACnB,qBAAqB,CACnB,QAAQ,CAAC,QAAQ,CAAC,YAAY,EAC9B,QAAQ,CAAC,EAAE,EACX,QAAQ,CAAC,qBAAqB,CAC/B,CAAC;oBACJ,CAAC,EACD,KAAK,EAAE,sBAAsB,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC;oBAE9D,6BAAK,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC;wBAC/D,6BACE,KAAK,EAAE,qBAAqB,CAC1B,mCAAmC,EACnC,aAAa,EAAE,EACf,MAAA,gBAAgB,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC,mCAAI,EAAE,CAC3E,GACD,CACE,CACF,CACF,CACP,CACG,CACF,CACP,CAAA;KAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { Stack, mergeStyles } from '@fluentui/react';\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\nimport {\n  IReactionStyleBucket,\n  generateStartPositionWave,\n  getReactionMovementStyle,\n  getReactionStyleBucket,\n  moveAnimationStyles,\n  opacityAnimationStyles,\n  reactionOverlayStyle,\n  spriteAnimationStyles\n} from '../styles/ReactionOverlay.style';\nimport {\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getCombinedKey,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\nconst MAX_NUMBER_OF_EMOJIS = 50;\nconst NUMBER_OF_EMOJI_TYPES = 5;\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo(\n  (props: {\n    reactionResources: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    hostDivHeight?: number;\n    hostDivWidth?: number;\n  }) => {\n    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;\n\n    // Reactions that are currently being animated\n    const [visibleReactions, setVisibleReactions] = useState<VisibleReaction[]>([]);\n\n    // Dictionary of userId to a reaction status. This is used to track the latest received reaction\n    // per user to avoid animating the same reaction multiple times and to limit the number of\n    // active reactions of a certain type.\n    const latestReceivedReaction = useRef<Record<string, ReceivedReaction>>({});\n\n    // Track the number of active reactions of each type to limit the number of active reactions\n    // of a certain type.\n    const activeTypeCount = useRef<Record<string, number>>({\n      like: 0,\n      heart: 0,\n      laugh: 0,\n      applause: 0,\n      surprised: 0\n    });\n\n    // Used to track the total number of reactions ever played. This is a helper variable\n    // to calculate the reaction movement index (i.e. the .left position of the reaction)\n    const visibleReactionPosition = useRef<boolean[]>(new Array<boolean>(REACTION_POSITION_ARRAY_SIZE).fill(false));\n\n    const remoteParticipantReactions: Reaction[] = useMemo(\n      () =>\n        remoteParticipants\n          ?.map((remoteParticipant) => remoteParticipant.reaction)\n          .filter((reaction): reaction is Reaction => !!reaction) ?? [],\n      [remoteParticipants]\n    );\n\n    const findFirstEmptyPosition = (): number => {\n      return visibleReactionPosition.current.findIndex((item) => item === false);\n    };\n\n    const updateVisibleReactions = useCallback(\n      (reaction: Reaction, userId: string): void => {\n        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n\n        const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n        if (alreadyHandled) {\n          return;\n        }\n\n        const activeCount = activeTypeCount.current[reaction.reactionType];\n\n        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {\n          latestReceivedReaction.current[userId] = {\n            id: combinedKey,\n            status: 'ignored'\n          };\n          return;\n        }\n\n        activeTypeCount.current[reaction.reactionType] += 1;\n        latestReceivedReaction.current[userId] = {\n          id: combinedKey,\n          status: 'animating'\n        };\n        const reactionMovementIndex = findFirstEmptyPosition();\n        visibleReactionPosition.current[reactionMovementIndex] = true;\n        setVisibleReactions([\n          ...visibleReactions,\n          {\n            reaction: reaction,\n            id: combinedKey,\n            reactionMovementIndex: reactionMovementIndex,\n            styleBucket: getReactionStyleBucket()\n          }\n        ]);\n        return;\n      },\n      [activeTypeCount, visibleReactions]\n    );\n\n    const removeVisibleReaction = (reactionType: string, id: string, index: number): void => {\n      setVisibleReactions(visibleReactions.filter((reaction) => reaction.id !== id));\n      visibleReactionPosition.current[index] = false;\n      activeTypeCount.current[reactionType] -= 1;\n      Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {\n        if (reaction.id === id) {\n          latestReceivedReaction.current[userId].status = 'completedAnimating';\n        }\n      });\n    };\n\n    // Update visible reactions when local participant sends a reaction\n    useEffect(() => {\n      if (localParticipant?.reaction) {\n        updateVisibleReactions(localParticipant.reaction, localParticipant.userId);\n      }\n    }, [localParticipant, updateVisibleReactions]);\n\n    // Update visible reactions when remote participants send a reaction\n    useEffect(() => {\n      remoteParticipants?.map((participant) => {\n        if (participant?.reaction) {\n          updateVisibleReactions(participant.reaction, participant.userId);\n        }\n      });\n    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);\n\n    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event\n    const canRenderReaction = (reaction: Reaction, id: string, movementIndex: number): boolean => {\n      // compare current time to reaction.received at and see if more than 4 seconds has elapsed\n      const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;\n\n      // Clean up the reaction if it's not in the visible reaction list\n      if (!canRender) {\n        removeVisibleReaction(reaction?.reactionType, id, movementIndex);\n      }\n\n      return canRender;\n    };\n\n    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\n\n    const containerHeight = hostDivHeight ?? 0;\n    const containerWidth = (hostDivWidth ?? 0) - displaySizePx();\n\n    const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n    const reactionMovementStyle = (position: number): React.CSSProperties =>\n      getReactionMovementStyle(leftPosition(position));\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'transparent'\n        })}\n      >\n        {visibleReactions.map((reaction) => (\n          <div key={reaction.id} style={reactionOverlayStyle}>\n            <div className=\"reaction-item\">\n              {canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) && (\n                // First div - Section that fixes the travel height and applies the movement animation\n                // Second div - Keeps track of active sprites and responsible for marking, counting\n                //              and removing reactions. Responsible for opacity controls as the sprite emoji animates\n                // Third div - Responsible for calculating the point of X axis where the reaction will start animation\n                // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite\n                <div\n                  style={moveAnimationStyles(\n                    containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%\n                    (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)\n                  )}\n                >\n                  <div\n                    onAnimationEnd={() => {\n                      removeVisibleReaction(\n                        reaction.reaction.reactionType,\n                        reaction.id,\n                        reaction.reactionMovementIndex\n                      );\n                    }}\n                    style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}\n                  >\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div\n                        style={spriteAnimationStyles(\n                          REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                          displaySizePx(),\n                          getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''\n                        )}\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </Stack>\n    );\n  }\n);\n"]}

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

@@ -7,7 +7,6 @@ import { StreamMedia } from '../StreamMedia';
 import { VideoTile } from '../VideoTile';
 import { loadingStyle } from './styles/RemoteScreenShare.styles';
 import { _formatString } from "../../../../acs-ui-common/src";
-/* @conditional-compile-remove(reaction) */
 import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
 /**
  * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
@@ -15,13 +14,7 @@ import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const RemoteScreenShare = React.memo((props) => {
-    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, 
-    /* @conditional-compile-remove(reaction) */
-    reactionResources, 
-    /* @conditional-compile-remove(reaction) */
-    localParticipant, 
-    /* @conditional-compile-remove(reaction) */
-    remoteParticipants, 
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, reactionResources, localParticipant, remoteParticipants, 
     /* @conditional-compile-remove(ppt-live) */
     isPPTLive } = props;
     const locale = useLocale();
@@ -49,13 +42,9 @@ export const RemoteScreenShare = React.memo((props) => {
         : '';
     /* @conditional-compile-remove(ppt-live) */
     if (isPPTLive) {
-        return (React.createElement(VideoTile, { renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
-            /* @conditional-compile-remove(reaction) */
-            overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) }));
+        return (React.createElement(VideoTile, { renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) }));
     }
-    return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
-        /* @conditional-compile-remove(reaction) */
-        overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) }));
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) }));
 });
 const LoadingSpinner = (props) => {
     return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(reaction) */\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\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    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n    participantVideoScalingMode?: VideoStreamOptions;\n    /* @conditional-compile-remove(reaction) */\n    reactionResources?: ReactionResources;\n    /* @conditional-compile-remove(reaction) */\n    localParticipant?: VideoGalleryLocalParticipant;\n    /* @conditional-compile-remove(reaction) */\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    /* @conditional-compile-remove(ppt-live) */\n    isPPTLive?: boolean;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving,\n      participantVideoScalingMode,\n      /* @conditional-compile-remove(reaction) */\n      reactionResources,\n      /* @conditional-compile-remove(reaction) */\n      localParticipant,\n      /* @conditional-compile-remove(reaction) */\n      remoteParticipants,\n      /* @conditional-compile-remove(ppt-live) */\n      isPPTLive\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      /**\n       * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n       * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n       * mode is the same as before we started the screen share.\n       *\n       * We should deprecate the current function and replace it with a\n       * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n       */\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n    /* @conditional-compile-remove(ppt-live) */\n    if (isPPTLive) {\n      return (\n        <VideoTile\n          renderElement={\n            renderElement ? (\n              <StreamMedia\n                videoStreamElement={renderElement}\n                loadingState={isReceiving === false ? 'loading' : 'none'}\n              />\n            ) : undefined\n          }\n          onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n          /* @conditional-compile-remove(reaction) */\n          overlay={\n            <MeetingReactionOverlay\n              reactionResources={reactionResources!}\n              localParticipant={localParticipant}\n              remoteParticipants={remoteParticipants}\n              overlayMode=\"screen-share\"\n            />\n          }\n        />\n      );\n    }\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n        /* @conditional-compile-remove(reaction) */\n        overlay={\n          <MeetingReactionOverlay\n            reactionResources={reactionResources!}\n            localParticipant={localParticipant}\n            remoteParticipants={remoteParticipants}\n            overlayMode=\"screen-share\"\n          />\n        }\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\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    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n    participantVideoScalingMode?: VideoStreamOptions;\n    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    /* @conditional-compile-remove(ppt-live) */\n    isPPTLive?: boolean;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving,\n      participantVideoScalingMode,\n      reactionResources,\n      localParticipant,\n      remoteParticipants,\n      /* @conditional-compile-remove(ppt-live) */\n      isPPTLive\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      /**\n       * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n       * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n       * mode is the same as before we started the screen share.\n       *\n       * We should deprecate the current function and replace it with a\n       * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n       */\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n    /* @conditional-compile-remove(ppt-live) */\n    if (isPPTLive) {\n      return (\n        <VideoTile\n          renderElement={\n            renderElement ? (\n              <StreamMedia\n                videoStreamElement={renderElement}\n                loadingState={isReceiving === false ? 'loading' : 'none'}\n              />\n            ) : undefined\n          }\n          onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n          overlay={\n            <MeetingReactionOverlay\n              reactionResources={reactionResources!}\n              localParticipant={localParticipant}\n              remoteParticipants={remoteParticipants}\n              overlayMode=\"screen-share\"\n            />\n          }\n        />\n      );\n    }\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n        overlay={\n          <MeetingReactionOverlay\n            reactionResources={reactionResources!}\n            localParticipant={localParticipant}\n            remoteParticipants={remoteParticipants}\n            overlayMode=\"screen-share\"\n          />\n        }\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}

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

@@ -1,24 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const REACTION_START_DISPLAY_SIZE = 44;
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const getCombinedKey = (userId, reactionType, receivedAt) => {
     const receivedTime = receivedAt.toISOString();
     return userId + reactionType + receivedTime;
 };
-/* @conditional-compile-remove(reaction) */
 /** @private */
 export const getReceivedUnixTime = (receivedTime) => {
     return receivedTime.getTime();

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

@@ -1 +1 @@
-{"version":3,"file":"reactionUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/reactionUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAC9C,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,EAAE,CAAC;AACtD,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,IAAI,CAAC;AAC5D,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,GAAG,CAAC;AAE3D,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,YAAoB,EAAE,UAAgB,EAAU,EAAE;IAC/F,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;IAE9C,OAAO,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAC9C,CAAC,CAAC;AAEF,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAkB,EAAU,EAAE;IAChE,OAAO,YAAY,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_START_DISPLAY_SIZE = 44;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const getCombinedKey = (userId: string, reactionType: string, receivedAt: Date): string => {\n  const receivedTime = receivedAt.toISOString();\n\n  return userId + reactionType + receivedTime;\n};\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const getReceivedUnixTime = (receivedTime: Date): number => {\n  return receivedTime.getTime();\n};\n"]}
+{"version":3,"file":"reactionUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/reactionUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAC9C,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,EAAE,CAAC;AACtD,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,IAAI,CAAC;AAC5D,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,GAAG,CAAC;AAE3D,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,YAAoB,EAAE,UAAgB,EAAU,EAAE;IAC/F,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;IAE9C,OAAO,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAC9C,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAkB,EAAU,EAAE;IAChE,OAAO,YAAY,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/** @private */\nexport const REACTION_START_DISPLAY_SIZE = 44;\n/** @private */\nexport const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;\n/** @private */\nexport const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;\n/** @private */\nexport const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;\n\n/** @private */\nexport const getCombinedKey = (userId: string, reactionType: string, receivedAt: Date): string => {\n  const receivedTime = receivedAt.toISOString();\n\n  return userId + reactionType + receivedTime;\n};\n\n/** @private */\nexport const getReceivedUnixTime = (receivedTime: Date): number => {\n  return receivedTime.getTime();\n};\n"]}

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

@@ -146,7 +146,6 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
     return remoteParticipantSortedByVideo;
 };
-/* @conditional-compile-remove(reaction) */
 /**
  * @private
  */
@@ -166,7 +165,6 @@ export const getEmojiResource = (reactionName, reactionResources) => {
     }
     return undefined;
 };
-/* @conditional-compile-remove(reaction) */
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participants =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])\n        : [newGridParticipants[0]]\n      : [];\n\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !gridParticipantSet.has(p.userId) &&\n        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n          p.userId\n        )\n    ),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(\n    spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p])\n  );\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(\n    (p) => remoteParticipantMap[p]\n  );\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n          : useOrganizedParticipantsResult.overflowGalleryParticipants\n      }\n    : useOrganizedParticipantsResult;\n};\n\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    return [];\n  }\n  // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n  // we will use the max streams provided to the function to find the max participants that can go in the grid\n  // if there are less participants than max streams then we will use all participants including joining in the grid\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.length > args.maxGridParticipants\n    ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);\n};\n\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    // If screen sharing is active, assign video and audio participants as overflow gallery participants\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\n  } else {\n    // If screen sharing is not active, then assign all video tiles as grid tiles.\n    // If there are no video tiles, then assign audio tiles as grid tiles.\n    // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n    // overflow should be empty if total participants including calling participants is less than max streams\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants.concat(args.callingParticipants)\n      : args.overflowGalleryParticipants.length > args.maxGridParticipants\n      ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)\n      : [];\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants\n      : args.overflowGalleryParticipants.slice(args.maxGridParticipants);\n  }\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};\n"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxGridParticipants?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\n/**\n * @private\n */\nexport const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participants =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxGridParticipants\n  }).slice(0, maxGridParticipants);\n\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])\n        : [newGridParticipants[0]]\n      : [];\n\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !gridParticipantSet.has(p.userId) &&\n        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n          p.userId\n        )\n    ),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxGridParticipants: maxGridParticipants,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(\n    spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p])\n  );\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(\n    (p) => remoteParticipantMap[p]\n  );\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n          : useOrganizedParticipantsResult.overflowGalleryParticipants\n      }\n    : useOrganizedParticipantsResult;\n};\n\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    return [];\n  }\n  // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n  // we will use the max streams provided to the function to find the max participants that can go in the grid\n  // if there are less participants than max streams then we will use all participants including joining in the grid\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.length > args.maxGridParticipants\n    ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);\n};\n\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxGridParticipants: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    // If screen sharing is active, assign video and audio participants as overflow gallery participants\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\n  } else {\n    // If screen sharing is not active, then assign all video tiles as grid tiles.\n    // If there are no video tiles, then assign audio tiles as grid tiles.\n    // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n    // overflow should be empty if total participants including calling participants is less than max streams\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants.concat(args.callingParticipants)\n      : args.overflowGalleryParticipants.length > args.maxGridParticipants\n      ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)\n      : [];\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants\n      : args.overflowGalleryParticipants.slice(args.maxGridParticipants);\n  }\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};\n"]}

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

@@ -74,9 +74,7 @@ export const VideoGallery = (props) => {
     /* @conditional-compile-remove(spotlight) */
     onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    maxParticipantsToSpotlight, 
-    /* @conditional-compile-remove(reaction) */
-    reactionResources } = props;
+    maxParticipantsToSpotlight, reactionResources } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
@@ -133,9 +131,7 @@ export const VideoGallery = (props) => {
             return isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, 
-                /* @conditional-compile-remove(reaction) */
-                reaction: localParticipant.reaction, 
+            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
                 spotlightedParticipantUserIds: spotlightedParticipants, 
                 /* @conditional-compile-remove(spotlight) */
@@ -151,9 +147,7 @@ export const VideoGallery = (props) => {
                 /* @conditional-compile-remove(spotlight) */
                 drawerMenuHostId: drawerMenuHostId, 
                 /* @conditional-compile-remove(spotlight) */
-                strings: strings, 
-                /* @conditional-compile-remove(reaction) */
-                reactionResources: reactionResources })));
+                strings: strings, reactionResources: reactionResources })));
     }, [
         isNarrow,
         localParticipant,
@@ -185,7 +179,6 @@ export const VideoGallery = (props) => {
         strings,
         /* @conditional-compile-remove(spotlight) */
         drawerMenuHostId,
-        /* @conditional-compile-remove(reaction) */
         reactionResources
     ]);
     const onPinParticipant = useCallback((userId) => {
@@ -253,9 +246,7 @@ export const VideoGallery = (props) => {
             /* @conditional-compile-remove(spotlight) */
             onStopSpotlight: onStopRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
-            maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
-            /* @conditional-compile-remove(reaction) */
-            reactionResources: reactionResources }));
+            maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources }));
     }, [
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
@@ -276,17 +267,11 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
-        /* @conditional-compile-remove(reaction) */ reactionResources
+        reactionResources
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], 
-        /* @conditional-compile-remove(reaction) */
-        localParticipant: localParticipant, 
-        /* @conditional-compile-remove(reaction) */
-        remoteParticipants: remoteParticipants, 
-        /* @conditional-compile-remove(reaction) */
-        reactionResources: reactionResources, 
+    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, 
         /* @conditional-compile-remove(ppt-live) */
         isPPTLive: !((_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.id) })));
     const screenShareComponent = remoteScreenShareComponent