@amityco/react-native-social-uikit 4.1.0 → 4.1.1-11cdc854.0

package/src/social/features/post/Composer/PostComposer.tsx

@@ -1,6 +1,5 @@
 import {
   Alert,
-  FlatList,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -38,22 +37,18 @@ import uiSlice from '../../../../core/stores/slices/uiSlice';
 import { amityPostsFormatter } from '../../../../core/utils/post';
 import useAuth from '../../../../core/hooks/useAuth';
 import globalfeedSlice from '../../../../core/stores/slices/globalfeedSlice';
-import {
-  createPostToFeed,
-  editPost,
-  getPostById,
-} from '../../../../core/legacy/feed';
+import { createPostToFeed, editPost } from '../../../../core/legacy/feed';
+import { usePostByIds } from '../../../../core/hooks/usePostByIds';
 import TextKeyElement from '../../../elements/TextKeyElement/TextKeyElement';
 import AmityMediaAttachmentComponent from '../components/MediaAttachment';
 import AmityDetailedMediaAttachmentComponent from '../components/DetailedMediaAttachment';
 import { useKeyboardStatus } from '../../../hooks';
 import ImagePicker, {
-  launchImageLibrary,
   type Asset,
   launchCamera,
+  launchImageLibrary,
 } from 'react-native-image-picker';
-import LoadingImage from '../../../components/LoadingImage';
-import LoadingVideo from '../../../components/LoadingVideo';
+import { SelectedMediaComponent } from '../../../components/SelectedMediaComponent';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import {
@@ -197,36 +192,38 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
+  // Load the edited post's child media the same way the web UIKit does
+  // (usePostByIds → batch getPostByIds), instead of the racy per-id fetch.
+  const childrenPosts = usePostByIds(post?.children ?? []);
+
   const getPostInfo = useCallback(
-    async (postArray: string[]) => {
+    async (response: Amity.Post[]) => {
       try {
-        const response = await Promise.all(
-          postArray.map(async (id: string) => {
-            const { data } = await getPostById(id);
-            return data;
-          })
-        );
-
         const images: IDisplayImage[] = [];
         const videos: IDisplayImage[] = [];
 
         for (const item of response) {
           if (item?.dataType === 'image') {
-            const fileId = item?.data?.fileId;
+            const fileId = (item as Amity.Post<'image'>)?.data?.fileId;
             const url = await getImage({
               fileId: fileId,
               imageSize: ImageSizeState.full,
             });
+            // Dimensions for composer frame-ratio classification (REQ-003d).
+            const imageInfo = (item as any)?.getImageInfo?.();
             images.push({
               url,
               fileId,
               fileName: fileId,
               isUploaded: true,
               postId: item.postId,
+              width: imageInfo?.getWidth?.(),
+              height: imageInfo?.getHeight?.(),
             });
           } else if (item?.dataType === 'video') {
-            const fileId = item?.data?.videoFileId?.original;
-            const thumbnailFileId = item?.data?.thumbnailFileId;
+            const videoData = (item as Amity.Post<'video'>)?.data;
+            const fileId = videoData?.videoFileId?.original;
+            const thumbnailFileId = videoData?.thumbnailFileId;
             const fileUrls = await Promise.allSettled(
               [fileId, thumbnailFileId].map(async (id) => {
                 return await getImage({
@@ -235,6 +232,9 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                 });
               })
             );
+            // STORED dims + rotation; rotation is applied at classify time
+            // (SelectedMediaComponent REQ-003d1 / AmityVideo REQ-SDK-002).
+            const videoInfo = (item as any)?.getVideoInfo?.();
             videos.push({
               //@ts-ignore
               url: fileUrls[0]?.value,
@@ -244,6 +244,9 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
               //@ts-ignore
               thumbNail: fileUrls[1]?.value,
               postId: item.postId,
+              width: videoInfo?.getWidth?.(),
+              height: videoInfo?.getHeight?.(),
+              rotation: videoInfo?.getRotation?.(),
             });
           }
         }
@@ -267,8 +270,8 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   }, []);
 
   useEffect(() => {
-    post?.children && getPostInfo(post?.children);
-  }, [getPostInfo, post?.children]);
+    if (childrenPosts.length > 0) getPostInfo(childrenPosts);
+  }, [getPostInfo, childrenPosts]);
 
   const getMentionPositions = useCallback(
     (text: string, mentioneeIds: string[]) => {
@@ -583,65 +586,67 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     ]);
   }, [displayImages.length, displayVideos.length, pickCamera]);
 
-  const onPressImage = useCallback(async () => {
-    if (displayImages.length === 10)
-      return Alert.alert(
-        'Maximum upload limit reached',
-        "You've reached the upload limit of 10 images. Any additional images will not be saved."
-      );
-    const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
-      mediaType: 'photo',
-      quality: 1,
-      selectionLimit: 10 - displayImages.length,
-    });
-    if (!result.didCancel && result.assets && result.assets.length > 0) {
-      const imageUriArr: string[] = result.assets.map(
-        (item: Asset) => item.uri
-      ) as string[];
-      const mediaOj = processMedia(imageUriArr);
-      setDisplayImages((prev) => {
-        const updatedArray = [...prev, ...mediaOj];
-        if (updatedArray.length > 10) {
-          Alert.alert(
-            'Maximum number of images exceeded',
-            'Maximum number of images that can be uploaded is 10. The rest images will be discarded'
-          );
-          return updatedArray.slice(0, 10);
-        }
-        return updatedArray;
+  // Open the native OS camera roll (matches the web UIKit's native file
+  // picker). Appends the picked media, de-duplicating by uri and capping at 10.
+  const pickFromLibrary = useCallback(
+    async (mediaType: 'photo' | 'video') => {
+      const isPhoto = mediaType === 'photo';
+      const current = isPhoto ? displayImages.length : displayVideos.length;
+      if (current >= 10)
+        return Alert.alert(
+          'Maximum upload limit reached',
+          `You've reached the upload limit of 10 ${
+            isPhoto ? 'images' : 'videos'
+          }. Any additional ${isPhoto ? 'images' : 'videos'} will not be saved.`
+        );
+      const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
+        mediaType,
+        quality: 1,
+        selectionLimit: 10 - current,
       });
-    }
-  }, [displayImages.length, processMedia]);
-
-  const onPressVideo = useCallback(async () => {
-    if (displayVideos.length === 10)
-      return Alert.alert(
-        'Maximum upload limit reached',
-        "You've reached the upload limit of 10 videos. Any additional videos will not be saved."
-      );
-    const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
-      mediaType: 'video',
-      quality: 1,
-      selectionLimit: 10 - displayVideos.length,
-    });
-    if (!result.didCancel && result.assets && result.assets.length > 0) {
-      const videoUriArr: string[] = result.assets.map(
-        (item: Asset) => item.uri
-      ) as string[];
-      const mediaOj = processMedia(videoUriArr);
-      setDisplayVideos((prev) => {
-        const updatedArray = [...prev, ...mediaOj];
-        if (updatedArray.length > 10) {
-          Alert.alert(
-            'Maximum number of videos exceeded',
-            'Maximum number of videos that can be uploaded is 10. The rest videos will be discarded'
-          );
-          return updatedArray.slice(0, 10);
+      if (result.didCancel || !result.assets?.length) return;
+
+      const setter = isPhoto ? setDisplayImages : setDisplayVideos;
+      setter((prev) => {
+        // Silently drop duplicates, matching the web UIKit (which dedups by
+        // file name). The picker copies each pick to a fresh temp uri, so uri
+        // is not stable across picks — the original `fileName` is.
+        const seen = new Set(prev.map((m) => m.fileName));
+        const additions: IDisplayImage[] = [];
+        for (const asset of result.assets ?? []) {
+          if (!asset.uri) continue;
+          const fileName =
+            asset.fileName ??
+            asset.uri.substring(asset.uri.lastIndexOf('/') + 1);
+          if (seen.has(fileName)) continue; // duplicate → silently drop
+          seen.add(fileName);
+          additions.push({
+            url: asset.uri,
+            fileName,
+            fileId: '',
+            isUploaded: false,
+            // Locally-picked dimensions are already display-oriented (the
+            // picker's extractor applied any rotation) — no rotation to carry.
+            width: asset.width,
+            height: asset.height,
+          });
         }
-        return updatedArray;
+        const updated = [...prev, ...additions];
+        return updated.length > 10 ? updated.slice(0, 10) : updated;
       });
-    }
-  }, [displayVideos.length, processMedia]);
+    },
+    [displayImages.length, displayVideos.length]
+  );
+
+  const onPressImage = useCallback(
+    () => pickFromLibrary('photo'),
+    [pickFromLibrary]
+  );
+
+  const onPressVideo = useCallback(
+    () => pickFromLibrary('video'),
+    [pickFromLibrary]
+  );
 
   const handleImageUploadError = useCallback(
     (hasError: boolean, source: string) => {
@@ -752,6 +757,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
+  // PDT-4310 / PDT-4312: at the 10-attachment cap the camera + gallery icons
+  // are disabled until the user removes a frame.
+  const isMediaCapReached =
+    displayImages.length >= 10 || displayVideos.length >= 10;
+
   const renderDetailedAttachment = useCallback(() => {
     if (isEditMode) return null;
     if (shouldShowDetailAttachment) {
@@ -762,6 +772,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           onPressVideo={onPressVideo}
           chosenMediaType={chosenMediaType}
           onHeightChange={setAttachmentBarHeight}
+          disabled={isMediaCapReached}
         />
       );
     }
@@ -772,11 +783,13 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         onPressVideo={onPressVideo}
         chosenMediaType={chosenMediaType}
         onHeightChange={setAttachmentBarHeight}
+        disabled={isMediaCapReached}
       />
     );
   }, [
     chosenMediaType,
     isEditMode,
+    isMediaCapReached,
     onPressCamera,
     onPressImage,
     onPressVideo,
@@ -835,54 +848,25 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           })}
           <View style={styles.imageContainer}>
             {displayImages.length > 0 && (
-              <FlatList
-                nestedScrollEnabled={true}
-                scrollEnabled={false}
-                data={displayImages}
-                renderItem={({ item, index }) => {
-                  if (!item) return null;
-                  return (
-                    <LoadingImage
-                      source={item.url}
-                      onClose={handleOnCloseImage}
-                      index={index} //TODO: Fix this without index
-                      onLoadFinish={handleOnFinishImage}
-                      onUploadError={handleImageUploadError}
-                      isUploaded={item.isUploaded}
-                      fileId={item.fileId}
-                      fileCount={displayImages.length}
-                      isEditMode={isEditMode}
-                      postId={item.postId}
-                      setIsUploading={setIsUploading}
-                    />
-                  );
-                }}
-                numColumns={3}
+              <SelectedMediaComponent
+                mediaType="image"
+                media={displayImages}
+                onClose={handleOnCloseImage}
+                onLoadFinish={handleOnFinishImage}
+                onUploadError={handleImageUploadError}
+                isEditMode={isEditMode}
+                setIsUploading={setIsUploading}
               />
             )}
             {displayVideos.length > 0 && (
-              <FlatList
-                data={displayVideos}
-                renderItem={({ item, index }) => {
-                  if (!item) return null;
-                  return (
-                    <LoadingVideo
-                      source={item.url}
-                      onClose={handleOnCloseVideo}
-                      index={index} //TODO: Fix this without index
-                      onLoadFinish={handleOnFinishVideo}
-                      onUploadError={handleVideoUploadError}
-                      isUploaded={item.isUploaded}
-                      fileId={item.fileId}
-                      thumbNail={item.thumbNail as string}
-                      fileCount={displayVideos.length}
-                      isEditMode={isEditMode}
-                      postId={item.postId}
-                      setIsUploading={setIsUploading}
-                    />
-                  );
-                }}
-                numColumns={3}
+              <SelectedMediaComponent
+                mediaType="video"
+                media={displayVideos}
+                onClose={handleOnCloseVideo}
+                onLoadFinish={handleOnFinishVideo}
+                onUploadError={handleVideoUploadError}
+                isEditMode={isEditMode}
+                setIsUploading={setIsUploading}
               />
             )}
           </View>

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

@@ -18,6 +18,9 @@ type AmityDetailedMediaAttachmentComponentType = {
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
   onHeightChange?: (height: number) => void;
+  /** When the 10-attachment cap is reached, the camera + gallery icons are
+   * disabled and untappable (PDT-4310 / PDT-4312). */
+  disabled?: boolean;
 };
 
 const AmityDetailedMediaAttachmentComponent: FC<
@@ -28,6 +31,7 @@ const AmityDetailedMediaAttachmentComponent: FC<
   onPressVideo,
   chosenMediaType,
   onHeightChange,
+  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.detailed_media_attachment;
@@ -91,8 +95,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
           <Pressable
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
-            style={styles.mediaAttachmentBtn}
+            style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
             onPress={onPressCamera}
+            disabled={disabled}
           >
             <View style={styles.iconContainer}>
               <SvgXml
@@ -115,8 +120,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
-              style={styles.mediaAttachmentBtn}
+              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
               onPress={onPressImage}
+              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml
@@ -139,8 +145,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
-              style={styles.mediaAttachmentBtn}
+              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
               onPress={onPressVideo}
+              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml

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

@@ -17,6 +17,9 @@ type AmityMediaAttachmentComponentType = {
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
   onHeightChange?: (height: number) => void;
+  /** When the 10-attachment cap is reached, the camera + gallery icons are
+   * disabled and untappable (PDT-4310 / PDT-4312). */
+  disabled?: boolean;
 };
 
 const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
@@ -25,6 +28,7 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
   onPressVideo,
   chosenMediaType,
   onHeightChange,
+  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.media_attachment;
@@ -89,8 +93,9 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
             onPress={onPressCamera}
+            disabled={disabled}
           >
-            <View style={styles.iconContainer}>
+            <View style={[styles.iconContainer, disabled && { opacity: 0.4 }]}>
               <SvgXml
                 xml={camera()}
                 width={24}
@@ -107,8 +112,11 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
               onPress={onPressImage}
+              disabled={disabled}
             >
-              <View style={styles.iconContainer}>
+              <View
+                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
+              >
                 <SvgXml
                   xml={photo()}
                   width={24}
@@ -124,8 +132,11 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
               onPress={onPressVideo}
+              disabled={disabled}
             >
-              <View style={styles.iconContainer}>
+              <View
+                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
+              >
                 <SvgXml
                   xml={video()}
                   width={24}

package/src/social/utils/getFrameRatio.ts

@@ -0,0 +1,42 @@
+export type FrameRatio = '16:9' | '1:1' | '4:5';
+
+/**
+ * Numeric aspect ratio (width / height) for each frame ratio.
+ * React Native's `aspectRatio` style takes a number, unlike web's CSS string.
+ */
+export const FRAME_RATIO_VALUE: Record<FrameRatio, number> = {
+  '16:9': 16 / 9,
+  '1:1': 1,
+  '4:5': 4 / 5,
+};
+
+const LANDSCAPE_THRESHOLD = 1.25;
+const PORTRAIT_THRESHOLD = 0.8;
+
+export const DEFAULT_FRAME_RATIO: FrameRatio = '1:1';
+
+export function getFrameRatio(width?: number, height?: number): FrameRatio {
+  if (!width || !height || height <= 0) return DEFAULT_FRAME_RATIO;
+
+  const ratio = width / height;
+
+  if (ratio >= LANDSCAPE_THRESHOLD) return '16:9';
+  if (ratio <= PORTRAIT_THRESHOLD) return '4:5';
+  return '1:1';
+}
+
+/**
+ * Swap width/height when a video is rotated 90/270 degrees so the frame ratio
+ * reflects how the video is actually displayed. Mirrors web getVideoDisplayDims.
+ */
+export function getVideoDisplayDims(video?: {
+  width?: number;
+  height?: number;
+  rotation?: number;
+}): { width?: number; height?: number } {
+  const { width, height, rotation } = video ?? {};
+  if (width == null || height == null) return { width, height };
+  if (Math.abs(rotation ?? 0) % 180 === 90)
+    return { width: height, height: width };
+  return { width, height };
+}

package/src/social/utils/getIndicatorConfig.ts

@@ -0,0 +1,62 @@
+import { MAX_INDICATOR_DOTS } from '../constants';
+
+export type IndicatorDotState = 'active' | 'inactive' | 'edge';
+
+export type IndicatorDot = {
+  key: string;
+  state: IndicatorDotState;
+  side?: 'left' | 'right';
+};
+
+export type IndicatorConfig = {
+  dots: IndicatorDot[];
+};
+
+export function getIndicatorConfig(
+  current: number,
+  total: number
+): IndicatorConfig {
+  if (total <= MAX_INDICATOR_DOTS) {
+    const dots = Array.from({ length: total }, (_, page) => ({
+      key: `page-${page}`,
+      state: page === current ? ('active' as const) : ('inactive' as const),
+    }));
+    return { dots };
+  }
+
+  let windowStart: number;
+  let windowEnd: number;
+
+  if (current <= 1) {
+    windowStart = 0;
+    windowEnd = 4;
+  } else if (current >= total - 3) {
+    windowStart = total - 5;
+    windowEnd = total - 1;
+  } else {
+    windowStart = current - 1;
+    windowEnd = current + 2;
+  }
+
+  const showLeft = windowStart > 0;
+  const showRight = windowEnd < total - 1;
+
+  const dots: IndicatorDot[] = [];
+
+  if (showLeft) {
+    dots.push({ key: 'edge-left', state: 'edge', side: 'left' });
+  }
+
+  for (let page = windowStart; page <= windowEnd; page += 1) {
+    dots.push({
+      key: `page-${page}`,
+      state: page === current ? 'active' : 'inactive',
+    });
+  }
+
+  if (showRight) {
+    dots.push({ key: 'edge-right', state: 'edge', side: 'right' });
+  }
+
+  return { dots };
+}