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

package/lib/commonjs/social/components/MediaSelector/styles.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _reactNativePaper = require("react-native-paper");
+const NUM_COLUMNS = 3;
+const CELL_GAP = 2;
+const useStyles = () => {
+  const theme = (0, _reactNativePaper.useTheme)();
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const cellSize = Math.floor((width - CELL_GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS);
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      height: 56
+    },
+    headerButton: {
+      minWidth: 64
+    },
+    headerButton__right: {
+      minWidth: 64,
+      alignItems: 'flex-end'
+    },
+    headerTitle: {
+      color: theme.colors.base,
+      fontSize: 16,
+      fontWeight: '600'
+    },
+    headerClose: {
+      color: theme.colors.base,
+      fontSize: 16
+    },
+    headerAdd: {
+      color: theme.colors.primary,
+      fontSize: 16,
+      fontWeight: '600'
+    },
+    headerAdd__disabled: {
+      color: theme.colors.baseShade3,
+      fontSize: 16,
+      fontWeight: '600'
+    },
+    grid: {
+      paddingBottom: 24
+    },
+    cell: {
+      width: cellSize,
+      height: cellSize,
+      marginRight: CELL_GAP,
+      marginBottom: CELL_GAP,
+      backgroundColor: theme.colors.baseShade4
+    },
+    cell__image: {
+      width: '100%',
+      height: '100%'
+    },
+    cell__selectedOverlay: {
+      ..._reactNative.StyleSheet.absoluteFillObject,
+      borderWidth: 2,
+      borderColor: theme.colors.primary
+    },
+    cell__badge: {
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      minWidth: 22,
+      height: 22,
+      borderRadius: 11,
+      paddingHorizontal: 5,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.primary
+    },
+    cell__badgeEmpty: {
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 1.5,
+      borderColor: '#FFFFFF',
+      backgroundColor: 'rgba(0,0,0,0.2)'
+    },
+    cell__badgeLabel: {
+      color: '#FFFFFF',
+      fontSize: 12,
+      fontWeight: '700'
+    },
+    cell__videoDuration: {
+      position: 'absolute',
+      bottom: 6,
+      right: 6,
+      color: '#FFFFFF',
+      fontSize: 11,
+      fontWeight: '600',
+      textShadowColor: 'rgba(0,0,0,0.6)',
+      textShadowRadius: 2
+    },
+    empty: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 32
+    },
+    empty__text: {
+      color: theme.colors.baseShade1,
+      fontSize: 14,
+      textAlign: 'center'
+    }
+  });
+  return {
+    styles,
+    theme
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/components/MediaSelector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNativePaper","NUM_COLUMNS","CELL_GAP","useStyles","theme","useTheme","width","useWindowDimensions","cellSize","Math","floor","styles","StyleSheet","create","container","flex","backgroundColor","colors","background","header","flexDirection","alignItems","justifyContent","paddingHorizontal","height","headerButton","minWidth","headerButton__right","headerTitle","color","base","fontSize","fontWeight","headerClose","headerAdd","primary","headerAdd__disabled","baseShade3","grid","paddingBottom","cell","marginRight","marginBottom","baseShade4","cell__image","cell__selectedOverlay","absoluteFillObject","borderWidth","borderColor","cell__badge","position","top","right","borderRadius","cell__badgeEmpty","cell__badgeLabel","cell__videoDuration","bottom","textShadowColor","textShadowRadius","empty","padding","empty__text","baseShade1","textAlign","exports"],"sourceRoot":"../../../../../src","sources":["social/components/MediaSelector/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/social/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaViewer = MediaViewer;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
+var _reactNativeSvg = require("react-native-svg");
+var _xml = require("../../../core/assets/icons/xml");
+var _styles = require("./styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function MediaViewer({
+  visible,
+  items,
+  initialIndex,
+  onClose
+}) {
+  var _items$current;
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const listRef = (0, _react.useRef)(null);
+  const [current, setCurrent] = (0, _react.useState)(initialIndex);
+  // Mute-carry (PDT-4309 / PDT-4312): the first video plays unmuted; each swipe
+  // defaults the next video to muted — until the user unmutes, after which
+  // subsequent videos stay unmuted.
+  const [muted, setMuted] = (0, _react.useState)(false);
+  const keepUnmutedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    setCurrent(initialIndex);
+    setMuted(false);
+    keepUnmutedRef.current = false;
+  }, [visible, initialIndex]);
+  const onMomentumScrollEnd = (0, _react.useCallback)(e => {
+    if (!width) return;
+    const idx = Math.round(e.nativeEvent.contentOffset.x / width);
+    if (idx !== current) {
+      setCurrent(idx);
+      setMuted(!keepUnmutedRef.current);
+    }
+  }, [width, current]);
+  const toggleMute = (0, _react.useCallback)(() => {
+    setMuted(prev => {
+      const next = !prev;
+      keepUnmutedRef.current = !next; // user unmuted -> keep unmuted afterwards
+      return next;
+    });
+  }, []);
+  const renderItem = (0, _react.useCallback)(({
+    item,
+    index
+  }) => /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.page, {
+      width
+    }]
+  }, item.type === 'video' ?
+  /*#__PURE__*/
+  // pointerEvents none so horizontal swipes reach the pager instead of
+  // being captured by the native video view.
+  React.createElement(_reactNative.View, {
+    style: styles.media,
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(_reactNativeVideo.default, {
+    source: item.videoType ? {
+      uri: item.uri,
+      type: item.videoType
+    } : {
+      uri: item.uri
+    },
+    style: styles.media,
+    resizeMode: "contain",
+    paused: index !== current || !visible,
+    muted: muted && index === current,
+    repeat: true,
+    playInBackground: false,
+    playWhenInactive: false
+  })) : /*#__PURE__*/React.createElement(_reactNative.Image, {
+    source: {
+      uri: item.uri
+    },
+    style: styles.media,
+    resizeMode: "contain"
+  })), [styles, width, current, muted, visible]);
+  const currentIsVideo = ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.type) === 'video';
+  return /*#__PURE__*/React.createElement(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: () => onClose(current)
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
+    style: styles.headerBtn,
+    onPress: () => onClose(current)
+  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
+    xml: (0, _xml.clearIcon)('white'),
+    width: 28,
+    height: 28
+  })), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.counter
+  }, current + 1, "/", items.length), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.headerBtn__right
+  }, currentIsVideo && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
+    onPress: toggleMute
+  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
+    xml: muted ? (0, _xml.soundOffIcon)('#FFFFFF') : (0, _xml.soundOnIcon)('#FFFFFF'),
+    width: 24,
+    height: 24
+  })))), /*#__PURE__*/React.createElement(_reactNative.FlatList, {
+    ref: listRef,
+    data: items,
+    horizontal: true,
+    pagingEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    keyExtractor: (it, i) => `${it.uri}-${i}`,
+    renderItem: renderItem,
+    getItemLayout: (_, index) => ({
+      length: width,
+      offset: width * index,
+      index
+    }),
+    initialScrollIndex: initialIndex,
+    onMomentumScrollEnd: onMomentumScrollEnd
+  })));
+}
+//# sourceMappingURL=MediaViewer.js.map

package/lib/commonjs/social/components/MediaViewer/MediaViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_reactNativeVideo","_interopRequireDefault","_reactNativeSvg","_xml","_styles","e","__esModule","default","MediaViewer","visible","items","initialIndex","onClose","_items$current","styles","useStyles","width","useWindowDimensions","listRef","useRef","current","setCurrent","useState","muted","setMuted","keepUnmutedRef","useEffect","onMomentumScrollEnd","useCallback","idx","Math","round","nativeEvent","contentOffset","x","toggleMute","prev","next","renderItem","item","index","React","createElement","View","style","page","type","media","pointerEvents","source","videoType","uri","resizeMode","paused","repeat","playInBackground","playWhenInactive","Image","currentIsVideo","Modal","transparent","animationType","onRequestClose","container","header","TouchableOpacity","headerBtn","onPress","SvgXml","xml","clearIcon","height","Text","counter","length","headerBtn__right","soundOffIcon","soundOnIcon","FlatList","ref","data","horizontal","pagingEnabled","showsHorizontalScrollIndicator","keyExtractor","it","i","getItemLayout","_","offset","initialScrollIndex"],"sourceRoot":"../../../../../src","sources":["social/components/MediaViewer/MediaViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/social/components/MediaViewer/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MediaViewer", {
+  enumerable: true,
+  get: function () {
+    return _MediaViewer.MediaViewer;
+  }
+});
+var _MediaViewer = require("./MediaViewer");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/social/components/MediaViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_MediaViewer","require"],"sourceRoot":"../../../../../src","sources":["social/components/MediaViewer/index.tsx"],"mappings":";;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/social/components/MediaViewer/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _reactNativePaper = require("react-native-paper");
+const useStyles = () => {
+  const theme = (0, _reactNativePaper.useTheme)();
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#000000'
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      height: 56,
+      zIndex: 2
+    },
+    headerBtn: {
+      minWidth: 44,
+      height: 44,
+      alignItems: 'flex-start',
+      justifyContent: 'center'
+    },
+    headerBtn__right: {
+      minWidth: 44,
+      height: 44,
+      alignItems: 'flex-end',
+      justifyContent: 'center'
+    },
+    counter: {
+      color: '#FFFFFF',
+      fontSize: 14,
+      fontWeight: '600'
+    },
+    muteGlyph: {
+      fontSize: 20
+    },
+    page: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    media: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+  return {
+    styles,
+    theme
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/components/MediaViewer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNativePaper","useStyles","theme","useTheme","styles","StyleSheet","create","container","flex","backgroundColor","header","flexDirection","alignItems","justifyContent","paddingHorizontal","height","zIndex","headerBtn","minWidth","headerBtn__right","counter","color","fontSize","fontWeight","muteGlyph","page","media","width","exports"],"sourceRoot":"../../../../../src","sources":["social/components/MediaViewer/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,MAAME,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAa,CAAC;EAEpC,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,IAAI,EAAE,CAAC;MACPC,eAAe,EAAE;IACnB,CAAC;IACDC,MAAM,EAAE;MACNC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/BC,iBAAiB,EAAE,EAAE;MACrBC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACTC,QAAQ,EAAE,EAAE;MACZH,MAAM,EAAE,EAAE;MACVH,UAAU,EAAE,YAAY;MACxBC,cAAc,EAAE;IAClB,CAAC;IACDM,gBAAgB,EAAE;MAChBD,QAAQ,EAAE,EAAE;MACZH,MAAM,EAAE,EAAE;MACVH,UAAU,EAAE,UAAU;MACtBC,cAAc,EAAE;IAClB,CAAC;IACDO,OAAO,EAAE;MACPC,KAAK,EAAE,SAAS;MAChBC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE;IACd,CAAC;IACDC,SAAS,EAAE;MACTF,QAAQ,EAAE;IACZ,CAAC;IACDG,IAAI,EAAE;MACJjB,IAAI,EAAE,CAAC;MACPI,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE;IAClB,CAAC;IACDa,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbZ,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,OAAO;IAAEX,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAAC0B,OAAA,CAAA3B,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/social/components/PostContent/index.js

@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _reactNativeSvg = require("react-native-svg");
 var _styles = require("./styles");
 var _useAuth = _interopRequireDefault(require("../../../core/hooks/useAuth"));
 var _feed = require("../../../core/legacy/feed");
 var _dist = _interopRequireDefault(require("../legacy/react-native-image-viewing/dist"));
-var _store = require("../../../core/stores/store");
+var _reactNativeSvg = require("react-native-svg");
 var _xml = require("../../../core/assets/icons/xml");
+var _store = require("../../../core/stores/store");
+var _PostMediaElement = require("../../elements/PostMediaElement");
 var _LivestreamContent = _interopRequireDefault(require("../LivestreamContent"));
 var _PreviewLink = require("../PreviewLink");
 var _RenderTextWithMention = _interopRequireDefault(require("../RenderTextWithMention/RenderTextWithMention"));
 var _PollContent = _interopRequireDefault(require("../PollContent"));
+var _MediaViewer = require("../MediaViewer");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PostContent = ({
   post,
@@ -38,9 +40,12 @@ const PostContent = ({
   const [videoPostsFullSize, setVideoPostsFullSize] = (0, _react.useState)([]);
   const [visibleFullImage, setIsVisibleFullImage] = (0, _react.useState)(false);
   const [imageIndex, setImageIndex] = (0, _react.useState)(0);
+  const [videoViewerIndex, setVideoViewerIndex] = (0, _react.useState)(null);
+  const [mediaLoading, setMediaLoading] = (0, _react.useState)(((childrenPosts === null || childrenPosts === void 0 ? void 0 : childrenPosts.length) ?? 0) > 0);
+  const [mediaChildPosts, setMediaChildPosts] = (0, _react.useState)([]);
+  const mediaControlsRef = (0, _react.useRef)(null);
+  const viewerIndexRef = (0, _react.useRef)(0);
   const styles = (0, _styles.useStyles)();
-  let imageStyle = styles.imageLargePost;
-  let colStyle = styles.col2;
   const {
     currentPostdetail
   } = (0, _store.useUIKitSelector)(state => state.postDetail);
@@ -71,12 +76,14 @@ const PostContent = ({
     }
   }, [imagePosts, videoPosts, apiRegion]);
   const getPostInfo = (0, _react.useCallback)(async () => {
+    setMediaLoading(((childrenPosts === null || childrenPosts === void 0 ? void 0 : childrenPosts.length) ?? 0) > 0);
     try {
       const response = await Promise.all(childrenPosts.map(async id => {
         const {
           data: childrenPost
         } = await (0, _feed.getPostById)(id);
         return {
+          post: childrenPost,
           dataType: childrenPost === null || childrenPost === void 0 ? void 0 : childrenPost.dataType,
           data: childrenPost === null || childrenPost === void 0 ? void 0 : childrenPost.data
         };
@@ -85,17 +92,20 @@ const PostContent = ({
       const videos = [];
       const polls = [];
       const livestreams = [];
+      const media = [];
       response.forEach(item => {
         var _item$data, _item$data2;
         if ((item === null || item === void 0 ? void 0 : item.dataType) === 'image' && item !== null && item !== void 0 && (_item$data = item.data) !== null && _item$data !== void 0 && _item$data.fileId) {
           const url = `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.data.fileId}/download?size=medium`;
           if (!images.includes(url)) {
             images.push(url);
+            if (item.post) media.push(item.post);
           }
         } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'video' && item !== null && item !== void 0 && (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.videoFileId.original) {
           const isExisted = videos.some(video => video.videoFileId.original === item.data.videoFileId.original);
           if (!isExisted) {
             videos.push(item.data);
+            if (item.post) media.push(item.post);
           }
         } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'poll') {
           if (!polls.some(poll => poll.pollId === item.data.pollId)) {
@@ -107,12 +117,12 @@ const PostContent = ({
           }
         }
       });
-      if (images.length > 0) {
-        setImagePosts(images);
-      }
-      if (videos.length > 0) {
-        setVideoPosts(videos);
-      }
+
+      // Set unconditionally so navigating to a post without media clears the
+      // previous media (see the effect below which no longer eagerly resets).
+      setMediaChildPosts(media);
+      setImagePosts(images);
+      setVideoPosts(videos);
       if (polls.length > 0) {
         setPollIds(polls);
       }
@@ -121,121 +131,50 @@ const PostContent = ({
       }
     } catch (error) {
       console.log('error: ', error);
+    } finally {
+      setMediaLoading(false);
     }
   }, [apiRegion, childrenPosts]);
   (0, _react.useEffect)(() => {
-    setVideoPosts([]);
-    setImagePosts([]);
+    // Don't clear media here: getPostInfo resolves images/videos/media to their
+    // fresh values, so the existing media stays on screen until the new data
+    // arrives. Eagerly resetting caused a blank flash whenever the feed
+    // re-rendered (e.g. realtime updates), then the content popped back in.
     getPostInfo();
   }, [childrenPosts, currentPostdetail, postList, postListGlobal, getPostInfo]);
   function onClickImage(index) {
+    viewerIndexRef.current = index;
     setIsVisibleFullImage(true);
     setImageIndex(index);
   }
-  function renderMediaPosts() {
-    const thumbnailFileIds = videoPosts.length > 0 ? videoPosts.map(item => {
-      return `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.thumbnailFileId}/download?size=medium`;
-    }) : [];
-    const mediaPosts = [...imagePosts].length > 0 ? [...imagePosts] : [...thumbnailFileIds];
-    const imageElement = mediaPosts.map((item, index) => {
-      if (mediaPosts.length === 1) {
-        imageStyle = styles.imageLargePost;
-        colStyle = styles.col6;
-      } else if (mediaPosts.length === 2) {
-        colStyle = styles.col3;
-        if (index === 0) {
-          imageStyle = [styles.imageLargePost, styles.imageMarginRight];
-        } else {
-          imageStyle = [styles.imageLargePost, styles.imageMarginLeft];
-        }
-      } else if (mediaPosts.length === 3) {
-        switch (index) {
-          case 0:
-            colStyle = styles.col6;
-            imageStyle = [styles.imageMediumPost, styles.imageMarginBottom];
-            break;
-          case 1:
-            colStyle = styles.col3;
-            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginRight];
-            break;
-          case 2:
-            colStyle = styles.col3;
-            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginLeft];
-            break;
-          default:
-            break;
-        }
-      } else {
-        switch (index) {
-          case 0:
-            colStyle = styles.col6;
-            imageStyle = [styles.imageMediumLargePost, styles.imageMarginBottom];
-            break;
-          case 1:
-            colStyle = styles.col2;
-            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginRight];
-            break;
-          case 2:
-            colStyle = styles.col2;
-            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft, styles.imageMarginRight];
-            break;
-          case 3:
-            colStyle = styles.col2;
-            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft];
-            break;
-          default:
-            break;
-        }
-      }
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: colStyle,
-        key: item
-      }, /*#__PURE__*/React.createElement(_reactNative.TouchableWithoutFeedback, {
-        onPress: () => onClickImage(index)
-      }, /*#__PURE__*/React.createElement(_reactNative.View, null, videoPosts.length > 0 && renderPlayButton(), /*#__PURE__*/React.createElement(_reactNative.Image, {
-        style: imageStyle,
-        source: {
-          uri: item
-        }
-      }), index === 3 && imagePosts.length > 4 && /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.overlay
-      }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-        style: styles.overlayText
-      }, `+ ${imagePosts.length - 3}`)))));
-    });
-    if (imageElement.length < 3) {
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.imagesWrap
-      }, /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.row
-      }, imageElement));
-    } else if (imageElement.length === 3) {
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: [styles.imagesWrap]
-      }, /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.row
-      }, imageElement.slice(0, 1)), /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.row
-      }, imageElement.slice(1, 3)));
-    } else {
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.imagesWrap
-      }, /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.row
-      }, imageElement.slice(0, 1)), /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: styles.row
-      }, imageElement.slice(1, 4)));
-    }
+  function closeFullScreen() {
+    var _mediaControlsRef$cur;
+    setIsVisibleFullImage(false);
+    (_mediaControlsRef$cur = mediaControlsRef.current) === null || _mediaControlsRef$cur === void 0 || _mediaControlsRef$cur.slideTo(viewerIndexRef.current);
   }
-  function renderPlayButton() {
-    return /*#__PURE__*/React.createElement(_reactNative.View, {
-      style: styles.playButton
-    }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
-      xml: _xml.playBtn,
-      width: "50",
-      height: "50"
-    }));
+
+  // UC2 (PDT-4309): video carousel opens the swipeable full-screen player
+  // (autoplay + mute-carry) instead of the single-video route.
+  function openVideoViewer(index) {
+    viewerIndexRef.current = index;
+    setVideoViewerIndex(index);
+  }
+  function closeVideoViewer(lastIndex) {
+    var _mediaControlsRef$cur2;
+    setVideoViewerIndex(null);
+    // Published post: return to the last-viewed frame.
+    (_mediaControlsRef$cur2 = mediaControlsRef.current) === null || _mediaControlsRef$cur2 === void 0 || _mediaControlsRef$cur2.slideTo(lastIndex);
   }
+  const videoViewerItems = videoPosts.map(item => {
+    var _item$videoFileId;
+    return {
+      type: 'video',
+      // The /files/{original}/download endpoint returns the original video
+      // file (mp4), not an HLS playlist — no m3u8 type hint (let the player
+      // detect the container).
+      uri: `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 || (_item$videoFileId = item.videoFileId) === null || _item$videoFileId === void 0 ? void 0 : _item$videoFileId.original}/download`
+    };
+  });
   function renderImageHeader({
     imageIndex: imgIndex
   }) {
@@ -245,10 +184,12 @@ const PostContent = ({
       style: styles.flexWidth
     }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
       style: styles.closebtnIcon,
-      onPress: () => setIsVisibleFullImage(false)
-    }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-      style: styles.closeBtn
-    }, "X"))), /*#__PURE__*/React.createElement(_reactNative.View, {
+      onPress: closeFullScreen
+    }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
+      xml: (0, _xml.clearIcon)('white'),
+      width: 28,
+      height: 28
+    }))), /*#__PURE__*/React.createElement(_reactNative.View, {
       style: styles.flexWidth
     }, /*#__PURE__*/React.createElement(_reactNative.Text, {
       style: styles.header
@@ -273,14 +214,28 @@ const PostContent = ({
     post: post,
     onPressPost: onPressPost,
     roomId: livestreamId[0]
-  }) : renderMediaPosts(), /*#__PURE__*/React.createElement(_dist.default, {
+  }) : /*#__PURE__*/React.createElement(_PostMediaElement.PostMediaElement, {
+    posts: mediaChildPosts,
+    onImageClick: onClickImage,
+    onVideoClick: openVideoViewer,
+    controlsRef: mediaControlsRef,
+    loading: mediaLoading
+  }), /*#__PURE__*/React.createElement(_dist.default, {
     images: imagePostsFullSize.length > 0 ? imagePostsFullSize : videoPostsFullSize,
     imageIndex: imageIndex,
     visible: visibleFullImage,
-    onRequestClose: () => setIsVisibleFullImage(false),
+    onRequestClose: closeFullScreen,
+    onImageIndexChange: idx => {
+      viewerIndexRef.current = idx;
+    },
     isVideoButton: videoPosts.length > 0 ? true : false,
     videoPosts: videoPosts,
     HeaderComponent: renderImageHeader
+  }), /*#__PURE__*/React.createElement(_MediaViewer.MediaViewer, {
+    visible: videoViewerIndex !== null,
+    items: videoViewerItems,
+    initialIndex: videoViewerIndex ?? 0,
+    onClose: closeVideoViewer
   }));
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(PostContent);