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 new file mode 100644 index 00000000000..973dcfabeda --- /dev/null +++ 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 new file mode 100644 index 00000000000..99537a63baa --- /dev/null +++ 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 new file mode 100644 index 00000000000..40c4368f424 --- /dev/null +++ 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 index c7519e78fc2..89dd06f6daa 100644 --- 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 index 68d9a1b0a78..d067d33f64e 100644 --- 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 index 456e2d2e622..95221f58c32 100644 --- 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 index 8439771669b..1314b5bd566 100644 --- 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 index c860f644eb5..4dabcb912e2 100644 --- 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 index c54f9e4f19f..b80502725af 100644 --- 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 index 7471e71d0de..b43c94db652 100644 --- 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(''); /* @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) && ( { /* @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 && ( { diff --git a/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx b/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx index b63044b27a3..66e5b18a7c7 100644 --- 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 && ( { return <_HighContrastAwareIcon disabled={props.disabled} iconName="RealTimeTextIcon" />; }; - return ( { : latestNotifications; const reactionResources = useSelector(getReactionResources); + /* @conditional-compile-remove(rtt) */ + const [openRealTimeText, setOpenRealTimeText] = useState(false); + /* @conditional-compile-remove(rtt) */ + const onStartRealTimeText = useCallback(() => { + setOpenRealTimeText(true); + }, []); return (
@@ -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} /> )} diff --git a/packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx b/packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx index 65ccfcdfce7..bd2aa0ded55 100644 --- 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; + /* @conditional-compile-remove(rtt) */ + isRealTimeTextOn?: boolean; }): JSX.Element => { const captionsBannerProps = usePropsFor(CaptionsBanner); const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState(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} /> diff --git a/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx b/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx index b652a417331..50141f7c33f 100644 --- 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; + /* @conditional-compile-remove(rtt) */ + onStartRealTimeText?: () => void; + /* @conditional-compile-remove(rtt) */ + startRealTimeTextButtonChecked?: boolean; } const inferCommonCallControlOptions = ( @@ -153,6 +160,8 @@ export const CommonCallControlBar = forwardRef { 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 )} + { + /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && ( + + ) + } {props.teamsMeetingConferenceModalPresent && ( void; isCaptionsSupported?: boolean; + /* @conditional-compile-remove(rtt) */ + isRealTimeTextSupported?: boolean; callControls?: boolean | CommonCallControlOptions; onCaptionsSettingsClick?: () => void; + /* @conditional-compile-remove(rtt) */ + onStartRealTimeTextClick?: () => void; + /* @conditional-compile-remove(rtt) */ + startRealTimeTextButtonChecked?: boolean; onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void; onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void; userSetGalleryLayout?: VideoGalleryLayout; @@ -50,6 +58,8 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element => const localeStrings = useLocale(); const holdButtonProps = usePropsFor(HoldButton); const startCaptionsButtonProps = usePropsFor(StartCaptionsButton); + /* @conditional-compile-remove(rtt) */ + const realTimeTextProps = usePropsFor(CaptionsBanner); const startCaptions = useCallback(async () => { await startCaptionsButtonProps.onStartCaptions({ spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage @@ -171,6 +181,54 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element => } } + //RTT + /* @conditional-compile-remove(rtt) */ + if (props.isRealTimeTextSupported) { + const realTimeTextContextualMenuItems: IContextualMenuItem[] = []; + const rttDisabled = + props.disableButtonsForHoldScreen || realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked; + + moreButtonContextualMenuItems.push({ + key: 'realTimeTextKey', + id: 'common-call-composite-captions-button', + text: localeStrings.strings.call.realTimeTextLabel, + iconProps: { iconName: 'RealTimeTextIcon', styles: { root: { lineHeight: 0 } } }, + itemProps: { + styles: buttonFlyoutIncreasedSizeStyles + }, + disabled: props.disableButtonsForHoldScreen, + subMenuProps: { + id: 'rtt-contextual-menu', + items: realTimeTextContextualMenuItems, + calloutProps: { + preventDismissOnEvent: _preventDismissOnEvent + } + }, + submenuIconProps: { + iconName: 'HorizontalGalleryRightButton', + styles: menuSubIconStyleSet + } + }); + + realTimeTextContextualMenuItems.push({ + key: 'StartRealTimeTextKey', + id: 'common-call-composite-rtt-start-button', + text: localeStrings.strings.call.startRealTimeTextLabel, + ariaLabel: rttDisabled + ? localeStrings.strings.call.disabledStartRealTimeTextLabel + : localeStrings.strings.call.startRealTimeTextLabel, + onClick: props.onStartRealTimeTextClick, + iconProps: { + iconName: 'RealTimeTextIcon', + styles: { root: { lineHeight: 0 } } + }, + itemProps: { + styles: buttonFlyoutIncreasedSizeStyles + }, + disabled: rttDisabled + }); + } + const dtmfDialerScreenOption = { key: 'dtmfDialerScreenKey', itemProps: { diff --git a/packages/react-composites/src/composites/common/Drawer/MoreDrawer.styles.ts b/packages/react-composites/src/composites/common/Drawer/MoreDrawer.styles.ts index 6e6f6f5c059..3b610d8eb18 100644 --- a/packages/react-composites/src/composites/common/Drawer/MoreDrawer.styles.ts +++ b/packages/react-composites/src/composites/common/Drawer/MoreDrawer.styles.ts @@ -7,7 +7,7 @@ import { _pxToRem } from '@internal/acs-ui-common'; /** * @private */ -export const themedToggleButtonStyle = (theme: Theme, checked: boolean): Partial => { +export const themedToggleButtonStyle = (theme: Theme, checked?: boolean): Partial => { if (checked) { return { root: { diff --git a/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx b/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx index 0e3d775800f..1668a5b62df 100644 --- a/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx +++ b/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx @@ -13,6 +13,8 @@ import { CaptionLanguageStrings, CaptionsSettingsModal } from '@internal/react-components'; +/* @conditional-compile-remove(rtt) */ +import { CaptionsBanner } from '@internal/react-components'; import { _ReactionDrawerMenuItem } from '@internal/react-components'; import { ReactionResources } from '@internal/react-components'; import { VideoGalleryLayout } from '@internal/react-components'; @@ -149,6 +151,8 @@ export interface MoreDrawerProps extends MoreDrawerDevicesMenuProps { callControls?: boolean | CommonCallControlOptions; onClickShowDialpad?: () => void; isCaptionsSupported?: boolean; + /* @conditional-compile-remove(rtt) */ + isRealTimeTextSupported?: boolean; strings: MoreDrawerStrings; disableButtonsForHoldScreen?: boolean; useTeamsCaptions?: boolean; @@ -164,6 +168,10 @@ export interface MoreDrawerProps extends MoreDrawerDevicesMenuProps { onForbidOthersVideo?: () => void; /* @conditional-compile-remove(media-access) */ onPermitOthersVideo?: () => void; + /* @conditional-compile-remove(rtt) */ + onStartRealTimeText?: () => void; + /* @conditional-compile-remove(rtt) */ + startRealTimeTextButtonChecked?: boolean; } const inferCallWithChatControlOptions = ( @@ -186,6 +194,8 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => { const localeStrings = useLocale(); const holdButtonProps = usePropsFor(HoldButton); + /* @conditional-compile-remove(rtt) */ + const realTimeTextProps = usePropsFor(CaptionsBanner); const callees = useSelector(getTargetCallees); const participants = useSelector(getRemoteParticipantsConnectedSelector); @@ -214,6 +224,8 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => { const showCaptionsButton = props.isCaptionsSupported && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.captionsButton); + /* @conditional-compile-remove(rtt) */ + const showRealTimeTextButton = props.isRealTimeTextSupported; if (props.reactionResources !== undefined) { drawerMenuItems.push({ @@ -577,6 +589,51 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => { } } + /* @conditional-compile-remove(rtt) */ + const rttDisabled = + props.disableButtonsForHoldScreen || realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked; + // rtt + /* @conditional-compile-remove(rtt) */ + if (showRealTimeTextButton) { + const realTimeTextDrawerItems: DrawerMenuItemProps[] = []; + + drawerMenuItems.push({ + itemKey: 'realTimeText', + id: 'common-call-composite-rtt-button', + disabled: props.disableButtonsForHoldScreen, + text: localeStrings.strings.call.realTimeTextLabel, + iconProps: { iconName: 'RealTimeTextIcon' }, + subMenuProps: realTimeTextDrawerItems + }); + + realTimeTextDrawerItems.push({ + itemKey: 'ToggleRTTKey', + text: localeStrings.strings.call.startRealTimeTextLabel, + ariaLabel: rttDisabled + ? localeStrings.strings.call.disabledStartRealTimeTextLabel + : localeStrings.strings.call.startRealTimeTextLabel, + iconProps: { + iconName: 'RealTimeTextIcon', + styles: { root: { lineHeight: 0 } } + }, + onItemClick: props.onStartRealTimeText, + disabled: rttDisabled, + secondaryComponent: ( + + + + ) + }); + } + const customDrawerButtons = useMemo( () => generateCustomCallDrawerButtons( diff --git a/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx b/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx index 0ddd7a57e3d..d62a3beb7ba 100644 --- a/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx +++ b/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx @@ -20,6 +20,8 @@ export interface PreparedMoreDrawerProps { callControls?: boolean | CommonCallControlOptions; onClickShowDialpad?: () => void; isCaptionsSupported?: boolean; + /* @conditional-compile-remove(rtt) */ + isRealTimeTextSupported?: boolean; disableButtonsForHoldScreen?: boolean; onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void; userSetGalleryLayout?: VideoGalleryLayout; @@ -29,6 +31,10 @@ export interface PreparedMoreDrawerProps { useTeamsCaptions?: boolean; reactionResources?: ReactionResources; onClickMeetingPhoneInfo?: () => void; + /* @conditional-compile-remove(rtt) */ + onStartRealTimeText?: () => void; + /* @conditional-compile-remove(rtt) */ + startRealTimeTextButtonChecked?: boolean; } /** @private */ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Desktop-Chrome-linux.png index 2a374615c83..533b18d6d64 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Landscape-linux.png index 688771e1526..eaeaeb99f47 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Portrait-linux.png index c6f5048e7ea..5a6f914e1f3 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-custom-button-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Desktop-Chrome-linux.png index eb4137b6c27..77095173100 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Landscape-linux.png index bfc287c804b..d457eaa778b 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Portrait-linux.png index 9712fe86834..a8653f4c18e 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/call-control-new-experience-injected-buttons-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Desktop-Chrome-linux.png index 8f5dd128bb5..eeaa1394a35 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Landscape-linux.png index 4a60f9bd64f..62aa8893bcd 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Portrait-linux.png index b6116ae90c3..735cd0f52f2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-button-call-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-Desktop-Chrome-linux.png index 787ee625190..011a3714950 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-disabled-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-disabled-Desktop-Chrome-linux.png index e9e38707bbf..3f7787c59ca 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-disabled-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/caption-toggle-button-disabled-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Desktop-Chrome-linux.png index ec56a2875de..9fe12c942fa 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Landscape-linux.png index c13c81bad68..e88fde6fec6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Portrait-linux.png index bf14d3425b7..2755d61ffa6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Call-Dtmf-Dialpad-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Desktop-Chrome-linux.png index 8f5dd128bb5..eeaa1394a35 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Landscape-linux.png index 8ba24acea98..29b8baf3765 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Portrait-linux.png index b6116ae90c3..735cd0f52f2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/Dtmf-Dialpad-Hidden-Non-PSTN-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-button-dtmf-dialpad-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-button-dtmf-dialpad-Desktop-Chrome-linux.png index ec56a2875de..9fe12c942fa 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-button-dtmf-dialpad-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-button-dtmf-dialpad-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Landscape-linux.png index c13c81bad68..e88fde6fec6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Portrait-linux.png index bf14d3425b7..2755d61ffa6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/DtmfDialpad.test.ts-snapshots/call-more-drawer-dtmf-dialpad-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-16-9-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-16-9-linux.png index 6ae86bfa20a..b0dc7cfd0e5 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-16-9-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-16-9-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-linux.png index f9a9e01adf1..ddad2c33d77 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-16-9-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-16-9-linux.png index a2ca33fea87..29515b57e21 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-16-9-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-16-9-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-linux.png index 5612b45cba8..ec95541d2d2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-controls-open-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Landscape-linux.png index a487d6390a3..7bacf17c43b 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Portrait-linux.png index 1e8db54a55e..efb47f0271c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/Reactions.test.ts-snapshots/reaction-sub-menu-in-ongoing-call-in-mobile-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Desktop-Chrome-linux.png index 8f5dd128bb5..eeaa1394a35 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Landscape-linux.png index 4a60f9bd64f..62aa8893bcd 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Portrait-linux.png index b6116ae90c3..735cd0f52f2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/caption-button-teams-call-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-Desktop-Chrome-linux.png index 787ee625190..011a3714950 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-disabled-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-disabled-Desktop-Chrome-linux.png index e9e38707bbf..3f7787c59ca 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-disabled-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/TeamsClosedCaptions.test.ts-snapshots/teams-caption-toggle-button-disabled-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-Desktop-Chrome-linux.png index c9240486a3d..0d60528a707 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-open-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-open-Desktop-Chrome-linux.png index aaad95dba62..03927d6fa6c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-open-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-controls-open-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/participant-cap-ovc-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/participant-cap-ovc-Desktop-Chrome-linux.png index c9bff6e971d..a99ed716f95 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/participant-cap-ovc-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/participant-cap-ovc-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Desktop-Chrome-linux.png index 40ccda31652..28965f54480 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Landscape-linux.png index ca58bb9947a..b214d7310a7 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Portrait-linux.png index f230eb27e05..055e34e2bf7 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/CallControls.test.ts-snapshots/call-with-chat-custom-buttons-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Landscape-linux.png index 5d3e8a24751..b72b2cfb3ca 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Portrait-linux.png index cdbe123df71..ee5c5f00504 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-microphone-screen-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Landscape-linux.png index 65029c2a4a4..ec845ae5631 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Portrait-linux.png index 81288ef7254..cb347006f0b 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-new-selected-speaker-screen-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Landscape-linux.png index 3645bc7ab38..fc9f5b4db0a 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Portrait-linux.png index c6f5048e7ea..5a6f914e1f3 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/MoreDrawer.test.ts-snapshots/call-with-chat-more-drawer-screen-Mobile-Android-Portrait-linux.png differ diff --git a/packages/storybook8/public/images/CaptionsBannerRTT.png b/packages/storybook8/public/images/CaptionsBannerRTT.png new file mode 100644 index 00000000000..23dca355658 Binary files /dev/null and b/packages/storybook8/public/images/CaptionsBannerRTT.png differ diff --git a/packages/storybook8/public/images/RTTModal.png b/packages/storybook8/public/images/RTTModal.png new file mode 100644 index 00000000000..0e71d617f67 Binary files /dev/null and b/packages/storybook8/public/images/RTTModal.png differ diff --git a/packages/storybook8/public/images/StartRTT.png b/packages/storybook8/public/images/StartRTT.png new file mode 100644 index 00000000000..3ad762c304f Binary files /dev/null and b/packages/storybook8/public/images/StartRTT.png differ diff --git a/packages/storybook8/stories/Components/CaptionsBanner/CaptionsBanner.story.tsx b/packages/storybook8/stories/Components/CaptionsBanner/CaptionsBanner.story.tsx index a2f4b31acc0..9d028c0c1b4 100644 --- a/packages/storybook8/stories/Components/CaptionsBanner/CaptionsBanner.story.tsx +++ b/packages/storybook8/stories/Components/CaptionsBanner/CaptionsBanner.story.tsx @@ -1,7 +1,11 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { CaptionsInformation, CaptionsBanner as CaptionsBannerComponent } from '@azure/communication-react'; +import { + CaptionsInformation, + CaptionsBanner as CaptionsBannerComponent, + RealTimeTextInformation +} from '@azure/communication-react'; import { PrimaryButton, Stack } from '@fluentui/react'; import React, { useState } from 'react'; import { @@ -11,9 +15,12 @@ import { GenerateMockNewShortCaption } from './mockCaptions'; -const CaptionsBannerStory = (): JSX.Element => { +const CaptionsBannerStory = (args: any): JSX.Element => { const [captions, setCaptions] = useState(GenerateMockNewCaptions()); + const [realTimeTexts, setRealTimeTexts] = useState([]); + const [finalizedRealTimeTexts, setFinalizedRealTimeTexts] = useState([]); + const addNewCaption = (): void => { setCaptions([...captions, GenerateMockNewCaption()]); }; @@ -37,11 +44,34 @@ const CaptionsBannerStory = (): JSX.Element => { padding: '2rem' }; + const sendRealTimeText = async (text: string, isFinalized: boolean): Promise => { + if (!isFinalized) { + setRealTimeTexts([{ message: text, id: 1, displayName: 'John', isTyping: true, finalizedTimeStamp: new Date() }]); + return Promise.resolve(); + } + if (isFinalized) { + setFinalizedRealTimeTexts([ + ...finalizedRealTimeTexts, + { message: text, id: 1, displayName: 'John', isTyping: false, finalizedTimeStamp: new Date() } + ]); + setRealTimeTexts([]); + return Promise.resolve(); + } + }; + return ( - - + + diff --git a/packages/storybook8/stories/Components/CaptionsBanner/Docs.mdx b/packages/storybook8/stories/Components/CaptionsBanner/Docs.mdx index 7117ebae0bb..7e22573ef46 100644 --- a/packages/storybook8/stories/Components/CaptionsBanner/Docs.mdx +++ b/packages/storybook8/stories/Components/CaptionsBanner/Docs.mdx @@ -1,5 +1,6 @@ import { CaptionsBanner } from '@azure/communication-react'; import { Canvas, Meta, ArgTypes } from '@storybook/blocks'; +import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner'; import * as CaptionsBannerStories from './index.stories'; import CaptionsBannerExampleText from '!!raw-loader!./snippets/CaptionsBanner.snippet.tsx'; @@ -7,7 +8,9 @@ import CaptionsBannerExampleText from '!!raw-loader!./snippets/CaptionsBanner.sn # CaptionsBanner -A component for displaying a CaptionsBanner with user icon, displayName and captions text. +A component to display list of captions or/and Real-Time Text, and contains a textfield to send Real-Time Text. Will show maximum 50 entries. + + diff --git a/packages/storybook8/stories/Components/CaptionsBanner/index.stories.tsx b/packages/storybook8/stories/Components/CaptionsBanner/index.stories.tsx index dd2cc0feaab..728033023c7 100644 --- a/packages/storybook8/stories/Components/CaptionsBanner/index.stories.tsx +++ b/packages/storybook8/stories/Components/CaptionsBanner/index.stories.tsx @@ -3,7 +3,7 @@ import { CaptionsBanner } from '@azure/communication-react'; import { Meta } from '@storybook/react'; -import { hiddenControl } from '../../controlsUtils'; +import { controlsToAdd, hiddenControl } from '../../controlsUtils'; export { CaptionsBanner } from './CaptionsBanner.story'; @@ -13,15 +13,21 @@ const meta: Meta = { argTypes: { captions: hiddenControl, realTimeTexts: hiddenControl, - isCaptionsOn: hiddenControl, - startCaptionsInProgress: hiddenControl, strings: hiddenControl, onRenderAvatar: hiddenControl, - formFactor: hiddenControl, captionsOptions: hiddenControl, - isRealTimeTextOn: hiddenControl, onSendRealTimeText: hiddenControl, - latestLocalRealTimeText: hiddenControl + latestLocalRealTimeText: hiddenControl, + isCaptionsOn: controlsToAdd.isCaptionsOn, + formFactor: controlsToAdd.captionsFormFactor, + isRealTimeTextOn: controlsToAdd.isRealTimeTextOn, + startCaptionsInProgress: controlsToAdd.startCaptionsInProgress + }, + args: { + isCaptionsOn: true, + formFactor: 'default', + isRealTimeTextOn: true, + startCaptionsInProgress: false } }; diff --git a/packages/storybook8/stories/Components/CaptionsBanner/mockCaptions.ts b/packages/storybook8/stories/Components/CaptionsBanner/mockCaptions.ts index 786fa5f0fb5..1f90e43a828 100644 --- a/packages/storybook8/stories/Components/CaptionsBanner/mockCaptions.ts +++ b/packages/storybook8/stories/Components/CaptionsBanner/mockCaptions.ts @@ -6,6 +6,7 @@ import { CaptionsInformation } from '@azure/communication-react'; export const GenerateMockNewCaption = (): CaptionsInformation => { return { id: Date.now().toString(), + createdTimeStamp: new Date(), displayName: 'SpongeBob', captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' @@ -15,6 +16,7 @@ export const GenerateMockNewCaption = (): CaptionsInformation => { export const GenerateMockNewShortCaption = (): CaptionsInformation => { return { id: Date.now().toString(), + createdTimeStamp: new Date(), displayName: 'SpongeBob Patrick', captionText: 'Lorem ipsum dolor sit amet' }; @@ -23,6 +25,7 @@ export const GenerateMockNewShortCaption = (): CaptionsInformation => { export const GenerateMockNewCaptionWithLongName = (): CaptionsInformation => { return { id: Date.now().toString(), + createdTimeStamp: new Date(), displayName: 'SpongeBob Patrick Robert', captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt' }; @@ -32,16 +35,19 @@ export const GenerateMockNewCaptions = (): CaptionsInformation[] => { return [ { id: Date.now().toString(), + createdTimeStamp: new Date(), displayName: 'Caroline', captionText: 'Hello there' }, { id: Date.now().toString() + 1, + createdTimeStamp: new Date(), displayName: 'Mike', captionText: 'Hi welcome' }, { id: Date.now().toString() + 2, + createdTimeStamp: new Date(), displayName: 'SpongeBob Patrick Robert', captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' @@ -49,11 +55,13 @@ export const GenerateMockNewCaptions = (): CaptionsInformation[] => { { id: Date.now().toString() + 3, displayName: 'Patrick', + createdTimeStamp: new Date(), captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' }, { id: Date.now().toString() + 4, + createdTimeStamp: new Date(), displayName: 'Sandy', captionText: 'Lorem ipsum dolor sit amet' } diff --git a/packages/storybook8/stories/Components/CaptionsSettingsModal/Docs.mdx b/packages/storybook8/stories/Components/CaptionsSettingsModal/Docs.mdx index d8d5c96e4b3..7718c27f564 100644 --- a/packages/storybook8/stories/Components/CaptionsSettingsModal/Docs.mdx +++ b/packages/storybook8/stories/Components/CaptionsSettingsModal/Docs.mdx @@ -5,9 +5,9 @@ import CaptionsSettingsModalExampleText from '!!raw-loader!./snippets/CaptionsSe -# CaptionsBanner +# CaptionsSettingsModal -A component for displaying a CaptionsBanner with user icon, displayName and captions text. +A component for setting caption/spoken languages and starting captions. diff --git a/packages/storybook8/stories/INTERNAL/RealTimeText/Docs.mdx b/packages/storybook8/stories/Components/RealTimeText/Docs.mdx similarity index 64% rename from packages/storybook8/stories/INTERNAL/RealTimeText/Docs.mdx rename to packages/storybook8/stories/Components/RealTimeText/Docs.mdx index 1d833e2a6ef..f53e671bfb0 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeText/Docs.mdx +++ b/packages/storybook8/stories/Components/RealTimeText/Docs.mdx @@ -1,13 +1,16 @@ -import { RealTimeText } from '@internal/react-components'; +import { RealTimeText } from '@azure/communication-react'; import { Canvas, Meta, ArgTypes } from '@storybook/blocks'; +import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner'; import * as RealTimeTextStories from './index.stories'; import RealTimeTextExampleText from '!!raw-loader!./snippets/ExampleRealTimeText.snippet.tsx'; -# Real Time Text +# RealTimeText -A component for displaying a Real time text message with user icon, displayName and captions text. + + +A component for displaying a Real-time text message with user icon, displayName and captions text. diff --git a/packages/storybook8/stories/INTERNAL/RealTimeText/RealTimeText.story.tsx b/packages/storybook8/stories/Components/RealTimeText/RealTimeText.story.tsx similarity index 90% rename from packages/storybook8/stories/INTERNAL/RealTimeText/RealTimeText.story.tsx rename to packages/storybook8/stories/Components/RealTimeText/RealTimeText.story.tsx index 550e7a82809..e9d1ded4b9e 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeText/RealTimeText.story.tsx +++ b/packages/storybook8/stories/Components/RealTimeText/RealTimeText.story.tsx @@ -1,8 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. +import { RealTimeText as RealTimeTextExample } from '@azure/communication-react'; import { Stack } from '@fluentui/react'; -import { RealTimeText as RealTimeTextExample } from '@internal/react-components'; import React from 'react'; const RealTimeTextStory = (args: { isTyping: boolean; displayName: string; message: string }): JSX.Element => { diff --git a/packages/storybook8/stories/INTERNAL/RealTimeText/index.stories.tsx b/packages/storybook8/stories/Components/RealTimeText/index.stories.tsx similarity index 82% rename from packages/storybook8/stories/INTERNAL/RealTimeText/index.stories.tsx rename to packages/storybook8/stories/Components/RealTimeText/index.stories.tsx index e002a079ab3..c340cb22e50 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeText/index.stories.tsx +++ b/packages/storybook8/stories/Components/RealTimeText/index.stories.tsx @@ -1,7 +1,7 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { RealTimeText } from '@internal/react-components'; +import { RealTimeText } from '@azure/communication-react'; import { Meta } from '@storybook/react'; import { controlsToAdd, hiddenControl } from '../../controlsUtils'; import { ExampleRealTimeText } from './snippets/ExampleRealTimeText.snippet'; @@ -13,7 +13,7 @@ export const ExampleRealTimeTextExampleDocsOnly = { export { RealTimeText } from './RealTimeText.story'; const meta: Meta = { - title: 'Components/Internal/Real Time Text', + title: 'Components/Real Time Text', component: RealTimeText, argTypes: { isTyping: controlsToAdd.isRTTTyping, @@ -22,7 +22,8 @@ const meta: Meta = { id: hiddenControl, onRenderAvatar: hiddenControl, strings: hiddenControl, - userId: hiddenControl + userId: hiddenControl, + isMe: hiddenControl } }; diff --git a/packages/storybook8/stories/INTERNAL/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx b/packages/storybook8/stories/Components/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx similarity index 86% rename from packages/storybook8/stories/INTERNAL/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx rename to packages/storybook8/stories/Components/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx index 0dc2ea1d9e8..6ab7519d195 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx +++ b/packages/storybook8/stories/Components/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx @@ -1,8 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. +import { RealTimeText } from '@azure/communication-react'; import { Stack } from '@fluentui/react'; -import { RealTimeText } from '@internal/react-components'; import React from 'react'; export const ExampleRealTimeText = (): JSX.Element => { diff --git a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/Docs.mdx b/packages/storybook8/stories/Components/RealTimeTextModal/Docs.mdx similarity index 72% rename from packages/storybook8/stories/INTERNAL/RealTimeTextModal/Docs.mdx rename to packages/storybook8/stories/Components/RealTimeTextModal/Docs.mdx index 0d104761aa7..79e231b2d6d 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/Docs.mdx +++ b/packages/storybook8/stories/Components/RealTimeTextModal/Docs.mdx @@ -1,11 +1,14 @@ -import { RealTimeTextModal } from '@internal/react-components'; +import { RealTimeTextModal } from '@azure/communication-react'; import { Canvas, Meta, ArgTypes } from '@storybook/blocks'; +import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner'; import * as RealTimeTextModalStories from './index.stories'; import RealTimeTextModalExampleText from '!!raw-loader!./snippets/RealTimeTextModal.snippet.tsx'; -# RealTimeText Modal +# RealTimeTextModal + + A component for displaying a modal showing contents related to RealTimeText diff --git a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/RealTimeTextModal.story.tsx b/packages/storybook8/stories/Components/RealTimeTextModal/RealTimeTextModal.story.tsx similarity index 97% rename from packages/storybook8/stories/INTERNAL/RealTimeTextModal/RealTimeTextModal.story.tsx rename to packages/storybook8/stories/Components/RealTimeTextModal/RealTimeTextModal.story.tsx index 3f0ab94d2bc..488f99b8d08 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/RealTimeTextModal.story.tsx +++ b/packages/storybook8/stories/Components/RealTimeTextModal/RealTimeTextModal.story.tsx @@ -1,8 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. +import { RealTimeTextModal as RealTimeTextModalExample } from '@azure/communication-react'; import { mergeStyles, PrimaryButton, Stack } from '@fluentui/react'; -import { RealTimeTextModal as RealTimeTextModalExample } from '@internal/react-components'; import React, { useState } from 'react'; const RealTimeTextModalStory = (): JSX.Element => { diff --git a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/index.stories.tsx b/packages/storybook8/stories/Components/RealTimeTextModal/index.stories.tsx similarity index 79% rename from packages/storybook8/stories/INTERNAL/RealTimeTextModal/index.stories.tsx rename to packages/storybook8/stories/Components/RealTimeTextModal/index.stories.tsx index 18cc973bab9..7c06b2faf28 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/index.stories.tsx +++ b/packages/storybook8/stories/Components/RealTimeTextModal/index.stories.tsx @@ -1,13 +1,13 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { RealTimeTextModal } from '@internal/react-components'; +import { RealTimeTextModal } from '@azure/communication-react'; import { Meta } from '@storybook/react'; import { hiddenControl } from '../../controlsUtils'; export { RealTimeTextModal } from './RealTimeTextModal.story'; const meta: Meta = { - title: 'Components/Internal/Real Time Text Modal', + title: 'Components/Real Time Text Modal', component: RealTimeTextModal, argTypes: { showModal: hiddenControl, diff --git a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx b/packages/storybook8/stories/Components/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx similarity index 88% rename from packages/storybook8/stories/INTERNAL/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx rename to packages/storybook8/stories/Components/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx index 66bf8e42bba..af844b875e5 100644 --- a/packages/storybook8/stories/INTERNAL/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx +++ b/packages/storybook8/stories/Components/RealTimeTextModal/snippets/RealTimeTextModal.snippet.tsx @@ -1,8 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. +import { RealTimeTextModal } from '@azure/communication-react'; import { Stack } from '@fluentui/react'; -import { RealTimeTextModal } from '@internal/react-components'; import React from 'react'; export const RealTimeTextModalStory = (): JSX.Element => { diff --git a/packages/storybook8/stories/Components/StartCaptionsButton/index.stories.tsx b/packages/storybook8/stories/Components/StartCaptionsButton/index.stories.tsx index de81df08e1a..fb91cf23e35 100644 --- a/packages/storybook8/stories/Components/StartCaptionsButton/index.stories.tsx +++ b/packages/storybook8/stories/Components/StartCaptionsButton/index.stories.tsx @@ -8,7 +8,7 @@ import { hiddenControl } from '../../controlsUtils'; export { StartCaptionsButton } from './StartCaptionsButton.story'; const meta: Meta = { - title: 'Components/StartCaptionsButton', + title: 'Components/Start Captions Button', component: StartCaptionsButton, argTypes: { onStartCaptions: hiddenControl, diff --git a/packages/storybook8/stories/Components/StartRealTimeTextButton/Docs.mdx b/packages/storybook8/stories/Components/StartRealTimeTextButton/Docs.mdx new file mode 100644 index 00000000000..f973af02f2a --- /dev/null +++ b/packages/storybook8/stories/Components/StartRealTimeTextButton/Docs.mdx @@ -0,0 +1,22 @@ +import { StartRealTimeTextButton } from '@azure/communication-react'; +import { Canvas, Meta, ArgTypes } from '@storybook/blocks'; +import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner'; +import * as StartRealTimeTextButtonStories from './index.stories'; +import StartRealTimeTextButtonExampleText from '!!raw-loader!./snippets/StartRealTimeTextButton.snippet.tsx'; + + + +# StartRealTimeTextButton + + + +A component to show Real-Time Text UI locally. Note that Real-Time Text will only be started for everyone in the call when the first message is sent. + + + +## Props + + diff --git a/packages/storybook8/stories/Components/StartRealTimeTextButton/StartRealTimeTextButton.story.tsx b/packages/storybook8/stories/Components/StartRealTimeTextButton/StartRealTimeTextButton.story.tsx new file mode 100644 index 00000000000..c94d7fd4543 --- /dev/null +++ b/packages/storybook8/stories/Components/StartRealTimeTextButton/StartRealTimeTextButton.story.tsx @@ -0,0 +1,23 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { StartRealTimeTextButton as StartRealTimeTextButtonComponent } from '@azure/communication-react'; +import React from 'react'; + +const StartRealTimeTextButtonStory = (): JSX.Element => { + const [isRealTimeTextOn, setIsRealTimeTextOn] = React.useState(false); + return ( + { + alert('Real-Time Text started'); + setIsRealTimeTextOn(true); + }} + /> + ); +}; + +// This must be the only named export from this module, and must be named to match the storybook path suffix. +// This ensures that storybook hoists the story instead of creating a folder with a single entry. +export const StartRealTimeTextButton = StartRealTimeTextButtonStory.bind({}); diff --git a/packages/storybook8/stories/Components/StartRealTimeTextButton/index.stories.tsx b/packages/storybook8/stories/Components/StartRealTimeTextButton/index.stories.tsx new file mode 100644 index 00000000000..d1e5f17059c --- /dev/null +++ b/packages/storybook8/stories/Components/StartRealTimeTextButton/index.stories.tsx @@ -0,0 +1,27 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { StartRealTimeTextButton } from '@azure/communication-react'; +import { Meta } from '@storybook/react'; +import { hiddenControl } from '../../controlsUtils'; + +export { StartRealTimeTextButton } from './StartRealTimeTextButton.story'; + +const meta: Meta = { + title: 'Components/Start Real Time Text Button', + component: StartRealTimeTextButton, + argTypes: { + onStartRealTimeText: hiddenControl, + isRealTimeTextOn: hiddenControl, + strings: hiddenControl, + showLabel: hiddenControl, + labelKey: hiddenControl, + disableTooltip: hiddenControl, + tooltipId: hiddenControl, + onRenderOnIcon: hiddenControl, + onRenderOffIcon: hiddenControl, + styles: hiddenControl + } +}; + +export default meta; diff --git a/packages/storybook8/stories/Components/StartRealTimeTextButton/snippets/StartRealTimeTextButton.snippet.tsx b/packages/storybook8/stories/Components/StartRealTimeTextButton/snippets/StartRealTimeTextButton.snippet.tsx new file mode 100644 index 00000000000..34d707e9844 --- /dev/null +++ b/packages/storybook8/stories/Components/StartRealTimeTextButton/snippets/StartRealTimeTextButton.snippet.tsx @@ -0,0 +1,19 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { StartRealTimeTextButton } from '@azure/communication-react'; +import React from 'react'; + +export const StartRealTimeTextButtonStory = (): JSX.Element => { + const [isRealTimeTextOn, setIsRealTimeTextOn] = React.useState(false); + return ( + { + alert('Real-Time Text started'); + setIsRealTimeTextOn(true); + }} + /> + ); +}; diff --git a/packages/storybook8/stories/Composites/Adapters/Docs.mdx b/packages/storybook8/stories/Composites/Adapters/Docs.mdx index 0c3731bd3fa..5288090bd26 100644 --- a/packages/storybook8/stories/Composites/Adapters/Docs.mdx +++ b/packages/storybook8/stories/Composites/Adapters/Docs.mdx @@ -137,6 +137,7 @@ The ChatAdapter and the ChatComposite are purpose-built to support single chat t | **`forbidOthersVideo`** | Forbid Teams meeting video for all attendees.

**Signature:**
`() => Promise` | | **`on`** | Subscribe to event.

Events:
`participantsJoined`
`participantsLeft`
`isMutedChanged`
`callIdChanged`
`isLocalScreenSharingActiveChanged`
`displayNameChanged`
`isSpeakingChanged`
`callEnded`
`diagnosticChanged`
`error`
`captionsReceived`
`isCaptionsActiveChanged`
`transferAccepted`
`capabilitiesChanged`
`spotlightChanged`

**Signature:**
`on(event: string, listener: Function): void` | | **`off`** | Unsubscribe from event.

Events:
`participantsJoined`
`participantsLeft`
`isMutedChanged`
`callIdChanged`
`isLocalScreenSharingActiveChanged`
`displayNameChanged`
`isSpeakingChanged`
`callEnded`
`diagnosticChanged`
`error`
`captionsReceived`
`isCaptionsActiveChanged`
`transferAccepted`
`capabilitiesChanged`
`spotlightChanged`

**Signature:**
`off(event: string, listener: Function): void` | +| **`sendRealTimeText`** | Send a single real-time text message.

**Signature:**
`(text: string, isFinalized: boolean) => Promise;` | ### CallAdapterState diff --git a/packages/storybook8/stories/Concepts/ClosedCaptions/Doc.mdx b/packages/storybook8/stories/Concepts/ClosedCaptions/Doc.mdx index dcc9dae7bc2..c308576baca 100644 --- a/packages/storybook8/stories/Concepts/ClosedCaptions/Doc.mdx +++ b/packages/storybook8/stories/Concepts/ClosedCaptions/Doc.mdx @@ -15,6 +15,16 @@ Azure Communication Services UI Library is adding support for Closed Captions. C Closed Captions is supported by default and are automatically included within the CallComposite and CallWithChatComposite experiences. +Closed Captions is also supported for component users. + +List of components exported for Closed Captions: + +[StartCaptionsButton](./?path=/docs/components-start-captions-button--docs) is a component that can be used to turn on captions. Developers and use 'usePropsFor' to gather all the information required to power this component. + +[CaptionsSettingsModal](./?path=/docs/components-captions-settings-modal--docs) is a modal pop up that allows users to select spoken/caption language. Developers and use 'usePropsFor' to gather all the information required to power this component. + +[CaptionsBanner](./?path=/docs/components-captions-banner--docs) is a component that combines and displays captions and Real-Time Text in one banner. Developers and use 'usePropsFor' to gather all the information required to power this component, including the list of Real-Time Text and captions messages in the call. User can also use this component for captions only or Real-Time Text only. + ## Azure Communication Service Based Captions Azure Communication Service Closed Captions are supported by default and are automatically included within the CallComposite and CallWithChatComposite experiences for calling scenarios involving Azure Communication Service users only. Captions can be enabled in both Mobile Web sessions and in Desktop Web sessions. diff --git a/packages/storybook8/stories/Concepts/RealTimeText/Docs.mdx b/packages/storybook8/stories/Concepts/RealTimeText/Docs.mdx new file mode 100644 index 00000000000..194cbb4e826 --- /dev/null +++ b/packages/storybook8/stories/Concepts/RealTimeText/Docs.mdx @@ -0,0 +1,62 @@ +import { Stack } from '@fluentui/react'; +import { Meta } from '@storybook/addon-docs'; +import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner'; +import { overviewPageImagesStackStyle } from '../../constants'; + + + +# Real-Time Text + + + +Azure Communication Services UI Library supports Real-Time Text. Real-Time Text is a powerful tool that enables developers to enhance the accessibility of their videos. +Real-Time Text (RTT) is a new accessibility feature that enables live transmission of text as it is typed, enhancing communication during voice and video calls. RTT displays text instantly, character by character, creating a natural and dynamic communication experience that mirrors spoken conversation. + +Real-Time Text is supported by default and are automatically included within the CallComposite and CallWithChatComposite experiences. + +Real-Time Text is also supported for component only users. + +List of components exported for Real-Time Text: + +[RealTimeText](./?path=/docs/components-real-time-text--docs) is a single line of Real-Time Text Message. It will display an 'isTyping' badge when the Real-Time Text message is still ongoing. + +[RealTimeTextModal](./?path=/docs/components-real-time-text-modal--docs) is a component showing a disclaimer warning that Real-Time Text is enabled for everyone in the call once turned on. This is important as Real-Time Text can not be turned off once it is started. + +[StartRealTimeTextButton](./?path=/docs/components-start-real-time-text-button--docs) is a component that can be used to turn on Real-Time Text. Note that Real-Time Text will not be started for everyone in the call until a message is sent. + +[CaptionsBanner](./?path=/docs/components-captions-banner--docs) is a component that combines and displays captions and Real-Time Text in one banner. Developers and use 'usePropsFor' to gather all the information required to power this component, including the list of Real-Time Text and captions messages in the call. User can also use this component for captions only or Real-Time Text only. + +## How to use Real-Time Text + +Real-Time Text is automatically included within the CallComposite and CallWithChatComposite experiences. + +To turn on Real-Time Text, users need to navigate to the control bar after call is connected, and click on more button. Inside the menu pop up, click on Real-Time Text, then click on Turn on RTT for this call. + +Note that Real-Time Text will be enabled for all participants in the call once the first message is sent. It cannot be turned off. + + + + <>Using the more menu to turn on Real-Time Text + example of component that can be used for starting RTT + + + <>Real-Time Text Modal showing the disclaimer warning + example of component that can be used for showing a disclaimer warning that Real-Time Text is enabled for everyone in the call once turned on + + + <>Captions Banner with Real-Time Text Enabled + example of Captions Banner with Real-Time Text Enabled + + diff --git a/packages/storybook8/stories/controlsUtils.ts b/packages/storybook8/stories/controlsUtils.ts index 7042ba4cf1a..e5db3d9b425 100644 --- a/packages/storybook8/stories/controlsUtils.ts +++ b/packages/storybook8/stories/controlsUtils.ts @@ -571,7 +571,16 @@ export const controlsToAdd = { richTextEditor: { control: 'boolean', name: 'Enable rich text editor' }, isRTTTyping: { control: 'boolean', name: 'Is RTT typing' }, rttDisplayName: { control: 'text', name: 'RTT display name' }, - rttCaptionText: { control: 'text', name: 'RTT caption text' } + rttCaptionText: { control: 'text', name: 'RTT caption text' }, + isCaptionsOn: { control: 'boolean', name: 'Is captions on' }, + isRealTimeTextOn: { control: 'boolean', name: 'Is real time text on' }, + startCaptionsInProgress: { control: 'boolean', name: 'Start captions in progress' }, + captionsFormFactor: { + control: 'radio', + options: ['default', 'compact'], + defaultValue: 'default', + name: 'Form factor' + } }; export const hiddenControl = { control: false, table: { disable: true } };