pb-sxp-ui 1.2.7 → 1.2.9

package/dist/index.js

@@ -651,8 +651,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             '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 = useCallback(({ userInfo, eventInfo }) => {
         // 关闭 BFF 事件上报
@@ -8790,16 +8790,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
 };
 var ExpandableText$1 = 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 = forwardRef((props, ref) => {
-    const { src, onLoad, style, className, loading } = props;
+    const { src, onLoad, style, className, loading, alt = 'image' } = props;
     const [imgSrc, setImgSrc] = useState();
     const imgRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -8810,29 +8802,19 @@ const FormatImage = forwardRef((props, ref) => {
     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]);
+    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` }),
@@ -8841,11 +8823,11 @@ const FormatImage = forwardRef((props, ref) => {
                 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 = memo(FormatImage);
 
@@ -14058,7 +14040,7 @@ const AniLink$1 = (_a) => {
             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 = useMemo(() => {
         var _a, _b;
         const ani = event === null || event === void 0 ? void 0 : event.animation;
@@ -14105,7 +14087,7 @@ var AniLinkComponent = memo(AniLink$1);
  * @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
  *
  */
@@ -14133,11 +14115,10 @@ var interactionRender$1 = [
                 label: '动画',
                 options: [
                     {
-                        label: '由左向右/中间扩散',
+                        label: '默认',
                         value: 1
                     }
                 ],
-                initialValue: 1,
                 fieldProps: {
                     style: {
                         width: '100%'
@@ -14164,7 +14145,7 @@ var interactionRender$1 = [
  * @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
  *
  */
@@ -14184,7 +14165,15 @@ const AniLink = createMaterial(AniLinkComponent, {
                 ctaTitle: {
                     fontSize: 15,
                     color: '#fff',
-                    textAlign: 'left'
+                    textAlign: 'center'
+                }
+            },
+            event: {
+                animation: {
+                    backgroundColor: '#F40082',
+                    name: 1,
+                    delay: 1000,
+                    duration: 2000
                 }
             }
         },
@@ -14491,7 +14480,7 @@ const AniLinkPopup$1 = (_a) => {
             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 = useMemo(() => {
         const ani = event === null || event === void 0 ? void 0 : event.animation;
         if (ani) {
@@ -14523,7 +14512,7 @@ const AniLinkPopup$1 = (_a) => {
         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: {
@@ -14532,14 +14521,6 @@ const AniLinkPopup$1 = (_a) => {
 };
 var AniLinkPopupComponent = 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: '点击事件',
@@ -14553,22 +14534,16 @@ var interactionRender = [
     {
         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%'
@@ -14591,11 +14566,19 @@ var interactionRender = [
     }
 ];
 
+/*
+ * @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
  *
  */
@@ -14614,32 +14597,40 @@ const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
             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,
@@ -15113,7 +15104,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             } },
             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',
@@ -15124,7 +15115,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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 = memo(VideoWidget$2);
 
@@ -15522,7 +15513,7 @@ var Tagbar$1 = memo(Tagbar);
  * @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
  *
  */
@@ -15535,6 +15526,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
+    const [isReload, setIsReload] = useState(new Date().getTime());
+    const skipLinkRef = 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();
@@ -15628,6 +15621,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 });
             }
             else if (document.visibilityState === 'visible') {
+                if (skipLinkRef.current === true) {
+                    setIsReload(new Date().getTime());
+                    skipLinkRef.current = false;
+                }
                 // 页面可见时触发，注意页面初始化时不会触发
                 handleH5EnterLink();
                 if (repCond) {
@@ -15685,7 +15682,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = 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 }));
@@ -15711,7 +15708,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         viewTime,
         tipText,
         resolver,
-        schema
+        schema,
+        isReload
     ]);
     const onExpandableChange = useCallback((v) => {
         setIsShowMore(v);
@@ -15817,6 +15815,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 });
                 setSlideSkipState();
+                skipLinkRef.current = true;
                 window.location.href = window.getJointUtmLink(link);
             }
         }
@@ -15933,7 +15932,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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' },