[Rooms] Fix overflow gallery to use all available space when you are a consumer (#3825)

* Fix overflow gallery to use all available space when there is no local video

* Change files

* Duplicate change files for beta release

* remove unneeded layout prop from OverflowGallery

Author: mgamis-msft

change-beta/@azure-communication-react-55786f13-dd46-4777-b741-2880e3575a01.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Overflow gallery",
+  "comment": "Fix overflow gallery to use all available space when there is no local video",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-55786f13-dd46-4777-b741-2880e3575a01.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Overflow gallery",
+  "comment": "Fix overflow gallery to use all available space when there is no local video",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery/DefaultLayout.tsx

@@ -118,8 +118,6 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
         onChildrenPerPageChange={(n: number) => {
           childrenPerPage.current = n;
         }}
-        /* @conditional-compile-remove(gallery-layouts) */
-        layout={'default'}
         parentWidth={parentWidth}
       />
     );

packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx

@@ -208,7 +208,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
         isShort={isShort}
         onFetchTilesToRender={setIndexesToRender}
         isNarrow={isNarrow}
-        shouldFloatLocalVideo={true}
+        shouldFloatLocalVideo={!!localVideoComponent}
         overflowGalleryElements={overflowGalleryTiles}
         horizontalGalleryStyles={styles?.horizontalGallery}
         /* @conditional-compile-remove(vertical-gallery) */
@@ -230,7 +230,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
     setIndexesToRender,
     /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,
-    parentWidth
+    parentWidth,
+    localVideoComponent
   ]);
 
   return (

packages/react-components/src/components/VideoGallery/OverflowGallery.tsx

@@ -13,7 +13,6 @@ import { VerticalGalleryStyles } from '../VerticalGallery';
 /* @conditional-compile-remove(vertical-gallery) */
 import { OverflowGalleryPosition } from '../VideoGallery';
 /* @conditional-compile-remove(gallery-layouts) */
-import { VideoGalleryLayout } from '../VideoGallery';
 import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import {
   SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,
@@ -46,8 +45,6 @@ export const OverflowGallery = (props: {
   /* @conditional-compile-remove(vertical-gallery) */
   overflowGalleryPosition?: OverflowGalleryPosition;
   onChildrenPerPageChange?: (childrenPerPage: number) => void;
-  /* @conditional-compile-remove(gallery-layouts) */
-  layout?: VideoGalleryLayout;
   parentWidth?: number;
 }): JSX.Element => {
   const {
@@ -94,14 +91,13 @@ export const OverflowGallery = (props: {
   const scrollableHorizontalGalleryContainerStyles = useMemo(() => {
     if (isNarrow && parentWidth) {
       return {
-        width:
-          props.layout === 'default'
-            ? `${_convertPxToRem(parentWidth) - 1}rem`
-            : `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+        width: shouldFloatLocalVideo
+          ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+          : `${_convertPxToRem(parentWidth) - 1}rem`
       };
     }
     return undefined;
-  }, [isNarrow, parentWidth, props.layout]);
+  }, [isNarrow, parentWidth, shouldFloatLocalVideo]);
 
   /* @conditional-compile-remove(vertical-gallery) */
   if (overflowGalleryPosition === 'verticalRight') {

packages/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx

@@ -183,7 +183,7 @@ export const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element
         isShort={isShort}
         onFetchTilesToRender={setIndexesToRender}
         isNarrow={isNarrow}
-        shouldFloatLocalVideo={true}
+        shouldFloatLocalVideo={!!localVideoComponent}
         overflowGalleryElements={overflowGalleryTiles}
         horizontalGalleryStyles={styles?.horizontalGallery}
         /* @conditional-compile-remove(vertical-gallery) */
@@ -205,7 +205,8 @@ export const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
     setIndexesToRender,
     /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery,
-    parentWidth
+    parentWidth,
+    localVideoComponent
   ]);
 
   return (