@amityco/react-native-social-uikit 4.1.0 → 4.1.1-21d3e899.0

package/src/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.tsx

@@ -18,6 +18,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;
 };
 
 const AmityDetailedMediaAttachmentComponent: FC<
@@ -28,6 +31,7 @@ const AmityDetailedMediaAttachmentComponent: FC<
   onPressVideo,
   chosenMediaType,
   onHeightChange,
+  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.detailed_media_attachment;
@@ -91,8 +95,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
           <Pressable
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
-            style={styles.mediaAttachmentBtn}
+            style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
             onPress={onPressCamera}
+            disabled={disabled}
           >
             <View style={styles.iconContainer}>
               <SvgXml
@@ -115,8 +120,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
-              style={styles.mediaAttachmentBtn}
+              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
               onPress={onPressImage}
+              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml
@@ -139,8 +145,9 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
-              style={styles.mediaAttachmentBtn}
+              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
               onPress={onPressVideo}
+              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml

package/src/social/features/post/components/MediaAttachment/MediaAttachment.tsx

@@ -17,6 +17,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;
 };
 
 const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
@@ -25,6 +28,7 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
   onPressVideo,
   chosenMediaType,
   onHeightChange,
+  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.media_attachment;
@@ -89,8 +93,9 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
             onPress={onPressCamera}
+            disabled={disabled}
           >
-            <View style={styles.iconContainer}>
+            <View style={[styles.iconContainer, disabled && { opacity: 0.4 }]}>
               <SvgXml
                 xml={camera()}
                 width={24}
@@ -107,8 +112,11 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
               onPress={onPressImage}
+              disabled={disabled}
             >
-              <View style={styles.iconContainer}>
+              <View
+                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
+              >
                 <SvgXml
                   xml={photo()}
                   width={24}
@@ -124,8 +132,11 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
               onPress={onPressVideo}
+              disabled={disabled}
             >
-              <View style={styles.iconContainer}>
+              <View
+                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
+              >
                 <SvgXml
                   xml={video()}
                   width={24}

package/src/social/utils/getFrameRatio.ts

@@ -0,0 +1,42 @@
+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 const FRAME_RATIO_VALUE: Record<FrameRatio, number> = {
+  '16:9': 16 / 9,
+  '1:1': 1,
+  '4:5': 4 / 5,
+};
+
+const LANDSCAPE_THRESHOLD = 1.25;
+const PORTRAIT_THRESHOLD = 0.8;
+
+export const DEFAULT_FRAME_RATIO: FrameRatio = '1:1';
+
+export function getFrameRatio(width?: number, height?: number): FrameRatio {
+  if (!width || !height || height <= 0) return DEFAULT_FRAME_RATIO;
+
+  const ratio = width / height;
+
+  if (ratio >= LANDSCAPE_THRESHOLD) return '16:9';
+  if (ratio <= PORTRAIT_THRESHOLD) return '4:5';
+  return '1:1';
+}
+
+/**
+ * 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 function getVideoDisplayDims(video?: {
+  width?: number;
+  height?: number;
+  rotation?: number;
+}): { width?: number; height?: number } {
+  const { width, height, rotation } = video ?? {};
+  if (width == null || height == null) return { width, height };
+  if (Math.abs(rotation ?? 0) % 180 === 90)
+    return { width: height, height: width };
+  return { width, height };
+}

package/src/social/utils/getIndicatorConfig.ts

@@ -0,0 +1,62 @@
+import { MAX_INDICATOR_DOTS } from '../constants';
+
+export type IndicatorDotState = 'active' | 'inactive' | 'edge';
+
+export type IndicatorDot = {
+  key: string;
+  state: IndicatorDotState;
+  side?: 'left' | 'right';
+};
+
+export type IndicatorConfig = {
+  dots: IndicatorDot[];
+};
+
+export function getIndicatorConfig(
+  current: number,
+  total: number
+): IndicatorConfig {
+  if (total <= MAX_INDICATOR_DOTS) {
+    const dots = Array.from({ length: total }, (_, page) => ({
+      key: `page-${page}`,
+      state: page === current ? ('active' as const) : ('inactive' as const),
+    }));
+    return { dots };
+  }
+
+  let windowStart: number;
+  let windowEnd: number;
+
+  if (current <= 1) {
+    windowStart = 0;
+    windowEnd = 4;
+  } else if (current >= total - 3) {
+    windowStart = total - 5;
+    windowEnd = total - 1;
+  } else {
+    windowStart = current - 1;
+    windowEnd = current + 2;
+  }
+
+  const showLeft = windowStart > 0;
+  const showRight = windowEnd < total - 1;
+
+  const dots: IndicatorDot[] = [];
+
+  if (showLeft) {
+    dots.push({ key: 'edge-left', state: 'edge', side: 'left' });
+  }
+
+  for (let page = windowStart; page <= windowEnd; page += 1) {
+    dots.push({
+      key: `page-${page}`,
+      state: page === current ? 'active' : 'inactive',
+    });
+  }
+
+  if (showRight) {
+    dots.push({ key: 'edge-right', state: 'edge', side: 'right' });
+  }
+
+  return { dots };
+}