communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
72 lines • 4.3 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useState, useEffect, useCallback } from 'react';
import { CaptionsBanner } from "../../../../react-components/src";
import { mergeStyles, Stack } from '@fluentui/react';
import { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';
import { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';
import { useLocale } from '../localization';
import { AvatarPersona } from './AvatarPersona';
import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
const mobileViewBannerWidth = '95%';
/** @private */
export const CallingCaptionsBanner = (props) => {
var _a;
const captionsBannerProps = usePropsFor(CaptionsBanner);
const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState(false);
const onClickCaptionsSettings = () => {
setIsCaptionsSettingsOpen(true);
};
const onDismissCaptionsSettings = () => {
setIsCaptionsSettingsOpen(false);
};
const containerClassName = mergeStyles(((_a = props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full'
? mergeStyles({
position: 'absolute',
height: '100%',
width: '100%'
})
: { position: 'relative' });
const floatingChildClassName = mergeStyles({
position: 'absolute',
right: 0,
top: 0
});
const strings = useLocale().strings.call;
const captionsBannerStrings = {
captionsBannerSpinnerText: strings.captionsBannerSpinnerText,
realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,
realTimeTextInputErrorMessage: strings.realTimeTextInputErrorMessage,
realTimeTextBannerContent: strings.realTimeTextBannerContent,
realTimeTextBannerTitle: strings.realTimeTextBannerTitle,
realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel,
captionsOnlyContainerTitle: strings.captionsOnlyContainerTitle,
realTimeTextOnlyContainerTitle: strings.realTimeTextOnlyContainerTitle,
captionsAndRealTimeTextContainerTitle: strings.captionsAndRealTimeTextContainerTitle,
expandButtonAriaLabel: strings.expandButtonAriaLabel,
minimizeButtonAriaLabel: strings.minimizeButtonAriaLabel
};
const onRenderAvatar = useCallback((userId, options) => {
return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
}, [props.onFetchAvatarPersonaData]);
const { innerWidth: width } = window;
const [windowWidth, setWindowWidth] = useState(width);
useEffect(() => {
function handleResize() {
setWindowWidth(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
return (React.createElement(React.Fragment, null,
isCaptionsSettingsOpen && (React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
React.createElement("div", { className: containerClassName, role: "region", "aria-label": strings.liveCaptionsLabel },
React.createElement(Stack, { horizontalAlign: "center" },
React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
React.createElement(CaptionsBanner, Object.assign({ captionsOptions: props.captionsOptions, onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings }, captionsBannerProps, { isRealTimeTextOn: props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn })))),
!props.isMobile && captionsBannerProps.isCaptionsOn && (React.createElement("div", { className: floatingChildClassName },
React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
};
//# sourceMappingURL=CallingCaptionsBanner.js.map