communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
243 lines • 5.73 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { keyframes, memoizeFunction } from '@fluentui/react';
import { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';
import { isDarkThemed } from '../../theming/themeUtils';
/**
* @private
*/
export const rootStyles = {
position: 'relative',
height: '100%',
width: '100%'
};
/** @private */
export const videoTileHighContrastStyles = (theme) => ({
'@media (forced-colors: active)': {
border: `0.125rem solid ${theme.palette.black}`
}
});
/**
* @private
*/
export const videoContainerStyles = {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%',
minWidth: '100%',
minHeight: '100%',
objectPosition: 'center',
objectFit: 'cover',
zIndex: 0
};
/**
* @private
*/
export const overlayContainerStyles = {
width: '100%',
height: '100%',
zIndex: 5
};
/**
* @private
*/
export const tileInfoContainerStyle = mergeStyles({
position: 'absolute',
bottom: '0',
left: '0',
padding: '0.5rem',
width: '100%'
});
/**
* @private
*/
export const disabledVideoHint = mergeStyles({
backgroundColor: 'inherit',
boxShadow: 'none',
textAlign: 'left',
overflow: 'hidden',
whiteSpace: 'nowrap',
alignItems: 'center',
padding: '0.15rem',
maxWidth: '100%'
});
/**
* @private
*/
export const displayNameStyle = {
padding: '0.1rem',
fontSize: '0.75rem',
fontWeight: 600,
// Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color
color: 'inherit',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%'
};
/**
* @private
*/
export const pinIconStyle = {
padding: '0.125rem'
};
/**
* @private
*/
export const iconContainerStyle = {
margin: 'auto 0.2rem',
alignItems: 'center',
'& svg': {
display: 'block',
// Similar to text color, icon color will be inherited from parent container
color: 'inherit'
}
};
/**
* @private
*/
export const participantStateStringStyles = (theme) => {
return {
minWidth: 'max-content',
color: theme.palette.black,
fontSize: '0.75rem',
lineHeight: 'normal',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
padding: '0.1rem'
};
};
/**
* @private
*/
export const moreButtonStyles = (theme) => {
return {
root: {
// To ensure that the button is clickable when there is a floating video tile
zIndex: 1,
top: '-0.125rem',
height: '100%',
padding: '0rem'
},
rootHovered: {
background: 'none'
},
rootPressed: {
background: 'none'
},
icon: {
color: theme.palette.neutralPrimary
},
iconExpanded: {
background: 'none',
color: theme.palette.themePrimary
}
};
};
/**
* @private
*/
export const raiseHandContainerStyles = (theme, limitedSpace) => mergeStyles({
alignItems: 'center',
padding: '0.2rem 0.3rem',
backgroundColor: theme.palette.white,
opacity: 0.9,
borderRadius: '1rem',
margin: '0.5rem',
width: 'fit-content',
position: 'absolute',
top: 0,
height: 'fit-content'
}, limitedSpace && raiseHandLimitedSpaceStyles);
/**
* @private
*/
export const raiseHandLimitedSpaceStyles = {
// position centrally
marginLeft: 'auto',
marginRight: 'auto',
left: 0,
right: 0,
// position at the bottom
bottom: 0
};
/**
* @private
*/
export const playFrames = memoizeFunction((frameHightPx, frameCount) => keyframes({
from: {
backgroundPosition: `0px 0px`
},
to: {
backgroundPosition: `0px ${frameCount * -frameHightPx}px`
}
}));
/**
* @private
*/
export const reactionRenderingStyle = (args) => {
var _a;
const imageUrl = `url(${args.spriteImageUrl})`;
const steps = (_a = args.frameCount) !== null && _a !== void 0 ? _a : 0;
const frameSizePx = args.rawFrameSize;
return mergeStyles({
height: `${frameSizePx}px`,
width: `${frameSizePx}px`,
overflow: 'hidden',
animationName: playFrames(frameSizePx, steps),
backgroundImage: imageUrl,
animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,
animationTimingFunction: `steps(${steps})`,
animationPlayState: 'running',
animationIterationCount: 'infinite',
// Scale the emoji to fit the parent container
transform: `scale(${args.emojiSize / frameSizePx})`,
transformOrigin: 'top left'
});
};
/**
* @private
*/
export const loadSpinnerStyles = (theme, isOverLay) => {
return {
circle: {
width: '2rem',
height: '2rem'
},
label: {
fontSize: '1rem',
color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt
}
};
};
/**
* @private
*/
export const overlayStyles = () => {
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)'
};
};
/**
* @private
*/
export const overlayStylesTransparent = () => {
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
};
/**
* @private
*/
export const iconsGroupContainerStyle = {
marginLeft: '0.2rem'
};
//# sourceMappingURL=VideoTile.styles.js.map