agora-appbuilder-core 4.0.27 → 4.0.28-beta-2

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

@@ -112,89 +112,73 @@ const ChatConfigure = ({children}) => {
           }
         },
         onMessagesReceived: (messages: ChatMessage[]) => {
-          // all types of msg recivied : text, image, video etc..
-          console.warn('on msg rcvd : Native101', messages);
-          const isGroupChat =
-            messages[0].chatType === ChatMessageChatType.GroupChat;
-          const isPeerChat =
-            messages[0].chatType === ChatMessageChatType.PeerChat;
-          const {msgId, from, body, localTime} = messages[0];
-          const chatType = body.type;
-          const fromUser = from;
-          const {file_ext, file_name, file_url, from_platform, channel} =
-            messages[0].attributes as ChatMessageAttributes;
+          // all types of msg received: text, image, video, etc.
+          console.warn('on msg rcvd: Native', messages);
 
-          // prevent cross channel msgs
-          if (channel !== data.channel) {
-            return;
-          }
+          messages.forEach(message => {
+            const isGroupChat =
+              message.chatType === ChatMessageChatType.GroupChat;
+            const isPeerChat =
+              message.chatType === ChatMessageChatType.PeerChat;
+            const {msgId, from, body, localTime} = message;
+            const chatType = body.type;
+            const fromUser = from;
+            const {file_ext, file_name, file_url, from_platform, channel} =
+              message.attributes as ChatMessageAttributes;
+
+            // prevent cross-channel messages
+            if (channel !== data.channel) {
+              return;
+            }
 
-          switch (chatType) {
-            case ChatMessageType.TXT:
-              //@ts-ignore
-              const chatContent = body.content;
-              if (isGroupChat) {
-                showMessageNotification(chatContent, fromUser, false);
-                addMessageToStore(Number(fromUser), {
-                  msg: chatContent.replace(/^(\n)+|(\n)+$/g, ''),
-                  createdTimestamp: localTime,
-                  msgId: msgId,
-                  isDeleted: false,
-                  type: ChatMessageType.TXT,
-                });
-              }
-              if (isPeerChat) {
-                showMessageNotification(chatContent, fromUser, true);
-                addMessageToPrivateStore(
-                  Number(fromUser),
-                  {
+            switch (chatType) {
+              case ChatMessageType.TXT:
+                //@ts-ignore
+                const chatContent = body.content;
+                if (isGroupChat) {
+                  showMessageNotification(chatContent, fromUser, false);
+                  addMessageToStore(Number(fromUser), {
                     msg: chatContent.replace(/^(\n)+|(\n)+$/g, ''),
                     createdTimestamp: localTime,
                     msgId: msgId,
                     isDeleted: false,
                     type: ChatMessageType.TXT,
-                  },
-                  false,
-                );
-              }
-              break;
-            case ChatMessageType.IMAGE:
-              const thumb =
-                from_platform === 'web'
-                  ? file_url + '&thumbnail=true'
-                  : (body as {thumbnailRemotePath?: string})
-                      .thumbnailRemotePath;
-              //@ts-ignore
-              const url = from_platform === 'web' ? file_url : body.remotePath;
-              console.warn('url ==>', url);
-              if (isGroupChat) {
-                showMessageNotification(
-                  file_name,
-                  fromUser,
-                  false,
-                  ChatMessageType.IMAGE,
-                );
-                addMessageToStore(Number(fromUser), {
-                  msg: '',
-                  createdTimestamp: localTime,
-                  msgId: msgId,
-                  isDeleted: false,
-                  type: ChatMessageType.IMAGE,
-                  thumb: thumb,
-                  url: url,
-                  fileName: file_name,
-                });
-              }
-              if (isPeerChat) {
-                showMessageNotification(
-                  'You got private image msg',
-                  fromUser,
-                  true,
-                  ChatMessageType.IMAGE,
-                );
-                addMessageToPrivateStore(
-                  Number(fromUser),
-                  {
+                  });
+                }
+                if (isPeerChat) {
+                  showMessageNotification(chatContent, fromUser, true);
+                  addMessageToPrivateStore(
+                    Number(fromUser),
+                    {
+                      msg: chatContent.replace(/^(\n)+|(\n)+$/g, ''),
+                      createdTimestamp: localTime,
+                      msgId: msgId,
+                      isDeleted: false,
+                      type: ChatMessageType.TXT,
+                    },
+                    false,
+                  );
+                }
+                break;
+
+              case ChatMessageType.IMAGE:
+                const thumb =
+                  from_platform === 'web'
+                    ? file_url + '&thumbnail=true'
+                    : (body as {thumbnailRemotePath?: string})
+                        .thumbnailRemotePath;
+                //@ts-ignore
+                const url =
+                  from_platform === 'web' ? file_url : body.remotePath;
+                console.warn('url ==>', url);
+                if (isGroupChat) {
+                  showMessageNotification(
+                    file_name,
+                    fromUser,
+                    false,
+                    ChatMessageType.IMAGE,
+                  );
+                  addMessageToStore(Number(fromUser), {
                     msg: '',
                     createdTimestamp: localTime,
                     msgId: msgId,
@@ -203,43 +187,43 @@ const ChatConfigure = ({children}) => {
                     thumb: thumb,
                     url: url,
                     fileName: file_name,
-                  },
-                  false,
-                );
-              }
-              break;
-            case ChatMessageType.FILE:
-              //@ts-ignore
+                  });
+                }
+                if (isPeerChat) {
+                  showMessageNotification(
+                    'You got a private image message',
+                    fromUser,
+                    true,
+                    ChatMessageType.IMAGE,
+                  );
+                  addMessageToPrivateStore(
+                    Number(fromUser),
+                    {
+                      msg: '',
+                      createdTimestamp: localTime,
+                      msgId: msgId,
+                      isDeleted: false,
+                      type: ChatMessageType.IMAGE,
+                      thumb: thumb,
+                      url: url,
+                      fileName: file_name,
+                    },
+                    false,
+                  );
+                }
+                break;
 
-              console.warn('message', JSON.stringify(messages, null, 2));
-              if (isGroupChat) {
-                showMessageNotification(
-                  file_name,
-                  fromUser,
-                  false,
-                  ChatMessageType.FILE,
-                );
-                addMessageToStore(Number(fromUser), {
-                  msg: '',
-                  createdTimestamp: localTime,
-                  msgId: msgId,
-                  isDeleted: false,
-                  type: ChatMessageType.FILE,
-                  url: file_url,
-                  ext: file_ext,
-                  fileName: file_name,
-                });
-              }
-              if (isPeerChat) {
-                showMessageNotification(
-                  file_name,
-                  fromUser,
-                  true,
-                  ChatMessageType.FILE,
-                );
-                addMessageToPrivateStore(
-                  Number(fromUser),
-                  {
+              case ChatMessageType.FILE:
+                //@ts-ignore
+                console.warn('message', JSON.stringify(message, null, 2));
+                if (isGroupChat) {
+                  showMessageNotification(
+                    file_name,
+                    fromUser,
+                    false,
+                    ChatMessageType.FILE,
+                  );
+                  addMessageToStore(Number(fromUser), {
                     msg: '',
                     createdTimestamp: localTime,
                     msgId: msgId,
@@ -248,13 +232,33 @@ const ChatConfigure = ({children}) => {
                     url: file_url,
                     ext: file_ext,
                     fileName: file_name,
-                  },
-                  false,
-                );
-              }
-
-              break;
-          }
+                  });
+                }
+                if (isPeerChat) {
+                  showMessageNotification(
+                    file_name,
+                    fromUser,
+                    true,
+                    ChatMessageType.FILE,
+                  );
+                  addMessageToPrivateStore(
+                    Number(fromUser),
+                    {
+                      msg: '',
+                      createdTimestamp: localTime,
+                      msgId: msgId,
+                      isDeleted: false,
+                      type: ChatMessageType.FILE,
+                      url: file_url,
+                      ext: file_ext,
+                      fileName: file_name,
+                    },
+                    false,
+                  );
+                }
+                break;
+            }
+          });
         },
       };
       console.warn('setup listener');

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

@@ -166,6 +166,7 @@ const ChatConfigure = ({children}) => {
               );
             }
           },
+
           onImageMessage: message => {
             if (message?.ext?.channel !== data?.channel) {
               return;
@@ -325,7 +326,6 @@ const ChatConfigure = ({children}) => {
   ) => {
     if (connRef.current) {
       //TODO thumb and url of actual image uploaded available in file upload complete
-      const localFileUrl = option?.ext?.file_url || '';
       //add channel name so to prevent cross channel message mixup when same user joins two diff channels
       // this is filtered on msgRecived event
       option.ext = {...option?.ext, channel: data?.channel};
@@ -341,7 +341,6 @@ const ChatConfigure = ({children}) => {
             option,
           );
 
-          // update local messagre store
           const messageData = {
             msg: option.msg.replace(/^(\n)+|(\n)+$/g, ''),
             createdTimestamp: timeNow(),
@@ -353,8 +352,8 @@ const ChatConfigure = ({children}) => {
             ext: option?.ext?.file_ext,
             fileName: option?.ext?.file_name,
           };
-          //todo chattype as per natue type
-          // this is local user messages
+
+          // update local user message store
           if (option.chatType === SDKChatType.SINGLE_CHAT) {
             addMessageToPrivateStore(Number(option?.to), messageData, true);
           } else {
@@ -418,51 +417,65 @@ const ChatConfigure = ({children}) => {
     anchor.remove();
   };
 
-  const uploadAttachment = uploadFiles => {
-    const {file_type, file_length, file_name, file_url, file_obj, file_ext} =
-      uploadFiles;
+  const uploadAttachment = async uploadFiles => {
+    const {file_obj} = uploadFiles;
     const CHAT_APP_KEY = `${$config.CHAT_ORG_NAME}#${$config.CHAT_APP_NAME}`;
-    const uploadObj = {
-      onFileUploadProgress: (data: ProgressEvent) => {
-        setUploadStatus(UploadStatus.IN_PROGRESS);
-      },
-      onFileUploadComplete: (data: any) => {
-        const url = `${data.uri}/${data.entities[0].uuid}?em-redirect=true&share-secret=${data.entities[0]['share-secret']}`;
-        //TODO: handle for multiple uploads
-        setUploadedFiles(prev => {
-          return [{...prev[0], file_url: url}];
-        });
-        setUploadStatus(UploadStatus.SUCCESS);
-      },
-      onFileUploadError: (error: any) => {
-        logger.error(
-          LogSource.Internals,
-          'CHAT',
-          'Attachment upload failed',
-          error,
-        );
-        setUploadStatus(UploadStatus.FAILURE);
-      },
-      onFileUploadCanceled: () => {
-        //setUploadStatus(UploadStatus.NOT_STARTED);
-      },
-      accessToken: data?.chat?.user_token,
-      appKey: CHAT_APP_KEY,
-      file: file_obj,
-      apiUrl: $config.CHAT_URL,
-    };
 
-    try {
+    return new Promise((resolve, reject) => {
+      const uploadObj = {
+        onFileUploadProgress: (data: ProgressEvent) => {
+          setUploadedFiles(prev => {
+            const updatedFiles = [...prev];
+            updatedFiles[updatedFiles.length - 1] = {
+              ...updatedFiles[updatedFiles.length - 1],
+              upload_status: UploadStatus.IN_PROGRESS,
+            };
+            return updatedFiles;
+          });
+        },
+        onFileUploadComplete: (data: any) => {
+          const url = `${data.uri}/${data.entities[0].uuid}?em-redirect=true&share-secret=${data.entities[0]['share-secret']}`;
+
+          setUploadedFiles(prev => {
+            const updatedFiles = [...prev];
+            updatedFiles[updatedFiles.length - 1] = {
+              ...updatedFiles[updatedFiles.length - 1],
+              file_url: url,
+              upload_status: UploadStatus.SUCCESS,
+            };
+            return updatedFiles;
+          });
+          resolve(url);
+        },
+        onFileUploadError: (error: any) => {
+          logger.error(
+            LogSource.Internals,
+            'CHAT',
+            'Attachment upload failed',
+            error,
+          );
+          //setUploadStatus(UploadStatus.FAILURE);
+          setUploadedFiles(prev => {
+            const updatedFiles = [...prev];
+            updatedFiles[updatedFiles.length - 1] = {
+              ...updatedFiles[updatedFiles.length - 1],
+              upload_status: UploadStatus.FAILURE,
+            };
+            return updatedFiles;
+          });
+          reject(error);
+        },
+        onFileUploadCanceled: () => {
+          //setUploadStatus(UploadStatus.NOT_STARTED);
+        },
+        accessToken: data?.chat?.user_token,
+        appKey: CHAT_APP_KEY,
+        file: file_obj,
+        apiUrl: $config.CHAT_URL,
+      };
+
       AgoraChat.utils.uploadFile(uploadObj);
-    } catch (error) {
-      logger.debug(
-        LogSource.Internals,
-        'CHAT',
-        'Attachment upload failed',
-        error,
-      );
-      console.error(error);
-    }
+    });
   };
 
   const deleteAttachment = (

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -111,11 +111,12 @@ export interface ChatOption {
   msg?: string;
   file?: object;
   ext?: {
-    file_length: number;
-    file_ext: string;
-    file_name: string;
-    file_url: string;
+    file_length?: number;
+    file_ext?: string;
+    file_name?: string;
+    file_url?: string;
     from_platform?: string;
+    channel?: string;
   };
   url?: string;
 }

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

@@ -28,12 +28,14 @@ export enum UploadStatus {
 }
 
 export interface File {
+  file_id: string;
   file_length: number;
   file_ext: string;
   file_url: string;
   file_name: string;
   file_type: string;
   file_obj: object;
+  upload_status: UploadStatus;
 }
 
 export interface ChatUIControlsInterface {
@@ -49,7 +51,7 @@ export interface ChatUIControlsInterface {
   setInputHeight: React.Dispatch<SetStateAction<number>>;
   showEmojiPicker: boolean;
   setShowEmojiPicker: React.Dispatch<SetStateAction<boolean>>;
-  uploadStatus: UploadStatus;
+  uploadStatus: UploadStatus; // for mobile, where only one attchment per message sent
   setUploadStatus: React.Dispatch<SetStateAction<UploadStatus>>;
   uploadedFiles: File[];
   setUploadedFiles: React.Dispatch<SetStateAction<File[]>>;
@@ -83,6 +85,7 @@ export const MAX_HEIGHT = 92;
 export const LINE_HEIGHT = 17;
 export const MAX_UPLOAD_SIZE = 10; //MB
 export const MAX_TEXT_MESSAGE_SIZE = 5; //KB
+export const MAX_FILES_UPLOAD = 5;
 
 const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
   const [chatType, setChatType] = useState<ChatType>(ChatType.Group);

package/template/src/components/livestream/views/LiveStreamControls.tsx

@@ -16,6 +16,7 @@ import ToolbarItem from '../../../atoms/ToolbarItem';
 export interface LiveStreamControlsProps {
   showControls: boolean;
   showLabel?: boolean;
+  customProps?: any;
 }
 
 const LiveStreamControls = (props: LiveStreamControlsProps) => {
@@ -24,7 +25,7 @@ const LiveStreamControls = (props: LiveStreamControlsProps) => {
   if (!showControls) return <></>;
   return (
     <>
-      <ToolbarItem>
+      <ToolbarItem toolbarProps={props?.customProps}>
         <LocalRaiseHand />
       </ToolbarItem>
     </>

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -172,7 +172,7 @@ export default function UserActionMenuOptionsOptions(
               : user.uid === getWhiteboardUid()
               ? viewWhiteboardLabel
               : viewInLargeLabel,
-            callback: () => {
+            onPress: () => {
               setActionMenuVisible(false);
               dispatch({
                 type: 'UserPin',
@@ -196,7 +196,7 @@ export default function UserActionMenuOptionsOptions(
                 ? removeFromTopLabel
                 : pinToTopLabel
               : pinToTopLabel,
-            callback: () => {
+            onPress: () => {
               setActionMenuVisible(false);
               dispatch({
                 type: 'UserSecondaryPin',
@@ -226,7 +226,7 @@ export default function UserActionMenuOptionsOptions(
           iconColor: $config.SECONDARY_ACTION_COLOR,
           textColor: $config.SECONDARY_ACTION_COLOR,
           title: messagePrivatelyLabel,
-          callback: () => {
+          onPress: () => {
             setActionMenuVisible(false);
             openPrivateChat(user.uid);
           },
@@ -257,7 +257,7 @@ export default function UserActionMenuOptionsOptions(
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
             title: audioLabel(user.audio),
-            callback: () => {
+            onPress: () => {
               setActionMenuVisible(false);
               user.audio
                 ? setShowAudioMuteModal(true)
@@ -271,7 +271,7 @@ export default function UserActionMenuOptionsOptions(
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
               title: videoLabel(user.video),
-              callback: () => {
+              onPress: () => {
                 setActionMenuVisible(false);
                 user.video
                   ? setShowVideoMuteModal(true)
@@ -295,7 +295,7 @@ export default function UserActionMenuOptionsOptions(
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
             title: addAsPresenterLabel,
-            callback: () => {
+            onPress: () => {
               setActionMenuVisible(false);
               promoteAudienceAsCoHost(user.uid);
             },
@@ -314,7 +314,7 @@ export default function UserActionMenuOptionsOptions(
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
               title: removeAsPresenterLabel,
-              callback: () => {
+              onPress: () => {
                 setActionMenuVisible(false);
                 events.send(
                   LiveStreamControlMessageEnum.raiseHandRequestRejected,
@@ -332,7 +332,7 @@ export default function UserActionMenuOptionsOptions(
           iconColor: $config.SEMANTIC_ERROR,
           textColor: $config.SEMANTIC_ERROR,
           title: removeFromRoomLabel,
-          callback: () => {
+          onPress: () => {
             setActionMenuVisible(false);
             setRemoveMeetingPopupVisible(true);
           },
@@ -350,7 +350,7 @@ export default function UserActionMenuOptionsOptions(
         iconColor: $config.SECONDARY_ACTION_COLOR,
         textColor: $config.SECONDARY_ACTION_COLOR,
         title: changeNameLabel,
-        callback: () => {
+        onPress: () => {
           setFocus(prevState => {
             return {
               ...prevState,
@@ -376,7 +376,7 @@ export default function UserActionMenuOptionsOptions(
           localuid === user?.parentUid
             ? stopScreenShareLabel
             : removeScreenShareLabel,
-        callback: () => {
+        onPress: () => {
           setActionMenuVisible(false);
           //for local user directly stop the screenshare
           if (localuid === user.parentUid) {

package/template/src/components/virtual-background/VBButton.tsx

@@ -1,12 +1,11 @@
-import {StyleSheet, Text, View} from 'react-native';
 import React from 'react';
-import {ToolbarItem} from 'customization-api';
 import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
 import {useToolbarMenu} from '../../utils/useMenu';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
 import {useActionSheet} from '../../utils/useActionSheet';
 import {useString} from '../../utils/useString';
 import {toolbarItemVirtualBackgroundText} from '../../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../../atoms/ToolbarItem';
 
 interface VBButtonProps {
   isVBOpen: boolean;
@@ -16,7 +15,8 @@ interface VBButtonProps {
 }
 
 const VBButton = (props: VBButtonProps) => {
-  const {isVBOpen, setIsVBOpen, showLabel = false} = props;
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {setIsVBOpen, showLabel = false} = props;
   const {isToolbarMenuItem} = useToolbarMenu();
   const {isOnActionSheet} = useActionSheet();
   const vbLabel = useString(toolbarItemVirtualBackgroundText)();
@@ -26,14 +26,14 @@ const VBButton = (props: VBButtonProps) => {
   };
 
   let iconButtonProps: IconButtonProps = {
-    onPress: onPress,
+    onPress: onPressCustom || onPress,
     iconProps: {
       tintColor: $config.SECONDARY_ACTION_COLOR,
       name: 'vb',
     },
 
     btnTextProps: {
-      text: showLabel ? vbLabel?.replace(' ', '\n') : '',
+      text: showLabel ? label || vbLabel?.replace(' ', '\n') : '',
       numberOfLines: 2,
       textStyle: {
         marginTop: 8,
@@ -60,5 +60,3 @@ const VBButton = (props: VBButtonProps) => {
 };
 
 export default VBButton;
-
-const styles = StyleSheet.create({});

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

@@ -65,6 +65,10 @@ export interface I18nRequestConfirmation {
   name: string;
   type: I18nMuteType;
 }
+export interface I18nFileSize {
+  name: string;
+  size: number;
+}
 export interface I18nMuteConfirmation {
   name: string;
   type: I18nMuteType;
@@ -239,6 +243,7 @@ export const chatPrivateMessageDeletePopupText =
   'chatPrivateMessageDeletePopupText';
 export const chatUploadStatusInProgress = 'chatUploadStatusInProgress';
 export const chatUploadStatusFailure = 'chatUploadStatusFailure';
+export const chatUploadMaxLimit = 'chatUploadMaxLimit';
 
 export const peoplePanelTurnoffAllCameraBtnText =
   'peoplePanelTurnoffAllCameraBtnText';
@@ -651,6 +656,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [chatUploadErrorFileTypeToastSubHeading]?: I18nBaseType;
   [chatUploadStatusInProgress]?: I18nBaseType;
   [chatUploadStatusFailure]?: I18nBaseType;
+  [chatUploadMaxLimit]?: I18nBaseType;
 
   [peoplePanelTurnoffAllCameraBtnText]?: I18nBaseType;
   [peoplePanelMuteAllMicBtnText]?: I18nBaseType;
@@ -1037,13 +1043,14 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [chatUploadErrorToastHeading]: 'Attachment Upload Error',
   [chatUploadErrorFileSizeToastHeading]: 'File size is too large',
   [chatSendErrorTextSizeToastHeading]: 'Text size is too large',
-  [chatUploadErrorFileSizeToastSubHeading]: size =>
-    `You can send attachments upto ${size}MB in size`,
+  [chatUploadErrorFileSizeToastSubHeading]: (size, fileName) =>
+    ` ${fileName} exceeds ${size}MB  size limit`,
   [chatSendErrorTextSizeToastSubHeading]: size =>
     `You can send text message upto ${size}KB in size`,
   [chatUploadErrorFileTypeToastSubHeading]: type => `${type} is not supported`,
   [chatUploadStatusInProgress]: `Uploading... Please wait`,
   [chatUploadStatusFailure]: `Something went wrong while sharing.Let'as try again`,
+  [chatUploadMaxLimit]: `Up to 5 files can be uploaded at a time`,
   [chatMessageDeleteConfirmBtnText]: `Delete`,
   [chatPublicMessageDeletePopupText]: `Are you sure you want to delete this message for everyone in the public chat? `,
   [chatPrivateMessageDeletePopupText]: (name: string) =>

package/template/src/language/i18nTypes.ts

@@ -1,6 +1,6 @@
 import {TextDataInterface} from './default-labels/index';
 
-export type I18nBaseType<T = any> = string | ((template: T) => string);
+export type I18nBaseType<T = any> = string | ((...args: T[]) => string);
 export type I18nDynamicType = I18nBaseType<string>;
 export type I18nConditionalType = I18nBaseType<boolean>;
 export interface I18nInterface {