Add expand button for mobile RTT and captions (#5586)

* Mobile captions expand button

* Change files

* fix stable build

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* fix padding

* 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>

change-beta/@azure-communication-react-c93d7b33-4252-4b25-82b3-44c23230f486.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Add expand button for mobile ",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -827,9 +827,11 @@ export interface CallCompositeStrings {
     cameraTurnedOff: string;
     capabilityChangedNotification?: CapabilityChangedNotificationStrings;
     captionLanguageStrings?: CaptionLanguageStrings;
+    captionsAndRealTimeTextContainerTitle?: string;
     captionsBannerMoreButtonCallingLabel?: string;
     captionsBannerMoreButtonTooltip?: string;
     captionsBannerSpinnerText?: string;
+    captionsOnlyContainerTitle?: string;
     captionsSettingsCancelButtonLabel?: string;
     captionsSettingsCaptionLanguageDropdownInfoText?: string;
     captionsSettingsCaptionLanguageDropdownLabel?: string;
@@ -880,6 +882,7 @@ export interface CallCompositeStrings {
     endOfSurveyText: string;
     exitSpotlightButtonLabel: string;
     exitSpotlightButtonTooltip: string;
+    expandButtonAriaLabel?: string;
     failedToJoinCallDueToNoNetworkMoreDetails?: string;
     failedToJoinCallDueToNoNetworkTitle: string;
     failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails?: string;
@@ -923,6 +926,7 @@ export interface CallCompositeStrings {
     manyUnnamedParticipantsLeft: string;
     microphonePermissionDenied: string;
     microphoneToggleInLobbyNotAllowed: string;
+    minimizeButtonAriaLabel?: string;
     moreButtonCallingLabel: string;
     moreButtonGalleryControlLabel?: string;
     moreButtonGalleryDefaultLayoutLabel?: string;
@@ -992,6 +996,7 @@ export interface CallCompositeStrings {
     realTimeTextModalAriaLabel: string;
     realTimeTextModalText: string;
     realTimeTextModalTitle: string;
+    realTimeTextOnlyContainerTitle?: string;
     rejoinCallButtonLabel: string;
     removeBackgroundEffectButtonLabel?: string;
     removeBackgroundTooltip?: string;
@@ -1905,12 +1910,17 @@ export type CaptionsBannerSelector = (state: CallClientState, props: CallingBase
 
 // @public
 export interface CaptionsBannerStrings {
+    captionsAndRealTimeTextContainerTitle?: string;
     captionsBannerSpinnerText?: string;
+    captionsOnlyContainerTitle?: string;
+    expandButtonAriaLabel?: string;
+    minimizeButtonAriaLabel?: string;
     realTimeTextBannerContent?: string;
     realTimeTextBannerLinkLabel?: string;
     realTimeTextBannerTitle?: string;
     realTimeTextInputBoxDefaultText?: string;
     realTimeTextInputErrorMessage?: string;
+    realTimeTextOnlyContainerTitle?: string;
 }
 
 // @public (undocumented)
@@ -3027,6 +3037,8 @@ export const DEFAULT_COMPONENT_ICONS: {
     IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
     NotificationBarTogetherModeIcon: React_2.JSX.Element;
     RealTimeTextIcon: React_2.JSX.Element;
+    ExpandIcon: React_2.JSX.Element;
+    MinimizeIcon: React_2.JSX.Element;
 };
 
 // @public
@@ -3213,6 +3225,8 @@ export const DEFAULT_COMPOSITE_ICONS: {
     IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
     NotificationBarTogetherModeIcon: React_2.JSX.Element;
     RealTimeTextIcon: React_2.JSX.Element;
+    ExpandIcon: React_2.JSX.Element;
+    MinimizeIcon: React_2.JSX.Element;
 };
 
 // @beta

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

@@ -25,6 +25,12 @@ import { RealTimeText } from './RealTimeText';
 import { _RTTDisclosureBanner } from './RTTDisclosureBanner';
 /* @conditional-compile-remove(rtt) */
 import { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';
+/* @conditional-compile-remove(rtt) */
+import { expandIconClassName, bannerTitleContainerClassName } from './styles/Captions.style';
+/* @conditional-compile-remove(rtt) */
+import { titleClassName } from './styles/CaptionsSettingsModal.styles';
+/* @conditional-compile-remove(rtt) */
+import { Text, IconButton } from '@fluentui/react';
 
 /**
  * @public
@@ -126,6 +132,31 @@ export interface CaptionsBannerStrings {
    * Real time text disclosure banner link label
    */
   realTimeTextBannerLinkLabel?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when only captions is enabled
+   */
+  captionsOnlyContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when only real time text is enabled
+   */
+  realTimeTextOnlyContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when both captions and real time text is enabled
+   */
+  captionsAndRealTimeTextContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Expand button aria label
+   */
+  expandButtonAriaLabel?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Minimize button aria label
+   */
+  minimizeButtonAriaLabel?: string;
 }
 
 /**
@@ -222,6 +253,19 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
   const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);
   const theme = useTheme();
   /* @conditional-compile-remove(rtt) */
+  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);
+  /* @conditional-compile-remove(rtt) */
+  const getTitle = (): string => {
+    if (isCaptionsOn && isRealTimeTextOn) {
+      return strings.captionsAndRealTimeTextContainerTitle ?? '';
+    } else if (isCaptionsOn) {
+      return strings.captionsOnlyContainerTitle ?? '';
+    } else if (isRealTimeTextOn) {
+      return strings.realTimeTextOnlyContainerTitle ?? '';
+    }
+    return '';
+  };
+  /* @conditional-compile-remove(rtt) */
   // merge realtimetexts and captions into one array based on timestamp
   // Combine captions and realTimeTexts into one list
   const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {
@@ -337,13 +381,31 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     <>
       {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
+          {
+            /* @conditional-compile-remove(rtt) */ (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (
+              <Stack
+                horizontal
+                horizontalAlign="space-between"
+                verticalAlign="center"
+                className={bannerTitleContainerClassName}
+              >
+                <Text className={titleClassName}>{getTitle()}</Text>
+                <IconButton
+                  iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}
+                  ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}
+                  onClick={() => setExpandBannerHeight(!expandBannerHeight)}
+                  styles={expandIconClassName(theme)}
+                />
+              </Stack>
+            )
+          }
           {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
             <ul
               ref={captionsScrollDivRef}
               className={
                 captionsOptions?.height === 'full'
                   ? captionsBannerFullHeightClassName(theme)
-                  : captionsBannerClassName(formFactor)
+                  : captionsBannerClassName(formFactor, /* @conditional-compile-remove(rtt) */ expandBannerHeight)
               }
               data-ui-id="captions-banner-inner"
             >

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

@@ -3,6 +3,8 @@
 
 import { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
+/* @conditional-compile-remove(rtt) */
+import { IButtonStyles } from '@fluentui/react';
 
 /**
  * @private
@@ -20,6 +22,14 @@ export const displayNameClassName = mergeStyles({
   lineHeight: _pxToRem(16)
 });
 
+/* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const bannerTitleContainerClassName = mergeStyles({
+  paddingBottom: _pxToRem(10)
+});
+
 /* @conditional-compile-remove(rtt) */
 /**
  * @private
@@ -57,6 +67,23 @@ export const rttDisclosureBannerClassName = (): string => {
   });
 };
 
+/* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const expandIconClassName = (theme: ITheme): IButtonStyles => {
+  return {
+    root: {
+      color: theme.palette.neutralPrimary,
+      width: '1rem',
+      height: '1rem'
+    },
+    rootHovered: {
+      color: theme.palette.neutralDark
+    }
+  };
+};
+
 /**
  * @private
  */
@@ -74,7 +101,8 @@ export const captionsContainerClassName = mergeStyles({
   height: '100%',
   margin: 0,
   overflow: 'auto',
-  padding: 0
+  padding: 0,
+  overflowX: 'hidden'
 });
 
 /**
@@ -97,11 +125,11 @@ const resetUlStyling = {
 /**
  * @private
  */
-export const captionsBannerClassName = (formFactor: 'default' | 'compact'): string => {
+export const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {
   return mergeStyles({
     ...resetUlStyling,
     overflowX: 'hidden',
-    height: formFactor === 'compact' ? '4.5rem' : '8.75rem',
+    height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem',
     overflowY: 'auto'
   });
 };

packages/react-components/src/localization/locales/en-US/strings.json

@@ -85,7 +85,12 @@
     "realTimeTextInputErrorMessage": "Message can not exceed 2000 characters",
     "realTimeTextBannerTitle": "RTT",
     "realTimeTextBannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
-    "realTimeTextBannerLinkLabel": "Learn more"
+    "realTimeTextBannerLinkLabel": "Learn more",
+    "captionsOnlyContainerTitle": "Captions",
+    "realTimeTextOnlyContainerTitle": "Real-Time Text",
+    "captionsAndRealTimeTextContainerTitle": "Captions and Real-Time Text",
+    "expandButtonAriaLabel": "Expand",
+    "minimizeButtonAriaLabel": "Collapse"
   },
   "mentionPopover": {
     "mentionPopoverHeader": "Suggestions"

packages/react-components/src/theming/icons.tsx

@@ -75,7 +75,7 @@ import {
 /* @conditional-compile-remove(together-mode) */
 import { PeopleAudience20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(rtt) */
-import { SlideTextCall20Regular } from '@fluentui/react-icons';
+import { SlideTextCall20Regular, ArrowMaximize20Regular, ArrowMinimize20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(rich-text-editor) */
 import {
   TextBold20Regular,
@@ -419,5 +419,9 @@ export const DEFAULT_COMPONENT_ICONS = {
   /* @conditional-compile-remove(together-mode) */
   NotificationBarTogetherModeIcon: <PeopleAudience20Regular />,
   /* @conditional-compile-remove(rtt) */
-  RealTimeTextIcon: <SlideTextCall20Regular />
+  RealTimeTextIcon: <SlideTextCall20Regular />,
+  /* @conditional-compile-remove(rtt) */
+  ExpandIcon: <ArrowMaximize20Regular />,
+  /* @conditional-compile-remove(rtt) */
+  MinimizeIcon: <ArrowMinimize20Regular />
 };

packages/react-composites/src/composites/CallComposite/Strings.tsx

@@ -584,6 +584,31 @@ export interface CallCompositeStrings {
    * Label for the link in the real time text disclosure banner
    */
   realTimeTextBannerLinkLabel?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when only captions is enabled
+   */
+  captionsOnlyContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when only real time text is enabled
+   */
+  realTimeTextOnlyContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Title for the container when both captions and real time text is enabled
+   */
+  captionsAndRealTimeTextContainerTitle?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Expand button aria label
+   */
+  expandButtonAriaLabel?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Minimize button aria label
+   */
+  minimizeButtonAriaLabel?: string;
   /**
    * transfer page text when showing the transferor who initiated the transfer
    */

packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx

@@ -66,7 +66,17 @@ export const CallingCaptionsBanner = (props: {
     /* @conditional-compile-remove(rtt) */
     realTimeTextBannerTitle: strings.realTimeTextBannerTitle,
     /* @conditional-compile-remove(rtt) */
-    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel
+    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel,
+    /* @conditional-compile-remove(rtt) */
+    captionsOnlyContainerTitle: strings.captionsOnlyContainerTitle,
+    /* @conditional-compile-remove(rtt) */
+    realTimeTextOnlyContainerTitle: strings.realTimeTextOnlyContainerTitle,
+    /* @conditional-compile-remove(rtt) */
+    captionsAndRealTimeTextContainerTitle: strings.captionsAndRealTimeTextContainerTitle,
+    /* @conditional-compile-remove(rtt) */
+    expandButtonAriaLabel: strings.expandButtonAriaLabel,
+    /* @conditional-compile-remove(rtt) */
+    minimizeButtonAriaLabel: strings.minimizeButtonAriaLabel
   };
 
   const onRenderAvatar = useCallback(

packages/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -229,6 +229,11 @@
     "realTimeTextConfirmButtonLabel": "Turn on",
     "realTimeTextCancelButtonLabel": "Cancel",
     "realTimeTextCloseModalButtonAriaLabel": "Close RTT Modal",
+    "captionsOnlyContainerTitle": "Captions",
+    "realTimeTextOnlyContainerTitle": "Real-Time Text",
+    "captionsAndRealTimeTextContainerTitle": "Captions and Real-Time Text",
+    "expandButtonAriaLabel": "Expand",
+    "minimizeButtonAriaLabel": "Collapse",
     "transferPageTransferorText": "Transferring...",
     "transferPageTransferTargetText": "Connecting...",
     "transferPageUnknownTransferorDisplayName": "Unknown",