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

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

@@ -6,21 +6,26 @@ import {
   ScrollView,
   View,
 } from 'react-native';
+import { createVideoThumbnail } from 'react-native-compressor';
 import LoadingImage from '../LoadingImage';
 import LoadingVideo from '../LoadingVideo';
 import { MediaViewer, type MediaViewerItem } from '../MediaViewer';
 import { IDisplayImage } from '../../../core/types';
 import {
   getFrameRatio,
+  getVideoDisplayDims,
   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
+// Peek scroll: next slide peeks by (PEEK_INSET − SPACE_BETWEEN). The composer
+// body (PostComposer `inputWrapper`) already insets everything 12px
+// horizontally, so this component adds NO side padding of its own — it only
+// sizes the slide so the peek lands at the spec's 31px (SelectedMediaComponent
+// REQ-003a). slideWidth = trackWidth − PEEK_INSET; peek = PEEK_INSET − 8 = 31.
+const PEEK_INSET = 39;
 const SPACE_BETWEEN = 8;
 
 export type SelectedMediaComponentProps = {
@@ -37,7 +42,10 @@ export type SelectedMediaComponentProps = {
   ) => void;
   onUploadError?: (hasError: boolean, source: string) => void;
   isEditMode?: boolean;
-  setIsUploading?: (arg: boolean) => void;
+  // Per-frame upload state, keyed by the item's `source` url — the parent
+  // aggregates it instead of holding one boolean that the first upload to
+  // finish would clear on behalf of every other frame.
+  onUploadingChange?: (isUploading: boolean, source: string) => void;
 };
 
 export function SelectedMediaComponent({
@@ -47,7 +55,7 @@ export function SelectedMediaComponent({
   onLoadFinish,
   onUploadError,
   isEditMode = false,
-  setIsUploading,
+  onUploadingChange,
 }: SelectedMediaComponentProps) {
   const styles = useStyles();
   const scrollRef = useRef<ScrollView>(null);
@@ -61,14 +69,62 @@ export function SelectedMediaComponent({
   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;
+  // Frames follow the aspect ratio classified from the item currently in first
+  // position (REQ-003d/003e); recalculated when the first item changes.
+  const first = media[0];
+  const firstUrl = first?.url;
+  const firstWidth = first?.width;
+  const firstHeight = first?.height;
+  const firstRotation = first?.rotation;
   useEffect(() => {
-    if (mediaType !== 'image' || !firstUrl) {
+    if (!firstUrl) {
       setRatio(DEFAULT_FRAME_RATIO);
       return undefined;
     }
+    // Video: classify from the record/extractor dims, applying rotation
+    // (REQ-003d1 — MUST NOT silently fall back to 1:1 for video). Shares the
+    // one rotation derivation with the published carousel (REQ-SDK-002b).
+    if (mediaType === 'video') {
+      if (firstWidth && firstHeight) {
+        const { width, height } = getVideoDisplayDims({
+          width: firstWidth,
+          height: firstHeight,
+          rotation: firstRotation,
+        });
+        setRatio(getFrameRatio(width, height));
+        return undefined;
+      }
+      // No usable dims — a locally-picked video can arrive with none (the
+      // Android extractor reports 0×0 when MediaMetadataRetriever fails, and
+      // iOS picks carry none by design, see PostComposer). Measure the
+      // generated thumbnail instead of defaulting to a square frame
+      // (REQ-003d2, PDT-4904): it is a rendered frame, so its dimensions are
+      // already display-oriented and need no rotation applied.
+      //
+      // LoadingVideo decodes a thumbnail for this same url too, so frame 0
+      // decodes twice. Kept deliberately: reporting dims back up through
+      // LoadingVideo would widen the composer's callback surface, and the
+      // decode is a cached native call on a url the child already proves
+      // works.
+      let active = true;
+      createVideoThumbnail(firstUrl)
+        .then(({ width, height }) => {
+          if (active) setRatio(getFrameRatio(width, height));
+        })
+        .catch(() => {
+          // Thumbnail decode failed too — nothing left to classify from, so
+          // fall back to the square frame (REQ-003d2).
+          if (active) setRatio(DEFAULT_FRAME_RATIO);
+        });
+      return () => {
+        active = false;
+      };
+    }
+    // Image: prefer carried dims, else measure the source.
+    if (firstWidth && firstHeight) {
+      setRatio(getFrameRatio(firstWidth, firstHeight));
+      return undefined;
+    }
     let active = true;
     Image.getSize(
       firstUrl,
@@ -82,7 +138,7 @@ export function SelectedMediaComponent({
     return () => {
       active = false;
     };
-  }, [firstUrl, mediaType]);
+  }, [firstUrl, firstWidth, firstHeight, firstRotation, mediaType]);
 
   const onLayout = (event: LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;
@@ -94,6 +150,24 @@ export function SelectedMediaComponent({
     uri: m.url,
   }));
 
+  // Removing a frame must not leave the strip parked past the last one. The
+  // ScrollView keeps its offset while the content shrinks underneath it, so
+  // deleting the frame that was on screen left a half-scrolled gap where it had
+  // been instead of settling on the frame that took its place.
+  const offsetRef = useRef(0);
+  const previousTotalRef = useRef(total);
+  useEffect(() => {
+    const previousTotal = previousTotalRef.current;
+    previousTotalRef.current = total;
+    if (total >= previousTotal || slideWidth <= 0) return;
+
+    const maxOffset = Math.max(0, (total - 1) * (slideWidth + SPACE_BETWEEN));
+    if (offsetRef.current <= maxOffset) return;
+
+    offsetRef.current = maxOffset;
+    scrollRef.current?.scrollTo({ x: maxOffset, animated: false });
+  }, [total, slideWidth]);
+
   // PDT-4310/4312: on close, return to the frame originally tapped from — not
   // the last frame viewed in full screen.
   const handleCloseViewer = () => {
@@ -113,6 +187,7 @@ export function SelectedMediaComponent({
         <LoadingVideo
           carousel
           source={item.url}
+          displayUri={item.localUrl}
           onClose={onClose}
           index={index}
           onLoadFinish={onLoadFinish}
@@ -123,7 +198,7 @@ export function SelectedMediaComponent({
           fileCount={total}
           isEditMode={isEditMode}
           postId={item.postId}
-          setIsUploading={setIsUploading}
+          onUploadingChange={onUploadingChange}
           onPlay={() => setViewerIndex(index)}
         />
       ) : (
@@ -134,6 +209,7 @@ export function SelectedMediaComponent({
           <LoadingImage
             carousel
             source={item.url}
+            displayUri={item.localUrl}
             onClose={onClose}
             index={index}
             onLoadFinish={onLoadFinish}
@@ -143,7 +219,7 @@ export function SelectedMediaComponent({
             fileCount={total}
             isEditMode={isEditMode}
             postId={item.postId}
-            setIsUploading={setIsUploading}
+            onUploadingChange={onUploadingChange}
           />
         </Pressable>
       )}
@@ -171,10 +247,24 @@ export function SelectedMediaComponent({
                 decelerationRate="fast"
                 snapToInterval={slideWidth + SPACE_BETWEEN}
                 snapToAlignment="start"
+                scrollEventThrottle={16}
+                onScroll={(event) => {
+                  offsetRef.current = event.nativeEvent.contentOffset.x;
+                }}
               >
                 {media.map((item, index) => (
                   <View
-                    key={`${item.url}-${index}`}
+                    // Key on the item's stable local identity, not on its
+                    // url. `url` is rewritten from the local pick path
+                    // to the remote `?size=medium` one the instant that frame's
+                    // upload finishes, so a url-based key tore down and
+                    // remounted the slide — and with it the child's mount
+                    // effect, which is what re-runs uploads and re-orders the
+                    // in-flight completion callbacks against their siblings.
+                    // The identity survives the swap, so a finishing upload
+                    // now only re-renders its own frame. Falls back to the old
+                    // key for entries built without one (legacy EditPostModal).
+                    key={item.localId ?? `${item.url}-${index}`}
                     style={[
                       styles.selectedMedia__slide,
                       {

package/src/social/components/legacy/LoadingVideo/index.tsx

@@ -89,24 +89,35 @@ const LoadingVideo = ({
   }, [progress]);
 
   const uploadFileToAmity = useCallback(async () => {
-    const file: Amity.File<any>[] = await uploadVideoFile(
-      source,
-      (percent: number) => {
-        setProgress(percent);
+    // `uploadVideoFile` now rejects on a failed upload instead of
+    // hanging on an unsettled promise, so this call needs a catch. This legacy
+    // component has no error UI to show (unlike its v4 counterpart, which
+    // renders a tappable retry overlay) — the least-bad end state is to stop
+    // the spinner so the frame is not stuck pretending to make progress, and
+    // to leave the close button reachable so the user can drop the attachment.
+    try {
+      const file: Amity.File<any>[] = await uploadVideoFile(
+        source,
+        (percent: number) => {
+          setProgress(percent);
+        }
+      );
+      if (file) {
+        setIsProcess(false);
+        handleLoadEnd();
+        onLoadFinish &&
+          onLoadFinish(
+            file[0]?.fileId as string,
+            file[0]?.fileUrl as string,
+            file[0]?.attributes.name as string,
+            index as number,
+            source,
+            thumbNail
+          );
       }
-    );
-    if (file) {
+    } catch (error) {
       setIsProcess(false);
       handleLoadEnd();
-      onLoadFinish &&
-        onLoadFinish(
-          file[0]?.fileId as string,
-          file[0]?.fileUrl as string,
-          file[0]?.attributes.name as string,
-          index as number,
-          source,
-          thumbNail
-        );
     }
   }, [source]);
 

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

@@ -1,5 +1,12 @@
-import { useMemo, useRef, useState, type MutableRefObject } from 'react';
 import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MutableRefObject,
+} from 'react';
+import {
+  Animated,
   Image,
   ImageStyle,
   LayoutChangeEvent,
@@ -12,6 +19,7 @@ import {
   View,
 } from 'react-native';
 import { SvgXml } from 'react-native-svg';
+import { FileRepository } from '@amityco/ts-sdk-react-native';
 import { Typography } from '../../../core/components/Typography/Typography';
 import useAuth from '../../../core/hooks/useAuth';
 import {
@@ -26,6 +34,9 @@ import {
   type FrameRatio,
 } from '../../utils/getFrameRatio';
 import { getIndicatorConfig } from '../../utils/getIndicatorConfig';
+import { ImageSizeState } from '../../enums/imageSizeState';
+import { useUIKitSelector } from '../../../core/stores/store';
+import type { RootState } from '../../../core/stores/store';
 import { useStyles } from './styles';
 
 type MediaPost = Amity.Post<'image'> | Amity.Post<'video'>;
@@ -81,6 +92,34 @@ export function PostMediaElement({
   const mediaPosts = useMemo(() => (posts ?? []).filter(isMediaPost), [posts]);
   const ratio = useMemo(() => getAttachmentRatio(mediaPosts[0]), [mediaPosts]);
 
+  // A reload starts the carousel over. It cannot be left to unmounting: the
+  // feed keys its items by post id, so a reload reuses this instance and both
+  // `current` and the ScrollView's own offset would otherwise survive it,
+  // leaving the viewer on whichever frame they had reached before.
+  const feedReloadToken = useUIKitSelector(
+    (state: RootState) => state.ui.feedReloadToken
+  );
+  useEffect(() => {
+    setCurrent(0);
+    scrollRef.current?.scrollTo({ x: 0, animated: false });
+  }, [feedReloadToken]);
+
+  // An edit that removes frames must not leave the carousel pointing past the
+  // end of what is left. The feed reuses this instance across the edit, so both
+  // `current` and the ScrollView's own offset outlive the frame they referred
+  // to: the counter read "4/3" over an empty frame, and the indicator drew no
+  // active dot at all because no page matched the index.
+  const frameCount = mediaPosts.length;
+  useEffect(() => {
+    const lastIndex = Math.max(0, frameCount - 1);
+    if (current <= lastIndex) return;
+    setCurrent(lastIndex);
+    scrollRef.current?.scrollTo({
+      x: lastIndex * (trackWidth || screenWidth),
+      animated: false,
+    });
+  }, [frameCount, current, trackWidth, screenWidth]);
+
   if (mediaPosts.length === 0) {
     if (!loading) return null;
     // Loading placeholder: a full-bleed frame in the base-shade4 colour, so the
@@ -197,20 +236,57 @@ function PaginationIndicator({ current, total }: PaginationIndicatorProps) {
 
   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>
-      ))}
+      {dots.map((dot) =>
+        dot.state === 'edge' ? (
+          <EdgeDot key={dot.key} side={dot.side} />
+        ) : (
+          <View key={dot.key} style={styles.postMedia__dotSlot}>
+            <View
+              style={[
+                styles.postMedia__dot,
+                dot.state === 'active'
+                  ? styles.postMedia__dotActive
+                  : styles.postMedia__dotInactive,
+              ]}
+            />
+          </View>
+        )
+      )}
+    </View>
+  );
+}
+
+// The strip keeps a constant width (fixed-width slots, always 6 elements), so
+// an edge dot only needs to slide in from its own side over 300ms when it
+// first appears (REQ-013b).
+function EdgeDot({ side }: { side?: 'left' | 'right' }) {
+  const styles = useStyles();
+  const anim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(anim, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+
+  const translateX = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [side === 'left' ? -6 : 6, 0],
+  });
+
+  return (
+    <View style={styles.postMedia__dotSlot}>
+      <Animated.View
+        style={[
+          styles.postMedia__dot,
+          styles.postMedia__dotEdge,
+          { opacity: anim, transform: [{ translateX }] },
+        ]}
+      />
     </View>
   );
 }
@@ -260,20 +336,22 @@ 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;
+  // Keyed to the url rather than a bare boolean, so replacing the image retries
+  // the load instead of staying broken for the session (see VideoMedia).
+  const [brokenUrl, setBrokenUrl] = useState<string>();
 
-  if (!url || isBroken) return <BrokenFrame />;
+  if (!url || brokenUrl === url) return <BrokenFrame />;
 
   return (
     <Image
       style={styles.postMedia__media as StyleProp<ImageStyle>}
       source={{ uri: url }}
       resizeMode="cover"
-      onError={() => setIsBroken(true)}
+      onError={() => setBrokenUrl(url)}
     />
   );
 }
@@ -282,16 +360,50 @@ 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`
+  // Resolve the thumbnail through the SDK's linked file object rather than
+  // building a download url from `data.thumbnailFileId`. The file behind that
+  // id does not exist until the server finishes transcoding, so a url built
+  // from the id alone is well-formed and still 404s — which is what rendered a
+  // broken-image icon on every just-created video post. The file object is the
+  // honest signal: it is absent until the thumbnail actually exists. Mirrors
+  // web's useImage/useFile.
+  const thumbnail = post.getVideoThumbnailInfo?.();
+  const serverUrl = thumbnail?.fileUrl
+    ? FileRepository.fileUrlWithSize(thumbnail.fileUrl, ImageSizeState.large)
     : undefined;
 
-  if (!url || isBroken) return <BrokenFrame />;
+  // While the server has none, borrow the frame the composer decoded when this
+  // video was picked, matched on the original video's fileId (web parity:
+  // VideoContent falls back to LayoutProvider's videoThumbnail the same way).
+  const localThumbnails = useUIKitSelector(
+    (state: RootState) => state.localVideoThumbnail.videos
+  );
+  const originalFileId = (post.data as Amity.ContentDataVideo | undefined)
+    ?.videoFileId?.original;
+  const localUrl = serverUrl
+    ? undefined
+    : localThumbnails.find(({ fileId }) => fileId === originalFileId)
+        ?.thumbnailUrl;
+
+  const url = serverUrl ?? localUrl;
+
+  // Keyed to the url, not a bare boolean: the url changes when the real
+  // thumbnail lands, and a latched flag would keep the frame broken for the
+  // rest of the session.
+  const [brokenUrl, setBrokenUrl] = useState<string>();
+
+  const playButton = (
+    <View style={styles.postMedia__playButton}>
+      <SvgXml xml={videoControlIcon} width="40" height="40" />
+    </View>
+  );
+
+  // Nothing to show yet, from either source: still a normal state for a new
+  // post, so keep the play affordance rather than flagging it broken.
+  if (!url) return <View style={styles.postMedia__pending}>{playButton}</View>;
+
+  if (brokenUrl === url) return <BrokenFrame />;
 
   return (
     <>
@@ -299,11 +411,9 @@ function VideoMedia({ post }: VideoMediaProps) {
         style={styles.postMedia__media as StyleProp<ImageStyle>}
         source={{ uri: url }}
         resizeMode="cover"
-        onError={() => setIsBroken(true)}
+        onError={() => setBrokenUrl(url)}
       />
-      <View style={styles.postMedia__playButton}>
-        <SvgXml xml={videoControlIcon} width="40" height="40" />
-      </View>
+      {playButton}
     </>
   );
 }

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

@@ -48,6 +48,13 @@ export const useStyles = () => {
       justifyContent: 'center',
       backgroundColor: theme.colors.baseShade4,
     },
+    // A video whose thumbnail the server has not produced yet: same plain
+    // container as the broken frame, but it carries the play button instead of
+    // the broken-image glyph.
+    postMedia__pending: {
+      flex: 1,
+      backgroundColor: theme.colors.baseShade4,
+    },
     postMedia__counter: {
       position: 'absolute',
       top: 8, // web: 0.5rem

package/src/social/features/community/PendingRequest/components/PendingPostList/PendingPostList.tsx

@@ -19,7 +19,7 @@ import { usePostCollection } from '../../../../../hooks/collections/post/usePost
 import ActionButton from '../../../../../elements/ActionButton';
 import { usePendingPostQuery } from '../../../../../hooks/usePendingPostQuery';
 import { BrandBadge } from '../../../../../elements/BrandBadge';
-import { isModerator, useUser } from '../../../../../hooks';
+import { useCommunityPermission } from '../../../../../hooks';
 
 import { SvgXml } from 'react-native-svg';
 import { Title } from '../../../../../elements';
@@ -50,8 +50,13 @@ const usePendingPostList = ({
     },
   });
 
-  const currentUser = useUser(client.userId || '');
-  const isCommunityModerator = isModerator(currentUser?.roles);
+  // Reviewing a community's posts is a property of the membership, not of the
+  // user: a moderator of one community carries no moderator role on their own
+  // user object, so reading the user's roles hid the accept/decline buttons
+  // from every moderator who was not also a network-wide admin.
+  const { canReviewCommunityPosts } = useCommunityPermission(
+    community.communityId
+  );
 
   useEffect(() => {
     onPendingPostCountChange?.(collection.data.length);
@@ -91,7 +96,7 @@ const usePendingPostList = ({
     renderDivider,
     openBottomSheet,
     handleDeletePost,
-    isCommunityModerator,
+    canReviewCommunityPosts,
   };
 };
 
@@ -110,7 +115,7 @@ const PendingPostList = ({
     renderDivider,
     openBottomSheet,
     handleDeletePost,
-    isCommunityModerator,
+    canReviewCommunityPosts,
   } = usePendingPostList({ community, onPendingPostCountChange });
 
   return (
@@ -221,7 +226,7 @@ const PendingPostList = ({
                 mentionPositionArr={item?.metadata?.mentioned ?? []}
               />
             </View>
-            {isCommunityModerator && (
+            {canReviewCommunityPosts && (
               <>
                 <View style={styles.divider} />
                 <View style={styles.actionContainer}>

package/src/social/features/feed/components/NewsFeed/NewsFeed.tsx

@@ -1,5 +1,6 @@
-import { FC, memo } from 'react';
+import { FC, memo, useCallback } from 'react';
 import { View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 import { ComponentID, PageID } from '../../../../enums/enumUIKitID';
 import AmityGlobalFeedComponent from '../GlobalFeed/GlobalFeed';
 import { useStyles } from './styles';
@@ -7,6 +8,8 @@ import { useAmityComponent } from '../../../../hooks';
 import { useCustomRankingGlobalFeed } from '../../../../hooks/useCustomRankingGlobalFeed';
 import NewsFeedLoadingComponent from '../../../../components/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
 import { AmityEmptyNewsFeedComponent } from '../../../..';
+import uiSlice from '../../../../../core/stores/slices/uiSlice';
+import { useUIKitDispatch } from '../../../../../core/stores/store';
 
 type AmityNewsFeedComponentType = {
   pageId?: PageID;
@@ -27,6 +30,18 @@ const AmityNewsFeedComponent: FC<AmityNewsFeedComponentType> = ({
   const { itemWithAds, refresh, globalFeedPosts, loading, onNextPage } =
     useCustomRankingGlobalFeed();
 
+  const dispatch = useUIKitDispatch();
+  const { markFeedReloaded } = uiSlice.actions;
+
+  // Coming back to the feed is a reload as far as the viewer is concerned, but
+  // the screen is never unmounted, so nothing here re-runs on its own. Say so
+  // explicitly, the same way pull-to-refresh does.
+  useFocusEffect(
+    useCallback(() => {
+      dispatch(markFeedReloaded());
+    }, [dispatch, markFeedReloaded])
+  );
+
   if (isExcluded) return null;
 
   if (