agora-appbuilder-core 4.1.12 → 4.1.13-1

package/template/src/atoms/ActionMenu.tsx

@@ -460,7 +460,7 @@ const styles = StyleSheet.create({
     marginLeft: 12,
   },
   iconContainerEnd: {
-    marginLeft: 10,
+    marginLeft: 'auto',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',

package/template/src/atoms/CustomIcon.tsx

@@ -25,6 +25,7 @@ export interface IconsInterface {
   clipboard: string;
   tick: string;
   'tick-fill': string;
+  'arrow-right': string;
   'arrow-down': string;
   'arrow-up': string;
   'screen-share': string;

package/template/src/atoms/Popup.tsx

@@ -106,7 +106,7 @@ const Popup = (props: PopupProps) => {
                 <></>
               )}
 
-              {title ? <Spacer size={32} /> : null}
+              {title ? <Spacer size={24} /> : null}
             </>
           ) : (
             <></>

package/template/src/components/Controls.tsx

@@ -320,9 +320,9 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     setIsCaptionON,
     // language: prevLang,
     isSTTActive,
-    // setIsSTTActive,
+    sttDepsReady,
     isSTTError,
-    handleTranslateConfigChange,
+    confirmSpokenLanguageChange,
   } = useCaption();
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
@@ -538,7 +538,13 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       icon: `${isCaptionON ? 'captions-off' : 'captions'}`,
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
-      disabled: !($config.ENABLE_STT && $config.ENABLE_CAPTION),
+      disabled:
+        !sttDepsReady ||
+        !(
+          $config.ENABLE_STT &&
+          $config.ENABLE_CAPTION &&
+          (isHost || isSTTActive)
+        ),
       title: captionLabel(isCaptionON),
       onPress: () => {
         setActionMenuVisible(false);
@@ -560,11 +566,14 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         icon: 'transcript',
         iconColor: $config.SECONDARY_ACTION_COLOR,
         textColor: $config.FONT_COLOR,
-        disabled: !(
-          $config.ENABLE_STT &&
-          $config.ENABLE_CAPTION &&
-          $config.ENABLE_MEETING_TRANSCRIPT
-        ),
+        disabled:
+          !sttDepsReady ||
+          !(
+            $config.ENABLE_STT &&
+            $config.ENABLE_CAPTION &&
+            $config.ENABLE_MEETING_TRANSCRIPT &&
+            (isHost || isSTTActive)
+          ),
         title: transcriptLabel(isTranscriptON),
         onPress: () => {
           setActionMenuVisible(false);
@@ -837,30 +846,15 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     setActionMenuVisible(false);
   }, [currentLayout]);
 
-  const onConfirm = async (inputTranslateConfig: LanguageTranslationConfig) => {
+  const onConfirm = async (newSpokenLang: LanguageType) => {
     console.log(
-      '[STT_PER_USER_BOT] Controls onConfirm called',
-      inputTranslateConfig,
+      '[STT_GLOBAL] spoken language changed confirm called',
+      newSpokenLang,
     );
     const isCaptionClicked = STT_clicked.current === 'caption';
     const isTranscriptClicked = STT_clicked.current === 'transcript';
     setLanguagePopup(false);
-    // isFirstTimePopupOpen.current = false;
-    // const method = isCaptionClicked
-    //   ? isCaptionON
-    //   : isTranscriptON
-    //   ? 'stop'
-    //   : 'start';
-
-    // if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
-    // if (method === 'start' && isSTTActive === true) return; // not triggering the start service if STT Service already started by anyone else in the channel
-
     try {
-      // const res = await start(language, language);
-      // if (res?.message.includes('STARTED')) {
-      //   // channel is already started now restart
-      //   await restart(language, language);
-      // }
       if (isTranscriptClicked) {
         if (!isTranscriptON) {
           setSidePanel(SidePanelType.Transcript);
@@ -872,7 +866,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         setIsCaptionON(prev => !prev);
       } else {
       }
-      await handleTranslateConfigChange(inputTranslateConfig);
+      await confirmSpokenLanguageChange(newSpokenLang);
     } catch (error) {
       setIsCaptionON(false);
       setSidePanel(SidePanelType.None);
@@ -1271,11 +1265,6 @@ const Controls = (props: ControlsProps) => {
   //   addStreamMessageListener();
   // }, [sttLanguage]);
 
-  // Ask bhupendra
-  // React.useEffect(() => {
-  //   setIsSTTActive(isSTTActive);
-  // }, [isSTTActive]);
-
   const isHidden = (hide: ToolbarItemHide = false) => {
     try {
       return typeof hide === 'boolean'

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -10,7 +10,7 @@ export type sttSpokenLanguageToastHeadingDataType = 'Set' | 'Changed';
 export interface sttSpokenLanguageToastSubHeadingDataInterface {
   action: sttSpokenLanguageToastHeadingDataType;
   newLanguage: string;
-  oldLanguage: string;
+  oldLanguage?: string;
   username: string;
 }
 
@@ -581,7 +581,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemNoiseCancellationText]?: I18nBaseType;
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
-  [toolbarItemTranscriptText]?: I18nConditionalType;
+  [toolbarItemTranscriptText]?: I18nBaseType;
   [toolbarItemManageTextTracksText]?: I18nConditionalType;
   [toolbarItemVirtualBackgroundText]?: I18nBaseType;
   [toolbarItemViewRecordingText]?: I18nConditionalType;
@@ -955,7 +955,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemCaptionText]: active =>
     active ? 'Hide Caption' : 'Show Caption',
   [toolbarItemTranscriptText]: active =>
-    active ? 'Hide Transcript' : 'Show Transcript',
+    active ? 'Hide Meeting Transcript' : 'Show Meeting Transcript',
   [toolbarItemViewRecordingText]: 'View Recordings',
   [toolbarItemManageTextTracksText]: 'View Text-tracks',
 
@@ -1043,8 +1043,8 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [textTrackModalTitleIntn]: 'Text Tracks',
   [sttChangeLanguagePopupHeading]: isFirstTimeOpened =>
     isFirstTimeOpened
-      ? 'Setup Captions & Translation'
-      : 'Modify Captions & Translation',
+      ? 'Setup Captions & Transcript'
+      : 'Update Spoken Language',
   [sttChangeLanguagePopupSubHeading]:
     'Please select your preferred language as the source language and up to 10 target languages to translate into. You can update these settings at any time by returning to this page.',
   [sttChangeLanguagePopupPrimaryBtnText]: 'CONFIRM',
@@ -1052,9 +1052,9 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     'You can choose a maximum of ten languages',
   [sttChangeLanguagePopupDropdownError]:
     'Choose at least one language to proceed',
-  [sttChangeSpokenLanguageText]: 'Change Spoken Language',
+  [sttChangeSpokenLanguageText]: 'Update Spoken Language',
   [sttStopTranslationText]: 'Stop Translation',
-  [sttOriginalTranslatedText]: 'Show Original and translated',
+  [sttOriginalTranslatedText]: 'Show original and translated',
   [sttTranscriptPanelHeaderText]: 'Meeting Transcript',
   [sttDownloadBtnText]: 'Download',
   [sttDownloadTranscriptBtnText]: 'Download Transcript',
@@ -1289,8 +1289,8 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     username,
   }) =>
     action === 'Set'
-      ? `${username} has set the spoken language to "${newLanguage}"`
-      : `${username} changed the spoken language from "${oldLanguage}" to ${newLanguage}`,
+      ? `${username} set the spoken language to "${newLanguage}".`
+      : `${username} changed the spoken language from "${oldLanguage}" to "${newLanguage}".`,
 
   [deviceDetectionToastHeading]: name => `New ${name} detected`,
   [deviceDetectionToastSubHeading]: ({name, label}) =>

package/template/src/pages/VideoCall.tsx

@@ -491,7 +491,8 @@ const VideoCall: React.FC = () => {
                                     <RtmConfigure callActive={callActive}>
                                       <UserPreferenceProvider
                                         callActive={callActive}>
-                                        <CaptionProvider>
+                                        <CaptionProvider
+                                          callActive={callActive}>
                                           <WaitingRoomProvider>
                                             <EventsConfigure
                                               setSttAutoStarted={

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -216,7 +216,6 @@ const ActionSheetContent = props => {
   const {isPendingRequestToReview, raiseHandList} =
     useContext(LiveStreamContext);
   const {totalUnreadCount} = useChatNotification();
-  // const {setIsSTTActive, setLanguage, setMeetingTranscript} = useCaption();
   const {defaultContent} = useContent();
   const {waitingRoomUids} = useWaitingRoomContext();
   const defaultContentRef = React.useRef(defaultContent);
@@ -226,12 +225,6 @@ const ActionSheetContent = props => {
     defaultContentRef.current = defaultContent;
   }, [defaultContent]);
 
-  // STT events on mount
-
-  //  React.useEffect(() => {
-  //   setIsSTTActive(isSTTActive);
-  // }, [isSTTActive]);
-
   // React.useEffect(() => {
   //   // for mobile events are set in ActionSheetContent
   //   if (!sttLanguage) return;

package/template/src/pages/video-call/SidePanelHeader.tsx

@@ -30,6 +30,7 @@ import LanguageSelectorPopup from '../../subComponents/caption/LanguageSelectorP
 import useSTTAPI from '../../subComponents/caption/useSTTAPI';
 import useGetName from '../../utils/useGetName';
 import {
+  getLanguageLabel,
   LanguageType,
   mergeTranslationConfigs,
   TranslateConfig,
@@ -53,9 +54,9 @@ import {
   sttDownloadTranscriptBtnText,
   sttStopTranslationText,
   sttTranscriptPanelHeaderText,
+  sttOriginalTranslatedText,
 } from '../../language/default-labels/videoCallScreenLabels';
-import {logger, LogSource} from '../../logger/AppBuilderLogger';
-import {TranslateActionMenu} from '../../subComponents/caption/CaptionContainer';
+import {TranslateActionMenu} from '../../subComponents/caption/TranslateActionMenu';
 
 export const SettingsHeader = props => {
   const {setSidePanel} = useSidePanel();
@@ -269,10 +270,11 @@ interface TranscriptHeaderActionMenuProps {
 const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
   const {actionMenuVisible, setActionMenuVisible, btnRef} = props;
   const {
-    language: prevLang,
     meetingTranscript,
     isLangChangeInProgress,
     selectedTranslationLanguage,
+    transcriptViewMode,
+    setTranscriptViewMode,
   } = useCaption();
   const {downloadTranscript} = useTranscriptDownload();
   const [modalPosition, setModalPosition] = React.useState({});
@@ -282,89 +284,99 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     React.useState<boolean>(false);
   const [isTranslateMenuOpen, setTranslateMenuOpen] =
     React.useState<boolean>(false);
-  const {restart} = useSTTAPI();
-  const username = useGetName();
+  // const {restart} = useSTTAPI();
+  // const username = useGetName();
   const actionMenuitems: ActionMenuItem[] = [];
   const {
     data: {isHost},
-    sttLanguage,
   } = useRoomInfo();
-  const {handleTranslateConfigChange, updateSTTBotSession, translationConfig} =
-    useCaption();
+  const {confirmSpokenLanguageChange} = useCaption();
   const downloadTranscriptLabel = useString(sttDownloadTranscriptBtnText)();
-  const changeSpokenLanguage = useString<boolean>(
+  const updateSpokenLanguageLabel = useString<boolean>(
     sttChangeSpokenLanguageText,
   )();
-  const sttStopTranslationLabel = useString<boolean>(sttStopTranslationText)();
-  const changeTranslationLanguage = useString<boolean>(
-    sttChangeTranslationLanguageText,
-  )();
+  // const sttStopTranslationLabel = useString<boolean>(sttStopTranslationText)();
+  // const changeTranslationLanguage = useString<boolean>(
+  //   sttChangeTranslationLanguageText,
+  // )();
+  const sttOriginalTranslatedLabel = useString(sttOriginalTranslatedText)();
 
-  // isHost &&
-  actionMenuitems.push({
-    icon: 'globe',
-    iconColor: $config.SECONDARY_ACTION_COLOR,
-    textColor: $config.FONT_COLOR,
-    title: changeSpokenLanguage + ' ',
-    disabled: isLangChangeInProgress,
-    onPress: () => {
-      setActionMenuVisible(false);
-      setLanguagePopup(true);
-    },
-  });
-
-  // actionMenuitems.push({
-  //   icon: 'lang-select',
-  //   iconColor: $config.SECONDARY_ACTION_COLOR,
-  //   textColor: $config.FONT_COLOR,
-  //   title: changeTranslationLanguage,
-  //   disabled: false,
-  //   onPress: () => {
-  //     setActionMenuVisible(false);
-  //     setTranslateMenuOpen(true);
-  //   },
-  // });
+  // Update Spoken language
+  isHost &&
+    actionMenuitems.push({
+      icon: 'globe',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: updateSpokenLanguageLabel + ' ',
+      disabled: isLangChangeInProgress,
+      onPress: () => {
+        setActionMenuVisible(false);
+        setLanguagePopup(true);
+      },
+    });
 
   actionMenuitems.push({
     icon: 'lang-select',
     iconColor: $config.SECONDARY_ACTION_COLOR,
     textColor: $config.FONT_COLOR,
-    title: sttStopTranslationLabel,
-    disabled: false,
-    onPress: async () => {
+    title: `Translate to: ${
+      selectedTranslationLanguage
+        ? getLanguageLabel([selectedTranslationLanguage])
+        : 'OFF'
+    }`,
+    endIcon: 'arrow-right',
+    endIconColor: $config.SECONDARY_ACTION_COLOR,
+    disabled: isLangChangeInProgress,
+    onPress: () => {
       setActionMenuVisible(false);
-      // Keep source language same, just clear target languages
-      // This stops translation but keeps transcription running
-      await updateSTTBotSession({
-        source: translationConfig.source, // Keep current source
-        targets: [], // Empty targets = no translation
-      });
+      setTranslateMenuOpen(true);
     },
   });
 
+  // View Mode Options
+  selectedTranslationLanguage &&
+    actionMenuitems.push({
+      icon: 'lang-translate',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      endIcon:
+        transcriptViewMode === 'original-and-translated'
+          ? 'tick-fill'
+          : undefined,
+      endIconColor: $config.SEMANTIC_SUCCESS,
+      textColor: $config.FONT_COLOR,
+      title: sttOriginalTranslatedLabel,
+      disabled: isLangChangeInProgress,
+      onPress: () => {
+        setTranscriptViewMode(
+          transcriptViewMode === 'translated'
+            ? 'original-and-translated'
+            : 'translated',
+        );
+        setActionMenuVisible(false);
+      },
+    });
+  // Download transcript
   actionMenuitems.push({
     icon: 'download',
     iconColor: $config.SECONDARY_ACTION_COLOR,
     textColor: $config.FONT_COLOR,
     title: downloadTranscriptLabel,
-    disabled: meetingTranscript.length === 0,
+    disabled: meetingTranscript.length === 0 || isLangChangeInProgress,
     onPress: () => {
       downloadTranscript();
       setActionMenuVisible(false);
     },
   });
 
-  const onLanguageChange = async (
-    inputTranslateConfig: LanguageTranslationConfig,
-  ) => {
+  const onLanguageChange = async (newSpokenLang: LanguageType) => {
     console.log(
-      '[STT_PER_USER_BOT] SidePanelHeader TranscriptHeaderActionMenu - onLanguageChange - sourceLanguage , targetLanguage:',
-      inputTranslateConfig,
+      '[STT_GLOBAL] SidePanelHeader TranscriptHeaderActionMenu onSpokenLang changed called:',
+      newSpokenLang,
     );
     setLanguagePopup(false);
     // Update caption with new language configuration\
     try {
-      await handleTranslateConfigChange(inputTranslateConfig);
+      await confirmSpokenLanguageChange(newSpokenLang);
     } catch (error) {}
   };
 
@@ -394,6 +406,7 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
       );
     }
   }, [actionMenuVisible]);
+
   return (
     <>
       <ActionMenu
@@ -404,17 +417,21 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
         items={actionMenuitems}
       />
 
-      <LanguageSelectorPopup
-        modalVisible={isLanguagePopupOpen}
-        setModalVisible={setLanguagePopup}
-        onConfirm={onLanguageChange}
-      />
+      {isLanguagePopupOpen && (
+        <LanguageSelectorPopup
+          modalVisible={isLanguagePopupOpen}
+          setModalVisible={setLanguagePopup}
+          onConfirm={onLanguageChange}
+        />
+      )}
 
-      <TranslateActionMenu
-        actionMenuVisible={isTranslateMenuOpen}
-        setActionMenuVisible={setTranslateMenuOpen}
-        btnRef={btnRef}
-      />
+      {isTranslateMenuOpen && (
+        <TranslateActionMenu
+          actionMenuVisible={isTranslateMenuOpen}
+          setActionMenuVisible={setTranslateMenuOpen}
+          btnRef={btnRef}
+        />
+      )}
     </>
   );
 };

package/template/src/rtm-events/constants.ts

@@ -33,6 +33,10 @@ const STT_LANGUAGE = 'STT_LANGUAGE_CHANGED';
 const STT_TRANSLATE_LANGUAGE = 'STT_TRANSLATE_LANGUAGE_CHANGED';
 const STT_SPOKEN_LANGUAGE = 'STT_SPOKEN_LANGUAGE';
 const USER_STOPPED_TRANSLATION = 'USER_STOPPED_TRANSLATION';
+const STT_GLOBAL_STATE = 'STT_GLOBAL_STATE';
+const STT_GLOBAL_SOURCE_LANGUAGE_UPDATED = 'STT_GLOBAL_SOURCE_LANGUAGE_UPDATED';
+const STT_GLOBAL_TARGET_LANGUAGES_UPDATED =
+  'STT_GLOBAL_TARGET_LANGUAGES_UPDATED';
 // 7. WAITING ROOM
 const WAITING_ROOM_REQUEST = 'WAITING_ROOM_REQUEST';
 const WAITING_ROOM_RESPONSE = 'WAITING_ROOM_RESPONSE';
@@ -54,11 +58,16 @@ const EventNames = {
   NAME_ATTRIBUTE,
   VIDEO_MEETING_HOST,
   VIDEO_MEETING_ATTENDEE,
+  // STT
   STT_ACTIVE,
+  STT_GLOBAL_STATE,
+  STT_GLOBAL_SOURCE_LANGUAGE_UPDATED,
+  STT_GLOBAL_TARGET_LANGUAGES_UPDATED,
   STT_LANGUAGE,
   STT_TRANSLATE_LANGUAGE,
   STT_SPOKEN_LANGUAGE,
   USER_STOPPED_TRANSLATION,
+  // Waiting room
   WAITING_ROOM_REQUEST,
   WAITING_ROOM_RESPONSE,
   WAITING_ROOM_STATUS_UPDATE,

package/template/src/subComponents/caption/Caption.tsx

@@ -37,7 +37,6 @@ const Caption: React.FC<CaptionProps> = ({
   const {RtcEngineUnsafe} = useRtc();
   const {
     isLangChangeInProgress,
-    isTranslationChangeInProgress,
     captionObj, //state for current live caption for all users
     isSTTListenerAdded,
     setIsSTTListenerAdded,
@@ -45,7 +44,6 @@ const Caption: React.FC<CaptionProps> = ({
     prevSpeakerRef,
     getBotOwnerUid,
     isSTTActive,
-    translationConfig,
     remoteSpokenLanguages,
   } = useCaption();
   const currentUserUid = useLocalUid();
@@ -79,7 +77,7 @@ const Caption: React.FC<CaptionProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLangChangeInProgress || isTranslationChangeInProgress) {
+  if (isLangChangeInProgress) {
     return (
       <Loading
         text={stLabel}
@@ -90,9 +88,9 @@ const Caption: React.FC<CaptionProps> = ({
     );
   }
 
-  console.log('[STT_PER_USER_BOT]  speaker uid', activeSpeakerRef.current);
-  console.log('[STT_PER_USER_BOT] prev current uid ', prevSpeakerRef.current);
-  console.log('[STT_PER_USER_BOT] captionObj ', captionObj);
+  console.log('[STT_GLOBAL]  speaker uid', activeSpeakerRef.current);
+  console.log('[STT_GLOBAL] prev current uid ', prevSpeakerRef.current);
+  console.log('[STT_GLOBAL] captionObj ', captionObj);
 
   const speakerCount = prevSpeakerRef.current === '' ? 1 : 2;
 
@@ -135,13 +133,6 @@ const Caption: React.FC<CaptionProps> = ({
               captionTextStyle={captionTextStyle}
               speakerUid={getBotOwnerUid(prevSpeakerRef.current)}
               userLocalUid={currentUserUid}
-              spokenLanguageCode={
-                getBotOwnerUid(prevSpeakerRef.current) === currentUserUid
-                  ? translationConfig.source[0]
-                  : remoteSpokenLanguages[
-                      getBotOwnerUid(prevSpeakerRef.current)
-                    ]
-              }
             />
           ) : (
             <></>
@@ -165,13 +156,6 @@ const Caption: React.FC<CaptionProps> = ({
               captionTextStyle={captionTextStyle}
               speakerUid={getBotOwnerUid(activeSpeakerRef.current)}
               userLocalUid={currentUserUid}
-              spokenLanguageCode={
-                getBotOwnerUid(activeSpeakerRef.current) === currentUserUid
-                  ? translationConfig.source[0]
-                  : remoteSpokenLanguages[
-                      getBotOwnerUid(activeSpeakerRef.current)
-                    ]
-              }
             />
           ) : (
             <></>