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

package/src/core/routes/RouteParamList.tsx

@@ -11,25 +11,6 @@ import {
 import { AmityPostCategory } from '../../social/enums/AmityPostContentComponentStyle';
 
 export type RootStackParamList = {
-  // --- Chat (PDT-3713) ---
-  AmityChatHomePage: undefined;
-  AmityChatPage: { channelId: string; userDisplayName?: string };
-  AmityChannelCreateConversationPage: undefined;
-  // --- Chat: group flows (PDT-3713 M3) ---
-  AmityGroupChatPage: { channelId: string; isJustCreated?: boolean };
-  AmitySelectGroupMemberPage: undefined;
-  AmityCreateGroupChatPage: { selectedUsers: Amity.User[] };
-  AmityAddGroupMemberPage: { channelId: string };
-  AmityGroupMemberListPage: { channelId: string };
-  AmityBannedGroupMemberListPage: { channelId: string };
-  AmityGroupSettingPage: { channelId: string };
-  AmityEditGroupProfilePage: { channelId: string };
-  AmityEditGroupMemberPermissionsPage: { channelId: string };
-  // --- Chat: M4 (search / archive / group notifications) ---
-  AmitySearchChannelPage: undefined;
-  AmityArchivedChatPage: undefined;
-  AmityGroupNotificationPreferencePage: { channelId: string };
-  AmityEditGroupNotificationPage: { channelId: string };
   AmitySocialHomePage: { postIdCallBack?: string };
   AmitySocialGlobalSearchPage: undefined;
   AmityMyCommunitiesSearchPage: undefined;

package/src/core/stores/slices/feedSlice.ts

@@ -30,6 +30,9 @@ const feedSlice = createSlice({
     ) => {
       const { postId, postDetail } = action.payload;
       const index = state.postList.findIndex((item) => item.postId === postId);
+      // Same miss as in globalfeedSlice: a postId this list never held wrote a
+      // "-1" property instead of updating anything, leaving the entries stale.
+      if (index < 0) return;
       state.postList[index] = postDetail;
     },
     deleteByPostId: (state, action: PayloadAction<{ postId: string }>) => {

package/src/core/stores/slices/globalfeedSlice.ts

@@ -66,6 +66,11 @@ const globalFeedSlice = createSlice({
       const index = state.postList.findIndex(
         (item) => !isAmityAd(item) && item.postId === postId
       );
+      // A post edited from a feed this list never held (a community feed, say)
+      // is simply not here. Without this guard the -1 miss was written as a
+      // "-1" property on the array: the real entries stayed stale and nothing
+      // reported a failure.
+      if (index < 0) return;
       state.postList[index] = postDetail;
     },
     deleteByPostId: (state, action: PayloadAction<{ postId: string }>) => {

package/src/core/stores/slices/localVideoThumbnailSlice.ts

@@ -0,0 +1,58 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
+/**
+ * A video post has no server-side thumbnail until the backend finishes
+ * transcoding, so for the first stretch of a new post's life the feed has
+ * nothing to render. The composer has already decoded a frame locally to show
+ * its own preview, so keep that frame around and let the feed borrow it until
+ * the real one exists.
+ *
+ * Keyed by the ORIGINAL video's fileId, which is what the created post carries
+ * in `data.videoFileId.original`. Mirrors web's LayoutProvider `videoThumbnail`
+ * + the VideoContent fallback.
+ *
+ * Only the most recently created post is kept — the same bound web has — so
+ * this never grows with session length. These are local file uris, valid only
+ * for this process; nothing persists them.
+ */
+export type LocalVideoThumbnail = {
+  /** fileId of the original (untranscoded) video */
+  fileId: string;
+  /** local uri of the frame the composer decoded */
+  thumbnailUrl: string;
+};
+
+interface LocalVideoThumbnailState {
+  postId: string | null;
+  videos: LocalVideoThumbnail[];
+}
+
+const initialState: LocalVideoThumbnailState = {
+  postId: null,
+  videos: [],
+};
+
+const localVideoThumbnailSlice = createSlice({
+  name: 'localVideoThumbnail',
+  initialState,
+  reducers: {
+    setLocalVideoThumbnails: (
+      state,
+      action: PayloadAction<{
+        postId: string;
+        videos: LocalVideoThumbnail[];
+      }>
+    ) => {
+      state.postId = action.payload.postId;
+      state.videos = action.payload.videos.filter(
+        ({ fileId, thumbnailUrl }) => !!fileId && !!thumbnailUrl
+      );
+    },
+    clearLocalVideoThumbnails: (state) => {
+      state.postId = null;
+      state.videos = [];
+    },
+  },
+});
+
+export default localVideoThumbnailSlice;

package/src/core/stores/slices/toastSlice.ts

@@ -7,9 +7,6 @@ type ToastState = {
   type: 'failed' | 'success' | 'informative' | 'loading';
   duration?: number;
   bottomPosition?: number;
-  // `custom` renders the dark pill used by chat notifications (bound to the
-  // CustomToast design tokens); `default` keeps the app-wide toast appearance.
-  variant?: 'default' | 'custom';
 };
 const initialState: ToastState = {
   visible: false,
@@ -17,7 +14,6 @@ const initialState: ToastState = {
   type: 'loading',
   duration: 2500,
   bottomPosition: 16,
-  variant: 'default',
 };
 
 const toastSlice = createSlice({
@@ -31,7 +27,6 @@ const toastSlice = createSlice({
       state.duration = action.payload.duration ?? initialState.duration;
       state.bottomPosition =
         action.payload.bottomPosition ?? initialState.bottomPosition;
-      state.variant = action.payload.variant ?? initialState.variant;
     },
     hideToast: (state) => {
       state.visible = false;
@@ -39,7 +34,6 @@ const toastSlice = createSlice({
       state.type = 'loading';
       state.duration = 2500;
       state.bottomPosition = 16;
-      state.variant = 'default';
     },
   },
 });

package/src/core/stores/slices/uiSlice.ts

@@ -20,6 +20,10 @@ interface UIState {
   toastMessage?: string;
   isLoadingToast?: boolean;
   isSuccessToast?: boolean;
+  /** Bumped once per feed reload. Feed items are keyed by post id, so a reload
+   * reuses their component instances and any position they were holding
+   * survives it; anything that must start over on a reload watches this. */
+  feedReloadToken: number;
 }
 const initialState: UIState = {
   showPostTypeChoiceModal: false,
@@ -30,6 +34,7 @@ const initialState: UIState = {
   postSetting: null,
   needApprovalOnPostCreation: true,
   isPublic: false,
+  feedReloadToken: 0,
 };
 
 const uiSlice = createSlice({
@@ -87,6 +92,9 @@ const uiSlice = createSlice({
       state.isLoadingToast = action.payload.isLoadingToast;
       state.isSuccessToast = action.payload.isSuccessToast;
     },
+    markFeedReloaded: (state) => {
+      state.feedReloadToken += 1;
+    },
     hideToastMessage: (state) => {
       state.showToastMessage = false;
       state.toastMessage = '';

package/src/core/stores/store/index.ts

@@ -5,6 +5,7 @@ import postDetailSlice from '../slices/postDetailSlice';
 import uiSlice from '../slices/uiSlice';
 import bottomSheetSlice from '../slices/bottomSheetSlice';
 import toastSlice from '../slices/toastSlice';
+import localVideoThumbnailSlice from '../slices/localVideoThumbnailSlice';
 import { createContext } from 'react';
 import {
   createStoreHook,
@@ -34,6 +35,7 @@ export const store: Store = configureStore({
     ui: uiSlice.reducer,
     bottomSheet: bottomSheetSlice.reducer,
     toast: toastSlice.reducer,
+    localVideoThumbnail: localVideoThumbnailSlice.reducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

package/src/core/types/mention.ts

@@ -11,6 +11,40 @@ export interface IDisplayImage {
   fileId: string | undefined;
   fileName: string;
   isUploaded: boolean;
+  /** Stable local identity of a staged attachment, assigned once when the item
+   * is created (picker asset id / original file name / capture path) and
+   * carried unchanged through the upload. `url` and `fileName` are both
+   * rewritten the moment the upload finishes — the url becomes the remote
+   * `?size=medium` one and fileName becomes the SERVER's name — so neither can
+   * identify an item across its own upload. Two defects come out of that:
+   * de-duplicating a second pick against already-uploaded items compared local
+   * names to server names and never matched, and the completion
+   * handler had to fall back to the positional `index` it was rendered with,
+   * which lands on the wrong entry once the array's composition has moved
+   * underneath an in-flight upload. Optional because the legacy
+   * EditPostModal builds these objects too. */
+  localId?: string;
+  /** The local file path the item was picked or captured from, kept for
+   * DISPLAY only. `url` is replaced by the remote `?size=medium` url the
+   * instant the upload finishes, so the composer frame stops rendering the
+   * file on disk and starts fetching over the network — go offline and the
+   * already-uploaded frame turns grey, even though the local file
+   * is still sitting there. Rendering from this instead keeps the frame
+   * painted whatever the network is doing. Absent for edit-mode children,
+   * which have no local file, so callers fall back to `url`. */
+  localUrl?: string;
+  /** The picker's original `asset.fileName` for a library pick, kept as the
+   * secondary de-duplication key next to `localId`: `asset.id` is
+   * only populated on some picker configurations, so the name is what catches
+   * a re-pick when it is absent. Left unset for camera captures, whose temp
+   * path is unique per shot and must never de-duplicate against anything. */
+  localFileName?: string;
   thumbNail?: string;
   postId?: string;
+  /** Source dimensions used to classify the composer frame ratio. For video
+   * these are the STORED frame; `rotation` must be applied before classifying
+   * (SelectedMediaComponent REQ-003d1, AmityVideo REQ-SDK-002). */
+  width?: number;
+  height?: number;
+  rotation?: number;
 }

package/src/index.tsx

@@ -3,7 +3,6 @@ import {
   AmityPageRenderer,
   AmityUiKitProvider,
   AmityUiKitSocial,
-  AmityUiKitChat,
   ErrorBoundary,
   navigate,
 } from './core';
@@ -107,7 +106,6 @@ export {
   AmityUiKitProvider,
   ErrorBoundary,
   AmityUiKitSocial,
-  AmityUiKitChat,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
   AmityCreateStoryPage,

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

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import NetInfo from '@react-native-community/netinfo';
 import { View, Image, TouchableOpacity } from 'react-native';
 import * as Progress from 'react-native-progress';
 import { SvgXml } from 'react-native-svg';
 import { deleteAmityFile, uploadImageFile } from '../../../core/legacy/file';
-import { closeIcon, toastIcon } from '../../../core/assets/icons/xml';
+import { mediaRemoveIcon, toastIcon } from '../../../core/assets/icons/xml';
 import { useStyles } from './styles';
 
 interface OverlayImageProps {
@@ -19,11 +20,22 @@ interface OverlayImageProps {
   onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
+  /** Local path to render from, when the item still has one. `source` stays
+   * the identity/bookkeeping key and becomes the remote url once the upload
+   * finishes; painting from that url means an already-uploaded frame goes
+   * grey the moment the device is offline. Falls back to `source`
+   * for edit-mode children, which have no local file. */
+  displayUri?: string;
   fileId?: string;
   isEditMode?: boolean;
   fileCount?: number;
   postId?: string;
-  setIsUploading?: (arg: boolean) => void;
+  // Reports this frame's upload state keyed by its own `source`, so the
+  // composer can gate Post on every frame at once. The old shared
+  // `setIsUploading` boolean was flipped back to false by whichever upload
+  // finished first, unlocking Post while the other frames were still in flight.
+  onUploadingChange?: (isUploading: boolean, source: string) => void;
+  carousel?: boolean;
 }
 const LoadingImage = ({
   source,
@@ -32,11 +44,13 @@ const LoadingImage = ({
   onLoadFinish,
   onUploadError,
   isUploaded = false,
+  displayUri,
   fileId = '',
   isEditMode = false,
   fileCount,
   postId,
-  setIsUploading,
+  onUploadingChange,
+  carousel = false,
 }: OverlayImageProps) => {
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
@@ -45,8 +59,8 @@ const LoadingImage = ({
   const styles = useStyles();
   const handleLoadEnd = useCallback(() => {
     setLoading(false);
-    setIsUploading(false);
-  }, [setIsUploading]);
+    onUploadingChange?.(false, source);
+  }, [onUploadingChange, source]);
 
   useEffect(() => {
     if (progress === 100) {
@@ -55,8 +69,25 @@ const LoadingImage = ({
   }, [progress]);
 
   const uploadFileToAmity = useCallback(async () => {
-    setIsUploading(true);
+    onUploadingChange?.(true, source);
     setIsUploadError(false);
+    // A retry re-enters this function with `loading` already false — the failed
+    // attempt's `handleLoadEnd` cleared it and nothing ever set it back, so
+    // `setLoading` only ever ran downwards in this component. The frame then
+    // re-uploaded with no spinner at all, which reads as "finished instantly"
+    // while Post stays disabled for the length of the upload.
+    // Progress and the processing flag are stale from the failed attempt too,
+    // so reset the whole visual upload state here rather than only in the
+    // mount effect, which does not re-run on a retry.
+    setLoading(true);
+    setProgress(0);
+    setIsProcess(false);
+    // Clearing the local flag alone left this source inside the parent's
+    // `imageErrors` set, and that set is otherwise only cleared by the
+    // mount effect below — which does not re-run on a retry, since neither
+    // `isUploaded` nor `source` changed. Post stayed disabled even after the
+    // retry uploaded fine, so tell the parent the error is gone up front.
+    onUploadError?.(false, source);
     try {
       const file: Amity.File<any>[] = await uploadImageFile(
         source,
@@ -76,7 +107,8 @@ const LoadingImage = ({
             source
           );
       } else {
-        setIsUploading(false);
+        // `handleLoadEnd` already reports the upload as finished — the extra
+        // setter call it used to be paired with was redundant.
         handleLoadEnd();
         setIsProcess(false);
         setIsUploadError(true);
@@ -85,7 +117,6 @@ const LoadingImage = ({
     } catch (error) {
       handleLoadEnd();
       setIsProcess(false);
-      setIsUploading(false);
       setIsUploadError(true);
       onUploadError?.(true, source);
     }
@@ -94,10 +125,34 @@ const LoadingImage = ({
     index,
     onLoadFinish,
     onUploadError,
-    setIsUploading,
+    onUploadingChange,
     source,
   ]);
 
+  // The frame is expected to end up uploaded, and Post enabled, once
+  // connectivity returns. Nothing retried on its own —
+  // the error key only cleared on a manual tap on that specific frame, and the
+  // peek carousel can leave a failed frame off-screen entirely, so Post stayed
+  // disabled with no visible cause. Retry when the device regains a
+  // connection, using the same NetInfo listener idiom as post Detail and the
+  // livestream screens.
+  //
+  // Gated on a disconnected -> connected transition, not merely on being
+  // connected: addEventListener fires immediately with the current state, so a
+  // failure that happened while online (a server error, say) would otherwise
+  // re-fire on every resubscribe and spin.
+  const wasDisconnectedRef = useRef(false);
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      const isConnected = !!state.isConnected;
+      if (isConnected && wasDisconnectedRef.current && isUploadError) {
+        uploadFileToAmity();
+      }
+      wasDisconnectedRef.current = !isConnected;
+    });
+    return () => unsubscribe();
+  }, [isUploadError, uploadFileToAmity]);
+
   const handleDelete = async () => {
     if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
@@ -116,14 +171,33 @@ const LoadingImage = ({
     }
   }, [isUploaded, source]);
 
+  // A frame can be removed (or its source swapped) while its upload is still
+  // in flight, in which case `handleLoadEnd` never runs and the composer would
+  // keep waiting on an entry no mounted child owns any more — leaving Post
+  // disabled forever. Clearing it from this cleanup keeps the
+  // bookkeeping in the same component that added it.
+  useEffect(() => {
+    return () => {
+      onUploadingChange?.(false, source);
+    };
+  }, [onUploadingChange, source]);
+
   const onRetryUpload = () => {
     uploadFileToAmity();
   };
   return (
-    <View style={fileCount >= 3 ? styles.image3XContainer : styles.container}>
+    <View
+      style={
+        carousel
+          ? styles.carouselContainer
+          : fileCount >= 3
+          ? styles.image3XContainer
+          : styles.container
+      }
+    >
       <Image
-        source={{ uri: source }}
-        resizeMode="contain"
+        source={{ uri: displayUri ?? source }}
+        resizeMode={carousel ? 'cover' : 'contain'}
         style={[
           styles.image,
           loading ? styles.loadingImage : styles.loadedImage,
@@ -158,10 +232,15 @@ const LoadingImage = ({
 
       <TouchableOpacity
         style={styles.closeButton}
+        // The button matches web at 28dp, which is still under Apple's 44pt
+        // minimum touch target. Grow the touch area rather than the black
+        // disc, so the visual stays in parity while the frame stays tappable:
+        // 28 + 8 on each side lands exactly on 44.
+        hitSlop={8}
         disabled={(loading || isProcess) && !isUploadError}
         onPress={handleDelete}
       >
-        <SvgXml xml={closeIcon('white')} width="12" height="12" />
+        <SvgXml xml={mediaRemoveIcon()} width="20" height="20" />
       </TouchableOpacity>
     </View>
   );

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

@@ -13,6 +13,10 @@ export const useStyles = () => {
       height: width / 3 - 16,
       margin: 3,
     },
+    carouselContainer: {
+      width: '100%',
+      height: '100%',
+    },
     image: {
       width: '100%',
       height: '100%',
@@ -51,9 +55,14 @@ export const useStyles = () => {
     },
     closeButton: {
       position: 'absolute',
-      top: 7,
-      right: 7,
-      padding: 7,
+      // Matched to the web UIKit's remove button, which is 20px of icon inside
+      // 4px of padding at an 8px offset. The old 12/7 pair came to nearly the
+      // same 26dp outer size but filled only 46% of the circle with the glyph
+      // against web's 71%, so it read as a heavy black disc with a tiny cross
+      // in it.
+      top: 8,
+      right: 8,
+      padding: 4,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
       zIndex: 10,