agora-appbuilder-core 4.1.8-2 → 4.1.8-4

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.8-2',
-  CORE_VERSION: '4.1.8-2',
+  CLI_VERSION: '3.1.8-4',
+  CORE_VERSION: '4.1.8-4',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/atoms/Input.tsx

@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     // height: 60, //causes text cut off in android
     width: '100%',
     borderWidth: 1,
-    paddingVertical: 21,
+    paddingVertical: 12,
     paddingHorizontal: 16,
     borderColor: $config.INPUT_FIELD_BORDER_COLOR,
     color: $config.FONT_COLOR,
@@ -71,6 +71,7 @@ const styles = StyleSheet.create({
     ...Platform.select({
       web: {
         outlineStyle: 'none',
+        lineHeight: '26px',
       },
     }),
   },

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -33,7 +33,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
@@ -58,12 +58,17 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   }, [rtcProps?.role]);
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     setCallActive(true);
   };
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinCallBtn.tsx

@@ -42,7 +42,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched} = useRoomInfo();
@@ -59,6 +59,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     logger.log(
       LogSource.Internals,
       'PRECALL_SCREEN',
@@ -95,7 +100,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username?.trim() === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -58,7 +58,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
@@ -212,6 +212,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     // Enter waiting rooom;
     setRoomInfo(prev => {
@@ -232,8 +237,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom || username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -45,6 +45,8 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
+import SDKEvents from '../../utils/SdkEvents';
+import isSDK from '../../utils/isSDK';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -69,7 +71,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
@@ -150,6 +152,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       });
 
       if (approved) {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-granted
+          SDKEvents.emit('waiting-room-approval-granted');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -189,6 +195,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           };
         });
       } else {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-rejected
+          SDKEvents.emit('waiting-room-approval-rejected');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -236,6 +246,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     setUsername(username.trim());
     //setCallActive(true);
@@ -252,7 +267,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
     // join request API to server, server will send RTM message to all hosts regarding request from this user,
     requestServerToJoinRoom();
-
+    if (isSDK()) {
+      //emit SDKEvent waiting for approval
+      SDKEvents.emit('waiting-room-approval-requested');
+    }
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
@@ -281,8 +299,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom ||  username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/textInput.tsx

@@ -11,7 +11,7 @@
 */
 
 import React from 'react';
-import {TextStyle} from 'react-native';
+import {TextStyle, Text} from 'react-native';
 import TextInput from '../../atoms/TextInput';
 import {useString} from '../../utils/useString';
 import {useRoomInfo} from '../room-info/useRoomInfo';
@@ -25,6 +25,7 @@ import {
   precallNameInputPlaceholderText,
   precallYouAreJoiningAsHeading,
 } from '../../language/default-labels/precallScreenLabels';
+import {usePreCall} from './usePreCall';
 
 export interface PreCallTextInputProps {
   labelStyle?: TextStyle;
@@ -39,30 +40,52 @@ const PreCallTextInput = (props?: PreCallTextInputProps) => {
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {isNameIsEmpty, setIsNameIsEmpty} = usePreCall();
   const {isDesktop = false, isOnPrecall = false} = props;
 
   return (
-    <Input
-      maxLength={maxInputLimit}
-      label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
-      labelStyle={
-        props?.labelStyle
-          ? props.labelStyle
-          : {
-              fontFamily: ThemeConfig.FontFamily.sansPro,
-              fontWeight: '400',
-              fontSize: ThemeConfig.FontSize.small,
-              lineHeight: ThemeConfig.FontSize.small,
-              color: $config.FONT_COLOR,
-            }
-      }
-      value={username}
-      autoFocus
-      onChangeText={text => setUsername(text ? text : '')}
-      onSubmitEditing={() => {}}
-      placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
-      editable={!isInWaitingRoom && isJoinDataFetched}
-    />
+    <>
+      <Input
+        maxLength={maxInputLimit}
+        label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
+        labelStyle={
+          props?.labelStyle
+            ? props.labelStyle
+            : {
+                fontFamily: ThemeConfig.FontFamily.sansPro,
+                fontWeight: '400',
+                fontSize: ThemeConfig.FontSize.small,
+                lineHeight: ThemeConfig.FontSize.small,
+                color: $config.FONT_COLOR,
+              }
+        }
+        value={username}
+        autoFocus
+        onChangeText={text => {
+          setUsername(text ? text : '');
+          if (text && text.trim() === '') {
+            setIsNameIsEmpty(true);
+          } else {
+            setIsNameIsEmpty(false);
+          }
+        }}
+        onSubmitEditing={() => {}}
+        placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
+        editable={!isInWaitingRoom && isJoinDataFetched}
+        style={isNameIsEmpty ? {borderColor: $config.SEMANTIC_ERROR} : {}}
+      />
+      {isNameIsEmpty && (
+        <Text
+          style={{
+            color: $config.SEMANTIC_ERROR,
+            fontFamily: ThemeConfig.FontFamily.sansPro,
+            marginTop: 4,
+            marginLeft: 4,
+          }}>
+          {'Name is required'}
+        </Text>
+      )}
+    </>
   );
 };
 

package/template/src/components/precall/usePreCall.tsx

@@ -29,6 +29,8 @@ export interface PreCallContextInterface {
   setSpeakerAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isPermissionRequested: boolean;
   setIsPermissionRequested: React.Dispatch<React.SetStateAction<boolean>>;
+  isNameIsEmpty: boolean;
+  setIsNameIsEmpty: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const PreCallContext = createContext<PreCallContextInterface>({
@@ -42,6 +44,8 @@ const PreCallContext = createContext<PreCallContextInterface>({
   setSpeakerAvailable: () => {},
   isPermissionRequested: false,
   setIsPermissionRequested: () => {},
+  isNameIsEmpty: false,
+  setIsNameIsEmpty: () => {},
 });
 
 interface PreCallProviderProps {
@@ -54,6 +58,7 @@ const PreCallProvider = (props: PreCallProviderProps) => {
   const roomInfo = useRoomInfo();
   const {deviceList} = useContext(DeviceContext);
   const setUsername = useSetName();
+  const [isNameIsEmpty, setIsNameIsEmpty] = useState(false);
   const [isCameraAvailable, setCameraAvailable] = useState(false);
   const [isMicAvailable, setMicAvailable] = useState(false);
   const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
@@ -69,6 +74,8 @@ const PreCallProvider = (props: PreCallProviderProps) => {
     setSpeakerAvailable,
     isPermissionRequested,
     setIsPermissionRequested,
+    isNameIsEmpty,
+    setIsNameIsEmpty,
   };
 
   useEffect(() => {

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

@@ -121,7 +121,7 @@ const useSTTAPI = (): IuseSTTAPI => {
   const start = async (lang: LanguageType[]) => {
     try {
       setIsLangChangeInProgress(true);
-      const res = await apiCall('start', lang);
+      const res = await apiCall('startv7', lang);
       // null means stt startred successfully
       const isSTTAlreadyActive =
         res?.error?.message
@@ -209,7 +209,7 @@ const useSTTAPI = (): IuseSTTAPI => {
 
   const stop = async () => {
     try {
-      const res = await apiCall('stop');
+      const res = await apiCall('stopv7');
       // once STT is non-active in the channel , notify others so that they dont' trigger start again
       // events.send(
       //   EventNames.STT_ACTIVE,

package/template/src/subComponents/caption/utils.ts

@@ -12,20 +12,38 @@ export function formatTime(timestamp: number): string {
 }
 
 export type LanguageType =
-  | 'en-US'
-  | 'hi-IN'
+  | 'ar-EG'
+  | 'ar-JO'
+  | 'ar-SA'
+  | 'ar-AE'
+  | 'bn-IN'
   | 'zh-CN'
   | 'zh-HK'
+  | 'zh-TW'
+  | 'nl-NL'
+  | 'en-IN'
+  | 'en-US'
+  | 'fil-PH'
   | 'fr-FR'
   | 'de-DE'
-  | 'ko-KR'
-  | 'en-IN'
-  | 'ar'
+  | 'gu-IN'
+  | 'he-IL'
+  | 'hi-IN'
+  | 'id-ID'
+  | 'it-IT'
   | 'ja-JP'
+  | 'kn-IN'
+  | 'ko-KR'
+  | 'ms-MY'
+  | 'fa-IR'
   | 'pt-PT'
+  | 'ru-RU'
   | 'es-ES'
-  | 'it-IT'
-  | 'id-ID'
+  | 'ta-IN'
+  | 'te-IN'
+  | 'th-TH'
+  | 'tr-TR'
+  | 'vi-VN'
   | '';
 
 interface LanguageData {
@@ -34,20 +52,38 @@ interface LanguageData {
 }
 
 export const langData: LanguageData[] = [
+  {label: 'Arabic (EG)', value: 'ar-EG'},
+  {label: 'Arabic (JO)', value: 'ar-JO'},
+  {label: 'Arabic (SA)', value: 'ar-SA'},
+  {label: 'Arabic (UAE)', value: 'ar-AE'},
+  {label: 'Bengali (IN)', value: 'bn-IN'},
+  {label: 'Chinese', value: 'zh-CN'},
+  {label: 'Chinese (HK)', value: 'zh-HK'},
+  {label: 'Chinese (TW)', value: 'zh-TW'},
+  {label: 'Dutch', value: 'nl-NL'},
+  {label: 'English (IN)', value: 'en-IN'},
   {label: 'English (US)', value: 'en-US'},
-  {label: 'English (India)', value: 'en-IN'},
-  {label: 'Hindi', value: 'hi-IN'},
-  {label: 'Chinese (Simplified)', value: 'zh-CN'},
-  {label: 'Chinese (Traditional)', value: 'zh-HK'},
-  {label: 'Arabic', value: 'ar'},
+  {label: 'Filipino', value: 'fil-PH'},
   {label: 'French', value: 'fr-FR'},
   {label: 'German', value: 'de-DE'},
+  {label: 'Gujarati', value: 'gu-IN'},
+  {label: 'Hebrew', value: 'he-IL'},
+  {label: 'Hindi', value: 'hi-IN'},
+  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Italian', value: 'it-IT'},
   {label: 'Japanese', value: 'ja-JP'},
+  {label: 'Kannada', value: 'kn-IN'},
   {label: 'Korean', value: 'ko-KR'},
+  {label: 'Malay', value: 'ms-MY'},
+  {label: 'Persian', value: 'fa-IR'},
   {label: 'Portuguese', value: 'pt-PT'},
+  {label: 'Russian', value: 'ru-RU'},
   {label: 'Spanish', value: 'es-ES'},
-  {label: 'Italian', value: 'it-IT'},
-  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Tamil', value: 'ta-IN'},
+  {label: 'Telugu', value: 'te-IN'},
+  {label: 'Thai', value: 'th-TH'},
+  {label: 'Turkish', value: 'tr-TR'},
+  {label: 'Vietnamese', value: 'vi-VN'},
 ];
 
 export function getLanguageLabel(

package/template/src/utils/SdkEvents.ts

@@ -51,6 +51,9 @@ export interface userEventsMapInterface {
   'token-refreshed': () => void;
   'rtc-user-removed': (uid: UidType, channel: string) => void;
   unauthorized: (errorMessage) => void;
+  'waiting-room-approval-requested': () => void;
+  'waiting-room-approval-granted': () => void;
+  'waiting-room-approval-rejected': () => void;
 }
 
 const SDKEvents = createNanoEvents<userEventsMapInterface>();