agora-appbuilder-core 4.0.29-beta-21 → 4.0.29-beta-22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.29-beta-21",
+  "version": "4.0.29-beta-22",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/defaultConfig.js

@@ -79,6 +79,8 @@ const DefaultConfig = {
   CLI_VERSION: '3.0.28',
   CORE_VERSION: '4.0.28',
   DISABLE_LANDSCAPE_MODE: false,
+  STT_AUTO_START: false,
+  CLOUD_RECORDING_AUTO_START: false,
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -166,6 +166,8 @@ interface ConfigInterface {
   CLI_VERSION: string;
   CORE_VERSION: string;
   DISABLE_LANDSCAPE_MODE: boolean;
+  STT_AUTO_START: boolean;
+  CLOUD_RECORDING_AUTO_START: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/package.json

@@ -59,7 +59,7 @@
     "@react-native-community/clipboard": "1.5.1",
     "@supersami/rn-foreground-service": "^1.1.1",
     "add": "^2.0.6",
-    "agora-chat": "^1.2.1",
+    "agora-chat": "1.2.2-3",
     "agora-extension-ai-denoiser": "1.1.0",
     "agora-extension-beauty-effect": "^1.0.2-beta",
     "agora-extension-virtual-background": "^1.1.3",

package/template/src/components/EventsConfigure.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
 import {
   RtcContext,
@@ -19,10 +19,10 @@ import {
   PermissionState,
 } from '../../agora-rn-uikit';
 import events, {PersistanceLevel} from '../rtm-events-api';
-import {controlMessageEnum} from '../components/ChatContext';
+import ChatContext, {controlMessageEnum} from '../components/ChatContext';
 import Toast from '../../react-native-toast-message';
 import TertiaryButton from '../atoms/TertiaryButton';
-import {useContent, useLocalUserInfo} from 'customization-api';
+import {useContent, useLocalUserInfo, useSpeechToText} from 'customization-api';
 import {isAndroid, isIOS, isWebInternal} from '../utils/common';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import {
@@ -53,12 +53,14 @@ import {
 } from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
 import useEndCall from '../utils/useEndCall';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
 
 interface Props {
   children: React.ReactNode;
+  callActive: boolean;
 }
 
-const EventsConfigure: React.FC<Props> = props => {
+const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
   // mute user audio
   const hostMutedUserAudioToastHeadingTT = useString<I18nMuteType>(
     hostMutedUserToastHeading,
@@ -231,7 +233,7 @@ const EventsConfigure: React.FC<Props> = props => {
     defaultContentRef.current.defaultContent = defaultContent;
   }, [defaultContent]);
   const {
-    data: {isHost},
+    data: {isHost, roomId},
   } = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
   const isHostRef = React.useRef(isHost);
@@ -255,6 +257,41 @@ const EventsConfigure: React.FC<Props> = props => {
     permissionStatusRef.current = permissionStatus;
   }, [permissionStatus]);
 
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {startSpeechToText} = useSpeechToText();
+  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
+
+  //auto start stt
+  useEffect(() => {
+    if (
+      $config.ENABLE_CAPTION &&
+      $config.STT_AUTO_START &&
+      callActive &&
+      hasUserJoinedRTM &&
+      !autoStartCompleted
+    ) {
+      //host will start the caption
+      if (isHost && roomId?.host) {
+        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered');
+        //start with default language
+        startSpeechToText(['en-US'])
+          .then(() => {
+            logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START success');
+            setAutoStartCompleted(true);
+          })
+          .catch(err => {
+            logger.log(
+              LogSource.Internals,
+              'RECORDING',
+              'STT_AUTO_START failed',
+              err,
+            );
+            setAutoStartCompleted(false);
+          });
+      }
+    }
+  }, [callActive, isHost, hasUserJoinedRTM, roomId, autoStartCompleted]);
+
   useEffect(() => {
     //user joined event listener
     // events.on(controlMessageEnum.newUserJoined, ({payload}) => {
@@ -773,7 +810,7 @@ const EventsConfigure: React.FC<Props> = props => {
     };
   }, []);
 
-  return <>{props.children}</>;
+  return <>{children}</>;
 };
 
 export default EventsConfigure;

package/template/src/logger/AppBuilderLogger.tsx

@@ -147,6 +147,11 @@ export default class AppBuilderLogger implements Logger {
     const rtcPkg = isWeb()
       ? pkg.dependencies['agora-rtc-sdk-ng']
       : pkg.dependencies['react-native-agora'];
+
+    const agoraChatPkg = isWeb()
+      ? pkg.dependencies['agora-chat']
+      : pkg.dependencies['react-native-agora-chat'];
+
     let roomInfo = {
       meeting_title: '',
       channel_id: '',
@@ -189,6 +194,8 @@ export default class AppBuilderLogger implements Logger {
             cli: cli_version,
             core: core_version,
           },
+          agora_chat_version: agoraChatPkg,
+          agora_chat_url: $config.CHAT_URL,
           meeting_title: roomInfo?.meeting_title,
         };
 

package/template/src/pages/VideoCall.tsx

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

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

@@ -71,7 +71,15 @@ export const CaptionContext = React.createContext<{
   prevSpeakerRef: {current: ''},
 });
 
-const CaptionProvider = ({children}) => {
+interface CaptionProviderProps {
+  callActive: boolean;
+  children: React.ReactNode;
+}
+
+const CaptionProvider: React.FC<CaptionProviderProps> = ({
+  callActive,
+  children,
+}) => {
   const [isSTTError, setIsSTTError] = React.useState<boolean>(false);
   const [isCaptionON, setIsCaptionON] = React.useState<boolean>(false);
   const [isSTTActive, setIsSTTActive] = React.useState<boolean>(false);

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

@@ -125,9 +125,11 @@ const useSTTAPI = (): IuseSTTAPI => {
       const isSTTAlreadyActive =
         res?.error?.message
           ?.toLowerCase()
-          .indexOf('current status is started') !== -1 || false;
+          .indexOf('current status is STARTED') !== -1 ||
+        res?.error?.code === 610 ||
+        false;
 
-      if (res?.error?.message) {
+      if (res?.error?.message && res?.error?.code !== 610) {
         setIsSTTError(true);
         logger.error(
           LogSource.NetworkRest,

package/template/src/subComponents/recording/useRecording.tsx

@@ -142,6 +142,7 @@ const showErrorToast = (text1: string, text2?: string) => {
 
 const RecordingProvider = (props: RecordingProviderProps) => {
   const {setRecordingActive, isRecordingActive, callActive} = props?.value;
+  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
   const {
     data: {isHost, roomId},
   } = useRoomInfo();
@@ -825,6 +826,33 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     _stopRecording,
   ]);
 
+  // auto start recording
+  useEffect(() => {
+    if (
+      $config.CLOUD_RECORDING &&
+      $config.CLOUD_RECORDING_AUTO_START &&
+      callActive &&
+      !isRecordingActive &&
+      isHost &&
+      hasUserJoinedRTM &&
+      !autoStartCompleted
+    ) {
+      logger.log(
+        LogSource.Internals,
+        'RECORDING',
+        'CLOUD_RECORDING_AUTO_START triggered',
+      );
+      startRecording();
+      setAutoStartCompleted(true);
+    }
+  }, [
+    isRecordingActive,
+    isHost,
+    callActive,
+    hasUserJoinedRTM,
+    autoStartCompleted,
+  ]);
+
   // useEffect(() => { //
   //   if (hasUserJoinedRTM && isRecordingBot) {
   //     log('Recording-bot: sending event that recording has started');