agora-appbuilder-core 4.0.32-1 → 4.0.32-3

package/package.json

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

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.32-1',
-  CORE_VERSION: '4.0.32-1',
+  CLI_VERSION: '3.0.32-3',
+  CORE_VERSION: '4.0.32-3',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/auth/openIDPURL.tsx

@@ -14,7 +14,8 @@ export const getIDPAuthLoginURL = (returnTo?: any) => {
 };
 
 export const enableIDPAuth = async (returnTo?: any, heading?: string) => {
-  Linking.openURL(getIDPAuthLoginURL(returnTo));
+  //react-native-web support 2nd argument
+  Linking.openURL(getIDPAuthLoginURL(returnTo), '_self');
 };
 
 export const exitApp = () => {};

package/template/src/auth/useIDPAuth.tsx

@@ -66,7 +66,8 @@ export const useIDPAuth = () => {
               tokenLogout(false)
                 .then(() => {
                   //open idp logout url
-                  Linking.openURL(IDPAuthLogoutURL);
+                  //react-native-web support 2nd argument
+                  Linking.openURL(IDPAuthLogoutURL, '_self');
                   resolve(true);
                 })
                 .catch(() => {

package/template/src/components/chat/chatConfigure.native.tsx

@@ -89,7 +89,8 @@ const ChatConfigure = ({children}) => {
     addReactionToPrivateStore,
     addReactionToStore,
   } = useChatMessages();
-  const {setPinMsgId, setPinnedByUser, privateChatUser} = useChatUIControls();
+  const {setPinMsgId, setPinnedByUser, privateChatUser, setIsChatInitialized} =
+    useChatUIControls();
   const privateChatUserRef = React.useRef(privateChatUser);
 
   React.useEffect(() => {
@@ -333,6 +334,30 @@ const ChatConfigure = ({children}) => {
         // initialize native client
         await chatClient.init(chatOptions);
         console.warn('chat sdk: init success');
+        // adding chat connection event listeners
+        let listener: ChatConnectEventListener = {
+          onTokenWillExpire() {
+            console.warn('token expire.');
+          },
+          onTokenDidExpire() {
+            console.warn('token did expire');
+          },
+          onConnected() {
+            // once sdk connects to chat server successfully , need to add message listeners
+            console.warn('chat onConnected');
+            setIsChatInitialized(true);
+            setupMessageListener();
+            logger.log(
+              LogSource.Internals,
+              'CHAT',
+              `Native User ${localUid} to connected to Agora Chat Server`,
+            );
+          },
+          onDisconnected() {
+            console.warn('onDisconnected:');
+          },
+        };
+        chatClient.addConnectionListener(listener);
 
         // log in user to agoar chat
         try {
@@ -343,29 +368,6 @@ const ChatConfigure = ({children}) => {
             'CHAT',
             `Logged in Native User ${localUid} to Agora Chat Server`,
           );
-          setupMessageListener();
-          // adding chat connection event listeners
-          let listener: ChatConnectEventListener = {
-            onTokenWillExpire() {
-              console.warn('token expire.');
-            },
-            onTokenDidExpire() {
-              console.warn('token did expire');
-            },
-            onConnected() {
-              console.warn('onConnected');
-              // once sdk connects to chat server successfully , need to add message listeners
-              logger.log(
-                LogSource.Internals,
-                'CHAT',
-                `Native User ${localUid} to connected to Agora Chat Server`,
-              );
-            },
-            onDisconnected() {
-              console.warn('onDisconnected:');
-            },
-          };
-          chatClient.addConnectionListener(listener);
         } catch (error) {
           console.warn(
             'chat sdk: login failed ',

package/template/src/components/chat/chatConfigure.tsx

@@ -72,6 +72,7 @@ const ChatConfigure = ({children}) => {
     uploadedFiles,
     setPinMsgId,
     setPinnedByUser,
+    setIsChatInitialized,
   } = useChatUIControls();
   const localUid = useLocalUid();
   const defaultContentRef = React.useRef(defaultContent);
@@ -118,6 +119,7 @@ const ChatConfigure = ({children}) => {
         newConn.addEventHandler('connection&message', {
           // app is connected to chat server
           onConnected: () => {
+            setIsChatInitialized(true);
             logger.log(
               LogSource.Internals,
               'CHAT',

package/template/src/components/chat-ui/useChatUIControls.tsx

@@ -64,6 +64,8 @@ export interface ChatUIControlsInterface {
   setPinMsgId: React.Dispatch<SetStateAction<string>>;
   pinnedByUser: UidType;
   setPinnedByUser: React.Dispatch<SetStateAction<UidType>>;
+  isChatInitialized: boolean;
+  setIsChatInitialized: React.Dispatch<SetStateAction<boolean>>;
 }
 
 const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
@@ -92,6 +94,8 @@ const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
   setPinMsgId: () => {},
   pinnedByUser: 0,
   setPinnedByUser: () => {},
+  isChatInitialized: false,
+  setIsChatInitialized: () => {},
 });
 
 interface ChatUIControlsProviderProps {
@@ -125,6 +129,7 @@ const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
   const [replyToMsgId, setReplyToMsgId] = useState('');
   const [pinMsgId, setPinMsgId] = useState('');
   const [pinnedByUser, setPinnedByUser] = useState<UidType>(0);
+  const [isChatInitialized, setIsChatInitialized] = useState(false);
 
   const _resetTextareaHeight = () => {
     if (chatInputRef?.current) {
@@ -183,6 +188,8 @@ const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
         setPinMsgId,
         pinnedByUser,
         setPinnedByUser,
+        isChatInitialized,
+        setIsChatInitialized,
       }}>
       {props.children}
     </ChatUIControlsContext.Provider>

package/template/src/components/meeting-info-invite/MeetingInfo.tsx

@@ -49,11 +49,6 @@ const MeetingInfo = (props: MeetingInfoProps) => {
     <FpeShareComponent />
   ) : (
     <View style={style.root}>
-      {!isMobileUA() ? (
-        <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
-      ) : (
-        <></>
-      )}
       <ScrollView contentContainerStyle={style.scrollMain}>
         <Card
           margin={margin}

package/template/src/components/meeting-info-invite/MeetingInfoCardHeader.tsx

@@ -25,22 +25,6 @@ export const MeetingInfoCardHeader = (props: MeetingInfoCardHeaderProps) => {
   const {avatar, children} = props;
   return (
     <View>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}>
-        {isMobileUA() ? (
-          <>
-            <IDPLogoutComponent
-              containerStyle={{marginTop: 0, marginRight: 0}}
-            />
-          </>
-        ) : (
-          <></>
-        )}
-      </View>
       <View style={style.flexRow}>
         {React.isValidElement(avatar) && (
           <View style={style.avatar}>{avatar}</View>

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

@@ -2,6 +2,7 @@ import {I18nBaseType} from '../i18nTypes';
 
 export const cancelText = 'cancelText';
 export const loadingText = 'loadingText';
+export const initializingChatText = 'initializingChatText';
 export const logoutText = 'logoutText';
 export const authLogoutPopupHeading = 'authLogoutPopupHeading';
 export const authLogoutPopupSubHeading = 'authLogoutPopupSubHeading';
@@ -23,6 +24,7 @@ export const copiedToClipboardText = 'copiedToClipboardText';
 export interface I18nCommonLabelsInterface {
   [cancelText]?: I18nBaseType;
   [loadingText]?: I18nBaseType;
+  [initializingChatText]?: I18nBaseType;
   [logoutText]?: I18nBaseType;
   [authLogoutPopupHeading]?: I18nBaseType;
   [authLogoutPopupSubHeading]?: I18nBaseType;
@@ -44,6 +46,7 @@ export interface I18nCommonLabelsInterface {
 export const CommonLabels: I18nCommonLabelsInterface = {
   [cancelText]: 'CANCEL',
   [loadingText]: 'Loading...',
+  [initializingChatText]: 'Initializing Chat ...',
   [logoutText]: 'Logout',
   [authLogoutPopupHeading]: 'Logout?',
   [authLogoutPopupSubHeading]: 'Are you sure you wanna log out?',

package/template/src/subComponents/ChatContainer.tsx

@@ -59,6 +59,8 @@ import {
 } from '../language/default-labels/videoCallScreenLabels';
 import CommonStyles from '../components/CommonStyles';
 import PinnedMessage from './chat/PinnedMessage';
+import {initializingChatText} from '../language/default-labels/commonLabels';
+import Loading from './Loading';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -85,6 +87,7 @@ const ChatContainer = (props?: {
     showEmojiPicker,
     pinMsgId,
     pinnedByUser,
+    isChatInitialized,
   } = useChatUIControls();
   const privateMessageStoreRef = useRef(
     privateMessageStore[privateChatUser]?.length,
@@ -99,6 +102,7 @@ const ChatContainer = (props?: {
   } = useChatNotification();
   const localUid = useLocalUid();
   const scrollViewRef = useRef<ScrollView>(null);
+  const loadingLabel = useString(initializingChatText)();
 
   useEffect(() => {
     if (chatType === ChatType.Group) {
@@ -196,9 +200,11 @@ const ChatContainer = (props?: {
     }
   };
 
-  return (
+  return isChatInitialized === false ? (
+    <Loading text={loadingLabel} />
+  ) : (
     <View style={style.containerView}>
-      {showEmojiPicker && <View style={CommonStyles.tintedOverlay} />}
+      {showEmojiPicker ? <View style={CommonStyles.tintedOverlay} /> : null}
       {chatType === ChatType.Private && privateChatUser ? (
         <>
           <View style={style.participantContainer}>
@@ -217,12 +223,10 @@ const ChatContainer = (props?: {
           </View>
           <Spacer size={10} />
         </>
-      ) : (
-        <></>
-      )}
-      {pinMsgId && chatType === ChatType.Group && (
+      ) : null}
+      {pinMsgId && chatType === ChatType.Group ? (
         <PinnedMessage pinMsgId={pinMsgId} pinnedByUser={pinnedByUser} />
-      )}
+      ) : null}
       <ScrollView
         ref={scrollViewRef}
         onContentSizeChange={onContentSizeChange}
@@ -236,7 +240,7 @@ const ChatContainer = (props?: {
             </View>
 
             {messageStore.map((message: messageStoreInterface, index) => (
-              <>
+              <React.Fragment key={`message-group-${message.msgId}`}>
                 {messageStoreLengthRef.current === messageStore.length &&
                 grpUnreadCount &&
                 messageStore.length - grpUnreadCount === index ? (
@@ -250,9 +254,7 @@ const ChatContainer = (props?: {
                       {grpUnreadCount} {unreadMessageLabel}
                     </Text>
                   </View>
-                ) : (
-                  <></>
-                )}
+                ) : null}
                 {!message?.hide ? (
                   <ChatBubbleComponent
                     isLocal={localUid === message.uid}
@@ -287,15 +289,11 @@ const ChatContainer = (props?: {
                 ) : null}
                 {messageStore?.length - 1 === index ? (
                   <Spacer size={10} />
-                ) : (
-                  <></>
-                )}
-              </>
+                ) : null}
+              </React.Fragment>
             ))}
           </>
-        ) : (
-          <></>
-        )}
+        ) : null}
         {chatType === ChatType.Private &&
         privateChatUser &&
         privateMessageStore[privateChatUser] ? (
@@ -319,9 +317,7 @@ const ChatContainer = (props?: {
                         {privateUnreadCount} {unreadMessageLabel}
                       </Text>
                     </View>
-                  ) : (
-                    <></>
-                  )}
+                  ) : null}
                   {!message?.hide ? (
                     <ChatBubbleComponent
                       isLocal={localUid === message.uid}
@@ -356,16 +352,12 @@ const ChatContainer = (props?: {
                   {privateMessageStore[privateChatUser]?.length - 1 ===
                   index ? (
                     <Spacer size={10} />
-                  ) : (
-                    <></>
-                  )}
+                  ) : null}
                 </>
               ),
             )}
           </>
-        ) : (
-          <></>
-        )}
+        ) : null}
         {defaultContent[privateChatUser]?.offline && (
           <View style={style.infoTextView}>
             <Text style={style.infoText}>{userOfflineLabel}</Text>

package/template/src/subComponents/ChatInput.tsx

@@ -314,10 +314,11 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
             {!replyToMsgId && uploadedFiles.map(renderAttachmentBubble)}
             {/* {replyToMsgId && renderTextInput({borderWidth: 0, padddingLeft: 0})} */}
             <View>
-              {replyToMsgId && <View>{renderReplyMsg()}</View>}
-              {replyToMsgId && uploadedFiles.map(renderAttachmentBubble)}
-              {!replyToMsgId &&
-                renderTextInput({borderWidth: 0, padddingLeft: 0})}
+              {replyToMsgId ? <View>{renderReplyMsg()}</View> : null}
+              {replyToMsgId ? uploadedFiles.map(renderAttachmentBubble) : null}
+              {!replyToMsgId
+                ? renderTextInput({borderWidth: 0, padddingLeft: 0})
+                : null}
             </View>
           </ScrollView>
         </View>
@@ -328,7 +329,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
               ? [style.inputWrapper, {borderRadius: 8, borderTopWidth: 1}]
               : {}
           }>
-          {replyToMsgId && <View>{renderReplyMsg()}</View>}
+          {replyToMsgId ? <View>{renderReplyMsg()}</View> : null}
           {renderTextInput({borderWidth: 0, padddingLeft: 0})}
         </View>
       )}

package/template/src/subComponents/chat/ChatSendButton.tsx

@@ -186,6 +186,7 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
   const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
   const errorSubHeadingSize = useString(chatSendErrorTextSizeToastSubHeading);
   const groupID = data.chat.group_id;
+  const sendMessageBtnText = useString(chatSendMessageBtnText)();
 
   const onPress = () =>
     handleChatSend({
@@ -224,11 +225,7 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
             : {}
         }
         disabled={!isValidMsg}
-        toolTipMessage={
-          isMobileUA() || !isValidMsg
-            ? null
-            : useString(chatSendMessageBtnText)()
-        }
+        toolTipMessage={isMobileUA() || !isValidMsg ? null : sendMessageBtnText}
         iconProps={{
           iconType: 'plain',
           iconContainerStyle: {