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

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

@@ -0,0 +1,126 @@
+import {ContentObjects} from '../../../agora-rn-uikit/src/Contexts/RtcContext';
+import {TranscriptItem} from './useCaption';
+
+export function formatTime(timestamp: number): string {
+  const d = new Date(timestamp);
+  const h = d.getHours();
+  const m = d.getMinutes().toString().padStart(2, '0');
+  //const s = d.getSeconds().toString().padStart(2, '0');
+  const suffix = h >= 12 ? 'PM' : 'AM';
+  const H = h % 12 || 12;
+  return `${H}:${m} ${suffix}`;
+}
+
+export type LanguageType =
+  | 'en-US'
+  | 'hi-IN'
+  | 'zh-CN'
+  | 'zh-HK'
+  | 'fr-FR'
+  | 'de-DE'
+  | 'ko-KR'
+  | 'en-IN'
+  | 'ar'
+  | 'ja-JP'
+  | 'pt-PT'
+  | 'es-ES'
+  | 'it-IT'
+  | 'id-ID'
+  | '';
+
+interface LanguageData {
+  label: string;
+  value: LanguageType;
+}
+
+export const langData: LanguageData[] = [
+  {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: 'French', value: 'fr-FR'},
+  {label: 'German', value: 'de-DE'},
+  {label: 'Japanese', value: 'ja-JP'},
+  {label: 'Korean', value: 'ko-KR'},
+  {label: 'Portuguese', value: 'pt-PT'},
+  {label: 'Spanish', value: 'es-ES'},
+  {label: 'Italian', value: 'it-IT'},
+  {label: 'Indonesian', value: 'id-ID'},
+];
+
+export function getLanguageLabel(
+  languageCode: LanguageType[],
+): string | undefined {
+  const langLabels = languageCode.map(langCode => {
+    return langData.find(data => data.value === langCode).label;
+  });
+  return langLabels ? langLabels.join(', ') : undefined;
+}
+
+export function formatDateWithTimeZone(date: Date): string {
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+  const year = date.getUTCFullYear();
+
+  const hours = String(date.getUTCHours()).padStart(2, '0');
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+
+  const timeZoneOffset = 5.5 * 60; // Offset in minutes for GMT +5:30
+  const offsetHours = Math.floor(timeZoneOffset / 60);
+  const offsetMinutes = timeZoneOffset % 60;
+  const offsetSign = '+';
+
+  return `${day}/${month}/${year} ${hours}:${minutes} GMT ${offsetSign}${offsetHours}:${String(
+    offsetMinutes,
+  ).padStart(2, '0')}`;
+}
+
+export const formatTranscriptContent = (
+  meetingTranscript: TranscriptItem[],
+  meetingTitle: string,
+  defaultContent: ContentObjects,
+) => {
+  const formattedContent = meetingTranscript
+    .map(item => {
+      if (item.uid.toString().indexOf('langUpdate') !== -1) {
+        return `${defaultContent[item?.uid?.split('-')[1]]?.name} ${item.text}`;
+      }
+      return `${defaultContent[item.uid].name} ${formatTime(
+        Number(item?.time),
+      )}:\n${item.text}`;
+    })
+    .join('\n\n');
+
+  const startTime = formatDateWithTimeZone(
+    new Date(meetingTranscript[0]?.time),
+  );
+
+  const attendees = Object.entries(defaultContent)
+    .filter(
+      arr =>
+        arr[1].type === 'rtc' &&
+        arr[0] !== '100000' && // exclude recording bot
+        (arr[1]?.isInWaitingRoom === true ? false : true),
+    )
+    .map(arr => arr[1].name)
+    .join(',');
+
+  const info =
+    'This editable transcript was computer generated and might contain errors. People can also change\nthe text after it was created.';
+  const finalContent = `${meetingTitle} (${startTime}) - Transcript \n\nParticipants\n${attendees} \n\nTranscript\n${info} \n\n${formattedContent}`;
+
+  // to give unique file name
+  const currentDate = new Date();
+  const formattedDate = currentDate.toISOString().slice(0, 10);
+  const formattedTime = currentDate
+    .toTimeString()
+    .slice(0, 8)
+    .replace(/:/g, '');
+
+  // adding the filename
+  const fileName = `MeetingTranscript_${formattedDate}_${formattedTime}.txt`;
+
+  return [finalContent, fileName];
+};

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

@@ -0,0 +1,224 @@
+import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
+import React from 'react';
+import {calculatePosition, isMobileUA, trimText} from '../../utils/common';
+import IconButton from '../../atoms/IconButton';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+import {useChatConfigure} from '../../components/chat/chatConfigure';
+import Clipboard from '../../subComponents/Clipboard';
+import {useString} from '../../utils/useString';
+import {
+  chatActionMenuCopyLinkText,
+  chatActionMenuDownloadText,
+  chatActionMenuDeleteText,
+  chatMessageDeleteConfirmBtnText,
+  chatPublicMessageDeletePopupText,
+  chatPrivateMessageDeletePopupText,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {
+  SDKChatType,
+  useChatMessages,
+} from '../../components/chat-messages/useChatMessages';
+import InlinePopup from '../../../src/atoms/InlinePopup';
+import {cancelText} from '../../language/default-labels/commonLabels';
+import {useContent} from 'customization-api';
+
+interface MoreMenuProps {
+  setActionMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface CaptionsActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: React.RefObject<View>;
+  fileName: string;
+  fileUrl: string;
+  msgId: string;
+  privateChatUser: number;
+  isLocal: boolean;
+}
+
+export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    btnRef,
+    fileName,
+    fileUrl,
+    msgId,
+    privateChatUser,
+    isLocal,
+  } = props;
+
+  const actionMenuitems: ActionMenuItem[] = [];
+  const [modalPosition, setModalPosition] = React.useState({});
+  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
+  const [showDeleteMessageModal, setShowDeleteMessageModal] =
+    React.useState(false);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const {downloadAttachment, deleteAttachment} = useChatConfigure();
+  const {removeMessageFromPrivateStore, removeMessageFromStore} =
+    useChatMessages();
+  const {defaultContent} = useContent();
+
+  const {
+    data: {isHost, chat},
+  } = useRoomInfo();
+
+  const groupID = chat.group_id;
+  const chatType = privateChatUser
+    ? SDKChatType.SINGLE_CHAT
+    : SDKChatType.GROUP_CHAT;
+  const recallFromUser = privateChatUser ? privateChatUser : groupID;
+  const cancelTxt = useString(cancelText)();
+  const cancelLabel =
+    cancelTxt.charAt(0).toUpperCase() + cancelTxt.slice(1).toLowerCase();
+  const confirmLabel = useString(chatMessageDeleteConfirmBtnText)();
+  let message = '';
+  if (chatType === SDKChatType.GROUP_CHAT) {
+    message = useString(chatPublicMessageDeletePopupText)();
+  }
+  if (chatType === SDKChatType.SINGLE_CHAT) {
+    message = useString(chatPrivateMessageDeletePopupText)(
+      trimText(defaultContent[recallFromUser]?.name),
+    );
+  }
+
+  actionMenuitems.push({
+    icon: 'download',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: useString(chatActionMenuDownloadText)(),
+    onPress: () => {
+      downloadAttachment(fileName, fileUrl);
+      setActionMenuVisible(false);
+    },
+  });
+
+  actionMenuitems.push({
+    icon: 'clipboard',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: useString(chatActionMenuCopyLinkText)(),
+    onPress: () => {
+      Clipboard.setString(fileUrl);
+      setActionMenuVisible(false);
+    },
+  });
+  actionMenuitems.push({
+    icon: 'delete',
+    iconColor: $config.SEMANTIC_ERROR,
+    textColor: $config.SEMANTIC_ERROR,
+    iconSize: 24,
+    title: useString(chatActionMenuDeleteText)(),
+    onPress: () => {
+      if (isLocal) {
+        // confirm dialog : user is deleting for all
+        setShowDeleteMessageModal(true);
+        //deleteAttachment(msgId, recallFromUser.toString(), chatType);
+      } else {
+        if (chatType === SDKChatType.SINGLE_CHAT) {
+          removeMessageFromPrivateStore(msgId, isLocal);
+        }
+        if (chatType === SDKChatType.GROUP_CHAT) {
+          removeMessageFromStore(msgId, isLocal);
+        }
+      }
+      setActionMenuVisible(false);
+    },
+  });
+
+  React.useEffect(() => {
+    if (actionMenuVisible) {
+      //getting btnRef x,y
+      btnRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          localWidth: number,
+          localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          const data = calculatePosition({
+            px,
+            py,
+            localWidth,
+            localHeight,
+            globalHeight,
+            globalWidth,
+          });
+          setModalPosition(data);
+          setIsPosCalculated(true);
+        },
+      );
+    }
+  }, [actionMenuVisible]);
+  return (
+    <>
+      {isLocal ? (
+        <InlinePopup
+          actionMenuVisible={showDeleteMessageModal}
+          setActionMenuVisible={setShowDeleteMessageModal}
+          modalPosition={modalPosition}
+          message={message}
+          cancelLabel={cancelLabel}
+          cancelLabelStyle={{color: $config.SECONDARY_ACTION_COLOR}}
+          confirmLabel={confirmLabel}
+          confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
+          onConfirmClick={() => {
+            deleteAttachment(msgId, recallFromUser.toString(), chatType);
+            if (chatType === SDKChatType.SINGLE_CHAT) {
+              removeMessageFromPrivateStore(msgId, isLocal);
+            }
+            if (chatType === SDKChatType.GROUP_CHAT) {
+              removeMessageFromStore(msgId, isLocal);
+            }
+            setShowDeleteMessageModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      <ActionMenu
+        from={'chat'}
+        actionMenuVisible={actionMenuVisible && isPosCalculated}
+        setActionMenuVisible={setActionMenuVisible}
+        modalPosition={modalPosition}
+        items={actionMenuitems}
+      />
+    </>
+  );
+};
+
+export const MoreMenu = React.forwardRef<View, MoreMenuProps>((props, ref) => {
+  const {setActionMenuVisible} = props;
+  const isMobile = isMobileUA();
+  return (
+    <View ref={ref} collapsable={false}>
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor:
+            $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
+          borderRadius: 18,
+        }}
+        iconProps={{
+          iconType: 'plain',
+          name: 'more-menu',
+          iconSize: 18,
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+          iconContainerStyle: {
+            padding: 4,
+            borderRadius: 18,
+          },
+        }}
+        onPress={() => {
+          setActionMenuVisible(true);
+        }}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({});

package/template/src/subComponents/chat/ChatAttachment.native.tsx

@@ -0,0 +1,237 @@
+import {Platform, StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import IconButton from '../../../src/atoms/IconButton';
+import DocumentPicker from 'react-native-document-picker';
+import {useRoomInfo} from 'customization-api';
+import Toast from '../../../react-native-toast-message';
+import {
+  useChatUIControls,
+  UploadStatus,
+  MAX_UPLOAD_SIZE,
+} from '../../components/chat-ui/useChatUIControls';
+import {useChatConfigure} from '../../components/chat/chatConfigure.native';
+import {
+  ChatMessageType,
+  SDKChatType,
+  useChatMessages,
+} from '../../components/chat-messages/useChatMessages';
+import {
+  ChatError,
+  ChatMessage,
+  ChatMessageChatType,
+} from 'react-native-agora-chat';
+import {isAndroid} from '../../utils/common';
+
+import {
+  chatUploadErrorToastHeading,
+  chatUploadErrorFileSizeToastHeading,
+  chatUploadErrorFileSizeToastSubHeading,
+  chatUploadErrorFileTypeToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../utils/useString';
+
+export interface ChatAttachmentButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+interface ExtendedChatMessage extends ChatMessage {
+  body: {
+    localPath?: string;
+    remotePath?: string;
+    type: ChatMessageType;
+  };
+  attributes: {
+    file_ext?: string;
+    file_name?: string;
+  };
+}
+
+export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
+  const {privateChatUser, setUploadStatus} = useChatUIControls();
+  const {sendChatSDKMessage} = useChatConfigure();
+  const {data} = useRoomInfo();
+
+  const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
+
+  const toastHeadingType = useString(chatUploadErrorToastHeading)();
+  const toastHeadingSize = useString(chatUploadErrorFileSizeToastHeading)();
+  const errorSubHeadingSize = useString(chatUploadErrorFileSizeToastSubHeading);
+  const errorSubHeadingType = useString(chatUploadErrorFileTypeToastSubHeading);
+
+  const fileAllowedTypes = {
+    zip: true,
+    txt: true,
+    doc: true,
+    pdf: true,
+  };
+
+  const imageAllowedTypes = {
+    jpg: true,
+    jpeg: true,
+    gif: true,
+    png: true,
+    bmp: true,
+  };
+
+  const onPress = async () => {
+    console.warn('attachment open');
+    try {
+      const result = await DocumentPicker.pick({
+        type: [
+          DocumentPicker.types.images,
+          DocumentPicker.types.pdf,
+          DocumentPicker.types.doc,
+          DocumentPicker.types.plainText,
+          DocumentPicker.types.zip,
+          DocumentPicker.types.docx,
+          DocumentPicker.types.ppt,
+          DocumentPicker.types.pptx,
+          DocumentPicker.types.xls,
+          DocumentPicker.types.xlsx,
+          DocumentPicker.types.csv,
+        ],
+        presentationStyle: 'fullScreen',
+        copyTo: 'documentDirectory',
+      });
+
+      if (result[0].size > MAX_UPLOAD_SIZE * 1024 * 1024) {
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: toastHeadingSize,
+          text2: errorSubHeadingSize(MAX_UPLOAD_SIZE.toString()),
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+        return;
+      }
+
+      //todo check for mime type of file above
+      const uploadedFileType = result[0].type;
+      const isImageUploaded = uploadedFileType.indexOf('image/') !== -1;
+      const isFileUploaded = !isImageUploaded;
+      const groupID = data.chat.group_id;
+
+      console.warn('file info => ', result[0]);
+      let filePath =
+        Platform.OS === 'ios'
+          ? result[0].fileCopyUri?.replace('file://', '')
+          : result[0].fileCopyUri;
+      console.warn('file path sending', filePath);
+      // replace %20 with space otherwise giving file not found
+      if (filePath?.includes('%20')) {
+        filePath = filePath?.replace(/%20/g, ' ');
+      }
+
+      if (isImageUploaded || isFileUploaded) {
+        const option = {
+          type: isImageUploaded ? ChatMessageType.IMAGE : ChatMessageType.FILE,
+          url: filePath,
+          to: privateChatUser ? privateChatUser.toString() : groupID,
+          chatType: privateChatUser
+            ? SDKChatType.SINGLE_CHAT
+            : SDKChatType.GROUP_CHAT,
+          from: data.uid.toString(),
+          fileName: result[0].name,
+          ext: {
+            file_length: result[0].size,
+            file_ext: uploadedFileType.split('/')[1],
+            file_name: result[0].name,
+            file_url: filePath,
+            from_platform: 'native',
+          },
+        };
+        console.warn('chatOPtion', option);
+        const onProgress = (localMsgId: string, progress: number) => {
+          // always gives 100 , its in WIP for agoar-chat-native-sdk
+          console.warn('upload in progress', progress);
+          setUploadStatus(UploadStatus.IN_PROGRESS);
+        };
+        const onError = (localMsgId: string, error: ChatError) => {
+          console.warn('upload on error', error);
+          setUploadStatus(UploadStatus.FAILURE);
+        };
+        const onSuccess = (message: ExtendedChatMessage) => {
+          console.warn('upload on success', message);
+          const messageData = {
+            msg: '',
+            createdTimestamp: message.localTime,
+            msgId: message.msgId,
+            isDeleted: false,
+            type: message.body.type,
+            thumb: isAndroid()
+              ? 'file://' + message.body?.localPath
+              : message.body?.localPath,
+            url: message.body?.remotePath,
+            ext: message.attributes?.file_ext,
+            fileName: message.attributes?.file_name,
+          };
+          console.warn('message data', messageData);
+
+          // this is local user messages
+          if (message.chatType === ChatMessageChatType.PeerChat) {
+            addMessageToPrivateStore(Number(message.to), messageData, true);
+          } else {
+            addMessageToStore(Number(message.from), messageData);
+          }
+
+          setUploadStatus(UploadStatus.SUCCESS);
+        };
+        sendChatSDKMessage(option, {onProgress, onError, onSuccess});
+      } else {
+        Toast.show({
+          leadingIconName: 'chat_attachment_unknown',
+          type: 'info',
+          text1: toastHeadingType,
+          text2: errorSubHeadingType(uploadedFileType),
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+      }
+
+      // const allowedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', '.zip', '.txt', '.doc', '.pdf'];
+      // if (!allowedFormats.some(format => result[0].type === format || result[0].name.endsWith(format))) {
+      //   Toast.show({
+      //     leadingIconName: 'alert',
+      //     type: 'error',
+      //     text2: 'Inavlid upload format',
+      //     text1: 'Upload Failed',
+      //     visibilityTime: 3000,
+      //   });
+      // }
+    } catch (err) {
+      if (DocumentPicker.isCancel(err)) {
+        // User cancelled the picker
+      } else {
+        console.error(err);
+      }
+    }
+  };
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <View>
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 24,
+        }}
+        iconProps={{
+          iconType: 'plain',
+          iconContainerStyle: {
+            padding: 4,
+          },
+          iconSize: 24,
+          name: 'chat_attachment',
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+        }}
+        onPress={onPress}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});