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

package/src/social/elements/PostMediaElement/PostMediaElement.tsx

@@ -0,0 +1,318 @@
+import { useMemo, useRef, useState, type MutableRefObject } from 'react';
+import {
+  Image,
+  ImageStyle,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  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,
+  type FrameRatio,
+} from '../../utils/getFrameRatio';
+import { getIndicatorConfig } from '../../utils/getIndicatorConfig';
+import { useStyles } from './styles';
+
+type MediaPost = Amity.Post<'image'> | Amity.Post<'video'>;
+
+function isMediaPost(post: Amity.Post): post is MediaPost {
+  return post.dataType === 'image' || post.dataType === 'video';
+}
+
+function getAttachmentRatio(post?: MediaPost): FrameRatio {
+  if (!post) return DEFAULT_FRAME_RATIO;
+
+  if (post.dataType === 'image') {
+    const image = post.getImageInfo();
+    return getFrameRatio(image?.getWidth(), image?.getHeight());
+  }
+
+  const video = post.getVideoInfo();
+  const { width, height } = getVideoDisplayDims({
+    width: video?.getWidth(),
+    height: video?.getHeight(),
+    rotation: video?.getRotation(),
+  });
+  return getFrameRatio(width, height);
+}
+
+export type PostMediaControls = {
+  slideTo: (index: number) => void;
+};
+
+export type PostMediaElementProps = {
+  posts: Amity.Post[];
+  onImageClick: (index: number) => void;
+  onVideoClick: (index: number) => void;
+  controlsRef?: MutableRefObject<PostMediaControls | null>;
+  /** While the post's media children are still being fetched, show a
+   * placeholder frame instead of nothing (avoids a blank → pop). */
+  loading?: boolean;
+};
+
+export function PostMediaElement({
+  posts,
+  onImageClick,
+  onVideoClick,
+  controlsRef,
+  loading = false,
+}: PostMediaElementProps) {
+  const styles = useStyles();
+  const { width: screenWidth } = useWindowDimensions();
+  const [current, setCurrent] = useState(0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const scrollRef = useRef<ScrollView>(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 (
+      <View style={styles.postMedia}>
+        <View style={styles.postMedia__track}>
+          <View
+            style={[
+              styles.postMedia__frame,
+              { aspectRatio: FRAME_RATIO_VALUE[DEFAULT_FRAME_RATIO] },
+            ]}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  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: number) => {
+    const post = mediaPosts[index];
+    if (post.dataType === 'image') onImageClick(index);
+    else onVideoClick(index);
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+
+  const onMomentumScrollEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    if (!slideWidth) return;
+    const nextIndex = Math.round(
+      event.nativeEvent.contentOffset.x / slideWidth
+    );
+    if (nextIndex !== current) setCurrent(nextIndex);
+  };
+
+  if (controlsRef) {
+    controlsRef.current = {
+      slideTo: (index: number) => {
+        scrollRef.current?.scrollTo({
+          x: index * slideWidth,
+          animated: false,
+        });
+        setCurrent(index);
+      },
+    };
+  }
+
+  if (!isCarousel) {
+    return (
+      <View style={styles.postMedia}>
+        <View style={styles.postMedia__track} onLayout={onLayout}>
+          <MediaFrame
+            post={mediaPosts[0]}
+            aspectRatio={aspectRatio}
+            onPress={() => handleFrameClick(0)}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.postMedia}>
+      <View style={styles.postMedia__track} onLayout={onLayout}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          scrollEventThrottle={16}
+          decelerationRate="fast"
+        >
+          {mediaPosts.map((post, index) => (
+            <View
+              key={post.postId}
+              style={[styles.postMedia__slide, { width: slideWidth }]}
+            >
+              <MediaFrame
+                post={post}
+                aspectRatio={aspectRatio}
+                onPress={() => handleFrameClick(index)}
+              />
+            </View>
+          ))}
+        </ScrollView>
+        <PositionCounter current={current} total={total} />
+      </View>
+      <PaginationIndicator current={current} total={total} />
+    </View>
+  );
+}
+
+type PaginationIndicatorProps = {
+  current: number;
+  total: number;
+};
+
+function PaginationIndicator({ current, total }: PaginationIndicatorProps) {
+  const styles = useStyles();
+  const { dots } = getIndicatorConfig(current, total);
+
+  return (
+    <View style={styles.postMedia__indicator}>
+      {dots.map((dot) => (
+        <View key={dot.key} style={styles.postMedia__dotSlot}>
+          <View
+            style={[
+              styles.postMedia__dot,
+              dot.state === 'active'
+                ? styles.postMedia__dotActive
+                : dot.state === 'edge'
+                ? styles.postMedia__dotEdge
+                : styles.postMedia__dotInactive,
+            ]}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+type PositionCounterProps = {
+  current: number;
+  total: number;
+};
+
+function PositionCounter({ current, total }: PositionCounterProps) {
+  const styles = useStyles();
+
+  return (
+    <View style={styles.postMedia__counter}>
+      <Typography.Body style={styles.postMedia__counterLabel}>
+        {current + 1}/{total}
+      </Typography.Body>
+    </View>
+  );
+}
+
+type MediaFrameProps = {
+  post: MediaPost;
+  aspectRatio: number;
+  onPress: () => void;
+};
+
+function MediaFrame({ post, aspectRatio, onPress }: MediaFrameProps) {
+  const styles = useStyles();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.postMedia__frame, { aspectRatio }]}
+    >
+      {post.dataType === 'image' ? (
+        <ImageMedia post={post as Amity.Post<'image'>} />
+      ) : (
+        <VideoMedia post={post as Amity.Post<'video'>} />
+      )}
+    </Pressable>
+  );
+}
+
+type ImageMediaProps = { post: Amity.Post<'image'> };
+
+function ImageMedia({ post }: ImageMediaProps) {
+  const styles = useStyles();
+  const { apiRegion } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const fileId = post.getImageInfo()?.fileId;
+  const url = fileId
+    ? `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=large`
+    : undefined;
+
+  if (!url || isBroken) return <BrokenFrame />;
+
+  return (
+    <Image
+      style={styles.postMedia__media as StyleProp<ImageStyle>}
+      source={{ uri: url }}
+      resizeMode="cover"
+      onError={() => setIsBroken(true)}
+    />
+  );
+}
+
+type VideoMediaProps = { post: Amity.Post<'video'> };
+
+function VideoMedia({ post }: VideoMediaProps) {
+  const styles = useStyles();
+  const { apiRegion } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+
+  const data = post.data as Amity.ContentDataVideo | undefined;
+  const thumbnailFileId = data?.thumbnailFileId;
+  const url = thumbnailFileId
+    ? `https://api.${apiRegion}.amity.co/api/v3/files/${thumbnailFileId}/download?size=large`
+    : undefined;
+
+  if (!url || isBroken) return <BrokenFrame />;
+
+  return (
+    <>
+      <Image
+        style={styles.postMedia__media as StyleProp<ImageStyle>}
+        source={{ uri: url }}
+        resizeMode="cover"
+        onError={() => setIsBroken(true)}
+      />
+      <View style={styles.postMedia__playButton}>
+        <SvgXml xml={videoControlIcon} width="40" height="40" />
+      </View>
+    </>
+  );
+}
+
+function BrokenFrame() {
+  const styles = useStyles();
+  return (
+    <View style={styles.postMedia__broken}>
+      <SvgXml xml={brokenImageIcon()} width={32} height={32} />
+    </View>
+  );
+}

package/src/social/elements/PostMediaElement/index.tsx

@@ -0,0 +1,5 @@
+export { PostMediaElement } from './PostMediaElement';
+export type {
+  PostMediaElementProps,
+  PostMediaControls,
+} from './PostMediaElement';

package/src/social/elements/PostMediaElement/styles.ts

@@ -0,0 +1,99 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+
+// 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<MyMD3Theme>();
+
+  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;
+};

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

@@ -1,6 +1,5 @@
 import {
   Alert,
-  FlatList,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -48,12 +47,11 @@ import AmityMediaAttachmentComponent from '../components/MediaAttachment';
 import AmityDetailedMediaAttachmentComponent from '../components/DetailedMediaAttachment';
 import { useKeyboardStatus } from '../../../hooks';
 import ImagePicker, {
-  launchImageLibrary,
   type Asset,
   launchCamera,
 } from 'react-native-image-picker';
-import LoadingImage from '../../../components/LoadingImage';
-import LoadingVideo from '../../../components/LoadingVideo';
+import { SelectedMediaComponent } from '../../../components/SelectedMediaComponent';
+import { MediaSelector } from '../../../components/MediaSelector';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import {
@@ -117,6 +115,9 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [isSwipeup, setIsSwipeup] = useState(true);
   const [deletedPostIds, setDeletedPostIds] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [mediaSelectorType, setMediaSelectorType] = useState<
+    'photo' | 'video' | null
+  >(null);
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
   const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
   const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
@@ -584,64 +585,42 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   }, [displayImages.length, displayVideos.length, pickCamera]);
 
   const onPressImage = useCallback(async () => {
-    if (displayImages.length === 10)
+    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;
-      });
-    }
-  }, [displayImages.length, processMedia]);
+    setMediaSelectorType('photo');
+  }, [displayImages.length]);
 
   const onPressVideo = useCallback(async () => {
-    if (displayVideos.length === 10)
+    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;
+    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: string[]) => {
+      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;
       });
-    }
-  }, [displayVideos.length, processMedia]);
+    },
+    [mediaSelectorType, processMedia]
+  );
 
   const handleImageUploadError = useCallback(
     (hasError: boolean, source: string) => {
@@ -752,6 +731,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
+  // PDT-4310 / PDT-4312: at the 10-attachment cap the camera + gallery icons
+  // are disabled until the user removes a frame.
+  const isMediaCapReached =
+    displayImages.length >= 10 || displayVideos.length >= 10;
+
   const renderDetailedAttachment = useCallback(() => {
     if (isEditMode) return null;
     if (shouldShowDetailAttachment) {
@@ -762,6 +746,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           onPressVideo={onPressVideo}
           chosenMediaType={chosenMediaType}
           onHeightChange={setAttachmentBarHeight}
+          disabled={isMediaCapReached}
         />
       );
     }
@@ -772,11 +757,13 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         onPressVideo={onPressVideo}
         chosenMediaType={chosenMediaType}
         onHeightChange={setAttachmentBarHeight}
+        disabled={isMediaCapReached}
       />
     );
   }, [
     chosenMediaType,
     isEditMode,
+    isMediaCapReached,
     onPressCamera,
     onPressImage,
     onPressVideo,
@@ -835,54 +822,25 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           })}
           <View style={styles.imageContainer}>
             {displayImages.length > 0 && (
-              <FlatList
-                nestedScrollEnabled={true}
-                scrollEnabled={false}
-                data={displayImages}
-                renderItem={({ item, index }) => {
-                  if (!item) return null;
-                  return (
-                    <LoadingImage
-                      source={item.url}
-                      onClose={handleOnCloseImage}
-                      index={index} //TODO: Fix this without index
-                      onLoadFinish={handleOnFinishImage}
-                      onUploadError={handleImageUploadError}
-                      isUploaded={item.isUploaded}
-                      fileId={item.fileId}
-                      fileCount={displayImages.length}
-                      isEditMode={isEditMode}
-                      postId={item.postId}
-                      setIsUploading={setIsUploading}
-                    />
-                  );
-                }}
-                numColumns={3}
+              <SelectedMediaComponent
+                mediaType="image"
+                media={displayImages}
+                onClose={handleOnCloseImage}
+                onLoadFinish={handleOnFinishImage}
+                onUploadError={handleImageUploadError}
+                isEditMode={isEditMode}
+                setIsUploading={setIsUploading}
               />
             )}
             {displayVideos.length > 0 && (
-              <FlatList
-                data={displayVideos}
-                renderItem={({ item, index }) => {
-                  if (!item) return null;
-                  return (
-                    <LoadingVideo
-                      source={item.url}
-                      onClose={handleOnCloseVideo}
-                      index={index} //TODO: Fix this without index
-                      onLoadFinish={handleOnFinishVideo}
-                      onUploadError={handleVideoUploadError}
-                      isUploaded={item.isUploaded}
-                      fileId={item.fileId}
-                      thumbNail={item.thumbNail as string}
-                      fileCount={displayVideos.length}
-                      isEditMode={isEditMode}
-                      postId={item.postId}
-                      setIsUploading={setIsUploading}
-                    />
-                  );
-                }}
-                numColumns={3}
+              <SelectedMediaComponent
+                mediaType="video"
+                media={displayVideos}
+                onClose={handleOnCloseVideo}
+                onLoadFinish={handleOnFinishVideo}
+                onUploadError={handleVideoUploadError}
+                isEditMode={isEditMode}
+                setIsUploading={setIsUploading}
               />
             )}
           </View>
@@ -902,6 +860,22 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         </View>
       </KeyboardAvoidingView>
       <StatusBar backgroundColor={themeStyles.colors.background} />
+      <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}
+      />
     </SafeAreaView>
   );
 };