Update Captions to properly show captionLanguage

Author: edwardlee-msft

Project/src/MakeCall/CallCaption.js

@@ -5,9 +5,12 @@ import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
 // CallCaption react function component
 const CallCaption = ({ call }) => {
     const [captionsFeature, setCaptionsFeature] = useState(call.feature(Features.Captions));
+    const [capabilitiesFeature, setCapabilitiesFeature] = useState(call.feature(Features.Capabilities));
     const [captions, setCaptions] = useState(captionsFeature.captions);
     const [currentSpokenLanguage, setCurrentSpokenLanguage] = useState(captions.activeSpokenLanguage);
-    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState(captions.activeCaptionLanguage);
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState(null);
+    let captionLanguageCurrent = null;
+    
 
     useEffect(() => {
         try {
@@ -23,7 +26,7 @@ const CallCaption = ({ call }) => {
             captions.off('CaptionsActiveChanged', captionsActiveHandler);
             captions.off('CaptionsReceived', captionsReceivedHandler);
             captions.off('SpokenLanguageChanged', activeSpokenLanguageHandler);
-            if (captions.captionsType === 'TeamsCaptions') {
+            if (captions.kind === 'TeamsCaptions' && capabilitiesFeature.capabilities.setCaptionLanguage?.isPresent) {
                 captions.off('CaptionLanguageChanged', activeCaptionLanguageHandler);
             }
         };
@@ -37,7 +40,12 @@ const CallCaption = ({ call }) => {
             captions.on('CaptionsActiveChanged', captionsActiveHandler);
             captions.on('CaptionsReceived', captionsReceivedHandler);
             captions.on('SpokenLanguageChanged', activeSpokenLanguageHandler);
-            if (captions.captionsType === 'TeamsCaptions') {
+            capabilitiesFeature.on('CapabilitiesChanged', (value) => {
+                if (value.newValue.setCaptionLanguage) {
+                    setCapabilitiesFeature(call.feature(Features.Capabilities));
+                }
+            });
+            if (captions.kind === 'TeamsCaptions' && capabilitiesFeature.capabilities.setCaptionLanguage?.isPresent) {
                 captions.on('CaptionLanguageChanged', activeCaptionLanguageHandler);
             }
         } catch (e) {
@@ -55,46 +63,49 @@ const CallCaption = ({ call }) => {
 
     const captionsActiveHandler = () => {
         console.log('CaptionsActiveChanged: ', captions.isCaptionsFeatureActive);
+        setCurrentSpokenLanguage(captions.activeSpokenLanguage);
+        setCurrentCaptionLanguage(captions.activeCaptionLanguage);
     }
     const activeSpokenLanguageHandler = () => {
         setCurrentSpokenLanguage(captions.activeSpokenLanguage);
     }
     const activeCaptionLanguageHandler = () => {
         setCurrentCaptionLanguage(captions.activeCaptionLanguage);
+        captionLanguageCurrent = captions.activeCaptionLanguage;
     }
 
     const captionsReceivedHandler = (captionData) => {
-        let mri = '';
-        if (captionData.speaker.identifier.kind === 'communicationUser') {
-            mri = captionData.speaker.identifier.communicationUserId;
-        } else if (captionData.speaker.identifier.kind === 'microsoftTeamsUser') {
-            mri = captionData.speaker.identifier.microsoftTeamsUserId;
-        } else if (captionData.speaker.identifier.kind === 'phoneNumber') {
-            mri = captionData.speaker.identifier.phoneNumber;
-        }
-
-        let captionAreasContainer = document.getElementById('captionsArea');
-        const newClassName = `prefix${mri.replace(/:/g, '').replace(/-/g, '').replace(/\+/g, '')}`;
-        const captionText = `${captionData.timestamp.toUTCString()}
-            ${captionData.speaker.displayName}: ${captionData.captionText ?? captionData.spokenText}`;
-
-        let foundCaptionContainer = captionAreasContainer.querySelector(`.${newClassName}[isNotFinal='true']`);
-        if (!foundCaptionContainer) {
-            let captionContainer = document.createElement('div');
-            captionContainer.setAttribute('isNotFinal', 'true');
-            captionContainer.style['borderBottom'] = '1px solid';
-            captionContainer.style['whiteSpace'] = 'pre-line';
-            captionContainer.textContent = captionText;
-            captionContainer.classList.add(newClassName);
-            captionContainer.classList.add('caption-item')
-
-            captionAreasContainer.appendChild(captionContainer);
-
-        } else {
-            foundCaptionContainer.textContent = captionText;
-
-            if (captionData.resultType === 'Final') {
-                foundCaptionContainer.setAttribute('isNotFinal', 'false');
+        if (!captionLanguageCurrent || captionLanguageCurrent === captionData.captionLanguage) {
+            let mri = '';
+            switch (captionData.speaker.identifier.kind) {
+                case 'communicationUser': { mri = captionData.speaker.identifier.communicationUserId; break; }
+                case 'microsoftTeamsUser': { mri = captionData.speaker.identifier.microsoftTeamsUserId; break; }
+                case 'phoneNumber': { mri = captionData.speaker.identifier.phoneNumber; break; }
+            }
+            let captionAreasContainer = document.getElementById('captionsArea');
+            const newClassName = `prefix${mri.replace(/:/g, '').replace(/-/g, '').replace(/\+/g, '')}`;
+            const captionText = `${captionData.timestamp.toUTCString()}
+                ${captionData.speaker.displayName ?? mri}: ${captionData.captionText ?? captionData.spokenText}`;
+
+            let foundCaptionContainer = captionAreasContainer.querySelector(`.${newClassName}[isNotFinal='true']`);
+
+            if (!foundCaptionContainer) {
+                let captionContainer = document.createElement('div');
+                captionContainer.setAttribute('isNotFinal', 'true');
+                captionContainer.style['borderBottom'] = '1px solid';
+                captionContainer.style['whiteSpace'] = 'pre-line';
+                captionContainer.textContent = captionText;
+                captionContainer.classList.add(newClassName);
+                captionContainer.classList.add('caption-item')
+
+                captionAreasContainer.appendChild(captionContainer);
+
+            } else {
+                foundCaptionContainer.textContent = captionText;
+
+                if (captionData.resultType === 'Final') {
+                    foundCaptionContainer.setAttribute('isNotFinal', 'false');
+                }
             }
         }
     };
@@ -113,7 +124,7 @@ const CallCaption = ({ call }) => {
                 onChange={spokenLanguageSelectionChanged}
                 label={'Spoken Language'}
                 options={keyedSupportedSpokenLanguages}
-                styles={{ label: {color: '#edebe9'}, dropdown: { width: 100 } }}
+                styles={{ label: {color: '#edebe9'}, dropdown: { width: 100 }, root: {paddingBottom: '1rem'} }}
             />
     }
 
@@ -131,14 +142,14 @@ const CallCaption = ({ call }) => {
                 onChange={captionLanguageSelectionChanged}
                 label={'Caption Language'}
                 options={keyedSupportedCaptionLanguages}
-                styles={{ label: {color: '#edebe9'}, dropdown: { width: 100, overflow: 'scroll' } }}
+                styles={{ label: {color: '#edebe9'}, dropdown: { width: 100, overflow: 'scroll' }, root: {paddingBottom: '1rem'}  }}
             />
     }
 
     return (
         <>
             {captions && <SpokenLanguageDropdown/>}
-            {captions && captions.captionsType === 'TeamsCaptions' && <CaptionLanguageDropdown/>}
+            {captions && captions.kind === 'TeamsCaptions'  && capabilitiesFeature.capabilities.setCaptionLanguage?.isPresent && <CaptionLanguageDropdown/>}
             <div className="scrollable-captions-container">
                 <div id="captionsArea" className="captions-area">
                 </div>