agora-appbuilder-core 4.0.29-beta-24 → 4.0.29-beta-25

package/package.json

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

package/template/customization-api/sub-components.ts

@@ -85,3 +85,4 @@ export {default as TranscriptPanel} from '../src/subComponents/caption/Transcrip
 export type {TranscriptProps} from '../src/subComponents/caption/Transcript';
 export {default as CaptionPanel} from '../src/subComponents/caption/CaptionContainer';
 export {default as VBPreview} from '../src/components/virtual-background/VideoPreview';
+export {default as Toast} from '../react-native-toast-message';

package/template/src/atoms/ActionMenu.tsx

@@ -9,6 +9,8 @@ import {
   TouchableOpacity,
   ViewStyle,
   useWindowDimensions,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import React, {SetStateAction, useState} from 'react';
 
@@ -32,6 +34,7 @@ export interface ActionMenuItem {
   iconColor: string;
   textColor: string;
   title: string;
+  titleStyle?: StyleProp<TextStyle>;
   label?: string;
   toggleStatus?: boolean;
   onPress: () => void;
@@ -97,6 +100,7 @@ const ActionMenu = (props: ActionMenuProps) => {
         onHoverCallback = undefined,
         onHoverContent = undefined,
         iconSize = 20,
+        titleStyle = {},
       } = item;
       return (
         <PlatformWrapper key={props.from + '_' + title + index}>
@@ -175,7 +179,11 @@ const ActionMenu = (props: ActionMenuProps) => {
                     )}
                   </View>
                   <Text
-                    style={[styles.text, textColor ? {color: textColor} : {}]}>
+                    style={[
+                      styles.text,
+                      titleStyle,
+                      textColor ? {color: textColor} : {},
+                    ]}>
                     {label || title}
                   </Text>
                   {toggleStatus !== undefined && toggleStatus !== null ? (

package/template/src/atoms/Checkbox.tsx

@@ -6,6 +6,7 @@ import {
   Platform,
   StyleSheet,
   TextStyle,
+  ViewStyle,
 } from 'react-native';
 
 import ThemeConfig from '../theme';
@@ -17,6 +18,9 @@ interface CheckboxProps {
   onChange: (checked: boolean) => void;
   labelStye?: TextStyle;
   disabled?: boolean;
+  containerStyle?: ViewStyle;
+  checkBoxStyle?: ViewStyle;
+  tickColor?: string;
 }
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -25,6 +29,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   disabled = false,
   labelStye = {},
+  containerStyle = {},
+  checkBoxStyle = {},
+  tickColor = $config.FONT_COLOR,
 }) => {
   const [isChecked, setIsChecked] = useState(checked);
 
@@ -40,15 +47,21 @@ const Checkbox: React.FC<CheckboxProps> = ({
   };
 
   return (
-    <TouchableOpacity onPress={handleCheckboxToggle} style={styles.container}>
+    <TouchableOpacity
+      onPress={handleCheckboxToggle}
+      style={(styles.container, containerStyle)}>
       <View
-        style={[styles.checkboxContainer, isChecked && styles.fillSelected]}>
+        style={[
+          styles.checkboxContainer,
+          checkBoxStyle,
+          isChecked && styles.fillSelected,
+        ]}>
         {isChecked && (
           <ImageIcon
             iconType="plain"
             name={'tick'}
             iconSize={8}
-            tintColor={$config.FONT_COLOR}
+            tintColor={tickColor}
           />
         )}
       </View>
@@ -76,6 +89,7 @@ const styles = StyleSheet.create({
     borderColor: $config.SEMANTIC_NEUTRAL,
     justifyContent: 'center',
     alignItems: 'center',
+    borderRadius: 1,
   },
   checkIcon: {
     position: 'absolute',

package/template/src/atoms/TertiaryButton.tsx

@@ -31,6 +31,7 @@ const TertiaryButton = (props: ButtonProps) => {
     iconName,
     iconSize = 26,
     iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    disabled = false,
     ...rest
   } = props;
   const [isHovered, setIsHovered] = useState(false);
@@ -38,16 +39,17 @@ const TertiaryButton = (props: ButtonProps) => {
   return (
     <PlatformWrapper setIsHovered={setIsHovered}>
       <TouchableOpacity
-        ref={(ref) => props?.setRef && props.setRef(ref)}
+        ref={ref => props?.setRef && props.setRef(ref)}
         style={[
           styles.container,
-          isHovered
+          isHovered && !disabled
             ? {
                 backgroundColor:
                   $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
               }
             : {},
           props?.containerStyle,
+          disabled ? styles.disabledContainer : {},
         ]}
         {...rest}>
         <View style={styles.flexRow}>
@@ -57,11 +59,18 @@ const TertiaryButton = (props: ButtonProps) => {
                 iconSize={iconSize}
                 iconType="plain"
                 name={iconName}
-                tintColor={iconColor}
+                tintColor={disabled ? $config.SEMANTIC_NEUTRAL : iconColor}
               />
             </View>
           )}
-          <Text style={[styles.text, props?.textStyle]}>{text}</Text>
+          <Text
+            style={[
+              styles.text,
+              props?.textStyle,
+              disabled ? styles.disabledText : {},
+            ]}>
+            {text}
+          </Text>
         </View>
       </TouchableOpacity>
     </PlatformWrapper>
@@ -105,4 +114,11 @@ const styles = StyleSheet.create({
     fontSize: ThemeConfig.FontSize.small,
     fontWeight: '600',
   },
+  disabledContainer: {
+    borderColor: $config.SEMANTIC_NEUTRAL,
+    cursor: 'default',
+  },
+  disabledText: {
+    color: $config.SEMANTIC_NEUTRAL,
+  },
 });

package/template/src/atoms/Toggle.tsx

@@ -6,10 +6,16 @@ interface SwitchProps {
   isEnabled: boolean;
   disabled?: boolean;
   toggleSwitch: (isEnabled: boolean) => void;
+  circleColor?: string;
 }
 
 const Toggle = (props: SwitchProps) => {
-  const {isEnabled, toggleSwitch, disabled = false} = props;
+  const {
+    isEnabled,
+    toggleSwitch,
+    disabled = false,
+    circleColor = $config.CARD_LAYER_1_COLOR,
+  } = props;
   return (
     <View>
       <CustomSwitch
@@ -21,8 +27,8 @@ const Toggle = (props: SwitchProps) => {
         disabled={false}
         backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
         backgroundInactive={$config.SEMANTIC_NEUTRAL}
-        circleActiveColor={$config.CARD_LAYER_1_COLOR}
-        circleInActiveColor={$config.CARD_LAYER_1_COLOR}
+        circleActiveColor={circleColor}
+        circleInActiveColor={circleColor}
         // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
         changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
         innerCircleStyle={{

package/template/src/components/CustomSidePanel.tsx

@@ -65,7 +65,7 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
       {showHeader && (
         <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
       )}
-      <ScrollView style={[style.bodyContainer]}>
+      <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}
       </ScrollView>
     </View>
@@ -75,7 +75,6 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
 const style = StyleSheet.create({
   bodyContainer: {
     flex: 1,
-    padding: 20,
   },
 });
 

package/template/src/components/EventsConfigure.tsx

@@ -54,6 +54,7 @@ import {
 import {useString} from '../utils/useString';
 import useEndCall from '../utils/useEndCall';
 import {logger, LogSource} from '../logger/AppBuilderLogger';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 interface Props {
   children: React.ReactNode;
@@ -68,6 +69,7 @@ const EventsConfigure: React.FC<Props> = ({
   setSttAutoStarted,
   sttAutoStarted,
 }) => {
+  const {isRecordingBot} = useIsRecordingBot();
   const isSTTAlreadyActiveRef = useRef(undefined);
   // mute user audio
   const hostMutedUserAudioToastHeadingTT = useString<I18nMuteType>(
@@ -270,6 +272,7 @@ const EventsConfigure: React.FC<Props> = ({
   //auto start stt
   useEffect(() => {
     if (
+      !isRecordingBot &&
       $config.ENABLE_CAPTION &&
       $config.STT_AUTO_START &&
       callActive &&
@@ -279,7 +282,9 @@ const EventsConfigure: React.FC<Props> = ({
     ) {
       //host will start the caption
       if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
-        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered');
+        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered', {
+          uidWhoTriggered: localUid,
+        });
         //start with default language
         startSpeechToText(['en-US'])
           .then(() => {
@@ -289,7 +294,7 @@ const EventsConfigure: React.FC<Props> = ({
           .catch(err => {
             logger.log(
               LogSource.Internals,
-              'RECORDING',
+              'STT',
               'STT_AUTO_START failed',
               err,
             );
@@ -301,12 +306,13 @@ const EventsConfigure: React.FC<Props> = ({
         logger.log(
           LogSource.Internals,
           'STT',
-          'STT_AUTO_START triggered already by some other host success',
+          'STT_AUTO_START already triggered by some other host',
         );
         setSttAutoStarted(true);
       }
     }
   }, [
+    isRecordingBot,
     callActive,
     isHost,
     hasUserJoinedRTM,

package/template/src/pages/VideoCall.tsx

@@ -151,6 +151,7 @@ const VideoCall: React.FC = () => {
   const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
     useState(false);
   const [sttAutoStarted, setSttAutoStarted] = useState(false);
+  const [recordingAutoStarted, setRecordingAutoStarted] = useState(false);
 
   const {phrase} = useParams<{phrase: string}>();
 
@@ -489,6 +490,8 @@ const VideoCall: React.FC = () => {
                                                           setRecordingActive,
                                                           isRecordingActive,
                                                           callActive,
+                                                          recordingAutoStarted,
+                                                          setRecordingAutoStarted,
                                                         }}>
                                                         <NetworkQualityProvider>
                                                           {!isMobileUA() && (

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

@@ -104,6 +104,8 @@ interface RecordingProviderProps {
     setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
     isRecordingActive: boolean;
     callActive: boolean;
+    recordingAutoStarted: boolean;
+    setRecordingAutoStarted: React.Dispatch<React.SetStateAction<boolean>>;
   };
 }
 
@@ -141,8 +143,13 @@ const showErrorToast = (text1: string, text2?: string) => {
 };
 
 const RecordingProvider = (props: RecordingProviderProps) => {
-  const {setRecordingActive, isRecordingActive, callActive} = props?.value;
-  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
+  const {
+    setRecordingActive,
+    isRecordingActive,
+    callActive,
+    recordingAutoStarted,
+    setRecordingAutoStarted,
+  } = props?.value;
   const {
     data: {isHost, roomId},
   } = useRoomInfo();
@@ -167,7 +174,8 @@ const RecordingProvider = (props: RecordingProviderProps) => {
 
   const userlabel = useString(videoRoomUserFallbackText)();
 
-  const {localUid, hasUserJoinedRTM} = useContext(ChatContext);
+  const {localUid, hasUserJoinedRTM, isInitialQueueCompleted} =
+    useContext(ChatContext);
   const {store} = React.useContext(StorageContext);
 
   const {setChatType} = useChatUIControls();
@@ -841,33 +849,50 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     _stopRecording,
   ]);
 
-  //commented auto start for cloud recording
   // 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 (
+      $config.CLOUD_RECORDING &&
+      $config.CLOUD_RECORDING_AUTO_START &&
+      callActive &&
+      hasUserJoinedRTM &&
+      isInitialQueueCompleted &&
+      isHost &&
+      roomId?.host &&
+      !isRecordingBot &&
+      !recordingAutoStarted
+    ) {
+      if (!isRecordingActive) {
+        logger.log(
+          LogSource.Internals,
+          'RECORDING',
+          'CLOUD_RECORDING_AUTO_START triggered',
+          {
+            uidWhoTriggered: localUid,
+          },
+        );
+        startRecording();
+        setRecordingAutoStarted(true);
+      } else {
+        logger.log(
+          LogSource.Internals,
+          'RECORDING',
+          'CLOUD_RECORDING_AUTO_START already triggered by some other host',
+        );
+        setRecordingAutoStarted(true);
+      }
+    }
+  }, [
+    callActive,
+    hasUserJoinedRTM,
+    isInitialQueueCompleted,
+    isHost,
+    isRecordingBot,
+    isRecordingActive,
+    recordingAutoStarted,
+    localUid,
+    roomId,
+  ]);
 
   // useEffect(() => { //
   //   if (hasUserJoinedRTM && isRecordingBot) {