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

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/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,21 @@ 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 = ({
@@ -33,11 +44,12 @@ const LoadingImage = ({
   onLoadFinish,
   onUploadError,
   isUploaded = false,
+  displayUri,
   fileId = '',
   isEditMode = false,
   fileCount,
   postId,
-  setIsUploading,
+  onUploadingChange,
   carousel = false,
 }: OverlayImageProps) => {
   const [loading, setLoading] = useState(true);
@@ -47,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) {
@@ -57,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,
@@ -78,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);
@@ -87,7 +117,6 @@ const LoadingImage = ({
     } catch (error) {
       handleLoadEnd();
       setIsProcess(false);
-      setIsUploading(false);
       setIsUploadError(true);
       onUploadError?.(true, source);
     }
@@ -96,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);
@@ -118,6 +171,17 @@ 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();
   };
@@ -132,7 +196,7 @@ const LoadingImage = ({
       }
     >
       <Image
-        source={{ uri: source }}
+        source={{ uri: displayUri ?? source }}
         resizeMode={carousel ? 'cover' : 'contain'}
         style={[
           styles.image,
@@ -168,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

@@ -55,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,

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

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import NetInfo from '@react-native-community/netinfo';
 import {
   View,
   TouchableOpacity,
@@ -10,7 +11,7 @@ import * as Progress from 'react-native-progress';
 import { SvgXml } from 'react-native-svg';
 import { deleteAmityFile, uploadVideoFile } from '../../../core/legacy/file';
 import {
-  closeIcon,
+  mediaRemoveIcon,
   playBtn,
   toastIcon,
   videoControlIcon,
@@ -25,6 +26,13 @@ import { useUIKitDispatch } from '../../../core/stores/store';
 
 interface OverlayImageProps {
   source: string;
+  /** Local path to render/decode from, when the item still has one. `source`
+   * stays the identity/bookkeeping key and becomes the remote url once the
+   * upload finishes; decoding the thumbnail 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;
   onClose?: (originalPath: string, fileId?: string, postId?: string) => void;
   onLoadFinish?: (
     fileId: string,
@@ -43,7 +51,11 @@ interface OverlayImageProps {
   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 LoadingVideo = ({
@@ -53,13 +65,14 @@ const LoadingVideo = ({
   onLoadFinish,
   onUploadError,
   isUploaded = false,
+  displayUri,
   thumbNail,
   onPlay,
   fileId,
   isEditMode = false,
   fileCount,
   postId,
-  setIsUploading,
+  onUploadingChange,
   carousel = false,
 }: OverlayImageProps) => {
   const dispatch = useUIKitDispatch();
@@ -69,6 +82,10 @@ const LoadingVideo = ({
   const [isProcess, setIsProcess] = useState<boolean>(false);
   const [isUploadError, setIsUploadError] = useState(false);
   const [thumbNailImage, setThumbNailImage] = useState(thumbNail ?? '');
+  // `uploadFileToAmity` is memoised on [source] only, so reading the state
+  // there would capture the empty first-render value. Mirror it into a ref so
+  // the upload callback always sees the frame that was actually decoded.
+  const thumbNailImageRef = useRef(thumbNail ?? '');
   const styles = useStyles();
   const [playingUri, setPlayingUri] = useState<string>('');
   const [isPause, setIsPause] = useState<boolean>(true);
@@ -89,11 +106,12 @@ const LoadingVideo = ({
 
   const handleLoadEnd = () => {
     setLoading(false);
-    setIsUploading(false);
+    onUploadingChange?.(false, source);
   };
 
   const processThumbNail = async () => {
-    const generatedThumbNail = await createVideoThumbnail(source);
+    const generatedThumbNail = await createVideoThumbnail(displayUri ?? source);
+    thumbNailImageRef.current = generatedThumbNail.path;
     setThumbNailImage(generatedThumbNail.path);
   };
   useEffect(() => {
@@ -107,8 +125,25 @@ const LoadingVideo = ({
   }, [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
+    // `videoErrors` set, and that set is otherwise only cleared by the
+    // mount effect below — which does not re-run on a retry, since none of
+    // `fileId`/`isUploaded`/`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 uploadVideoFile(
         source,
@@ -126,7 +161,12 @@ const LoadingVideo = ({
             file[0]?.attributes.name as string,
             index as number,
             source,
-            thumbNail
+            // Hand back the frame this component decoded, not the incoming
+            // prop — for a newly picked video that prop is empty, so the
+            // generated thumbnail used to be dropped on the floor. The
+            // composer stores it so the feed can show it while the server is
+            // still transcoding (PDT-4904).
+            thumbNailImageRef.current || thumbNail
           );
       } else {
         handleLoadEnd();
@@ -144,6 +184,30 @@ const LoadingVideo = ({
     }
   }, [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);
@@ -163,16 +227,30 @@ const LoadingVideo = ({
   }, [fileId, isUploaded, source]);
 
   const handleOnPlay = () => {
-    setIsPause(!isPause);
-    // In carousel mode the parent (onPlay) opens the full-screen media viewer,
-    // so skip the default single-video route navigation.
+    // In carousel mode the parent (onPlay) owns the full-screen media viewer,
+    // so this component never mounts the inline <Video> and never receives a
+    // dismiss callback to unpause with. Leaving `isPause` alone keeps the play
+    // icon rendered, which is what the frame shows once the viewer closes
+    // (PDT-4904); toggling it here hid the icon for the rest of the session.
     if (onPlay) {
       onPlay(source);
       return;
     }
+    setIsPause(!isPause);
     playVideoFullScreen(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();
   };
@@ -217,7 +295,7 @@ const LoadingVideo = ({
         <View style={styles.image} />
       )}
 
-      {loading ? (
+      {loading && (
         <View style={styles.overlay}>
           {isProcess ? (
             <Progress.CircleSnail
@@ -235,19 +313,31 @@ const LoadingVideo = ({
             />
           )}
         </View>
-      ) : isUploadError ? (
+      )}
+      {!loading && isUploadError && (
         <TouchableOpacity style={styles.overlay} onPress={onRetryUpload}>
           <SvgXml xml={toastIcon()} width="24" height="24" />
         </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={styles.closeButton}
-          disabled={(loading || isProcess) && !isUploadError}
-          onPress={handleDelete}
-        >
-          <SvgXml xml={closeIcon('white')} width="12" height="12" />
-        </TouchableOpacity>
       )}
+
+      {/* Sibling of the overlays, never an `else` branch of them: a failed
+          frame must keep its remove button, otherwise a video that cannot
+          upload can never be taken out of the composer. This is
+          the shape LoadingImage already uses, and it is what the `disabled`
+          guard below was written for — inside the old if/else chain that
+          `!isUploadError` term was unreachable. */}
+      <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={mediaRemoveIcon()} width="20" height="20" />
+      </TouchableOpacity>
     </View>
   );
 };

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

@@ -41,11 +41,20 @@ export const useStyles = () => {
     },
     closeButton: {
       position: 'absolute',
-      top: 7,
-      right: 7,
-      padding: 7,
-      backgroundColor: 'rgba(255, 255, 255, 0.4)',
+      // 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,
+      // Matches LoadingImage exactly: the icon is closeIcon('white') in both,
+      // so the white scrim this used to carry left a white-on-white button
+      // that all but disappeared over a light frame.
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
+      zIndex: 10,
     },
     playButton: {
       width: 100,

package/src/social/components/MediaViewer/MediaViewer.tsx

@@ -69,11 +69,12 @@ export function MediaViewer({
   const listRef = useRef<FlatList<MediaViewerItem>>(null);
   const videoRef = useRef<VideoRef | null>(null);
   const [current, setCurrent] = useState(initialIndex);
-  // Mute-carry (PDT-4309 / PDT-4312): the first video plays unmuted; each swipe
-  // defaults the next video to muted — until the user unmutes, after which
-  // subsequent videos stay unmuted.
+  // The sound setting belongs to the viewing session, not to one frame: the
+  // first video opens unmuted and swiping carries whatever the viewer last
+  // chose. Re-defaulting each new frame to muted meant a swipe silenced a
+  // session the viewer never muted, since opening unmuted is a default rather
+  // than an explicit choice.
   const [muted, setMuted] = useState(false);
-  const keepUnmutedRef = useRef(false);
 
   // --- playback controls (ported from web VideoPlayerControls) ---
   const [userPaused, setUserPaused] = useState(false);
@@ -118,7 +119,6 @@ export function MediaViewer({
     }
     setCurrent(initialIndex);
     setMuted(false);
-    keepUnmutedRef.current = false;
     resetPlayback();
     revealControls();
   }, [visible, initialIndex, resetPlayback, revealControls, clearHideTimer]);
@@ -129,7 +129,6 @@ export function MediaViewer({
       const idx = Math.round(e.nativeEvent.contentOffset.x / width);
       if (idx !== current) {
         setCurrent(idx);
-        setMuted(!keepUnmutedRef.current);
         resetPlayback();
         revealControls();
       }
@@ -138,11 +137,7 @@ export function MediaViewer({
   );
 
   const toggleMute = useCallback(() => {
-    setMuted((prev) => {
-      const next = !prev;
-      keepUnmutedRef.current = !next; // user unmuted -> keep unmuted afterwards
-      return next;
-    });
+    setMuted((prev) => !prev);
     revealControls();
   }, [revealControls]);
 
@@ -297,7 +292,11 @@ export function MediaViewer({
                 style={styles.media}
                 resizeMode="contain"
                 paused={index !== current || !visible || userPaused}
-                muted={muted && index === current}
+                // Only the frame on screen may be audible. `paused` alone is
+                // not a reliable gag on an off-screen native player, so an
+                // unmuted session must not leave a neighbouring frame able to
+                // emit sound.
+                muted={muted || index !== current}
                 repeat
                 playInBackground={false}
                 playWhenInactive={false}

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

@@ -1,9 +1,11 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
 
 export const useStyles = () => {
   const theme = useTheme<MyMD3Theme>();
+  const { top } = useSafeAreaInsets();
 
   const styles = StyleSheet.create({
     container: {
@@ -15,7 +17,13 @@ export const useStyles = () => {
       alignItems: 'center',
       justifyContent: 'space-between',
       paddingHorizontal: 16,
-      height: 56,
+      // The viewer is a full-screen Modal, so its own content starts at y=0
+      // with nothing above it — the 56pt header sat under the notch / Dynamic
+      // Island and the close button could not be tapped at all. Inset the
+      // header instead of the container so the media itself still fills the
+      // screen behind it.
+      paddingTop: top,
+      height: 56 + top,
       zIndex: 2,
     },
     headerBtn: {

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

@@ -25,6 +25,7 @@ import RenderTextWithMention from '../RenderTextWithMention/RenderTextWithMentio
 import { IMentionPosition } from '../../../core/types';
 import PollContent from '../PollContent';
 import { MediaViewer, type MediaViewerItem } from '../MediaViewer';
+import { classifyPostChildren } from '../../utils/postChildren';
 
 interface IPostContent {
   post: Amity.Post;
@@ -107,41 +108,8 @@ const PostContent: React.FC<IPostContent> = ({
         })
       );
 
-      const images: string[] = [];
-      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' &&
-          item?.data?.videoFileId.original
-        ) {
-          const isExisted = videos.some(
-            (video) =>
-              video.videoFileId.original === item.data.videoFileId.original
-          );
-          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)) {
-            polls.push(item.data);
-          }
-        } else if (item?.dataType === 'room') {
-          if (!livestreams.includes(item.data.roomId)) {
-            livestreams.push(item.data.roomId);
-          }
-        }
-      });
+      const { images, videos, polls, livestreams, media } =
+        classifyPostChildren(response, apiRegion);
 
       // Set unconditionally so navigating to a post without media clears the
       // previous media (see the effect below which no longer eagerly resets).