pb-sxp-ui 1.2.7 → 1.2.9

package/dist/pb-ui.js

@@ -666,8 +666,8 @@
                 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
                 themeTag: themeTag.current
             });
-            setRtcList(getFilterRecList(data));
-            setCacheRtcList(getFilterRecList(data));
+            setRtcList(rtcList.concat(getFilterRecList(data)));
+            setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
@@ -8805,16 +8805,8 @@
     };
     var ExpandableText$1 = React.memo(ExpandableText);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-03-20 10:27:31
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-31 17:54:50
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
-     *
-     */
     const FormatImage = React.forwardRef((props, ref) => {
-        const { src, onLoad, style, className, loading } = props;
+        const { src, onLoad, style, className, loading, alt = 'image' } = props;
         const [imgSrc, setImgSrc] = React.useState();
         const imgRef = React.useRef(null);
         React.useImperativeHandle(ref, () => ({
@@ -8825,29 +8817,19 @@
         React.useEffect(() => {
             setImgSrc(src);
         }, [src]);
-        // useEffect(() => {
-        //   let observer: any = null;
-        //   const { current } = imgRef;
-        //   if (current) {
-        //     observer = new IntersectionObserver(
-        //       (entries) => {
-        //         entries.forEach((entry) => {
-        //           if (entry.isIntersecting) {
-        //             setImgSrc(src);
-        //             observer.unobserve(current);
-        //           }
-        //         });
-        //       },
-        //       { threshold: 0.1 } // 触发阈值，可根据需要调整
-        //     );
-        //     observer.observe(current);
-        //   }
-        //   return () => {
-        //     if (observer && current) {
-        //       observer.unobserve(current);
-        //     }
-        //   };
-        // }, [src]);
+        React.useEffect(() => {
+            const onShow = () => {
+                var _a, _b;
+                if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
+                    imgRef.current.src = '';
+                    imgRef.current.src = src;
+                }
+            };
+            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            return () => {
+                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            };
+        }, [src]);
         return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
             React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
             React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -8856,11 +8838,11 @@
                     if (imgRef.current)
                         imgRef.current.style.display = 'block';
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-                }, alt: 'image' }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
+                }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
                 if (imgRef.current)
                     imgRef.current.style.display = 'block';
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            }, alt: 'image' }))));
+            }, alt: alt }))));
     });
     var FormatImage$1 = React.memo(FormatImage);
 
@@ -14073,7 +14055,7 @@ Made in Italy` })));
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
         };
-        const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+        const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
         const aniTimStyle = React.useMemo(() => {
             var _a, _b;
             const ani = event === null || event === void 0 ? void 0 : event.animation;
@@ -14120,7 +14102,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-07-05 14:08:41
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-09 14:34:49
+     * @LastEditTime: 2024-08-02 16:22:39
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
@@ -14148,11 +14130,10 @@ Made in Italy` })));
                     label: '动画',
                     options: [
                         {
-                            label: '由左向右/中间扩散',
+                            label: '默认',
                             value: 1
                         }
                     ],
-                    initialValue: 1,
                     fieldProps: {
                         style: {
                             width: '100%'
@@ -14179,7 +14160,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-05 19:27:54
+     * @LastEditTime: 2024-08-02 17:03:34
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\material.tsx
      *
      */
@@ -14199,7 +14180,15 @@ Made in Italy` })));
                     ctaTitle: {
                         fontSize: 15,
                         color: '#fff',
-                        textAlign: 'left'
+                        textAlign: 'center'
+                    }
+                },
+                event: {
+                    animation: {
+                        backgroundColor: '#F40082',
+                        name: 1,
+                        delay: 1000,
+                        duration: 2000
                     }
                 }
             },
@@ -14506,7 +14495,7 @@ Made in Italy` })));
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
         };
-        const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+        const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
         const aniTimStyle = React.useMemo(() => {
             const ani = event === null || event === void 0 ? void 0 : event.animation;
             if (ani) {
@@ -14538,7 +14527,7 @@ Made in Italy` })));
             React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
                 React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
             React.createElement(Img$1, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-            (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+            (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                     __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                 } })),
             React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
@@ -14547,14 +14536,6 @@ Made in Italy` })));
     };
     var AniLinkPopupComponent = React.memo(AniLinkPopup$1);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-07-04 15:28:39
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-05 17:46:42
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\interactionRender.tsx
-     *
-     */
     var interactionRender = [
         {
             title: '点击事件',
@@ -14568,22 +14549,16 @@ Made in Italy` })));
         {
             title: '动画效果',
             child: [
-                {
-                    type: 'Color',
-                    name: ['animation', 'backgroundColor'],
-                    label: '动画颜色'
-                },
                 {
                     type: 'Select',
                     name: ['animation', 'name'],
                     label: '动画',
                     options: [
                         {
-                            label: '由左向右/中间扩散',
+                            label: '默认',
                             value: 1
                         }
                     ],
-                    initialValue: 1,
                     fieldProps: {
                         style: {
                             width: '100%'
@@ -14606,11 +14581,19 @@ Made in Italy` })));
         }
     ];
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-24 14:58:40
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-08-02 17:45:51
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\material.tsx
+     *
+     */
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-08 14:36:05
+     * @LastEditTime: 2024-08-02 17:09:14
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\material.tsx
      *
      */
@@ -14629,32 +14612,40 @@ Made in Italy` })));
                 ctaTempStyles: {
                     img: {
                         borderRadius: 3,
-                        width: 76,
-                        height: 76,
-                        marginBottom: 10
+                        width: 108,
+                        height: 108,
+                        marginBottom: 0
                     },
                     title: {
-                        fontSize: 12,
+                        fontSize: 14,
                         color: '#000',
-                        textAlign: 'left'
+                        textAlign: 'left',
+                        lineHeight: 2.6
                     },
                     ctaTitle: {
-                        fontSize: 10,
+                        width: 108,
+                        height: 22,
+                        fontSize: 12,
                         color: '#fff',
                         textAlign: 'center',
-                        width: 76,
-                        height: 20,
                         backgroundColor: 'rgba(0,0,0,1)'
                     }
+                },
+                event: {
+                    animation: {
+                        name: 1,
+                        delay: 1000,
+                        duration: 2000
+                    }
                 }
             },
             style: {
-                width: 90,
-                height: 160,
+                width: 120,
+                height: 185,
                 borderRadius: 3,
                 backgroundColor: 'rgba(255,255,255,1)',
                 padding: 7,
-                margin: 10
+                margin: 15
             }
         },
         w: 100,
@@ -15128,7 +15119,7 @@ Made in Italy` })));
                 } },
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                     React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
+                    isPauseVideo && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))),
             renderPoster,
             renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
                 position: 'relative',
@@ -15139,7 +15130,7 @@ Made in Italy` })));
             React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
             renderPoster,
             renderLoading,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
+            isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
     };
     var VideoWidget$3 = React.memo(VideoWidget$2);
 
@@ -15537,7 +15528,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-01 17:42:09
+     * @LastEditTime: 2024-08-02 18:34:27
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -15550,6 +15541,8 @@ Made in Italy` })));
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.useState(false);
+        const [isReload, setIsReload] = React.useState(new Date().getTime());
+        const skipLinkRef = React.useRef(false);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
         const { productView } = useEventReport();
@@ -15643,6 +15636,10 @@ Made in Italy` })));
                     });
                 }
                 else if (document.visibilityState === 'visible') {
+                    if (skipLinkRef.current === true) {
+                        setIsReload(new Date().getTime());
+                        skipLinkRef.current = false;
+                    }
                     // 页面可见时触发，注意页面初始化时不会触发
                     handleH5EnterLink();
                     if (repCond) {
@@ -15700,7 +15697,7 @@ Made in Italy` })));
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+                return (React.createElement(VideoWidget$3, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
             }
             if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
                 return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -15726,7 +15723,8 @@ Made in Italy` })));
             viewTime,
             tipText,
             resolver,
-            schema
+            schema,
+            isReload
         ]);
         const onExpandableChange = React.useCallback((v) => {
             setIsShowMore(v);
@@ -15832,6 +15830,7 @@ Made in Italy` })));
                         }
                     });
                     setSlideSkipState();
+                    skipLinkRef.current = true;
                     window.location.href = window.getJointUtmLink(link);
                 }
             }
@@ -15948,7 +15947,7 @@ Made in Italy` })));
                     renderBottom(rec, index),
                     renderLikeButton(rec, index)))))));
             });
-        }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
+        }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },