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

package/lib/module/social/elements/PostMediaElement/PostMediaElement.js

@@ -0,0 +1,273 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Image, Pressable, ScrollView, 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 } from '../../utils/getFrameRatio';
+import { getIndicatorConfig } from '../../utils/getIndicatorConfig';
+import { useStyles } from './styles';
+function isMediaPost(post) {
+  return post.dataType === 'image' || post.dataType === 'video';
+}
+function getAttachmentRatio(post) {
+  if (!post) return DEFAULT_FRAME_RATIO;
+  if (post.dataType === 'image') {
+    const image = post.getImageInfo();
+    return getFrameRatio(image === null || image === void 0 ? void 0 : image.getWidth(), image === null || image === void 0 ? void 0 : image.getHeight());
+  }
+  const video = post.getVideoInfo();
+  const {
+    width,
+    height
+  } = getVideoDisplayDims({
+    width: video === null || video === void 0 ? void 0 : video.getWidth(),
+    height: video === null || video === void 0 ? void 0 : video.getHeight(),
+    rotation: video === null || video === void 0 ? void 0 : video.getRotation()
+  });
+  return getFrameRatio(width, height);
+}
+export function PostMediaElement({
+  posts,
+  onImageClick,
+  onVideoClick,
+  controlsRef,
+  loading = false
+}) {
+  const styles = useStyles();
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const [current, setCurrent] = useState(0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const scrollRef = useRef(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 /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia__track
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.postMedia__frame, {
+        aspectRatio: FRAME_RATIO_VALUE[DEFAULT_FRAME_RATIO]
+      }]
+    })));
+  }
+  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 => {
+    const post = mediaPosts[index];
+    if (post.dataType === 'image') onImageClick(index);else onVideoClick(index);
+  };
+  const onLayout = event => {
+    const width = event.nativeEvent.layout.width;
+    if (width && width !== trackWidth) setTrackWidth(width);
+  };
+  const onMomentumScrollEnd = event => {
+    if (!slideWidth) return;
+    const nextIndex = Math.round(event.nativeEvent.contentOffset.x / slideWidth);
+    if (nextIndex !== current) setCurrent(nextIndex);
+  };
+  if (controlsRef) {
+    controlsRef.current = {
+      slideTo: index => {
+        var _scrollRef$current;
+        (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
+          x: index * slideWidth,
+          animated: false
+        });
+        setCurrent(index);
+      }
+    };
+  }
+  if (!isCarousel) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.postMedia__track,
+      onLayout: onLayout
+    }, /*#__PURE__*/React.createElement(MediaFrame, {
+      post: mediaPosts[0],
+      aspectRatio: aspectRatio,
+      onPress: () => handleFrameClick(0)
+    })));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__track,
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    ref: scrollRef,
+    horizontal: true,
+    pagingEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: 16,
+    decelerationRate: "fast"
+  }, mediaPosts.map((post, index) => /*#__PURE__*/React.createElement(View, {
+    key: post.postId,
+    style: [styles.postMedia__slide, {
+      width: slideWidth
+    }]
+  }, /*#__PURE__*/React.createElement(MediaFrame, {
+    post: post,
+    aspectRatio: aspectRatio,
+    onPress: () => handleFrameClick(index)
+  })))), /*#__PURE__*/React.createElement(PositionCounter, {
+    current: current,
+    total: total
+  })), /*#__PURE__*/React.createElement(PaginationIndicator, {
+    current: current,
+    total: total
+  }));
+}
+function PaginationIndicator({
+  current,
+  total
+}) {
+  const styles = useStyles();
+  const {
+    dots
+  } = getIndicatorConfig(current, total);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__indicator
+  }, dots.map(dot => dot.state === 'edge' ? /*#__PURE__*/React.createElement(EdgeDot, {
+    key: dot.key,
+    side: dot.side
+  }) : /*#__PURE__*/React.createElement(View, {
+    key: dot.key,
+    style: styles.postMedia__dotSlot
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.postMedia__dot, dot.state === 'active' ? styles.postMedia__dotActive : styles.postMedia__dotInactive]
+  }))));
+}
+
+// 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
+}) {
+  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 /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__dotSlot
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.postMedia__dot, styles.postMedia__dotEdge, {
+      opacity: anim,
+      transform: [{
+        translateX
+      }]
+    }]
+  }));
+}
+function PositionCounter({
+  current,
+  total
+}) {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__counter
+  }, /*#__PURE__*/React.createElement(Typography.Body, {
+    style: styles.postMedia__counterLabel
+  }, current + 1, "/", total));
+}
+function MediaFrame({
+  post,
+  aspectRatio,
+  onPress
+}) {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: [styles.postMedia__frame, {
+      aspectRatio
+    }]
+  }, post.dataType === 'image' ? /*#__PURE__*/React.createElement(ImageMedia, {
+    post: post
+  }) : /*#__PURE__*/React.createElement(VideoMedia, {
+    post: post
+  }));
+}
+function ImageMedia({
+  post
+}) {
+  var _post$getImageInfo;
+  const styles = useStyles();
+  const {
+    apiRegion
+  } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const fileId = (_post$getImageInfo = post.getImageInfo()) === null || _post$getImageInfo === void 0 ? void 0 : _post$getImageInfo.fileId;
+  const url = fileId ? `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=large` : undefined;
+  if (!url || isBroken) return /*#__PURE__*/React.createElement(BrokenFrame, null);
+  return /*#__PURE__*/React.createElement(Image, {
+    style: styles.postMedia__media,
+    source: {
+      uri: url
+    },
+    resizeMode: "cover",
+    onError: () => setIsBroken(true)
+  });
+}
+function VideoMedia({
+  post
+}) {
+  const styles = useStyles();
+  const {
+    apiRegion
+  } = useAuth();
+  const [isBroken, setIsBroken] = useState(false);
+  const data = post.data;
+  const thumbnailFileId = data === null || data === void 0 ? void 0 : data.thumbnailFileId;
+  const url = thumbnailFileId ? `https://api.${apiRegion}.amity.co/api/v3/files/${thumbnailFileId}/download?size=large` : undefined;
+  if (!url || isBroken) return /*#__PURE__*/React.createElement(BrokenFrame, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
+    style: styles.postMedia__media,
+    source: {
+      uri: url
+    },
+    resizeMode: "cover",
+    onError: () => setIsBroken(true)
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__playButton
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    xml: videoControlIcon,
+    width: "40",
+    height: "40"
+  })));
+}
+function BrokenFrame() {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.postMedia__broken
+  }, /*#__PURE__*/React.createElement(SvgXml, {
+    xml: brokenImageIcon(),
+    width: 32,
+    height: 32
+  }));
+}
+//# sourceMappingURL=PostMediaElement.js.map

package/lib/module/social/elements/PostMediaElement/PostMediaElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useRef","useState","Animated","Image","Pressable","ScrollView","useWindowDimensions","View","SvgXml","Typography","useAuth","videoControlIcon","brokenImageIcon","getFrameRatio","getVideoDisplayDims","FRAME_RATIO_VALUE","DEFAULT_FRAME_RATIO","getIndicatorConfig","useStyles","isMediaPost","post","dataType","getAttachmentRatio","image","getImageInfo","getWidth","getHeight","video","getVideoInfo","width","height","rotation","getRotation","PostMediaElement","posts","onImageClick","onVideoClick","controlsRef","loading","styles","screenWidth","current","setCurrent","trackWidth","setTrackWidth","scrollRef","mediaPosts","filter","ratio","length","React","createElement","style","postMedia","postMedia__track","postMedia__frame","aspectRatio","total","isCarousel","slideWidth","handleFrameClick","index","onLayout","event","nativeEvent","layout","onMomentumScrollEnd","nextIndex","Math","round","contentOffset","x","slideTo","_scrollRef$current","scrollTo","animated","MediaFrame","onPress","ref","horizontal","pagingEnabled","showsHorizontalScrollIndicator","scrollEventThrottle","decelerationRate","map","key","postId","postMedia__slide","PositionCounter","PaginationIndicator","dots","postMedia__indicator","dot","state","EdgeDot","side","postMedia__dotSlot","postMedia__dot","postMedia__dotActive","postMedia__dotInactive","anim","Value","animation","timing","toValue","duration","useNativeDriver","start","stop","translateX","interpolate","inputRange","outputRange","postMedia__dotEdge","opacity","transform","postMedia__counter","Body","postMedia__counterLabel","ImageMedia","VideoMedia","_post$getImageInfo","apiRegion","isBroken","setIsBroken","fileId","url","undefined","BrokenFrame","postMedia__media","source","uri","resizeMode","onError","data","thumbnailFileId","Fragment","postMedia__playButton","xml","postMedia__broken"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/PostMediaElement.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/elements/PostMediaElement/index.js

@@ -0,0 +1,2 @@
+export { PostMediaElement } from './PostMediaElement';
+//# sourceMappingURL=index.js.map

package/lib/module/social/elements/PostMediaElement/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PostMediaElement"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/index.tsx"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/social/elements/PostMediaElement/styles.js

@@ -0,0 +1,110 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+// 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();
+  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;
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/elements/PostMediaElement/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useTheme","useStyles","theme","styles","create","postMedia","marginHorizontal","paddingVertical","postMedia__track","position","width","postMedia__slide","postMedia__frame","overflow","backgroundColor","colors","baseShade4","postMedia__media","height","postMedia__playButton","top","left","transform","translateX","translateY","zIndex","postMedia__broken","flex","alignItems","justifyContent","postMedia__counter","right","paddingHorizontal","borderRadius","postMedia__counterLabel","color","postMedia__indicator","flexDirection","gap","marginTop","postMedia__dotSlot","postMedia__dot","postMedia__dotActive","base","postMedia__dotInactive","postMedia__dotEdge"],"sourceRoot":"../../../../../src","sources":["social/elements/PostMediaElement/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oBAAoB;AAG7C;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGF,QAAQ,CAAa,CAAC;EAEpC,MAAMG,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACT;MACA;MACA;MACAC,gBAAgB,EAAE,CAAC,EAAE;MACrBC,eAAe,EAAE,CAAC,CAAE;IACtB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE;IACT,CAAC;IACDC,gBAAgB,EAAE;MAChB;IAAA,CACD;IACDC,gBAAgB,EAAE;MAChBF,KAAK,EAAE,MAAM;MACbG,QAAQ,EAAE,QAAQ;MAClB;MACAC,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC;IAChC,CAAC;IACDC,gBAAgB,EAAE;MAChBP,KAAK,EAAE,MAAM;MACbQ,MAAM,EAAE;IACV,CAAC;IACDC,qBAAqB,EAAE;MACrBV,QAAQ,EAAE,UAAU;MACpBW,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE,KAAK;MACX;MACAX,KAAK,EAAE,EAAE;MACTQ,MAAM,EAAE,EAAE;MACVI,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAE,CAAC;MAAG,CAAC,EAAE;QAAEC,UAAU,EAAE,CAAC;MAAG,CAAC,CAAC;MACrDC,MAAM,EAAE;IACV,CAAC;IACDC,iBAAiB,EAAE;MACjBC,IAAI,EAAE,CAAC;MACPC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBf,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC;IAChC,CAAC;IACDc,kBAAkB,EAAE;MAClBrB,QAAQ,EAAE,UAAU;MACpBW,GAAG,EAAE,CAAC;MAAE;MACRW,KAAK,EAAE,CAAC;MAAE;MACVH,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBtB,eAAe,EAAE,CAAC;MAAE;MACpByB,iBAAiB,EAAE,EAAE;MAAE;MACvBC,YAAY,EAAE,GAAG;MAAE;MACnBnB,eAAe,EAAE,iBAAiB,CAAE;IACtC,CAAC;IACDoB,uBAAuB,EAAE;MACvBC,KAAK,EAAE,SAAS,CAAE;IACpB,CAAC;IACDC,oBAAoB,EAAE;MACpBC,aAAa,EAAE,KAAK;MACpBT,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBS,GAAG,EAAE,CAAC;MAAE;MACRpB,MAAM,EAAE,CAAC;MAAE;MACXqB,SAAS,EAAE,EAAE,CAAE;IACjB,CAAC;IACDC,kBAAkB,EAAE;MAClBZ,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBnB,KAAK,EAAE,CAAC;MAAE;MACVQ,MAAM,EAAE,CAAC,CAAE;IACb,CAAC;IACDuB,cAAc,EAAE;MACdR,YAAY,EAAE,GAAG;MAAE;MACnBnB,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAACC,UAAU,CAAE;IAC5C,CAAC;IACD0B,oBAAoB,EAAE;MACpBhC,KAAK,EAAE,CAAC;MACRQ,MAAM,EAAE,CAAC;MACTJ,eAAe,EAAEZ,KAAK,CAACa,MAAM,CAAC4B,IAAI,CAAE;IACtC,CAAC;IACDC,sBAAsB,EAAE;MACtBlC,KAAK,EAAE,CAAC;MACRQ,MAAM,EAAE;IACV,CAAC;IACD2B,kBAAkB,EAAE;MAClBnC,KAAK,EAAE,CAAC;MAAE;MACVQ,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,OAAOf,MAAM;AACf,CAAC","ignoreList":[]}