pb-sxp-ui 1.1.2 → 1.2.0

package/es/core/Pagebuilder/type.d.ts

@@ -26,6 +26,7 @@ export interface PageData {
         privacy_policy_url?: string;
         privacy_title?: string;
         template?: any | null;
+        channels?: string[];
     };
 }
 export interface DataSource {

package/es/core/components/SxpPageRender/FingerSwipeTip/index.d.ts

@@ -2,7 +2,6 @@ import { CSSProperties, FC } from 'react';
 interface IProps {
     imageUrl?: string;
     style?: CSSProperties;
-    duration?: number;
 }
 declare const FingerSwipeTip: FC<IProps>;
 export default FingerSwipeTip;

package/es/core/components/SxpPageRender/FingerSwipeTip/index.js

@@ -1,19 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useIconLink } from '../useIconLink';
 import { useEditor } from '../../../../core/hooks';
-const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
+const FingerSwipeTip = ({ imageUrl, style }) => {
     const [show, setShow] = useState(true);
     const { schema: { sxpPageConf } } = useEditor();
     useEffect(() => {
         setTimeout(() => {
             setShow(false);
-        }, duration);
+        }, 2000);
     }, []);
     const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
     const animationCls = useMemo(() => {
         return show ? 'pb-fadeIn' : 'pb-fadeOut';
     }, [show]);
-    return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
+    return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
         React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
 };
 export default FingerSwipeTip;

package/es/core/components/SxpPageRender/Hashtag/index.js

@@ -4,7 +4,6 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import Scroll from '../../../../materials/sxp/template/components/Scroll';
 import { setFontForText } from '../../../../core/utils/tool';
 const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
-    var _a;
     const [isShowMore, setIsShowMore] = useState(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
     const handleClickTag = (data) => {
@@ -36,8 +35,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         }
         return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
     }, [isShowMore, tags]);
-    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` } },
+    return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
         React.createElement(Scroll, 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) } })))))));
 };

package/es/core/components/SxpPageRender/Modal/index.d.ts

@@ -6,6 +6,9 @@ interface IModalProps {
     padding?: number | string;
     modalStyle?: CSSProperties;
     onClose?: () => void;
+    schema?: any;
+    fullHeight?: number;
+    isFullScreen?: boolean;
 }
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
 export default _default;

package/es/core/components/SxpPageRender/Modal/index.js

@@ -1,11 +1,21 @@
 import { debounce } from 'lodash';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
+import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
-    var _a;
+const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
+    var _a, _b;
+    const touchRef = useRef(null);
+    const fTouchRef = useRef(null);
+    const touchMoveRef = useRef(null);
+    const ref = useRef(null);
+    const MODAL_DEF_TRANS = fullHeight * 0.2;
+    const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
+    const [modalTrans, setModalTrans] = useState(MODAL_DEF_TRANS);
     const [isShow, setIsShow] = useState(false);
     const modalEleRef = useRef(null);
+    const { globalConfig, popupDetailData } = useSxpDataSource();
+    const { schema: _schema } = useEditor();
     useEffect(() => {
         const parentNode = document.getElementById('sxp-render');
         const node = document.getElementById('pb-modal');
@@ -21,6 +31,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     const isOpen = useMemo(() => {
         return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
     }, [visible, popup]);
+    const isScrollFullScreen = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        const schemaData = schema !== null && schema !== void 0 ? schema : _schema;
+        const value = (_c = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.find((value) => (value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
+        return ((_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.event) === null || _e === void 0 ? void 0 : _e.isScrollFullScreen) || false;
+    }, [popup, schema, _schema]);
     useEffect(() => {
         if (isOpen) {
             setIsShow(true);
@@ -28,6 +44,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
         else {
             setTimeout(() => {
                 setIsShow(false);
+                setModalTrans(MODAL_DEF_TRANS);
             }, popup === null || popup === void 0 ? void 0 : popup.duration);
         }
     }, [isOpen, popup]);
@@ -36,13 +53,60 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     const handleClose = debounce(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, 300);
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        fTouchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        event.stopPropagation();
+        requestAnimationFrame(() => {
+            var _a;
+            if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+                const currentY = event.touches[0].clientY;
+                const diff = touchRef.current - currentY;
+                touchRef.current = currentY;
+                const ts = modalTrans - diff;
+                if (ts > 0) {
+                    setModalTrans(ts);
+                }
+            }
+        });
+    };
+    const handleTouchEnd = (event) => {
+        var _a;
+        event.stopPropagation();
+        if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+            const diff = fTouchRef.current - touchRef.current;
+            if (diff > 0) {
+                setModalTrans(0);
+            }
+            else if (modalTrans < MODAL_DEF_TRANS && diff < 0) {
+                setModalTrans(MODAL_DEF_TRANS);
+            }
+            else if (modalTrans >= MODAL_DEF_TRANS && diff < 0) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        }
+        touchMoveRef.current = false;
+    };
     return ReactDOM.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-        React.createElement("div", { className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, onClick: (e) => {
+        React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign({ padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, (isScrollFullScreen && {
+                transform: `translateY(${modalTrans}px)`
+            })), onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-            } },
+            } }, (isScrollFullScreen && {
+            onTouchMove: handleTouchMove,
+            onTouchStart: handleTouchStart,
+            onTouchEnd: handleTouchEnd
+        })),
             React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
-                React.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
-            children)))), modalEleRef.current);
+                React.createElement("img", { src: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _b !== void 0 ? _b : closeIcon, alt: 'close', className: 'modal-icon' })),
+            React.createElement("div", { ref: ref, style: {
+                    height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                    overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
+                } }, children))))), modalEleRef.current);
 };
 export default memo(Modal);

package/es/core/components/SxpPageRender/Navbar.js

@@ -6,7 +6,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
     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: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
+        React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
                 __html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
             } })));
 };

package/es/core/components/SxpPageRender/Popup/index.js

@@ -52,7 +52,7 @@ const Popup = () => {
                 const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
                 const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
                 const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
-                return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
+                return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
             }
             else {
                 return React.createElement(React.Fragment, null);

package/es/core/components/SxpPageRender/RenderCard.d.ts

@@ -6,6 +6,7 @@ interface IRenderCardProps {
     rec: RecItemType;
     tempMap?: Record<string, any>;
     resolver: any;
+    includesCtaType?: string[];
 }
 declare const _default: React.NamedExoticComponent<IRenderCardProps>;
 export default _default;

package/es/core/components/SxpPageRender/RenderCard.js

@@ -2,10 +2,10 @@ import React, { memo, useMemo } from 'react';
 import './index.less';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import { useEditor } from '../../../core/hooks';
-const RenderCard = ({ rec, index, tempMap, resolver }) => {
+const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
     const { schema } = useEditor();
     const renderComp = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         if (!(rec === null || rec === void 0 ? void 0 : rec.video))
             return null;
         let cta = null;
@@ -19,20 +19,24 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
             cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
         }
         const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-        if ((((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDiro' && !((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct)) ||
-            (((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'Commodity' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
-            (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'CommodityDiroNew' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
-            (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodity' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
-            (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiro' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length)) ||
-            (((_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type) === 'MultiCommodityDiroNew' && !((_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v.length))) {
+        if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
+            return;
+        if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
+            return;
+        if ((((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'CommodityDiro' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
+            (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'Commodity' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
+            (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'CommodityDiroNew' && !((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProduct)) ||
+            (((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.type) === 'MultiCommodity' && !((_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length)) ||
+            (((_s = value === null || value === void 0 ? void 0 : value.item) === null || _s === void 0 ? void 0 : _s.type) === 'MultiCommodityDiro' && !((_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u.length)) ||
+            (((_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.type) === 'MultiCommodityDiroNew' && !((_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindProducts) === null || _x === void 0 ? void 0 : _x.length))) {
             return null;
         }
         if (value && resolver) {
-            const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
+            const t = resolver[(_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.type];
             const Component = withBindDataSource(t);
-            const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
-            const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
-            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
+            const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
+            const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
+            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
         }
         else {
             return null;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -221,23 +221,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_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, _j;
-            const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-            if (!isPause)
-                handlePause();
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (hls)
                 hls === null || hls === void 0 ? void 0 : hls.destroy();
             setIsLoadFinish(false);
-            (_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);
+            (_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);
         };
-    }, [isActive, videoId, rec, handlePause]);
+    }, [isActive, videoId, rec]);
     useEffect(() => {
         var _a, _b;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -169,7 +169,7 @@ export default function WaterfallList(_a) {
         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 = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+            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' } },

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -277,7 +277,7 @@ export default function WaterfallList(_a) {
         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 = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+            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' } },

package/es/core/components/SxpPageRender/index.d.ts

@@ -37,9 +37,9 @@ export interface ISxpPageRenderProps {
         swipeTipOffset?: number;
         consent?: any[];
         videoPlayIcon?: string;
-        isShowMute?: boolean;
-        bottomInfoDist?: number;
-        swiperTipAniDur?: number;
+        popupCloseIcon?: string;
+        openSlideSkip?: boolean;
+        slideSkipStartTime?: number;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/es/core/components/SxpPageRender/index.js

@@ -20,7 +20,7 @@ import './index.less';
 import { useEventReport } from '../../../core/hooks/useEventReport';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import Tagbar from './Tagbar';
-import { getFeUserId } from '../../../core/utils/localStore';
+import { getFeUserId, getSlideSkipState, setSlideSkipState } from '../../../core/utils/localStore';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { schema } = useEditor();
@@ -30,7 +30,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
+    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();
     const isShowFingerTip = useMemo(() => {
@@ -78,7 +78,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     useEffect(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             const repCond = !openHashtag && !isShowConsent;
             if (document.visibilityState === 'hidden') {
                 if (repCond) {
@@ -115,7 +115,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         position: activeIndex + '',
                         fromKName,
                         fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                        ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : ''
+                        ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
+                        traceInfo: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : ''
                     }
                 });
             }
@@ -219,17 +220,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             };
     }, [isShowMore]);
     const renderBottom = useCallback((rec, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         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', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
+                React.createElement("div", { className: 'clc-sxp-bottom' },
                     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, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                     React.createElement("div", null,
-                        React.createElement(ExpandableText, { 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(Hashtag, { 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(ExpandableText, { 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(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
+                        React.createElement(Hashtag, { 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(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
         }
         return null;
     }, [
@@ -282,8 +285,36 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     };
+    const handleSlideSkip = (item, position) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        if (isPreview)
+            return;
+        const t = new Date() - curTime.current;
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.openSlideSkip) && t >= ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.slideSkipStartTime) !== null && _a !== void 0 ? _a : 0) && getSlideSkipState() && item) {
+            const link = ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.link) || ((_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.link) || ((_g = item === null || item === void 0 ? void 0 : item.product) === null || _g === void 0 ? void 0 : _g.link);
+            const product = (item === null || item === void 0 ? void 0 : item.product) || ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]);
+            if (link) {
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'swipeToWeb',
+                        eventDescription: 'User swiped to web',
+                        productId: (_l = product === null || product === void 0 ? void 0 : product.itemId) !== null && _l !== void 0 ? _l : '',
+                        productName: (_m = product === null || product === void 0 ? void 0 : product.title) !== null && _m !== void 0 ? _m : '',
+                        price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                        productCollection: (_o = product === null || product === void 0 ? void 0 : product.collection) !== null && _o !== void 0 ? _o : '',
+                        contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                        position: position + '',
+                        contentId: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
+                        traceInfo: (_r = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _r !== void 0 ? _r : ''
+                    }
+                });
+                setSlideSkipState();
+                window.location.href = window.getJointUtmLink(link);
+            }
+        }
+    };
     const handleScrollEvent = (swiper) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         viewTime.current = new Date();
         const item = data[swiper.previousIndex];
         if (!item)
@@ -295,26 +326,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     eventDescription: 'User scroll down',
                     contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
                     productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                    requestId: null
+                    requestId: null,
+                    traceInfo: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.traceInfo) !== null && _f !== void 0 ? _f : ''
                 }
             });
             handleReportViewImageEnd(item);
+            handleSlideSkip(item, swiper.previousIndex);
         }
         else {
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    contentId: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                    productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    requestId: null
+                    contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    productId: (_k = (_j = item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
+                    requestId: null,
+                    traceInfo: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : ''
                 }
             });
             handleReportViewImageEnd(item);
         }
         handleReportProductView(item);
         const curItem = data[swiper.activeIndex];
-        if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
+        if (!((_o = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _o === void 0 ? void 0 : _o.url) && !((_p = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _p === void 0 ? void 0 : _p.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                 eventName: 'ProductView'
             });
@@ -398,7 +432,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         React.createElement(Tagbar, { 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)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : 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)}%` } })) : null,
         React.createElement(Swiper, { style: {
                 marginTop: tagHeight
             }, ref: swiperRef, onSlideChange: () => {
@@ -422,13 +456,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 }
             }, direction: 'vertical', height: height },
-            ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
+            React.createElement(ToggleButton, { 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, 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))));
 };

package/es/core/components/SxpPageRender/typing.d.ts

@@ -13,6 +13,7 @@ export type RecItemType = {
     isCollected?: boolean;
     hashTags: string[];
     tags: string[];
+    multiCheckIndex?: number;
 };
 export type CTAInfoType = {
     traceInfo: string;

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -80,6 +80,7 @@ export interface ISxpDataSourceContext {
     isShowConsent?: boolean;
     selectTag?: string;
     setSelectTag?: React.Dispatch<React.SetStateAction<string>>;
+    globalConfig?: ISxpPageRenderProps['globalConfig'];
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {

package/es/core/context/SxpDataSourceProvider.js

@@ -90,8 +90,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         };
         if (utmVal) {
             const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+                var _a, _b;
                 const key = val.split('=')[0];
-                return UTM_KEYS.includes(key);
+                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : UTM_KEYS)) === null || _b === void 0 ? void 0 : _b.includes(key);
             })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
@@ -178,8 +179,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             return;
         try {
             const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
+                var _a, _b;
                 const key = val.split('=')[0];
-                return UTM_KEYS.includes(key);
+                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : UTM_KEYS)) === null || _b === void 0 ? void 0 : _b.includes(key);
             })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
             setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
@@ -317,7 +319,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag,
             isShowConsent,
             selectTag,
-            setSelectTag
+            setSelectTag,
+            globalConfig
         } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
         rtcList,
         mutateLike: bffMutateLike,

package/es/core/utils/localStore.d.ts

@@ -1,6 +1,9 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
 export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
 export declare const AGREE_POLICY = "AGREE_POLICY";
+export declare const SLIDE_SKIP_STATE = "SLIDE_SKIP_STATE";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
 export declare const getFeUserId: () => boolean;
+export declare const getSlideSkipState: () => boolean;
+export declare const setSlideSkipState: () => void;

package/es/core/utils/localStore.js

@@ -3,6 +3,7 @@ import { uuid } from './tool';
 export const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
 export const FAKE_USER_STATE = 'FAKE_USER_STATE';
 export const AGREE_POLICY = 'AGREE_POLICY';
+export const SLIDE_SKIP_STATE = 'SLIDE_SKIP_STATE';
 export const storeAndLoadFeUserId = () => {
     let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
     if (isEmpty(fakeUserId)) {
@@ -21,3 +22,10 @@ export const getFeUserId = () => {
     }
     return isEmpty(fakeUserState);
 };
+export const getSlideSkipState = () => {
+    const slideSkipState = window.localStorage.getItem(SLIDE_SKIP_STATE);
+    return isEmpty(slideSkipState);
+};
+export const setSlideSkipState = () => {
+    window.localStorage.setItem(SLIDE_SKIP_STATE, 'true');
+};