communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
89 lines • 2.66 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
/**
* @private
*/
export const container = () => mergeStyles({
position: 'relative', // ensures child element's `position: absolute` is relative to this container
display: 'contents'
});
/**
* @private
*/
export const loadingSpinnerContainer = () => mergeStyles({
// Position centrally on top of content. Parent must have position: relative.
position: 'absolute',
top: '50%',
bottom: '0',
left: '50%',
right: '0',
transform: 'translate(-50%, -50%)'
});
/**
* @private
*/
export const reconnectingContainer = () => mergeStyles({
// Position centrally on top of content. Parent must have position: relative.
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
background: 'rgba(0, 0, 0, 0.55)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
});
/**
* @private
*/
export const loadSpinnerStyles = {
root: {
height: '100%' // ensure height fills container
},
circle: {
maxHeight: '5rem',
height: '50%',
width: 'unset', // remove default width applied by fluent for spinners
aspectRatio: '1 / 1', // make height match width to ensure a circle shape
borderWidth: '0.25em'
}
};
/**
* @private
*/
export const reconnectSpinnerStyles = () => (Object.assign(Object.assign({}, loadSpinnerStyles), { label: {
color: 'white'
}, circle: Object.assign(Object.assign({}, loadSpinnerStyles.circle), { maxHeight: '2rem', borderWidth: 'unset' }) }));
/**
* @private
*/
export const mediaContainer = (theme) => mergeStyles({
position: 'relative',
height: '100%',
width: '100%',
background: 'transparent',
display: 'flex',
'& video': {
borderRadius: theme.effects.roundedCorner4
}
});
/**
* @private
*/
export const invertedVideoInPipStyle = (theme) => mergeStyles(mediaContainer(theme), {
// The HTMLElement returned by the headless SDK is already inverted.
// But in picture-in-picture mode, we do not want to invert the host HTMLElement.
// Instead, we need to target the :picture-in-picture pseudoclass.
//
// First reset the host HTMLElement.
transform: 'rotateY(180deg)',
// This doesn't work yet on latest Edge.
// Probably just not implemented yet.
// picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class
'& video:picture-in-picture': {
transform: 'rotateY(180deg)'
}
});
//# sourceMappingURL=StreamMedia.styles.js.map