[Vertical Galleries] Update styles to allow tile vertical resizing (#2785)

* Added overflowGalleryLayout prop to VideoGallery to control component for overflow participants

* Refactor FloatingLocalVideo props

* renamed VideoGalleryResponsiveHorizontalGallery -> OverflowGallery

* Change files

* Duplicate change files for beta release

* remove ScrollableHorizontalGallery from DefaultLayout

* lint fix

* overflowGalleryLayout = 'HorizontalBottom' as default for VIdeoGallery

* update CSS for proper button placement.

* update css for larger page counts

* fix up styles bottom out control bar

* Change files

* Duplicate change files for beta release

* memoize styles in verticalGallery

* update style name

* fix lint

* update per comments

* update styles to allow tile vertical resizing

* Change files

* Duplicate change files for beta release

* fix pagination label bug

* fix pagination label issues

---------

Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>
Co-authored-by: mgamis-msft <79475487+mgamis-msft@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-4f5a740e-65a4-48d1-b0a2-fe778b19263a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to allow tile vertical resizing",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-4f5a740e-65a4-48d1-b0a2-fe778b19263a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to allow tile vertical resizing",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VerticalGallery.tsx

@@ -74,19 +74,19 @@ interface VerticalGalleryControlBarProps {
 export const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {
   const { children, styles, childrenPerPage } = props;
 
-  const [page, setPage] = useState(0);
+  const [page, setPage] = useState(1);
   const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });
 
   const numberOfChildren = React.Children.count(children);
-  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
 
   const paginatedChildren: React.ReactNode[][] = useMemo(() => {
     return bucketize(React.Children.toArray(children), childrenPerPage);
   }, [children, childrenPerPage]);
 
-  const firstIndexOfCurrentPage = page * childrenPerPage;
+  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
   const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-  const childrenOnCurrentPage = paginatedChildren[clippedPage];
+  const childrenOnCurrentPage = paginatedChildren[clippedPage - 1];
 
   const showButtons = numberOfChildren > childrenPerPage;
 
@@ -97,11 +97,15 @@ export const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {
     setPage(page + 1);
   };
 
+  if (page > lastPage && lastPage > 0) {
+    setPage(lastPage);
+  }
+
   useEffect(() => {
-    if (page > 0 && page < lastPage && showButtons) {
+    if (page > 1 && page < lastPage && showButtons) {
       // we are somewhere in between first and last pages.
       setButtonState({ previous: false, next: false });
-    } else if (page === 0 && showButtons) {
+    } else if (page === 1 && showButtons) {
       // we are on the first page.
       setButtonState({ previous: true, next: false });
     } else if (page === lastPage && showButtons) {
@@ -111,7 +115,7 @@ export const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {
   }, [page, numberOfChildren, lastPage, showButtons]);
 
   const childContainerStyle = useMemo(() => {
-    return { root: childrenContainerStyle };
+    return { root: childrenContainerStyle(2) };
   }, []);
 
   const childrenStyles = useMemo(() => {

packages/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts

@@ -39,7 +39,9 @@ export const VERTICAL_GALLERY_TILE_STYLE = {
   minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
   minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
   maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
-  maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`
+  maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+  width: '100%',
+  height: '100%'
 };
 /**
  * @private

packages/react-components/src/components/styles/VerticalGallery.styles.ts

@@ -13,9 +13,12 @@ export const VERTICAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-export const childrenContainerStyle: IStyle = {
-  width: '100%',
-  gap: `${VERTICAL_GALLERY_GAP}rem`
+export const childrenContainerStyle = (pageControlBarHeight: number): IStyle => {
+  return {
+    width: '100%',
+    height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,
+    gap: `${VERTICAL_GALLERY_GAP}rem`
+  };
 };
 
 /**