agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -1,120 +1,271 @@
-import React, {useContext} from 'react';
+import React, {useEffect, useReducer, useState} from 'react';
 import {
   View,
   Text,
-  TouchableOpacity,
   ScrollView,
   useWindowDimensions,
   StyleSheet,
+  Pressable,
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import TextWithTooltip from '../TextWithTooltip';
 import {useString} from '../../utils/useString';
-import {isIOS, isWebInternal} from '../../utils/common';
+import {isIOS, isMobileUA, isWebInternal} from '../../utils/common';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useContent} from 'customization-api';
+import UserAvatar from '../../atoms/UserAvatar';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import Spacer from '../../atoms/Spacer';
+import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
+import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
+import {
+  inviteTileNoElseJoinedYetText,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+
+const ChatIcon = () => (
+  <View style={{alignSelf: 'center', marginRight: 20}}>
+    <ImageIcon
+      iconType="plain"
+      name="chat-nav"
+      tintColor={$config.SECONDARY_ACTION_COLOR}
+    />
+  </View>
+);
 
 const ChatParticipants = (props: any) => {
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const {selectUser} = props;
-  const {height, width} = useWindowDimensions();
-  const {renderList} = useRender();
+  const {defaultContent, activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
-  const isChatUser = (userId: UidType, userInfo: any) => {
-    return (
-      userId !== localUid && //user can't chat with own user
-      // @ts-ignore
-      userId !== '1' && //user can't chat with pstn user
-      userInfo?.type === 'rtc' &&
-      !userInfo?.offline
-    );
-  };
+  const isMobile = isMobileUA();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM) {
+      forceUpdate();
+    }
+  }, [waitingRoomUids, activeUids]);
+
+  const noOneElseJoinedYet = useString(inviteTileNoElseJoinedYetText)();
 
   return (
     <ScrollView>
-      {Object.entries(renderList).map(([uid, value]) => {
-        const uidAsNumber = parseInt(uid);
-        if (isChatUser(uidAsNumber, value)) {
+      {
+        //video meeting vertical
+        (!$config.EVENT_MODE && activeUids && activeUidsLen === 1) ||
+        //livestreaming vertical
+        ($config.EVENT_MODE && hostUids.length + audienceUids.length === 1) ? (
+          <View style={style.defaultMessageContainer}>
+            <Text style={style.defaultMessageText}>{noOneElseJoinedYet}</Text>
+          </View>
+        ) : (
+          <></>
+        )
+      }
+      {Object.keys(defaultContent)
+        .map(i => parseInt(i))
+        .filter(i => {
+          try {
+            if (isNaN(i)) {
+              return false;
+            } else {
+              const userId = i;
+              const userInfo = defaultContent[userId];
+              //video meeting with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                !$config.EVENT_MODE &&
+                activeUids?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
+              //livestreaming with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                $config.EVENT_MODE &&
+                hostUids?.concat(audienceUids)?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
+              return (
+                userId !== localUid && //user can't chat with own user
+                // @ts-ignore
+                userId !== '1' && //user can't chat with pstn user
+                userInfo?.type === 'rtc' &&
+                !userInfo?.offline
+              );
+            }
+          } catch (error) {
+            return false;
+          }
+        })
+        .sort((a, b) => {
+          return (
+            defaultContent[b]?.lastMessageTimeStamp -
+            defaultContent[a]?.lastMessageTimeStamp
+          );
+        })
+        .map(uid => {
+          const uidAsNumber = uid;
+          const name = defaultContent[uidAsNumber]
+            ? defaultContent[uidAsNumber].name + ''
+            : remoteUserDefaultLabel;
           return (
-            <TouchableOpacity
-              style={style.participantContainer}
-              key={uid}
-              onPress={() => {
-                selectUser(uidAsNumber);
-              }}>
-              {unreadIndividualMessageCount &&
-              unreadIndividualMessageCount[uidAsNumber] ? (
-                <View style={style.chatNotificationPrivate}>
-                  <Text>{unreadIndividualMessageCount[uidAsNumber]}</Text>
-                </View>
-              ) : null}
-              <View style={{flex: 1}}>
-                <TextWithTooltip
-                  touchable={false}
-                  style={[
-                    style.participantText,
-                    {
-                      fontSize: RFValue(16, height > width ? height : width),
-                    },
-                  ]}
-                  value={
-                    renderList[uidAsNumber]
-                      ? renderList[uidAsNumber].name + ''
-                      : remoteUserDefaultLabel
-                  }
-                />
-              </View>
-              <View>
-                <Text
-                  style={{
-                    color: $config.PRIMARY_FONT_COLOR,
-                    fontSize: 18,
-                  }}>{`>`}</Text>
-              </View>
-            </TouchableOpacity>
+            <PlatformWrapper key={'chat-participant' + uid}>
+              {(isHovered: boolean) => {
+                return (
+                  <Pressable
+                    onPress={() => {
+                      logger.log(
+                        LogSource.Internals,
+                        'CHAT',
+                        `Starting chat with ${name}`,
+                      );
+                      selectUser(uidAsNumber);
+                    }}>
+                    <View style={style.participantContainer}>
+                      <View style={style.bgContainerStyle}>
+                        <UserAvatar
+                          name={name}
+                          containerStyle={style.userAvatarContainer}
+                          textStyle={style.userAvatarText}
+                        />
+                      </View>
+                      <View style={style.participantTextContainer}>
+                        <Text numberOfLines={1} style={[style.participantText]}>
+                          {name}
+                        </Text>
+                      </View>
+                      {unreadIndividualMessageCount &&
+                      unreadIndividualMessageCount[uidAsNumber] &&
+                      !isHovered ? (
+                        <>
+                          <View style={style.chatNotificationPrivate}>
+                            <Text style={style.chatNotificationCountText}>
+                              {unreadIndividualMessageCount[uidAsNumber]}
+                            </Text>
+                          </View>
+                          <Spacer size={20} horizontal={true} />
+                        </>
+                      ) : isMobile || isHovered ? (
+                        <ChatIcon />
+                      ) : (
+                        <></>
+                      )}
+                    </View>
+                  </Pressable>
+                );
+              }}
+            </PlatformWrapper>
           );
-        }
-      })}
+        })}
     </ScrollView>
   );
 };
 
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() && !isMobileUA() ? (
+    <div
+      style={{
+        backgroundColor: isHovered
+          ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%']
+          : 'transparent',
+        cursor: isHovered ? 'pointer' : 'auto',
+      }}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+
 const style = StyleSheet.create({
+  defaultMessageContainer: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 20,
+    marginHorizontal: 20,
+    marginBottom: 0,
+  },
+  defaultMessageText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 12,
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+  },
+  bgContainerStyle: {
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    marginRight: 8,
+    marginLeft: 20,
+    marginVertical: 8,
+  },
+  userAvatarContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  userAvatarText: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 12,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
   participantContainer: {
     flexDirection: 'row',
-    flex: 1,
-    height: 20,
-    marginTop: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    //  flex: 1,
     overflow: 'hidden',
-    marginHorizontal: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
-  participantText: {
+  participantTextContainer: {
     flex: 1,
-    fontWeight: isWebInternal() ? '500' : '700',
-    flexDirection: 'row',
-    color: $config.PRIMARY_FONT_COLOR,
+    alignSelf: 'center',
+  },
+  participantText: {
+    //flex: 1,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 14,
+    color: $config.FONT_COLOR,
     textAlign: 'left',
     flexShrink: 1,
-    marginRight: 30,
   },
   chatNotificationPrivate: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    right: 20,
-    top: 0,
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+    borderRadius: 8,
+    alignSelf: 'center',
+  },
+  chatNotificationCountText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    lineHeight: 12,
+    textAlign: 'center',
+    color: $config.FONT_COLOR,
+    paddingVertical: 2,
+    paddingLeft: 8,
+    paddingRight: 9,
   },
 });
 

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

@@ -0,0 +1,209 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {useChatConfigure} from '../../components/chat/chatConfigure';
+import IconButton from '../../../src/atoms/IconButton';
+import {
+  MIN_HEIGHT,
+  UploadStatus,
+  useChatUIControls,
+  MAX_TEXT_MESSAGE_SIZE,
+} from '../../components/chat-ui/useChatUIControls';
+import {useRoomInfo} from 'customization-api';
+import {
+  ChatMessageType,
+  SDKChatType,
+} from '../../components/chat-messages/useChatMessages';
+import {useString} from '../../utils/useString';
+import {
+  chatSendMessageBtnText,
+  chatSendErrorTextSizeToastHeading,
+  chatSendErrorTextSizeToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {isMobileUA, isWeb} from '../../utils/common';
+import Toast from '../../../react-native-toast-message';
+
+export interface ChatSendButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+export const handleChatSend = ({
+  sendChatSDKMessage,
+  selectedUserId,
+  message,
+  setMessage,
+  inputActive,
+  uploadStatus,
+  uploadedFiles,
+  setUploadedFiles,
+  setInputHeight,
+  data,
+  setShowEmojiPicker,
+  toastHeadingSize,
+  errorSubHeadingSize,
+}) => {
+  const isAllFilesUploaded =
+    uploadedFiles.length > 0 &&
+    uploadedFiles.every(file => file.upload_status === UploadStatus.SUCCESS);
+
+  const isValidMsg = message.length > 0 || isAllFilesUploaded;
+
+  const groupID = data.chat.group_id;
+
+  if (!isValidMsg) return;
+  if (message.length >= MAX_TEXT_MESSAGE_SIZE * 1024) {
+    Toast.show({
+      leadingIconName: 'alert',
+      type: 'error',
+      text1: toastHeadingSize,
+      text2: errorSubHeadingSize(MAX_TEXT_MESSAGE_SIZE.toString()),
+      visibilityTime: 3000,
+      primaryBtn: null,
+      secondaryBtn: null,
+    });
+    return;
+  }
+
+  const sendTextMessage = () => {
+    const option = {
+      chatType: selectedUserId
+        ? SDKChatType.SINGLE_CHAT
+        : SDKChatType.GROUP_CHAT,
+      type: ChatMessageType.TXT,
+      msg: message,
+      from: data.uid.toString(),
+      to: selectedUserId ? selectedUserId.toString() : groupID,
+      ext: {
+        from_platform: isWeb() ? 'web' : 'native',
+      },
+    };
+    sendChatSDKMessage(option);
+  };
+
+  if (uploadedFiles.length > 0) {
+    uploadedFiles.forEach(file => {
+      // send all the attachment one by one
+      const msgType = file.file_type;
+      const {
+        file_ext = '',
+        file_length = 0,
+        file_name = '',
+        file_url = '',
+      } = file;
+
+      const option = {
+        chatType: selectedUserId
+          ? SDKChatType.SINGLE_CHAT
+          : SDKChatType.GROUP_CHAT,
+        type: msgType as ChatMessageType,
+        from: data.uid.toString(),
+        to: selectedUserId ? selectedUserId.toString() : groupID,
+        ext: {
+          file_length,
+          file_ext,
+          file_url,
+          file_name,
+          from_platform: isWeb() ? 'web' : 'native',
+          msg: uploadedFiles.length === 1 ? message : '',
+        },
+      };
+      sendChatSDKMessage(option);
+    });
+    if (message && uploadedFiles.length > 1) {
+      // separate msg when there are more attachments
+      sendTextMessage();
+    }
+  } else {
+    // send Text Message
+    sendTextMessage();
+  }
+
+  setMessage && setMessage('');
+  setInputHeight && setInputHeight(MIN_HEIGHT);
+  setUploadedFiles && setUploadedFiles(prev => []);
+  isWeb() && setShowEmojiPicker(false);
+};
+
+const ChatSendButton = (props: ChatSendButtonProps) => {
+  const {sendChatSDKMessage} = useChatConfigure();
+  const {setShowEmojiPicker} = useChatUIControls();
+  const {
+    privateChatUser: selectedUserId,
+    message,
+    setMessage,
+    inputActive,
+    uploadStatus,
+    uploadedFiles,
+    setUploadedFiles,
+    setInputHeight,
+  } = useChatUIControls();
+
+  const {data} = useRoomInfo();
+  const isAllFilesUploaded =
+    uploadedFiles.length > 0 &&
+    uploadedFiles.every(file => file.upload_status === UploadStatus.SUCCESS);
+
+  const isValidMsg = message.length > 0 || isAllFilesUploaded;
+  const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
+  const errorSubHeadingSize = useString(chatSendErrorTextSizeToastSubHeading);
+  const groupID = data.chat.group_id;
+
+  const onPress = () =>
+    handleChatSend({
+      sendChatSDKMessage,
+      selectedUserId,
+      message,
+      setMessage,
+      inputActive,
+      uploadStatus,
+      uploadedFiles,
+      setUploadedFiles,
+      setInputHeight,
+      data,
+      setShowEmojiPicker,
+      toastHeadingSize,
+      errorSubHeadingSize,
+    });
+
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <View style={styles.containerBtn}>
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 24,
+        }}
+        toolTipMessage={
+          isMobileUA() ? null : useString(chatSendMessageBtnText)()
+        }
+        iconProps={{
+          iconType: 'plain',
+          iconContainerStyle: {
+            backgroundColor: isValidMsg
+              ? $config.PRIMARY_ACTION_BRAND_COLOR
+              : 'transparent',
+            borderRadius: 30,
+            paddingVertical: 2,
+            paddingLeft: 8,
+            paddingRight: 4,
+          },
+          iconSize: 24,
+          name: isValidMsg ? 'chat_send_fill' : 'chat_send',
+          tintColor: isValidMsg
+            ? $config.SECONDARY_ACTION_COLOR
+            : $config.SEMANTIC_NEUTRAL,
+        }}
+        onPress={onPress}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerBtn: {
+    padding: 2,
+  },
+});
+
+export default ChatSendButton;

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

@@ -0,0 +1,84 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
+import ThemeConfig from '../../../src/theme';
+import {
+  MAX_FILES_UPLOAD,
+  UploadStatus,
+  useChatUIControls,
+} from '../../components/chat-ui/useChatUIControls';
+import {
+  chatUploadStatusFailure,
+  chatUploadStatusInProgress,
+  chatUploadMaxLimit,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../utils/useString';
+
+const ChatUploadStatus = () => {
+  const {uploadedFiles} = useChatUIControls();
+  const inProgressText = useString(chatUploadStatusInProgress)();
+  const failureText = useString(chatUploadStatusFailure)();
+  const maxUploadText = useString(chatUploadMaxLimit)();
+
+  const lastFileStatus =
+    uploadedFiles.length > 0
+      ? uploadedFiles[uploadedFiles.length - 1].upload_status
+      : null;
+
+  const isMaxFilesUploaded = uploadedFiles.length >= MAX_FILES_UPLOAD;
+
+  let text = '';
+  switch (lastFileStatus) {
+    case UploadStatus.IN_PROGRESS:
+      text = inProgressText;
+      break;
+    case UploadStatus.FAILURE:
+      text = failureText;
+      break;
+  }
+
+  if (isMaxFilesUploaded) {
+    text = maxUploadText;
+  }
+
+  return text.length > 0 ? (
+    <View
+      style={[
+        styles.chatStatusContainer,
+        lastFileStatus === UploadStatus.FAILURE && {
+          backgroundColor:
+            $config.SEMANTIC_ERROR + hexadecimalTransparency['40%'],
+        },
+        isMaxFilesUploaded && {
+          backgroundColor:
+            $config.SEMANTIC_WARNING + hexadecimalTransparency['40%'],
+        },
+      ]}>
+      <Text style={styles.chatStatusText}>{text}</Text>
+    </View>
+  ) : null;
+};
+
+export default ChatUploadStatus;
+
+const styles = StyleSheet.create({
+  chatStatusContainer: {
+    flexGrow: 1,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
+    borderBottomWidth: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: $config.SEMANTIC_NEUTRAL + hexadecimalTransparency['15%'],
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  chatStatusText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 12,
+    lineHeight: 14.5,
+    fontStyle: 'italic',
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    textAlign: 'center',
+  },
+});