@azure/communication-react 1.15.0-alpha-202404100012 → 1.15.0-beta.2

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 styleBucket = () => getReactionStyleBucket();
-    const displaySizePx = () => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
-    const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
-    const containerWidth = (hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0) - displaySizePx();
-    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 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/utils/reactionUtils.d.ts

@@ -1,13 +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 REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
-/** @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,26 +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 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();
-};
-//# 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;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"]}

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

package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.js

@@ -1,28 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { mergeStyles } from '@fluentui/react';
-import { makeStyles, shorthands } from '@fluentui/react-components';
-import { _pxToRem } from "../../../../acs-ui-common/src";
-/**
- * @private
- */
-export const useAttachmentCardStyles = makeStyles({
-    root: {
-        width: '12rem',
-        minWidth: '75%',
-        '& div[role=toolbar]': Object.assign({}, shorthands.padding(0))
-    }
-});
-/**
- * @private
- */
-export const attachmentNameContainerClassName = mergeStyles({
-    marginTop: _pxToRem(5),
-    width: '5.75rem',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    span: {
-        whiteSpace: 'nowrap'
-    }
-});
-//# sourceMappingURL=AttachmentCard.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCard.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK;QACf,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAC1D,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands } from '@fluentui/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useAttachmentCardStyles = makeStyles({\n  root: {\n    width: '12rem',\n    minWidth: '75%',\n    '& div[role=toolbar]': {\n      ...shorthands.padding(0)\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentNameContainerClassName = mergeStyles({\n  marginTop: _pxToRem(5),\n  width: '5.75rem',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  span: {\n    whiteSpace: 'nowrap'\n  }\n});\n"]}

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

@@ -1,36 +0,0 @@
-import { ITooltipHostStyles, IStyle } from '@fluentui/react';
-import React from 'react';
-/**
- * @private
- */
-export declare const playFrames: () => string;
-/**
- * @param backgroundImage - the uri for the reaction emoji resource
- * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
- *
- * @private
- */
-export declare const emojiStyles: (backgroundImage: string, frameCount: number) => IStyle;
-/**
- *
- * @private
- */
-export declare const reactionEmojiMenuStyles: () => IStyle;
-/**
- *
- * @private
- */
-export declare const reactionToolTipHostStyle: () => ITooltipHostStyles;
-/**
- *
- * @private
- */
-export declare const mobileViewMenuItemStyle: () => React.CSSProperties;
-/**
- * @param backgroundImage - the uri for the reaction emoji resource
- * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
- *
- * @private
- */
-export declare const mobileViewEmojiStyles: (backgroundImage: string, animationPlayState: string) => React.CSSProperties;
-//# sourceMappingURL=ReactionButton.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js

@@ -1,130 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-import { keyframes, memoizeFunction } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
-/**
- * @private
- */
-export const playFrames = memoizeFunction(() => keyframes({
-    from: {
-        backgroundPosition: '0px 8568px'
-    },
-    to: {
-        backgroundPosition: '0px 0px'
-    }
-}));
-/* @conditional-compile-remove(reaction) */
-/**
- * @param backgroundImage - the uri for the reaction emoji resource
- * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
- *
- * @private
- */
-export const emojiStyles = (backgroundImage, frameCount) => {
-    const imageResourceUrl = `url(${backgroundImage})`;
-    const steps = frameCount !== null && frameCount !== void 0 ? frameCount : 51;
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        width: '100%',
-        backgroundImage: imageResourceUrl,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundSize: `2.75rem 133.875rem`,
-        transition: 'opacity 2s',
-        backgroundColor: 'transparent',
-        transform: 'scale(0.6)',
-        ':hover': {
-            transform: 'scale(0.8)',
-            animationName: playFrames(),
-            animationDuration: '8.12s',
-            animationTimingFunction: `steps(${steps})`,
-            animationIterationCount: 'infinite',
-            backgroundColor: 'transparent'
-        },
-        ':active': {
-            backgroundColor: 'transparent'
-        }
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- *
- * @private
- */
-export const reactionEmojiMenuStyles = () => {
-    return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'row',
-        width: '13.75rem',
-        height: '2.625rem',
-        // Ensure that when one emoji is hovered, the other emojis are partially faded out
-        ':hover > :not(:hover)': {
-            opacity: '0.5'
-        }
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- *
- * @private
- */
-export const reactionToolTipHostStyle = () => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            width: '100%'
-        }
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- *
- * @private
- */
-export const mobileViewMenuItemStyle = () => {
-    return {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        flexDirection: 'row',
-        width: '100%',
-        height: '2.625rem'
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- * @param backgroundImage - the uri for the reaction emoji resource
- * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
- *
- * @private
- */
-export const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
-    const imageResourceUrl = `url(${backgroundImage})`;
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        width: '2.75rem',
-        backgroundImage: imageResourceUrl,
-        animationName: playFrames(),
-        animationDuration: '8.12s',
-        animationTimingFunction: `steps(102)`,
-        animationPlayState: animationPlayState,
-        animationIterationCount: 'infinite',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundPosition: 'center',
-        backgroundSize: `2.75rem 133.875rem`,
-        transition: 'opacity 2s',
-        backgroundColor: 'transparent',
-        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
-    };
-};
-//# sourceMappingURL=ReactionButton.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ITooltipHostStyles, keyframes, memoizeFunction, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 8568px'\n    },\n    to: {\n      backgroundPosition: '0px 0px'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, frameCount: number): IStyle => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  const steps = frameCount ?? 51;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: 'scale(0.6)',\n    ':hover': {\n      transform: 'scale(0.8)',\n      animationName: playFrames(),\n      animationDuration: '8.12s',\n      animationTimingFunction: `steps(${steps})`,\n      animationIterationCount: 'infinite',\n      backgroundColor: 'transparent'\n    },\n    ':active': {\n      backgroundColor: 'transparent'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '13.75rem',\n    height: '2.625rem',\n\n    // Ensure that when one emoji is hovered, the other emojis are partially faded out\n    ':hover > :not(:hover)': {\n      opacity: '0.5'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '100%'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n    height: '2.625rem'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '2.75rem',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n"]}

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

@@ -1,71 +0,0 @@
-/// <reference types="react" />
-/**
- * Generate random float between two numbers, including min and max
- * @private
- */
-export declare function getRandomFloat(minValue: number, maxValue: number): number;
-/**
- * Generate random int between two numbers, including min and max
- * @private
- */
-export declare function getRandomInt(minValue: number, maxValue: number): number;
-/**
- * Calculate the start position for a new reaction in the prescriptive wave pattern
- * @private
- */
-export declare function generateStartPositionWave(index: number, halfCanvasWidth: number, isOriginAtCanvasCenter?: boolean): number;
-/**
- * @private
- */
-export declare const reactionOverlayStyle: React.CSSProperties;
-/**
- * @private
- */
-export declare function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties;
-/**
- * @private
- */
-export interface IReactionStyleBucket {
-    sizeScale: number;
-    opacityMax: number;
-    heightMaxScale: number;
-    heightMinScale?: number;
-}
-/**
- * Return a style bucket based on the number of active sprites.
- * For example, the first three reactions should appear at maximum
- * height, width, and opacity.
- * @private
- */
-export declare function getReactionStyleBucket(): IReactionStyleBucket;
-/**
- * Return a style bucket for burst scenario
- * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.
- * @private
- */
-export declare function getReactionBurstStyleBucket(): IReactionStyleBucket;
-/**
- * @private
- */
-export declare const moveFrames: (maxHeight: any, travelHeight: any) => string;
-/**
- * @private
- */
-export declare const moveAnimationStyles: (maxHeight: number, travelHeight: number) => React.CSSProperties;
-/**
- * @private
- */
-export declare const opacityTransition: (maxOpacity: any) => string;
-/**
- * @private
- */
-export declare const opacityAnimationStyles: (maxOpacity: number) => React.CSSProperties;
-/**
- * @private
- */
-export declare const spriteFrames: (numOfFrames: any, displaySizePx: any) => string;
-/**
- * @private
- */
-export declare const spriteAnimationStyles: (numOfFrames: number, displaySizePx: number, imageUrl: string) => React.CSSProperties;
-//# sourceMappingURL=ReactionOverlay.style.d.ts.map