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

package/lib/module/social/features/post/Composer/PostComposer.js

@@ -1,5 +1,5 @@
-import { Alert, FlatList, Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, TouchableOpacity, View, StatusBar, Linking } from 'react-native';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { Alert, Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, TouchableOpacity, View, StatusBar, Linking } from 'react-native';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ComponentID, ElementID, ImageSizeState, PageID, mediaAttachment } from '../../../enums';
 import { useAmityPage, useRequestPermission, useUser, isModerator } from '../../../hooks';
 import { useStyles } from './styles';
@@ -7,21 +7,21 @@ import { AmityPostComposerMode } from '../../../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 { launchImageLibrary, launchCamera } from 'react-native-image-picker';
-import LoadingImage from '../../../components/LoadingImage';
-import LoadingVideo from '../../../components/LoadingVideo';
-import { CommunityRepository, PostRepository, UserRepository } from '@amityco/ts-sdk-react-native';
-import { useFile } from '../../../hooks';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import { SelectedMediaComponent } from '../../../components/SelectedMediaComponent';
+import { CommunityRepository, FileRepository, PostRepository, UserRepository } from '@amityco/ts-sdk-react-native';
 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, MAXIMUM_POST_CHARACTERS } from '../../../../core/constants';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { useUIKitDispatch } from '../../../../core/stores/store';
@@ -34,7 +34,7 @@ const AmityPostComposerPage = ({
   community,
   post
 }) => {
-  var _post$data;
+  var _post$data, _post$children;
   useRequestPermission({
     onRequestPermissionFailed: () => {
       Linking.openSettings();
@@ -53,9 +53,6 @@ const AmityPostComposerPage = ({
     pageId
   });
   const styles = useStyles(themeStyles);
-  const {
-    getImage
-  } = useFile();
   const isEditMode = mode === AmityPostComposerMode.EDIT;
   const navigation = useNavigation();
   const {
@@ -76,6 +73,9 @@ const AmityPostComposerPage = ({
     showToastMessage,
     hideToastMessage
   } = uiSlice.actions;
+  const {
+    setLocalVideoThumbnails
+  } = localVideoThumbnailSlice.actions;
   const [inputMessage, setInputMessage] = useState((post === null || post === void 0 || (_post$data = post.data) === null || _post$data === void 0 ? void 0 : _post$data.text) ?? '');
   const [mentionsPosition, setMentionsPosition] = useState([]);
   const [chosenMediaType, setChosenMediaType] = useState(null);
@@ -84,7 +84,14 @@ const AmityPostComposerPage = ({
   const [mentionUsers, setMentionUsers] = useState([]);
   const [isSwipeup, setIsSwipeup] = useState(true);
   const [deletedPostIds, setDeletedPostIds] = useState([]);
-  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(new Set());
+  const isUploading = uploadingSources.size > 0;
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
   const [imageErrors, setImageErrors] = useState(new Set());
   const [videoErrors, setVideoErrors] = useState(new Set());
@@ -111,7 +118,7 @@ const AmityPostComposerPage = ({
   const effectiveCommunity = community ?? fetchedCommunity;
   const privateCommunityId = !(effectiveCommunity !== null && effectiveCommunity !== void 0 && effectiveCommunity.isPublic) && (effectiveCommunity === null || effectiveCommunity === void 0 ? void 0 : effectiveCommunity.communityId);
   const title = isEditMode ? 'Edit Post' : (effectiveCommunity === null || effectiveCommunity === void 0 ? void 0 : effectiveCommunity.displayName) ?? 'My Timeline';
-  const isInputValid = !isUploading && imageErrors.size === 0 && videoErrors.size === 0 && inputMessage.trim().length <= MAXIMUM_POST_CHARACTERS && (inputMessage.trim().length > 0 || displayImages.length > 0 || displayVideos.length > 0) && (displayImages.length <= 10 || displayVideos.length <= 10);
+  const isInputValid = !isUploading && imageErrors.size === 0 && videoErrors.size === 0 && inputMessage.trim().length <= MAXIMUM_POST_CHARACTERS && (inputMessage.trim().length > 0 || displayImages.length > 0 || displayVideos.length > 0) && (displayImages.length <= MAX_MEDIA_ATTACHMENTS || displayVideos.length <= MAX_MEDIA_ATTACHMENTS);
   const {
     renderInput,
     renderSuggestions
@@ -132,8 +139,26 @@ const AmityPostComposerPage = ({
       }]);
     }
   });
+
+  // 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 === null || post === void 0 ? void 0 : 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 === null || post === void 0 || (_post$children = post.children) === null || _post$children === void 0 ? void 0 : _post$children.length) ?? 0);
   const checkIsEditValid = () => {
     var _post$data2;
+    // `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 === null || post === void 0 || (_post$data2 = post.data) === null || _post$data2 === void 0 ? void 0 : _post$data2.text) || hasChangedAttachment);
   };
   const parsePostText = useCallback((text, mentionUsersArr) => {
@@ -144,50 +169,82 @@ const AmityPostComposerPage = ({
     });
     return parsedText;
   }, []);
-  const getPostInfo = useCallback(async postArray => {
+
+  // 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, fileId) => {
+    var _file$data;
+    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 === null || file === void 0 || (_file$data = file.data) === null || _file$data === void 0 ? void 0 : _file$data.fileUrl;
+    return resolved ? FileRepository.fileUrlWithSize(resolved, ImageSizeState.full) : undefined;
+  }, []);
+  const getPostInfo = useCallback(async response => {
     try {
-      const response = await Promise.all(postArray.map(async id => {
-        const {
-          data
-        } = await getPostById(id);
-        return data;
-      }));
       const images = [];
       const videos = [];
       for (const item of response) {
         if ((item === null || item === void 0 ? void 0 : item.dataType) === 'image') {
-          var _item$data;
-          const fileId = item === null || item === void 0 || (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.fileId;
-          const url = await getImage({
-            fileId: fileId,
-            imageSize: ImageSizeState.full
-          });
+          var _data, _item$getImageInfo, _imageInfo$getWidth, _imageInfo$getHeight;
+          const fileId = item === null || item === void 0 || (_data = item.data) === null || _data === void 0 ? void 0 : _data.fileId;
+          // Dimensions for composer frame-ratio classification (REQ-003d).
+          const imageInfo = item === null || item === void 0 || (_item$getImageInfo = item.getImageInfo) === null || _item$getImageInfo === void 0 ? void 0 : _item$getImageInfo.call(item);
+          const url = await resolveFileUrl(imageInfo === null || imageInfo === void 0 ? void 0 : 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
+            postId: item.postId,
+            width: imageInfo === null || imageInfo === void 0 || (_imageInfo$getWidth = imageInfo.getWidth) === null || _imageInfo$getWidth === void 0 ? void 0 : _imageInfo$getWidth.call(imageInfo),
+            height: imageInfo === null || imageInfo === void 0 || (_imageInfo$getHeight = imageInfo.getHeight) === null || _imageInfo$getHeight === void 0 ? void 0 : _imageInfo$getHeight.call(imageInfo)
           });
         } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'video') {
-          var _item$data2, _item$data3, _fileUrls$, _fileUrls$2;
-          const fileId = item === null || item === void 0 || (_item$data2 = item.data) === null || _item$data2 === void 0 || (_item$data2 = _item$data2.videoFileId) === null || _item$data2 === void 0 ? void 0 : _item$data2.original;
-          const thumbnailFileId = item === null || item === void 0 || (_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.thumbnailFileId;
-          const fileUrls = await Promise.allSettled([fileId, thumbnailFileId].map(async id => {
-            return await getImage({
-              fileId: id,
-              imageSize: ImageSizeState.full
-            });
-          }));
+          var _videoData$videoFileI, _item$getVideoInfo, _item$getVideoThumbna, _videoInfo$getWidth, _videoInfo$getHeight, _videoInfo$getRotatio;
+          const videoData = item === null || item === void 0 ? void 0 : item.data;
+          const fileId = videoData === null || videoData === void 0 || (_videoData$videoFileI = videoData.videoFileId) === null || _videoData$videoFileI === void 0 ? void 0 : _videoData$videoFileI.original;
+          const thumbnailFileId = videoData === null || videoData === void 0 ? void 0 : videoData.thumbnailFileId;
+          // STORED dims + rotation; rotation is applied at classify time
+          // (SelectedMediaComponent REQ-003d1 / AmityVideo REQ-SDK-002).
+          const videoInfo = item === null || item === void 0 || (_item$getVideoInfo = item.getVideoInfo) === null || _item$getVideoInfo === void 0 ? void 0 : _item$getVideoInfo.call(item);
+          const thumbnailInfo = item === null || item === void 0 || (_item$getVideoThumbna = item.getVideoThumbnailInfo) === null || _item$getVideoThumbna === void 0 ? void 0 : _item$getVideoThumbna.call(item);
+          // 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 === null || videoInfo === void 0 ? void 0 : videoInfo.fileUrl, fileId), resolveFileUrl(thumbnailInfo === null || thumbnailInfo === void 0 ? void 0 : 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$ = fileUrls[0]) === null || _fileUrls$ === void 0 ? void 0 : _fileUrls$.value,
+            url,
             fileId: fileId,
             fileName: fileId,
+            localId: fileId ?? item.postId,
             isUploaded: true,
-            //@ts-ignore
-            thumbNail: (_fileUrls$2 = fileUrls[1]) === null || _fileUrls$2 === void 0 ? void 0 : _fileUrls$2.value,
-            postId: item.postId
+            thumbNail,
+            postId: item.postId,
+            width: videoInfo === null || videoInfo === void 0 || (_videoInfo$getWidth = videoInfo.getWidth) === null || _videoInfo$getWidth === void 0 ? void 0 : _videoInfo$getWidth.call(videoInfo),
+            height: videoInfo === null || videoInfo === void 0 || (_videoInfo$getHeight = videoInfo.getHeight) === null || _videoInfo$getHeight === void 0 ? void 0 : _videoInfo$getHeight.call(videoInfo),
+            rotation: videoInfo === null || videoInfo === void 0 || (_videoInfo$getRotatio = videoInfo.getRotation) === null || _videoInfo$getRotatio === void 0 ? void 0 : _videoInfo$getRotatio.call(videoInfo)
           });
         }
       }
@@ -200,14 +257,36 @@ const AmityPostComposerPage = ({
     } catch (error) {
       console.log('error: ', error);
     }
-  }, [getImage]);
+  }, [resolveFileUrl]);
   useEffect(() => {
     setDeletedPostIds([]);
     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 === null || post === void 0 ? void 0 : post.children) && getPostInfo(post === null || post === void 0 ? void 0 : post.children);
-  }, [getPostInfo, post === null || post === void 0 ? void 0 : post.children]);
+    if (editChildren.length === 0 || hasChangedAttachment) return;
+    getPostInfo(editChildren);
+  }, [getPostInfo, post === null || post === void 0 ? void 0 : 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 === null || item === void 0 ? void 0 : item.dataType) === 'image')) return mediaAttachment.image;
+    if (editChildren.some(item => (item === null || item === void 0 ? void 0 : item.dataType) === 'video')) return mediaAttachment.video;
+    return null;
+  }, [post === null || post === void 0 ? void 0 : 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, mentioneeIds) => {
     let index = 0;
     let mentions = [];
@@ -321,6 +400,21 @@ const AmityPostComposerPage = ({
         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 === null || effectiveCommunity === void 0 ? void 0 : effectiveCommunity.postSetting) === 'ADMIN_REVIEW_POST_REQUIRED' || effectiveCommunity !== null && effectiveCommunity !== void 0 && effectiveCommunity.needApprovalOnPostCreation) && !isCommunityModerator) {
         onPressClose();
         return Alert.alert('Post submitted', 'Your post has been submitted to the pending list. It will be reviewed by community moderator', [{
@@ -351,7 +445,7 @@ const AmityPostComposerPage = ({
         toastMessage: errorMessage
       }));
     }
-  }, [addPostToGlobalFeed, chosenMediaType, effectiveCommunity, deletedPostIds, dispatch, displayImages, displayVideos, hideToastMessage, inputMessage, isEditMode, isInputValid, isCommunityModerator, mentionUsers, mentionsPosition, onPressClose, post, showToastMessage, targetId, targetType, updateByPostId]);
+  }, [addPostToGlobalFeed, chosenMediaType, effectiveCommunity, deletedPostIds, dispatch, displayImages, displayVideos, hideToastMessage, inputMessage, isEditMode, isInputValid, isCommunityModerator, mentionUsers, mentionsPosition, onPressClose, setLocalVideoThumbnails, post, showToastMessage, targetId, targetType, updateByPostId]);
   let tEvents = [];
   const onSwipe = useCallback(touchEvent => {
     const swipeUp = touchEvent[0] > touchEvent[touchEvent.length - 1];
@@ -373,6 +467,14 @@ const AmityPostComposerPage = ({
       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
       };
@@ -385,8 +487,8 @@ const AmityPostComposerPage = ({
     return setChosenMediaType(null);
   }, [displayImages === null || displayImages === void 0 ? void 0 : displayImages.length, displayVideos === null || displayVideos === void 0 ? void 0 : displayVideos.length]);
   const pickCamera = useCallback(async mediaType => {
-    if (mediaType === 'photo' && 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.");
-    if (mediaType === 'video' && 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.");
+    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 >= 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.");
     try {
       const result = await launchCamera({
         mediaType: mediaType,
@@ -415,8 +517,13 @@ const AmityPostComposerPage = ({
     }
   }, [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',
@@ -425,47 +532,95 @@ const AmityPostComposerPage = ({
       text: 'Video',
       onPress: async () => pickCamera('video')
     }]);
-  }, [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.");
+  }, [activeMediaType, pickCamera]);
+
+  // 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 => {
+    var _result$assets;
+    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 = await launchImageLibrary({
-      mediaType: 'photo',
+      mediaType,
       quality: 1,
-      selectionLimit: 10 - displayImages.length
+      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
     });
-    if (!result.didCancel && result.assets && result.assets.length > 0) {
-      const imageUriArr = result.assets.map(item => item.uri);
-      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;
-      });
-    }
-  }, [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 = await launchImageLibrary({
-      mediaType: 'video',
-      quality: 1,
-      selectionLimit: 10 - displayVideos.length
+    if (result.didCancel || !((_result$assets = result.assets) !== null && _result$assets !== void 0 && _result$assets.length)) return;
+
+    // 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
+      }];
     });
-    if (!result.didCancel && result.assets && result.assets.length > 0) {
-      const videoUriArr = result.assets.map(item => item.uri);
-      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;
-      });
-    }
-  }, [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, source) => {
+    setUploadingSources(prev => toggleUploadingSource(prev, source, uploading));
+  }, []);
   const handleImageUploadError = useCallback((hasError, source) => {
     setImageErrors(prev => {
       const newSet = new Set(prev);
@@ -490,7 +645,7 @@ const AmityPostComposerPage = ({
   }, []);
   const handleOnCloseImage = useCallback((originalPath, _, postId) => {
     setHasChangedAttachment(true);
-    setDeletedPostIds(prev => [...prev, postId]);
+    if (postId) setDeletedPostIds(prev => [...prev, postId]);
     setImageErrors(prev => {
       const newSet = new Set(prev);
       newSet.delete(originalPath);
@@ -503,7 +658,7 @@ const AmityPostComposerPage = ({
   }, []);
   const handleOnCloseVideo = useCallback((originalPath, _, postId) => {
     setHasChangedAttachment(true);
-    setDeletedPostIds(prev => [...prev, postId]);
+    if (postId) setDeletedPostIds(prev => [...prev, postId]);
     setVideoErrors(prev => {
       const newSet = new Set(prev);
       newSet.delete(originalPath);
@@ -514,54 +669,50 @@ const AmityPostComposerPage = ({
       return newData;
     });
   }, []);
-  const handleOnFinishImage = useCallback((fileId, fileUrl, fileName, index) => {
+  const handleOnFinishImage = useCallback((fileId, fileUrl, fileName, _index, originalPath) => {
     setHasChangedAttachment(true);
-    const imageObject = {
+    setDisplayImages(prevData => applyFinishedUpload(prevData, originalPath, {
       url: fileUrl,
       fileId: fileId,
       fileName: fileName,
       isUploaded: true
-    };
-    setDisplayImages(prevData => {
-      const newData = [...prevData];
-      newData[index] = imageObject;
-      return newData;
-    });
+    }));
   }, []);
-  const handleOnFinishVideo = useCallback((fileId, fileUrl, fileName, index, _, thumbnail) => {
+  const handleOnFinishVideo = useCallback((fileId, fileUrl, fileName, _index, originalPath, thumbnail) => {
     setHasChangedAttachment(true);
-    const imageObject = {
+    setDisplayVideos(prevData => applyFinishedUpload(prevData, originalPath, {
       url: fileUrl,
       fileId: fileId,
       fileName: fileName,
       isUploaded: true,
       thumbNail: thumbnail
-    };
-    setDisplayVideos(prevData => {
-      const newData = [...prevData];
-      newData[index] = imageObject;
-      return newData;
-    });
+    }));
   }, []);
+
+  // 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 /*#__PURE__*/React.createElement(AmityDetailedMediaAttachmentComponent, {
         onPressCamera: onPressCamera,
         onPressImage: onPressImage,
         onPressVideo: onPressVideo,
-        chosenMediaType: chosenMediaType,
-        onHeightChange: setAttachmentBarHeight
+        chosenMediaType: activeMediaType,
+        onHeightChange: setAttachmentBarHeight,
+        disabled: isMediaCapReached
       });
     }
     return /*#__PURE__*/React.createElement(AmityMediaAttachmentComponent, {
       onPressCamera: onPressCamera,
       onPressImage: onPressImage,
       onPressVideo: onPressVideo,
-      chosenMediaType: chosenMediaType,
-      onHeightChange: setAttachmentBarHeight
+      chosenMediaType: activeMediaType,
+      onHeightChange: setAttachmentBarHeight,
+      disabled: isMediaCapReached
     });
-  }, [chosenMediaType, isEditMode, onPressCamera, onPressImage, onPressVideo, shouldShowDetailAttachment]);
+  }, [activeMediaType, editChildrenIncomplete, isMediaCapReached, onPressCamera, onPressImage, onPressVideo, shouldShowDetailAttachment]);
   if (isExcluded) return null;
   return /*#__PURE__*/React.createElement(SafeAreaView, {
     testID: accessibilityId,
@@ -601,55 +752,22 @@ const AmityPostComposerPage = ({
     style: styles.input
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.imageContainer
-  }, displayImages.length > 0 && /*#__PURE__*/React.createElement(FlatList, {
-    nestedScrollEnabled: true,
-    scrollEnabled: false,
-    data: displayImages,
-    renderItem: ({
-      item,
-      index
-    }) => {
-      if (!item) return null;
-      return /*#__PURE__*/React.createElement(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
-  }), displayVideos.length > 0 && /*#__PURE__*/React.createElement(FlatList, {
-    data: displayVideos,
-    renderItem: ({
-      item,
-      index
-    }) => {
-      if (!item) return null;
-      return /*#__PURE__*/React.createElement(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,
-        fileCount: displayVideos.length,
-        isEditMode: isEditMode,
-        postId: item.postId,
-        setIsUploading: setIsUploading
-      });
-    },
-    numColumns: 3
+  }, displayImages.length > 0 && /*#__PURE__*/React.createElement(SelectedMediaComponent, {
+    mediaType: "image",
+    media: displayImages,
+    onClose: handleOnCloseImage,
+    onLoadFinish: handleOnFinishImage,
+    onUploadError: handleImageUploadError,
+    isEditMode: isEditMode,
+    onUploadingChange: handleUploadingChange
+  }), displayVideos.length > 0 && /*#__PURE__*/React.createElement(SelectedMediaComponent, {
+    mediaType: "video",
+    media: displayVideos,
+    onClose: handleOnCloseVideo,
+    onLoadFinish: handleOnFinishVideo,
+    onUploadError: handleVideoUploadError,
+    isEditMode: isEditMode,
+    onUploadingChange: handleUploadingChange
   }))), renderSuggestions({
     type: 'post'
   }), /*#__PURE__*/React.createElement(View, {