Merge remote-tracking branch 'origin/main' into fuyan/remove-media-ac…

…cess-cc-3
Azure · Jan 29, 2025 · 7373b5d · 7373b5d
2 parents 8bd9b30 + eb8b42e
commit 7373b5d
Show file tree

Hide file tree

Showing 88 changed files with 490 additions and 49 deletions.
diff --git a/change-beta/@azure-communication-react-19209e7d-098c-4cfc-b0e5-40636320691b.json b/change-beta/@azure-communication-react-19209e7d-098c-4cfc-b0e5-40636320691b.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Change id to sequenceId for RTT feature state",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-bb8f9249-1983-497f-a7b5-e49bc5bc2d2b.json b/change-beta/@azure-communication-react-bb8f9249-1983-497f-a7b5-e49bc5bc2d2b.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "rtt",
+  "comment": "Fixed some component bugs and completed RTT storybook",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-d1e34c71-ddc5-428c-b305-761f54abc723.json b/change-beta/@azure-communication-react-d1e34c71-ddc5-428c-b305-761f54abc723.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Add RTT to composite experience",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/calling-component-bindings/src/captionsSelector.ts b/packages/calling-component-bindings/src/captionsSelector.ts
@@ -179,7 +179,7 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
       .map((rtt) => {
         const userId = getRealTimeTextSpeakerIdentifier(rtt);
         return {
-          id: rtt.id,
+          id: rtt.sequenceId,
           displayName: getRealTimeTextDisplayName(rtt, identifier, remoteParticipants, displayName, userId),
           message: rtt.message,
           userId,
@@ -194,7 +194,7 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
       .map((rtt) => {
         const userId = getRealTimeTextSpeakerIdentifier(rtt);
         return {
-          id: rtt.id,
+          id: rtt.sequenceId,
           displayName: getRealTimeTextDisplayName(rtt, identifier, remoteParticipants, displayName, userId),
           message: rtt.message,
           userId,
@@ -207,7 +207,7 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
     const myInProgress =
       realTimeTexts?.myInProgress && realTimeTexts.myInProgress.message !== ''
         ? {
-            id: realTimeTexts.myInProgress.id,
+            id: realTimeTexts.myInProgress.sequenceId,
             displayName: displayName,
             message: realTimeTexts.myInProgress.message,
             userId: identifier,

diff --git a/packages/calling-stateful-client/src/CallClientState.ts b/packages/calling-stateful-client/src/CallClientState.ts
@@ -106,7 +106,7 @@ export interface RealTimeTextInfo {
   /**
    * The sequence id of the real time text.
    */
-  id: number;
+  sequenceId: number;
   /**
    * The sender of the real time text.
    */

diff --git a/packages/calling-stateful-client/src/CallContext.ts b/packages/calling-stateful-client/src/CallContext.ts
@@ -1200,7 +1200,7 @@ export class CallContext {
         realTimeTexts.myInProgress = undefined;
       } else {
         realTimeTexts.currentInProgress = realTimeTexts.currentInProgress?.filter(
-          (message) => message.id !== newRealTimeText.id
+          (message) => message.sequenceId !== newRealTimeText.sequenceId
         );
       }
     } else {
@@ -1219,7 +1219,7 @@ export class CallContext {
         // find the index of the existing in progress message
         // replace the existing in progress message with the new one
         const existingIndex = realTimeTexts.currentInProgress?.findIndex(
-          (message) => message.id === newRealTimeText.id
+          (message) => message.sequenceId === newRealTimeText.sequenceId
         );
         if (existingIndex === -1) {
           realTimeTexts.currentInProgress?.push(newRealTimeText);

diff --git a/packages/calling-stateful-client/src/Converter.ts b/packages/calling-stateful-client/src/Converter.ts
@@ -285,7 +285,6 @@ export function convertFromSDKToCaptionInfoState(caption: AcsCaptionsInfo): Capt
  */
 export function convertFromSDKRealTimeTextToRealTimeTextInfoState(realTimeText: ACSRealTimeTextInfo): RealTimeTextInfo {
   return {
-    id: realTimeText.sequenceId,
     message: realTimeText.text,
     isMe: realTimeText.isLocal,
     ...realTimeText

diff --git a/packages/calling-stateful-client/src/RealTimeTextSubscriber.ts b/packages/calling-stateful-client/src/RealTimeTextSubscriber.ts
@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+
 /* @conditional-compile-remove(rtt) */
 import { RealTimeTextFeature, RealTimeTextInfo, RealTimeTextReceivedEventHandler } from '@azure/communication-calling';
 /* @conditional-compile-remove(rtt) */

diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -4633,12 +4633,12 @@ export interface RealTimeTextCallFeatureState {
 
 // @beta (undocumented)
 export interface RealTimeTextInfo {
-    id: number;
     isMe?: boolean;
     message: string;
     receivedTimestamp?: Date;
     resultType: RealTimeTextResultType;
     sender: ParticipantInfo;
+    sequenceId: number;
     updatedTimestamp?: Date;
 }
 
@@ -5124,7 +5124,7 @@ export interface StartRealTimeTextButtonProps extends ControlBarButtonProps {
 
 // @beta
 export interface StartRealTimeTextButtonStrings {
-    onLabel: string;
+    label: string;
     tooltipOnContent: string;
 }
 

diff --git a/packages/react-components/src/components/CaptionsBanner.tsx b/packages/react-components/src/components/CaptionsBanner.tsx
@@ -69,7 +69,7 @@ export type CaptionsInformation = {
  */
 export type RealTimeTextInformation = {
   /**
-   * The sequence id of the real time text.
+   * The id of the real time text.
    */
   id: number;
   /**
@@ -304,14 +304,14 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     return () => {
       captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);
     };
-  }, [handleScrollToTheBottom, isCaptionsOn]);
+  }, [handleScrollToTheBottom, isCaptionsOn, /* @conditional-compile-remove(rtt) */ isRealTimeTextOn]);
 
   useEffect(() => {
     // only auto scroll to bottom is already is at bottom of scroll before new caption comes in
     if (isAtBottomOfScroll) {
       scrollToBottom();
     }
-  }, [captions, isAtBottomOfScroll]);
+  }, [captions, /* @conditional-compile-remove(rtt) */ realTimeTexts, isAtBottomOfScroll]);
   /* @conditional-compile-remove(rtt) */
   const [textFieldValue, setTextFieldValue] = useState<string>('');
   /* @conditional-compile-remove(rtt) */
@@ -379,7 +379,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
 
   return (
     <>
-      {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
+      {(startCaptionsInProgress || isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
           {
             /* @conditional-compile-remove(rtt) */ (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (
@@ -422,7 +422,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
           {
             /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (
               <TextField
-                label={strings.realTimeTextInputBoxDefaultText}
+                placeholder={strings.realTimeTextInputBoxDefaultText}
                 value={textFieldValue}
                 onKeyDown={handleKeyDown}
                 onChange={(_, newValue) => {

diff --git a/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx b/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx
@@ -58,6 +58,10 @@ export interface _DrawerMenuItemProps {
    * Custom JSX item injection for custom mobile view button on drawers
    */
   onRendererContent?: () => JSX.Element;
+  /**
+   * Aria label for the menu item
+   */
+  ariaLabel?: string;
 }
 
 /**
@@ -92,6 +96,7 @@ export const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {
         onClick={props.disabled ? undefined : onClick}
         tokens={menuItemChildrenGap}
         id={props.id}
+        aria-label={props.ariaLabel}
       >
         {props.iconProps && (
           <Stack.Item

diff --git a/packages/react-components/src/components/StartRealTimeTextButton.tsx b/packages/react-components/src/components/StartRealTimeTextButton.tsx
@@ -38,9 +38,9 @@ export interface StartRealTimeTextButtonProps extends ControlBarButtonProps {
  */
 export interface StartRealTimeTextButtonStrings {
   /**
-   * Label for when action is to start RealTimeText
+   * Label for the start Real Time Text button
    */
-  onLabel: string;
+  label: string;
   /**
    * Content for when button is checked, RealTimeText is on
    */
@@ -64,7 +64,6 @@ export const StartRealTimeTextButton = (props: StartRealTimeTextButtonProps): JS
   const onRenderStartIcon = (): JSX.Element => {
     return <_HighContrastAwareIcon disabled={props.disabled} iconName="RealTimeTextIcon" />;
   };
-
   return (
     <ControlBarButton
       {...props}

diff --git a/packages/react-components/src/localization/locales/en-US/strings.json b/packages/react-components/src/localization/locales/en-US/strings.json
@@ -305,7 +305,7 @@
     "tooltipOffContent": "Turn on captions"
   },
   "startRealTimeTextButton": {
-    "onLabel": "Turn on RTT for this call",
+    "label": "Turn on RTT for this call",
     "tooltipOnContent": "RTT is turned on for this call"
   },
   "messageThread": {

diff --git a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx b/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
@@ -537,6 +537,12 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     : latestNotifications;
 
   const reactionResources = useSelector(getReactionResources);
+  /* @conditional-compile-remove(rtt) */
+  const [openRealTimeText, setOpenRealTimeText] = useState<boolean>(false);
+  /* @conditional-compile-remove(rtt) */
+  const onStartRealTimeText = useCallback(() => {
+    setOpenRealTimeText(true);
+  }, []);
 
   return (
     <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>
@@ -578,6 +584,12 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                   onPeopleButtonClicked={togglePeoplePane}
                   onMoreButtonClicked={onMoreButtonClicked}
                   isCaptionsSupported={(useTeamsCaptions && hasJoinedCall) || hasJoinedCall}
+                  /* @conditional-compile-remove(rtt) */
+                  isRealTimeTextSupported={hasJoinedCall}
+                  /* @conditional-compile-remove(rtt) */
+                  onStartRealTimeText={onStartRealTimeText}
+                  /* @conditional-compile-remove(rtt) */
+                  startRealTimeTextButtonChecked={openRealTimeText}
                   useTeamsCaptions={useTeamsCaptions}
                   isCaptionsOn={isCaptionsOn}
                   onClickVideoEffects={onResolveVideoEffectDependency ? openVideoEffectsPane : undefined}
@@ -607,6 +619,12 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                 onPeopleButtonClicked={onMoreDrawerPeopleClicked}
                 disableButtonsForHoldScreen={isInLocalHold}
                 isCaptionsSupported={(useTeamsCaptions && hasJoinedCall) || hasJoinedCall}
+                /* @conditional-compile-remove(rtt) */
+                isRealTimeTextSupported={hasJoinedCall}
+                /* @conditional-compile-remove(rtt) */
+                onStartRealTimeText={onStartRealTimeText}
+                /* @conditional-compile-remove(rtt) */
+                startRealTimeTextButtonChecked={openRealTimeText}
                 useTeamsCaptions={useTeamsCaptions}
                 onUserSetGalleryLayout={props.onUserSetGalleryLayoutChange}
                 userSetGalleryLayout={props.userSetGalleryLayout}
@@ -663,6 +681,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                       onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}
                       useTeamsCaptions={useTeamsCaptions}
                       returnFocusRef={controlBarRef}
+                      /* @conditional-compile-remove(rtt) */
+                      isRealTimeTextOn={openRealTimeText}
                     />
                   )}
                 </Stack>

diff --git a/packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx b/packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx
@@ -25,6 +25,8 @@ export const CallingCaptionsBanner = (props: {
   };
   /** Element to return focus to when the Captions Banner is closed */
   returnFocusRef?: React.RefObject<FocusableElement>;
+  /* @conditional-compile-remove(rtt) */
+  isRealTimeTextOn?: boolean;
 }): JSX.Element => {
   const captionsBannerProps = usePropsFor(CaptionsBanner);
   const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);
@@ -120,6 +122,8 @@ export const CallingCaptionsBanner = (props: {
                 formFactor={props.isMobile ? 'compact' : 'default'}
                 strings={captionsBannerStrings}
                 {...captionsBannerProps}
+                /* @conditional-compile-remove(rtt) */
+                isRealTimeTextOn={props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn}
               />
             </Stack.Item>
           </Stack>

diff --git a/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx b/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx
@@ -66,6 +66,8 @@ import { MeetingConferencePhoneInfoModal } from '@internal/react-components';
 /* @conditional-compile-remove(breakout-rooms) */
 import { Timer } from './Timer';
 import { FocusableElement } from '../types/FocusableElement';
+/* @conditional-compile-remove(rtt) */
+import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
 
 /**
  * @private
@@ -82,6 +84,7 @@ export interface CommonCallControlBarProps {
   onClickShowDialpad?: () => void;
   onClickVideoEffects?: (showVideoEffects: boolean) => void;
   isCaptionsSupported?: boolean;
+  isRealTimeTextSupported?: boolean;
   isCaptionsOn?: boolean;
   displayVertical?: boolean;
   onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;
@@ -97,6 +100,10 @@ export interface CommonCallControlBarProps {
   onToggleTeamsMeetingConferenceModal?: () => void;
   teamsMeetingConferenceModalPresent?: boolean;
   sidePaneDismissButtonRef?: RefObject<IButton>;
+  /* @conditional-compile-remove(rtt) */
+  onStartRealTimeText?: () => void;
+  /* @conditional-compile-remove(rtt) */
+  startRealTimeTextButtonChecked?: boolean;
 }
 
 const inferCommonCallControlOptions = (
@@ -153,6 +160,8 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
 
     const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
+    /* @conditional-compile-remove(rtt) */
+    const [showRealTimeTextModal, setShowRealTimeTextModal] = useState(false);
 
     // If the hangup capability is not present, we default to true
     const isHangUpForEveryoneAllowed =
@@ -200,6 +209,14 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
     const openCaptionsSettingsModal = useCallback((): void => {
       setShowCaptionsSettingsModal(true);
     }, []);
+    /* @conditional-compile-remove(rtt) */
+    const openRealTimeTextModal = useCallback((): void => {
+      setShowRealTimeTextModal(true);
+    }, []);
+    /* @conditional-compile-remove(rtt) */
+    const onDismissRealTimeTextModal = useCallback((): void => {
+      setShowRealTimeTextModal(false);
+    }, []);
 
     const onDismissCaptionsSettings = useCallback((): void => {
       setShowCaptionsSettingsModal(false);
@@ -350,12 +367,18 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
     const showExitSpotlightButton = options?.exitSpotlightButton !== false;
 
     const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);
+    /* @conditional-compile-remove(rtt) */
+    const showRealTimeTextButton = props.isRealTimeTextSupported;
 
     const showTeamsMeetingPhoneCallButton = isEnabled(options?.teamsMeetingPhoneCallButton);
 
     const showDesktopMoreButton =
       isEnabled(options?.moreButton) &&
-      (false || isEnabled(options?.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
+      (false ||
+        isEnabled(options?.holdButton) ||
+        showCaptionsButton ||
+        props.onUserSetGalleryLayout ||
+        /* @conditional-compile-remove(rtt) */ showRealTimeTextButton);
 
     const role = props.callAdapter.getState().call?.role;
     const hideRaiseHandButtonInRoomsCall =
@@ -372,6 +395,15 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
               changeCaptionLanguage={props.isCaptionsOn && props.useTeamsCaptions}
             />
           )}
+          {
+            /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && (
+              <CallingRealTimeTextModal
+                showModal={showRealTimeTextModal}
+                onDismissModal={onDismissRealTimeTextModal}
+                onStartRealTimeText={props.onStartRealTimeText}
+              />
+            )
+          }
           {props.teamsMeetingConferenceModalPresent && (
             <MeetingConferencePhoneInfoModal
               conferencePhoneInfoList={props.callAdapter.getState().call?.meetingConference?.conferencePhones ?? []}
@@ -528,7 +560,13 @@ export const CommonCallControlBar = forwardRef<FocusableElement, CommonCallContr
                           onClickShowDialpad={props.onClickShowDialpad}
                           callControls={props.callControls}
                           isCaptionsSupported={showCaptionsButton}
+                          /* @conditional-compile-remove(rtt) */
+                          isRealTimeTextSupported={showRealTimeTextButton}
                           onCaptionsSettingsClick={openCaptionsSettingsModal}
+                          /* @conditional-compile-remove(rtt) */
+                          onStartRealTimeTextClick={openRealTimeTextModal}
+                          /* @conditional-compile-remove(rtt) */
+                          startRealTimeTextButtonChecked={props.startRealTimeTextButtonChecked}
                           onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}
                           onUserSetGalleryLayout={props.onUserSetGalleryLayout}
                           userSetGalleryLayout={props.userSetGalleryLayout}