communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
151 lines • 5.33 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, 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' }
};
/**
* Small floating modal width and height in rem for small screen
*/
export const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };
/**
* Large floating modal width and height in rem for large screen
* Aspect ratio: 16:9
*/
export const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.75, height: 7.5 };
/**
* Vertical gallery floating modal width and height in rem
* Aspect ratio: 16:9
*/
export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };
/**
* Vertical gallery floating modal width and height in rem
* Aspect ratio: 16:9
*/
export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };
/**
* @private
* z-index to ensure that the local video tile is above the video gallery.
*/
export const LOCAL_VIDEO_TILE_ZINDEX = 2;
/**
* @private
*/
export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent, overflowGalleryPosition) => {
return {
width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
position: 'absolute',
bottom: overflowGalleryPosition !== 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
top: overflowGalleryPosition === 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
borderRadius: theme.effects.roundedCorner4,
overflow: 'hidden',
right: `${dockedlocalVideoTileContainerPaddingRem}rem`
};
};
/**
* @private
*/
export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
root: { boxShadow: theme.effects.elevation8 }
});
};
/**
* @private
*/
export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
return concatStyleSets({
main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {
bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,
right: `${floatinglocalVideoModalInitialPositionGapRem}rem`
})
}, {
main: {
boxShadow: theme.effects.elevation8,
':focus-within': {
boxShadow: theme.effects.elevation16,
border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
}
}
}, {
// Needed to allow the videoGallery underneath to receive pointer events
root: {
pointerEvents: 'none'
}
}, localVideoModalStyles);
};
/**
* Initial position gap of the floating local video modal.
* ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from
* the bottom and 1rem from the right.
* @private
*/
export const floatinglocalVideoModalInitialPositionGapRem = 1;
/**
* Padding of the docked local video tile container.
* @private
*/
export const dockedlocalVideoTileContainerPaddingRem = 0.5;
/**
* @private
*/
export const floatingLocalVideoTileStyle = {
root: {
position: 'absolute',
zIndex: LOCAL_VIDEO_TILE_ZINDEX,
height: '100%',
width: '100%'
}
};
/**
* @private
*/
export const localVideoCameraCycleButtonStyles = (theme) => {
return {
root: {
position: 'absolute',
width: _pxToRem(32),
height: _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.
},
icon: {
paddingLeft: _pxToRem(3),
paddingRight: _pxToRem(3),
margin: 0
},
flexContainer: {
paddingBottom: _pxToRem(8)
}
};
};
/**
* Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
* @private
*/
export const localVideoModalStyles = {
keyboardMoveIconContainer: {
zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
}
};
//# sourceMappingURL=FloatingLocalVideo.styles.js.map