pb-sxp-ui 1.0.77 → 1.0.79

package/dist/pb-ui.js

@@ -642,6 +642,12 @@
                 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;
             });
@@ -11844,7 +11850,7 @@ Made in Italy` })));
     	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] = React.useState(false);
@@ -11908,29 +11914,8 @@ Made in Italy` })));
                 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]);
         React.useEffect(() => {
-            if (imgDom.current === null || src === '' || isImgShow === false) {
+            if (imgDom.current === null || src === '') {
                 return;
             }
             const img = new Image();
@@ -11947,8 +11932,7 @@ Made in Italy` })));
                 });
                 setIsLoading(true);
             };
-            // imgDom.current.setSrc(img.src);
-            imgDom.current.src = img.src;
+            imgDom.current.setSrc(img.src);
         }, [src, showVideo, firstFrameSrc, isImgShow]);
         React.useEffect(() => {
             // 通过宽度比例获取图片高度
@@ -12000,12 +11984,12 @@ Made in Italy` })));
                 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();
@@ -12216,7 +12200,7 @@ Made in Italy` })));
                 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',
@@ -12234,11 +12218,221 @@ Made in Italy` })));
 
     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] = React.useState(false);
+        const imgDom = React.useRef(null);
+        const ref = React.useRef(null);
+        const videoDom = React.useRef(null);
+        const canvasRef = React.useRef(null);
+        const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+        const src = React.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 = React.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 = React.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]);
+        React.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;
+        };
+        React.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] = React.useState();
+        const [data, setData] = React.useState();
+        const [isLoadingData, setIsLoadingData] = React.useState(false);
+        const containerRef = React.useRef(null);
+        const [isLoadMore, setIsLoadMore] = React.useState(false);
+        React.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]);
+        React.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
      *
      */
@@ -12332,7 +12526,7 @@ Made in Italy` })));
                 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 = React.memo(WaterFall);
 
@@ -12856,7 +13050,7 @@ Made in Italy` })));
      *
      */
     const Picture = (props) => {
-        const { src, height, imgUrlsPostConfig } = props;
+        const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
         const blur = React.useMemo(() => {
             return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
         }, [imgUrlsPostConfig]);
@@ -12881,7 +13075,7 @@ Made in Italy` })));
             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%',
@@ -12898,7 +13092,7 @@ Made in Italy` })));
      * @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 }) => {
@@ -12918,16 +13112,20 @@ Made in Italy` })));
                 }
             }
             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 = React.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 = React.memo(PictureGroup$2);
@@ -13147,7 +13345,7 @@ Made in Italy` })));
      * @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
      *
      */
@@ -13170,6 +13368,7 @@ Made in Italy` })));
             return data.length > 0 && !loading && getFeUserId();
         }, [data, loading]);
         const handleH5EnterLink = React.useCallback(() => {
+            var _a, _b;
             if (data.length <= 0) {
                 return;
             }
@@ -13192,7 +13391,9 @@ Made in Italy` })));
                     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({
@@ -13252,26 +13453,6 @@ Made in Italy` })));
             })) || 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]);
         React.useEffect(() => {
             const item = data === null || data === void 0 ? void 0 : data[activeIndex];
             const visibleChange = () => {