communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
54 lines • 4.27 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets } from '@fluentui/react';
import React, { useMemo } from 'react';
import { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';
import { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';
import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
import { _convertPxToRem } from "../../../../acs-ui-common/src";
import { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
import { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
/**
* A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
*
* @private
*/
export const OverflowGallery = (props) => {
const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, isShort = false, overflowGalleryElements, horizontalGalleryStyles, overflowGalleryPosition = 'horizontalBottom', verticalGalleryStyles, onChildrenPerPageChange, parentWidth } = props;
const containerStyles = useMemo(() => {
if (overflowGalleryPosition === 'verticalRight') {
return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
}
return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
}, [shouldFloatLocalVideo, isShort, isNarrow, overflowGalleryPosition]);
const galleryStyles = useMemo(() => {
if (overflowGalleryPosition === 'verticalRight') {
return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
}
return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
}, [isNarrow, isShort, horizontalGalleryStyles, overflowGalleryPosition, verticalGalleryStyles]);
const scrollableHorizontalGalleryContainerStyles = useMemo(() => {
if (isNarrow && parentWidth) {
return {
width: shouldFloatLocalVideo
? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
: `${_convertPxToRem(parentWidth) - 1}rem`
};
}
return undefined;
}, [isNarrow, parentWidth, shouldFloatLocalVideo]);
if (overflowGalleryPosition === 'verticalRight') {
return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
}
SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;
if (isNarrow) {
// There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
// participant tiles are visible
onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
return (React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", containerStyles: scrollableHorizontalGalleryContainerStyles }));
}
return (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
};
//# sourceMappingURL=OverflowGallery.js.map