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

package/src/social/components/PostContent/index.tsx

@@ -1,25 +1,30 @@
-import { Fragment, memo, useCallback, useEffect, useState } from 'react';
 import {
-  Image,
-  Pressable,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import { SvgXml } from 'react-native-svg';
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
 import { useStyles } from './styles';
 import useAuth from '../../../core/hooks/useAuth';
 import { IVideoPost, MediaUri } from '../legacy/Social/PostList';
 import { getPostById } from '../../../core/legacy/feed';
 import ImageView from '../legacy/react-native-image-viewing/dist';
+import { SvgXml } from 'react-native-svg';
+import { clearIcon } from '../../../core/assets/icons/xml';
 import { RootState, useUIKitSelector } from '../../../core/stores/store';
-import { playBtn } from '../../../core/assets/icons/xml';
+import {
+  PostMediaElement,
+  type PostMediaControls,
+} from '../../elements/PostMediaElement';
 import LivestreamContent from '../LivestreamContent';
 import { LinkPreview } from '../PreviewLink';
 import RenderTextWithMention from '../RenderTextWithMention/RenderTextWithMention';
 import { IMentionPosition } from '../../../core/types';
 import PollContent from '../PollContent';
+import { MediaViewer, type MediaViewerItem } from '../MediaViewer';
 
 interface IPostContent {
   post: Amity.Post;
@@ -49,10 +54,16 @@ const PostContent: React.FC<IPostContent> = ({
   const [videoPostsFullSize, setVideoPostsFullSize] = useState<MediaUri[]>([]);
   const [visibleFullImage, setIsVisibleFullImage] = useState<boolean>(false);
   const [imageIndex, setImageIndex] = useState<number>(0);
+  const [videoViewerIndex, setVideoViewerIndex] = useState<number | null>(null);
+  const [mediaLoading, setMediaLoading] = useState<boolean>(
+    (childrenPosts?.length ?? 0) > 0
+  );
+  const [mediaChildPosts, setMediaChildPosts] = useState<Amity.Post[]>([]);
+
+  const mediaControlsRef = useRef<PostMediaControls | null>(null);
+  const viewerIndexRef = useRef<number>(0);
 
   const styles = useStyles();
-  let imageStyle: any = styles.imageLargePost;
-  let colStyle: any = styles.col2;
   const { currentPostdetail } = useUIKitSelector(
     (state: RootState) => state.postDetail
   );
@@ -83,11 +94,16 @@ const PostContent: React.FC<IPostContent> = ({
   }, [imagePosts, videoPosts, apiRegion]);
 
   const getPostInfo = useCallback(async () => {
+    setMediaLoading((childrenPosts?.length ?? 0) > 0);
     try {
       const response = await Promise.all(
         childrenPosts.map(async (id) => {
           const { data: childrenPost } = await getPostById(id);
-          return { dataType: childrenPost?.dataType, data: childrenPost?.data };
+          return {
+            post: childrenPost,
+            dataType: childrenPost?.dataType,
+            data: childrenPost?.data,
+          };
         })
       );
 
@@ -95,12 +111,14 @@ const PostContent: React.FC<IPostContent> = ({
       const videos: IVideoPost[] = [];
       const polls: { pollId: string }[] = [];
       const livestreams: Amity.Room['roomId'][] = [];
+      const media: Amity.Post[] = [];
 
       response.forEach((item) => {
         if (item?.dataType === 'image' && item?.data?.fileId) {
           const url: string = `https://api.${apiRegion}.amity.co/api/v3/files/${item?.data.fileId}/download?size=medium`;
           if (!images.includes(url)) {
             images.push(url);
+            if (item.post) media.push(item.post);
           }
         } else if (
           item?.dataType === 'video' &&
@@ -112,6 +130,7 @@ const PostContent: React.FC<IPostContent> = ({
           );
           if (!isExisted) {
             videos.push(item.data);
+            if (item.post) media.push(item.post);
           }
         } else if (item?.dataType === 'poll') {
           if (!polls.some((poll) => poll.pollId === item.data.pollId)) {
@@ -124,12 +143,11 @@ const PostContent: React.FC<IPostContent> = ({
         }
       });
 
-      if (images.length > 0) {
-        setImagePosts(images);
-      }
-      if (videos.length > 0) {
-        setVideoPosts(videos);
-      }
+      // Set unconditionally so navigating to a post without media clears the
+      // previous media (see the effect below which no longer eagerly resets).
+      setMediaChildPosts(media);
+      setImagePosts(images);
+      setVideoPosts(videos);
       if (polls.length > 0) {
         setPollIds(polls);
       }
@@ -138,168 +156,62 @@ const PostContent: React.FC<IPostContent> = ({
       }
     } catch (error) {
       console.log('error: ', error);
+    } finally {
+      setMediaLoading(false);
     }
   }, [apiRegion, childrenPosts]);
 
   useEffect(() => {
-    setVideoPosts([]);
-    setImagePosts([]);
+    // Don't clear media here: getPostInfo resolves images/videos/media to their
+    // fresh values, so the existing media stays on screen until the new data
+    // arrives. Eagerly resetting caused a blank flash whenever the feed
+    // re-rendered (e.g. realtime updates), then the content popped back in.
     getPostInfo();
   }, [childrenPosts, currentPostdetail, postList, postListGlobal, getPostInfo]);
 
   function onClickImage(index: number): void {
+    viewerIndexRef.current = index;
     setIsVisibleFullImage(true);
     setImageIndex(index);
   }
 
-  function renderMediaPosts() {
-    const thumbnailFileIds: string[] =
-      videoPosts.length > 0
-        ? videoPosts.map((item) => {
-            return `https://api.${apiRegion}.amity.co/api/v3/files/${item?.thumbnailFileId}/download?size=medium`;
-          })
-        : [];
-    const mediaPosts =
-      [...imagePosts].length > 0 ? [...imagePosts] : [...thumbnailFileIds];
-    const imageElement = mediaPosts.map((item: string, index: number) => {
-      if (mediaPosts.length === 1) {
-        imageStyle = styles.imageLargePost;
-        colStyle = styles.col6;
-      } else if (mediaPosts.length === 2) {
-        colStyle = styles.col3;
-        if (index === 0) {
-          imageStyle = [styles.imageLargePost, styles.imageMarginRight];
-        } else {
-          imageStyle = [styles.imageLargePost, styles.imageMarginLeft];
-        }
-      } else if (mediaPosts.length === 3) {
-        switch (index) {
-          case 0:
-            colStyle = styles.col6;
-            imageStyle = [styles.imageMediumPost, styles.imageMarginBottom];
-            break;
-          case 1:
-            colStyle = styles.col3;
-            imageStyle = [
-              styles.imageMediumPost,
-              styles.imageMarginTop,
-              styles.imageMarginRight,
-            ];
-            break;
-          case 2:
-            colStyle = styles.col3;
-            imageStyle = [
-              styles.imageMediumPost,
-              styles.imageMarginTop,
-              styles.imageMarginLeft,
-            ];
-            break;
-
-          default:
-            break;
-        }
-      } else {
-        switch (index) {
-          case 0:
-            colStyle = styles.col6;
-            imageStyle = [
-              styles.imageMediumLargePost,
-              styles.imageMarginBottom,
-            ];
-            break;
-          case 1:
-            colStyle = styles.col2;
-            imageStyle = [
-              styles.imageSmallPost,
-              styles.imageMarginTop,
-              styles.imageMarginRight,
-            ];
-            break;
-          case 2:
-            colStyle = styles.col2;
-            imageStyle = [
-              styles.imageSmallPost,
-              styles.imageMarginTop,
-              styles.imageMarginLeft,
-              styles.imageMarginRight,
-            ];
-            break;
-          case 3:
-            colStyle = styles.col2;
-            imageStyle = [
-              styles.imageSmallPost,
-              styles.imageMarginTop,
-              styles.imageMarginLeft,
-            ];
-            break;
-          default:
-            break;
-        }
-      }
+  function closeFullScreen(): void {
+    setIsVisibleFullImage(false);
+    mediaControlsRef.current?.slideTo(viewerIndexRef.current);
+  }
 
-      return (
-        <View style={colStyle} key={item}>
-          <TouchableWithoutFeedback onPress={() => onClickImage(index)}>
-            <View>
-              {videoPosts.length > 0 && renderPlayButton()}
-              <Image
-                style={imageStyle}
-                source={{
-                  uri: item,
-                }}
-              />
-              {index === 3 && imagePosts.length > 4 && (
-                <View style={styles.overlay}>
-                  <Text style={styles.overlayText}>{`+ ${
-                    imagePosts.length - 3
-                  }`}</Text>
-                </View>
-              )}
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      );
-    });
-    if (imageElement.length < 3) {
-      return (
-        <View style={styles.imagesWrap}>
-          <View style={styles.row}>{imageElement}</View>
-        </View>
-      );
-    } else if (imageElement.length === 3) {
-      return (
-        <View style={[styles.imagesWrap]}>
-          <View style={styles.row}>{imageElement.slice(0, 1)}</View>
-          <View style={styles.row}>{imageElement.slice(1, 3)}</View>
-        </View>
-      );
-    } else {
-      return (
-        <View style={styles.imagesWrap}>
-          <View style={styles.row}>{imageElement.slice(0, 1)}</View>
-          <View style={styles.row}>{imageElement.slice(1, 4)}</View>
-        </View>
-      );
-    }
+  // UC2 (PDT-4309): video carousel opens the swipeable full-screen player
+  // (autoplay + mute-carry) instead of the single-video route.
+  function openVideoViewer(index: number): void {
+    viewerIndexRef.current = index;
+    setVideoViewerIndex(index);
   }
 
-  function renderPlayButton() {
-    return (
-      <View style={styles.playButton}>
-        <SvgXml xml={playBtn} width="50" height="50" />
-      </View>
-    );
+  function closeVideoViewer(lastIndex: number): void {
+    setVideoViewerIndex(null);
+    // Published post: return to the last-viewed frame.
+    mediaControlsRef.current?.slideTo(lastIndex);
   }
 
+  const videoViewerItems: MediaViewerItem[] = videoPosts.map(
+    (item: IVideoPost) => ({
+      type: 'video',
+      // The /files/{original}/download endpoint returns the original video
+      // file (mp4), not an HLS playlist — no m3u8 type hint (let the player
+      // detect the container).
+      uri: `https://api.${apiRegion}.amity.co/api/v3/files/${item?.videoFileId?.original}/download`,
+    })
+  );
+
   function renderImageHeader({ imageIndex: imgIndex }) {
     return (
       <View style={styles.headerContainer}>
         <View style={styles.flexWidth}>
           <TouchableOpacity
             style={styles.closebtnIcon}
-            onPress={() => setIsVisibleFullImage(false)}
+            onPress={closeFullScreen}
           >
-            <Text style={styles.closeBtn}>X</Text>
+            <SvgXml xml={clearIcon('white')} width={28} height={28} />
           </TouchableOpacity>
         </View>
         <View style={styles.flexWidth}>
@@ -345,7 +257,13 @@ const PostContent: React.FC<IPostContent> = ({
           roomId={livestreamId[0]}
         />
       ) : (
-        renderMediaPosts()
+        <PostMediaElement
+          posts={mediaChildPosts}
+          onImageClick={onClickImage}
+          onVideoClick={openVideoViewer}
+          controlsRef={mediaControlsRef}
+          loading={mediaLoading}
+        />
       )}
       <ImageView
         images={
@@ -355,11 +273,20 @@ const PostContent: React.FC<IPostContent> = ({
         }
         imageIndex={imageIndex}
         visible={visibleFullImage}
-        onRequestClose={() => setIsVisibleFullImage(false)}
+        onRequestClose={closeFullScreen}
+        onImageIndexChange={(idx: number) => {
+          viewerIndexRef.current = idx;
+        }}
         isVideoButton={videoPosts.length > 0 ? true : false}
         videoPosts={videoPosts}
         HeaderComponent={renderImageHeader}
       />
+      <MediaViewer
+        visible={videoViewerIndex !== null}
+        items={videoViewerItems}
+        initialIndex={videoViewerIndex ?? 0}
+        onClose={closeVideoViewer}
+      />
     </Fragment>
   );
 };

package/src/social/components/SelectedMediaComponent/SelectedMediaComponent.tsx

@@ -0,0 +1,202 @@
+import { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  Image,
+  LayoutChangeEvent,
+  Pressable,
+  ScrollView,
+  View,
+} from 'react-native';
+import LoadingImage from '../LoadingImage';
+import LoadingVideo from '../LoadingVideo';
+import { MediaViewer, type MediaViewerItem } from '../MediaViewer';
+import { IDisplayImage } from '../../../core/types';
+import {
+  getFrameRatio,
+  FRAME_RATIO_VALUE,
+  DEFAULT_FRAME_RATIO,
+  type FrameRatio,
+} from '../../utils/getFrameRatio';
+import { useStyles } from './styles';
+
+// Web PR #1830: slide width = calc(100% - 3.4375rem) so the next slide peeks;
+// slides are separated by spaceBetween 8. No counter, no dots.
+const PEEK_INSET = 55; // 3.4375rem
+const SPACE_BETWEEN = 8;
+
+export type SelectedMediaComponentProps = {
+  mediaType: 'image' | 'video';
+  media: IDisplayImage[];
+  onClose?: (originalPath: string, fileId?: string, postId?: string) => void;
+  onLoadFinish?: (
+    fileId: string,
+    fileUrl: string,
+    fileName: string,
+    index: number,
+    originalPath: string,
+    thumbnail?: string
+  ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
+  isEditMode?: boolean;
+  setIsUploading?: (arg: boolean) => void;
+};
+
+export function SelectedMediaComponent({
+  mediaType,
+  media,
+  onClose,
+  onLoadFinish,
+  onUploadError,
+  isEditMode = false,
+  setIsUploading,
+}: SelectedMediaComponentProps) {
+  const styles = useStyles();
+  const scrollRef = useRef<ScrollView>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [ratio, setRatio] = useState<FrameRatio>(DEFAULT_FRAME_RATIO);
+  // Index of the frame the full-screen viewer was opened from (null = closed).
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null);
+
+  const total = media.length;
+  const isCarousel = total > 1;
+  const aspectRatio = FRAME_RATIO_VALUE[ratio];
+  const slideWidth = trackWidth > 0 ? trackWidth - PEEK_INSET : 0;
+
+  // Frames follow the aspect ratio of the first media item; recalculated when
+  // the first item changes (e.g. it was removed).
+  const firstUrl = media[0]?.url;
+  useEffect(() => {
+    if (mediaType !== 'image' || !firstUrl) {
+      setRatio(DEFAULT_FRAME_RATIO);
+      return undefined;
+    }
+    let active = true;
+    Image.getSize(
+      firstUrl,
+      (width, height) => {
+        if (active) setRatio(getFrameRatio(width, height));
+      },
+      () => {
+        if (active) setRatio(DEFAULT_FRAME_RATIO);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [firstUrl, mediaType]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+
+  const viewerItems: MediaViewerItem[] = media.map((m) => ({
+    type: mediaType,
+    uri: m.url,
+  }));
+
+  // PDT-4310/4312: on close, return to the frame originally tapped from — not
+  // the last frame viewed in full screen.
+  const handleCloseViewer = () => {
+    const tapped = viewerIndex ?? 0;
+    setViewerIndex(null);
+    if (isCarousel && slideWidth > 0) {
+      scrollRef.current?.scrollTo({
+        x: tapped * (slideWidth + SPACE_BETWEEN),
+        animated: false,
+      });
+    }
+  };
+
+  const renderFrame = (item: IDisplayImage, index: number) => (
+    <View style={[styles.selectedMedia__frame, { aspectRatio }]}>
+      {mediaType === 'video' ? (
+        <LoadingVideo
+          carousel
+          source={item.url}
+          onClose={onClose}
+          index={index}
+          onLoadFinish={onLoadFinish}
+          onUploadError={onUploadError}
+          isUploaded={item.isUploaded}
+          fileId={item.fileId}
+          thumbNail={item.thumbNail as string}
+          fileCount={total}
+          isEditMode={isEditMode}
+          postId={item.postId}
+          setIsUploading={setIsUploading}
+          onPlay={() => setViewerIndex(index)}
+        />
+      ) : (
+        <Pressable
+          style={styles.selectedMedia__mediaButton}
+          onPress={() => setViewerIndex(index)}
+        >
+          <LoadingImage
+            carousel
+            source={item.url}
+            onClose={onClose}
+            index={index}
+            onLoadFinish={onLoadFinish}
+            onUploadError={onUploadError}
+            isUploaded={item.isUploaded}
+            fileId={item.fileId}
+            fileCount={total}
+            isEditMode={isEditMode}
+            postId={item.postId}
+            setIsUploading={setIsUploading}
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+
+  if (total === 0) return null;
+
+  return (
+    <Fragment>
+      {!isCarousel ? (
+        <View style={styles.selectedMedia}>
+          <View style={styles.selectedMedia__track} onLayout={onLayout}>
+            {renderFrame(media[0], 0)}
+          </View>
+        </View>
+      ) : (
+        <View style={styles.selectedMedia}>
+          <View style={styles.selectedMedia__track} onLayout={onLayout}>
+            {slideWidth > 0 && (
+              <ScrollView
+                ref={scrollRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                decelerationRate="fast"
+                snapToInterval={slideWidth + SPACE_BETWEEN}
+                snapToAlignment="start"
+              >
+                {media.map((item, index) => (
+                  <View
+                    key={`${item.url}-${index}`}
+                    style={[
+                      styles.selectedMedia__slide,
+                      {
+                        width: slideWidth,
+                        marginRight: index < total - 1 ? SPACE_BETWEEN : 0,
+                      },
+                    ]}
+                  >
+                    {renderFrame(item, index)}
+                  </View>
+                ))}
+              </ScrollView>
+            )}
+          </View>
+        </View>
+      )}
+      <MediaViewer
+        visible={viewerIndex !== null}
+        items={viewerItems}
+        initialIndex={viewerIndex ?? 0}
+        onClose={handleCloseViewer}
+      />
+    </Fragment>
+  );
+}

package/src/social/components/SelectedMediaComponent/index.ts

@@ -0,0 +1,2 @@
+export { SelectedMediaComponent } from './SelectedMediaComponent';
+export type { SelectedMediaComponentProps } from './SelectedMediaComponent';

package/src/social/components/SelectedMediaComponent/styles.ts

@@ -0,0 +1,38 @@
+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 SelectedMediaComponent.module.css (1rem = 16dp).
+// Web composer preview: peek scroll row (slidesPerView=auto, spaceBetween 8,
+// slide width = calc(100% - 3.4375rem) = track - 55). NO counter, NO dots.
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  return StyleSheet.create({
+    selectedMedia: {
+      width: '100%',
+      paddingVertical: 12, // web: padding 0.75rem 0
+    },
+    selectedMedia__track: {
+      position: 'relative',
+      width: '100%',
+    },
+    selectedMedia__slide: {
+      // width + marginRight (spaceBetween 8) set inline from measured track width
+    },
+    selectedMedia__frame: {
+      width: '100%',
+      overflow: 'hidden',
+      // web: no border-radius; background var(--asc-color-base-shade4)
+      backgroundColor: theme.colors.baseShade4,
+    },
+    selectedMedia__media: {
+      width: '100%',
+      height: '100%',
+    },
+    selectedMedia__mediaButton: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+};

package/src/social/constants/index.ts

@@ -0,0 +1,4 @@
+// Carousel media post (PDT-3424)
+export const MAX_INDICATOR_DOTS = 6;
+export const MEDIA_ATTACHMENT_CAP = 10;
+export const SWIPE_COMMIT_PX = 40;