communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
44 lines • 2.72 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useState } from 'react';
import { hiddenAnnouncementClassName } from './styles/Captions.style';
/** @internal */
export const _CaptionsAndRTTAnnouncer = (props) => {
const { captions, realTimeTexts, realTimeTextTitle, captionsTitle } = props;
const [announcedRTT, setAnnouncedRTT] = useState([]);
const [announcedCaption, setAnnouncedCaption] = useState([]);
const [captionAnnouncementText, setCaptionAnnouncementText] = useState([]);
const [rttAnnouncementText, setRTTAnnouncementText] = useState([]);
useEffect(() => {
if (realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) {
//filter out the messages that have already been announced
const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter((message) => !announcedRTT.includes(message.id));
if (rTTMessagesToAnnounce.length > 0) {
setRTTAnnouncementText(rTTMessagesToAnnounce);
setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
}
}
if (captions.length > 0) {
// filter out the captions that have already been announced
const captionsToAnnounce = captions.filter((caption) => !announcedCaption.includes(caption.id) && caption.isFinalized);
if (captionsToAnnounce.length > 0) {
setCaptionAnnouncementText(captionsToAnnounce);
setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
}
}
}, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages, announcedRTT, announcedCaption]);
return (React.createElement(React.Fragment, null, (rttAnnouncementText.length > 0 || (captionAnnouncementText === null || captionAnnouncementText === void 0 ? void 0 : captionAnnouncementText.length) > 0) && (React.createElement("div", { "aria-live": "assertive", role: "alert", "aria-atomic": "true", className: hiddenAnnouncementClassName },
React.createElement("span", null, rttAnnouncementText.map((text) => (React.createElement("span", null,
realTimeTextTitle,
" ",
text.displayName,
": ",
text.message)))),
React.createElement("span", null, captionAnnouncementText.map((text) => (React.createElement("span", null,
captionsTitle,
" ",
text.displayName,
": ",
text.captionText))))))));
};
//# sourceMappingURL=CaptionsAndRTTAnnouncer.js.map