@amityco/react-native-social-uikit 4.1.0 → 4.1.1-11cdc854.0

package/lib/typescript/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.d.ts

@@ -5,6 +5,9 @@ type AmityDetailedMediaAttachmentComponentType = {
     onPressVideo: () => void;
     chosenMediaType?: mediaAttachment;
     onHeightChange?: (height: number) => void;
+    /** When the 10-attachment cap is reached, the camera + gallery icons are
+     * disabled and untappable (PDT-4310 / PDT-4312). */
+    disabled?: boolean;
 };
 declare const _default: import("react").NamedExoticComponent<AmityDetailedMediaAttachmentComponentType>;
 export default _default;

package/lib/typescript/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailedMediaAttachment.d.ts","sourceRoot":"","sources":["../../../../../../../src/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAO3B,KAAK,yCAAyC,GAAG;IAC/C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;;AAgKF,wBAA2D"}
+{"version":3,"file":"DetailedMediaAttachment.d.ts","sourceRoot":"","sources":["../../../../../../../src/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAO3B,KAAK,yCAAyC,GAAG;IAC/C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;wDACoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;AAoKF,wBAA2D"}

package/lib/typescript/social/features/post/components/MediaAttachment/MediaAttachment.d.ts

@@ -5,6 +5,9 @@ type AmityMediaAttachmentComponentType = {
     onPressVideo: () => void;
     chosenMediaType?: mediaAttachment;
     onHeightChange?: (height: number) => void;
+    /** When the 10-attachment cap is reached, the camera + gallery icons are
+     * disabled and untappable (PDT-4310 / PDT-4312). */
+    disabled?: boolean;
 };
 declare const _default: import("react").NamedExoticComponent<AmityMediaAttachmentComponentType>;
 export default _default;

package/lib/typescript/social/features/post/components/MediaAttachment/MediaAttachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaAttachment.d.ts","sourceRoot":"","sources":["../../../../../../../src/social/features/post/components/MediaAttachment/MediaAttachment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAM3B,KAAK,iCAAiC,GAAG;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;;AAoIF,wBAAmD"}
+{"version":3,"file":"MediaAttachment.d.ts","sourceRoot":"","sources":["../../../../../../../src/social/features/post/components/MediaAttachment/MediaAttachment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAM3B,KAAK,iCAAiC,GAAG;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;wDACoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;AA4IF,wBAAmD"}

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

@@ -0,0 +1,21 @@
+export type FrameRatio = '16:9' | '1:1' | '4:5';
+/**
+ * Numeric aspect ratio (width / height) for each frame ratio.
+ * React Native's `aspectRatio` style takes a number, unlike web's CSS string.
+ */
+export declare const FRAME_RATIO_VALUE: Record<FrameRatio, number>;
+export declare const DEFAULT_FRAME_RATIO: FrameRatio;
+export declare function getFrameRatio(width?: number, height?: number): FrameRatio;
+/**
+ * Swap width/height when a video is rotated 90/270 degrees so the frame ratio
+ * reflects how the video is actually displayed. Mirrors web getVideoDisplayDims.
+ */
+export declare function getVideoDisplayDims(video?: {
+    width?: number;
+    height?: number;
+    rotation?: number;
+}): {
+    width?: number;
+    height?: number;
+};
+//# sourceMappingURL=getFrameRatio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getFrameRatio.d.ts","sourceRoot":"","sources":["../../../../src/social/utils/getFrameRatio.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxD,CAAC;AAKF,eAAO,MAAM,mBAAmB,EAAE,UAAkB,CAAC;AAErD,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAQzE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAMtC"}

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

@@ -0,0 +1,11 @@
+export type IndicatorDotState = 'active' | 'inactive' | 'edge';
+export type IndicatorDot = {
+    key: string;
+    state: IndicatorDotState;
+    side?: 'left' | 'right';
+};
+export type IndicatorConfig = {
+    dots: IndicatorDot[];
+};
+export declare function getIndicatorConfig(current: number, total: number): IndicatorConfig;
+//# sourceMappingURL=getIndicatorConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getIndicatorConfig.d.ts","sourceRoot":"","sources":["../../../../src/social/utils/getIndicatorConfig.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,eAAe,CA4CjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.1.0",
+  "version": "4.1.1-11cdc854.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.23.0",
+    "@amityco/ts-sdk-react-native": "7.25.1-144f8feb.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.23.0",
+    "@amityco/ts-sdk-react-native": "7.25.1-144f8feb.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/xml.ts

@@ -60,6 +60,66 @@ 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 from web UIKit icons/MutedFilled (speaker + waves) — shown when audio
+// is ON (unmuted). Used by the carousel full-screen media viewer.
+export const soundOnIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1211 5.78125C11.6484 5.25391 12.5625 5.60547 12.5625 6.37891V18.1562C12.5625 18.9297 11.6484 19.2812 11.1211 18.7539L7.99219 15.625H4.40625C3.91406 15.625 3.5625 15.2734 3.5625 14.7812V9.71875C3.5625 9.26172 3.91406 8.875 4.40625 8.875H7.99219L11.1211 5.78125ZM20.4375 12.25C20.4375 14.5 19.2773 16.5391 17.4141 17.7695C16.9922 18.0156 16.4648 17.875 16.2539 17.4883C16.0078 17.1016 16.1133 16.5742 16.5 16.3281C17.9062 15.4492 18.75 13.9023 18.75 12.25C18.75 10.6328 17.9062 9.08594 16.5 8.20703C16.1133 7.96094 16.0078 7.43359 16.2539 7.04688C16.5 6.625 17.0273 6.51953 17.4141 6.76562C19.2773 7.99609 20.4375 10.0352 20.4375 12.25ZM15.4453 9.57812C16.4297 10.1055 17.0625 11.1602 17.0625 12.25C17.0625 13.375 16.4297 14.4297 15.4453 14.957C15.0234 15.2031 14.5312 15.0625 14.2852 14.6406C14.0742 14.2188 14.2148 13.7266 14.6367 13.4805C15.0586 13.2344 15.375 12.7773 15.375 12.25C15.375 11.7578 15.0586 11.3008 14.6367 11.0547C14.2148 10.8086 14.0742 10.3164 14.2852 9.89453C14.5312 9.47266 15.0234 9.33203 15.4453 9.57812Z" fill="${color}"/>
+</svg>`;
+// Ported from web UIKit icons/UnMuted (speaker with slash) — shown when audio
+// is OFF (muted).
+export const soundOffIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.0039 19.3867C23.25 19.5625 23.3203 19.9141 23.1094 20.1602L22.4414 21.0391C22.2305 21.2852 21.8789 21.3555 21.6328 21.1445L0.960938 5.14844C0.714844 4.97266 0.644531 4.62109 0.855469 4.375L1.55859 3.49609C1.73438 3.25 2.08594 3.17969 2.33203 3.39062L7.67578 7.50391L9.43359 5.78125C9.96094 5.25391 10.875 5.60547 10.875 6.37891V9.96484L13.6523 12.1445C13.6172 11.6875 13.3359 11.2656 12.9492 11.0547C12.5273 10.8086 12.3867 10.3164 12.5977 9.89453C12.8438 9.47266 13.3359 9.33203 13.7578 9.57812C14.7422 10.1055 15.375 11.1602 15.375 12.25C15.375 12.6367 15.2695 12.9531 15.1641 13.3047L16.5352 14.3594C16.8516 13.7266 17.0625 13.0234 17.0625 12.25C17.0625 10.6328 16.2188 9.08594 14.8125 8.20703C14.4258 7.96094 14.3203 7.43359 14.5664 7.04688C14.8125 6.66016 15.3398 6.51953 15.7266 6.76562C17.5898 7.96094 18.75 10.0352 18.75 12.25C18.75 13.4102 18.4336 14.4648 17.9062 15.4141L19.2422 16.4688C19.9805 15.2031 20.4023 13.7617 20.4023 12.2852C20.4023 9.50781 19.0312 6.90625 16.6758 5.39453C16.2891 5.14844 16.1836 4.62109 16.4297 4.19922C16.7109 3.8125 17.2383 3.70703 17.625 3.95312C20.4375 5.81641 22.125 8.91016 22.125 12.25C22.125 14.1484 21.5625 15.9414 20.5781 17.4883L23.0039 19.3867ZM1.875 9.71875C1.875 9.4375 2.01562 9.19141 2.26172 9.01562L10.875 15.6602V18.1562C10.875 18.9297 9.96094 19.2812 9.43359 18.7539L6.30469 15.625H2.71875C2.22656 15.625 1.875 15.2734 1.875 14.7812V9.71875Z" fill="${color}"/>
+</svg>`;
+// Ported from web UIKit icons/VideoControl — the play overlay on video frames
+// (50% black disc + white triangle). Replaces the generic playBtn in carousels.
+export const videoControlIcon: string = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.5"/>
+<g clip-path="url(#clip0_212_1181)">
+<path d="M16 13V27L27 20L16 13Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_212_1181">
+<rect width="24" height="24" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>`;
+// Ported from web UIKit icons/BrokenImage — shown on a media frame that fails
+// to load. Defaults to base-shade2.
+export const brokenImageIcon = (
+  color: string = '#898E9E'
+): string => `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8655 25.3718L1.64863 5.63684C1.35345 5.42599 1.26912 5.00431 1.52213 4.70913L1.94381 4.16093C2.19683 3.90792 2.61851 3.82358 2.91369 4.0766L28.1306 23.8115C28.3836 24.0224 28.4679 24.4441 28.2149 24.7392L27.7932 25.2453C27.5402 25.5404 27.1185 25.6248 26.8655 25.3718Z" fill="${color}"/>
+<path d="M6.11895 10.8249V21.422C6.11895 21.5907 6.20329 21.675 6.37196 21.675H20.021L22.6144 23.6991H6.11895C4.9804 23.6991 4.09442 22.8135 4.09442 21.675V9.53041C4.09442 9.43874 4.10085 9.34826 4.11287 9.25939L6.11895 10.8249Z" fill="${color}"/>
+<path d="M23.6611 7.50631C24.7574 7.50644 25.6852 8.4341 25.6852 9.53041V21.675C25.6852 21.7472 25.6806 21.8184 25.6734 21.8885L23.6611 20.3133V9.78342C23.6611 9.65699 23.5345 9.53056 23.4081 9.53041H9.88251L7.29616 7.50631H23.6611Z" fill="${color}"/>
+<path d="M9.78763 15.9822C9.99846 15.7715 10.2937 15.7714 10.5045 15.9822L12.1912 17.6268L13.3496 16.468L17.4272 19.6509H8.14305V17.6268L9.78763 15.9822Z" fill="${color}"/>
+<path d="M17.2093 12.6087C17.4201 12.398 17.7154 12.3979 17.9262 12.6087L21.637 16.2774V18.7293L15.7194 14.0982L17.2093 12.6087Z" fill="${color}"/>
+<path d="M10.5142 14.2555C10.2301 14.4677 9.87584 14.5906 9.49245 14.5907C8.52257 14.5907 7.8057 13.8738 7.8057 12.9039C7.8057 12.6695 7.8512 12.4458 7.93528 12.2424L10.5142 14.2555Z" fill="${color}"/>
+</svg>`;
+// Ported from web UIKit icons/Clear (ClearIcon) — the circular close button
+// used in the full-screen media viewers.
+export const clearIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.82715 17.3906C13.4238 17.3906 17.2119 13.5938 17.2119 9.00586C17.2119 4.40918 13.415 0.612305 8.82715 0.612305C4.23047 0.612305 0.442383 4.40918 0.442383 9.00586C0.442383 13.5938 4.23926 17.3906 8.82715 17.3906ZM5.88281 12.5479C5.54883 12.5479 5.28516 12.2842 5.28516 11.9502C5.28516 11.792 5.34668 11.6514 5.46973 11.5283L7.9834 9.01465L5.46973 6.49219C5.34668 6.37793 5.28516 6.22852 5.28516 6.07031C5.28516 5.74512 5.54883 5.49023 5.88281 5.49023C6.0498 5.49023 6.19043 5.54297 6.2959 5.66602L8.82715 8.17969L11.3584 5.65723C11.4902 5.52539 11.6221 5.47266 11.7803 5.47266C12.1055 5.47266 12.3691 5.73633 12.3691 6.06152C12.3691 6.22852 12.3164 6.36035 12.1934 6.4834L9.6709 9.01465L12.1846 11.5283C12.3076 11.6514 12.3691 11.7832 12.3691 11.9502C12.3691 12.2842 12.1055 12.5479 11.7627 12.5479C11.5957 12.5479 11.4551 12.4863 11.332 12.3721L8.82715 9.84961L6.32227 12.3721C6.19922 12.4863 6.0498 12.5479 5.88281 12.5479Z" fill="${color}"/>
+</svg>`;
+// Ported from web UIKit icons/Play — solid triangle, used in the full-screen
+// video player control bar (play/pause toggle).
+export const playControlIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.531 10.809a1.71 1.71 0 010 2.918L7.156 21.039c-1.125.668-2.531-.14-2.531-1.477V4.938c0-1.44 1.512-2.039 2.531-1.44l12.375 7.312z" fill="${color}"/>
+</svg>`;
+// Ported from web UIKit icons/Pause — two bars, used in the full-screen video
+// player control bar.
+export const pauseControlIcon = (
+  color: string = '#FFFFFF'
+): string => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.1875 20.0898H5.8125C4.86328 20.0898 4.125 19.3516 4.125 18.4023V6.02734C4.125 5.11328 4.86328 4.33984 5.8125 4.33984H9.1875C10.1016 4.33984 10.875 5.11328 10.875 6.02734V18.4023C10.875 19.3516 10.1016 20.0898 9.1875 20.0898ZM19.875 18.4023C19.875 19.3516 19.1016 20.0898 18.1875 20.0898H14.8125C13.8633 20.0898 13.125 19.3516 13.125 18.4023V6.02734C13.125 5.11328 13.8633 4.33984 14.8125 4.33984H18.1875C19.1016 4.33984 19.875 5.11328 19.875 6.02734V18.4023Z" fill="${color}"/>
+</svg>`;
 export const cameraIcon: string = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.49945L8.99945 3.75H14.9995L16.4995 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="#292B32" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>

package/src/core/hooks/usePostByIds.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { PostRepository } from '@amityco/ts-sdk-react-native';
+
+/**
+ * Resolve a list of post ids to their loaded post objects — the same approach
+ * the web UIKit uses (core/hooks/usePostByIds) to load an edited post's child
+ * media. Uses the batch `getPostByIds` API, which is properly awaited, instead
+ * of the racy per-id live-object fetch.
+ */
+export const usePostByIds = (postIds: string[]) => {
+  const [posts, setPosts] = useState<Amity.Post[]>([]);
+  // Depend on a stable string key so a fresh `[]`/array identity each render
+  // doesn't re-trigger the effect (and loop).
+  const key = (postIds ?? []).join(',');
+
+  useEffect(() => {
+    let active = true;
+    async function run() {
+      if (!key) {
+        setPosts((prev) => (prev.length ? [] : prev));
+        return;
+      }
+      const response = await PostRepository.getPostByIds(key.split(','));
+      if (active) setPosts(response.data);
+    }
+    run();
+    return () => {
+      active = false;
+    };
+  }, [key]);
+
+  return posts;
+};

package/src/core/types/mention.ts

@@ -13,4 +13,10 @@ export interface IDisplayImage {
   isUploaded: boolean;
   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

@@ -24,6 +24,7 @@ interface OverlayImageProps {
   fileCount?: number;
   postId?: string;
   setIsUploading?: (arg: boolean) => void;
+  carousel?: boolean;
 }
 const LoadingImage = ({
   source,
@@ -37,6 +38,7 @@ const LoadingImage = ({
   fileCount,
   postId,
   setIsUploading,
+  carousel = false,
 }: OverlayImageProps) => {
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
@@ -120,10 +122,18 @@ const LoadingImage = ({
     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"
+        resizeMode={carousel ? 'cover' : 'contain'}
         style={[
           styles.image,
           loading ? styles.loadingImage : styles.loadedImage,

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%',

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

@@ -9,7 +9,12 @@ import {
 import * as Progress from 'react-native-progress';
 import { SvgXml } from 'react-native-svg';
 import { deleteAmityFile, uploadVideoFile } from '../../../core/legacy/file';
-import { closeIcon, playBtn, toastIcon } from '../../../core/assets/icons/xml';
+import {
+  closeIcon,
+  playBtn,
+  toastIcon,
+  videoControlIcon,
+} from '../../../core/assets/icons/xml';
 import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
@@ -39,6 +44,7 @@ interface OverlayImageProps {
   fileCount?: number;
   postId?: string;
   setIsUploading?: (arg: boolean) => void;
+  carousel?: boolean;
 }
 const LoadingVideo = ({
   source,
@@ -54,6 +60,7 @@ const LoadingVideo = ({
   fileCount,
   postId,
   setIsUploading,
+  carousel = false,
 }: OverlayImageProps) => {
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -157,8 +164,13 @@ const LoadingVideo = ({
 
   const handleOnPlay = () => {
     setIsPause(!isPause);
+    // In carousel mode the parent (onPlay) opens the full-screen media viewer,
+    // so skip the default single-video route navigation.
+    if (onPlay) {
+      onPlay(source);
+      return;
+    }
     playVideoFullScreen(source);
-    onPlay && onPlay(source);
   };
 
   const onRetryUpload = () => {
@@ -166,10 +178,22 @@ const LoadingVideo = ({
   };
 
   return (
-    <View style={fileCount >= 3 ? styles.image3XContainer : styles.container}>
+    <View
+      style={
+        carousel
+          ? styles.carouselContainer
+          : fileCount >= 3
+          ? styles.image3XContainer
+          : styles.container
+      }
+    >
       {!loading && !isUploadError && isPause && (
         <TouchableOpacity style={styles.playButton} onPress={handleOnPlay}>
-          <SvgXml xml={playBtn} width="50" height="50" />
+          <SvgXml
+            xml={carousel ? videoControlIcon : playBtn}
+            width={carousel ? 40 : 50}
+            height={carousel ? 40 : 50}
+          />
         </TouchableOpacity>
       )}
       {playingUri && !isPause ? (

package/src/social/components/LoadingVideo/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%',