@azure/communication-react 1.24.0-beta.1 → 1.24.0

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

@@ -1,38 +0,0 @@
-import { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
-/**
- * @internal
- */
-export declare const iconContainerStyles: IStackStyles;
-/**
- * @internal
- */
-export declare const iconBannerContainerStyles: IStackStyles;
-/**
- * @internal
- */
-export declare const textContainerStyles: IStackStyles;
-/**
- * @internal
- */
-export declare const iconPrimaryStyles: IIconStyles;
-/**
- * @internal
- */
-export declare const sparkleIconBackdropStyles: (theme: Theme) => IIconStyles;
-/**
- * @internal
- */
-export declare const primaryTextStyles: ITextStyles;
-/**
- * @internal
- */
-export declare const secondaryTextStyles: ITextStyles;
-/**
- * @internal
- */
-export declare const linkTextStyles: ILinkStyles;
-/**
- * @internal
- */
-export declare const primaryButtonStyles: IButtonStyles;
-//# sourceMappingURL=SitePermissions.styles.d.ts.map

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

@@ -1,99 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { _pxToRem } from "../../../../acs-ui-common/src";
-/**
- * @internal
- */
-export const iconContainerStyles = {
-    root: {
-        marginTop: 'auto',
-        marginBottom: 'auto',
-        position: 'relative'
-    }
-};
-/**
- * @internal
- */
-export const iconBannerContainerStyles = {
-    root: {
-        paddingBottom: '1rem'
-    }
-};
-/**
- * @internal
- */
-export const textContainerStyles = {
-    root: {
-        margin: 'auto',
-        textAlign: 'center'
-    }
-};
-/**
- * @internal
- */
-export const iconPrimaryStyles = {
-    root: {
-        zIndex: 1,
-        margin: 'auto'
-    }
-};
-/**
- * @internal
- */
-export const sparkleIconBackdropStyles = (theme) => {
-    return {
-        root: {
-            color: theme.palette.themeLighterAlt
-        }
-    };
-};
-/**
- * @internal
- */
-export const primaryTextStyles = {
-    root: {
-        fontWeight: 600,
-        fontSize: _pxToRem(20),
-        lineHeight: _pxToRem(28),
-        paddingBottom: '1rem'
-    }
-};
-/**
- * @internal
- */
-export const secondaryTextStyles = {
-    root: {
-        margin: 'auto',
-        fontWeight: 400,
-        paddingBottom: _pxToRem(22)
-    }
-};
-/**
- * @internal
- */
-export const linkTextStyles = {
-    root: {
-        margin: 'auto',
-        fontWeight: 600,
-        textAlign: 'inherit'
-    }
-};
-/**
- * @internal
- */
-export const primaryButtonStyles = {
-    root: {
-        paddingTop: '1.5rem',
-        paddingBottom: '1.5rem',
-        borderRadius: '0.5rem',
-        marginBottom: _pxToRem(22)
-    },
-    flexContainer: {
-        position: 'absolute',
-        left: '1rem',
-        right: '1rem',
-        top: '0',
-        bottom: '0'
-    }
-};
-//# sourceMappingURL=SitePermissions.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SitePermissions.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SitePermissions.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAiB;IACrD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAe,EAAE;IACrE,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;SACrC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC5B;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkB;IAChD,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,QAAQ;QACtB,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC3B;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,GAAG;QACR,MAAM,EAAE,GAAG;KACZ;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @internal\n */\nexport const iconContainerStyles: IStackStyles = {\n  root: {\n    marginTop: 'auto',\n    marginBottom: 'auto',\n    position: 'relative'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconBannerContainerStyles: IStackStyles = {\n  root: {\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const textContainerStyles: IStackStyles = {\n  root: {\n    margin: 'auto',\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconPrimaryStyles: IIconStyles = {\n  root: {\n    zIndex: 1,\n    margin: 'auto'\n  }\n};\n\n/**\n * @internal\n */\nexport const sparkleIconBackdropStyles = (theme: Theme): IIconStyles => {\n  return {\n    root: {\n      color: theme.palette.themeLighterAlt\n    }\n  };\n};\n\n/**\n * @internal\n */\nexport const primaryTextStyles: ITextStyles = {\n  root: {\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(28),\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const secondaryTextStyles: ITextStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 400,\n    paddingBottom: _pxToRem(22)\n  }\n};\n\n/**\n * @internal\n */\nexport const linkTextStyles: ILinkStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 600,\n    textAlign: 'inherit'\n  }\n};\n\n/**\n * @internal\n */\nexport const primaryButtonStyles: IButtonStyles = {\n  root: {\n    paddingTop: '1.5rem',\n    paddingBottom: '1.5rem',\n    borderRadius: '0.5rem',\n    marginBottom: _pxToRem(22)\n  },\n  flexContainer: {\n    position: 'absolute',\n    left: '1rem',\n    right: '1rem',\n    top: '0',\n    bottom: '0'\n  }\n};"]}

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

@@ -1,5 +0,0 @@
-/**
- * @private
- */
-export declare const useDefaultStackStyles: () => Record<"root", string>;
-//# sourceMappingURL=Stack.style.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/Stack.style.js

@@ -1,32 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { makeStyles } from '@fluentui/react-components';
-// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.
-// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page
-/**
- * @private
- */
-export const useDefaultStackStyles = makeStyles({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        flexWrap: 'nowrap',
-        width: 'auto',
-        height: 'auto',
-        boxSizing: 'border-box',
-        '> *': {
-            textOverflow: 'ellipsis'
-        }
-        // As per CSS props, these two styles are not in the original Stack styles
-        // (and they have higher specificity that just classes and will be applied instead of rules in classes).
-        // They also break a layout for the first selected item in MentionPopover if applied.
-        // Please check that component, if you want to apply these styles
-        // '> :not(:first-child)': {
-        //   marginTop: '0px'
-        // },
-        // '> *:not(.ms-StackItem)': {
-        //   flexShrink: 1
-        // }
-    }
-});
-//# sourceMappingURL=Stack.style.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/Stack.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,sGAAsG;AACtG,gGAAgG;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAAC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE;YACL,YAAY,EAAE,UAAU;SACzB;QACD,0EAA0E;QAC1E,wGAAwG;QACxG,qFAAqF;QACrF,iEAAiE;QACjE,4BAA4B;QAC5B,qBAAqB;QACrB,KAAK;QACL,8BAA8B;QAC9B,kBAAkB;QAClB,IAAI;KACL;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles } from '@fluentui/react-components';\n\n// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.\n// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page\n\n/**\n * @private\n */\nexport const useDefaultStackStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    width: 'auto',\n    height: 'auto',\n    boxSizing: 'border-box',\n    '> *': {\n      textOverflow: 'ellipsis'\n    }\n    // As per CSS props, these two styles are not in the original Stack styles\n    // (and they have higher specificity that just classes and will be applied instead of rules in classes).\n    // They also break a layout for the first selected item in MentionPopover if applied.\n    // Please check that component, if you want to apply these styles\n    // '> :not(:first-child)': {\n    //   marginTop: '0px'\n    // },\n    // '> *:not(.ms-StackItem)': {\n    //   flexShrink: 1\n    // }\n  }\n});"]}

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

@@ -1,98 +0,0 @@
-import { VideoGalleryTogetherModeSeatingInfo } from '../../types/TogetherModeTypes';
-import { IStackStyles } from '@fluentui/react';
-import { CSSProperties } from 'react';
-/**
- * Multiplier to convert rem units to pixels.
- */
-export declare const REM_TO_PX_MULTIPLIER = 16;
-/**
- * The travel height for reactions in Together Mode.
- * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels
- */
-export declare const REACTION_TRAVEL_HEIGHT: number;
-/**
- * Defines the maximum travel height for reactions in Together Mode.
- * Ensures the reaction animation does not exceed the center point from the top.
- * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.
- */
-export declare const REACTION_MAX_TRAVEL_HEIGHT: number;
-/**
- * The maximum width for displaying the participant's display name.
- */
-export declare const MAX_DISPLAY_NAME_WIDTH = 150;
-/**
- * Interface for defining the coordinates of a seat in Together Mode.
- */
-export interface TogetherModeParticipantSeatPosition {
-    height: string;
-    width: string;
-    left: string;
-    top: string;
-}
-/**
- * Interface for defining the style of a seat position in Together Mode.
- */
-export interface TogetherModeSeatStyle {
-    seatPosition: TogetherModeParticipantSeatPosition;
-}
-/**
- * Sets the seating position for a participant in Together Mode.
- *
- * @param seatingPosition - The seating position information.
- * @returns The style object for the seating position.
- */
-export declare function setParticipantSeatingPosition(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeParticipantSeatPosition;
-/**
- * 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 setTogetherModeSeatPositionStyle(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeSeatStyle;
-/**
- * The style for the Together Mode meeting overlay.
- */
-export declare const togetherModeMeetingOverlayStyle: CSSProperties;
-/**
- * Generates the overlay style for a participant in Together Mode.
- *
- * @param seatingPosition - The seating position information.
- * @returns The style object for the participant overlay.
- */
-export declare function getTogetherModeParticipantOverlayStyle(seatingPositionStyle: TogetherModeSeatStyle): CSSProperties;
-/**
- * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.
- * This is needed when the browser is resized and the participant seat width and height changes.
- *
- * @param width - The width of the element.
- * @param height - The height of the element.
- * @returns The scaled size.
- */
-export declare const calculateScaledSize: (width: number, height: number) => number;
-/**
- * @private
- */
-export declare const togetherModeStreamRootStyle: IStackStyles;
-/**
- * @private
- */
-export declare const togetherModeIconStyle: () => CSSProperties;
-/**
- * The style for the container holding the display name, raiseHand, spotlight and mute icons.
- * @private
- */
-export declare const togetherModeParticipantStatusContainer: (backgroundColor: string, borderRadius: string) => CSSProperties;
-/**
- * @private
- */
-export declare const togetherModeParticipantDisplayName: (isParticipantHovered: boolean, participantSeatingWidth: number, color: string) => React.CSSProperties;
-/**
- * @private
- */
-export declare const togetherModeParticipantEmojiSpriteStyle: (emojiSize: number, emojiScaledSize: number, participantSeatWidth: string) => CSSProperties;
-/**
- * The style for the transition of the participant status container in Together Mode.
- * @private
- */
-export declare const participantStatusTransitionStyle: CSSProperties;
-//# sourceMappingURL=TogetherMode.styles.d.ts.map

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

@@ -1,181 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { _pxToRem } from "../../../../acs-ui-common/src";
-/**
- * Multiplier to convert rem units to pixels.
- */
-export const REM_TO_PX_MULTIPLIER = 16;
-/**
- * The travel height for reactions in Together Mode.
- * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels
- */
-export const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;
-/**
- * Defines the maximum travel height for reactions in Together Mode.
- * Ensures the reaction animation does not exceed the center point from the top.
- * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.
- */
-export const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;
-/**
- * The maximum width for displaying the participant's display name.
- */
-export const MAX_DISPLAY_NAME_WIDTH = 150;
-/**
- * Sets the seating position for a participant in Together Mode.
- *
- * @param seatingPosition - The seating position information.
- * @returns The style object for the seating position.
- */
-export function setParticipantSeatingPosition(seatingPosition) {
-    return {
-        width: _pxToRem(seatingPosition.width),
-        height: _pxToRem(seatingPosition.height),
-        left: _pxToRem(seatingPosition.left),
-        top: _pxToRem(seatingPosition.top)
-    };
-}
-/**
- * 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 function setTogetherModeSeatPositionStyle(seatingPosition) {
-    return {
-        seatPosition: setParticipantSeatingPosition(seatingPosition)
-    };
-}
-/**
- * The style for the Together Mode meeting overlay.
- */
-export const togetherModeMeetingOverlayStyle = {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: '0',
-    left: '0'
-};
-/**
- * Generates the overlay style for a participant in Together Mode.
- *
- * @param seatingPosition - The seating position information.
- * @returns The style object for the participant overlay.
- */
-export function getTogetherModeParticipantOverlayStyle(seatingPositionStyle) {
-    return Object.assign(Object.assign({}, seatingPositionStyle.seatPosition), { position: 'absolute' });
-} // Function to map a value from one range to another
-const mapRange = (value, inMin, inMax, outMin, outMax) => {
-    return outMin + (value - inMin) * (outMax - outMin) / (inMax - inMin);
-};
-/**
- * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.
- * This is needed when the browser is resized and the participant seat width and height changes.
- *
- * @param width - The width of the element.
- * @param height - The height of the element.
- * @returns The scaled size.
- */
-export const calculateScaledSize = (width, height) => {
-    // Maximum participant seat width and height
-    const maxSize = 600;
-    // Minimum participant seat width and height
-    const minSize = 200;
-    // Minimum scaled width and height of the reaction emoji
-    const minScaledSize = 35;
-    // Maximum scaled width and height of the reaction emoji
-    const maxScaledSize = 70;
-    // Use width or height to determine scaling factor
-    const size = Math.min(width, height);
-    // Map the size to the desired range
-    return mapRange(size, minSize, maxSize, minScaledSize, maxScaledSize);
-};
-/**
- * @private
- */
-export const togetherModeStreamRootStyle = {
-    root: {
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'absolute',
-        top: 0,
-        left: 0
-    }
-};
-/**
- * @private
- */
-export const togetherModeIconStyle = () => {
-    return {
-        width: _pxToRem(20),
-        flexShrink: 0
-    };
-};
-/**
- * The style for the container holding the display name, raiseHand, spotlight and mute icons.
- * @private
- */
-export const togetherModeParticipantStatusContainer = (backgroundColor, borderRadius) => {
-    return {
-        backgroundColor,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: _pxToRem(2),
-        margin: '0 auto',
-        // Centers the container
-        padding: `0 ${_pxToRem(5)}`,
-        borderRadius,
-        width: 'fit-content'
-    };
-};
-/**
- * @private
- */
-export const togetherModeParticipantDisplayName = (isParticipantHovered, participantSeatingWidth, color) => {
-    // expands the display name width when participant is hovered or clicked on else make it 70% of the participant seating width
-    const width = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER);
-    // For smaller displays, the display name is hidden only participant is hovered or clicked on for mobile view
-    const showDisplayName = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none';
-    return {
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        textAlign: 'center',
-        color,
-        overflow: isParticipantHovered ? 'visible' : 'hidden',
-        width,
-        display: showDisplayName,
-        fontSize: `${_pxToRem(13)}`,
-        lineHeight: `${_pxToRem(20)}`,
-        maxWidth: isParticipantHovered ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER)
-    };
-};
-/**
- * @private
- */
-export const togetherModeParticipantEmojiSpriteStyle = (emojiSize, emojiScaledSize, participantSeatWidth) => {
-    const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;
-    const emojiScaledSizeInPercent = 100 - emojiScaledSize / participantSeatWidthInPixel * 100;
-    return {
-        width: `${emojiSize}`,
-        position: 'absolute',
-        // Center the emoji sprite within the participant seat
-        left: `${emojiScaledSizeInPercent / 2}%`
-    };
-};
-/**
- * The style for the transition of the participant status container in Together Mode.
- * @private
- */
-export const participantStatusTransitionStyle = {
-    position: 'absolute',
-    bottom: `${_pxToRem(2)}`,
-    width: 'fit-content',
-    textAlign: 'center',
-    transform: 'translate(-50%)',
-    transition: 'width 0.3s ease, transform 0.3s ease',
-    left: '50%'
-};
-//# sourceMappingURL=TogetherMode.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TogetherMode.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/TogetherMode.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoGalleryTogetherModeSeatingInfo } from '../../types/TogetherModeTypes';\nimport { IStackStyles } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n/**\n * Multiplier to convert rem units to pixels.\n */\nexport const REM_TO_PX_MULTIPLIER = 16;\n/**\n * The travel height for reactions in Together Mode.\n * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels\n */\nexport const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;\n/**\n * Defines the maximum travel height for reactions in Together Mode.\n * Ensures the reaction animation does not exceed the center point from the top.\n * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.\n */\nexport const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;\n/**\n * The maximum width for displaying the participant's display name.\n */\nexport const MAX_DISPLAY_NAME_WIDTH = 150;\n/**\n * Interface for defining the coordinates of a seat in Together Mode.\n */\nexport interface TogetherModeParticipantSeatPosition {\n  height: string;\n  width: string;\n  left: string;\n  top: string;\n}\n/**\n * Interface for defining the style of a seat position in Together Mode.\n */\nexport interface TogetherModeSeatStyle {\n  seatPosition: TogetherModeParticipantSeatPosition;\n}\n/**\n * Sets the seating position for a participant in Together Mode.\n *\n * @param seatingPosition - The seating position information.\n * @returns The style object for the seating position.\n */\nexport function setParticipantSeatingPosition(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeParticipantSeatPosition {\n  return {\n    width: _pxToRem(seatingPosition.width),\n    height: _pxToRem(seatingPosition.height),\n    left: _pxToRem(seatingPosition.left),\n    top: _pxToRem(seatingPosition.top)\n  };\n}\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function setTogetherModeSeatPositionStyle(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeSeatStyle {\n  return {\n    seatPosition: setParticipantSeatingPosition(seatingPosition)\n  };\n}\n/**\n * The style for the Together Mode meeting overlay.\n */\nexport const togetherModeMeetingOverlayStyle: CSSProperties = {\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: '0',\n  left: '0'\n};\n/**\n * Generates the overlay style for a participant in Together Mode.\n *\n * @param seatingPosition - The seating position information.\n * @returns The style object for the participant overlay.\n */\nexport function getTogetherModeParticipantOverlayStyle(seatingPositionStyle: TogetherModeSeatStyle): CSSProperties {\n  return {\n    ...seatingPositionStyle.seatPosition,\n    position: 'absolute'\n  };\n} // Function to map a value from one range to another\nconst mapRange = (value: number, inMin: number, inMax: number, outMin: number, outMax: number): number => {\n  return outMin + (value - inMin) * (outMax - outMin) / (inMax - inMin);\n};\n/**\n * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.\n * This is needed when the browser is resized and the participant seat width and height changes.\n *\n * @param width - The width of the element.\n * @param height - The height of the element.\n * @returns The scaled size.\n */\nexport const calculateScaledSize = (width: number, height: number): number => {\n  // Maximum participant seat width and height\n  const maxSize = 600;\n  // Minimum participant seat width and height\n  const minSize = 200;\n  // Minimum scaled width and height of the reaction emoji\n  const minScaledSize = 35;\n  // Maximum scaled width and height of the reaction emoji\n  const maxScaledSize = 70;\n\n  // Use width or height to determine scaling factor\n  const size = Math.min(width, height);\n\n  // Map the size to the desired range\n  return mapRange(size, minSize, maxSize, minScaledSize, maxScaledSize);\n};\n/**\n * @private\n */\nexport const togetherModeStreamRootStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'absolute',\n    top: 0,\n    left: 0\n  }\n};\n/**\n * @private\n */\nexport const togetherModeIconStyle = (): CSSProperties => {\n  return {\n    width: _pxToRem(20),\n    flexShrink: 0\n  };\n};\n/**\n * The style for the container holding the display name, raiseHand, spotlight and mute icons.\n * @private\n */\nexport const togetherModeParticipantStatusContainer = (backgroundColor: string, borderRadius: string): CSSProperties => {\n  return {\n    backgroundColor,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: _pxToRem(2),\n    margin: '0 auto',\n    // Centers the container\n    padding: `0 ${_pxToRem(5)}`,\n    borderRadius,\n    width: 'fit-content'\n  };\n};\n/**\n * @private\n */\nexport const togetherModeParticipantDisplayName = (isParticipantHovered: boolean, participantSeatingWidth: number, color: string): React.CSSProperties => {\n  // expands the display name width when participant is hovered or clicked on else make it 70% of the participant seating width\n  const width = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER);\n\n  // For smaller displays, the display name is hidden only participant is hovered or clicked on for mobile view\n  const showDisplayName = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none';\n  return {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    textAlign: 'center',\n    color,\n    overflow: isParticipantHovered ? 'visible' : 'hidden',\n    width,\n    display: showDisplayName,\n    fontSize: `${_pxToRem(13)}`,\n    lineHeight: `${_pxToRem(20)}`,\n    maxWidth: isParticipantHovered ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER)\n  };\n};\n/**\n * @private\n */\nexport const togetherModeParticipantEmojiSpriteStyle = (emojiSize: number, emojiScaledSize: number, participantSeatWidth: string): CSSProperties => {\n  const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;\n  const emojiScaledSizeInPercent = 100 - emojiScaledSize / participantSeatWidthInPixel * 100;\n  return {\n    width: `${emojiSize}`,\n    position: 'absolute',\n    // Center the emoji sprite within the participant seat\n    left: `${emojiScaledSizeInPercent / 2}%`\n  };\n};\n/**\n * The style for the transition of the participant status container in Together Mode.\n * @private\n */\nexport const participantStatusTransitionStyle: CSSProperties = {\n  position: 'absolute',\n  bottom: `${_pxToRem(2)}`,\n  width: 'fit-content',\n  textAlign: 'center',\n  transform: 'translate(-50%)',\n  transition: 'width 0.3s ease, transform 0.3s ease',\n  left: '50%'\n};"]}

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

@@ -1,26 +0,0 @@
-import { IButtonStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
-/**
- * @internal
- */
-export declare const mainTextStyles: ITextStyles;
-/**
- * @internal
- */
-export declare const secondaryTextStyles: ITextStyles;
-/**
- * @internal
- */
-export declare const testContainerStyles: IStackStyles;
-/**
- * @internal
- */
-export declare const linkTextStyles: ILinkStyles;
-/**
- * @internal
- */
-export declare const containerStyles: IStackStyles;
-/**
- * @internal
- */
-export declare const continueAnywayButtonStyles: (theme: Theme) => IButtonStyles;
-//# sourceMappingURL=UnsupportedEnvironment.styles.d.ts.map

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

@@ -1,69 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { _pxToRem } from "../../../../acs-ui-common/src";
-/**
- * @internal
- */
-export const mainTextStyles = {
-    root: {
-        fontWeight: 600,
-        fontSize: _pxToRem(20),
-        lineHeight: _pxToRem(28),
-        margin: 'auto',
-        textAlign: 'center',
-        padding: '0.5rem'
-    }
-};
-/**
- * @internal
- */
-export const secondaryTextStyles = {
-    root: {
-        margin: 'auto',
-        fontWeight: 400,
-        textAlign: 'center'
-    }
-};
-/**
- * @internal
- */
-export const testContainerStyles = {
-    root: {
-        margin: 'auto'
-    }
-};
-/**
- * @internal
- */
-export const linkTextStyles = {
-    root: {
-        margin: 'auto',
-        fontWeight: 600,
-        textAlign: 'center'
-    }
-};
-/**
- * @internal
- */
-export const containerStyles = {
-    root: {
-        maxWidth: _pxToRem(375),
-        padding: '2rem'
-    }
-};
-/**
- * @internal
- */
-export const continueAnywayButtonStyles = (theme) => {
-    return {
-        root: {
-            backgroundColor: '#C4314B',
-            borderColor: theme.palette.neutralLight,
-            color: theme.palette.white,
-            padding: '1rem',
-            // copy value previously set in FluentUI
-            height: '32px'
-        }
-    };
-};
-//# sourceMappingURL=UnsupportedEnvironment.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"UnsupportedEnvironment.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/UnsupportedEnvironment.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,OAAO,EAAE,MAAM;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAiB,EAAE;IACxE,OAAO;QACL,IAAI,EAAE;YACJ,eAAe,EAAE,SAAS;YAC1B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;YACvC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,OAAO,EAAE,MAAM;YACf,wCAAwC;YACxC,MAAM,EAAE,MAAM;SACf;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @internal\n */\nexport const mainTextStyles: ITextStyles = {\n  root: {\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(28),\n    margin: 'auto',\n    textAlign: 'center',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const secondaryTextStyles: ITextStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 400,\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const testContainerStyles: IStackStyles = {\n  root: {\n    margin: 'auto'\n  }\n};\n\n/**\n * @internal\n */\nexport const linkTextStyles: ILinkStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 600,\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const containerStyles: IStackStyles = {\n  root: {\n    maxWidth: _pxToRem(375),\n    padding: '2rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const continueAnywayButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      backgroundColor: '#C4314B',\n      borderColor: theme.palette.neutralLight,\n      color: theme.palette.white,\n      padding: '1rem',\n      // copy value previously set in FluentUI\n      height: '32px'\n    }\n  };\n};"]}