Cherry Pick Video Gallery bug fix into release branch (#5780)

* Change files

* RTT to stable

* Change files

* update

* Update

* Move width/height calculation on call page

* Change files

* update

* changelog

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Signed-off-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com>
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/communication-react/CHANGELOG.stable.md

@@ -9,6 +9,15 @@
 Mon, 07 Apr 2025 16:07:48 GMT 
 [Compare changes](https://github.com/azure/communication-ui-library/compare/1.26.0-beta.1...1.26.0)
 
+### Features
+
+#### Real Time Text
+We are excited to announce that the Azure Communication Services Web UI Library now supports RTT (Real Time Text). In an RTT enabled audio or video call, end-users augment the call with text. RTT text communications are transmitted immediately as they are typed, character-by-character, without the user hitting “send.” Users can enable RTT in a call, type to send real time text, or receive real time text from other users. Developers can use this functionality today through our composites (e.g CallComposite, CallWithChatComposite) as well as through components (e.g VideoGallery). This feature is a required by the EU as a core accessibility feature, with implementation needed by June 2025.
+
+* Receive and send Real Time Text messages
+* Seamless integration of real-time text with captions, allowing you to view both simultaneously
+* In our composites, Real Time Text turns on automatically for everyone when a message is first received/sent
+
 ### Improvements
 - Add API to disable the notifications in the CallComposite ([PR #5751](https://github.com/azure/communication-ui-library/pull/5751) by dmceachern@microsoft.com)
 - Update calling effects package to version 1.1.4 ([PR #5774](https://github.com/Azure/communication-ui-library/pull/5774) by dmceachern@microsoft.com)

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>
   );
 };