communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
98 lines • 3.89 kB
TypeScript
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