agora-appbuilder-core 4.1.9 → 4.1.11-beta.2

package/template/src/components/Controls.tsx

@@ -58,13 +58,19 @@ import {
 import {useVideoCall} from './useVideoCall';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
-import {useCaption} from '../../src/subComponents/caption/useCaption';
+import {
+  LanguageTranslationConfig,
+  useCaption,
+} from '../../src/subComponents/caption/useCaption';
 import LanguageSelectorPopup from '../../src/subComponents/caption/LanguageSelectorPopup';
-import useSTTAPI from '../../src/subComponents/caption/useSTTAPI';
 import {EventNames} from '../rtm-events';
 import events, {PersistanceLevel} from '../rtm-events-api';
 import Toast from '../../react-native-toast-message';
-import {getLanguageLabel} from '../../src/subComponents/caption/utils';
+import {
+  getLanguageLabel,
+  LanguageType,
+  TranslateConfig,
+} from '../../src/subComponents/caption/utils';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem, {useToolbarProps} from '../atoms/ToolbarItem';
 import {
@@ -312,20 +318,21 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const {
     isCaptionON,
     setIsCaptionON,
-    language: prevLang,
+    // language: prevLang,
     isSTTActive,
-    setIsSTTActive,
+    // setIsSTTActive,
     isSTTError,
+    handleTranslateConfigChange,
   } = useCaption();
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
 
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
-  const isFirstTimePopupOpen = React.useRef(false);
+  // const isFirstTimePopupOpen = React.useRef(false);
   const STT_clicked = React.useRef(null);
 
-  const {start, restart} = useSTTAPI();
+  // const {start, restart} = useSTTAPI();
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -531,25 +538,17 @@ 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 &&
-        (isHost || (!isHost && isSTTActive))
-      ),
+      disabled: !($config.ENABLE_STT && $config.ENABLE_CAPTION),
       title: captionLabel(isCaptionON),
       onPress: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isCaptionON ? 'caption' : null;
-        if (isSTTError) {
-          setIsCaptionON(prev => !prev);
-          return;
-        }
-        if (isSTTActive) {
-          setIsCaptionON(prev => !prev);
-          // is lang popup has been shown once for any user in meeting
-        } else {
-          isFirstTimePopupOpen.current = true;
+        if (isSTTError || !isSTTActive) {
+          // Show popup when error or STT not active
           setLanguagePopup(true);
+        } else {
+          // STT is active and no error
+          setIsCaptionON(prev => !prev);
         }
       },
     });
@@ -564,26 +563,19 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         disabled: !(
           $config.ENABLE_STT &&
           $config.ENABLE_CAPTION &&
-          $config.ENABLE_MEETING_TRANSCRIPT &&
-          (isHost || (!isHost && isSTTActive))
+          $config.ENABLE_MEETING_TRANSCRIPT
         ),
         title: transcriptLabel(isTranscriptON),
         onPress: () => {
           setActionMenuVisible(false);
           STT_clicked.current = !isTranscriptON ? 'transcript' : null;
-          if (isSTTError) {
-            !isTranscriptON
-              ? setSidePanel(SidePanelType.Transcript)
-              : setSidePanel(SidePanelType.None);
-            return;
-          }
-          if (isSTTActive) {
+          if (isSTTError || !isSTTActive) {
+            setLanguagePopup(true);
+          } else {
             !isTranscriptON
               ? setSidePanel(SidePanelType.Transcript)
               : setSidePanel(SidePanelType.None);
-          } else {
-            isFirstTimePopupOpen.current = true;
-            setLanguagePopup(true);
+            // isFirstTimePopupOpen.current = true;
           }
         },
       });
@@ -845,39 +837,51 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     setActionMenuVisible(false);
   }, [currentLayout]);
 
-  const onConfirm = async (langChanged, language) => {
+  const onConfirm = async (inputTranslateConfig: LanguageTranslationConfig) => {
+    console.log(
+      '[STT_PER_USER_BOT] Controls onConfirm called',
+      inputTranslateConfig,
+    );
     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 (isTranscriptClicked) {
-      if (!isTranscriptON) {
-        setSidePanel(SidePanelType.Transcript);
-      } else {
-        setSidePanel(SidePanelType.None);
-      }
-    }
-    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
+    // isFirstTimePopupOpen.current = false;
+    // const method = isCaptionClicked
+    //   ? isCaptionON
+    //   : isTranscriptON
+    //   ? 'stop'
+    //   : 'start';
 
-    if (isCaptionClicked) {
-      setIsCaptionON(prev => !prev);
-    } else {
-    }
+    // 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);
-      if (res?.message.includes('STARTED')) {
-        // channel is already started now restart
-        await restart(language);
+      // 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);
+        } else {
+          setSidePanel(SidePanelType.None);
+        }
+      }
+      if (isCaptionClicked) {
+        setIsCaptionON(prev => !prev);
+      } else {
       }
+      await handleTranslateConfigChange(inputTranslateConfig);
     } catch (error) {
-      logger.error(LogSource.Internals, 'STT', 'error in starting stt', error);
+      setIsCaptionON(false);
+      setSidePanel(SidePanelType.None);
+      logger.error(
+        LogSource.Internals,
+        'STT',
+        'error in starting caption',
+        error,
+      );
     }
   };
 
@@ -952,12 +956,14 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
 
   return (
     <>
-      <LanguageSelectorPopup
-        modalVisible={isLanguagePopupOpen}
-        setModalVisible={setLanguagePopup}
-        onConfirm={onConfirm}
-        isFirstTimePopupOpen={isFirstTimePopupOpen.current}
-      />
+      {isLanguagePopupOpen && (
+        <LanguageSelectorPopup
+          modalVisible={isLanguagePopupOpen}
+          setModalVisible={setLanguagePopup}
+          onConfirm={onConfirm}
+          // isFirstTimePopupOpen={isFirstTimePopupOpen.current}
+        />
+      )}
       {$config.CLOUD_RECORDING && isHost && isWeb() && (
         <>
           <RecordingDeletePopup
@@ -1134,9 +1140,7 @@ export const MoreButtonToolbarItem = (props?: {
   }, [isHost]);
 
   return width < BREAKPOINTS.lg ||
-    ($config.ENABLE_STT &&
-      $config.ENABLE_CAPTION &&
-      (isHost || (!isHost && isSTTActive))) ||
+    ($config.ENABLE_STT && $config.ENABLE_CAPTION) ||
     $config.ENABLE_NOISE_CANCELLATION ||
     (isHost && $config.CLOUD_RECORDING && isWeb()) ||
     ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) ||
@@ -1179,7 +1183,7 @@ const Controls = (props: ControlsProps) => {
   const {items = {}, includeDefaultItems = true} = props;
   const {width, height} = useWindowDimensions();
   const {defaultContent} = useContent();
-  const {setLanguage, setMeetingTranscript, setIsSTTActive} = useCaption();
+  const {setMeetingTranscript} = useCaption();
   const defaultContentRef = React.useRef(defaultContent);
   const {setRoomInfo} = useSetRoomInfo();
   const heading = useString<'Set' | 'Changed'>(sttSpokenLanguageToastHeading);
@@ -1190,86 +1194,87 @@ const Controls = (props: ControlsProps) => {
     username: string;
   }>(sttSpokenLanguageToastSubHeading);
 
-  const {sttLanguage, isSTTActive} = useRoomInfo();
-  const {addStreamMessageListener} = useSpeechToText();
+  // const {sttLanguage} = useRoomInfo();
+  // const {addStreamMessageListener} = useSpeechToText();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
   }, [defaultContent]);
 
-  React.useEffect(() => {
-    // for mobile events are set in ActionSheetContent
-    if (!sttLanguage) return;
-    const {
-      username,
-      prevLang,
-      newLang,
-      uid,
-      langChanged,
-    }: RoomInfoContextInterface['sttLanguage'] = sttLanguage;
-    if (!langChanged) return;
-    const actionText =
-      prevLang.indexOf('') !== -1
-        ? `has set the spoken language to  "${getLanguageLabel(newLang)}" `
-        : `changed the spoken language from "${getLanguageLabel(
-            prevLang,
-          )}" to "${getLanguageLabel(newLang)}" `;
-    // const msg = `${
-    //   //@ts-ignore
-    //   defaultContentRef.current[uid]?.name || username
-    // } ${actionText} `;
-    let subheadingObj: any = {};
-    if (prevLang.indexOf('') !== -1) {
-      subheadingObj = {
-        username: defaultContentRef.current[uid]?.name || username,
-        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
-        newLanguage: getLanguageLabel(newLang),
-      };
-    } else {
-      subheadingObj = {
-        username: defaultContentRef.current[uid]?.name || username,
-        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
-        newLanguage: getLanguageLabel(newLang),
-        oldLanguage: getLanguageLabel(prevLang),
-      };
-    }
-
-    Toast.show({
-      leadingIconName: 'lang-select',
-      type: 'info',
-      text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
-      visibilityTime: 3000,
-      primaryBtn: null,
-      secondaryBtn: null,
-      text2: subheading(subheadingObj),
-    });
-    setRoomInfo(prev => {
-      return {
-        ...prev,
-        sttLanguage: {...sttLanguage, langChanged: false},
-      };
-    });
-    // syncing local set language
-    newLang && setLanguage(newLang);
-    // add spoken lang msg to transcript
-    setMeetingTranscript(prev => {
-      return [
-        ...prev,
-        {
-          name: 'langUpdate',
-          time: new Date().getTime(),
-          uid: `langUpdate-${uid}`,
-          text: actionText,
-        },
-      ];
-    });
-    // start listening to stream Message callback
-    addStreamMessageListener();
-  }, [sttLanguage]);
-
-  React.useEffect(() => {
-    setIsSTTActive(isSTTActive);
-  }, [isSTTActive]);
+  // React.useEffect(() => {
+  //   // for mobile events are set in ActionSheetContent
+  //   if (!sttLanguage) return;
+  //   const {
+  //     username,
+  //     prevLang,
+  //     newLang,
+  //     uid,
+  //     langChanged,
+  //   }: RoomInfoContextInterface['sttLanguage'] = sttLanguage;
+  //   if (!langChanged) return;
+  //   const actionText =
+  //     prevLang.indexOf('') !== -1
+  //       ? `has set the spoken language to  "${getLanguageLabel(newLang)}" `
+  //       : `changed the spoken language from "${getLanguageLabel(
+  //           prevLang,
+  //         )}" to "${getLanguageLabel(newLang)}" `;
+  //   // const msg = `${
+  //   //   //@ts-ignore
+  //   //   defaultContentRef.current[uid]?.name || username
+  //   // } ${actionText} `;
+  //   let subheadingObj: any = {};
+  //   if (prevLang.indexOf('') !== -1) {
+  //     subheadingObj = {
+  //       username: defaultContentRef.current[uid]?.name || username,
+  //       action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+  //       newLanguage: getLanguageLabel(newLang),
+  //     };
+  //   } else {
+  //     subheadingObj = {
+  //       username: defaultContentRef.current[uid]?.name || username,
+  //       action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+  //       newLanguage: getLanguageLabel(newLang),
+  //       oldLanguage: getLanguageLabel(prevLang),
+  //     };
+  //   }
+
+  //   // Toast.show({
+  //   //   leadingIconName: 'lang-select',
+  //   //   type: 'info',
+  //   //   text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
+  //   //   visibilityTime: 3000,
+  //   //   primaryBtn: null,
+  //   //   secondaryBtn: null,
+  //   //   text2: subheading(subheadingObj),
+  //   // });
+  //   setRoomInfo(prev => {
+  //     return {
+  //       ...prev,
+  //       sttLanguage: {...sttLanguage, langChanged: false},
+  //     };
+  //   });
+  //   // syncing local set language
+  //   // newLang && setLanguage(newLang);
+  //   // add spoken lang msg to transcript
+  //   setMeetingTranscript(prev => {
+  //     return [
+  //       ...prev,
+  //       {
+  //         name: 'langUpdate',
+  //         time: new Date().getTime(),
+  //         uid: `langUpdate-${uid}`,
+  //         text: actionText,
+  //       },
+  //     ];
+  //   });
+  //   // start listening to stream Message callback
+  //   addStreamMessageListener();
+  // }, [sttLanguage]);
+
+  // Ask bhupendra
+  // React.useEffect(() => {
+  //   setIsSTTActive(isSTTActive);
+  // }, [isSTTActive]);
 
   const isHidden = (hide: ToolbarItemHide = false) => {
     try {

package/template/src/components/EventsConfigure.tsx

@@ -268,65 +268,65 @@ const EventsConfigure: React.FC<Props> = ({
     permissionStatusRef.current = permissionStatus;
   }, [permissionStatus]);
 
-  const {hasUserJoinedRTM, isInitialQueueCompleted} = useContext(ChatContext);
-  const {startSpeechToText, addStreamMessageListener} = useSpeechToText();
-
-  //auto start stt
-  useEffect(() => {
-    if (
-      !isRecordingBot &&
-      $config.ENABLE_CAPTION &&
-      $config.STT_AUTO_START &&
-      callActive &&
-      hasUserJoinedRTM &&
-      isInitialQueueCompleted &&
-      !sttAutoStarted
-    ) {
-      //host will start the caption
-      if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
-        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered', {
-          uidWhoTriggered: localUid,
-        });
-
-        // add stream message callback listener
-        addStreamMessageListener();
-
-        //start with default language
-        startSpeechToText(['en-US'])
-          .then(() => {
-            logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START success');
-            setSttAutoStarted(true);
-          })
-          .catch(err => {
-            logger.log(
-              LogSource.Internals,
-              'STT',
-              'STT_AUTO_START failed',
-              err,
-            );
-            setSttAutoStarted(false);
-          });
-      }
-
-      if (isHost && roomId?.host && isSTTAlreadyActiveRef.current) {
-        logger.log(
-          LogSource.Internals,
-          'STT',
-          'STT_AUTO_START already triggered by some other host',
-        );
-        setSttAutoStarted(true);
-      }
-    }
-  }, [
-    isRecordingBot,
-    callActive,
-    isHost,
-    hasUserJoinedRTM,
-    roomId,
-    sttAutoStarted,
-    isInitialQueueCompleted,
-    isSTTAlreadyActiveRef.current,
-  ]);
+  // const {hasUserJoinedRTM, isInitialQueueCompleted} = useContext(ChatContext);
+  // const {startSpeechToText, addStreamMessageListener} = useSpeechToText();
+
+  // auto start stt
+  // useEffect(() => {
+  //   if (
+  //     !isRecordingBot &&
+  //     $config.ENABLE_CAPTION &&
+  //     $config.STT_AUTO_START &&
+  //     callActive &&
+  //     hasUserJoinedRTM &&
+  //     isInitialQueueCompleted &&
+  //     !sttAutoStarted
+  //   ) {
+  //     //host will start the caption
+  //     if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
+  //       logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered', {
+  //         uidWhoTriggered: localUid,
+  //       });
+
+  //       // add stream message callback listener
+  //       addStreamMessageListener();
+
+  //       //start with default language
+  //       startSpeechToText(['en-US'])
+  //         .then(() => {
+  //           logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START success');
+  //           setSttAutoStarted(true);
+  //         })
+  //         .catch(err => {
+  //           logger.log(
+  //             LogSource.Internals,
+  //             'STT',
+  //             'STT_AUTO_START failed',
+  //             err,
+  //           );
+  //           setSttAutoStarted(false);
+  //         });
+  //     }
+
+  //     if (isHost && roomId?.host && isSTTAlreadyActiveRef.current) {
+  //       logger.log(
+  //         LogSource.Internals,
+  //         'STT',
+  //         'STT_AUTO_START already triggered by some other host',
+  //       );
+  //       setSttAutoStarted(true);
+  //     }
+  //   }
+  // }, [
+  //   isRecordingBot,
+  //   callActive,
+  //   isHost,
+  //   hasUserJoinedRTM,
+  //   roomId,
+  //   sttAutoStarted,
+  //   isInitialQueueCompleted,
+  //   isSTTAlreadyActiveRef.current,
+  // ]);
 
   useEffect(() => {
     //user joined event listener
@@ -570,43 +570,97 @@ const EventsConfigure: React.FC<Props> = ({
       }
     });
 
-    events.on(EventNames.STT_ACTIVE, data => {
-      const payload = JSON.parse(data?.payload);
-      if (payload.active) {
-        isSTTAlreadyActiveRef.current = true;
-      } else {
-        isSTTAlreadyActiveRef.current = false;
-      }
-      setRoomInfo(prev => {
-        return {
-          ...prev,
-          isSTTActive: payload.active,
-        };
-      });
-    });
+    //  events.on(EventNames.STT_ACTIVE, data => {
+    //   const payload = JSON.parse(data?.payload);
+    //   if (payload.active) {
+    //     isSTTAlreadyActiveRef.current = true;
+    //   } else {
+    //     isSTTAlreadyActiveRef.current = false;
+    //   }
+    //   setRoomInfo(prev => {
+    //     return {
+    //       ...prev,
+    //       isSTTActive: payload.active,
+    //     };
+    //   });
+    // });
 
-    events.on(EventNames.STT_LANGUAGE, data => {
-      const {
-        username,
-        prevLang,
-        newLang,
-        uid,
-      }: RoomInfoContextInterface['sttLanguage'] = JSON.parse(data?.payload);
-      // set this on roominfo then use it in Controls
-      const sttLangObj = {
-        username,
-        prevLang,
-        newLang,
-        uid,
-        langChanged: true,
-      };
-      setRoomInfo(prev => {
-        return {
-          ...prev,
-          sttLanguage: sttLangObj,
-        };
-      });
-    });
+    // events.on(EventNames.STT_LANGUAGE, data => {
+    //   const {
+    //     username,
+    //     prevLang,
+    //     newLang,
+    //     uid,
+    //     remoteLang,
+    //   }: RoomInfoContextInterface['sttLanguage'] = JSON.parse(data?.payload);
+
+    //   setRoomInfo(prev => {
+    //     // Merge remoteLang with existing remoteLang to accumulate protected languages
+    //     const existingRemoteLang = prev.sttLanguage?.remoteLang || [];
+    //     const newRemoteLang = remoteLang || [];
+    //     const mergedRemoteLang = [...new Set([...existingRemoteLang, ...newRemoteLang])];
+
+    //     const sttLangObj = {
+    //       username,
+    //       prevLang,
+    //       newLang, // All languages in the channel
+    //       uid,
+    //       langChanged: true,
+    //       remoteLang: mergedRemoteLang, // Accumulated protected languages
+    //     };
+
+    //     return {
+    //       ...prev,
+    //       sttLanguage: sttLangObj,
+    //     };
+    //   });
+    // });
+
+    // events.on(EventNames.STT_TRANSLATE_LANGUAGE, data => {
+    //   const {
+    //     username,
+    //     uid,
+    //     translateConfig,
+    //   } = JSON.parse(data?.payload);
+
+    //   setRoomInfo(prev => {
+    //     // Merge translate configs with existing configuration
+    //     const existingTranslateConfig = prev.sttLanguage?.translateConfig || [];
+    //     const newTranslateConfig = translateConfig || [];
+
+    //     // Merge logic: for each new source language, merge with existing or add new
+    //     const mergedTranslateConfig = [...existingTranslateConfig];
+
+    //     newTranslateConfig.forEach(newConfig => {
+    //       const existingIndex = mergedTranslateConfig.findIndex(
+    //         existing => existing.source_lang === newConfig.source_lang
+    //       );
+
+    //       if (existingIndex !== -1) {
+    //         // Same source language - merge target languages
+    //         const existingTargets = mergedTranslateConfig[existingIndex].target_lang;
+    //         const mergedTargets = [...new Set([...existingTargets, ...newConfig.target_lang])];
+    //         mergedTranslateConfig[existingIndex] = {
+    //           ...mergedTranslateConfig[existingIndex],
+    //           target_lang: mergedTargets,
+    //         };
+    //       } else {
+    //         // Different source language - add new config
+    //         mergedTranslateConfig.push(newConfig);
+    //       }
+    //     });
+
+    //     const sttLangObj = {
+    //       ...prev.sttLanguage,
+    //       translateConfig: mergedTranslateConfig,
+    //     };
+
+    //     return {
+    //       ...prev,
+    //       sttLanguage: sttLangObj,
+    //     };
+    //   });
+    // });
 
     events.on(EventNames.WAITING_ROOM_STATUS_UPDATE, data => {
       if (!isHostRef.current) return;
@@ -871,8 +925,9 @@ const EventsConfigure: React.FC<Props> = ({
       events.off(EventNames.WHITEBOARD_ACTIVE);
       events.off(EventNames.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION);
       events.off(EventNames.BOARD_COLOR_CHANGED);
-      events.off(EventNames.STT_ACTIVE);
-      events.off(EventNames.STT_LANGUAGE);
+      // events.off(EventNames.STT_ACTIVE);
+      // events.off(EventNames.STT_LANGUAGE);
+      // events.off(EventNames.STT_TRANSLATE_LANGUAGE);
     };
   }, []);