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

package/src/social/elements/PostMediaElement/PostMediaElement.tsx

@@ -0,0 +1,362 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MutableRefObject,
+} from 'react';
+import {
+  Animated,
+  Image,
+  ImageStyle,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { Typography } from '../../../core/components/Typography/Typography';
+import useAuth from '../../../core/hooks/useAuth';
+import {
+  videoControlIcon,
+  brokenImageIcon,
+} from '../../../core/assets/icons/xml';
+import {
+  getFrameRatio,
+  getVideoDisplayDims,
+  FRAME_RATIO_VALUE,
+  DEFAULT_FRAME_RATIO,
+  type FrameRatio,
+} from '../../utils/getFrameRatio';
+import { getIndicatorConfig } from '../../utils/getIndicatorConfig';
+import { useStyles } from './styles';
+
+type MediaPost = Amity.Post<'image'> | Amity.Post<'video'>;
+
+function isMediaPost(post: Amity.Post): post is MediaPost {
+  return post.dataType === 'image' || post.dataType === 'video';
+}
+
+function getAttachmentRatio(post?: MediaPost): FrameRatio {
+  if (!post) return DEFAULT_FRAME_RATIO;
+
+  if (post.dataType === 'image') {
+    const image = post.getImageInfo();
+    return getFrameRatio(image?.getWidth(), image?.getHeight());
+  }
+
+  const video = post.getVideoInfo();
+  const { width, height } = getVideoDisplayDims({
+    width: video?.getWidth(),
+    height: video?.getHeight(),
+    rotation: video?.getRotation(),
+  });
+  return getFrameRatio(width, height);
+}
+
+export type PostMediaControls = {
+  slideTo: (index: number) => void;
+};
+
+export type PostMediaElementProps = {
+  posts: Amity.Post[];
+  onImageClick: (index: number) => void;
+  onVideoClick: (index: number) => void;
+  controlsRef?: MutableRefObject<PostMediaControls | null>;
+  /** While the post's media children are still being fetched, show a
+   * placeholder frame instead of nothing (avoids a blank → pop). */
+  loading?: boolean;
+};
+
+export function PostMediaElement({
+  posts,
+  onImageClick,
+  onVideoClick,
+  controlsRef,
+  loading = false,
+}: PostMediaElementProps) {
+  const styles = useStyles();
+  const { width: screenWidth } = useWindowDimensions();
+  const [current, setCurrent] = useState(0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const scrollRef = useRef<ScrollView>(null);
+
+  const mediaPosts = useMemo(() => (posts ?? []).filter(isMediaPost), [posts]);
+  const ratio = useMemo(() => getAttachmentRatio(mediaPosts[0]), [mediaPosts]);
+
+  if (mediaPosts.length === 0) {
+    if (!loading) return null;
+    // Loading placeholder: a full-bleed frame in the base-shade4 colour, so the
+    // media area doesn't flash blank before the child posts resolve.
+    return (
+      <View style={styles.postMedia}>
+        <View style={styles.postMedia__track}>
+          <View
+            style={[
+              styles.postMedia__frame,
+              { aspectRatio: FRAME_RATIO_VALUE[DEFAULT_FRAME_RATIO] },
+            ]}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  const total = mediaPosts.length;
+  const isCarousel = total > 1;
+  const aspectRatio = FRAME_RATIO_VALUE[ratio];
+  // The carousel is full-bleed (screen width); use that immediately so the
+  // ScrollView renders without waiting for onLayout — otherwise there is an
+  // empty block between the placeholder and the first frame.
+  const slideWidth = trackWidth || screenWidth;
+
+  const handleFrameClick = (index: number) => {
+    const post = mediaPosts[index];
+    if (post.dataType === 'image') onImageClick(index);
+    else onVideoClick(index);
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+
+  const onMomentumScrollEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    if (!slideWidth) return;
+    const nextIndex = Math.round(
+      event.nativeEvent.contentOffset.x / slideWidth
+    );
+    if (nextIndex !== current) setCurrent(nextIndex);
+  };
+
+  if (controlsRef) {
+    controlsRef.current = {
+      slideTo: (index: number) => {
+        scrollRef.current?.scrollTo({
+          x: index * slideWidth,
+          animated: false,
+        });
+        setCurrent(index);
+      },
+    };
+  }
+
+  if (!isCarousel) {
+    return (
+      <View style={styles.postMedia}>
+        <View style={styles.postMedia__track} onLayout={onLayout}>
+          <MediaFrame
+            post={mediaPosts[0]}
+            aspectRatio={aspectRatio}
+            onPress={() => handleFrameClick(0)}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.postMedia}>
+      <View style={styles.postMedia__track} onLayout={onLayout}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          scrollEventThrottle={16}
+          decelerationRate="fast"
+        >
+          {mediaPosts.map((post, index) => (
+            <View
+              key={post.postId}
+              style={[styles.postMedia__slide, { width: slideWidth }]}
+            >
+              <MediaFrame
+                post={post}
+                aspectRatio={aspectRatio}
+                onPress={() => handleFrameClick(index)}
+              />
+            </View>
+          ))}
+        </ScrollView>
+        <PositionCounter current={current} total={total} />
+      </View>
+      <PaginationIndicator current={current} total={total} />
+    </View>
+  );
+}
+
+type PaginationIndicatorProps = {
+  current: number;
+  total: number;
+};
+
+function PaginationIndicator({ current, total }: PaginationIndicatorProps) {
+  const styles = useStyles();
+  const { dots } = getIndicatorConfig(current, total);
+
+  return (
+    <View style={styles.postMedia__indicator}>
+      {dots.map((dot) =>
+        dot.state === 'edge' ? (
+          <EdgeDot key={dot.key} side={dot.side} />
+        ) : (
+          <View key={dot.key} style={styles.postMedia__dotSlot}>
+            <View
+              style={[
+                styles.postMedia__dot,
+                dot.state === 'active'
+                  ? styles.postMedia__dotActive
+                  : styles.postMedia__dotInactive,
+              ]}
+            />
+          </View>
+        )
+      )}
+    </View>
+  );
+}
+
+// The strip keeps a constant width (fixed-width slots, always 6 elements), so
+// an edge dot only needs to slide in from its own side over 300ms when it
+// first appears (REQ-013b).
+function EdgeDot({ side }: { side?: 'left' | 'right' }) {
+  const styles = useStyles();
+  const anim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(anim, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+
+  const translateX = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [side === 'left' ? -6 : 6, 0],
+  });
+
+  return (
+    <View style={styles.postMedia__dotSlot}>
+      <Animated.View
+        style={[
+          styles.postMedia__dot,
+          styles.postMedia__dotEdge,
+          { opacity: anim, transform: [{ translateX }] },
+        ]}
+      />
+    </View>
+  );
+}
+
+type PositionCounterProps = {
+  current: number;
+  total: number;
+};
+
+function PositionCounter({ current, total }: PositionCounterProps) {
+  const styles = useStyles();
+
+  return (
+    <View style={styles.postMedia__counter}>
+      <Typography.Body style={styles.postMedia__counterLabel}>
+        {current + 1}/{total}
+      </Typography.Body>
+    </View>
+  );
+}
+
+type MediaFrameProps = {
+  post: MediaPost;
+  aspectRatio: number;
+  onPress: () => void;
+};
+
+function MediaFrame({ post, aspectRatio, onPress }: MediaFrameProps) {
+  const styles = useStyles();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.postMedia__frame, { aspectRatio }]}
+    >
+      {post.dataType === 'image' ? (
+        <ImageMedia post={post as Amity.Post<'image'>} />
+      ) : (
+        <VideoMedia post={post as Amity.Post<'video'>} />
+      )}
+    </Pressable>
+  );
+}
+
+type ImageMediaProps = { post: Amity.Post<'image'> };
+
+function ImageMedia({ post }: ImageMediaProps) {
+  const styles = useStyles();
+  const { apiRegion } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const fileId = post.getImageInfo()?.fileId;
+  const url = fileId
+    ? `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=large`
+    : undefined;
+
+  if (!url || isBroken) return <BrokenFrame />;
+
+  return (
+    <Image
+      style={styles.postMedia__media as StyleProp<ImageStyle>}
+      source={{ uri: url }}
+      resizeMode="cover"
+      onError={() => setIsBroken(true)}
+    />
+  );
+}
+
+type VideoMediaProps = { post: Amity.Post<'video'> };
+
+function VideoMedia({ post }: VideoMediaProps) {
+  const styles = useStyles();
+  const { apiRegion } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+
+  const data = post.data as Amity.ContentDataVideo | undefined;
+  const thumbnailFileId = data?.thumbnailFileId;
+  const url = thumbnailFileId
+    ? `https://api.${apiRegion}.amity.co/api/v3/files/${thumbnailFileId}/download?size=large`
+    : undefined;
+
+  if (!url || isBroken) return <BrokenFrame />;
+
+  return (
+    <>
+      <Image
+        style={styles.postMedia__media as StyleProp<ImageStyle>}
+        source={{ uri: url }}
+        resizeMode="cover"
+        onError={() => setIsBroken(true)}
+      />
+      <View style={styles.postMedia__playButton}>
+        <SvgXml xml={videoControlIcon} width="40" height="40" />
+      </View>
+    </>
+  );
+}
+
+function BrokenFrame() {
+  const styles = useStyles();
+  return (
+    <View style={styles.postMedia__broken}>
+      <SvgXml xml={brokenImageIcon()} width={32} height={32} />
+    </View>
+  );
+}

package/src/social/elements/PostMediaElement/index.tsx

@@ -0,0 +1,5 @@
+export { PostMediaElement } from './PostMediaElement';
+export type {
+  PostMediaElementProps,
+  PostMediaControls,
+} from './PostMediaElement';

package/src/social/elements/PostMediaElement/styles.ts

@@ -0,0 +1,99 @@
+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 PostMediaElement.module.css (1rem = 16dp).
+// Colors resolve through theme tokens (web CSS variables), never hardcoded.
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    postMedia: {
+      // Full-bleed: cancel the post card's 16px horizontal padding so the media
+      // spans the full card width (web PR #1830/#1834: width calc(100% + 2rem),
+      // margin-left/right -1rem).
+      marginHorizontal: -16,
+      paddingVertical: 8, // web: padding 0.5rem 0
+    },
+    postMedia__track: {
+      position: 'relative',
+      width: '100%',
+    },
+    postMedia__slide: {
+      // width is set dynamically to the measured track width so paging aligns
+    },
+    postMedia__frame: {
+      width: '100%',
+      overflow: 'hidden',
+      // web: no border-radius; background var(--asc-color-base-shade4)
+      backgroundColor: theme.colors.baseShade4,
+    },
+    postMedia__media: {
+      width: '100%',
+      height: '100%',
+    },
+    postMedia__playButton: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      // web: 2.5rem (40dp), centred via translate(-50%, -50%)
+      width: 40,
+      height: 40,
+      transform: [{ translateX: -20 }, { translateY: -20 }],
+      zIndex: 1,
+    },
+    postMedia__broken: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.baseShade4,
+    },
+    postMedia__counter: {
+      position: 'absolute',
+      top: 8, // web: 0.5rem
+      right: 8, // web: 0.5rem
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6, // web: 0.375rem
+      paddingHorizontal: 12, // web: 0.75rem
+      borderRadius: 999, // web: --asc-border-radius-full
+      backgroundColor: 'rgba(0,0,0,0.5)', // web: --asc-color-transparent-black (#00000080)
+    },
+    postMedia__counterLabel: {
+      color: '#FFFFFF', // web: var(--asc-color-white)
+    },
+    postMedia__indicator: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4, // web: gap 0.25rem
+      height: 6, // web: height 0.375rem
+      marginTop: 12, // web: parent .postMedia column gap 0.75rem
+    },
+    postMedia__dotSlot: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 6, // web: 0.375rem
+      height: 6, // web: 0.375rem
+    },
+    postMedia__dot: {
+      borderRadius: 999, // web: border-radius 50%
+      backgroundColor: theme.colors.baseShade4, // inactive/edge: base-shade4
+    },
+    postMedia__dotActive: {
+      width: 6,
+      height: 6,
+      backgroundColor: theme.colors.base, // web: var(--asc-color-base-default)
+    },
+    postMedia__dotInactive: {
+      width: 6,
+      height: 6,
+    },
+    postMedia__dotEdge: {
+      width: 3, // web: 0.1875rem
+      height: 3,
+    },
+  });
+
+  return styles;
+};