@amityco/react-native-social-uikit 4.0.1-fd53cf63.0 → 4.0.2-232eeace.0

package/src/social/components/Social/CommentListItem/CommentListItem.tsx

@@ -44,7 +44,7 @@ import ReplyCommentList from '../../legacy/Social/ReplyCommentList';
 import AmityReactionListComponent from '../../../features/reaction/components/List';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hooks/useTimeDifference';
-import { useGlobalBehavior } from '../../../hooks/useGlobalBehavior';
+import { useInteractionBehavior } from '../../../hooks/useInteractionBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -291,13 +291,19 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const { handleInteraction } = useInteractionBehavior();
 
   const onPressLike = () =>
-    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+    handleInteraction({
+      defaultBehavior: addReactionToComment,
+      isJoined: !disabledInteraction,
+    });
 
   const onPressReply = () =>
-    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+    handleInteraction({
+      defaultBehavior: onHandleReply,
+      isJoined: !disabledInteraction,
+    });
 
   const onPressCommentReaction = () => {
     setIsReactionListVisible(true);
@@ -343,59 +349,55 @@ const CommentListItem = ({
               />
             )}
           </View>
-          {!disabledInteraction && (
-            <View style={styles.actionSection}>
-              <View style={styles.rowContainer}>
-                <View style={styles.timeRow}>
+          <View style={styles.actionSection}>
+            <View style={styles.rowContainer}>
+              <View style={styles.timeRow}>
+                <Typography.Caption style={styles.headerTextTime}>
+                  {timeDifference}
+                </Typography.Caption>
+                {(editedAt !== createdAt || isEditComment) && (
                   <Typography.Caption style={styles.headerTextTime}>
-                    {timeDifference}
+                    {' '}
+                    (edited)
                   </Typography.Caption>
-                  {(editedAt !== createdAt || isEditComment) && (
-                    <Typography.Caption style={styles.headerTextTime}>
-                      {' '}
-                      (edited)
-                    </Typography.Caption>
-                  )}
-                </View>
-                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
-                  <Typography.CaptionBold
-                    style={isLike ? styles.likedText : styles.btnText}
-                  >
-                    Like
-                  </Typography.CaptionBold>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={disabledComment ? undefined : onPressReply}
-                  style={styles.likeBtn}
-                >
-                  <Typography.CaptionBold style={styles.btnText}>
-                    Reply
-                  </Typography.CaptionBold>
-                </TouchableOpacity>
-                {!isVisitorOrBot && (
-                  <TouchableOpacity onPress={openModal}>
-                    <SvgXml
-                      xml={threeDots(theme.colors.baseShade2)}
-                      width="20"
-                      height="20"
-                    />
-                  </TouchableOpacity>
                 )}
               </View>
-
-              {likeReaction > 0 && (
-                <TouchableOpacity
-                  onPress={onPressCommentReaction}
-                  style={styles.likeBtn}
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+                <Typography.CaptionBold
+                  style={isLike ? styles.likedText : styles.btnText}
                 >
-                  <Typography.Caption style={styles.btnText}>
-                    {likeReaction}
-                  </Typography.Caption>
-                  <SvgXml xml={likeCircle} width="20" height="20" />
-                </TouchableOpacity>
-              )}
+                  Like
+                </Typography.CaptionBold>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={disabledComment ? undefined : onPressReply}
+                style={styles.likeBtn}
+              >
+                <Typography.CaptionBold style={styles.btnText}>
+                  Reply
+                </Typography.CaptionBold>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={openModal}>
+                <SvgXml
+                  xml={threeDots(theme.colors.baseShade2)}
+                  width="20"
+                  height="20"
+                />
+              </TouchableOpacity>
             </View>
-          )}
+
+            {likeReaction > 0 && (
+              <TouchableOpacity
+                onPress={onPressCommentReaction}
+                style={styles.likeBtn}
+              >
+                <Typography.Caption style={styles.btnText}>
+                  {likeReaction}
+                </Typography.Caption>
+                <SvgXml xml={likeCircle} width="20" height="20" />
+              </TouchableOpacity>
+            )}
+          </View>
 
           {previewReplyCommentList.length > 0 && !isOpenReply && (
             <ReplyCommentList
@@ -431,10 +433,10 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
+              <Text style={styles.viewMoreText}>
                 View {childrenNumber}{' '}
                 {childrenNumber === 1 ? 'reply' : 'replies'}
-              </Typography.CaptionBold>
+              </Text>
             </TouchableOpacity>
           )}
 
@@ -444,9 +446,7 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
-                View more replies
-              </Typography.CaptionBold>
+              <Text style={styles.viewMoreText}>View more replies</Text>
             </TouchableOpacity>
           )}
         </View>
@@ -500,7 +500,13 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleInteraction({
+                    defaultBehavior: reportCommentObject,
+                    allowNonMember: true,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/components/Social/CommentListItem/styles.ts

@@ -71,12 +71,13 @@ export const useStyles = () => {
       paddingHorizontal: 8,
       marginTop: 12,
       flexDirection: 'row',
-      justifyContent: 'center',
       alignItems: 'center',
       alignSelf: 'flex-start',
     },
     viewMoreText: {
+      fontWeight: '600',
       color: theme.colors.secondaryShade1,
+      paddingHorizontal: 4,
     },
     commentText: {
       fontSize: 15,

package/src/social/components/legacy/Social/ReplyCommentList/index.tsx

@@ -157,7 +157,7 @@ export default function ReplyCommentList({
     }
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const { handleGlobalBehavior } = useGlobalBehavior();
 
   const onPressLike = () =>
     handleGlobalBehavior({ defaultBehavior: addReactionToComment });
@@ -283,15 +283,13 @@ export default function ReplyCommentList({
                 </Typography.CaptionBold>
               </TouchableOpacity>
 
-              {!isVisitorOrBot && (
-                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
-              )}
+              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                <SvgXml
+                  xml={threeDots(theme.colors.base)}
+                  width="20"
+                  height="16"
+                />
+              </TouchableOpacity>
             </View>
             {likeReaction > 0 && (
               <TouchableOpacity
@@ -366,7 +364,12 @@ export default function ReplyCommentList({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/elements/CommunityCreatePostButton/CommunityCreatePostButton.tsx

@@ -16,9 +16,15 @@ function CommunityCreatePostButton({
   ...props
 }: CommunityCreatePostButtonProps) {
   const elementId = ElementID.community_create_post_button;
-  const { themeStyles } = useAmityElement({ pageId, componentId, elementId });
+  const { themeStyles, isExcluded } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
   const styles = useStyles(themeStyles);
 
+  if (isExcluded) return null;
+
   return (
     <TouchableOpacity
       hitSlop={0.8}

package/src/social/features/comment/components/PostComment/CommentListItem/CommentListItem.tsx

@@ -315,7 +315,7 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const { handleGlobalBehavior } = useGlobalBehavior();
 
   const onPressLike = () =>
     handleGlobalBehavior({ defaultBehavior: addReactionToComment });
@@ -415,18 +415,13 @@ const CommentListItem = ({
                 <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
                   <Text style={styles.btnText}>Reply</Text>
                 </TouchableOpacity>
-                {!isVisitorOrBot && (
-                  <TouchableOpacity
-                    onPress={openModal}
-                    style={styles.threeDots}
-                  >
-                    <SvgXml
-                      xml={threeDots(theme.colors.base)}
-                      width="20"
-                      height="16"
-                    />
-                  </TouchableOpacity>
-                )}
+                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.base)}
+                    width="20"
+                    height="16"
+                  />
+                </TouchableOpacity>
               </View>
 
               {likeReaction > 0 && (
@@ -539,7 +534,12 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/features/comment/components/PostComment/ReplyCommentList/index.tsx

@@ -146,7 +146,7 @@ const ReplyCommentList = ({
     }
   };
 
-  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const { handleGlobalBehavior } = useGlobalBehavior();
 
   const onPressLike = () =>
     handleGlobalBehavior({ defaultBehavior: addReactionToComment });
@@ -304,15 +304,13 @@ const ReplyCommentList = ({
                   {!isLike ? 'Like' : 'Liked'}
                 </Text>
               </TouchableOpacity>
-              {!isVisitorOrBot && (
-                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
-              )}
+              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                <SvgXml
+                  xml={threeDots(theme.colors.base)}
+                  width="20"
+                  height="16"
+                />
+              </TouchableOpacity>
             </View>
 
             {likeReaction > 0 && (
@@ -348,6 +346,7 @@ const ReplyCommentList = ({
                 styles.twoOptions,
             ]}
           >
+            <View style={styles.handleBar} />
             {user?.userId === (client as Amity.Client).userId ? (
               <View>
                 <TouchableOpacity
@@ -375,7 +374,12 @@ const ReplyCommentList = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/features/comment/components/PostComment/ReplyCommentList/styles.ts

@@ -6,6 +6,14 @@ export const useStyles = () => {
   const theme = useTheme() as MyMD3Theme;
 
   const styles = StyleSheet.create({
+    handleBar: {
+      alignSelf: 'center',
+      width: 36,
+      backgroundColor: theme.colors.baseShade4,
+      height: 5,
+      marginVertical: 10,
+      borderRadius: 10,
+    },
     commentWrap: {
       backgroundColor: theme.colors.background,
       paddingHorizontal: 12,

package/src/social/features/livestream/Player/Player.tsx

@@ -83,7 +83,7 @@ function AmityLiveStreamPlayerPage() {
   };
   useRoomSubscription({ room });
 
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const videoRef = useRef<any>(null);
   const isStreamEnding = useRef(false);
 
@@ -127,7 +127,7 @@ function AmityLiveStreamPlayerPage() {
   }, []);
 
   useEffect(() => {
-    if (!room?.status) return;
+    if (!room?.status || isVisitorOrBot) return;
 
     const shouldEnd =
       room.status === RoomStatus.ended ||
@@ -149,13 +149,14 @@ function AmityLiveStreamPlayerPage() {
         setVideoKey((prev) => prev + 1);
       }, 50);
     }
-  }, [room?.status, wasLive]);
+  }, [room?.status, wasLive, isVisitorOrBot]);
 
   useEffect(() => {
+    if (isVisitorOrBot) return;
     if (room?.status === RoomStatus.terminated) {
       navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-  }, [room?.status, navigation]);
+  }, [room?.status, navigation, isVisitorOrBot]);
 
   const showControlsTemporarily = useCallback(() => {
     setShowControls(true);
@@ -171,9 +172,10 @@ function AmityLiveStreamPlayerPage() {
   }, [showControlsTemporarily]);
 
   const shouldShowEndThumbnail =
-    room?.status === RoomStatus.ended ||
-    (room?.status === RoomStatus.recorded && wasLive) ||
-    (room as any)?.user?.isGlobalBan;
+    !isVisitorOrBot &&
+    (room?.status === RoomStatus.ended ||
+      (room?.status === RoomStatus.recorded && wasLive) ||
+      (room as any)?.user?.isGlobalBan);
 
   if (!room || error) {
     return (
@@ -246,6 +248,7 @@ function AmityLiveStreamPlayerPage() {
                     setIsPaused(false);
                   }
                 }}
+                onEnd={() => setIsPaused(true)}
               />
             )}
 

package/src/social/features/post/components/Content/Content.tsx

@@ -35,7 +35,6 @@ import { PostMenu } from '../../../../components/PostMenu';
 import PinBadge from '../../../../elements/PinBadge';
 import AnnouncementBadge from '../../../../elements/AnnouncementBadge';
 import { Typography } from '../../../../../core/components/Typography/Typography';
-import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmityPostContentComponentProps = {
   post: Amity.Post;
@@ -75,7 +74,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     componentId: componentId,
   });
   const styles = useStyles(themeStyles);
-  const { isVisitorOrBot } = useAuth();
   const [textPost, setTextPost] = useState<string>('');
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
   const navigation =
@@ -294,11 +292,10 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
             category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
             <PinBadge componentId={ComponentID.post_content} />
           )}
-          {!isVisitorOrBot &&
-            AmityPostContentComponentStyle ===
-              AmityPostContentComponentStyleEnum.feed && (
-              <PostMenu post={post} pageId={pageId} componentId={componentId} />
-            )}
+          {AmityPostContentComponentStyle ===
+            AmityPostContentComponentStyleEnum.feed && (
+            <PostMenu post={post} pageId={pageId} componentId={componentId} />
+          )}
         </Pressable>
         <View>
           <View style={styles.bodySection}>

package/src/social/features/story/Draft/Draft.tsx

@@ -29,6 +29,7 @@ import { useFile } from '../../../hooks/useFile';
 import { getMediaTypeFromUrl } from '../../../../core/utils/url';
 import { LoadingOverlay } from '../../../components/legacy/LoadingOverlay';
 import mime from 'mime';
+import { appendFileToFormData } from '../../../../core/utils/fileUpload';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -119,11 +120,14 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
     const isImage = type === StoryType.image;
     const mimeType =
       mime.getType(mediaType.uri) ?? (isImage ? 'image/jpeg' : 'video/mp4');
-    formData.append('files', {
-      uri: mediaType.uri,
-      name: mediaType.name,
-      type: mimeType,
-    } as unknown as Blob);
+
+    await appendFileToFormData(
+      formData,
+      'files',
+      mediaType.uri,
+      mediaType.name,
+      mimeType
+    );
 
     try {
       setLoading(true);

package/src/social/features/story/View/components/AmityViewStoryItem.tsx

@@ -649,6 +649,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               withAvatar={true}
             />
           </KeyboardAvoidingView>
+          <GlobalToast />
         </Modal>
       )}
       <BottomSheet

package/src/social/features/user/Profile/components/Header/hooks/useHeader.ts

@@ -112,24 +112,28 @@ export function useHeader(user?: Amity.User) {
 
   const navigateToRelationship = (tab: UserRelationshipTab) => {
     if (!user?.userId) return;
-    if (!isMyProfile && isPrivateNetwork && !isFollowing) {
-      showToast({
-        type: 'informative',
-        message: TOAST.USER.RELATIONSHIP.FOLLOW_TO_INTERACT,
-      });
-      return;
-    }
-    if (AmityUserProfileHeaderComponentBehavior?.goToUserRelationshipPage) {
-      AmityUserProfileHeaderComponentBehavior.goToUserRelationshipPage({
-        userId: user.userId,
-        selectedTab: tab,
-      });
-    } else {
-      navigation.push('UserRelationship', {
-        userId: user.userId,
-        selectedTab: tab,
-      });
-    }
+    handleGlobalBehavior({
+      defaultBehavior: () => {
+        if (!isMyProfile && isPrivateNetwork && !isFollowing) {
+          showToast({
+            type: 'informative',
+            message: TOAST.USER.RELATIONSHIP.FOLLOW_TO_INTERACT,
+          });
+          return;
+        }
+        if (AmityUserProfileHeaderComponentBehavior?.goToUserRelationshipPage) {
+          AmityUserProfileHeaderComponentBehavior.goToUserRelationshipPage({
+            userId: user.userId,
+            selectedTab: tab,
+          });
+        } else {
+          navigation.push('UserRelationship', {
+            userId: user.userId,
+            selectedTab: tab,
+          });
+        }
+      },
+    });
   };
 
   return {

package/src/social/features/user/Profile/components/Header/styles.ts

@@ -51,6 +51,8 @@ export const useStyles = (
     },
     hiddenText: {
       position: 'absolute',
+      left: 0,
+      right: 0,
       opacity: 0,
     },
     seeMore: {

package/src/social/features/user/Profile/elements/Menu/hooks/useMenu.ts

@@ -17,6 +17,7 @@ import { useUserFlaggedByMeQuery } from '../../../../../../hooks/queries/useFlag
 import { useBlockUser } from '../../../../../../hooks/queries/useBlockUser';
 import { useFollowInfo } from '../../../../../../hooks/objects';
 import { useBehaviour } from '../../../../../../providers/BehaviourProvider';
+import { useGlobalBehavior } from '../../../../../../hooks';
 
 type UseMenuParams = {
   userId?: string;
@@ -28,6 +29,7 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
 
   const { client } = useAuth();
   const { getShareLink } = useShareableLink();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const { AmityUserProfilePageBehavior } = useBehaviour();
   const { accessibilityId: menuButtonId } = useAmityElement({
     pageId,
@@ -97,8 +99,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       testID: 'report-user-button',
       accessibilityLabel: 'Report user',
       onPress: () => {
-        if (userId) reportUser(userId);
         closeBottomSheet();
+        handleGlobalBehavior({
+          defaultBehavior: () => userId && reportUser(userId),
+        });
       },
     },
     {
@@ -108,8 +112,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       testID: 'unreport-user-button',
       accessibilityLabel: 'Unreport user',
       onPress: () => {
-        if (userId) unreportUser(userId);
         closeBottomSheet();
+        handleGlobalBehavior({
+          defaultBehavior: () => userId && unreportUser(userId),
+        });
       },
     },
     {
@@ -120,7 +126,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       accessibilityLabel: 'Block user',
       onPress: () => {
         closeBottomSheet();
-        if (userId) blockUser(userId, displayName ?? userId);
+        handleGlobalBehavior({
+          defaultBehavior: () =>
+            userId && blockUser(userId, displayName ?? userId),
+        });
       },
     },
     {
@@ -131,7 +140,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       accessibilityLabel: 'Unblock user',
       onPress: () => {
         closeBottomSheet();
-        if (userId) unBlockUser(userId, displayName ?? userId);
+        handleGlobalBehavior({
+          defaultBehavior: () =>
+            userId && unBlockUser(userId, displayName ?? userId),
+        });
       },
     },
   ].filter((action) => action.visible);

package/src/social/screens/CommunityProfile/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import {
   useCommunity,
   isModerator,
   useUser,
+  useGlobalBehavior,
 } from '../../../../hooks';
 import { useStyles } from './styles';
 import { CommunityCover } from '../../elements/CommunityCover/CommunityCover';
@@ -50,6 +51,7 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
   const client = Client.getActiveClient();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const componentId = ComponentID.community_header;
   const { community } = useCommunity(communityId);
   const { posts: pendingPosts } = usePosts({
@@ -153,8 +155,12 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
             community={community}
             style={styles.infoWrap}
             onPress={() => {
-              navigation.navigate('CommunityMembership', {
-                community: community,
+              handleGlobalBehavior({
+                defaultBehavior: () => {
+                  navigation.navigate('CommunityMembership', {
+                    community: community,
+                  });
+                },
               });
             }}
           />