@amityco/react-native-social-uikit 4.1.0 → 4.1.1-21d3e899.0

package/lib/module/social/elements/PostMediaElement/PostMediaElement.js

@@ -0,0 +1,237 @@
+import { useMemo, useRef, useState } from 'react';
+import { Image, Pressable, ScrollView, useWindowDimensions, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { Typography } from '../../../core/components/Typography/Typography';
+import useAuth from '../../../core/hooks/useAuth';
+import { videoControlIcon, brokenImageIcon } from '../../../core/assets/icons/xml';
+import { getFrameRatio, getVideoDisplayDims, FRAME_RATIO_VALUE, DEFAULT_FRAME_RATIO } from '../../utils/getFrameRatio';
+import { getIndicatorConfig } from '../../utils/getIndicatorConfig';
+import { useStyles } from './styles';
+function isMediaPost(post) {
+  return post.dataType === 'image' || post.dataType === 'video';
+}
+function getAttachmentRatio(post) {
+  if (!post) return DEFAULT_FRAME_RATIO;
+  if (post.dataType === 'image') {
+    const image = post.getImageInfo();
+    return getFrameRatio(image === null || image === void 0 ? void 0 : image.getWidth(), image === null || image === void 0 ? void 0 : image.getHeight());
+  }
+  const video = post.getVideoInfo();
+  const {
+    width,
+    height
+  } = getVideoDisplayDims({
+    width: video === null || video === void 0 ? void 0 : video.getWidth(),
+    height: video === null || video === void 0 ? void 0 : video.getHeight(),
+    rotation: video === null || video === void 0 ? void 0 : video.getRotation()
+  });
+  return getFrameRatio(width, height);
+}
+export function PostMediaElement({
+  posts,
+  onImageClick,
+  onVideoClick,
+  controlsRef,
+  loading = false
+}) {
+  const styles = useStyles();
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const [current, setCurrent] = useState(0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const scrollRef = useRef(null);
+  const mediaPosts = useMemo(() => (posts ?? []).filter(isMediaPost), [posts]);
+  const ratio = useMemo(() => getAttachmentRatio(mediaPosts[0]), [mediaPosts]);
+  if (mediaPosts.length === 0) {
+    if (!loading) return null;
+    // Loading placeholder: a full-bleed frame in the base-shade4 colour, so the
+    // media area doesn't flash blank before the child posts resolve.
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia__track
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.postMedia__frame, {
+        aspectRatio: FRAME_RATIO_VALUE[DEFAULT_FRAME_RATIO]
+      }]
+    })));
+  }
+  const total = mediaPosts.length;
+  const isCarousel = total > 1;
+  const aspectRatio = FRAME_RATIO_VALUE[ratio];
+  // The carousel is full-bleed (screen width); use that immediately so the
+  // ScrollView renders without waiting for onLayout — otherwise there is an
+  // empty block between the placeholder and the first frame.
+  const slideWidth = trackWidth || screenWidth;
+  const handleFrameClick = index => {
+    const post = mediaPosts[index];
+    if (post.dataType === 'image') onImageClick(index);else onVideoClick(index);
+  };
+  const onLayout = event => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+  const onMomentumScrollEnd = event => {
+    if (!slideWidth) return;
+    const nextIndex = Math.round(event.nativeEvent.contentOffset.x / slideWidth);
+    if (nextIndex !== current) setCurrent(nextIndex);
+  };
+  if (controlsRef) {
+    controlsRef.current = {
+      slideTo: index => {
+        var _scrollRef$current;
+        (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
+          x: index * slideWidth,
+          animated: false
+        });
+        setCurrent(index);
+      }
+    };
+  }
+  if (!isCarousel) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia__track,
+      onLayout: onLayout
+    }, /*#__PURE__*/React.createElement(MediaFrame, {
+      post: mediaPosts[0],
+      aspectRatio: aspectRatio,
+      onPress: () => handleFrameClick(0)
+    })));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__track,
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    ref: scrollRef,
+    horizontal: true,
+    pagingEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: 16,
+    decelerationRate: "fast"
+  }, mediaPosts.map((post, index) => /*#__PURE__*/React.createElement(View, {
+    key: post.postId,
+    style: [styles.postMedia__slide, {
+      width: slideWidth
+    }]
+  }, /*#__PURE__*/React.createElement(MediaFrame, {
+    post: post,
+    aspectRatio: aspectRatio,
+    onPress: () => handleFrameClick(index)
+  })))), /*#__PURE__*/React.createElement(PositionCounter, {
+    current: current,
+    total: total
+  })), /*#__PURE__*/React.createElement(PaginationIndicator, {
+    current: current,
+    total: total
+  }));
+}
+function PaginationIndicator({
+  current,
+  total
+}) {
+  const styles = useStyles();
+  const {
+    dots
+  } = getIndicatorConfig(current, total);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__indicator
+  }, dots.map(dot => /*#__PURE__*/React.createElement(View, {
+    key: dot.key,
+    style: styles.postMedia__dotSlot
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.postMedia__dot, dot.state === 'active' ? styles.postMedia__dotActive : dot.state === 'edge' ? styles.postMedia__dotEdge : styles.postMedia__dotInactive]
+  }))));
+}
+function PositionCounter({
+  current,
+  total
+}) {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__counter
+  }, /*#__PURE__*/React.createElement(Typography.Body, {
+    style: styles.postMedia__counterLabel
+  }, current + 1, "/", total));
+}
+function MediaFrame({
+  post,
+  aspectRatio,
+  onPress
+}) {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: [styles.postMedia__frame, {
+      aspectRatio
+    }]
+  }, post.dataType === 'image' ? /*#__PURE__*/React.createElement(ImageMedia, {
+    post: post
+  }) : /*#__PURE__*/React.createElement(VideoMedia, {
+    post: post
+  }));
+}
+function ImageMedia({
+  post
+}) {
+  var _post$getImageInfo;
+  const styles = useStyles();
+  const {
+    apiRegion
+  } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const fileId = (_post$getImageInfo = post.getImageInfo()) === null || _post$getImageInfo === void 0 ? void 0 : _post$getImageInfo.fileId;
+  const url = fileId ? `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=large` : undefined;
+  if (!url || isBroken) return /*#__PURE__*/React.createElement(BrokenFrame, null);
+  return /*#__PURE__*/React.createElement(Image, {
+    style: styles.postMedia__media,
+    source: {
+      uri: url
+    },
+    resizeMode: "cover",
+    onError: () => setIsBroken(true)
+  });
+}
+function VideoMedia({
+  post
+}) {
+  const styles = useStyles();
+  const {
+    apiRegion
+  } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const data = post.data;
+  const thumbnailFileId = data === null || data === void 0 ? void 0 : data.thumbnailFileId;
+  const url = thumbnailFileId ? `https://api.${apiRegion}.amity.co/api/v3/files/${thumbnailFileId}/download?size=large` : undefined;
+  if (!url || isBroken) return /*#__PURE__*/React.createElement(BrokenFrame, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
+    style: styles.postMedia__media,
+    source: {
+      uri: url
+    },
+    resizeMode: "cover",
+    onError: () => setIsBroken(true)
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__playButton
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    xml: videoControlIcon,
+    width: "40",
+    height: "40"
+  })));
+}
+function BrokenFrame() {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__broken
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    xml: brokenImageIcon(),
+    width: 32,
+    height: 32
+  }));
+}
+//# sourceMappingURL=PostMediaElement.js.map

package/lib/module/social/elements/PostMediaElement/PostMediaElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useRef","useState","Image","Pressable","ScrollView","useWindowDimensions","View","SvgXml","Typography","useAuth","videoControlIcon","brokenImageIcon","getFrameRatio","getVideoDisplayDims","FRAME_RATIO_VALUE","DEFAULT_FRAME_RATIO","getIndicatorConfig","useStyles","isMediaPost","post","dataType","getAttachmentRatio","image","getImageInfo","getWidth","getHeight","video","getVideoInfo","width","height","rotation","getRotation","PostMediaElement","posts","onImageClick","onVideoClick","controlsRef","loading","styles","screenWidth","current","setCurrent","trackWidth","setTrackWidth","scrollRef","mediaPosts","filter","ratio","length","React","createElement","style","postMedia","postMedia__track","postMedia__frame","aspectRatio","total","isCarousel","slideWidth","handleFrameClick","index","onLayout","event","nativeEvent","layout","onMomentumScrollEnd","nextIndex","Math","round","contentOffset","x","slideTo","_scrollRef$current","scrollTo","animated","MediaFrame","onPress","ref","horizontal","pagingEnabled","showsHorizontalScrollIndicator","scrollEventThrottle","decelerationRate","map","key","postId","postMedia__slide","PositionCounter","PaginationIndicator","dots","postMedia__indicator","dot","postMedia__dotSlot","postMedia__dot","state","postMedia__dotActive","postMedia__dotEdge","postMedia__dotInactive","postMedia__counter","Body","postMedia__counterLabel","ImageMedia","VideoMedia","_post$getImageInfo","apiRegion","isBroken","setIsBroken","fileId","url","undefined","BrokenFrame","postMedia__media","source","uri","resizeMode","onError","data","thumbnailFileId","Fragment","postMedia__playButton","xml","postMedia__broken"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/PostMediaElement.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/elements/PostMediaElement/index.js

@@ -0,0 +1,2 @@
+export { PostMediaElement } from './PostMediaElement';
+//# sourceMappingURL=index.js.map

package/lib/module/social/elements/PostMediaElement/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PostMediaElement"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/index.tsx"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/social/elements/PostMediaElement/styles.js

@@ -0,0 +1,110 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+// Values map 1:1 from web PR #1830 PostMediaElement.module.css (1rem = 16dp).
+// Colors resolve through theme tokens (web CSS variables), never hardcoded.
+export const useStyles = () => {
+  const theme = useTheme();
+  const styles = StyleSheet.create({
+    postMedia: {
+      // Full-bleed: cancel the post card's 16px horizontal padding so the media
+      // spans the full card width (web PR #1830/#1834: width calc(100% + 2rem),
+      // margin-left/right -1rem).
+      marginHorizontal: -16,
+      paddingVertical: 8 // web: padding 0.5rem 0
+    },
+    postMedia__track: {
+      position: 'relative',
+      width: '100%'
+    },
+    postMedia__slide: {
+      // width is set dynamically to the measured track width so paging aligns
+    },
+    postMedia__frame: {
+      width: '100%',
+      overflow: 'hidden',
+      // web: no border-radius; background var(--asc-color-base-shade4)
+      backgroundColor: theme.colors.baseShade4
+    },
+    postMedia__media: {
+      width: '100%',
+      height: '100%'
+    },
+    postMedia__playButton: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      // web: 2.5rem (40dp), centred via translate(-50%, -50%)
+      width: 40,
+      height: 40,
+      transform: [{
+        translateX: -20
+      }, {
+        translateY: -20
+      }],
+      zIndex: 1
+    },
+    postMedia__broken: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.baseShade4
+    },
+    postMedia__counter: {
+      position: 'absolute',
+      top: 8,
+      // web: 0.5rem
+      right: 8,
+      // web: 0.5rem
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      // web: 0.375rem
+      paddingHorizontal: 12,
+      // web: 0.75rem
+      borderRadius: 999,
+      // web: --asc-border-radius-full
+      backgroundColor: 'rgba(0,0,0,0.5)' // web: --asc-color-transparent-black (#00000080)
+    },
+    postMedia__counterLabel: {
+      color: '#FFFFFF' // web: var(--asc-color-white)
+    },
+    postMedia__indicator: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      // web: gap 0.25rem
+      height: 6,
+      // web: height 0.375rem
+      marginTop: 12 // web: parent .postMedia column gap 0.75rem
+    },
+    postMedia__dotSlot: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 6,
+      // web: 0.375rem
+      height: 6 // web: 0.375rem
+    },
+    postMedia__dot: {
+      borderRadius: 999,
+      // web: border-radius 50%
+      backgroundColor: theme.colors.baseShade4 // inactive/edge: base-shade4
+    },
+    postMedia__dotActive: {
+      width: 6,
+      height: 6,
+      backgroundColor: theme.colors.base // web: var(--asc-color-base-default)
+    },
+    postMedia__dotInactive: {
+      width: 6,
+      height: 6
+    },
+    postMedia__dotEdge: {
+      width: 3,
+      // web: 0.1875rem
+      height: 3
+    }
+  });
+  return styles;
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/elements/PostMediaElement/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useTheme","useStyles","theme","styles","create","postMedia","marginHorizontal","paddingVertical","postMedia__track","position","width","postMedia__slide","postMedia__frame","overflow","backgroundColor","colors","baseShade4","postMedia__media","height","postMedia__playButton","top","left","transform","translateX","translateY","zIndex","postMedia__broken","flex","alignItems","justifyContent","postMedia__counter","right","paddingHorizontal","borderRadius","postMedia__counterLabel","color","postMedia__indicator","flexDirection","gap","marginTop","postMedia__dotSlot","postMedia__dot","postMedia__dotActive","base","postMedia__dotInactive","postMedia__dotEdge"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oBAAoB;AAG7C;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGF,QAAQ,CAAa,CAAC;EAEpC,MAAMG,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACT;MACA;MACA;MACAC,gBAAgB,EAAE,CAAC,EAAE;MACrBC,eAAe,EAAE,CAAC,CAAE;IACtB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE;IACT,CAAC;IACDC,gBAAgB,EAAE;MAChB;IAAA,CACD;IACDC,gBAAgB,EAAE;MAChBF,KAAK,EAAE,MAAM;MACbG,QAAQ,EAAE,QAAQ;MAClB;MACAC,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC;IAChC,CAAC;IACDC,gBAAgB,EAAE;MAChBP,KAAK,EAAE,MAAM;MACbQ,MAAM,EAAE;IACV,CAAC;IACDC,qBAAqB,EAAE;MACrBV,QAAQ,EAAE,UAAU;MACpBW,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACX;MACAX,KAAK,EAAE,EAAE;MACTQ,MAAM,EAAE,EAAE;MACVI,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAE,CAAC;MAAG,CAAC,EAAE;QAAEC,UAAU,EAAE,CAAC;MAAG,CAAC,CAAC;MACrDC,MAAM,EAAE;IACV,CAAC;IACDC,iBAAiB,EAAE;MACjBC,IAAI,EAAE,CAAC;MACPC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBf,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC;IAChC,CAAC;IACDc,kBAAkB,EAAE;MAClBrB,QAAQ,EAAE,UAAU;MACpBW,GAAG,EAAE,CAAC;MAAE;MACRW,KAAK,EAAE,CAAC;MAAE;MACVH,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBtB,eAAe,EAAE,CAAC;MAAE;MACpByB,iBAAiB,EAAE,EAAE;MAAE;MACvBC,YAAY,EAAE,GAAG;MAAE;MACnBnB,eAAe,EAAE,iBAAiB,CAAE;IACtC,CAAC;IACDoB,uBAAuB,EAAE;MACvBC,KAAK,EAAE,SAAS,CAAE;IACpB,CAAC;IACDC,oBAAoB,EAAE;MACpBC,aAAa,EAAE,KAAK;MACpBT,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBS,GAAG,EAAE,CAAC;MAAE;MACRpB,MAAM,EAAE,CAAC;MAAE;MACXqB,SAAS,EAAE,EAAE,CAAE;IACjB,CAAC;IACDC,kBAAkB,EAAE;MAClBZ,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBnB,KAAK,EAAE,CAAC;MAAE;MACVQ,MAAM,EAAE,CAAC,CAAE;IACb,CAAC;IACDuB,cAAc,EAAE;MACdR,YAAY,EAAE,GAAG;MAAE;MACnBnB,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC,UAAU,CAAE;IAC5C,CAAC;IACD0B,oBAAoB,EAAE;MACpBhC,KAAK,EAAE,CAAC;MACRQ,MAAM,EAAE,CAAC;MACTJ,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAAC4B,IAAI,CAAE;IACtC,CAAC;IACDC,sBAAsB,EAAE;MACtBlC,KAAK,EAAE,CAAC;MACRQ,MAAM,EAAE;IACV,CAAC;IACD2B,kBAAkB,EAAE;MAClBnC,KAAK,EAAE,CAAC;MAAE;MACVQ,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,OAAOf,MAAM;AACf,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import { Alert, FlatList, Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, TouchableOpacity, View, StatusBar, Linking } from 'react-native';
+import { Alert, Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, TouchableOpacity, View, StatusBar, Linking } from 'react-native';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { ComponentID, ElementID, ImageSizeState, PageID, mediaAttachment } from '../../../enums';
 import { useAmityPage, useRequestPermission, useUser, isModerator } from '../../../hooks';
@@ -15,9 +15,9 @@ 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 { launchCamera } from 'react-native-image-picker';
+import { SelectedMediaComponent } from '../../../components/SelectedMediaComponent';
+import { MediaSelector } from '../../../components/MediaSelector';
 import { CommunityRepository, PostRepository, UserRepository } from '@amityco/ts-sdk-react-native';
 import { useFile } from '../../../hooks';
 import useMention from '../../../hooks/useMention';
@@ -85,6 +85,7 @@ const AmityPostComposerPage = ({
   const [isSwipeup, setIsSwipeup] = useState(true);
   const [deletedPostIds, setDeletedPostIds] = useState([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [mediaSelectorType, setMediaSelectorType] = useState(null);
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
   const [imageErrors, setImageErrors] = useState(new Set());
   const [videoErrors, setVideoErrors] = useState(new Set());
@@ -427,45 +428,30 @@ const AmityPostComposerPage = ({
     }]);
   }, [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 = await launchImageLibrary({
-      mediaType: 'photo',
-      quality: 1,
-      selectionLimit: 10 - displayImages.length
-    });
-    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]);
+    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.");
+    setMediaSelectorType('photo');
+  }, [displayImages.length]);
   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 (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.");
+    setMediaSelectorType('video');
+  }, [displayVideos.length]);
+
+  // Receives new URIs from the custom media selector. Silently drops duplicates
+  // (already-selected files) and caps the total at 10, per PDT-4314.
+  const handleSelectedMedia = useCallback(uris => {
+    const type = mediaSelectorType;
+    setMediaSelectorType(null);
+    if (!type || uris.length === 0) return;
+    const mediaOj = processMedia(uris);
+    if (!mediaOj) return;
+    const setter = type === 'photo' ? setDisplayImages : setDisplayVideos;
+    setter(prev => {
+      const existingUrls = new Set(prev.map(m => m.url));
+      const additions = mediaOj.filter(m => !existingUrls.has(m.url));
+      const updated = [...prev, ...additions];
+      return updated.length > 10 ? updated.slice(0, 10) : updated;
     });
-    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]);
+  }, [mediaSelectorType, processMedia]);
   const handleImageUploadError = useCallback((hasError, source) => {
     setImageErrors(prev => {
       const newSet = new Set(prev);
@@ -543,6 +529,10 @@ const AmityPostComposerPage = ({
       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 >= 10 || displayVideos.length >= 10;
   const renderDetailedAttachment = useCallback(() => {
     if (isEditMode) return null;
     if (shouldShowDetailAttachment) {
@@ -551,7 +541,8 @@ const AmityPostComposerPage = ({
         onPressImage: onPressImage,
         onPressVideo: onPressVideo,
         chosenMediaType: chosenMediaType,
-        onHeightChange: setAttachmentBarHeight
+        onHeightChange: setAttachmentBarHeight,
+        disabled: isMediaCapReached
       });
     }
     return /*#__PURE__*/React.createElement(AmityMediaAttachmentComponent, {
@@ -559,9 +550,10 @@ const AmityPostComposerPage = ({
       onPressImage: onPressImage,
       onPressVideo: onPressVideo,
       chosenMediaType: chosenMediaType,
-      onHeightChange: setAttachmentBarHeight
+      onHeightChange: setAttachmentBarHeight,
+      disabled: isMediaCapReached
     });
-  }, [chosenMediaType, isEditMode, onPressCamera, onPressImage, onPressVideo, shouldShowDetailAttachment]);
+  }, [chosenMediaType, isEditMode, isMediaCapReached, onPressCamera, onPressImage, onPressVideo, shouldShowDetailAttachment]);
   if (isExcluded) return null;
   return /*#__PURE__*/React.createElement(SafeAreaView, {
     testID: accessibilityId,
@@ -601,55 +593,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,
+    setIsUploading: setIsUploading
+  }), displayVideos.length > 0 && /*#__PURE__*/React.createElement(SelectedMediaComponent, {
+    mediaType: "video",
+    media: displayVideos,
+    onClose: handleOnCloseVideo,
+    onLoadFinish: handleOnFinishVideo,
+    onUploadError: handleVideoUploadError,
+    isEditMode: isEditMode,
+    setIsUploading: setIsUploading
   }))), renderSuggestions({
     type: 'post'
   }), /*#__PURE__*/React.createElement(View, {
@@ -666,6 +625,13 @@ const AmityPostComposerPage = ({
     }
   }, renderDetailedAttachment())), /*#__PURE__*/React.createElement(StatusBar, {
     backgroundColor: themeStyles.colors.background
+  }), /*#__PURE__*/React.createElement(MediaSelector, {
+    visible: mediaSelectorType !== null,
+    mediaType: mediaSelectorType ?? 'photo',
+    existing: (mediaSelectorType === 'video' ? displayVideos : displayImages).map(m => m.url),
+    remaining: 10 - (mediaSelectorType === 'video' ? displayVideos.length : displayImages.length),
+    onClose: () => setMediaSelectorType(null),
+    onConfirm: handleSelectedMedia
   }));
 };
 export default /*#__PURE__*/memo(AmityPostComposerPage);