@azure/communication-react 1.14.1-alpha-202404020012 → 1.15.0-beta.1

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { SendBoxErrorBarError } from '../SendBoxErrorBar';
-/**
- * @private
- */
-export interface RichTextSendBoxErrorsProps {
-    attachmentUploadsPendingError?: SendBoxErrorBarError;
-    attachmentUploadError?: SendBoxErrorBarError;
-    systemMessage?: string;
-    textTooLongMessage?: string;
-}
-/**
- * @private
- */
-export declare const RichTextSendBoxErrors: (props: RichTextSendBoxErrorsProps) => JSX.Element;
-//# sourceMappingURL=RichTextSendBoxErrors.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js

@@ -1,68 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useEffect, useState } from 'react';
-import { SendBoxErrorBar } from '../SendBoxErrorBar';
-/**
- * @private
- */
-export const RichTextSendBoxErrors = (props) => {
-    const { 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    attachmentUploadError, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
-    const [sendBoxError, setSendBoxError] = useState(undefined);
-    useEffect(() => {
-        if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
-        }
-    }, [systemMessage]);
-    useEffect(() => {
-        if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {
-            setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });
-        }
-    }, [textTooLongMessage]);
-    useEffect(() => {
-        if ((textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&
-            (systemMessage === undefined || isMessageEmpty(systemMessage))) {
-            setSendBoxError(undefined);
-        }
-    }, [systemMessage, textTooLongMessage]);
-    useEffect(() => {
-        setSendBoxError((prev) => {
-            const errors = [];
-            if (prev) {
-                errors.push(prev);
-            }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            if (attachmentUploadsPendingError) {
-                errors.push(attachmentUploadsPendingError);
-            }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            if (attachmentUploadError) {
-                errors.push(attachmentUploadError);
-            }
-            if (errors.length === 0) {
-                return undefined;
-            }
-            // sort to get the latest error
-            const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);
-            return sortedErrors[0];
-        });
-    }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
-    ]);
-    const onDismiss = useCallback(() => {
-        if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
-        }
-    }, [systemMessage]);
-    return (React.createElement(SendBoxErrorBar, { error: sendBoxError, dismissAfterMs: 
-        // don't dismiss the system message
-        systemMessage !== undefined && (sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message) !== systemMessage ? 10 * 1000 : undefined, onDismiss: onDismiss }));
-};
-const isMessageEmpty = (message) => {
-    return message.trim().length === 0;
-};
-//# sourceMappingURL=RichTextSendBoxErrors.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.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 { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadError) {\n        errors.push(attachmentUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Reaction, ReactionResources } from '../../types';
-/**
- * Reaction overlay component for Grid
- *
- * Can be used with {@link MeetingReactionOverlay}.
- *
- * @internal
- */
-export declare const ParticipantVideoTileOverlay: React.MemoExoticComponent<(props: {
-    reaction?: Reaction;
-    reactionResources: ReactionResources;
-    emojiSize?: number;
-}) => React.JSX.Element>;
-//# sourceMappingURL=ParticipantVideoTileOverlay.d.ts.map

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

@@ -1,62 +0,0 @@
-// 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_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getReceivedUnixTime } from './utils/reactionUtils';
-/* @conditional-compile-remove(reaction) */
-/**
- * Reaction overlay component for Grid
- *
- * Can be used with {@link MeetingReactionOverlay}.
- *
- * @internal
- */
-export const ParticipantVideoTileOverlay = React.memo((props) => {
-    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;
-    const [isValidImageSource, setIsValidImageSource] = useState(false);
-    const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
-        ? getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
-        : undefined;
-    const frameCount = reaction !== undefined && reactionResources !== undefined
-        ? getEmojiFrameCount(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
-        : undefined;
-    const currentUnixTimeStamp = Date.now();
-    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;
-    const canRenderReaction = (receivedUnixTimestamp
-        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS
-        : false) && backgroundImageUrl !== undefined;
-    useEffect(() => {
-        if (!backgroundImageUrl || backgroundImageUrl.length === 0) {
-            return;
-        }
-        fetch(`${backgroundImageUrl}`)
-            .then((res) => {
-            setIsValidImageSource(res.ok);
-        })
-            .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));
-        return () => setIsValidImageSource(false);
-    }, [backgroundImageUrl]);
-    const spriteImageUrl = backgroundImageUrl !== null && backgroundImageUrl !== void 0 ? backgroundImageUrl : undefined;
-    const reactionContainerStyles = useCallback(() => reactionRenderingStyle({
-        spriteImageUrl,
-        emojiSize: emojiSize,
-        frameCount
-    }), [spriteImageUrl, emojiSize, frameCount]);
-    return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
-        }) },
-        React.createElement("div", { style: { height: '33.33%' } }),
-        canRenderReaction && isValidImageSource && (React.createElement("div", { style: { minHeight: '84px', height: '84px', width: '84px' } },
-            React.createElement("div", { className: reactionContainerStyles() })))));
-});
-//# sourceMappingURL=ParticipantVideoTileOverlay.js.map

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

@@ -1 +0,0 @@
-{"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_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,\n          emojiSize: emojiSize,\n          frameCount\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        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div style={{ minHeight: '84px', height: '84px', width: '84px' }}>\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';
-/**
- * The overlay responsible for rendering multiple reactions all at once in presentation mode
- * @internal
- */
-export declare const RemoteContentShareReactionOverlay: React.MemoExoticComponent<(props: {
-    reactionResources: ReactionResources;
-    localParticipant?: VideoGalleryLocalParticipant;
-    remoteParticipants?: VideoGalleryRemoteParticipant[];
-    hostDivHeight?: number;
-    hostDivWidth?: number;
-}) => React.JSX.Element>;
-//# sourceMappingURL=RemoteContentShareReactionOverlay.d.ts.map

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

@@ -1,149 +0,0 @@
-// 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
- */
-export const RemoteContentShareReactionOverlay = React.memo((props) => {
-    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;
-    // Reactions that are currently being animated
-    const [visibleReactions, setVisibleReactions] = useState([]);
-    // Dictionary of userId to a reaction status. This is used to track the latest received reaction
-    // per user to avoid animating the same reaction multiple times and to limit the number of
-    // active reactions of a certain type.
-    const latestReceivedReaction = useRef({});
-    // Track the number of active reactions of each type to limit the number of active reactions
-    // of a certain type.
-    const activeTypeCount = useRef({
-        like: 0,
-        heart: 0,
-        laugh: 0,
-        applause: 0,
-        surprised: 0
-    });
-    // Used to track the total number of reactions ever played. This is a helper variable
-    // to calculate the reaction movement index (i.e. the .left position of the reaction)
-    const visibleReactionPosition = useRef(new Array(REACTION_POSITION_ARRAY_SIZE).fill(false));
-    const remoteParticipantReactions = useMemo(() => {
-        var _a;
-        return (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map((remoteParticipant) => remoteParticipant.reaction).filter((reaction) => !!reaction)) !== null && _a !== void 0 ? _a : [];
-    }, [remoteParticipants]);
-    const findFirstEmptyPosition = () => {
-        return visibleReactionPosition.current.findIndex((item) => item === false);
-    };
-    const updateVisibleReactions = useCallback((reaction, userId) => {
-        var _a;
-        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);
-        const alreadyHandled = ((_a = latestReceivedReaction.current[userId]) === null || _a === void 0 ? void 0 : _a.id) === combinedKey;
-        if (alreadyHandled) {
-            return;
-        }
-        const activeCount = activeTypeCount.current[reaction.reactionType];
-        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {
-            latestReceivedReaction.current[userId] = {
-                id: combinedKey,
-                status: 'ignored'
-            };
-            return;
-        }
-        activeTypeCount.current[reaction.reactionType] += 1;
-        latestReceivedReaction.current[userId] = {
-            id: combinedKey,
-            status: 'animating'
-        };
-        const reactionMovementIndex = findFirstEmptyPosition();
-        visibleReactionPosition.current[reactionMovementIndex] = true;
-        setVisibleReactions([
-            ...visibleReactions,
-            {
-                reaction: reaction,
-                id: combinedKey,
-                reactionMovementIndex: reactionMovementIndex,
-                styleBucket: getReactionStyleBucket()
-            }
-        ]);
-        return;
-    }, [activeTypeCount, visibleReactions]);
-    const removeVisibleReaction = (reactionType, id, index) => {
-        setVisibleReactions(visibleReactions.filter((reaction) => reaction.id !== id));
-        visibleReactionPosition.current[index] = false;
-        activeTypeCount.current[reactionType] -= 1;
-        Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {
-            if (reaction.id === id) {
-                latestReceivedReaction.current[userId].status = 'completedAnimating';
-            }
-        });
-    };
-    // Update visible reactions when local participant sends a reaction
-    useEffect(() => {
-        if (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.reaction) {
-            updateVisibleReactions(localParticipant.reaction, localParticipant.userId);
-        }
-    }, [localParticipant, updateVisibleReactions]);
-    // Update visible reactions when remote participants send a reaction
-    useEffect(() => {
-        remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map((participant) => {
-            if (participant === null || participant === void 0 ? void 0 : participant.reaction) {
-                updateVisibleReactions(participant.reaction, participant.userId);
-            }
-        });
-    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);
-    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event
-    const canRenderReaction = (reaction, id, movementIndex) => {
-        // compare current time to reaction.received at and see if more than 4 seconds has elapsed
-        const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;
-        // Clean up the reaction if it's not in the visible reaction list
-        if (!canRender) {
-            removeVisibleReaction(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, id, movementIndex);
-        }
-        return canRender;
-    };
-    const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
-    const containerWidth = hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0;
-    const styleBucket = () => getReactionStyleBucket();
-    const displaySizePx = () => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
-    const leftPosition = (position) => generateStartPositionWave(position, containerWidth / 2, true);
-    const reactionMovementStyle = (position) => getReactionMovementStyle(leftPosition(position));
-    return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'transparent'
-        }) }, visibleReactions.map((reaction) => {
-        var _a;
-        return (React.createElement("div", { key: reaction.id, style: reactionOverlayStyle },
-            React.createElement("div", { className: "reaction-item" }, canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) && (
-            // First div - Section that fixes the travel height and applies the movement animation
-            // Second div - Keeps track of active sprites and responsible for marking, counting
-            //              and removing reactions. Responsible for opacity controls as the sprite emoji animates
-            // Third div - Responsible for calculating the point of X axis where the reaction will start animation
-            // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite
-            React.createElement("div", { style: moveAnimationStyles(containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%
-                (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)) },
-                React.createElement("div", { onAnimationEnd: () => {
-                        removeVisibleReaction(reaction.reaction.reactionType, reaction.id, reaction.reactionMovementIndex);
-                    }, style: opacityAnimationStyles(reaction.styleBucket.opacityMax) },
-                    React.createElement("div", { style: reactionMovementStyle(reaction.reactionMovementIndex) },
-                        React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, displaySizePx(), (_a = getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reaction.reactionType, reactionResources)) !== null && _a !== void 0 ? _a : '') }))))))));
-    })));
-});
-//# sourceMappingURL=RemoteContentShareReactionOverlay.js.map

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

@@ -1 +0,0 @@
-{"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 containerHeight = hostDivHeight ?? 0;\n    const containerWidth = hostDivWidth ?? 0;\n\n    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\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/utils/reactionUtils.d.ts

@@ -1,11 +0,0 @@
-/** @private */
-export declare const REACTION_START_DISPLAY_SIZE = 44;
-/** @private */
-export declare const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
-/** @private */
-export declare const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
-/** @private */
-export declare const getCombinedKey: (userId: string, reactionType: string, receivedAt: Date) => string;
-/** @private */
-export declare const getReceivedUnixTime: (receivedTime: Date) => number;
-//# sourceMappingURL=reactionUtils.d.ts.map

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

@@ -1,23 +0,0 @@
-// 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 getCombinedKey = (userId, reactionType, receivedAt) => {
-    const receivedTime = receivedAt.toISOString();
-    return userId + reactionType + receivedTime;
-};
-/* @conditional-compile-remove(reaction) */
-/** @private */
-export const getReceivedUnixTime = (receivedTime) => {
-    return receivedTime.getTime();
-};
-//# sourceMappingURL=reactionUtils.js.map

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

@@ -1 +0,0 @@
-{"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;AAE5D,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\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"]}

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

@@ -1,9 +0,0 @@
-/**
- * @private
- */
-export declare const useAttachmentCardStyles: () => Record<"root", string>;
-/**
- * @private
- */
-export declare const attachmentNameContainerClassName: string;
-//# sourceMappingURL=AttachmentCard.styles.d.ts.map