Call composite switches between vertical and horizontal gallery depending on aspect ratio

change-beta/@azure-communication-react-99806516-bbcd-4ff1-b39f-1032fdfd686a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "VideoGallery in call composite will use a vertical overflow gallery when its aspect ratio is 16:9 or greater.",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-99806516-bbcd-4ff1-b39f-1032fdfd686a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "VideoGallery in call composite will use a vertical overflow gallery when its aspect ratio is 16:9 or greater.",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -101,14 +101,20 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
 
   const layerHostId = useId('layerhost');
 
-  let localVideoSize = LARGE_FLOATING_MODAL_SIZE_PX;
-  if (isNarrow) {
-    localVideoSize = SMALL_FLOATING_MODAL_SIZE_PX;
-  }
-  /* @conditional-compile-remove(vertical-gallery) */
-  if (overflowGalleryLayout === 'VerticalRight') {
-    localVideoSize = VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
-  }
+  const localVideoSize = useMemo(() => {
+    if (isNarrow) {
+      return SMALL_FLOATING_MODAL_SIZE_PX;
+    }
+    /* @conditional-compile-remove(vertical-gallery) */
+    if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
+      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+    }
+    return LARGE_FLOATING_MODAL_SIZE_PX;
+  }, [
+    horizontalGalleryTiles.length,
+    isNarrow,
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+  ]);
 
   const wrappedLocalVideoComponent =
     localVideoComponent && shouldFloatLocalVideo ? (

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

@@ -48,7 +48,7 @@ export const OverflowGallery = (props: {
   const containerStyles = useMemo(() => {
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryLayout === 'VerticalRight') {
-      return verticalGalleryContainerStyle(shouldFloatLocalVideo);
+      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
     }
     return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
   }, [shouldFloatLocalVideo, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);

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

@@ -4,7 +4,7 @@
 import { IStyle } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
 import { VerticalGalleryStyles } from '../../VerticalGallery';
-import { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
+import { SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
 
 /**
  * VerticalGallery tile size in rem:
@@ -24,12 +24,20 @@ export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9,
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
-export const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean): IStyle => {
-  return {
-    width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
-    paddingBottom: '0.5rem'
-  };
+export const verticalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {
+  return isNarrow
+    ? {
+        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+        height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+        paddingBottom: '0.5rem'
+      }
+    : {
+        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+        height: shouldFloatLocalVideo
+          ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+          : '100%',
+        paddingBottom: '0.5rem'
+      };
 };
 
 /**

packages/react-composites/src/composites/CallComposite/components/MediaGallery.tsx

@@ -1,14 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';
+/* @conditional-compile-remove(vertical-gallery) */
+import { useRef } from 'react';
 import {
   VideoGallery,
   VideoStreamOptions,
   OnRenderAvatarCallback,
   CustomAvatarOptions,
   Announcer
 } from '@internal/react-components';
+/* @conditional-compile-remove(vertical-gallery) */
+import { _useContainerWidth, _useContainerHeight } from '@internal/react-components';
 /* @conditional-compile-remove(pinned-participants) */
 import { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';
 import { usePropsFor } from '../hooks/usePropsFor';
@@ -65,6 +69,13 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
   const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
   const announcerString = useParticipantChangedAnnouncement();
 
+  /* @conditional-compile-remove(vertical-gallery) */
+  const containerRef = useRef<HTMLDivElement>(null);
+  /* @conditional-compile-remove(vertical-gallery) */
+  const containerWidth = _useContainerWidth(containerRef);
+  /* @conditional-compile-remove(vertical-gallery) */
+  const containerHeight = _useContainerHeight(containerRef);
+
   const cameraSwitcherProps = useMemo(() => {
     return {
       ...cameraSwitcherCallback,
@@ -96,6 +107,15 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
       : { kind: 'contextual' };
   }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);
 
+  /* @conditional-compile-remove(vertical-gallery) */
+  const overflowGalleryLayout = useMemo(
+    () =>
+      containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+        ? 'VerticalRight'
+        : 'HorizontalBottom',
+    [containerWidth, containerHeight]
+  );
+
   const VideoGalleryMemoized = useMemo(() => {
     return (
       <VideoGallery
@@ -109,21 +129,24 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
         onRenderAvatar={onRenderAvatar}
         /* @conditional-compile-remove(pinned-participants) */
         remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}
+        /* @conditional-compile-remove(vertical-gallery) */
+        overflowGalleryLayout={overflowGalleryLayout}
       />
     );
   }, [
     videoGalleryProps,
     props.isMobile,
     onRenderAvatar,
     cameraSwitcherProps,
-    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
+    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
   ]);
 
   return (
-    <>
+    <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>
       <Announcer announcementString={announcerString} ariaLive={'polite'} />
       {VideoGalleryMemoized}
-    </>
+    </div>
   );
 };
 
@@ -153,3 +176,5 @@ export const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, should
     }
   }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
+
+const mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };

packages/react-composites/tests/browser/call/hermetic/HorizontalGallery.test.ts

@@ -3,7 +3,15 @@
 
 import { expect } from '@playwright/test';
 import { IDS } from '../../common/constants';
-import { dataUiId, dragToRight, existsOnPage, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
+import {
+  dataUiId,
+  dragToRight,
+  existsOnPage,
+  isTestProfileDesktop,
+  pageClick,
+  stableScreenshot,
+  waitForSelector
+} from '../../common/utils';
 import {
   addScreenshareStream,
   addVideoStream,
@@ -15,6 +23,13 @@ import {
 } from './fixture';
 
 test.describe('HorizontalGallery tests', async () => {
+  // set view port to 1:1 aspect ratio to ensure 'HorizontalBottom' overflowGalleryLayout is used for VideoGallery on Desktop
+  test.beforeEach(async ({ page }, testInfo) => {
+    if (isTestProfileDesktop(testInfo)) {
+      page.setViewportSize({ width: 900, height: 900 });
+    }
+  });
+
   test('HorizontalGallery should have 1 audio participant', async ({ page, serverUrl }) => {
     const paul = defaultMockRemoteParticipant('Paul Bridges');
     addVideoStream(paul, true);