pb-sxp-ui 1.0.77 → 1.0.79

package/dist/index.css

@@ -836,6 +836,124 @@
           box-sizing: border-box;
 }
 
+.list {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 70px;
+}
+.list-scroll {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.list-info {
+  font-size: 13px;
+  line-height: 20px;
+  padding: 0 54px;
+  text-align: center;
+}
+.list-collection {
+  margin-top: 4px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 40px;
+  text-align: center;
+  color: #757575;
+  font-size: 12px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.list-content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.list-content-listItem {
+  width: 49.5%;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+.list-content-listItem-picture {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+  overflow: hidden;
+}
+.list-content-listItem-picture-img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.list-content-listItem-info {
+  padding: 8px;
+}
+.list-content-listItem-info-title {
+  font-size: 13px;
+  line-height: 20px;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.list-content-listItem-info-nowrap {
+  line-clamp: 1 !important;
+  -webkit-line-clamp: 1 !important;
+}
+.list-content-listItem-info-price {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: bold;
+}
+.list-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 92px;
+}
+.list-btn-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.list-btn {
+  height: 52px;
+  width: 100%;
+  background: #000000;
+  border-radius: 25px;
+  font-size: 13px;
+  line-height: 100%;
+  font-weight: bold;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 /**
  * Swiper 11.0.7
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/index.js

@@ -627,6 +627,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
         })
             .finally(() => {
+            bffEventReport({
+                eventInfo: {
+                    eventSubject: 'apiRequest',
+                    eventDescription: 'api request succeed'
+                }
+            });
             setLoading(false);
             isInit.current = true;
         });
@@ -11829,7 +11835,7 @@ var previewData = {
 	hashTag: hashTag
 };
 
-const WaterfallFlowItem = (props) => {
+const WaterfallFlowItem$1 = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
@@ -11893,29 +11899,8 @@ const WaterfallFlowItem = (props) => {
             return null;
         }
     }, [rec]);
-    // useEffect(() => {
-    //   const observer = new IntersectionObserver((entries) => {
-    //     entries.forEach((entry) => {
-    //       if (entry.isIntersecting) {
-    //         if (ref.current === null || src === '') {
-    //           return;
-    //         }
-    //         if (showVideo && firstFrameSrc) {
-    //           imgDom.current.setSrc(firstFrameSrc);
-    //         } else {
-    //           imgDom.current.setSrc(src);
-    //         }
-    //         observer.unobserve(ref.current);
-    //       }
-    //     });
-    //   });
-    //   observer.observe(ref.current);
-    //   return () => {
-    //     observer.disconnect();
-    //   };
-    // }, [src, showVideo, firstFrameSrc]);
     useEffect(() => {
-        if (imgDom.current === null || src === '' || isImgShow === false) {
+        if (imgDom.current === null || src === '') {
             return;
         }
         const img = new Image();
@@ -11932,8 +11917,7 @@ const WaterfallFlowItem = (props) => {
             });
             setIsLoading(true);
         };
-        // imgDom.current.setSrc(img.src);
-        imgDom.current.src = img.src;
+        imgDom.current.setSrc(img.src);
     }, [src, showVideo, firstFrameSrc, isImgShow]);
     useEffect(() => {
         // 通过宽度比例获取图片高度
@@ -11985,12 +11969,12 @@ const WaterfallFlowItem = (props) => {
             showVideo && (React.createElement("div", { style: { display: 'none' } },
                 React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
                 React.createElement("canvas", { ref: canvasRef }))),
-            React.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+            React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
         React.createElement("div", { className: 'waterFallList-content-listItem-info' },
             React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
             React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
-function WaterfallList(_a) {
+function WaterfallList$1(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
@@ -12201,7 +12185,7 @@ function WaterfallList(_a) {
             React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
-                    return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
+                    return (React.createElement(WaterfallFlowItem$1, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
                 React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
                         position: 'absolute',
@@ -12219,11 +12203,221 @@ function WaterfallList(_a) {
 
 var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
 
+const WaterfallFlowItem = (props) => {
+    const { rec, index, list, reportTagsView, textStyles, space } = props;
+    const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+    const [showVideo, setShowVideo] = useState(false);
+    const imgDom = useRef(null);
+    const ref = useRef(null);
+    const videoDom = useRef(null);
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const src = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
+            return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
+        }
+        else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
+            return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
+        }
+        else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
+            return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
+        }
+        else {
+            return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
+        }
+    }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
+    const title = useMemo(() => {
+        var _a, _b;
+        return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
+    }, [rec]);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
+            return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _j !== void 0 ? _j : ''}`;
+        }
+        else {
+            return null;
+        }
+    }, [rec]);
+    // useEffect(() => {
+    //   if (imgDom.current === null || src === '') {
+    //     return;
+    //   }
+    //   const img = new Image();
+    //   if (showVideo && firstFrameSrc) {
+    //     img.src = firstFrameSrc;
+    //   } else {
+    //     img.src = src;
+    //   }
+    //   // img.onload = () => {
+    //   //   setIsLoading(true);
+    //   // };
+    //   imgDom.current.src = img.src;
+    // }, [src, showVideo, firstFrameSrc]);
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    if (ref.current === null || src === '') {
+                        return;
+                    }
+                    if (showVideo && firstFrameSrc) {
+                        imgDom.current.setSrc(firstFrameSrc);
+                    }
+                    else {
+                        imgDom.current.setSrc(src);
+                    }
+                    observer.unobserve(ref.current);
+                }
+            });
+        });
+        observer.observe(ref.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [src, showVideo, firstFrameSrc]);
+    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
+        const aspectRatio = videoWidth / videoHeight;
+        const targetHeight = targetWidth / aspectRatio;
+        return targetHeight;
+    };
+    useEffect(() => {
+        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
+        if (video === null || src === '' || !showVideo) {
+            return;
+        }
+        video.src = src;
+        video.currentTime = 1;
+        video.crossOrigin = 'anonymous';
+        video.onloadeddata = () => {
+            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
+            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
+            canvas.height = targetHeight;
+            canvas.width = targetWidth;
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            setFirstFrameSrc(canvas.toDataURL());
+            video.remove();
+            canvas.remove();
+        };
+    }, [src, showVideo]);
+    const handleClickToDetail = () => {
+        reportTagsView();
+        setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
+        setTimeout(() => {
+            var _a;
+            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
+            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+        }, 0);
+    };
+    return (React.createElement("div", { ref: ref, className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
+        React.createElement("div", { className: 'list-content-listItem-picture' },
+            showVideo && (React.createElement("div", { style: { display: 'none' } },
+                React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
+                React.createElement("canvas", { ref: canvasRef }))),
+            React.createElement(FormatImage$1, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
+        React.createElement("div", { className: 'list-content-listItem-info' },
+            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
+            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
+};
+function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+    const [list, setList] = useState();
+    const [data, setData] = useState();
+    const [isLoadingData, setIsLoadingData] = useState(false);
+    const containerRef = useRef(null);
+    const [isLoadMore, setIsLoadMore] = useState(false);
+    useCallback(() => {
+        if (isLoadMore)
+            return;
+        setIsLoadMore(true);
+        waterFallData &&
+            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
+            }).then((res) => {
+                var _a;
+                setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
+                setIsLoadMore(false);
+            }));
+    }, [waterFallData, getRecommendVideos, list, isLoadMore]);
+    useEffect(() => {
+        var _a, _b;
+        setIsLoadingData(true);
+        waterFallData &&
+            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
+                defaultSize: hashTagSize,
+                maxSize: hashTagSize
+            }).then((res) => {
+                var _a, _b;
+                setData(res);
+                setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                setIsLoadingData(false);
+            }));
+        if (isOpenHashTag) {
+            const res = previewData;
+            setData(res);
+            setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+            setIsLoadingData(false);
+        }
+    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
+    // useEffect(() => {
+    //   const container = containerRef?.current;
+    //   if (!container) return;
+    //   const handleScroll = () => {
+    //     const top = (container as any)?.scrollTop;
+    //     const clientHeight = (container as any)?.clientHeight;
+    //     const scrollHeight = (container as any)?.scrollHeight;
+    //     if (scrollHeight <= top + clientHeight && !isLoadingData) {
+    //       loadMoreData();
+    //     }
+    //   };
+    //   container?.addEventListener('scroll', handleScroll);
+    //   return () => {
+    //     container?.removeEventListener('scroll', handleScroll); // 在组件卸载时移除事件监听器
+    //   };
+    // }, [isLoadingData, containerRef, loadMoreData]);
+    const handleClickLink = () => {
+        var _a, _b;
+        if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
+            reportTagsView();
+            window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
+        }
+    };
+    return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+        React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
+        React.createElement("div", { className: 'list-scroll', ref: containerRef },
+            React.createElement("div", { className: 'list-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
+            React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
+                return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
+            })),
+            React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
+            React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                    height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
+                } })),
+        React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
+}
+
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-10 10:58:24
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-06 17:19:25
+ * @LastEditTime: 2024-06-07 10:35:35
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
  *
  */
@@ -12317,7 +12511,7 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         React.createElement(Navbar$1, { icon: img$1, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
-        React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
+        (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) ? (React.createElement(WaterfallList$1, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 var WaterFall$1 = memo(WaterFall);
 
@@ -12841,7 +13035,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
  *
  */
 const Picture = (props) => {
-    const { src, height, imgUrlsPostConfig } = props;
+    const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
     const blur = useMemo(() => {
         return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
     }, [imgUrlsPostConfig]);
@@ -12866,7 +13060,7 @@ const Picture = (props) => {
         return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
     }, [imgUrlsPostConfig, isBgColor]);
     return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
-        (!blur || !isBgColor) && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+        (!blur || !isBgColor) && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
         blur && (React.createElement(FormatImage$1, { src: src, style: {
                 width: '100%',
                 height: '100%',
@@ -12883,7 +13077,7 @@ const Picture = (props) => {
  * @Author: lewinlu@chatlabs.com
  * @Date: 2024-01-03 14:39:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-18 19:56:22
+ * @LastEditTime: 2024-06-07 14:05:08
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
  */
 const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
@@ -12903,16 +13097,20 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageE
             }
         }
         else {
-            setIsLoad(true);
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
+    const showFirstImageFn = useCallback(() => {
+        if (!isLoad) {
+            setIsLoad(true);
+        }
+    }, [isLoad]);
     // if (!isActive) {
     //   return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
     // }
-    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (React.createElement(SwiperSlide, { key: url },
-            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
+    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+        return (React.createElement(SwiperSlide, { key: index },
+            React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));
 };
 var PictureGroup$3 = memo(PictureGroup$2);
@@ -13132,7 +13330,7 @@ var Tagbar$1 = memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-06 18:42:24
+ * @LastEditTime: 2024-06-07 11:10:42
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -13155,6 +13353,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
     const handleH5EnterLink = useCallback(() => {
+        var _a, _b;
         if (data.length <= 0) {
             return;
         }
@@ -13177,7 +13376,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 utmId: getVal('utm_id'),
                 utmContent: getVal('utm_content'),
                 enterTime: `${Date.now()}`,
-                requestId: null
+                requestId: null,
+                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
+                clSource: getVal('cl_sourc')
             }
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -13237,26 +13438,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         })) || 0;
         (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
     }, [ctaType, swiperRef]);
-    // useEffect(() => {
-    //   const handleBeforeUnload = (event: any) => {
-    //     event.preventDefault();
-    //     const item = data?.[activeIndex];
-    //     bffEventReport?.({
-    //       eventInfo: {
-    //         sessionDuration: Math.floor(((new Date() as any) - curTime) / 1000) + '',
-    //         eventSubject: 'sessionCompleted',
-    //         eventDescription: 'Session completed',
-    //         contentId: item?.video?.itemId,
-    //         productId: item?.product?.itemId,
-    //         position: item?.position
-    //       }
-    //     });
-    //   };
-    //   window.addEventListener('beforeunload', handleBeforeUnload);
-    //   return () => {
-    //     window.removeEventListener('beforeunload', handleBeforeUnload);
-    //   };
-    // }, [activeIndex, data, bffEventReport, curTime]);
     useEffect(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {