Captions RTL languages such as hebrew + arabic need to be right aligned (#2999)

* captions arabic rtl

* Change files

* Duplicate change files for beta release

* captions arabic rtl

* captions arabic rtl

* Update packages/react-composites CallWithChatComposite 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-6779a9df-dc60-497d-a51c-aca4868da6e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix bug where captions rtl languages are not right aligned ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-6779a9df-dc60-497d-a51c-aca4868da6e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix bug where captions rtl languages are not right aligned ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -56,8 +56,8 @@ export const _Caption = (props: _CaptionProps): JSX.Element => {
         <Stack.Item className={displayNameContainerClassName}>
           <Text className={displayNameClassName}>{displayName}</Text>
         </Stack.Item>
-        <Stack.Item>
-          <Text className={captionClassName}>{captionText}</Text>
+        <Stack.Item className={captionClassName} dir="auto">
+          {captionText}
         </Stack.Item>
       </Stack>
     </Stack>

packages/react-components/src/components/styles/Captions.style.ts

@@ -27,7 +27,8 @@ export const displayNameClassName = mergeStyles({
 export const captionClassName = mergeStyles({
   fontWeight: 400,
   fontSize: _pxToRem(16),
-  lineHeight: _pxToRem(22)
+  lineHeight: _pxToRem(22),
+  width: '100%'
 });
 
 /**
@@ -61,7 +62,7 @@ export const captionsBannerClassName = mergeStyles({
  * @private
  */
 export const captionsContentContainerClassName = mergeStyles({
-  minWidth: 0
+  width: '100%'
 });
 
 /**

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

@@ -4,7 +4,7 @@
 import { buildUrlWithMockAdapter, defaultMockCallAdapterState, test } from './fixture';
 import { expect } from '@playwright/test';
 import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
-import { IDS, captionsFeatureState } from '../../common/constants';
+import { IDS, captionsFeatureState, captionsFeatureStateArabic } from '../../common/constants';
 
 /* @conditional-compile-remove(close-captions) */
 test.describe('Closed Captions Banner tests', async () => {
@@ -19,6 +19,17 @@ test.describe('Closed Captions Banner tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot('show-captions.png');
   });
 
+  test('Show RTL languages from right to left', async ({ page, serverUrl }) => {
+    const initialState = defaultMockCallAdapterState();
+    if (initialState?.call) {
+      initialState.isTeamsCall = true;
+      initialState.call.captionsFeature = captionsFeatureStateArabic;
+    }
+    await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
+    await waitForSelector(page, dataUiId(IDS.videoGallery));
+    expect(await stableScreenshot(page)).toMatchSnapshot('show-captions-RTL.png');
+  });
+
   test('Captions menu shows correct when clicked on desktop', async ({ page, serverUrl }, testInfo) => {
     if (isTestProfileMobile(testInfo)) {
       test.skip();

packages/react-composites/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts

@@ -4,7 +4,7 @@
 import { loadCallPage, test } from './fixture';
 import { expect } from '@playwright/test';
 import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
-import { IDS, captionsFeatureState } from '../../common/constants';
+import { IDS, captionsFeatureState, captionsFeatureStateArabic } from '../../common/constants';
 import { defaultMockCallAdapterState, defaultMockRemoteParticipant } from '../../call/hermetic/fixture';
 
 /* @conditional-compile-remove(close-captions) */
@@ -20,6 +20,17 @@ test.describe('Closed Captions Banner tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot('show-captions.png');
   });
 
+  test('Show RTL languages from right to left', async ({ page, serverUrl }) => {
+    const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
+    if (initialState?.call) {
+      initialState.isTeamsCall = true;
+      initialState.call.captionsFeature = captionsFeatureStateArabic;
+    }
+    await loadCallPage(page, serverUrl, initialState);
+    await waitForSelector(page, dataUiId(IDS.videoGallery));
+    expect(await stableScreenshot(page)).toMatchSnapshot('show-captions-RTL.png');
+  });
+
   test('Captions menu shows correct when clicked on desktop', async ({ page, serverUrl }, testInfo) => {
     if (isTestProfileMobile(testInfo)) {
       test.skip();

packages/react-composites/tests/browser/common/constants.ts

@@ -125,3 +125,43 @@ export const captionsFeatureState = {
   currentSpokenLanguage: 'en-us',
   isCaptionsFeatureActive: true
 };
+
+export const captionsFeatureStateArabic = {
+  captions: [
+    {
+      resultType: 'Final' as const,
+      timestamp: new Date(0),
+      speaker: {
+        displayName: 'Participant 1',
+        identifier: { communicationUserId: 'communicationId1', kind: 'communicationUser' as const }
+      },
+      spokenLanguage: 'ar-ae' as const,
+      captionText: '!سعيد بلقائك! مرحبًا'
+    },
+    {
+      resultType: 'Final' as const,
+      timestamp: new Date(10000),
+      speaker: {
+        displayName: 'Participant 2',
+        identifier: { communicationUserId: 'communicationId2', kind: 'communicationUser' as const }
+      },
+      spokenLanguage: 'ar-ae' as const,
+      captionText: 'انا جيد، كيف حالك؟'
+    },
+    {
+      resultType: 'Final' as const,
+      timestamp: new Date(10001),
+      speaker: {
+        displayName: 'Participant 3',
+        identifier: { communicationUserId: 'communicationId3', kind: 'communicationUser' as const }
+      },
+      spokenLanguage: 'ar-ae' as const,
+      captionText: '!سُعدت برؤيتك'
+    }
+  ],
+  supportedSpokenLanguages: captionsAvailableLanguageStrings,
+  supportedCaptionLanguages: captionsAvailableLanguageStrings,
+  currentCaptionLanguage: 'ar-ae',
+  currentSpokenLanguage: 'ar-ae',
+  isCaptionsFeatureActive: true
+};