pb-sxp-ui 1.2.1 → 1.2.2

package/dist/pb-ui.js

@@ -8981,7 +8981,7 @@
                                             width: '100%',
                                             objectFit: 'cover',
                                             display: 'block',
-                                            objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                            objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                         }, src: src }))));
                         }))))),
                 !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
@@ -9709,7 +9709,7 @@ Made in Italy` })));
                                     width: '100%',
                                     objectFit: 'cover',
                                     display: 'block',
-                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                 }, src: src }))));
                 }))),
                 !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
@@ -10095,7 +10095,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-16 14:50:13
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-24 18:13:14
+     * @LastEditTime: 2024-07-04 18:13:23
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
      *
      */
@@ -10116,7 +10116,7 @@ Made in Italy` })));
         }, [src]);
         return (React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
             React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
-                React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: src }))));
+                React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? translateY + 50 : 50}%` }, style)), src: src }))));
     };
     var Img$1 = React.memo(Img);
 
@@ -10286,7 +10286,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-27 09:55:59
+     * @LastEditTime: 2024-07-04 17:47:52
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
@@ -10531,6 +10531,11 @@ Made in Italy` })));
                     label: '对齐',
                     type: 'TextAlign',
                     name: ['props', 'ctaTempStyles', 'ctaTitle']
+                },
+                {
+                    label: '间距',
+                    type: 'TextSpace',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
                 }
             ]
         }
@@ -10843,7 +10848,7 @@ Made in Italy` })));
                     overflow: 'hidden'
                 }) },
                 React.createElement("div", null,
-                    React.createElement("div", { className: (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) ? styles$7['one-line-ellipsis'] : styles$7['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                    React.createElement("div", { className: styles$7['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
                             __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                         } }),
                     (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: styles$7['one-line-ellipsis'], dangerouslySetInnerHTML: {
@@ -11671,7 +11676,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-27 10:19:28
+     * @LastEditTime: 2024-07-04 18:34:18
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Navbar.tsx
      *
      */
@@ -11680,7 +11685,7 @@ Made in Italy` })));
         const { waterFallData, setOpenHashtag } = useSxpDataSource();
         return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
             React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
-            React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
+            React.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
                     __html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
                 } })));
     };
@@ -13275,7 +13280,7 @@ Made in Italy` })));
             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;
+                window.location.href = window.getJointUtmLink((_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' } },
@@ -13510,7 +13515,7 @@ Made in Italy` })));
             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;
+                window.location.href = window.getJointUtmLink((_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' } },
@@ -13663,7 +13668,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-30 10:13:13
+     * @LastEditTime: 2024-07-04 18:38:10
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
      *
      */
@@ -13683,7 +13688,8 @@ Made in Italy` })));
                 textStyles: {
                     hashTagTitle: {
                         fontSize: 16,
-                        color: '#000'
+                        color: '#000',
+                        textAlign: 'center'
                     },
                     hashTagDesc: {
                         fontSize: 12,
@@ -13923,16 +13929,17 @@ Made in Italy` })));
     var styles$1 = {"animated-button":"index-module_animated-button__lqTbg","gradientCover":"index-module_gradientCover__5iUag"};
 
     const AniLink$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
         const { ctaEvent, setPopupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
+        const [visible, setVisible] = React.useState(false);
         const ref = React.useRef(null);
         const isOnScreen = useOnScreen(ref);
         const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
         const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
         const handleTo = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
@@ -13940,12 +13947,18 @@ Made in Italy` })));
             }, recData, item, index);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
             if (isExternalLink) {
-                jumpToWeb(recData, product, cta, index);
+                const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
+                if (link) {
+                    jumpToWeb(recData, product, cta, index);
+                    window.location.href = window.getJointUtmLink(link);
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-            onClick === null || onClick === void 0 ? void 0 : onClick();
         };
-        const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
-        const aniStyle = React.useMemo(() => {
+        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;
             if (ani) {
@@ -13967,10 +13980,19 @@ Made in Italy` })));
                 }, recData, product, index);
             }
         }, [isOnScreen]);
-        return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { display: 'flex', alignItems: 'center' }) }, props, { className: `${styles$1['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
-            React.createElement("div", { className: 'one-line-ellipsis', style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
-                    __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                } })));
+        React.useEffect(() => {
+            if (isOnScreen) {
+                setVisible(true);
+            }
+        }, [isOnScreen]);
+        const aniNamStyle = React.useMemo(() => {
+            if (!visible)
+                return null;
+            return styles$1['animated-button'];
+        }, [visible]);
+        return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign(Object.assign({}, style), ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: `${(_l = style === null || style === void 0 ? void 0 : style.height) !== null && _l !== void 0 ? _l : 0}px` }) }, props, { className: `${aniNamStyle} ${css.css(aniTimStyle)} one-line-ellipsis`, onClick: handleTo, dangerouslySetInnerHTML: {
+                __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+            } })));
     };
     var AniLinkComponent = React.memo(AniLink$1);
 
@@ -14333,19 +14355,23 @@ Made in Italy` })));
         }
     ];
 
-    var styles = {"animated-button":"index-module_animated-button__qI1lz","gradientCover":"index-module_gradientCover__nD6d9","tow-line-ellipsis":"index-module_tow-line-ellipsis__GKFXr","modal-icon-wrapper":"index-module_modal-icon-wrapper__tu3BY","modal-icon-wrapper-img":"index-module_modal-icon-wrapper-img__4b7qZ"};
+    var styles = {"aniLinkPopup":"index-module_aniLinkPopup__YT7kj","animated-fadeIn":"index-module_animated-fadeIn__8ZCbq","fadeIn":"index-module_fadeIn__2E-dk","animated-fadeOut":"index-module_animated-fadeOut__iK4oc","fadeOut":"index-module_fadeOut__MgevT","tow-line-ellipsis":"index-module_tow-line-ellipsis__GKFXr","modal-icon-wrapper":"index-module_modal-icon-wrapper__tu3BY","modal-icon-wrapper-img":"index-module_modal-icon-wrapper-img__4b7qZ"};
 
     const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
     const AniLinkPopup$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
+        style === null || style === void 0 ? true : delete style.transform;
         const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
-        const [visible, setVisible] = React.useState(true);
+        const ref = React.useRef(null);
+        const isOnScreen = useOnScreen(ref);
+        const [visible, setVisible] = React.useState(false);
+        const [startAni, setStartAni] = React.useState(true);
         const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
         const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
         const handleTo = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
@@ -14353,42 +14379,54 @@ Made in Italy` })));
             }, recData, item, index);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
             if (isExternalLink) {
-                jumpToWeb(recData, product, cta, index);
+                const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
+                if (link) {
+                    jumpToWeb(recData, product, cta, index);
+                    window.location.href = window.getJointUtmLink(link);
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-            onClick === null || onClick === void 0 ? void 0 : onClick();
         };
-        const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
-        const aniStyle = React.useMemo(() => {
-            var _a, _b;
+        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) {
-                const { delay, duration, backgroundColor } = ani;
+                const { delay, duration } = ani;
                 return {
-                    ':after': {
-                        animationDelay: `${(_a = delay / 1000) !== null && _a !== void 0 ? _a : 0}s`,
-                        animationDuration: `${(_b = duration / 1000) !== null && _b !== void 0 ? _b : 0}s`,
-                        backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent'}`
-                    }
+                    animationDelay: `${delay ? delay / 1000 : 0}s`,
+                    animationDuration: `${duration ? duration / 1000 : 0}s`
                 };
             }
         }, [event === null || event === void 0 ? void 0 : event.animation]);
         const src = (_q = (_p = (_o = (_l = product === null || product === void 0 ? void 0 : product.cover) !== null && _l !== void 0 ? _l : (_m = product === null || product === void 0 ? void 0 : product.homePage) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _p !== void 0 ? _p : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _q !== void 0 ? _q : bottom_image;
         const onClose = (event) => {
             event.stopPropagation();
-            setVisible(false);
+            setStartAni(false);
         };
+        React.useEffect(() => {
+            if (isOnScreen) {
+                setVisible(true);
+            }
+        }, [isOnScreen]);
+        const aniNamStyle = React.useMemo(() => {
+            if (!visible)
+                return null;
+            return startAni ? styles['animated-fadeIn'] : styles['animated-fadeOut'];
+        }, [visible, startAni]);
         return (React.createElement(React.Fragment, null, isTel ? (React.createElement("div", { style: {
                 height: '40px',
                 lineHeight: '40px',
                 paddingLeft: '6px'
-            } }, "Cta Title")) : (React.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: 'absolute', right: 0, bottom: 0, zIndex: 1000, display: visible ? 'block' : 'none' }) }, props, { className: `${styles['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
-            React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_r = style === null || style === void 0 ? void 0 : style['padding']) !== null && _r !== void 0 ? _r : 0 } },
-                React.createElement("img", { src: (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _s !== void 0 ? _s : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            } }, "Cta Title")) : (React.createElement("div", Object.assign({ ref: ref }, props, { className: `${css.css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle}  ${css.css(aniTimStyle)}`, onClick: handleTo }),
+            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 }),
             React.createElement("div", { hidden: !!recData && !(product === null || product === void 0 ? void 0 : product.title), className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                    __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    __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: 'one-line-ellipsis', style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
+            React.createElement("div", { className: '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: {
                     __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                 } })))));
     };
@@ -14834,20 +14872,23 @@ Made in Italy` })));
             (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
             (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
             return () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+                if (!isPause)
+                    handlePause();
                 if (hls)
                     hls === null || hls === void 0 ? void 0 : hls.destroy();
                 setIsLoadFinish(false);
-                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedmetadata);
-                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadeddata', handLoadeddata);
-                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('play', handleStartPlay);
-                (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('playing', handlePlaying);
-                (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('pause', handlePause);
-                (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('ended', handlePlay);
-                (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('canplay', handlePlay);
-                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('waiting', handleWaiting);
+                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
+                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
+                (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
+                (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
+                (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
+                (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
+                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
+                (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
             };
-        }, [isActive, videoId, rec]);
+        }, [isActive, videoId, rec, handlePause]);
         React.useEffect(() => {
             var _a, _b;
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -14993,23 +15034,23 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-13 10:53:56
+     * @LastEditTime: 2024-07-11 18:19:29
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
      *
      */
-    const FingerSwipeTip = ({ imageUrl, style }) => {
+    const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
         const [show, setShow] = React.useState(true);
         useEditor();
         React.useEffect(() => {
             setTimeout(() => {
                 setShow(false);
-            }, 2000);
+            }, duration);
         }, []);
         const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
         const animationCls = React.useMemo(() => {
             return show ? 'pb-fadeIn' : 'pb-fadeOut';
         }, [show]);
-        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
+        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
             React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
     };
 
@@ -15113,11 +15154,12 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-26 18:52:46
+     * @LastEditTime: 2024-07-09 18:47:05
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
      *
      */
     const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
+        var _a;
         const [isShowMore, setIsShowMore] = React.useState(false);
         const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
         const handleClickTag = (data) => {
@@ -15149,7 +15191,8 @@ Made in Italy` })));
             }
             return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
         }, [isShowMore, tags]);
-        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
+        console.log(hashTagStyle, '111');
+        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
             React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
                 React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
     };
@@ -15353,7 +15396,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-22 15:57:31
+     * @LastEditTime: 2024-07-24 14:59:23
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -15559,18 +15602,18 @@ Made in Italy` })));
                 };
         }, [isShowMore]);
         const renderBottom = React.useCallback((rec, index) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(React.Fragment, null,
                     ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                    React.createElement("div", { className: 'clc-sxp-bottom' },
+                    React.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
                         React.createElement(Nudge, { nudge: nudge }),
                         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                         React.createElement("div", null,
-                            React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
+                            React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
-                            React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
+                            React.createElement(Hashtag$1, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
                     React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
             }
             return null;
@@ -15752,7 +15795,7 @@ Made in Italy` })));
                     React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
             }
             return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
-                return (React.createElement(SwiperSlide, { key: index, virtualIndex: index }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (React.createElement("div", { style: {
+                return (React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden' } }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (React.createElement("div", { style: {
                         height,
                         width: containerWidth,
                         display: 'flex',
@@ -15775,7 +15818,7 @@ Made in Italy` })));
             React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                     top: minusHeight
                 } }),
-            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
+            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
             React.createElement(Swiper, { style: {
                     marginTop: tagHeight
                 }, ref: swiperRef, onSlideChange: () => {
@@ -15800,13 +15843,13 @@ Made in Italy` })));
                         }
                     }
                 }, direction: 'vertical', height: height },
-                React.createElement(ToggleButton$1, { style: {
+                ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
                         position: 'fixed',
                         visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
                         zIndex: 999,
                         [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
                         [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })),
                 renderView),
             React.createElement(WaterFall$1, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
     };