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

package/lib/typescript/social/utils/mediaAttachments.d.ts

@@ -0,0 +1,91 @@
+import type { IDisplayImage } from '../../core/types';
+/**
+ * The composer caps a post at 10 attachments of a single media type.
+ */
+export declare const MAX_MEDIA_ATTACHMENTS = 10;
+/**
+ * The identity fields a staged attachment must carry for the helpers below to
+ * recognise it across its own upload. See `IDisplayImage.localId`.
+ */
+export type MediaPickCandidate = IDisplayImage & {
+    localId: string;
+};
+/**
+ * Drop the candidates that are already staged, and any repeated inside the
+ * batch itself, preserving the order of the ones that survive.
+ *
+ * De-duplication runs against the LOCAL identity, never `fileName`: the moment
+ * an item finishes uploading the composer rewrites its `fileName` to the
+ * server's `attributes.name`, and edit-mode entries are hydrated with the
+ * fileId, so a set built from `fileName` compares server-side names against
+ * picker names and never matches. `localId` / `localFileName` are assigned once
+ * at pick time and survive the upload, so they still line up here.
+ *
+ * `localFileName` is a second key next to `localId` because the picker's
+ * `asset.id` is not populated by every configuration — the name is what catches
+ * a re-pick when no id came back. Camera captures deliberately carry no
+ * `localFileName`, so two shots never de-duplicate against each other.
+ *
+ * The drop is silent by design (no toast, no alert) and leaves the already
+ * staged copy exactly where it is, which is what keeps a re-pick of A followed
+ * by B and C rendering as A, B, C.
+ */
+export declare function dedupeMediaPicks<T extends MediaPickCandidate>(staged: IDisplayImage[], candidates: T[]): T[];
+/**
+ * Append `additions` to `staged`, holding the 10-attachment cap.
+ */
+export declare function appendWithinCap(staged: IDisplayImage[], additions: IDisplayImage[]): IDisplayImage[];
+/**
+ * Route a finished upload back to the entry it actually belongs to, matched by
+ * the local path the child was mounted with.
+ *
+ * The child reports both a positional `index` and the `originalPath`. The index
+ * is the array position the frame was RENDERED at when the upload started —
+ * LoadingVideo goes further and memoises its uploader on `[source]` alone, so
+ * it freezes the index of the render where the source last changed. Writing
+ * `data[index]` therefore lands on whatever now sits at that position: a frame
+ * removed, an upload retried after the array grew, or a slow upload finishing
+ * after its neighbours moved all put one file's remote url onto another file's
+ * entry — which is what QA saw as an already-loaded image repainting with a
+ * different picture once the network came back. Matching on `originalPath` is
+ * exact: a not-yet-uploaded entry's `url` IS the local path its child was
+ * handed, and pick de-duplication guarantees those are unique across the array.
+ *
+ * The patch is MERGED rather than replacing the entry: `localId` /
+ * `localFileName` are what the next pick de-duplicates against, and
+ * what the carousel keys its frames by, and the picker's width/height still
+ * classify the frame ratio — a wholesale replacement dropped all of them.
+ *
+ * No match means the entry is gone (closed mid-upload) or already finished, so
+ * the array is returned untouched rather than resurrecting or double-writing.
+ */
+export declare function applyFinishedUpload(staged: IDisplayImage[], originalPath: string, patch: Partial<IDisplayImage>): IDisplayImage[];
+/**
+ * Add or remove a media item's `source` from the set of in-flight uploads.
+ *
+ * The composer gates Post/Save on this set being empty. It replaced a single
+ * shared boolean that whichever upload finished FIRST flipped back to false on
+ * behalf of every other frame, unlocking Post while the rest were still
+ * uploading.
+ *
+ * Returns the same set instance when nothing changes, so a redundant report —
+ * a child clearing on unmount right after `handleLoadEnd` already cleared —
+ * does not trigger a re-render.
+ */
+export declare function toggleUploadingSource(uploading: Set<string>, source: string, isUploading: boolean): Set<string>;
+/**
+ * The entries the feed's local-thumbnail bridge should hold for a just-created
+ * video post.
+ *
+ * A video's server thumbnail does not exist until transcoding finishes, so the
+ * feed falls back to the frame the composer decoded at pick time, matched on
+ * the uploaded video's fileId. Entries without both halves are dropped: a row
+ * with an empty url still satisfies the feed's lookup, which suppresses its own
+ * pending state and leaves the frame blank instead of showing the play button
+ * over a plain background.
+ */
+export declare function toLocalVideoThumbnails(videos: Pick<IDisplayImage, 'fileId' | 'thumbNail'>[]): {
+    fileId: string;
+    thumbnailUrl: string;
+}[];
+//# sourceMappingURL=mediaAttachments.d.ts.map

package/lib/typescript/social/utils/mediaAttachments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaAttachments.d.ts","sourceRoot":"","sources":["../../../../src/social/utils/mediaAttachments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,kBAAkB,EAC3D,MAAM,EAAE,aAAa,EAAE,EACvB,UAAU,EAAE,CAAC,EAAE,GACd,CAAC,EAAE,CAkBL;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,aAAa,EAAE,EACvB,SAAS,EAAE,aAAa,EAAE,GACzB,aAAa,EAAE,CAKjB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,aAAa,EAAE,EACvB,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,GAC5B,aAAa,EAAE,CAMjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,OAAO,GACnB,GAAG,CAAC,MAAM,CAAC,CASb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,WAAW,CAAC,EAAE,GACpD;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,EAAE,CAU5C"}

package/lib/typescript/social/utils/postChildren.d.ts

@@ -0,0 +1,38 @@
+import type { IVideoPost } from '../components/legacy/Social/PostList';
+/** A post child as the feed resolves it: the child post plus its own payload. */
+export type ResolvedPostChild = {
+    post?: Amity.Post;
+    dataType?: string;
+    data?: Record<string, any>;
+};
+export type ClassifiedPostChildren = {
+    /** Medium-size download urls, de-duplicated. */
+    images: string[];
+    videos: IVideoPost[];
+    polls: {
+        pollId: string;
+    }[];
+    livestreams: Amity.Room['roomId'][];
+    /**
+     * The media children the carousel renders, in the same order — and for
+     * videos, at the same indices — as `videos`. The full-screen player is built
+     * from `videos` but opened with an index taken from this array, so a child
+     * that lands in one and not the other opens the wrong video.
+     */
+    media: Amity.Post[];
+};
+/**
+ * Sort a post's resolved children into what each surface needs.
+ *
+ * Every hop into a child's payload is guarded, because the cost of being wrong
+ * is out of proportion to the saving: an ErrorBoundary sits around the whole
+ * UIKit without an onError, so one TypeError in here replaces the entire app
+ * with a generic error page and takes its own stack down with it.
+ *
+ * `ContentDataVideo` types `videoFileId` as always present but every size
+ * inside it as optional, so `original` is the hop that can legitimately be
+ * missing. The keys above it are guarded on the same principle rather than on
+ * evidence that they go missing.
+ */
+export declare function classifyPostChildren(children: ResolvedPostChild[], apiRegion: string): ClassifiedPostChildren;
+//# sourceMappingURL=postChildren.d.ts.map

package/lib/typescript/social/utils/postChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"postChildren.d.ts","sourceRoot":"","sources":["../../../../src/social/utils/postChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAEvE,iFAAiF;AACjF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,gDAAgD;IAChD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;IACpC;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,SAAS,EAAE,MAAM,GAChB,sBAAsB,CA4CxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.1.1-fe2678f6.0",
+  "version": "4.2.0",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -57,7 +57,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@amityco/ts-sdk-react-native": "7.25.1-144f8feb.0",
+    "@amityco/ts-sdk-react-native": "7.27.0",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
@@ -119,7 +119,7 @@
     "@types/react": "^19.1.0"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "7.25.1-144f8feb.0",
+    "@amityco/ts-sdk-react-native": "7.27.0",
     "@livekit/react-native": "^2.9.6",
     "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^1.19.3",

package/src/core/assets/icons/post.tsx

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
 
 const icon = (props?: SVGProps<SVGSVGElement>) => {
-  const { width = 24, height = 24, fill = '#292B32' } = props || {};
+  const { width = 24, height = 24, fill = 'currentColor' } = props || {};
 
   return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16.0078 15.3789L17.1328 14.2539C17.3086 14.0781 17.625 14.2188 17.625 14.4648V19.5625C17.625 20.5117 16.8516 21.25 15.9375 21.25H3.5625C2.61328 21.25 1.875 20.5117 1.875 19.5625V7.1875C1.875 6.27344 2.61328 5.5 3.5625 5.5H13.1602C13.4062 5.5 13.5469 5.81641 13.3711 5.99219L12.2461 7.11719C12.1758 7.1875 12.1055 7.1875 12.0352 7.1875H3.5625V19.5625H15.9375V15.5898C15.9375 15.5195 15.9375 15.4492 16.0078 15.3789ZM21.4922 8.3125L12.2812 17.5234L9.08203 17.875C8.16797 17.9805 7.39453 17.207 7.5 16.293L7.85156 13.0938L17.0625 3.88281C17.8711 3.07422 19.1719 3.07422 19.9805 3.88281L21.4922 5.39453C22.3008 6.20312 22.3008 7.50391 21.4922 8.3125ZM18.0469 9.36719L16.0078 7.32812L9.46875 13.8672L9.1875 16.1875L11.5078 15.9062L18.0469 9.36719ZM20.2969 6.58984L18.7852 5.07812C18.6445 4.90234 18.3984 4.90234 18.2578 5.07812L17.2031 6.13281L19.2422 8.20703L20.332 7.11719C20.4727 6.94141 20.4727 6.73047 20.2969 6.58984Z" fill="${fill}"/>

package/src/core/assets/icons/story.tsx

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
 
 const icon = (props?: SVGProps<SVGSVGElement>) => {
-  const { width = 24, height = 24, fill = '#292B32' } = props || {};
+  const { width = 24, height = 24, fill = 'currentColor' } = props || {};
 
   return `<svg
     width="${width}"

package/src/core/assets/icons/xml.ts

@@ -60,6 +60,21 @@ export const closeIcon = (
 ): string => `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.65234 6.25L11.4492 2.48828C11.6602 2.27734 11.6602 1.89062 11.4492 1.67969L10.5703 0.800781C10.3594 0.589844 9.97266 0.589844 9.76172 0.800781L6 4.59766L2.20312 0.800781C1.99219 0.589844 1.60547 0.589844 1.39453 0.800781L0.515625 1.67969C0.304688 1.89062 0.304688 2.27734 0.515625 2.48828L4.3125 6.25L0.515625 10.0469C0.304688 10.2578 0.304688 10.6445 0.515625 10.8555L1.39453 11.7344C1.60547 11.9453 1.99219 11.9453 2.20312 11.7344L6 7.9375L9.76172 11.7344C9.97266 11.9453 10.3594 11.9453 10.5703 11.7344L11.4492 10.8555C11.6602 10.6445 11.6602 10.2578 11.4492 10.0469L7.65234 6.25Z" fill="${color}"/>
 </svg>`;
+// Ported verbatim from web UIKit icons/Close, for the carousel composer's
+// per-frame remove button.
+//
+// Not a swap for `closeIcon` above, which eleven other screens render — the
+// difference that matters here is that this one carries its padding INSIDE its
+// own 32-unit viewBox: the cross spans 8.4 to 23.6, so it fills about 47% of
+// the box against `closeIcon`'s near-100%. Rendered at 20 inside a 28dp disc it
+// draws a ~9dp cross with the scrim still visible around it, which is exactly
+// what web looks like. Using `closeIcon` at the same 20 filled the disc edge to
+// edge and left a bare white X floating on the photo.
+export const mediaRemoveIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2031 16.2861L23.2656 21.3486C23.5469 21.6299 23.5469 22.1455 23.2656 22.4268L22.0938 23.5986C21.8125 23.8799 21.2969 23.8799 21.0156 23.5986L16 18.5361L10.9375 23.5986C10.6562 23.8799 10.1406 23.8799 9.85938 23.5986L8.6875 22.4268C8.40625 22.1455 8.40625 21.6299 8.6875 21.3486L13.75 16.2861L8.6875 11.2705C8.40625 10.9893 8.40625 10.4736 8.6875 10.1924L9.85938 9.02051C10.1406 8.73926 10.6562 8.73926 10.9375 9.02051L16 14.083L21.0156 9.02051C21.2969 8.73926 21.8125 8.73926 22.0938 9.02051L23.2656 10.1924C23.5469 10.4736 23.5469 10.9893 23.2656 11.2705L18.2031 16.2861Z" fill="${color}"/>
+</svg>`;
 // Ported from web UIKit icons/MutedFilled (speaker + waves) — shown when audio
 // is ON (unmuted). Used by the carousel full-screen media viewer.
 export const soundOnIcon = (

package/src/core/legacy/file.tsx

@@ -1,117 +1,202 @@
 import { FileRepository, ContentFeedType } from '@amityco/ts-sdk-react-native';
 
+import NetInfo from '@react-native-community/netinfo';
 import { Platform } from 'react-native';
 import { appendFileToFormData } from '../utils/fileUpload';
 
+/**
+ * The rejection shape every uploader in this module throws.
+ *
+ * `LoadingImage` / `LoadingVideo` currently ignore the thrown value and show a
+ * generic toast, so the contract is deliberately loose — but keeping one shape
+ * means a caller that *does* want to branch (e.g. the `INVALID_IMAGE`
+ * moderation case) can read `code` instead of sniffing strings.
+ */
+export type UploadError = {
+  message: string;
+  details?: string;
+  code?: string;
+  originalError?: unknown;
+};
+
+/**
+ * Thrown when the SDK resolves without a payload. A 2xx with no `data` is still
+ * a failed upload as far as the caller is concerned — the callers immediately
+ * read `file[0]?.fileId`, so resolving `undefined` would only move the failure
+ * somewhere less diagnosable.
+ */
+const NO_FILE_DATA_ERROR: UploadError = {
+  message: 'Upload failed - no file data returned',
+};
+
+/**
+ * Thrown before an attempt is even made when the device has no connection.
+ *
+ * Rejecting up front is not belt-and-braces — on iOS it is the only thing that
+ * produces a failure at all. Android's networking stack rejects an offline
+ * request almost immediately, so the uploaders' `catch` ran and the frame
+ * showed its error state; NSURLSession instead sits on the request waiting for
+ * connectivity, so the promise never settled, the `catch` never ran, and the
+ * frame stayed on its spinner forever with no way to reach the failed state
+ * The spec asks for an error state per attachment that failed to upload,
+ * whatever the platform.
+ */
+const OFFLINE_ERROR: UploadError = {
+  message: 'Upload failed - no internet connection',
+  code: 'OFFLINE',
+};
+
+/**
+ * Reject immediately when there is no connection, rather than handing the
+ * request to a networking stack that may never answer.
+ *
+ * Only covers being offline as the attempt STARTS. A connection dropped
+ * mid-upload still leaves iOS waiting, because nothing here can abort a
+ * request already inside the SDK — the composer's reconnect retry is what
+ * eventually recovers that case.
+ */
+async function assertOnline(): Promise<void> {
+  const state = await NetInfo.fetch();
+  if (!state.isConnected) throw OFFLINE_ERROR;
+}
+
+/**
+ * Normalise whatever the SDK / networking layer threw into an `UploadError`.
+ *
+ * A dropped connection surfaces here as a plain `Error` ("Network request
+ * failed") carrying no Amity error code — which is exactly the reported repro:
+ * the user toggles the network off mid-upload and the request rejects.
+ */
+function toUploadError(error: any): UploadError {
+  return {
+    message: 'Upload failed',
+    details:
+      error?.message || "We couldn't complete your upload. Please try again.",
+    originalError: error,
+  };
+}
+
+/**
+ * Every uploader below is a plain `async` function with try/catch,
+ * NOT `new Promise(async (resolve, reject) => …)`.
+ *
+ * The old wrapper was actively harmful, not merely redundant. An `async`
+ * executor returns a promise that `new Promise` neither awaits nor observes, so
+ * anything the executor threw — and a mid-upload network drop makes
+ * `FileRepository.upload*` throw — settled only that orphaned promise. The
+ * outer promise stayed **pending forever**: `LoadingVideo.uploadFileToAmity`
+ * sat awaiting it, its `catch` never ran, `handleLoadEnd()` was never called,
+ * `loading` stayed `true`, and the frame kept spinning even after the
+ * connection came back, so the tappable retry overlay was unreachable.
+ *
+ * Throwing from an `async` function has no such hole: a `throw` anywhere in the
+ * body — including from code the function `await`ed — settles the promise it
+ * returned. `uploadImageFile` already had the try/catch, which is
+ * why the image path showed a failed state while the video path hung.
+ */
 export async function uploadFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<any>[]> {
-  return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
-    const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
+  const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
 
-    await appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+  let file: Amity.File<any>[] | undefined;
 
-    const { data: file } = await FileRepository.uploadFile(
-      formData,
-      (percent) => {
-        perCentCallback && perCentCallback(percent);
-      }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
-    }
-  });
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+
+    ({ data: file } = await FileRepository.uploadFile(formData, (percent) => {
+      perCentCallback && perCentCallback(percent);
+    }));
+  } catch (error: any) {
+    throw toUploadError(error);
+  }
+
+  // Deliberately outside the try: an empty payload is not an exception to
+  // re-wrap, and throwing it in here would round-trip it through
+  // `toUploadError` and lose the specific message.
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function uploadImageFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<'image'>[]> {
-  return await new Promise(async (resolve, reject) => {
-    try {
-      const formData = new FormData();
-      const parts = filePath.split('/');
-      const fileName = parts[parts.length - 1];
-      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
-
-      await appendFileToFormData(
-        formData,
-        'files',
-        filePath,
-        fileName,
-        fileType
-      );
-
-      const { data: file } = await FileRepository.uploadImage(
-        formData,
-        (percent) => {
-          perCentCallback && perCentCallback(percent);
-        }
-      );
-
-      if (file) {
-        resolve(file);
-      } else {
-        reject({ message: 'Upload failed - no file data returned' });
-      }
-    } catch (error: any) {
-      if (
-        error?.message?.includes('INVALID_IMAGE') ||
-        error?.message?.includes('Inappropriate')
-      ) {
-        reject({
-          message: 'Inappropriate image',
-          details: 'Please choose a different image to upload.',
-          code: 'INVALID_IMAGE',
-        });
-      } else {
-        reject({
-          message: 'Upload failed',
-          details:
-            error?.message ||
-            "We couldn't complete your upload. Please try again.",
-          originalError: error,
-        });
-      }
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
+  const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+
+  let file: Amity.File<'image'>[] | undefined;
+
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, fileType);
+
+    ({ data: file } = await FileRepository.uploadImage(formData, (percent) => {
+      perCentCallback && perCentCallback(percent);
+    }));
+  } catch (error: any) {
+    // Moderation rejects the image server-side; that is spelled out here
+    // rather than folded into the generic "please try again" copy.
+    if (
+      error?.message?.includes('INVALID_IMAGE') ||
+      error?.message?.includes('Inappropriate')
+    ) {
+      throw {
+        message: 'Inappropriate image',
+        details: 'Please choose a different image to upload.',
+        code: 'INVALID_IMAGE',
+      } as UploadError;
     }
-  });
+
+    throw toUploadError(error);
+  }
+
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function uploadVideoFile(
   filePath: string,
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<any>[]> {
-  return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
+  const formData = new FormData();
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
 
-    await appendFileToFormData(
-      formData,
-      'files',
-      filePath,
-      fileName,
-      'video/mp4'
-    );
+  let file: Amity.File<any>[] | undefined;
+
+  await assertOnline();
+
+  try {
+    appendFileToFormData(formData, 'files', filePath, fileName, 'video/mp4');
 
-    const { data: file } = await FileRepository.uploadVideo(
+    ({ data: file } = await FileRepository.uploadVideo(
       formData,
       ContentFeedType.POST,
       (percent) => {
         perCentCallback && perCentCallback(percent);
       }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
-    }
-  });
+    ));
+  } catch (error: any) {
+    throw toUploadError(error);
+  }
+
+  if (!file) throw NO_FILE_DATA_ERROR;
+
+  return file;
 }
+
 export async function deleteAmityFile(
   fileId: string
 ): Promise<{ success: boolean }> {

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/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({