@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
71 lines • 2.09 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../acs-ui-common/src";
/**
* @private
*/
export const videoGalleryOuterDivStyle = mergeStyles({
position: 'relative',
width: '100%',
height: '100%'
});
/**
* @private
*/
export const videoGalleryContainerStyle = {
root: {
position: 'relative',
height: '100%',
width: '100%',
padding: '0.5rem'
}
};
/**
* @private
*/
export const localVideoCameraCycleButtonStyles = (theme, size) => {
return {
root: {
position: 'absolute',
width: size === 'large' ? _pxToRem(40) : _pxToRem(32),
height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
right: '0rem',
top: '0rem',
color: '#FFFFFF',
// only shows up on running video feed to we want to force specific colours.
zIndex: 2,
// shows the button directly over the local video feed.
background: 'rgba(0,0,0,0.4)',
borderRadius: theme.effects.roundedCorner2
},
rootFocused: {
// styles to remove the unwanted white highlight and blue colour after tapping on button.
color: '#FFFFFF',
background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
},
rootDisabled: {
// In the disabled state, FluentUI sets the position to relative. We need to override this to keep the button correctly positioned.
position: 'absolute'
},
icon: {
paddingLeft: _pxToRem(3),
paddingRight: _pxToRem(3),
margin: 0
},
flexContainer: {
paddingBottom: _pxToRem(8),
height: 'unset'
}
};
};
/**
* @private
*/
export const localVideoTileContainerStyles = {
root: {
width: '100%',
height: '100%'
}
};
//# sourceMappingURL=VideoGallery.styles.js.map