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

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

@@ -0,0 +1,400 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ActivityIndicator,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import Popup from '../../atoms/Popup';
+import UserAvatar from '../../atoms/UserAvatar';
+import ThemeConfig from '../../theme';
+import {timeAgo} from '../../../src/utils';
+import IconButton from '../../atoms/IconButton';
+import {useChatConfigure} from '../../components/chat/chatConfigure';
+import {
+  SDKChatType,
+  useChatMessages,
+} from '../../components/chat-messages/useChatMessages';
+import Clipboard from '../../subComponents/Clipboard';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+import {useChatUIControls} from '../../components/chat-ui/useChatUIControls';
+import {IconsInterface} from '../../atoms/CustomIcon';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import InlinePopup from '../../atoms/InlinePopup';
+import {calculatePosition, trimText} from '../../utils/common';
+import {useString} from '../../utils/useString';
+import {
+  chatMessageDeleteConfirmBtnText,
+  chatPublicMessageDeletePopupText,
+  chatPrivateMessageDeletePopupText,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+import {useContent} from 'customization-api';
+
+interface ImagePopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  imageUrl: string;
+  fileName: string;
+  timestamp: string;
+  senderName: string;
+  msgId: string;
+  isLocal: boolean;
+}
+
+const ImagePopup = (props: ImagePopupProps) => {
+  const {
+    modalVisible,
+    setModalVisible,
+    imageUrl,
+    fileName,
+    timestamp,
+    senderName,
+    msgId,
+    isLocal,
+  } = props;
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [showDeleteMessageModal, setShowDeleteMessageModal] =
+    React.useState(false);
+  const {privateChatUser} = useChatUIControls();
+  const {
+    data: {isHost, chat},
+  } = useRoomInfo();
+  const {downloadAttachment, deleteAttachment} = useChatConfigure();
+  const {removeMessageFromPrivateStore, removeMessageFromStore} =
+    useChatMessages();
+
+  const groupID = chat.group_id;
+  const chatType = privateChatUser
+    ? SDKChatType.SINGLE_CHAT
+    : SDKChatType.GROUP_CHAT;
+  const recallFromUser = privateChatUser ? privateChatUser : groupID;
+  const [modalPosition, setModalPosition] = React.useState({});
+  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const btnRef = React.useRef<View>(null);
+  const {defaultContent} = useContent();
+
+  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),
+    );
+  }
+
+  React.useEffect(() => {
+    //getting btnRef x,y
+    if (!isLoading) {
+      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);
+        },
+      );
+    }
+  }, [isLoading]);
+
+  const handleImageLoad = () => {
+    setIsLoading(false);
+  };
+
+  const CloseIcon = () => {
+    return (
+      <View>
+        <IconButton
+          hoverEffect={true}
+          hoverEffectStyle={{
+            backgroundColor: $config.ICON_BG_COLOR,
+            borderRadius: 20,
+          }}
+          iconProps={{
+            iconType: 'plain',
+            iconSize: 24,
+            iconContainerStyle: {
+              padding: 0,
+            },
+            name: 'close',
+            tintColor: $config.SECONDARY_ACTION_COLOR,
+          }}
+          onPress={() => {
+            setModalVisible(false);
+          }}
+        />
+      </View>
+    );
+  };
+
+  const Loader = () => {
+    return (
+      <View style={styles.spinnerContainer}>
+        <ActivityIndicator
+          size="large"
+          color={$config.PRIMARY_ACTION_BRAND_COLOR}
+        />
+      </View>
+    );
+  };
+
+  const ControlsMenu = () => {
+    const menuItems = [
+      {
+        icon: 'delete',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        iconSize: 24,
+        onPress: () => {
+          if (isLocal) {
+            setShowDeleteMessageModal(true);
+          } else {
+            if (chatType === SDKChatType.SINGLE_CHAT) {
+              removeMessageFromPrivateStore(msgId, isLocal);
+            }
+            if (chatType === SDKChatType.GROUP_CHAT) {
+              removeMessageFromStore(msgId, isLocal);
+            }
+          }
+        },
+      },
+      {
+        icon: 'download',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        iconSize: 24,
+        onPress: () => {
+          downloadAttachment(fileName, imageUrl);
+        },
+      },
+      {
+        icon: 'close',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        iconSize: 20,
+        onPress: () => {
+          setModalVisible(false);
+        },
+      },
+    ];
+    return !isLoading ? (
+      <View style={styles.controlsContainer}>
+        {menuItems.map((obj, index) => (
+          <View key={obj.icon} ref={obj.icon === 'delete' ? btnRef : null}>
+            <IconButton
+              hoverEffect={false}
+              hoverEffectStyle={{
+                backgroundColor:
+                  $config.ICON_BG_COLOR + hexadecimalTransparency['50%'],
+              }}
+              iconProps={{
+                iconType: 'plain',
+                iconContainerStyle: {
+                  backgroundColor: 'transparent',
+                  paddingHorizontal: 8,
+                  borderRightWidth: index === menuItems.length - 1 ? 0 : 1,
+                  borderRightColor:
+                    $config.SECONDARY_ACTION_COLOR +
+                    hexadecimalTransparency['20%'],
+                },
+                iconSize: obj.iconSize,
+                name: obj.icon as keyof IconsInterface,
+                tintColor: obj.iconColor,
+              }}
+              onPress={obj.onPress}
+            />
+          </View>
+        ))}
+      </View>
+    ) : (
+      <></>
+    );
+  };
+
+  // const HeaderComponent = () => {
+  //   return (
+  //     <View style={styles.headerContainer}>
+  //       <View style={styles.header}>
+  //         <UserAvatar
+  //           name={senderName}
+  //           containerStyle={styles.avatarContainerStyle}
+  //           textStyle={styles.avatarTextStyle}
+  //         />
+  //         <View>
+  //           <Text
+  //             style={styles.nameText}
+  //             numberOfLines={1}
+  //             ellipsizeMode={'tail'}>
+  //             {senderName}
+  //           </Text>
+  //           <View style={styles.subTextContainer}>
+  //             <Text style={styles.subText} ellipsizeMode={'tail'}>
+  //               {timeAgo(parseInt(timestamp))} - {fileName}
+  //             </Text>
+  //           </View>
+  //         </View>
+  //       </View>
+  //       <CloseIcon />
+  //     </View>
+  //   );
+  // };
+  return (
+    <Popup
+      modalVisible={modalVisible}
+      setModalVisible={setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}
+      bodyContainerStyle={styles.bodyContainer}
+      // headerComponent={<HeaderComponent />}
+    >
+      {isLoading ? <Loader /> : null}
+      <Image
+        source={{uri: imageUrl}}
+        style={styles.image}
+        onLoad={handleImageLoad}
+      />
+      {isLocal ? (
+        <InlinePopup
+          actionMenuVisible={showDeleteMessageModal && isPosCalculated}
+          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);
+            setModalVisible(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      <ControlsMenu />
+    </Popup>
+  );
+};
+
+/* 
+
+*/
+
+export default ImagePopup;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    padding: 12,
+    width: '100%',
+    maxWidth: 1376,
+    marginHorizontal: 32,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: 1,
+  },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingTop: 4,
+    paddingBottom: 16,
+  },
+
+  image: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  spinnerContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  bodyContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  closeBtnContainer: {
+    position: 'absolute',
+    top: -24,
+    right: -24,
+  },
+  avatarContainerStyle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+  },
+  avatarTextStyle: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 12,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+  nameText: {
+    fontWeight: '700',
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: 20,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    flexDirection: 'row',
+    color: $config.FONT_COLOR,
+    textAlign: 'left',
+  },
+  subText: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 16,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    flexDirection: 'row',
+    color: $config.FONT_COLOR,
+  },
+  subTextContainer: {
+    flexDirection: 'row',
+  },
+  controlsContainer: {
+    backgroundColor:
+      $config.CARD_LAYER_2_COLOR + hexadecimalTransparency['50%'],
+    flexDirection: 'row',
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    right: 16,
+    top: 12,
+    borderRadius: 4,
+    paddingVertical: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/template/src/subComponents/livestream/ApprovedLiveStreamControlsView.tsx

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {View} from 'react-native';
 import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 
 const ApprovedLiveStreamControlsView = (props: {
   uid: number;
@@ -13,7 +13,7 @@ const ApprovedLiveStreamControlsView = (props: {
 
   if (
     raiseHandList[uid]?.raised === RaiseHandValue.TRUE &&
-    raiseHandList[uid]?.role == ClientRole.Broadcaster
+    raiseHandList[uid]?.role == ClientRoleType.ClientRoleBroadcaster
   ) {
     return (
       <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -1,29 +1,26 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleSheet} from 'react-native';
 import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
 import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
-import ParticipantName from '../../components/participants/ParticipantName';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
 import {useString} from '../../utils/useString';
-import {ClientRole} from '../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {ClientRoleType} from '../../../agora-rn-uikit';
+import {useContent} from 'customization-api';
+import UserAvatar from '../../atoms/UserAvatar';
+import Spacer from '../../atoms/Spacer';
+import {
+  peoplePanelStreamingRequestSectionHeader,
+  peoplePanelUserNotFoundLabel,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
-  //commented for v1 release
-  // const noLiveStreamingRequestsLabel = useString(
-  //   'raisedHandsListPlaceholder',
-  // )();
-  // const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  // const noUserFoundLabel = useString('noUserFoundLabel')();
-  // const raisedHandsListTitleLabel = useString('raisedHandsListTitleLabel')();
-  const noLiveStreamingRequestsLabel = 'No streaming request(s)';
-  const remoteUserDefaultLabel = 'User';
-  const noUserFoundLabel = 'User not found';
-  const raisedHandsListTitleLabel = 'Streaming Request';
-  const {p_style} = props;
-  const {renderList} = useRender();
+  const noUserFoundLabel = useString(peoplePanelUserNotFoundLabel)();
+  const raisedHandsListTitleLabel = useString(
+    peoplePanelStreamingRequestSectionHeader,
+  )();
+  const {defaultContent} = useContent();
   const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
   const [activeLiveStreamRequests, setActiveLiveStreamRequests] =
@@ -34,7 +31,8 @@ const CurrentLiveStreamRequestsView = (props: any) => {
       filterObject(
         raiseHandList,
         ([k, v]) =>
-          v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+          v?.raised === RaiseHandValue.TRUE &&
+          v?.role == ClientRoleType.ClientRoleAudience,
       ),
     );
   }, [raiseHandList]);
@@ -45,40 +43,104 @@ const CurrentLiveStreamRequestsView = (props: any) => {
       setLastCheckedRequestTimestamp(new Date().getTime());
     };
   }, []);
-
+  const containerStyle = {
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  };
+  const textStyle = {
+    fontSize: 12,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  };
+  const [showRequestSection, setShowRequestSection] = useState(true);
   return (
     <>
-      <ParticipantSectionTitle
-        title={raisedHandsListTitleLabel + ' '}
-        count={Object.keys(activeLiveStreamRequests).length}
-      />
-      <View style={p_style.participantContainer}>
-        {Object.keys(raiseHandList).length == 0 ||
-        Object.keys(activeLiveStreamRequests).length == 0 ? (
-          <Text style={p_style.infoText}>{noLiveStreamingRequestsLabel}</Text>
-        ) : (
-          Object.keys(activeLiveStreamRequests).map(
-            (userUID: any, index: number) =>
-              renderList[userUID] ? (
-                <View style={p_style.participantRow} key={index}>
-                  <ParticipantName
-                    value={renderList[userUID]?.name || remoteUserDefaultLabel}
-                  />
-                  <View style={p_style.participantActionContainer}>
-                    <RemoteLiveStreamRequestApprove uid={userUID} />
-                    <RemoteLiveStreamRequestReject uid={userUID} />
+      {Object.keys(raiseHandList).length == 0 ||
+      Object.keys(activeLiveStreamRequests).length == 0 ? (
+        <></>
+      ) : (
+        <>
+          <ParticipantSectionTitle
+            title={raisedHandsListTitleLabel + ' '}
+            count={Object.keys(activeLiveStreamRequests).length}
+            isOpen={showRequestSection}
+            onPress={() => setShowRequestSection(!showRequestSection)}
+          />
+          {showRequestSection ? (
+            Object.keys(activeLiveStreamRequests).map(
+              (userUID: any, index: number) =>
+                defaultContent[userUID] ? (
+                  <View style={styles.container}>
+                    <View style={styles.userInfoContainer}>
+                      <UserAvatar
+                        name={defaultContent[userUID].name}
+                        containerStyle={containerStyle}
+                        textStyle={textStyle}
+                      />
+                      <View style={{alignSelf: 'center', flex: 1}}>
+                        <Text
+                          style={styles.participantNameText}
+                          numberOfLines={1}>
+                          {defaultContent[userUID].name}
+                        </Text>
+                      </View>
+                    </View>
+                    <Spacer size={24} horizontal={true} />
+                    <View style={styles.btnContainer}>
+                      <RemoteLiveStreamRequestReject
+                        uid={userUID}
+                        toastId={raiseHandList[userUID].ts}
+                      />
+                      <Spacer size={8} horizontal={true} />
+                      <RemoteLiveStreamRequestApprove
+                        uid={userUID}
+                        toastId={raiseHandList[userUID].ts}
+                      />
+                    </View>
+                  </View>
+                ) : (
+                  <View style={{alignSelf: 'center'}} key={index}>
+                    <Text>{noUserFoundLabel}</Text>
                   </View>
-                </View>
-              ) : (
-                <View style={p_style.participantRow} key={index}>
-                  <ParticipantName value={noUserFoundLabel} />
-                </View>
-              ),
-          )
-        )}
-      </View>
+                ),
+            )
+          ) : (
+            <Spacer size={1} />
+          )}
+        </>
+      )}
     </>
   );
 };
+const styles = StyleSheet.create({
+  btnContainer: {
+    //  flex: 1,
+    flexDirection: 'row',
+    //  justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    justifyContent: 'space-between',
+  },
+  userInfoContainer: {
+    flex: 0.7,
+    flexDirection: 'row',
+  },
+  participantNameText: {
+    fontWeight: '400',
+    fontSize: 12,
+    fontFamily: 'Source Sans Pro',
+    flexDirection: 'row',
+    color: $config.FONT_COLOR,
+    textAlign: 'left',
+    marginHorizontal: 8,
+  },
+});
 
 export default CurrentLiveStreamRequestsView;