@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,6 +1,5 @@
 import {
   Alert,
-  FlatList,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -11,7 +10,7 @@ import {
   StatusBar,
   Linking,
 } from 'react-native';
-import { FC, memo, useCallback, useEffect, useState } from 'react';
+import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ComponentID,
   ElementID,
@@ -35,35 +34,39 @@ import { IDisplayImage, IMentionPosition } from '../../../../core/types';
 import CloseButtonIconElement from '../../../elements/CloseButtonIconElement/CloseButtonIconElement';
 import { useNavigation } from '@react-navigation/native';
 import uiSlice from '../../../../core/stores/slices/uiSlice';
+import localVideoThumbnailSlice from '../../../../core/stores/slices/localVideoThumbnailSlice';
 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 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 {
   CommunityRepository,
+  FileRepository,
   PostRepository,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
-import { useFile } from '../../../hooks';
 import useMention from '../../../hooks/useMention';
 import { getPostErrorMessage } from '../../../utils/errors';
+import {
+  MAX_MEDIA_ATTACHMENTS,
+  appendWithinCap,
+  applyFinishedUpload,
+  dedupeMediaPicks,
+  toLocalVideoThumbnails,
+  toggleUploadingSource,
+} from '../../../utils/mediaAttachments';
 import {
   ALERT,
   MAX_MENTION_USERS,
@@ -91,7 +94,6 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const { AmityPostComposerPageBehavior } = useBehaviour();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
-  const { getImage } = useFile();
   const isEditMode = mode === AmityPostComposerMode.EDIT;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -104,6 +106,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const currentUser = useUser((client as Amity.Client)?.userId || '');
   const isCommunityModerator = isModerator(currentUser?.roles);
   const { showToastMessage, hideToastMessage } = uiSlice.actions;
+  const { setLocalVideoThumbnails } = localVideoThumbnailSlice.actions;
   const [inputMessage, setInputMessage] = useState<string>(
     (post?.data as Amity.ContentDataText)?.text ?? ''
   );
@@ -116,7 +119,16 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [mentionUsers, setMentionUsers] = useState<TSearchItem[]>([]);
   const [isSwipeup, setIsSwipeup] = useState(true);
   const [deletedPostIds, setDeletedPostIds] = useState<string[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
+  // Upload progress is tracked per media item, keyed by the item's `source`
+  // url — the same shape as `imageErrors`/`videoErrors` below. A
+  // single shared boolean was flipped back to false by whichever upload
+  // finished first, so Post/Save unlocked while the remaining frames were
+  // still in flight. Sources are unique across images and videos, so one set
+  // covers both attachment types.
+  const [uploadingSources, setUploadingSources] = useState<Set<string>>(
+    new Set()
+  );
+  const isUploading = uploadingSources.size > 0;
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
   const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
   const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
@@ -153,7 +165,8 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     (inputMessage.trim().length > 0 ||
       displayImages.length > 0 ||
       displayVideos.length > 0) &&
-    (displayImages.length <= 10 || displayVideos.length <= 10);
+    (displayImages.length <= MAX_MEDIA_ATTACHMENTS ||
+      displayVideos.length <= MAX_MEDIA_ATTACHMENTS);
 
   const { renderInput, renderSuggestions } = useMention({
     value: inputMessage,
@@ -175,7 +188,26 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     },
   });
 
+  // The edited post carries its own hydrated children: every post payload
+  // ingests `postChildren` into the `post` cache (PAYLOAD2MODEL maps it to
+  // 'post'), and postLinkedObject reads them straight back out. So the media is
+  // known on the first frame, with no fetch — no second source to reconcile.
+  const editChildren = post?.childrenPosts ?? [];
+
+  // `childrenPosts` drops cache misses silently (postLinkedObject filters with
+  // isNonNullable), so a short array means we cannot see every child. There is
+  // no fallback fetch behind it, so treat that state as read-only: no
+  // attachment bar, no Save.
+  const editChildrenIncomplete =
+    isEditMode && editChildren.length !== (post?.children?.length ?? 0);
+
   const checkIsEditValid = () => {
+    // `type` in onPressPost is derived from displayImages/displayVideos, so
+    // saving while a child is missing submits it as removed — `attachments: []`
+    // and type 'text' strips the post's media outright. Nothing the user can do
+    // in the composer makes an unrendered child safe to save, so key this on
+    // completeness alone rather than on hasChangedAttachment.
+    if (editChildrenIncomplete) return false;
     return (
       isInputValid &&
       (inputMessage !== (post?.data as Amity.ContentDataText)?.text ||
@@ -197,53 +229,95 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
+  // A child post's file is usually already in the SDK cache, where the linked
+  // object exposes it synchronously (getImageInfo / getVideoInfo /
+  // getVideoThumbnailInfo are `pullFromCache(['file','get', …])` over the very
+  // ids we'd otherwise refetch). Use the cached `fileUrl` when it's there and
+  // fall back to the round trip on a cache miss. `fileUrlWithSize` is just
+  // `?size=`, so both branches produce the same url.
+  const resolveFileUrl = useCallback(
+    async (fileUrl: string | undefined, fileId: string | undefined) => {
+      if (fileUrl)
+        return FileRepository.fileUrlWithSize(fileUrl, ImageSizeState.full);
+      if (!fileId) return undefined;
+
+      // Resolve the file directly rather than through useFile: that hook
+      // answers a miss with the default *avatar* image, which is right for a
+      // profile picture and wrong for post media. A video whose thumbnail the
+      // server has not produced yet has no file to resolve, and handing back an
+      // avatar made the carousel render a person icon behind the play button as
+      // though it were the real frame — and, because the url looked valid, it
+      // was also stored as the local thumbnail the feed falls back on.
+      const file = await FileRepository.getFile(fileId);
+      const resolved = file?.data?.fileUrl;
+
+      return resolved
+        ? FileRepository.fileUrlWithSize(resolved, ImageSizeState.full)
+        : undefined;
+    },
+    []
+  );
+
   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 url = await getImage({
-              fileId: fileId,
-              imageSize: ImageSizeState.full,
-            });
+            const fileId = (item as Amity.Post<'image'>)?.data?.fileId;
+            // Dimensions for composer frame-ratio classification (REQ-003d).
+            const imageInfo = item?.getImageInfo?.();
+            const url = await resolveFileUrl(imageInfo?.fileUrl, fileId);
             images.push({
               url,
               fileId,
               fileName: fileId,
+              // A hydrated child has no local pick behind it, so its identity
+              // is the file it already is. Unique per child, stable for the
+              // whole session, and never equal to a picker file name — so a
+              // later pick is de-duplicated against the other staged picks
+              // only, which is the most the picker can tell us.
+              localId: fileId ?? item.postId,
               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 fileUrls = await Promise.allSettled(
-              [fileId, thumbnailFileId].map(async (id) => {
-                return await getImage({
-                  fileId: id,
-                  imageSize: ImageSizeState.full,
-                });
-              })
-            );
+            const videoData = (item as Amity.Post<'video'>)?.data;
+            const fileId = videoData?.videoFileId?.original;
+            const thumbnailFileId = videoData?.thumbnailFileId;
+            // STORED dims + rotation; rotation is applied at classify time
+            // (SelectedMediaComponent REQ-003d1 / AmityVideo REQ-SDK-002).
+            const videoInfo = item?.getVideoInfo?.();
+            const thumbnailInfo = item?.getVideoThumbnailInfo?.();
+            // Settle the two urls independently: a missing or unreachable
+            // thumbnail must not cost us the video itself. `Promise.all` would
+            // reject the pair, abort this loop, and leave displayVideos empty
+            // — which now also keeps Save disabled (see checkIsEditValid).
+            const [urlResult, thumbNailResult] = await Promise.allSettled([
+              resolveFileUrl(videoInfo?.fileUrl, fileId),
+              resolveFileUrl(thumbnailInfo?.fileUrl, thumbnailFileId),
+            ]);
+            const url =
+              urlResult.status === 'fulfilled' ? urlResult.value : undefined;
+            const thumbNail =
+              thumbNailResult.status === 'fulfilled'
+                ? thumbNailResult.value
+                : undefined;
             videos.push({
-              //@ts-ignore
-              url: fileUrls[0]?.value,
+              url,
               fileId: fileId,
               fileName: fileId,
+              localId: fileId ?? item.postId,
               isUploaded: true,
-              //@ts-ignore
-              thumbNail: fileUrls[1]?.value,
+              thumbNail,
               postId: item.postId,
+              width: videoInfo?.getWidth?.(),
+              height: videoInfo?.getHeight?.(),
+              rotation: videoInfo?.getRotation?.(),
             });
           }
         }
@@ -258,7 +332,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         console.log('error: ', error);
       }
     },
-    [getImage]
+    [resolveFileUrl]
   );
 
   useEffect(() => {
@@ -266,9 +340,39 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     return () => setDeletedPostIds([]);
   }, []);
 
+  // `post` comes from route params, so `editChildren` is reference-stable and
+  // this hydrates once. The hasChangedAttachment guard is belt-and-braces:
+  // getPostInfo assigns displayImages/displayVideos wholesale, so a re-run must
+  // never be able to wipe media the user added.
   useEffect(() => {
-    post?.children && getPostInfo(post?.children);
-  }, [getPostInfo, post?.children]);
+    if (editChildren.length === 0 || hasChangedAttachment) return;
+    getPostInfo(editChildren);
+  }, [getPostInfo, post?.childrenPosts, hasChangedAttachment]);
+
+  // Media type of the post being edited, read off the children's dataType —
+  // the same signal the web UIKit feeds into useMediaAttachmentVisible.
+  const editMediaType = useMemo(() => {
+    if (editChildren.some((item) => item?.dataType === 'image'))
+      return mediaAttachment.image;
+    if (editChildren.some((item) => item?.dataType === 'video'))
+      return mediaAttachment.video;
+    return null;
+  }, [post?.childrenPosts]);
+
+  // The post's single media type, as every media entry point must see it: the
+  // staged attachments when there are any, otherwise the type the edited post
+  // already has. Read the display arrays rather than `chosenMediaType`, which
+  // is assigned in an effect and so trails them by a render. Once the user has
+  // cleared the attachments itself the post has no type again and all three
+  // buttons come back, matching web.
+  const activeMediaType =
+    displayImages.length > 0
+      ? mediaAttachment.image
+      : displayVideos.length > 0
+      ? mediaAttachment.video
+      : hasChangedAttachment
+      ? null
+      : editMediaType;
 
   const getMentionPositions = useCallback(
     (text: string, mentioneeIds: string[]) => {
@@ -427,6 +531,23 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         return;
       }
       dispatch(hideToastMessage());
+      // The server has no thumbnail for these videos until it finishes
+      // transcoding, so hand the feed the frames the composer already decoded
+      // to bridge that window (PDT-4904, web parity: LayoutProvider
+      // videoThumbnail). Keyed by the uploaded original video's fileId, which
+      // is what the created post exposes as `data.videoFileId.original`.
+      if (type === 'video' && displayVideos.length > 0) {
+        dispatch(
+          setLocalVideoThumbnails({
+            postId: response.postId,
+            // Only frames that actually decoded: an entry with no thumbnail
+            // would still satisfy the feed's lookup and suppress its own
+            // pending state, leaving the frame blank instead of showing the
+            // play affordance over a plain background.
+            videos: toLocalVideoThumbnails(displayVideos),
+          })
+        );
+      }
       if (
         targetType === 'community' &&
         (effectiveCommunity?.postSetting === 'ADMIN_REVIEW_POST_REQUIRED' ||
@@ -480,6 +601,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     mentionUsers,
     mentionsPosition,
     onPressClose,
+    setLocalVideoThumbnails,
     post,
     showToastMessage,
     targetId,
@@ -513,6 +635,14 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
       return {
         url: url,
         fileName: fileName,
+        // Camera captures land on a freshly generated temp path, so the path
+        // itself is the identity: unique per shot, and stable once the upload
+        // rewrites `url` to the remote one. Deliberately no
+        // `localFileName` — two shots of the same scene are two distinct
+        // attachments and must never de-duplicate against each other, nor
+        // against a library pick that happens to share a basename.
+        localId: url,
+        localUrl: url,
         fileId: '',
         isUploaded: false,
       };
@@ -528,12 +658,18 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
 
   const pickCamera = useCallback(
     async (mediaType: 'mixed' | 'photo' | 'video') => {
-      if (mediaType === 'photo' && displayImages.length === 10)
+      if (
+        mediaType === 'photo' &&
+        displayImages.length >= MAX_MEDIA_ATTACHMENTS
+      )
         return Alert.alert(
           'Maximum upload limit reached',
           "You've reached the upload limit of 10 images. Any additional images will not be saved."
         );
-      if (mediaType === 'video' && displayVideos.length === 10)
+      if (
+        mediaType === 'video' &&
+        displayVideos.length >= MAX_MEDIA_ATTACHMENTS
+      )
         return Alert.alert(
           'Maximum upload limit reached',
           "You've reached the upload limit of 10 videos. Any additional videos will not be saved."
@@ -574,74 +710,141 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     [displayImages.length, displayVideos.length, processMedia]
   );
   const onPressCamera = useCallback(async () => {
-    if (displayImages.length > 0) return pickCamera('photo');
-    if (displayVideos.length > 0) return pickCamera('video');
+    // The camera button is always rendered — unlike photo/video, neither
+    // attachment bar hides it on `chosenMediaType` — so this is the one entry
+    // point that must decide the capture type itself. Keying it on the staged
+    // arrays alone offered both types while an edited post's media was still
+    // hydrating, which is how a video could be shot onto an image post.
+    if (activeMediaType === mediaAttachment.image) return pickCamera('photo');
+    if (activeMediaType === mediaAttachment.video) return pickCamera('video');
     if (Platform.OS === 'ios') return pickCamera('mixed');
     Alert.alert('Open Camera', null, [
       { text: 'Photo', onPress: async () => pickCamera('photo') },
       { text: 'Video', onPress: async () => pickCamera('video') },
     ]);
-  }, [displayImages.length, displayVideos.length, pickCamera]);
+  }, [activeMediaType, 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';
+      // A post holds one media type. The bar hides the mismatched button, but
+      // guard the entry point too so a tap landing before the button updates
+      // can't replace the existing attachments with the other type.
+      const pickedType = isPhoto
+        ? mediaAttachment.image
+        : mediaAttachment.video;
+      if (activeMediaType && activeMediaType !== pickedType) return;
+      const current = isPhoto ? displayImages.length : displayVideos.length;
+      if (current >= MAX_MEDIA_ATTACHMENTS)
+        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: MAX_MEDIA_ATTACHMENTS - current,
+        // Required for `asset.id`, which is what recognises a re-pick of an
+        // asset already staged. Without it the iOS picker builds its
+        // PHPickerConfiguration without a photo library, so results carry no
+        // assetIdentifier and the native side never resolves a PHAsset —
+        // leaving `id` undefined and the fallback key, `fileName`, a fresh
+        // UUID per pick. Both dedupe keys were therefore unique every time
+        // and picking the same photo twice staged it twice. Android was
+        // unaffected: its filename is the MediaStore display name, stable
+        // across picks.
+        includeExtra: true,
       });
-    }
-  }, [displayImages.length, processMedia]);
+      if (result.didCancel || !result.assets?.length) return;
 
-  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);
-        }
-        return updatedArray;
+      // iOS video is the one pick whose dims cannot be trusted: the picker
+      // reports the track's stored `naturalSize` with no rotation alongside
+      // it, so a portrait iPhone clip arrives as 1920×1080 and would
+      // classify the frame 16:9 (PDT-4904). Images on both platforms, and
+      // Android video (its extractor swaps w/h on 90°/270°), are already
+      // display-oriented and unaffected. With no rotation to correct the iOS
+      // value by, carry nothing and let SelectedMediaComponent measure the
+      // generated thumbnail, which is a rendered frame.
+      const isIosVideoDimsUnusable = !isPhoto && Platform.OS === 'ios';
+      const candidates = (result.assets ?? []).flatMap((asset) => {
+        if (!asset.uri) return [];
+        const fileName =
+          asset.fileName ?? asset.uri.substring(asset.uri.lastIndexOf('/') + 1);
+        return [
+          {
+            url: asset.uri,
+            fileName,
+            // `asset.id` is the library's own identifier for the asset (PHAsset
+            // localIdentifier / MediaStore id) and is the one key that survives
+            // the picker copying the pick to a new temp uri every time. It is
+            // not populated by every picker configuration, so fall back to the
+            // file name and keep the name as a second key either way — that is
+            // what catches a re-pick when no id came back.
+            localId: asset.id ?? fileName,
+            localUrl: asset.uri,
+            localFileName: fileName,
+            fileId: '',
+            isUploaded: false,
+            width: isIosVideoDimsUnusable ? undefined : asset.width,
+            height: isIosVideoDimsUnusable ? undefined : asset.height,
+          },
+        ];
       });
-    }
-  }, [displayVideos.length, processMedia]);
+
+      // Stage the picks and claim their upload slots in one go. Staging alone
+      // used to flip `isInputValid` true on the very next render — the frames
+      // exist, and `uploadingSources` is still empty because each child only
+      // registers from its own mount effect — so Post sat enabled for ~940 ms
+      // with nothing uploaded and a quick tap posted media that had no fileId
+      // yet. Seeding here makes "staged" and "gated" the same update; children
+      // still clear their own entry when they finish, and the unmount cleanup
+      // still covers a frame removed mid-flight.
+      const staged = isPhoto ? displayImages : displayVideos;
+      const accepted = appendWithinCap(
+        staged,
+        dedupeMediaPicks(staged, candidates)
+      );
+      // Only the entries that actually survived dedupe and the cap — seeding a
+      // key no child will ever mount for would leave Post disabled forever.
+      const newlyStaged = accepted.slice(staged.length);
+      const setter = isPhoto ? setDisplayImages : setDisplayVideos;
+      setter(accepted);
+      setUploadingSources((prev) =>
+        newlyStaged.reduce(
+          (acc, item) => toggleUploadingSource(acc, item.url, true),
+          prev
+        )
+      );
+    },
+    [activeMediaType, displayImages, displayVideos]
+  );
+
+  const onPressImage = useCallback(
+    () => pickFromLibrary('photo'),
+    [pickFromLibrary]
+  );
+
+  const onPressVideo = useCallback(
+    () => pickFromLibrary('video'),
+    [pickFromLibrary]
+  );
+
+  // Children report their own upload start/end keyed by `source`, and a child
+  // that unmounts mid-upload (frame removed while still uploading) clears its
+  // own entry from its cleanup — otherwise the set would never empty and Post
+  // would stay disabled forever.
+  const handleUploadingChange = useCallback(
+    (uploading: boolean, source: string) => {
+      setUploadingSources((prev) =>
+        toggleUploadingSource(prev, source, uploading)
+      );
+    },
+    []
+  );
 
   const handleImageUploadError = useCallback(
     (hasError: boolean, source: string) => {
@@ -676,7 +879,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const handleOnCloseImage = useCallback(
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
-      setDeletedPostIds((prev) => [...prev, postId]);
+      if (postId) setDeletedPostIds((prev) => [...prev, postId]);
       setImageErrors((prev) => {
         const newSet = new Set(prev);
         newSet.delete(originalPath);
@@ -694,7 +897,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const handleOnCloseVideo = useCallback(
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
-      setDeletedPostIds((prev) => [...prev, postId]);
+      if (postId) setDeletedPostIds((prev) => [...prev, postId]);
       setVideoErrors((prev) => {
         const newSet = new Set(prev);
         newSet.delete(originalPath);
@@ -710,19 +913,22 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
   const handleOnFinishImage = useCallback(
-    (fileId: string, fileUrl: string, fileName: string, index: number) => {
+    (
+      fileId: string,
+      fileUrl: string,
+      fileName: string,
+      _index: number,
+      originalPath: string
+    ) => {
       setHasChangedAttachment(true);
-      const imageObject: IDisplayImage = {
-        url: fileUrl,
-        fileId: fileId,
-        fileName: fileName,
-        isUploaded: true,
-      };
-      setDisplayImages((prevData) => {
-        const newData = [...prevData];
-        newData[index] = imageObject;
-        return newData;
-      });
+      setDisplayImages((prevData) =>
+        applyFinishedUpload(prevData, originalPath, {
+          url: fileUrl,
+          fileId: fileId,
+          fileName: fileName,
+          isUploaded: true,
+        })
+      );
     },
     []
   );
@@ -731,37 +937,41 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
       fileId: string,
       fileUrl: string,
       fileName: string,
-      index: number,
-      _,
+      _index: number,
+      originalPath: string,
       thumbnail: string
     ) => {
       setHasChangedAttachment(true);
-      const imageObject: IDisplayImage = {
-        url: fileUrl,
-        fileId: fileId,
-        fileName: fileName,
-        isUploaded: true,
-        thumbNail: thumbnail,
-      };
-      setDisplayVideos((prevData) => {
-        const newData = [...prevData];
-        newData[index] = imageObject;
-        return newData;
-      });
+      setDisplayVideos((prevData) =>
+        applyFinishedUpload(prevData, originalPath, {
+          url: fileUrl,
+          fileId: fileId,
+          fileName: fileName,
+          isUploaded: true,
+          thumbNail: thumbnail,
+        })
+      );
     },
     []
   );
 
+  // 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 >= MAX_MEDIA_ATTACHMENTS ||
+    displayVideos.length >= MAX_MEDIA_ATTACHMENTS;
+
   const renderDetailedAttachment = useCallback(() => {
-    if (isEditMode) return null;
+    if (editChildrenIncomplete) return null;
     if (shouldShowDetailAttachment) {
       return (
         <AmityDetailedMediaAttachmentComponent
           onPressCamera={onPressCamera}
           onPressImage={onPressImage}
           onPressVideo={onPressVideo}
-          chosenMediaType={chosenMediaType}
+          chosenMediaType={activeMediaType}
           onHeightChange={setAttachmentBarHeight}
+          disabled={isMediaCapReached}
         />
       );
     }
@@ -770,13 +980,15 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         onPressCamera={onPressCamera}
         onPressImage={onPressImage}
         onPressVideo={onPressVideo}
-        chosenMediaType={chosenMediaType}
+        chosenMediaType={activeMediaType}
         onHeightChange={setAttachmentBarHeight}
+        disabled={isMediaCapReached}
       />
     );
   }, [
-    chosenMediaType,
-    isEditMode,
+    activeMediaType,
+    editChildrenIncomplete,
+    isMediaCapReached,
     onPressCamera,
     onPressImage,
     onPressVideo,
@@ -835,54 +1047,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}
+                onUploadingChange={handleUploadingChange}
               />
             )}
             {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}
+                onUploadingChange={handleUploadingChange}
               />
             )}
           </View>