@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
44 lines • 2.7 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