pb-sxp-ui 1.0.87 → 1.0.89

package/dist/pb-ui.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', '@ant-design/pro-components', 'react-dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.proComponents, global.ReactDOM));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, proComponents, ReactDOM) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom'), require('hls.js')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom', 'hls.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM, global.Hls));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM, Hls) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -430,6 +430,70 @@
         SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
     })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-06-13 15:16:53
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-19 14:13:50
+     * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
+     *
+     */
+    const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+        const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
+        const channelObj = React.useMemo(() => {
+            const queryString = location.search.slice(1);
+            const params = qs.parse(queryString.replace(/\+/g, '%2B'));
+            for (const key in params) {
+                params[key] = params[key].replace(/%2B/g, '+');
+            }
+            return params;
+        }, []);
+        const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
+        React.useEffect(() => {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'privacyEnter',
+                    eventDescription: 'User enter privacy page',
+                    utmSource: getUtmValue('utm_source'),
+                    utmMedium: getUtmValue('utm_medium'),
+                    utmCampaign: getUtmValue('utm_campaign'),
+                    utmId: getUtmValue('utm_id'),
+                    utmContent: getUtmValue('utm_content'),
+                    clSource: getUtmValue('cl_source'),
+                    enterTime: `${Date.now()}`,
+                    enterUrl: window.location.href,
+                    rtc: null,
+                    requestId: null,
+                    sessionID: null
+                }
+            });
+        }, []);
+        const handleAgree = () => {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'userConsent',
+                    eventDescription: '用户授权【操作结果】',
+                    consentResult: '0',
+                    consentTags: '["系统运营"]',
+                    rtc: null,
+                    requestId: null,
+                    sessionID: null
+                }
+            });
+            setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
+            window.localStorage.setItem(AGREE_POLICY, 'yes');
+        };
+        return (React.createElement("div", { className: 'consent-bg' },
+            React.createElement("div", { className: 'consent' },
+                React.createElement("div", { className: 'consent-col' },
+                    React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
+                    React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
+                React.createElement("div", { className: 'consent-col' },
+                    React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
+                    React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
+    };
+    var Consent$3 = React.memo(Consent$2);
+
     const SxpDataSourceContext = React.createContext({
         rtcList: [],
         tagList: []
@@ -441,6 +505,7 @@
     const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
     const DEFAULT_TAG = 'FOR U';
     const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
+        var _a, _b, _c;
         const [rtcList, setRtcList] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
@@ -507,10 +572,10 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
+            var _d, _e, _f, _g, _h;
             query = {
-                maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
-                defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
+                maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
+                defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
                 'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
                 'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
                 hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -518,10 +583,10 @@
                 themeTag: query === null || query === void 0 ? void 0 : query.themeTag
             };
             if (utmVal) {
-                const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
+                const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                     const key = val.split('=')[0];
                     return UTM_KEYS.includes(key);
-                })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
+                })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -533,7 +598,7 @@
             return result === null || result === void 0 ? void 0 : result.data;
         }), [bffFetch, utmVal, maxSize, defaultSize]);
         const loadVideos = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _f, _g;
+            var _j, _k;
             if (rtcList.length <= 0) {
                 return;
             }
@@ -543,8 +608,8 @@
                 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
                 themeTag: themeTag.current
             });
-            setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
-            setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
+            setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
+            setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
@@ -608,16 +673,16 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _h, _j, _k, _l, _m;
+            var _l, _m, _o, _p, _q;
             if (!utmVal || !isShowTag)
                 return;
             try {
-                const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
+                const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
                     const key = val.split('=')[0];
                     return UTM_KEYS.includes(key);
-                })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+                })) === 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((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
+                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 : []);
             }
             catch (e) {
                 console.log('e', e);
@@ -668,8 +733,9 @@
             });
         }, [bffEventReport]);
         React.useEffect(() => {
-            h5EnterLink();
-        }, []);
+            if (!isShowConsent)
+                h5EnterLink();
+        }, [isShowConsent]);
         React.useEffect(() => {
             if (isShowConsent)
                 return;
@@ -752,13 +818,13 @@
                 isShowConsent,
                 selectTag,
                 setSelectTag
-            } }, render({
+            } }, isShowConsent ? (React.createElement(Consent$3, 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,
             mutateUnlike: bffMutateUnlike,
             submitForm: bffSubmitForm,
             tagList
-        })));
+        }))));
     };
     var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
 
@@ -1284,7 +1350,7 @@
                 key: '4'
             }
         ], []);
-        const columnsData = React.useMemo(() => {
+        React.useMemo(() => {
             if (layoutType === undefined) {
                 const list = lodash.cloneDeep(columns) || defaultColumns;
                 return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
@@ -1327,8 +1393,7 @@
         return (React.createElement("div", { className: 'pb-appoint-form' },
             React.createElement("div", { className: `pb-appoint-form-title ${css.css(Object.assign({}, textStyle))}` }, title),
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                React.createElement("div", { className: 'pb-appoint-form-container' },
-                    React.createElement(proComponents.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+                React.createElement("div", { className: 'pb-appoint-form-container' })),
             React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
                 React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
     };
@@ -8522,26 +8587,21 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-19 16:25:46
+     * @LastEditTime: 2024-06-20 18:56:52
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
      *
      */
     const FormatImage = React.forwardRef((props, ref) => {
         const { src, onLoad, style, className, loading } = props;
         const [imgSrc, setImgSrc] = React.useState();
-        const { swiperRef } = useSxpDataSource();
         React.useImperativeHandle(ref, () => ({
             setSrc: (v) => {
                 setImgSrc(v);
             }
         }));
         React.useEffect(() => {
-            var _a, _b;
-            // 首屏不加载第二屏之后的图片
-            const index = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
-            if (index === 0 || index > 0)
-                setImgSrc(src);
-        }, [src, swiperRef]);
+            setImgSrc(src);
+        }, [src]);
         React.useRef(null);
         // useEffect(() => {
         //   let observer: any = null;
@@ -9553,6 +9613,38 @@ Made in Italy` })));
         }
     ];
 
+    const EventProvider = (_a) => {
+        var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+        const ref = React.useRef(null);
+        const { popup } = useEditor();
+        const { setPopupDetailData, ctaEvent } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
+        const handleClick = lodash.throttle(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, rec, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
+            if (isExternalLink) {
+                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
+                    const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
+                    const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                    jumpToWeb(rec, product, cta, index);
+                    window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
+        return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+    };
+    var EventProvider$1 = React.memo(EventProvider);
+
+    var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-04-12 09:58:58
@@ -9580,64 +9672,40 @@ Made in Italy` })));
         return isOnScreen;
     }
 
-    const EventProvider = (_a) => {
-        var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-01-16 14:50:13
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-21 11:59:25
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
+     *
+     */
+    const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
         const ref = React.useRef(null);
         const isOnScreen = useOnScreen(ref);
-        const { popup } = useEditor();
-        const { setPopupDetailData, ctaEvent } = useSxpDataSource();
-        const { jumpToWeb } = useEventReport();
+        const { ctaEvent } = useSxpDataSource();
         React.useEffect(() => {
-            var _a, _b;
-            if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-                const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+            if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'ctaExposure',
                     eventDescription: 'The cta was shown to the user'
                 }, rec, item, index);
             }
-        }, [isOnScreen, ref, rec, ctaEvent, index]);
-        const handleClick = lodash.throttle(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'clickCta',
-                eventDescription: 'User clicked the CTA'
-            }, rec, item, index);
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
-            if (isExternalLink) {
-                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
-                    const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
-                    const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
-                    jumpToWeb(rec, product, cta, index);
-                    window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
-                }
-            }
-            else {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-            }
-        }, popup === null || popup === void 0 ? void 0 : popup.duration);
-        return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+        }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
+        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}?imrquality/rquality/40` }))));
     };
-    var EventProvider$1 = React.memo(EventProvider);
-
-    var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
+    var Img$1 = React.memo(Img);
 
     const Commodity$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({
-                        width: '100%',
-                        objectFit: 'cover',
-                        height: '100%',
-                        display: 'block',
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    }), src: src })),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : 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", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9646,8 +9714,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
+                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
     };
     var CommodityComponent = React.memo(Commodity$1);
 
@@ -9720,14 +9788,14 @@ Made in Italy` })));
     ];
 
     const Appoint$1 = (_a) => {
-        var _b, _c, _d, _e;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+        var _b, _c, _d, _e, _f, _g;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
+        const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name')));
     };
     var AppointComponent = React.memo(Appoint$1);
 
@@ -9784,7 +9852,7 @@ Made in Italy` })));
     var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU"};
 
     const Link$1 = (_a) => {
-        var _b, _c, _d, _e, _f;
+        var _b, _c, _d, _e, _f, _g, _h;
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
         const { sxpParameter, bffEventReport } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
@@ -9796,16 +9864,16 @@ Made in Italy` })));
                 window.location.href = window.getJointUtmLink(cta.link);
             }
         };
+        const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
         return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-            React.createElement("div", { className: css.css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css.css({
                     display: 'flex',
                     alignItems: 'center',
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_f = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _f !== void 0 ? _f : 'Product Name'))));
+                React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name'))));
     };
     var LinkComponent = React.memo(Link$1);
 
@@ -9873,20 +9941,13 @@ Made in Italy` })));
     var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
     const CommodityDiro$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({
-                        width: '100%',
-                        objectFit: 'cover',
-                        height: '100%',
-                        display: 'block',
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    }), src: src })),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : 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", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9895,8 +9956,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
+                React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
     };
     var CommodityDiroComponent = React.memo(CommodityDiro$1);
 
@@ -9971,20 +10032,13 @@ Made in Italy` })));
     var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
     const CommodityDiroNew$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({
-                        width: '100%',
-                        objectFit: 'cover',
-                        height: '100%',
-                        display: 'block',
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    }), src: src })),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : 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", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9993,8 +10047,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
+                React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop now'))));
     };
     var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
 
@@ -10072,31 +10126,6 @@ Made in Italy` })));
     };
     var Scroll$1 = React.memo(Scroll);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-01-16 14:50:13
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-21 16:34:13
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
-     *
-     */
-    const Img = ({ src, rec, item, index, style }) => {
-        const ref = React.useRef(null);
-        const isOnScreen = useOnScreen(ref);
-        const { ctaEvent } = useSxpDataSource();
-        React.useEffect(() => {
-            if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-                ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                    eventSubject: 'ctaExposure',
-                    eventDescription: 'The cta was shown to the user'
-                }, rec, item, index);
-            }
-        }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-        return (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' }, style)), src: src })));
-    };
-    var Img$1 = React.memo(Img);
-
     var styles$2 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
 
     const MultiCommodityDiro$1 = (_a) => {
@@ -10124,11 +10153,8 @@ Made in Italy` })));
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-                React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                            objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                        } })),
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
                 React.createElement("div", { className: css.css({
                         color: '#000',
                         display: 'flex',
@@ -10138,7 +10164,7 @@ Made in Italy` })));
                         overflow: 'hidden'
                     }) },
                     React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
         })));
     };
     var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
@@ -10239,11 +10265,8 @@ Made in Italy` })));
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-                React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                            objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                        } })),
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
                 React.createElement("div", { className: css.css({
                         color: '#fff',
                         display: 'flex',
@@ -10253,7 +10276,7 @@ Made in Italy` })));
                         overflow: 'hidden'
                     }) },
                     React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
         })));
     };
     var MultiCommodityComponent = React.memo(MultiCommodity$1);
@@ -10353,11 +10376,8 @@ Made in Italy` })));
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-                React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                            objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                        } })),
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
                 React.createElement("div", { className: css.css({
                         color: '#fff',
                         display: 'flex',
@@ -10368,7 +10388,7 @@ Made in Italy` })));
                         lineHeight: '20px'
                     }) },
                     React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
+                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))))));
         })));
     };
     var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
@@ -12721,10 +12741,10 @@ Made in Italy` })));
         }
     ];
 
-    const Consent$3 = (props) => {
-        return React.createElement(Consent$3, Object.assign({}, props));
+    const Consent$1 = (props) => {
+        return React.createElement(Consent$1, Object.assign({}, props));
     };
-    var ConsentComponent = React.memo(Consent$3);
+    var ConsentComponent = React.memo(Consent$1);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -12734,7 +12754,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
      *
      */
-    const Consent$2 = createMaterial(ConsentComponent, {
+    const Consent = createMaterial(ConsentComponent, {
         displayName: 'Consent',
         icon: '',
         category: 'base',
@@ -12769,7 +12789,7 @@ Made in Italy` })));
         CommodityDetailDiroNew: CommodityDetailDiroNew,
         CommodityDiro: CommodityDiro,
         CommodityDiroNew: CommodityDiroNew,
-        Consent: Consent$2,
+        Consent: Consent,
         HashTag: HashTag,
         Link: Link,
         MultiCommodity: MultiCommodity,
@@ -12875,7 +12895,7 @@ Made in Italy` })));
         React.useEffect(() => {
             if (!videoRef)
                 return;
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
+            videoRef.muted = muted;
         }, [muted, videoRef]);
         const handleEnded = React.useCallback(() => {
             if (!videoRef)
@@ -12890,10 +12910,10 @@ Made in Italy` })));
             setIsLoadFinish(true);
             setIsPauseVideo(false);
             const item = data[index];
-            if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
-                videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
-                const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-                const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+            if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
+                videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
+                const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+                const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
                 const playType = isFirstPlay ? '0' : '1';
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
@@ -12917,21 +12937,17 @@ Made in Italy` })));
             var _a;
             if (!videoRef || firstFrameSrc || !blur)
                 return;
-            const videoDomRef = document.getElementById('player-container-id_html5_api');
-            if (!videoDomRef)
-                return;
-            videoDomRef.style.objectFit = 'contain';
+            videoRef.style.objectFit = 'contain';
             if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
                 return;
             const setFrameImg = () => {
-                const video = videoDomRef;
                 const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
                 const ctx = canvas.getContext('2d');
                 const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
                 const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
                 canvas.height = targetHeight;
                 canvas.width = targetWidth;
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
                 setFirstFrameSrc(canvas.toDataURL());
             };
             setFrameImg();
@@ -12943,21 +12959,13 @@ Made in Italy` })));
             if (!videoRef)
                 return;
             handLoadeddata();
-            // if (activeIndex !== index) {
-            //   videoRef?.play();
-            //   videoRef?.pause();
-            // }
-            // setIsLoadFinish(true);
         }, [videoRef, handLoadeddata]);
-        React.useCallback(() => {
-            setIsLoadFinish(true);
-        }, []);
         const handleClickVideo = React.useCallback((type) => () => {
             if (!videoRef)
                 return;
             if (!isLoadFinish)
                 return;
-            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
             switch (type) {
                 case 'start':
                     if (!isPause)
@@ -12989,10 +12997,10 @@ Made in Italy` })));
             if (activeIndex !== index)
                 return;
             const item = data[index];
-            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-            if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
-                const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
+            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+            if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) {
+                const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) - videoStartTime.current).toFixed(2);
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'playOverVideo',
@@ -13016,7 +13024,19 @@ Made in Italy` })));
             const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
             if (!videoSrc)
                 return;
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
+            if (videoSrc.includes('.m3u8')) {
+                if (Hls.isSupported()) {
+                    const hls = new Hls();
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(videoRef.current);
+                }
+                else {
+                    videoRef.src = videoSrc;
+                }
+            }
+            else {
+                videoRef.src = videoSrc;
+            }
             setIsPauseVideo(false);
             const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
             const dom = document.querySelector('#player-container-id');
@@ -13024,20 +13044,20 @@ Made in Italy` })));
             if (!dom && !dom2)
                 return;
             videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
-            // videoRef?.on('canplay', handleCanplay);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
+            videoRef.setAttribute('x5-playsinline', 'true');
+            videoRef.setAttribute('webkit-playsinline', 'true');
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
             return () => {
                 dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
-                // videoRef?.off('canplay', handleCanplay);
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
             };
         }, [isActive, videoId, rec, videoRef]);
         React.useEffect(() => {
@@ -13059,7 +13079,7 @@ Made in Italy` })));
         React.useEffect(() => {
             if (!isActive || !videoRef)
                 return;
-            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
             if (!isPause && openHashtag) {
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
             }
@@ -13498,142 +13518,64 @@ Made in Italy` })));
     };
     var Tagbar$1 = React.memo(Tagbar);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-06-13 15:16:53
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-19 14:13:50
-     * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
-     *
-     */
-    const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
-        const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
-        const channelObj = React.useMemo(() => {
-            const queryString = location.search.slice(1);
-            const params = qs.parse(queryString.replace(/\+/g, '%2B'));
-            for (const key in params) {
-                params[key] = params[key].replace(/%2B/g, '+');
-            }
-            return params;
-        }, []);
-        const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
-        React.useEffect(() => {
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'privacyEnter',
-                    eventDescription: 'User enter privacy page',
-                    utmSource: getUtmValue('utm_source'),
-                    utmMedium: getUtmValue('utm_medium'),
-                    utmCampaign: getUtmValue('utm_campaign'),
-                    utmId: getUtmValue('utm_id'),
-                    utmContent: getUtmValue('utm_content'),
-                    clSource: getUtmValue('cl_source'),
-                    enterTime: `${Date.now()}`,
-                    enterUrl: window.location.href,
-                    rtc: null,
-                    requestId: null,
-                    sessionID: null
-                }
-            });
-        }, []);
-        const handleAgree = () => {
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'userConsent',
-                    eventDescription: '用户授权【操作结果】',
-                    consentResult: '0',
-                    consentTags: '["系统运营"]',
-                    rtc: null,
-                    requestId: null,
-                    sessionID: null
-                }
-            });
-            setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
-            window.localStorage.setItem(AGREE_POLICY, 'yes');
-        };
-        return (React.createElement("div", { className: 'consent-bg' },
-            React.createElement("div", { className: 'consent' },
-                React.createElement("div", { className: 'consent-col' },
-                    React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
-                    React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
-                React.createElement("div", { className: 'consent-col' },
-                    React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
-                    React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
-    };
-    var Consent$1 = React.memo(Consent);
-
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-20 10:37:06
+     * @LastEditTime: 2024-06-21 08:56:05
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
     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, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
         const viewImageStartTime = React.useRef(0);
-        const [isInit, setIsInit] = React.useState(false);
+        React.useState(false);
         const [isMuted, setIsMuted] = React.useState(true);
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.useState(false);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
-        const [videoRef, setVideoRef] = React.useState(null);
-        const playerRef = React.useRef();
+        const videoRef = React.useRef();
         const { productView } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
             return data.length > 0 && !loading && getFeUserId();
         }, [data, loading]);
-        const handleH5EnterLink = React.useCallback(() => {
-            if (data.length <= 0) {
-                return;
+        React.useEffect(() => {
+            refreshFeSessionId();
+        }, []);
+        React.useEffect(() => {
+            if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+                const now = new Date();
+                viewTime.current = now;
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'PageView'
+                });
             }
+        }, [data === null || data === void 0 ? void 0 : data.length]);
+        const handleH5EnterLink = React.useCallback(() => {
             refreshFeSessionId();
-            const now = new Date();
-            viewTime.current = now;
-            if (isInit) {
-                h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+            h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+            if (data.length > 0) {
+                const now = new Date();
+                viewTime.current = now;
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'PageView'
+                });
             }
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'PageView'
-            });
-            setIsInit(true);
-        }, [data.length, bffFbReport, h5EnterLink, isInit]);
+        }, [data.length, bffFbReport, h5EnterLink]);
         const firstRef = React.useRef();
         React.useEffect(() => {
             var _a, _b, _c, _d;
-            if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
+            if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
                 firstRef.current = true;
-                const player = TCPlayer('player-container-id', {
-                    licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
-                    controls: false,
-                    loop: false,
-                    autoplay: true,
-                    muted: true,
-                    preload: 'auto',
-                    posterImage: false,
-                    bigPlayButton: true,
-                    sources: ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url)
-                        ? [
-                            {
-                                src: (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url
-                            }
-                        ]
-                        : []
-                });
-                player === null || player === void 0 ? void 0 : player.ready(() => {
-                    setVideoRef(player);
-                });
+                if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
+                    videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
+                }
             }
-        }, [videoRef, licenseUrl, data]);
-        React.useEffect(() => {
-            if (!isInit)
-                handleH5EnterLink();
-        }, [handleH5EnterLink, isInit]);
+        }, [videoRef, data]);
         React.useEffect(() => {
             var _a;
             const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -13751,7 +13693,7 @@ Made in Italy` })));
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
+                return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
             }
             if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
                 return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -13777,7 +13719,7 @@ Made in Italy` })));
             tipText,
             resolver,
             schema,
-            videoRef
+            videoRef.current
         ]);
         const onExpandableChange = React.useCallback((v) => {
             setIsShowMore(v);
@@ -13935,14 +13877,17 @@ Made in Italy` })));
             }
         };
         const visList = React.useMemo(() => {
-            const list = data === null || data === void 0 ? void 0 : data.map((item, index) => {
-                if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
-                    return item;
-                }
-                else {
-                    return null;
-                }
-            });
+            var _a;
+            const list = activeIndex === 0
+                ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
+                : data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                    if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                        return item;
+                    }
+                    else {
+                        return null;
+                    }
+                });
             return !waterFallData ? list.concat([{ loading: true }]) : list;
         }, [data, activeIndex, waterFallData]);
         const renderView = React.useMemo(() => {
@@ -13967,48 +13912,47 @@ Made in Italy` })));
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-            isShowConsent ? (React.createElement(Consent$1, 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))) : (React.createElement(React.Fragment, null,
-                waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                        setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-                    } })),
-                renderLogo,
-                React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
-                isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
-                React.createElement(Swiper, { style: {
-                        marginTop: tagHeight
-                    }, ref: swiperRef, onSlideChange: () => {
-                        swiperRef.current.swiper.allowTouchMove = false;
-                        setTimeout(() => {
-                            swiperRef.current.swiper.allowTouchMove = true;
-                        }, 500);
-                    }, onActiveIndexChange: (swiper) => {
-                        setActiveIndex(swiper.activeIndex);
-                        if (openHashtag)
-                            return;
-                        // 处理上滑下滑事件
-                        handleScrollEvent(swiper);
-                        if (waterFallData)
-                            return;
-                        if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
-                            if (!isLoadMore) {
-                                setIsLoadMore(true);
-                                loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
-                                    setIsLoadMore(false);
-                                });
-                            }
+            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+                } })),
+            renderLogo,
+            React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
+            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: () => {
+                    swiperRef.current.swiper.allowTouchMove = false;
+                    setTimeout(() => {
+                        swiperRef.current.swiper.allowTouchMove = true;
+                    }, 500);
+                }, onActiveIndexChange: (swiper) => {
+                    setActiveIndex(swiper.activeIndex);
+                    if (openHashtag)
+                        return;
+                    // 处理上滑下滑事件
+                    handleScrollEvent(swiper);
+                    if (waterFallData)
+                        return;
+                    if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                        if (!isLoadMore) {
+                            setIsLoadMore(true);
+                            loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                                setIsLoadMore(false);
+                            });
                         }
-                    }, direction: 'vertical', height: height },
-                    React.createElement(ToggleButton$1, { style: {
-                            position: 'fixed',
-                            visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
-                            zIndex: 999,
-                            [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
-                            [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 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 }),
-                    renderView))),
-            React.createElement(WaterFall$1, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
+                    }
+                }, direction: 'vertical', height: height },
+                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 }),
+                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)),
             React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
-                React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
+                React.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
                         backgroundColor: 'transparent',
                         width: '100%',
                         height: '100%',