@amityco/react-native-social-uikit 4.0.0-dc7783d.0 → 4.0.0-e24bae8.0

package/src/v4/PublicApi/Components/AmityPostCommentComponent/ReplyCommentList/styles.ts

@@ -85,8 +85,8 @@ export const useStyles = () => {
     },
     likeBtn: {
       flexDirection: 'row',
-      paddingRight: 6,
-      paddingTop: 4,
+      marginRight: 8,
+      alignItems: 'center',
     },
     actionSection: {
       flex: 1,
@@ -97,18 +97,15 @@ export const useStyles = () => {
     },
     likedText: {
       color: theme.colors.primary,
-      fontSize: 15,
+      fontSize: 13,
       fontWeight: '600',
-      marginHorizontal: 4,
     },
     btnText: {
       color: theme.colors.baseShade2,
-      fontSize: 15,
+      fontSize: 13,
       fontWeight: '600',
-      marginHorizontal: 4,
     },
     threeDots: {
-      padding: 5,
       opacity: 0.5,
     },
     modalContainer: {
@@ -158,6 +155,7 @@ export const useStyles = () => {
     rowContainer: {
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 8,
     },
   });
 

package/src/v4/PublicApi/Components/AmityPostContentComponent/AmityPostContentComponent.tsx

@@ -34,7 +34,7 @@ import AnnouncementBadge from '../../../../v4/elements/AnnouncementBadge';
 import { Typography } from '../../../../v4/component/Typography/Typography';
 
 type AmityPostContentComponentProps = {
-  post: Amity.Post & { structureType?: string };
+  post: Amity.Post;
   pageId?: PageID;
   AmityPostContentComponentStyle?: AmityPostContentComponentStyleEnum;
   isCommunityNameShown?: boolean;
@@ -158,8 +158,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     });
   };
 
-  if (post?.structureType === 'liveStream') return null;
-
   return (
     <View>
       {(category === AmityPostCategory.ANNOUNCEMENT ||
@@ -182,6 +180,7 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
               pageID={pageId}
               elementID={ElementID.WildCardElement}
               componentID={componentId}
+              avatarCustomUrl={creator?.avatarCustomUrl}
             />
 
             <View style={styles.fillSpace}>

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/DetailStyle.tsx

@@ -46,7 +46,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
         );
         setPostData(data);
         setTotalReactions(data.reactionsCount);
-        setIsLike(data.myReactions?.length > 0);
+        setIsLike(data?.myReactions?.length > 0);
       }
     });
     return () => {

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/FeedStyle.tsx

@@ -54,7 +54,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
       if (!error && !loading) {
         setPostData(data);
         setTotalReactions(data.reactionsCount);
-        setIsLike(data.myReactions.length > 0);
+        setIsLike(data.myReactions?.length > 0);
       }
     });
     return () => unsubscribeRef?.current && unsubscribeRef?.current();

package/src/v4/PublicApi/Components/AmityReactionListComponent/AmityReactionListComponent.tsx

@@ -74,10 +74,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         selectedReactionIndex === 0
           ? allReactionList
           : selectedReactionIndex === 1
-            ? likeReactionList
-            : selectedReactionIndex === 2
-              ? loveReactionList
-              : null;
+          ? likeReactionList
+          : selectedReactionIndex === 2
+          ? loveReactionList
+          : null;
       if (currentUsers?.length > 0) {
         const userList = currentUsers.map((item) => item.userId);
         try {
@@ -95,7 +95,7 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
       }
     })();
 
-    return () => { };
+    return () => {};
   }, [
     allReactionList,
     likeReactionList,
@@ -231,10 +231,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         {loading
           ? renderContentLoading()
           : hasError
-            ? errorContent()
-            : reactors
-              ? renderReactionList()
-              : null}
+          ? errorContent()
+          : reactors
+          ? renderReactionList()
+          : null}
       </View>
     </Modal>
   );

package/src/v4/PublicApi/Elements/ButtonWithIconElement/styles.ts

@@ -6,6 +6,7 @@ export const useStyle = (themeStyle: MyMD3Theme) => {
     container: {
       display: 'flex',
       flexDirection: 'row',
+      alignItems: 'center',
       width: 200,
       paddingTop: 12,
       paddingBottom: 12,
@@ -13,8 +14,8 @@ export const useStyle = (themeStyle: MyMD3Theme) => {
       gap: 12,
     },
     icon: {
-      width: 20,
-      height: 20,
+      width: 24,
+      height: 24,
       tintColor: themeStyle.colors.base,
     },
     label: {

package/src/v4/PublicApi/Elements/CommonElements/AvatarElement.tsx

@@ -15,6 +15,7 @@ type AvatarElementType = Partial<ImageProps> & {
   targetType?: 'community' | 'user';
   // to bypass the default avatar
   defaultAvatar?: string;
+  avatarCustomUrl?: string;
 };
 
 const AvatarElement: FC<AvatarElementType> = ({
@@ -24,6 +25,8 @@ const AvatarElement: FC<AvatarElementType> = ({
   elementID,
   targetType,
   defaultAvatar,
+  avatarCustomUrl,
+
   ...props
 }) => {
   const { client } = useAuth();
@@ -33,25 +36,33 @@ const AvatarElement: FC<AvatarElementType> = ({
       ? defaultCommunityAvatarUri
       : defaultAvatarUri;
   }, [defaultAvatar, targetType]);
-
   const [avatarUrl, setAvatarUrl] = useState<string>(fallbackAvatar);
   const { excludes } = useConfig();
   const configId = `${pageID}/${componentID}/${elementID}`;
   const { getImage } = useFile();
 
   useLayoutEffect(() => {
-    if (!avatarId) {
-      setAvatarUrl(fallbackAvatar);
-      return;
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (avatarCustomUrl) {
+        setAvatarUrl(avatarCustomUrl);
+        return;
+      }
+
+      if (!avatarId) {
+        setAvatarUrl(fallbackAvatar);
+        return;
+      }
+
       const avatar = await getImage({
         fileId: avatarId,
         imageSize: ImageSizeState.small,
       });
-      setAvatarUrl(avatar);
-    })();
-  }, [avatarId, fallbackAvatar, getImage]);
+
+      setAvatarUrl(avatar ?? fallbackAvatar);
+    };
+
+    loadAvatar();
+  }, [avatarId, fallbackAvatar, getImage, avatarCustomUrl]);
 
   if (excludes.includes(configId)) return null;
 
@@ -62,7 +73,9 @@ const AvatarElement: FC<AvatarElementType> = ({
       source={{
         uri: avatarUrl,
         headers: {
-          Authorization: `Bearer ${(client as Amity.Client).token.accessToken}`,
+          Authorization: `Bearer ${
+            (client as Amity.Client)?.token?.accessToken
+          }`,
         },
       }}
       {...props}

package/src/v4/PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage.tsx

@@ -35,8 +35,7 @@ import { RootStackParamList } from '../../../routes/RouteParamList';
 import CommunityCreatePostButton from '../../../elements/CommunityCreatePostButton/CommunityCreatePostButton';
 import { SvgXml } from 'react-native-svg';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
-
-import { poll, post, story } from '../../../../v4/assets/icons';
+import { livestream, poll, post, story } from '../../../../v4/assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
 import { useTheme } from 'react-native-paper';
@@ -265,7 +264,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     AmityPostTargetSelectionPageBehavior,
     AmityPollTargetSelectionPageBehavior,
     AmityStoryTargetSelectionPageBehavior,
-    // AmityLivestreamPostTargetSelectionPageBehavior,
+    AmityLivestreamPostTargetSelectionPageBehavior,
   } = useBehaviour();
   const navigation =
     useNavigation<
@@ -311,26 +310,26 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  // const handleCreateLivestream = () => {
-  //   closeBottomSheet();
-
-  //   if (
-  //     AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage
-  //   ) {
-  //     return AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage(
-  //       {
-  //         targetId: communityId,
-  //         targetType: 'community',
-  //         targetName: community?.displayName,
-  //       }
-  //     );
-  //   }
-  //   navigation.navigate('CreateLivestream', {
-  //     targetId: communityId,
-  //     targetType: 'community',
-  //     targetName: community?.displayName,
-  //   });
-  // };
+  const handleCreateLivestream = () => {
+    closeBottomSheet();
+
+    if (
+      AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage
+    ) {
+      return AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage(
+        {
+          targetId: communityId,
+          targetType: 'community',
+          targetName: community?.displayName,
+        }
+      );
+    }
+    navigation.navigate('CreateLivestream', {
+      targetId: communityId,
+      targetType: 'community',
+      targetName: community?.displayName,
+    });
+  };
 
   const handleCreatePoll = () => {
     closeBottomSheet();
@@ -398,7 +397,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
               <SvgXml width={24} height={24} xml={poll()} color={colors.base} />
               <Text style={styles.bottomSheetOptionText}>Poll</Text>
             </TouchableOpacity>
-            {/* <TouchableOpacity
+            <TouchableOpacity
               onPress={handleCreateLivestream}
               style={styles.bottomSheetOption}
             >
@@ -409,7 +408,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
                 color={colors.base}
               />
               <Text style={styles.bottomSheetOptionText}>Livestream</Text>
-            </TouchableOpacity> */}
+            </TouchableOpacity>
           </Animated.View>
         </Pressable>
       </Modal>

package/src/v4/PublicApi/Pages/AmityCommunityProfilePage/styles.ts

@@ -41,7 +41,7 @@ export const useStyles = (theme: MyMD3Theme) => {
       backgroundColor: theme.colors.background,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      padding: 10,
+      paddingHorizontal: 16,
       minHeight: 200,
       paddingBottom: insets.bottom + 10,
     },
@@ -57,7 +57,7 @@ export const useStyles = (theme: MyMD3Theme) => {
       flexDirection: 'row',
       alignItems: 'center',
       paddingVertical: 16,
-      paddingHorizontal: 16,
+      paddingHorizontal: 0,
     },
     bottomSheetOptionText: {
       fontSize: 16,