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