@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
105 lines • 2.92 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { controlBarContainerStyles } from './CallControls.styles';
const VIDEO_GALLERY_Z_INDEX = 1;
// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery
/** @private */
export const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
// The notification container should be in the highest z-band to ensure it shows on top of all other content.
const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;
/** @private */
export const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;
/**
* @private
*/
export const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {
zIndex: CONTROL_BAR_Z_INDEX
});
const containerStyle = {
width: '100%',
position: 'relative',
minHeight: '13rem' // linked to minimum space allocated to media gallery
};
/**
* @private
*/
export const containerStyleDesktop = mergeStyles(Object.assign(Object.assign({}, containerStyle), { minWidth: '30rem' }));
/**
* @private
*/
export const containerStyleMobile = mergeStyles(Object.assign(Object.assign({}, containerStyle), { minWidth: '17.5rem' }));
/**
* @private
*/
export const galleryParentContainerStyles = (backgroundColor) => ({
root: {
zIndex: VIDEO_GALLERY_Z_INDEX,
width: '100%',
background: backgroundColor
}
});
/**
* @private
*/
export const mediaGalleryContainerStyles = {
root: {
height: '100%',
width: '100%'
}
};
/**
* @private
*/
export const notificationsContainerStyles = {
root: {
width: '100%',
position: 'absolute',
top: 0,
left: 0,
padding: '1rem',
zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
pointerEvents: 'none' // to allow the operation of controls underneath the notification container
}
};
/**
* @private
*/
export const bannerNotificationStyles = {
root: {
zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
}
};
/**
* @private
*/
export const notificationStackStyles = {
root: {
zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
pointerEvents: 'auto',
// to allow the dismissal or error and warning bars in the notification container,
marginBottom: '0.5rem'
}
};
/**
* @private
*/
export const callArrangementContainerStyles = (verticalControlBar) => {
return {
root: {
width: '100%',
height: '100%',
flexDirection: verticalControlBar ? 'unset' : 'column'
}
};
};
/**
* @private
*/
export const verticalControlBarStyles = {
root: {
margin: 'auto'
}
};
//# sourceMappingURL=CallPage.styles.js.map