@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

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

@@ -6,9 +6,10 @@ import {
   ElementID,
   mediaAttachment,
 } from '../../../../enums';
-import { useAmityComponent } from '../../../../hooks';
+import { useAmityComponent, useAmityElement } from '../../../../hooks';
 import { useStyles } from './styles';
-import ImageKeyElement from '../../../../elements/ImageKeyElement/ImageKeyElement';
+import { SvgXml } from 'react-native-svg';
+import { camera, photo, video } from '../../../../../core/assets/icons';
 import TextKeyElement from '../../../../elements/TextKeyElement/TextKeyElement';
 
 type AmityDetailedMediaAttachmentComponentType = {
@@ -16,17 +17,39 @@ type AmityDetailedMediaAttachmentComponentType = {
   onPressImage: () => void;
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
+  onHeightChange?: (height: number) => void;
 };
 
 const AmityDetailedMediaAttachmentComponent: FC<
   AmityDetailedMediaAttachmentComponentType
-> = ({ onPressCamera, onPressImage, onPressVideo, chosenMediaType }) => {
+> = ({
+  onPressCamera,
+  onPressImage,
+  onPressVideo,
+  chosenMediaType,
+  onHeightChange,
+}) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.detailed_media_attachment;
   const { accessibilityId, themeStyles, isExcluded } = useAmityComponent({
     pageId,
     componentId,
   });
+  const cameraElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.camera_button,
+  });
+  const imageElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.image_button,
+  });
+  const videoElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.video_button,
+  });
   const styles = useStyles(themeStyles);
 
   const animatedBottom = useRef(new Animated.Value(-200)).current;
@@ -60,62 +83,88 @@ const AmityDetailedMediaAttachmentComponent: FC<
       testID={accessibilityId}
       accessibilityLabel={accessibilityId}
       style={[styles.container, { bottom: animatedBottom }]}
+      onLayout={(e) => onHeightChange?.(e.nativeEvent.layout.height)}
     >
       <View style={styles.handleBar} />
       <View style={styles.buttonsContainer}>
-        <Pressable style={styles.mediaAttachmentBtn} onPress={onPressCamera}>
-          <ImageKeyElement
-            pageID={pageId}
-            componentID={componentId}
-            elementID={ElementID.camera_button}
-            style={styles.iconBtn}
-          />
-          <TextKeyElement
-            pageID={pageId}
-            componentID={componentId}
-            elementID={ElementID.camera_button}
-            style={styles.iconText}
-          />
-        </Pressable>
-        {(!chosenMediaType || chosenMediaType === mediaAttachment.image) && (
-          <Pressable style={styles.mediaAttachmentBtn} onPress={onPressImage}>
-            <ImageKeyElement
-              pageID={pageId}
-              componentID={componentId}
-              elementID={ElementID.image_button}
-              style={styles.iconBtn}
-            />
-            <TextKeyElement
-              pageID={pageId}
-              componentID={componentId}
-              elementID={ElementID.image_button}
-              style={styles.iconText}
-            />
-          </Pressable>
-        )}
-        {(!chosenMediaType || chosenMediaType === mediaAttachment.video) && (
-          <Pressable style={styles.mediaAttachmentBtn} onPress={onPressVideo}>
-            <ImageKeyElement
-              pageID={pageId}
-              componentID={componentId}
-              elementID={ElementID.video_button}
-              style={styles.iconBtn}
-            />
+        {!cameraElement.isExcluded && (
+          <Pressable
+            testID={cameraElement.accessibilityId}
+            accessibilityLabel={cameraElement.accessibilityId}
+            style={styles.mediaAttachmentBtn}
+            onPress={onPressCamera}
+          >
+            <View style={styles.iconContainer}>
+              <SvgXml
+                xml={camera()}
+                width={24}
+                height={24}
+                color={themeStyles?.colors?.base}
+              />
+            </View>
             <TextKeyElement
               pageID={pageId}
               componentID={componentId}
-              elementID={ElementID.video_button}
+              elementID={ElementID.camera_button}
               style={styles.iconText}
             />
           </Pressable>
         )}
+        {!imageElement.isExcluded &&
+          (!chosenMediaType || chosenMediaType === mediaAttachment.image) && (
+            <Pressable
+              testID={imageElement.accessibilityId}
+              accessibilityLabel={imageElement.accessibilityId}
+              style={styles.mediaAttachmentBtn}
+              onPress={onPressImage}
+            >
+              <View style={styles.iconContainer}>
+                <SvgXml
+                  xml={photo()}
+                  width={24}
+                  height={24}
+                  color={themeStyles?.colors?.base}
+                />
+              </View>
+              <TextKeyElement
+                pageID={pageId}
+                componentID={componentId}
+                elementID={ElementID.image_button}
+                style={styles.iconText}
+              />
+            </Pressable>
+          )}
+        {!videoElement.isExcluded &&
+          (!chosenMediaType || chosenMediaType === mediaAttachment.video) && (
+            <Pressable
+              testID={videoElement.accessibilityId}
+              accessibilityLabel={videoElement.accessibilityId}
+              style={styles.mediaAttachmentBtn}
+              onPress={onPressVideo}
+            >
+              <View style={styles.iconContainer}>
+                <SvgXml
+                  xml={video()}
+                  width={24}
+                  height={24}
+                  color={themeStyles?.colors?.base}
+                />
+              </View>
+              <TextKeyElement
+                pageID={pageId}
+                componentID={componentId}
+                elementID={ElementID.video_button}
+                style={styles.iconText}
+              />
+            </Pressable>
+          )}
         {/* will use later
         <Pressable style={styles.mediaAttachmentBtn}>
           <ImageKeyElement
             pageID={pageId}
             componentID={componentId}
             elementID={ElementID.file_button}
-            style={styles.iconBtn}
+            style={styles.iconContainer}
           />
           <TextKeyElement
             pageID={pageId}

package/src/social/features/post/components/DetailedMediaAttachment/styles.ts

@@ -30,10 +30,10 @@ export const useStyles = (theme: MyMD3Theme) => {
       paddingTop: 16,
       paddingHorizontal: 24,
     },
-    iconBtn: {
-      width: 24,
-      height: 24,
-      tintColor: theme.colors.base,
+    iconContainer: {
+      padding: 4,
+      borderRadius: 100,
+      backgroundColor: theme.colors.backgroundShade1,
       marginRight: 12,
     },
     iconText: {

package/src/social/features/post/components/EngagementActions/Components/DetailStyle.tsx

@@ -8,7 +8,7 @@ import {
 } from '@amityco/ts-sdk-react-native';
 import { AmityPostEngagementActionsSubComponentType } from './type';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import { useAmityComponent, useGlobalBehavior } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -34,6 +34,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     componentId: ComponentID.post_content,
   });
   const styles = useStyles(themeStyles);
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const [postData, setPostData] = useState<Amity.Post>(null);
 
   const { shareLink, handleSharePress } = usePostShareAction({
@@ -95,6 +96,10 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postId]);
 
+  const onPressReaction = useCallback(() => {
+    handleGlobalBehavior({ defaultBehavior: addReactionToPost });
+  }, [addReactionToPost, handleGlobalBehavior]);
+
   const onClickReactions = useCallback(() => {
     setIsReactionListVisible(true);
   }, []);
@@ -136,7 +141,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
       </View>
       <View style={[styles.actionSection, styles.detailActionSection]}>
         <View style={styles.row}>
-          <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
+          <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
             {isLike ? (
               <SvgXml
                 xml={likeReaction(themeStyles.colors.background)}

package/src/social/features/post/components/EngagementActions/Components/FeedStyle.tsx

@@ -8,7 +8,7 @@ import {
   subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import { useAmityComponent, useGlobalBehavior } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -38,6 +38,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   });
   const styles = useStyles(themeStyles);
   const { AmityGlobalFeedComponentBehavior } = useBehaviour();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [postData, setPostData] = useState<Amity.Post>(null);
@@ -81,6 +82,10 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postData, postId]);
 
+  const onPressReaction = useCallback(() => {
+    handleGlobalBehavior({ defaultBehavior: addReactionToPost });
+  }, [addReactionToPost, handleGlobalBehavior]);
+
   const onPressComment = useCallback(() => {
     if (AmityGlobalFeedComponentBehavior.goToPostDetailPage) {
       return AmityGlobalFeedComponentBehavior.goToPostDetailPage();
@@ -103,7 +108,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   return (
     <Pressable onPress={onPressComment} style={styles.actionSection}>
       <View style={styles.row}>
-        <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
+        <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
           {isLike ? (
             <SvgXml
               xml={likeReaction(themeStyles.colors.background)}

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

@@ -6,15 +6,17 @@ import {
   ElementID,
   mediaAttachment,
 } from '../../../../enums';
-import { useAmityComponent } from '../../../../hooks';
+import { useAmityComponent, useAmityElement } from '../../../../hooks';
 import { useStyles } from './styles';
-import ImageKeyElement from '../../../../elements/ImageKeyElement/ImageKeyElement';
+import { SvgXml } from 'react-native-svg';
+import { camera, photo, video } from '../../../../../core/assets/icons';
 
 type AmityMediaAttachmentComponentType = {
   onPressCamera: () => void;
   onPressImage: () => void;
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
+  onHeightChange?: (height: number) => void;
 };
 
 const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
@@ -22,6 +24,7 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
   onPressImage,
   onPressVideo,
   chosenMediaType,
+  onHeightChange,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.media_attachment;
@@ -29,6 +32,21 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
     pageId,
     componentId,
   });
+  const cameraElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.camera_button,
+  });
+  const imageElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.image_button,
+  });
+  const videoElement = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.video_button,
+  });
   const styles = useStyles(themeStyles);
 
   const animatedBottom = useRef(new Animated.Value(-100)).current;
@@ -62,45 +80,68 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
       testID={accessibilityId}
       accessibilityLabel={accessibilityId}
       style={[styles.container, { bottom: animatedBottom }]}
+      onLayout={(e) => onHeightChange?.(e.nativeEvent.layout.height)}
     >
       <View style={styles.handleBar} />
       <View style={styles.buttonsContainer}>
-        <Pressable onPress={onPressCamera}>
-          <ImageKeyElement
-            pageID={pageId}
-            componentID={componentId}
-            elementID={ElementID.camera_button}
-            style={styles.iconBtn}
-          />
-        </Pressable>
-
-        {(!chosenMediaType || chosenMediaType === mediaAttachment.image) && (
-          <Pressable onPress={onPressImage}>
-            <ImageKeyElement
-              pageID={pageId}
-              componentID={componentId}
-              elementID={ElementID.image_button}
-              style={styles.iconBtn}
-            />
-          </Pressable>
-        )}
-        {(!chosenMediaType || chosenMediaType === mediaAttachment.video) && (
-          <Pressable onPress={onPressVideo}>
-            <ImageKeyElement
-              pageID={pageId}
-              componentID={componentId}
-              elementID={ElementID.video_button}
-              style={styles.iconBtn}
-            />
+        {!cameraElement.isExcluded && (
+          <Pressable
+            testID={cameraElement.accessibilityId}
+            accessibilityLabel={cameraElement.accessibilityId}
+            onPress={onPressCamera}
+          >
+            <View style={styles.iconContainer}>
+              <SvgXml
+                xml={camera()}
+                width={24}
+                height={24}
+                color={themeStyles?.colors?.base}
+              />
+            </View>
           </Pressable>
         )}
+
+        {!imageElement.isExcluded &&
+          (!chosenMediaType || chosenMediaType === mediaAttachment.image) && (
+            <Pressable
+              testID={imageElement.accessibilityId}
+              accessibilityLabel={imageElement.accessibilityId}
+              onPress={onPressImage}
+            >
+              <View style={styles.iconContainer}>
+                <SvgXml
+                  xml={photo()}
+                  width={24}
+                  height={24}
+                  color={themeStyles?.colors?.base}
+                />
+              </View>
+            </Pressable>
+          )}
+        {!videoElement.isExcluded &&
+          (!chosenMediaType || chosenMediaType === mediaAttachment.video) && (
+            <Pressable
+              testID={videoElement.accessibilityId}
+              accessibilityLabel={videoElement.accessibilityId}
+              onPress={onPressVideo}
+            >
+              <View style={styles.iconContainer}>
+                <SvgXml
+                  xml={video()}
+                  width={24}
+                  height={24}
+                  color={themeStyles?.colors?.base}
+                />
+              </View>
+            </Pressable>
+          )}
         {/* //will use later
         <Pressable>
           <ImageKeyElement
             pageID={pageId}
             componentID={componentId}
             elementID={ElementID.file_button}
-            style={styles.iconBtn}
+            style={styles.iconContainer}
           />
         </Pressable> */}
       </View>

package/src/social/features/post/components/MediaAttachment/styles.ts

@@ -33,10 +33,10 @@ export const useStyles = (theme: MyMD3Theme) => {
       width: '100%',
       justifyContent: 'space-around',
     },
-    iconBtn: {
-      width: 24,
-      height: 24,
-      tintColor: theme.colors.base,
+    iconContainer: {
+      padding: 4,
+      borderRadius: 100,
+      backgroundColor: theme.colors.backgroundShade1,
     },
   });
 

package/src/social/features/reaction/components/List/List.tsx

@@ -31,6 +31,7 @@ type AmityReactionListComponentType = {
   referenceType: Amity.ReactableType;
   isModalVisible: boolean;
   onCloseModal: () => void;
+  onPressUser?: (userId: string) => void;
 };
 
 type ReactionListType = Amity.User & { reactionName: string };
@@ -40,6 +41,7 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
   referenceType,
   isModalVisible,
   onCloseModal,
+  onPressUser,
 }) => {
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
@@ -133,9 +135,13 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
   const onPressReactor = useCallback(
     (userId: string) => {
       onCloseModal();
-      navigation.navigate('UserProfile', { userId });
+      if (onPressUser) {
+        onPressUser(userId);
+      } else {
+        navigation.navigate('UserProfile', { userId });
+      }
     },
-    [navigation, onCloseModal]
+    [navigation, onCloseModal, onPressUser]
   );
 
   const renderReactors = useCallback(

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

@@ -96,8 +96,7 @@ const AmityCreateStoryPage: FC<ICreateStoryPage> = ({
     android: useCameraFormat(activeCamera, [
       { photoAspectRatio: 16 / 9 },
       { videoAspectRatio: 16 / 9 },
-      { videoResolution: 'max' },
-      { photoResolution: 'max' },
+      { videoResolution: { width: 1920, height: 1080 } },
     ]),
   });
   const activeSwitchColor = { backgroundColor: '#ffffff' };

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

@@ -1,5 +1,6 @@
 import { Alert, Image, Text, TouchableOpacity, View } from 'react-native';
 import { FC, useCallback, useState, useEffect, memo } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
 import Video from 'react-native-video';
 import {
   leftLongArrow,
@@ -25,7 +26,6 @@ import { useConfigImageUri } from '../../../hooks/useConfigImageUri';
 import HyperlinkConfig from './components/HyperLinkConfig';
 import { IAmityDraftStoryPage } from '../../../types';
 import { useFile } from '../../../hooks/useFile';
-import { defaultAvatarUri } from '../../../../core/assets/index';
 import { getMediaTypeFromUrl } from '../../../../core/utils/url';
 import { LoadingOverlay } from '../../../components/legacy/LoadingOverlay';
 import mime from 'mime';
@@ -42,14 +42,14 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
   const type = getMediaTypeFromUrl(mediaType.uri);
   const styles = useStyles();
   const { getImage } = useFile();
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [imageDisplayMode, setImageDisplayMode] =
+    useState<Amity.ImageDisplayMode>('fit');
   const [isVisibleModal, setIsVisibleModal] = useState(false);
-  const [communityAvatarUrl, setCommunityAvatarUrl] = useState<string>(null);
+  const [communityAvatarUrl, setCommunityAvatarUrl] = useState<string | null>(
+    null
+  );
   const [hyperlink, setHyperlink] = useState<Amity.StoryItem[]>(undefined);
   const [loading, setLoading] = useState(false);
-  const imageDisplayMode: Amity.ImageDisplayMode = isFullScreen
-    ? 'fill'
-    : 'fit';
   const theme = useTheme() as MyMD3Theme;
   const aspectRatioIcon = useConfigImageUri({
     configPath: {
@@ -72,7 +72,7 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
 
   useEffect(() => {
     if (!targetId || targetType !== 'community')
-      return setCommunityAvatarUrl(defaultAvatarUri);
+      return setCommunityAvatarUrl(null);
     CommunityRepository.getCommunity(
       targetId,
       async ({ error, loading: isLoading, data }) => {
@@ -81,8 +81,9 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
           const image = await getImage({
             fileId: data.avatarFileId,
             imageSize: ImageSizeState.small,
+            type: 'community',
           });
-          setCommunityAvatarUrl(image);
+          setCommunityAvatarUrl(image ?? null);
         }
       }
     )();
@@ -106,7 +107,7 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
   }, [onDiscardStory]);
 
   const onPressAspectRatio = useCallback(() => {
-    setIsFullScreen((prev) => !prev);
+    setImageDisplayMode((prev) => (prev === 'fit' ? 'fill' : 'fit'));
   }, []);
 
   const onPressHyperLink = useCallback(() => {
@@ -115,10 +116,14 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
 
   const onPressShareStory = useCallback(async () => {
     const formData = new FormData();
+    const isImage = type === StoryType.image;
+    const mimeType =
+      mime.getType(mediaType.uri) ?? (isImage ? 'image/jpeg' : 'video/mp4');
     formData.append('files', {
-      ...mediaType,
-      type: mime.getType(mediaType.uri),
-    });
+      uri: mediaType.uri,
+      name: mediaType.name,
+      type: mimeType,
+    } as unknown as Blob);
 
     try {
       setLoading(true);
@@ -182,16 +187,36 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
     <SafeAreaView style={styles.container}>
       <View style={styles.imageContainer}>
         {type === StoryType.image ? (
-          <Image
-            source={{ uri: mediaType.uri }}
-            style={[styles.image, isFullScreen && styles.aspect_ratio]}
-          />
+          <>
+            {imageDisplayMode !== 'fill' && (
+              <Image
+                source={{ uri: mediaType.uri }}
+                style={styles.blurredBackground}
+                resizeMode="cover"
+                blurRadius={20}
+              />
+            )}
+            <Image
+              source={{ uri: mediaType.uri }}
+              style={styles.image}
+              resizeMode={imageDisplayMode === 'fill' ? 'cover' : 'contain'}
+            />
+          </>
         ) : (
           <Video
             paused={loading}
             repeat
             source={{ uri: mediaType.uri }}
-            style={[styles.image, isFullScreen && styles.aspect_ratio]}
+            style={styles.image}
+            resizeMode={imageDisplayMode === 'fill' ? 'cover' : 'contain'}
+          />
+        )}
+        {imageDisplayMode === 'fill' && (
+          <LinearGradient
+            colors={['rgba(0, 0, 0, 0.4)', 'transparent', 'rgba(0, 0, 0, 0.4)']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 0, y: 1 }}
+            style={styles.storyGradient}
           />
         )}
       </View>
@@ -202,9 +227,9 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
         >
           <SvgXml xml={storyHyperLinkIcon('blue')} width="25" height="25" />
           <Text style={styles.hyperlinkText}>
-            {hyperlink[0].data.customText.length === 0
-              ? hyperlink[0].data.url
-              : hyperlink[0].data.customText}
+            {(hyperlink[0]?.data?.customText?.length ?? 0) === 0
+              ? hyperlink[0]?.data?.url
+              : hyperlink[0]?.data?.customText}
           </Text>
         </TouchableOpacity>
       )}
@@ -212,7 +237,14 @@ const AmityDraftStoryPage: FC<IAmityDraftStoryPage> = ({
         style={styles.shareStoryBtn}
         onPress={onPressShareStory}
       >
-        <Image source={{ uri: communityAvatarUrl }} style={styles.avatar} />
+        <Image
+          source={
+            communityAvatarUrl
+              ? { uri: communityAvatarUrl }
+              : require('../../../../core/assets/images/communityAvatar.png')
+          }
+          style={styles.avatar}
+        />
         <Text style={styles.shareStoryTxt}>Share story</Text>
         <SvgXml
           xml={rightLongArrow(theme.colors.baseShade2)}