>]}
onFetchTilesToRender={onFetchTilesToRender}
key="scrollable-horizontal-gallery"
- /* @conditional-compile-remove(gallery-layouts) */
- layout={props.layout}
+ containerStyles={scrollableHorizontalGalleryContainerStyles}
/>
);
}
diff --git a/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx b/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx
index 359774db0fc..455f21c06bf 100644
--- a/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx
+++ b/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx
@@ -1,15 +1,13 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
-import { Stack } from '@fluentui/react';
+import { IStyle, Stack, mergeStyles } from '@fluentui/react';
import React, { useEffect, useRef } from 'react';
import { useDraggable } from 'react-use-draggable-scroll';
import {
scrollableHorizontalGalleryContainerStyles,
scrollableHorizontalGalleryStyles
} from './styles/ScrollableHorizontalGallery.style';
-/* @conditional-compile-remove(gallery-layouts) */
-import { VideoGalleryLayout } from '../VideoGallery';
/**
* Component to display elements horizontally in a scrollable container
@@ -18,17 +16,9 @@ import { VideoGalleryLayout } from '../VideoGallery';
export const ScrollableHorizontalGallery = (props: {
horizontalGalleryElements?: JSX.Element[];
onFetchTilesToRender?: (indexes: number[]) => void;
- /* @conditional-compile-remove(gallery-layouts) */
- layout?: VideoGalleryLayout;
+ containerStyles?: IStyle;
}): JSX.Element => {
- const { horizontalGalleryElements, onFetchTilesToRender, /* @conditional-compile-remove(gallery-layouts) */ layout } =
- props;
-
- const useFullWidthTrampoline = (): boolean => {
- /* @conditional-compile-remove(gallery-layouts) */
- return layout === 'default' ? true : false;
- return false;
- };
+ const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;
useEffect(() => {
const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];
@@ -44,7 +34,7 @@ export const ScrollableHorizontalGallery = (props: {
{
childrenPerPage.current = n;
}}
+ parentWidth={parentWidth}
/>
);
}, [
@@ -203,7 +204,8 @@ export const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element
styles?.horizontalGallery,
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
setIndexesToRender,
- /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
+ /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,
+ parentWidth
]);
return (
diff --git a/packages/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts b/packages/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts
index 73f609188ff..d45e685212f 100644
--- a/packages/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts
+++ b/packages/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts
@@ -1,8 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
-import { IStackStyles, mergeStyles } from '@fluentui/react';
-import { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
+import { IStackStyles, IStyle } from '@fluentui/react';
import {
SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,
SMALL_HORIZONTAL_GALLERY_TILE_STYLE
@@ -23,14 +22,11 @@ export const scrollableHorizontalGalleryStyles: IStackStyles = {
/**
* @private
*/
-export const scrollableHorizontalGalleryContainerStyles = (fullWidth: boolean): string => {
- return mergeStyles({
- display: 'flex',
- width: fullWidth ? '100%' : `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
- minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
- overflow: 'scroll',
- '-ms-overflow-style': 'none',
- 'scrollbar-width': 'none',
- '::-webkit-scrollbar': { display: 'none' }
- });
+export const scrollableHorizontalGalleryContainerStyles: IStyle = {
+ display: 'flex',
+ minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+ overflow: 'scroll',
+ '-ms-overflow-style': 'none',
+ 'scrollbar-width': 'none',
+ '::-webkit-scrollbar': { display: 'none' }
};