communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
58 lines • 2.08 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
/**
* @private
*/
export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
return {
minHeight: isNarrow
? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
width: shouldFloatLocalVideo
? isNarrow
? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
: `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
: '100%',
paddingRight: '0.5rem'
};
};
/**
* @private
*/
export const horizontalGalleryStyle = (isNarrow) => {
return {
children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
};
};
/**
* Small horizontal gallery tile size in rem
* @private
*/
export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
/**
* Large horizontal gallery tile size in rem
* @private
*/
export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
/**
* @private
*/
export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
};
/**
* @private
*/
export const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,
maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,
width: '100%',
height: '100%'
};
//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.js.map