Move width/height calculation on call page for Video Gallery (#5777)

* Move width/height calculation on call page

* Change files

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* update

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-8fcb3415-dfe8-462f-b398-fbe8acc4da17.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Fix bug where mobile video gallery shows landscape view when RTT banner is enlarged",
+  "comment": "Fix bug where mobile video gallery shows landscape view when RTT banner is enlarged",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-8fcb3415-dfe8-462f-b398-fbe8acc4da17.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Fix bug where mobile video gallery shows landscape view when RTT banner is enlarged",
+  "comment": "Fix bug where mobile video gallery shows landscape view when RTT banner is enlarged",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1,8 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { CSSProperties, useCallback, useMemo } from 'react';
-import { useRef } from 'react';
+import React, { CSSProperties, useCallback, useMemo, useRef } from 'react';
 import {
   VideoGallery,
   VideoStreamOptions,
@@ -71,6 +70,7 @@ export interface MediaGalleryProps {
     height: 'full' | 'default';
   };
   localScreenShareView?: LocalScreenShareView;
+  compositeContainerAspectRatio?: number;
 }
 
 /**
@@ -84,7 +84,8 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     setPromptProps,
     hideSpotlightButtons,
     videoTilesOptions,
-    captionsOptions
+    captionsOptions,
+    compositeContainerAspectRatio
   } = props;
 
   const videoGalleryProps = usePropsFor(VideoGallery);
@@ -95,12 +96,11 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
   const userRole = useSelector(getRole);
   const capabilities = useSelector(getCapabilites);
   const isRoomsCall = useSelector(getIsRoomsCall);
+  const reactionResources = useSelector(getReactionResources);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const containerWidth = _useContainerWidth(containerRef);
   const containerHeight = _useContainerHeight(containerRef);
-  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
-  const reactionResources = useSelector(getReactionResources);
 
   const layoutBasedOnTilePosition: VideoGalleryLayout = getVideoGalleryLayoutBasedOnLocalOptions(
     (props.localVideoTileOptions as LocalVideoTileOptions)?.position
@@ -209,7 +209,7 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
         localVideoTileSize={
           props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
             ? 'hidden'
-            : props.isMobile && containerAspectRatio < 1
+            : props.isMobile && compositeContainerAspectRatio && compositeContainerAspectRatio < 1
               ? '9:16'
               : '16:9'
         }
@@ -242,7 +242,6 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     overflowGalleryPosition,
     userRole,
     isRoomsCall,
-    containerAspectRatio,
     pinnedParticipants,
     onPinParticipant,
     onUnpinParticipant,
@@ -254,7 +253,8 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     onStopRemoteSpotlightWithPrompt,
     layoutBasedOnTilePosition,
     capabilities?.muteOthers,
-    props.localScreenShareView
+    props.localScreenShareView,
+    compositeContainerAspectRatio
   ]);
 
   return (

packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx

@@ -4,12 +4,18 @@
 import { DiagnosticQuality } from '@azure/communication-calling';
 import { useId } from '@fluentui/react-hooks';
 import { _isInCall } from '@internal/calling-component-bindings';
-import { ActiveErrorMessage, ErrorBar, ParticipantMenuItemsCallback } from '@internal/react-components';
+import {
+  _useContainerHeight,
+  _useContainerWidth,
+  ActiveErrorMessage,
+  ErrorBar,
+  ParticipantMenuItemsCallback
+} from '@internal/react-components';
 import { CustomAvatarOptions, VideoTile } from '@internal/react-components';
 
 import { ActiveNotification } from '@internal/react-components';
 import { VideoGalleryLayout } from '@internal/react-components';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { useCallback } from 'react';
 import { useState } from 'react';
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
@@ -108,6 +114,10 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
   const [dtmfDialerPresent, setDtmfDialerPresent] = useState<boolean>(renderDtmfDialerFromStart);
   const isPstnCall = callees?.some((callee) => isPhoneNumberIdentifier(callee));
   const isCTECall = useSelector((state) => state.userId.kind === 'microsoftTeamsUser');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerWidth = _useContainerWidth(containerRef);
+  const containerHeight = _useContainerHeight(containerRef);
+  const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
 
   const strings = useLocale().strings.call;
 
@@ -196,13 +206,14 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
           videoTilesOptions={options?.videoTilesOptions}
           captionsOptions={options?.captionsBanner}
           localScreenShareView={options?.galleryOptions?.localScreenShareView}
+          compositeContainerAspectRatio={containerAspectRatio}
         />
       );
     }
   };
 
   return (
-    <>
+    <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
       <CallArrangement
         id={drawerMenuHostId}
         complianceBannerProps={{ ...complianceBannerProps, strings }}
@@ -256,7 +267,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
         isRTTSupportedCall={!isPstnCall && !isCTECall}
       />
       {<Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />}
-    </>
+    </div>
   );
 };