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

package/src/social/components/SelectedMediaComponent/SelectedMediaComponent.tsx

@@ -0,0 +1,292 @@
+import { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  Image,
+  LayoutChangeEvent,
+  Pressable,
+  ScrollView,
+  View,
+} from 'react-native';
+import { createVideoThumbnail } from 'react-native-compressor';
+import LoadingImage from '../LoadingImage';
+import LoadingVideo from '../LoadingVideo';
+import { MediaViewer, type MediaViewerItem } from '../MediaViewer';
+import { IDisplayImage } from '../../../core/types';
+import {
+  getFrameRatio,
+  getVideoDisplayDims,
+  FRAME_RATIO_VALUE,
+  DEFAULT_FRAME_RATIO,
+  type FrameRatio,
+} from '../../utils/getFrameRatio';
+import { useStyles } from './styles';
+
+// Peek scroll: next slide peeks by (PEEK_INSET − SPACE_BETWEEN). The composer
+// body (PostComposer `inputWrapper`) already insets everything 12px
+// horizontally, so this component adds NO side padding of its own — it only
+// sizes the slide so the peek lands at the spec's 31px (SelectedMediaComponent
+// REQ-003a). slideWidth = trackWidth − PEEK_INSET; peek = PEEK_INSET − 8 = 31.
+const PEEK_INSET = 39;
+const SPACE_BETWEEN = 8;
+
+export type SelectedMediaComponentProps = {
+  mediaType: 'image' | 'video';
+  media: IDisplayImage[];
+  onClose?: (originalPath: string, fileId?: string, postId?: string) => void;
+  onLoadFinish?: (
+    fileId: string,
+    fileUrl: string,
+    fileName: string,
+    index: number,
+    originalPath: string,
+    thumbnail?: string
+  ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
+  isEditMode?: boolean;
+  // Per-frame upload state, keyed by the item's `source` url — the parent
+  // aggregates it instead of holding one boolean that the first upload to
+  // finish would clear on behalf of every other frame.
+  onUploadingChange?: (isUploading: boolean, source: string) => void;
+};
+
+export function SelectedMediaComponent({
+  mediaType,
+  media,
+  onClose,
+  onLoadFinish,
+  onUploadError,
+  isEditMode = false,
+  onUploadingChange,
+}: SelectedMediaComponentProps) {
+  const styles = useStyles();
+  const scrollRef = useRef<ScrollView>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [ratio, setRatio] = useState<FrameRatio>(DEFAULT_FRAME_RATIO);
+  // Index of the frame the full-screen viewer was opened from (null = closed).
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null);
+
+  const total = media.length;
+  const isCarousel = total > 1;
+  const aspectRatio = FRAME_RATIO_VALUE[ratio];
+  const slideWidth = trackWidth > 0 ? trackWidth - PEEK_INSET : 0;
+
+  // Frames follow the aspect ratio classified from the item currently in first
+  // position (REQ-003d/003e); recalculated when the first item changes.
+  const first = media[0];
+  const firstUrl = first?.url;
+  const firstWidth = first?.width;
+  const firstHeight = first?.height;
+  const firstRotation = first?.rotation;
+  useEffect(() => {
+    if (!firstUrl) {
+      setRatio(DEFAULT_FRAME_RATIO);
+      return undefined;
+    }
+    // Video: classify from the record/extractor dims, applying rotation
+    // (REQ-003d1 — MUST NOT silently fall back to 1:1 for video). Shares the
+    // one rotation derivation with the published carousel (REQ-SDK-002b).
+    if (mediaType === 'video') {
+      if (firstWidth && firstHeight) {
+        const { width, height } = getVideoDisplayDims({
+          width: firstWidth,
+          height: firstHeight,
+          rotation: firstRotation,
+        });
+        setRatio(getFrameRatio(width, height));
+        return undefined;
+      }
+      // No usable dims — a locally-picked video can arrive with none (the
+      // Android extractor reports 0×0 when MediaMetadataRetriever fails, and
+      // iOS picks carry none by design, see PostComposer). Measure the
+      // generated thumbnail instead of defaulting to a square frame
+      // (REQ-003d2, PDT-4904): it is a rendered frame, so its dimensions are
+      // already display-oriented and need no rotation applied.
+      //
+      // LoadingVideo decodes a thumbnail for this same url too, so frame 0
+      // decodes twice. Kept deliberately: reporting dims back up through
+      // LoadingVideo would widen the composer's callback surface, and the
+      // decode is a cached native call on a url the child already proves
+      // works.
+      let active = true;
+      createVideoThumbnail(firstUrl)
+        .then(({ width, height }) => {
+          if (active) setRatio(getFrameRatio(width, height));
+        })
+        .catch(() => {
+          // Thumbnail decode failed too — nothing left to classify from, so
+          // fall back to the square frame (REQ-003d2).
+          if (active) setRatio(DEFAULT_FRAME_RATIO);
+        });
+      return () => {
+        active = false;
+      };
+    }
+    // Image: prefer carried dims, else measure the source.
+    if (firstWidth && firstHeight) {
+      setRatio(getFrameRatio(firstWidth, firstHeight));
+      return undefined;
+    }
+    let active = true;
+    Image.getSize(
+      firstUrl,
+      (width, height) => {
+        if (active) setRatio(getFrameRatio(width, height));
+      },
+      () => {
+        if (active) setRatio(DEFAULT_FRAME_RATIO);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [firstUrl, firstWidth, firstHeight, firstRotation, mediaType]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+
+  const viewerItems: MediaViewerItem[] = media.map((m) => ({
+    type: mediaType,
+    uri: m.url,
+  }));
+
+  // Removing a frame must not leave the strip parked past the last one. The
+  // ScrollView keeps its offset while the content shrinks underneath it, so
+  // deleting the frame that was on screen left a half-scrolled gap where it had
+  // been instead of settling on the frame that took its place.
+  const offsetRef = useRef(0);
+  const previousTotalRef = useRef(total);
+  useEffect(() => {
+    const previousTotal = previousTotalRef.current;
+    previousTotalRef.current = total;
+    if (total >= previousTotal || slideWidth <= 0) return;
+
+    const maxOffset = Math.max(0, (total - 1) * (slideWidth + SPACE_BETWEEN));
+    if (offsetRef.current <= maxOffset) return;
+
+    offsetRef.current = maxOffset;
+    scrollRef.current?.scrollTo({ x: maxOffset, animated: false });
+  }, [total, slideWidth]);
+
+  // PDT-4310/4312: on close, return to the frame originally tapped from — not
+  // the last frame viewed in full screen.
+  const handleCloseViewer = () => {
+    const tapped = viewerIndex ?? 0;
+    setViewerIndex(null);
+    if (isCarousel && slideWidth > 0) {
+      scrollRef.current?.scrollTo({
+        x: tapped * (slideWidth + SPACE_BETWEEN),
+        animated: false,
+      });
+    }
+  };
+
+  const renderFrame = (item: IDisplayImage, index: number) => (
+    <View style={[styles.selectedMedia__frame, { aspectRatio }]}>
+      {mediaType === 'video' ? (
+        <LoadingVideo
+          carousel
+          source={item.url}
+          displayUri={item.localUrl}
+          onClose={onClose}
+          index={index}
+          onLoadFinish={onLoadFinish}
+          onUploadError={onUploadError}
+          isUploaded={item.isUploaded}
+          fileId={item.fileId}
+          thumbNail={item.thumbNail as string}
+          fileCount={total}
+          isEditMode={isEditMode}
+          postId={item.postId}
+          onUploadingChange={onUploadingChange}
+          onPlay={() => setViewerIndex(index)}
+        />
+      ) : (
+        <Pressable
+          style={styles.selectedMedia__mediaButton}
+          onPress={() => setViewerIndex(index)}
+        >
+          <LoadingImage
+            carousel
+            source={item.url}
+            displayUri={item.localUrl}
+            onClose={onClose}
+            index={index}
+            onLoadFinish={onLoadFinish}
+            onUploadError={onUploadError}
+            isUploaded={item.isUploaded}
+            fileId={item.fileId}
+            fileCount={total}
+            isEditMode={isEditMode}
+            postId={item.postId}
+            onUploadingChange={onUploadingChange}
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+
+  if (total === 0) return null;
+
+  return (
+    <Fragment>
+      {!isCarousel ? (
+        <View style={styles.selectedMedia}>
+          <View style={styles.selectedMedia__track} onLayout={onLayout}>
+            {renderFrame(media[0], 0)}
+          </View>
+        </View>
+      ) : (
+        <View style={styles.selectedMedia}>
+          <View style={styles.selectedMedia__track} onLayout={onLayout}>
+            {slideWidth > 0 && (
+              <ScrollView
+                ref={scrollRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                decelerationRate="fast"
+                snapToInterval={slideWidth + SPACE_BETWEEN}
+                snapToAlignment="start"
+                scrollEventThrottle={16}
+                onScroll={(event) => {
+                  offsetRef.current = event.nativeEvent.contentOffset.x;
+                }}
+              >
+                {media.map((item, index) => (
+                  <View
+                    // Key on the item's stable local identity, not on its
+                    // url. `url` is rewritten from the local pick path
+                    // to the remote `?size=medium` one the instant that frame's
+                    // upload finishes, so a url-based key tore down and
+                    // remounted the slide — and with it the child's mount
+                    // effect, which is what re-runs uploads and re-orders the
+                    // in-flight completion callbacks against their siblings.
+                    // The identity survives the swap, so a finishing upload
+                    // now only re-renders its own frame. Falls back to the old
+                    // key for entries built without one (legacy EditPostModal).
+                    key={item.localId ?? `${item.url}-${index}`}
+                    style={[
+                      styles.selectedMedia__slide,
+                      {
+                        width: slideWidth,
+                        marginRight: index < total - 1 ? SPACE_BETWEEN : 0,
+                      },
+                    ]}
+                  >
+                    {renderFrame(item, index)}
+                  </View>
+                ))}
+              </ScrollView>
+            )}
+          </View>
+        </View>
+      )}
+      <MediaViewer
+        visible={viewerIndex !== null}
+        items={viewerItems}
+        initialIndex={viewerIndex ?? 0}
+        onClose={handleCloseViewer}
+      />
+    </Fragment>
+  );
+}

package/src/social/components/SelectedMediaComponent/index.ts

@@ -0,0 +1,2 @@
+export { SelectedMediaComponent } from './SelectedMediaComponent';
+export type { SelectedMediaComponentProps } from './SelectedMediaComponent';

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

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+
+// Values map 1:1 from web PR #1830 SelectedMediaComponent.module.css (1rem = 16dp).
+// Web composer preview: peek scroll row (slidesPerView=auto, spaceBetween 8,
+// slide width = calc(100% - 3.4375rem) = track - 55). NO counter, NO dots.
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  return StyleSheet.create({
+    selectedMedia: {
+      width: '100%',
+      paddingVertical: 12, // web: padding 0.75rem 0
+    },
+    selectedMedia__track: {
+      position: 'relative',
+      width: '100%',
+    },
+    selectedMedia__slide: {
+      // width + marginRight (spaceBetween 8) set inline from measured track width
+    },
+    selectedMedia__frame: {
+      width: '100%',
+      overflow: 'hidden',
+      // web: no border-radius; background var(--asc-color-base-shade4)
+      backgroundColor: theme.colors.baseShade4,
+    },
+    selectedMedia__media: {
+      width: '100%',
+      height: '100%',
+    },
+    selectedMedia__mediaButton: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+};

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

@@ -6,38 +6,24 @@ import { memo, useEffect, useRef } from 'react';
 import { Typography } from '../../../core/components/Typography/Typography';
 import { informative, failed, success } from '../../../core/assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
-import { AmityIcon } from '../../../core/design/icons';
 
 const Toast = () => {
   const { hideToast, toast } = useToast();
-  const { styles, theme, iconColor } = useStyles(
-    toast.bottomPosition,
-    toast.variant
-  );
-  const isCustom = toast.variant === 'custom';
+  const { styles, theme } = useStyles(toast.bottomPosition);
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     if (toast.visible) {
-      // For the custom (chat) loading toast, `duration` is an upper bound (web uses
-      // 60s) that the caller cancels early via `hideToast` on load-complete — so the
-      // fade must stay prompt (500ms) rather than track `duration`, otherwise a 60s
-      // fade renders the spinner invisible. The default-variant loading toast (poll)
-      // keeps its original duration-tracked fade.
-      const fadeDuration =
-        toast.type === 'loading' && toast.variant !== 'custom'
-          ? toast.duration
-          : 500;
       Animated.timing(fadeIn, {
         toValue: 1,
-        duration: fadeDuration,
+        duration: toast.type === 'loading' ? toast.duration : 500,
         useNativeDriver: false,
       }).start(() => {
         timeoutRef.current = setTimeout(() => {
           Animated.timing(fadeIn, {
             toValue: 0,
-            duration: fadeDuration,
+            duration: toast.type === 'loading' ? toast.duration : 500,
             useNativeDriver: false,
           }).start(hideToast);
         }, toast.duration);
@@ -63,44 +49,30 @@ const Toast = () => {
           backgroundColor={theme.colors.background}
         />
       )}
-      {toast.type === 'success' &&
-        (isCustom ? (
-          <AmityIcon name="check-circle-s" size={24} color={iconColor} />
-        ) : (
-          <SvgXml
-            xml={success()}
-            width="24"
-            height="24"
-            color={theme.colors.background}
-          />
-        ))}
-      {toast.type === 'failed' &&
-        (isCustom ? (
-          // Web chat toast (Toast atom, variant 'error'): ExclamationCircle tinted
-          // with --asc-color-icon-customtoast-default. Custom variant must show it —
-          // previously custom failed toasts had NO icon (web/RN parity gap).
-          <AmityIcon name="exclamation-circle-r" size={24} color={iconColor} />
-        ) : (
-          <SvgXml
-            width="24"
-            height="24"
-            xml={failed()}
-            color={theme.colors.background}
-          />
-        ))}
-      {toast.type === 'informative' &&
-        (isCustom ? (
-          // Web chat toast (Toast atom, variant 'informative'): InfoCircle tinted
-          // with --asc-color-icon-customtoast-default.
-          <AmityIcon name="info-circle-r" size={24} color={iconColor} />
-        ) : (
-          <SvgXml
-            width="24"
-            height="24"
-            xml={informative()}
-            color={theme.colors.background}
-          />
-        ))}
+      {toast.type === 'success' && (
+        <SvgXml
+          xml={success()}
+          width="24"
+          height="24"
+          color={theme.colors.background}
+        />
+      )}
+      {toast.type === 'failed' && (
+        <SvgXml
+          width="24"
+          height="24"
+          xml={failed()}
+          color={theme.colors.background}
+        />
+      )}
+      {toast.type === 'informative' && (
+        <SvgXml
+          width="24"
+          height="24"
+          xml={informative()}
+          color={theme.colors.background}
+        />
+      )}
       <Typography.Body style={styles.message}>{toast.message}</Typography.Body>
     </Animated.View>
   );

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

@@ -2,21 +2,10 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useToken } from '../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
 
-export const useStyles = (
-  bottomPosition: number = 16,
-  variant: 'default' | 'custom' = 'default'
-) => {
+export const useStyles = (bottomPosition: number = 16) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
-  const token = useToken();
-
-  // Custom variant: the dark pill used by chat notifications, bound to the
-  // CustomToast design tokens (Surface/Text/Icon CustomToast). Default variant
-  // keeps the app-wide toast appearance (react-native-paper theme).
-  const isCustom = variant === 'custom';
 
   const styles = StyleSheet.create({
     toast: {
@@ -31,24 +20,16 @@ export const useStyles = (
       position: 'absolute',
       alignItems: 'center',
       paddingHorizontal: 12,
-      backgroundColor: isCustom
-        ? token(AmityColorToken.SurfaceCustomToastDefaultDefault)
-        : theme.colors.base,
-      ...(isCustom ? { minHeight: 56 } : null),
+      backgroundColor: theme.colors.base,
     },
     message: {
       flex: 1,
-      color: isCustom
-        ? token(AmityColorToken.TextCustomToastDefault)
-        : theme.colors.background,
+      color: theme.colors.background,
     },
   });
 
   return {
     theme,
     styles,
-    iconColor: isCustom
-      ? token(AmityColorToken.IconCustomToastDefault)
-      : theme.colors.background,
   };
 };

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

@@ -89,24 +89,35 @@ const LoadingVideo = ({
   }, [progress]);
 
   const uploadFileToAmity = useCallback(async () => {
-    const file: Amity.File<any>[] = await uploadVideoFile(
-      source,
-      (percent: number) => {
-        setProgress(percent);
+    // `uploadVideoFile` now rejects on a failed upload instead of
+    // hanging on an unsettled promise, so this call needs a catch. This legacy
+    // component has no error UI to show (unlike its v4 counterpart, which
+    // renders a tappable retry overlay) — the least-bad end state is to stop
+    // the spinner so the frame is not stuck pretending to make progress, and
+    // to leave the close button reachable so the user can drop the attachment.
+    try {
+      const file: Amity.File<any>[] = await uploadVideoFile(
+        source,
+        (percent: number) => {
+          setProgress(percent);
+        }
+      );
+      if (file) {
+        setIsProcess(false);
+        handleLoadEnd();
+        onLoadFinish &&
+          onLoadFinish(
+            file[0]?.fileId as string,
+            file[0]?.fileUrl as string,
+            file[0]?.attributes.name as string,
+            index as number,
+            source,
+            thumbNail
+          );
       }
-    );
-    if (file) {
+    } catch (error) {
       setIsProcess(false);
       handleLoadEnd();
-      onLoadFinish &&
-        onLoadFinish(
-          file[0]?.fileId as string,
-          file[0]?.fileUrl as string,
-          file[0]?.attributes.name as string,
-          index as number,
-          source,
-          thumbNail
-        );
     }
   }, [source]);
 

package/src/social/constants/index.ts

@@ -0,0 +1,4 @@
+// Carousel media post (PDT-3424)
+export const MAX_INDICATOR_DOTS = 6;
+export const MEDIA_ATTACHMENT_CAP = 10;
+export const SWIPE_COMMIT_PX = 40;