npm - @azure/communication-react - Versions diffs - 1.23.0 → 1.24.0-alpha-202501250016 - Mend

@azure/communication-react 1.23.0 → 1.24.0-alpha-202501250016

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1312) hide show

package/dist/dist-esm/react-components/src/components/CameraButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAuF,MAAM,iBAAiB,CAAC;AAE9I,OAAO,EAAiB,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,MAAM,4BAA4B,GAAG;IACnC,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AA8IxB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACtF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC;IACjD,MAAM,oBAAoB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,uBAAuB,GAAG,CAAC;IAChI,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IAClI,IAAI,aAAa,IAAI,OAAO,CAAC,0BAA0B,EAAE,CAAC;QACxD,OAAO,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;IACtE,CAAC;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,MAAM,eAAe,GAAG,aAAa,IAAI,CAAC,QAAQ,CAAC;IACnD,wEAAwE;IACxE,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,eAAe,EAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC;IACtG,MAAM,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC;IACjK,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,UAAmB,EAAE,EAAE;QAChE,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IACzH,CAAC,EAAE,CAAC,OAAO,CAAC,iCAAiC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAC1F,MAAM,oCAAoC,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,kBAAkB,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QACzD,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,kFAAkF;QAClF,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,4BAA4B,CAAC,CAAC;gBAC5E,uGAAuG;gBACvG,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;YACnC,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAC7E,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,oCAAoC,EAAE,CAAC;QACvC,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,oCAAoC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAO,MAAqB,EAAE,EAAE;QACtE,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,oBAAoB,GAA0B,EAAE,CAAC;IACvD,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC9B,oBAAoB,CAAC,IAAI,CAAC;YACxB,GAAG,EAAE,SAAS;YACd,YAAY,EAAE,mCAAmC;YACjD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,SAAS,EAAE;gBACT,QAAQ,EAAE,iCAAiC;gBAC3C,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,UAAU,EAAE,CAAC;qBACd;iBACF;aACF;YACD,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;oBAC9B,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IACD,oBAAoB,CAAC,IAAI,CAAC;QACxB,GAAG,EAAE,qBAAqB;QAC1B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC;QAC1G,OAAO,EAAE,GAAG,EAAE;YACZ,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;YAClG,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,UAAU,EAAE,CAAC;iBACd;aACF;SACF;KACF,CAAC,CAAC;IACH,MAAM,wBAAwB,GAAwB;QACpD,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,YAAY,EAAE;YACZ,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,oBAAoB;SAC5B;KACF,CAAC;IACF,MAAM,oBAAoB,GAAiB,OAAO,CAAC,GAAG,EAAE,CAAC,iCACpD,KAAK,CAAC,oBAAoB,KAC7B,SAAS,EAAE,qBAAqB,IAChC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAClC,OAAO;QACF,gBAAgB,IAAI,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAC3F,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,oBAAoB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,mBAAmB,EAAE,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,8BAA8B,iCAChZ,KAAK,KACR,cAAc,EAAE,mBAAmB,EACnC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAC/B,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,KAAK,CAAC,yBAAyB,EAAC,CAAC,CAAC;gBAC3H,MAAM,EAAE,IAAI;aACb,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,yBAAyB,sBAAoB,OAAO,CAAC,2BAA2B,0BAAwB,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAC3d,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { ContextualMenuItemType, IButtonProps, IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\nconst defaultLocalVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/*\n Strings of CameraButton that can be overridden.\n \n @public\n /\nexport interface CameraButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n /* Tooltip content when the button is disabled due to video loading. /\n tooltipVideoLoadingContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n description of camera button split button role\n /\n cameraButtonSplitRoleDescription?: string;\n /\n Camera split button aria label for when button is enabled.\n /\n onSplitButtonAriaLabel?: string;\n /\n Camera split button aria label for when button is disabled.\n /\n offSplitButtonAriaLabel?: string;\n /\n Camera action turned on string for announcer\n /\n cameraActionTurnedOnAnnouncement?: string;\n /\n Camera action turned off string for announcer\n /\n cameraActionTurnedOffAnnouncement?: string;\n /\n Primary action for when the camera is turned off\n /\n offSplitButtonPrimaryActionCamera?: string;\n /\n Primary action for when the camera is on\n /\n onSplitButtonPrimaryActionCamera?: string;\n /\n Title for primary action section of split button\n /\n cameraPrimaryActionSplitButtonTitle?: string;\n /\n Title for video effects menu item\n /\n videoEffectsMenuItemTitle?: string;\n /\n Aria description for camera button\n /\n cameraButtonAriaDescription?: string;\n}\n\n/\n Styles for {@link CameraButton}\n \n @public\n /\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link CameraButton} menu.\n /\n menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/\n Styles for the {@link CameraButton} menu.\n \n @public\n /\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link CameraButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n/\n Props for {@link CameraButton} component.\n \n @public\n /\nexport interface CameraButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n /\n Options for rendering local video view.\n /\n localVideoViewOptions?: VideoStreamOptions;\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n \n default: false\n /\n enableDeviceSelectionMenu?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<CameraButtonStrings>;\n /\n Styles for {@link CameraButton} and the device selection flyout.\n /\n styles?: Partial<CameraButtonStyles>;\n\n /\n Callback when a effects is clicked\n /\n onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/\n A button to turn camera on / off.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n const {\n localVideoViewOptions,\n onToggleCamera,\n onSelectCamera\n } = props;\n const [waitForCamera, setWaitForCamera] = useState(false);\n const localeStrings = useLocale().strings.cameraButton;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const [announcerString, setAnnouncerString] = useState<string \| undefined>(undefined);\n const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);\n const disabled = props.disabled \|\| waitForCamera;\n const onRenderCameraOnIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />;\n const onRenderCameraOffIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />;\n if (waitForCamera && strings.tooltipVideoLoadingContent) {\n strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n }\n const cameraOn = props.checked;\n const cameraTurningOn = waitForCamera && !cameraOn;\n // Ensure Aria-label by default reflects the loading state of the camera\n const ariaLabel = props.ariaLabel ?? cameraTurningOn ? strings.tooltipVideoLoadingContent : undefined;\n const splitButtonAriaString = cameraTurningOn ? strings.tooltipVideoLoadingContent : cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n const toggleAnnouncerString = useCallback((isCameraOn: boolean) => {\n setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);\n }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);\n const onVideoIsLoadingAnnouncementCallback = useCallback(() => {\n if (!cameraOn) {\n setAnnouncerString(strings.tooltipVideoLoadingContent);\n }\n }, [setAnnouncerString, cameraOn, strings.tooltipVideoLoadingContent]);\n const onToggleClick = useCallback(async () => {\n // Throttle click on camera, need to await onToggleCamera then allow another click\n if (onToggleCamera) {\n setWaitForCamera(true);\n try {\n await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n toggleAnnouncerString(!cameraOn);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n const onToggleClickCallback = useCallback(() => {\n onVideoIsLoadingAnnouncementCallback();\n onToggleClick();\n }, [onVideoIsLoadingAnnouncementCallback, onToggleClick]);\n const onChangeCameraClick = useCallback(async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [onSelectCamera]);\n const splitButtonMenuItems: IContextualMenuItem[] = [];\n if (props.onClickVideoEffects) {\n splitButtonMenuItems.push({\n key: 'effects',\n 'data-ui-id': 'camera-split-button-video-effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: {\n iconName: 'ControlButtonVideoEffectsOption',\n styles: {\n root: {\n lineHeight: 0\n }\n }\n },\n onClick: () => {\n if (props.onClickVideoEffects) {\n props.onClickVideoEffects(true);\n }\n }\n });\n }\n splitButtonMenuItems.push({\n key: 'cameraPrimaryAction',\n text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n styles: {\n root: {\n lineHeight: 0\n }\n }\n }\n });\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle camera',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: splitButtonMenuItems\n }\n };\n const splitButtonMenuProps: IButtonProps = useMemo(() => ({\n ...props.splitButtonMenuProps,\n className: 'camera-split-button'\n }), [props.splitButtonMenuProps]);\n return <>\n {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}\n <ControlBarButton {...props} disabled={disabled} onClick={onToggleCamera ? onToggleClickCallback : props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon} strings={strings} labelKey={props.labelKey ?? 'cameraButtonLabel'} menuProps={props.menuProps ?? (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps({\n ...props,\n onSelectCamera: onChangeCameraClick,\n styles: props.styles?.menuStyles\n }, strings, splitButtonPrimaryAction) : undefined)} menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? {\n hidden: true\n } : undefined} split={props.split ?? props.enableDeviceSelectionMenu} aria-description={strings.cameraButtonAriaDescription} aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined} ariaLabel={ariaLabel} splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined} splitButtonMenuProps={splitButtonMenuProps} onFocus={() => setAnnouncerPresent(true)} onBlur={() => setAnnouncerPresent(false)} />\n </>;\n};"]}
1	+ {"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n ContextualMenuItemType,\n IButtonProps,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/*\n Strings of CameraButton that can be overridden.\n \n @public\n /\nexport interface CameraButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n /* Tooltip content when the button is disabled due to video loading. /\n tooltipVideoLoadingContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n description of camera button split button role\n /\n cameraButtonSplitRoleDescription?: string;\n /\n Camera split button aria label for when button is enabled.\n /\n onSplitButtonAriaLabel?: string;\n /\n Camera split button aria label for when button is disabled.\n /\n offSplitButtonAriaLabel?: string;\n /\n Camera action turned on string for announcer\n /\n cameraActionTurnedOnAnnouncement?: string;\n /\n Camera action turned off string for announcer\n /\n cameraActionTurnedOffAnnouncement?: string;\n /\n Primary action for when the camera is turned off\n /\n offSplitButtonPrimaryActionCamera?: string;\n /\n Primary action for when the camera is on\n /\n onSplitButtonPrimaryActionCamera?: string;\n /\n Title for primary action section of split button\n /\n cameraPrimaryActionSplitButtonTitle?: string;\n /\n Title for video effects menu item\n /\n videoEffectsMenuItemTitle?: string;\n /\n Aria description for camera button\n /\n cameraButtonAriaDescription?: string;\n}\n\n/\n Styles for {@link CameraButton}\n \n @public\n /\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link CameraButton} menu.\n /\n menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/\n Styles for the {@link CameraButton} menu.\n \n @public\n /\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link CameraButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n/\n Props for {@link CameraButton} component.\n \n @public\n /\nexport interface CameraButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n /\n Options for rendering local video view.\n /\n localVideoViewOptions?: VideoStreamOptions;\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n \n default: false\n /\n enableDeviceSelectionMenu?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<CameraButtonStrings>;\n /\n Styles for {@link CameraButton} and the device selection flyout.\n /\n styles?: Partial<CameraButtonStyles>;\n\n /\n Callback when a effects is clicked\n /\n onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/\n A button to turn camera on / off.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n const { localVideoViewOptions, onToggleCamera, onSelectCamera } = props;\n const [waitForCamera, setWaitForCamera] = useState(false);\n const localeStrings = useLocale().strings.cameraButton;\n const strings = { ...localeStrings, ...props.strings };\n const [announcerString, setAnnouncerString] = useState<string \| undefined>(undefined);\n const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);\n\n const disabled = props.disabled \|\| waitForCamera;\n\n const onRenderCameraOnIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n );\n const onRenderCameraOffIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n );\n if (waitForCamera && strings.tooltipVideoLoadingContent) {\n strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n }\n\n const cameraOn = props.checked;\n const cameraTurningOn = waitForCamera && !cameraOn;\n // Ensure Aria-label by default reflects the loading state of the camera\n const ariaLabel = props.ariaLabel ?? cameraTurningOn ? strings.tooltipVideoLoadingContent : undefined;\n\n const splitButtonAriaString = cameraTurningOn\n ? strings.tooltipVideoLoadingContent\n : cameraOn\n ? strings.onSplitButtonAriaLabel\n : strings.offSplitButtonAriaLabel;\n\n const toggleAnnouncerString = useCallback(\n (isCameraOn: boolean) => {\n setAnnouncerString(\n !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n );\n },\n [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n );\n\n const onVideoIsLoadingAnnouncementCallback = useCallback(() => {\n if (!cameraOn) {\n setAnnouncerString(strings.tooltipVideoLoadingContent);\n }\n }, [setAnnouncerString, cameraOn, strings.tooltipVideoLoadingContent]);\n\n const onToggleClick = useCallback(async () => {\n // Throttle click on camera, need to await onToggleCamera then allow another click\n if (onToggleCamera) {\n setWaitForCamera(true);\n try {\n await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n toggleAnnouncerString(!cameraOn);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n const onToggleClickCallback = useCallback(() => {\n onVideoIsLoadingAnnouncementCallback();\n onToggleClick();\n }, [onVideoIsLoadingAnnouncementCallback, onToggleClick]);\n\n const onChangeCameraClick = useCallback(\n async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n },\n [onSelectCamera]\n );\n\n const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n if (props.onClickVideoEffects) {\n splitButtonMenuItems.push({\n key: 'effects',\n 'data-ui-id': 'camera-split-button-video-effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n onClick: () => {\n if (props.onClickVideoEffects) {\n props.onClickVideoEffects(true);\n }\n }\n });\n }\n\n splitButtonMenuItems.push({\n key: 'cameraPrimaryAction',\n text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n styles: { root: { lineHeight: 0 } }\n }\n });\n\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle camera',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: splitButtonMenuItems\n }\n };\n\n const splitButtonMenuProps: IButtonProps = useMemo(\n () => ({\n ...props.splitButtonMenuProps,\n className: 'camera-split-button'\n }),\n [props.splitButtonMenuProps]\n );\n\n return (\n <>\n {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}\n <ControlBarButton\n {...props}\n disabled={disabled}\n onClick={onToggleCamera ? onToggleClickCallback : props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'cameraButtonLabel'}\n menuProps={\n props.menuProps ??\n (props.enableDeviceSelectionMenu\n ? generateDefaultDeviceMenuProps(\n { ...props, onSelectCamera: onChangeCameraClick, styles: props.styles?.menuStyles },\n strings,\n splitButtonPrimaryAction\n )\n : undefined)\n }\n menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n split={props.split ?? props.enableDeviceSelectionMenu}\n aria-description={strings.cameraButtonAriaDescription}\n aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n ariaLabel={ariaLabel}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n splitButtonMenuProps={splitButtonMenuProps}\n onFocus={() => setAnnouncerPresent(true)}\n onBlur={() => setAnnouncerPresent(false)}\n />\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/Caption.js CHANGED Viewed

@@ -23,11 +23,11 @@ export const _Caption = (props) => {
         }
     };
     const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
-    return React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
+    return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
         React.createElement(Stack.Item, { className: iconClassName }, userIcon),
         React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
             React.createElement(Stack.Item, { className: displayNameContainerClassName },
                 React.createElement(Text, { className: displayNameClassName }, displayName)),
-            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText)));
+            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText))));
 };
 //# sourceMappingURL=Caption.js.map

package/dist/dist-esm/react-components/src/components/Caption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Caption.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,~~EAAE~~,gBAAgB,~~EAAE~~,iCAAiC,~~EAAE~~,oBAAoB,~~EAAE~~,6BAA6B,~~EAAE~~,aAAa,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAgBlK~~;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,~~EACJ~~,WAAW,~~EACX~~,MAAM,~~EACN~~,WAAW,~~EACX~~,cAAc,~~EACf~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;~~IACF~~,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;~~IACjH~~,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;~~QAClE~~,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;~~AACb~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { CaptionsInformation } from './CaptionsBanner';\n\n/*\n @internal\n * Props for a single line of caption.\n /\nexport interface _CaptionProps extends CaptionsInformation {\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n const {\n displayName~~,\n~~ userId~~,\n~~ captionText~~,\n~~ onRenderAvatar\n } = props;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: displayName,\n showOverflowTooltip: false,\n imageShouldStartVisible: true,\n initialsTextColor: 'white',\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n <Stack.Item className={displayNameContainerClassName}>\n <Text className={displayNameClassName}>{displayName}</Text>\n </Stack.Item>\n <Stack.Item className={captionClassName} dir=\"auto\">\n {captionText}\n </Stack.Item>\n </Stack>\n </Stack~~>;\~~n};"]}
1	+ {"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n captionClassName,\n captionsContentContainerClassName,\n displayNameClassName,\n displayNameContainerClassName,\n iconClassName\n} from './styles/Captions.style';\nimport { CaptionsInformation } from './CaptionsBanner';\n\n/*\n @internal\n * Props for a single line of caption.\n /\nexport interface _CaptionProps extends CaptionsInformation {\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n const { displayName, userId, captionText, onRenderAvatar } = props;\n\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: displayName,\n showOverflowTooltip: false,\n imageShouldStartVisible: true,\n initialsTextColor: 'white',\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n\n const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n return (\n <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n <Stack.Item className={displayNameContainerClassName}>\n <Text className={displayNameClassName}>{displayName}</Text>\n </Stack.Item>\n <Stack.Item className={captionClassName} dir=\"auto\">\n {captionText}\n </Stack.Item>\n </Stack>\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts CHANGED Viewed

@@ -21,6 +21,46 @@ export type CaptionsInformation = {
      * id of the speaker
      */
     userId?: string;
+    /**
+     * timestamp when the caption was created
+     * Please note that this value is essential for determining the order of captions and real time text messages
+     * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated
+     */
+    createdTimeStamp?: Date;
+};
+/**
+ * @beta
+ * information required for each line of real time text
+ */
+export type RealTimeTextInformation = {
+    /**
+     * The sequence id of the real time text.
+     */
+    id: number;
+    /**
+     * sender's display name
+     */
+    displayName: string;
+    /**
+     * id of the sender
+     */
+    userId?: string;
+    /**
+     * The real time text message.
+     */
+    message: string;
+    /**
+     * if the real time text received is partial
+     */
+    isTyping: boolean;
+    /**
+     * If message originated from the local participant
+     */
+    isMe: boolean;
+    /**
+     * timestamp when the real time text was finalized
+     */
+    finalizedTimeStamp: Date;
 };
 /**
  * @public
@@ -31,6 +71,26 @@ export interface CaptionsBannerStrings {
      * Spinner text for captions banner
      */
     captionsBannerSpinnerText?: string;
+    /**
+     * Default text for RTT input text box
+     */
+    realTimeTextInputBoxDefaultText?: string;
+    /**
+     * Error message for RTT input text box when the size exceeds the limit 2000
+     */
+    realTimeTextInputErrorMessage?: string;
+    /**
+     * Real time text disclosure banner title
+     */
+    realTimeTextBannerTitle?: string;
+    /**
+     * Real time text disclosure banner content
+     */
+    realTimeTextBannerContent?: string;
+    /**
+     * Real time text disclosure banner link label
+     */
+    realTimeTextBannerLinkLabel?: string;
 }
 /**
  * @public
@@ -41,10 +101,22 @@ export interface CaptionsBannerProps {
      * Array of captions to be displayed
      */
     captions: CaptionsInformation[];
+    /**
+     * Array of finalized and partial real time text messages
+     */
+    realTimeTexts?: {
+        completedMessages?: RealTimeTextInformation[];
+        currentInProgress?: RealTimeTextInformation[];
+        myInProgress?: RealTimeTextInformation;
+    };
     /**
      * Flag to indicate if captions are on
      */
     isCaptionsOn?: boolean;
+    /**
+     * Flag to indicate if real time text is on
+     */
+    isRealTimeTextOn?: boolean;
     /**
      * Flag to indicate if captions are being started
      * This is used to show spinner while captions are being started
@@ -71,6 +143,14 @@ export interface CaptionsBannerProps {
     captionsOptions?: {
         height: 'full' | 'default';
     };
+    /**
+     * Optional callback to send real time text.
+     */
+    onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;
+    /**
+     * Latest local real time text
+     */
+    latestLocalRealTimeText?: RealTimeTextInformation;
 }
 /**
  * @public

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js CHANGED Viewed

@@ -1,22 +1,53 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(rtt) */
+import { TextField } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+/* @conditional-compile-remove(rtt) */
+import { useMemo } from 'react';
 import { _Caption } from './Caption';
 import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
 import { useLocale } from '../localization';
+/* @conditional-compile-remove(rtt) */
+import { RealTimeText } from './RealTimeText';
+/* @conditional-compile-remove(rtt) */
+import { _RTTDisclosureBanner } from './RTTDisclosureBanner';
+/* @conditional-compile-remove(rtt) */
+import { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';
 const SCROLL_OFFSET_ALLOWANCE = 20;
 /**
  * @public
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 export const CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, formFactor = 'default', captionsOptions } = props;
+    var _a, _b, _c;
+    const { captions,
+    /* @conditional-compile-remove(rtt) */
+    realTimeTexts, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, formFactor = 'default', captionsOptions,
+    /* @conditional-compile-remove(rtt) */
+    isRealTimeTextOn,
+    /* @conditional-compile-remove(rtt) */
+    onSendRealTimeText,
+    /* @conditional-compile-remove(rtt) */
+    latestLocalRealTimeText } = props;
     const localeStrings = useLocale().strings.captionsBanner;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const captionsScrollDivRef = useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const theme = useTheme();
+    /* @conditional-compile-remove(rtt) */
+    // merge realtimetexts and captions into one array based on timestamp
+    // Combine captions and realTimeTexts into one list
+    const combinedList = useMemo(() => {
+        var _a;
+        return sortCaptionsAndRealTimeTexts(captions, (_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) !== null && _a !== void 0 ? _a : []);
+    }, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages]);
+    /* @conditional-compile-remove(rtt) */
+    const mergedCaptions = useMemo(() => {
+        var _a;
+        return [...combinedList, ...((_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.currentInProgress) !== null && _a !== void 0 ? _a : []), realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.myInProgress];
+    }, [combinedList, realTimeTexts]);
     const scrollToBottom = () => {
         if (captionsScrollDivRef.current) {
             captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;
@@ -26,7 +57,8 @@ export const CaptionsBanner = (props) => {
         if (!captionsScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;
+        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >=
+            captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;
         setIsAtBottomOfScroll(atBottom);
     }, []);
     useEffect(() => {
@@ -42,12 +74,62 @@ export const CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return React.createElement(React.Fragment, null, startCaptionsInProgress && React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
-        isCaptionsOn && React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captions.map(caption => {
-            return React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
-                React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar })));
-        })),
-        !isCaptionsOn && React.createElement(Stack, { verticalAlign: "center", styles: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor), "data-is-focusable": true },
-            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" }))));
+    /* @conditional-compile-remove(rtt) */
+    const [textFieldValue, setTextFieldValue] = useState('');
+    /* @conditional-compile-remove(rtt) */
+    useEffect(() => {
+        // if the latest real time text sent by myself is final, clear the text field
+        if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {
+            setTextFieldValue('');
+        }
+    }, [latestLocalRealTimeText]);
+    /* @conditional-compile-remove(rtt) */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (textFieldValue && onSendRealTimeText) {
+                onSendRealTimeText(textFieldValue, true);
+                setTextFieldValue('');
+            }
+        }
+    };
+    /* @conditional-compile-remove(rtt) */
+    const realTimeTextDisclosureBannerStrings = {
+        bannerTitle: (_a = strings.realTimeTextBannerTitle) !== null && _a !== void 0 ? _a : '',
+        bannerContent: (_b = strings.realTimeTextBannerContent) !== null && _b !== void 0 ? _b : '',
+        bannerLinkLabel: (_c = strings.realTimeTextBannerLinkLabel) !== null && _c !== void 0 ? _c : ''
+    };
+    const captionsTrampoline = () => {
+        /* @conditional-compile-remove(rtt) */
+        return (React.createElement(React.Fragment, null, mergedCaptions.map((caption) => {
+            if (caption) {
+                if ('message' in caption) {
+                    return (React.createElement("li", { key: `RealTimeText - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+                        React.createElement(RealTimeText, Object.assign({}, caption))));
+                }
+                return (React.createElement("li", { key: `Captions - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+                    React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+            }
+            return React.createElement(React.Fragment, null);
+        })));
+        return (React.createElement(React.Fragment, null, captions.map((caption) => {
+            return (React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
+                React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+        })));
+    };
+    return (React.createElement(React.Fragment, null, (startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
+        /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (React.createElement("div", { style: { paddingTop: '0.5rem' } },
+            React.createElement(_RTTDisclosureBanner, { strings: realTimeTextDisclosureBannerStrings }))),
+        (isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+                ? captionsBannerFullHeightClassName(theme)
+                : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captionsTrampoline())),
+        /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (React.createElement(TextField, { label: strings.realTimeTextInputBoxDefaultText, value: textFieldValue, onKeyDown: handleKeyDown, onChange: (_, newValue) => {
+                setTextFieldValue(newValue || '');
+                onSendRealTimeText(newValue || '', false);
+            }, maxLength: 2000, errorMessage: textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined })),
+        !isCaptionsOn && /* @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (React.createElement(Stack, { verticalAlign: "center", styles: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+                ? loadingBannerFullHeightStyles(theme)
+                : loadingBannerStyles(formFactor), "data-is-focusable": true },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 //# sourceMappingURL=CaptionsBanner.js.map

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _Caption } from './Caption';\nimport { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n/*\n @public\n * information required for each line of caption\n /\nexport type CaptionsInformation = {\n /\n unique id for each caption\n /\n id: string;\n /\n speaker's display name\n /\n displayName: string;\n /\n content of the caption\n /\n captionText: string;\n /\n id of the speaker\n /\n userId?: string;\n};\n\n/\n @public\n * strings for captions banner\n /\nexport interface CaptionsBannerStrings {\n /\n Spinner text for captions banner\n /\n captionsBannerSpinnerText?: string;\n}\n\n/\n @public\n * CaptionsBanner Component Props.\n /\nexport interface CaptionsBannerProps {\n /\n Array of captions to be displayed\n /\n captions: CaptionsInformation[];\n /\n Flag to indicate if captions are on\n /\n isCaptionsOn?: boolean;\n /\n Flag to indicate if captions are being started\n * This is used to show spinner while captions are being started\n /\n startCaptionsInProgress?: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Optional strings for the component\n /\n strings?: CaptionsBannerStrings;\n /\n Optional form factor for the component.\n * @defaultValue 'default'\n /\n formFactor?: 'default' \| 'compact';\n /\n Optional options for the component.\n /\n captionsOptions?: {\n height: 'full' \| 'default';\n };\n}\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/\n @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n const {\n captions,\n isCaptionsOn,\n startCaptionsInProgress,\n onRenderAvatar,\n formFactor = 'default',\n captionsOptions\n } = props;\n const localeStrings = useLocale().strings.captionsBanner;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n const theme = useTheme();\n const scrollToBottom = (): void => {\n if (captionsScrollDivRef.current) {\n captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n }\n };\n const handleScrollToTheBottom = useCallback((): void => {\n if (!captionsScrollDivRef.current) {\n return;\n }\n const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n setIsAtBottomOfScroll(atBottom);\n }, []);\n useEffect(() => {\n const captionsScrollDiv = captionsScrollDivRef.current;\n captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n return () => {\n captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n };\n }, [handleScrollToTheBottom, isCaptionsOn]);\n useEffect(() => {\n // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n if (isAtBottomOfScroll) {\n scrollToBottom();\n }\n }, [captions, isAtBottomOfScroll]);\n return <>\n {startCaptionsInProgress && <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n {}\n {isCaptionsOn && <ul ref={captionsScrollDivRef} className={captionsOptions?.height === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor)} data-ui-id=\"captions-banner-inner\">\n {captions.map(caption => {\n return <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n </li>;\n })}\n </ul>}\n {}\n {!isCaptionsOn && <Stack verticalAlign=\"center\" styles={captionsOptions?.height === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor)} data-is-focusable={true}>\n <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n </Stack>}\n </FocusZone>}\n </>;\n};"]}
1	+ {"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) /\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\n/ @conditional-compile-remove(rtt) /\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n captionContainerClassName,\n captionsBannerClassName,\n captionsBannerFullHeightClassName,\n captionsContainerClassName,\n loadingBannerFullHeightStyles,\n loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(rtt) /\nimport { RealTimeText } from './RealTimeText';\n/ @conditional-compile-remove(rtt) /\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\n/ @conditional-compile-remove(rtt) /\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\n\n/\n @public\n * information required for each line of caption\n /\nexport type CaptionsInformation = {\n /\n unique id for each caption\n /\n id: string;\n /\n speaker's display name\n /\n displayName: string;\n /\n content of the caption\n /\n captionText: string;\n /\n id of the speaker\n /\n userId?: string;\n / @conditional-compile-remove(rtt) /\n /\n timestamp when the caption was created\n * Please note that this value is essential for determining the order of captions and real time text messages\n * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n /\n createdTimeStamp?: Date;\n};\n\n/ @conditional-compile-remove(rtt) /\n/\n @beta\n * information required for each line of real time text\n /\nexport type RealTimeTextInformation = {\n /\n The sequence id of the real time text.\n /\n id: number;\n /\n sender's display name\n /\n displayName: string;\n /\n id of the sender\n /\n userId?: string;\n /\n The real time text message.\n /\n message: string;\n /\n if the real time text received is partial\n /\n isTyping: boolean;\n /\n If message originated from the local participant\n /\n isMe: boolean;\n /\n timestamp when the real time text was finalized\n /\n finalizedTimeStamp: Date;\n};\n/\n @public\n * strings for captions banner\n /\nexport interface CaptionsBannerStrings {\n /\n Spinner text for captions banner\n /\n captionsBannerSpinnerText?: string;\n / @conditional-compile-remove(rtt) /\n /\n Default text for RTT input text box\n /\n realTimeTextInputBoxDefaultText?: string;\n / @conditional-compile-remove(rtt) /\n /\n Error message for RTT input text box when the size exceeds the limit 2000\n /\n realTimeTextInputErrorMessage?: string;\n / @conditional-compile-remove(rtt) /\n /\n Real time text disclosure banner title\n /\n realTimeTextBannerTitle?: string;\n / @conditional-compile-remove(rtt) /\n /\n Real time text disclosure banner content\n /\n realTimeTextBannerContent?: string;\n / @conditional-compile-remove(rtt) /\n /\n Real time text disclosure banner link label\n /\n realTimeTextBannerLinkLabel?: string;\n}\n\n/\n @public\n * CaptionsBanner Component Props.\n /\nexport interface CaptionsBannerProps {\n /\n Array of captions to be displayed\n /\n captions: CaptionsInformation[];\n / @conditional-compile-remove(rtt) /\n /\n Array of finalized and partial real time text messages\n /\n realTimeTexts?: {\n completedMessages?: RealTimeTextInformation[];\n currentInProgress?: RealTimeTextInformation[];\n myInProgress?: RealTimeTextInformation;\n };\n /\n Flag to indicate if captions are on\n /\n isCaptionsOn?: boolean;\n / @conditional-compile-remove(rtt) /\n /\n Flag to indicate if real time text is on\n /\n isRealTimeTextOn?: boolean;\n /\n Flag to indicate if captions are being started\n * This is used to show spinner while captions are being started\n /\n startCaptionsInProgress?: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Optional strings for the component\n /\n strings?: CaptionsBannerStrings;\n /\n Optional form factor for the component.\n * @defaultValue 'default'\n /\n formFactor?: 'default' \| 'compact';\n /\n Optional options for the component.\n /\n captionsOptions?: {\n height: 'full' \| 'default';\n };\n / @conditional-compile-remove(rtt) /\n /\n Optional callback to send real time text.\n /\n onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;\n / @conditional-compile-remove(rtt) /\n /\n Latest local real time text\n /\n latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/\n @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n /\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n const {\n captions,\n / @conditional-compile-remove(rtt) /\n realTimeTexts,\n isCaptionsOn,\n startCaptionsInProgress,\n onRenderAvatar,\n formFactor = 'default',\n captionsOptions,\n / @conditional-compile-remove(rtt) /\n isRealTimeTextOn,\n / @conditional-compile-remove(rtt) /\n onSendRealTimeText,\n / @conditional-compile-remove(rtt) /\n latestLocalRealTimeText\n } = props;\n const localeStrings = useLocale().strings.captionsBanner;\n const strings = { ...localeStrings, ...props.strings };\n const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n const theme = useTheme();\n / @conditional-compile-remove(rtt) /\n // merge realtimetexts and captions into one array based on timestamp\n // Combine captions and realTimeTexts into one list\n const combinedList: (CaptionsInformation \| RealTimeTextInformation)[] = useMemo(() => {\n return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n }, [captions, realTimeTexts?.completedMessages]);\n\n / @conditional-compile-remove(rtt) /\n const mergedCaptions: (CaptionsInformation \| RealTimeTextInformation)[] = useMemo(() => {\n return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress] as (\n \| CaptionsInformation\n \| RealTimeTextInformation\n )[];\n }, [combinedList, realTimeTexts]);\n\n const scrollToBottom = (): void => {\n if (captionsScrollDivRef.current) {\n captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n }\n };\n\n const handleScrollToTheBottom = useCallback((): void => {\n if (!captionsScrollDivRef.current) {\n return;\n }\n const atBottom =\n Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n setIsAtBottomOfScroll(atBottom);\n }, []);\n\n useEffect(() => {\n const captionsScrollDiv = captionsScrollDivRef.current;\n captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n return () => {\n captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n };\n }, [handleScrollToTheBottom, isCaptionsOn]);\n\n useEffect(() => {\n // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n if (isAtBottomOfScroll) {\n scrollToBottom();\n }\n }, [captions, isAtBottomOfScroll]);\n / @conditional-compile-remove(rtt) /\n const [textFieldValue, setTextFieldValue] = useState<string>('');\n / @conditional-compile-remove(rtt) /\n useEffect(() => {\n // if the latest real time text sent by myself is final, clear the text field\n if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n setTextFieldValue('');\n }\n }, [latestLocalRealTimeText]);\n\n / @conditional-compile-remove(rtt) /\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>): void => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (textFieldValue && onSendRealTimeText) {\n onSendRealTimeText(textFieldValue, true);\n setTextFieldValue('');\n }\n }\n };\n\n / @conditional-compile-remove(rtt) /\n const realTimeTextDisclosureBannerStrings = {\n bannerTitle: strings.realTimeTextBannerTitle ?? '',\n bannerContent: strings.realTimeTextBannerContent ?? '',\n bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n };\n\n const captionsTrampoline = (): JSX.Element => {\n / @conditional-compile-remove(rtt) /\n return (\n <>\n {mergedCaptions.map((caption) => {\n if (caption) {\n if ('message' in caption) {\n return (\n <li key={`RealTimeText - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n <RealTimeText {...(caption as RealTimeTextInformation)} />\n </li>\n );\n }\n return (\n <li key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n </li>\n );\n }\n return <></>;\n })}\n </>\n );\n\n return (\n <>\n {captions.map((caption) => {\n return (\n <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n </li>\n );\n })}\n </>\n );\n };\n\n return (\n <>\n {(startCaptionsInProgress \|\| / @conditional-compile-remove(rtt) / isRealTimeTextOn) && (\n <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n {\n / @conditional-compile-remove(rtt) / isRealTimeTextOn && (\n <div style={{ paddingTop: '0.5rem' }}>\n <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n </div>\n )\n }\n {(isCaptionsOn \|\| / @conditional-compile-remove(rtt) / isRealTimeTextOn) && (\n <ul\n ref={captionsScrollDivRef}\n className={\n captionsOptions?.height === 'full'\n ? captionsBannerFullHeightClassName(theme)\n : captionsBannerClassName(formFactor)\n }\n data-ui-id=\"captions-banner-inner\"\n >\n {captionsTrampoline()}\n </ul>\n )}\n {\n / @conditional-compile-remove(rtt) / isRealTimeTextOn && onSendRealTimeText && (\n <TextField\n label={strings.realTimeTextInputBoxDefaultText}\n value={textFieldValue}\n onKeyDown={handleKeyDown}\n onChange={(_, newValue) => {\n setTextFieldValue(newValue \|\| '');\n onSendRealTimeText(newValue \|\| '', false);\n }}\n maxLength={2000}\n errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n />\n )\n }\n {!isCaptionsOn && / @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (\n <Stack\n verticalAlign=\"center\"\n styles={\n captionsOptions?.height === 'full'\n ? loadingBannerFullHeightStyles(theme)\n : loadingBannerStyles(formFactor)\n }\n data-is-focusable={true}\n >\n <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n </Stack>\n )}\n </FocusZone>\n )}\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js CHANGED Viewed

@@ -40,7 +40,8 @@ export const CaptionsSettingsModal = (props) => {
         text: currentSpokenLanguage || defaultSpokenLanguage
     });
     const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState({
-        key: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
+        key: currentCaptionLanguage ||
+            _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
         text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
     });
     useEffect(() => {
@@ -67,14 +68,21 @@ export const CaptionsSettingsModal = (props) => {
             }
         }
         else {
-            yield onStartCaptions({
-                spokenLanguage: spokenLanguageCode
-            });
+            yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
         }
         onDismiss();
-    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key, changeCaptionLanguage]);
+    }), [
+        onDismiss,
+        isCaptionsFeatureActive,
+        onSetSpokenLanguage,
+        onSetCaptionLanguage,
+        onStartCaptions,
+        selectedSpokenLanguage.key,
+        selectedCaptionLanguage.key,
+        changeCaptionLanguage
+    ]);
     const spokenLanguageDropdownOptions = useMemo(() => {
-        return supportedSpokenLanguages.map(languageCode => {
+        return supportedSpokenLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
@@ -82,7 +90,7 @@ export const CaptionsSettingsModal = (props) => {
         });
     }, [supportedSpokenLanguages, spokenLanguageStrings]);
     const captionLanguageDropdownOptions = useMemo(() => {
-        return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map(languageCode => {
+        return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
@@ -91,11 +99,11 @@ export const CaptionsSettingsModal = (props) => {
     }, [supportedCaptionLanguages, captionLanguageStrings]);
     const sortedSpokenLanguageDropdownOptions = useMemo(() => {
         const copy = [...spokenLanguageDropdownOptions];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [spokenLanguageDropdownOptions]);
     const sortedCaptionLanguageDropdownOptions = useMemo(() => {
         const copy = [...(captionLanguageDropdownOptions !== null && captionLanguageDropdownOptions !== void 0 ? captionLanguageDropdownOptions : [])];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [captionLanguageDropdownOptions]);
     const onSpokenLanguageChange = (event, option) => {
         if (option) {
@@ -113,27 +121,37 @@ export const CaptionsSettingsModal = (props) => {
     const CaptionsSettingsComponent = useCallback(() => {
         const placeholderSpokenLanguage = currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage;
         const placeholderCaptionLanguage = currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
-        return React.createElement(Stack, null,
+        return (React.createElement(Stack, null,
             React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: (ev, option) => onSpokenLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
             React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
-            changeCaptionLanguage && React.createElement(React.Fragment, null,
+            changeCaptionLanguage && (React.createElement(React.Fragment, null,
                 React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: (ev, option) => onCaptionLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
-                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)));
-    }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);
+                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        currentCaptionLanguage,
+        sortedSpokenLanguageDropdownOptions,
+        sortedCaptionLanguageDropdownOptions,
+        selectedCaptionLanguage,
+        selectedSpokenLanguage,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText,
+        theme,
+        changeCaptionLanguage
+    ]);
     const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
-    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
             React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
-            React.createElement(IconButton, { iconProps: {
-                    iconName: 'Cancel'
-                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: {
-                    color: theme.palette.black
-                } })),
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
         React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
             React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                 React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
             React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
-                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel)))));
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map