pb-sxp-ui 1.15.13-alpha.4 → 1.15.14

package/dist/pb-ui.js

@@ -444,6 +444,39 @@
         })
     };
 
+    function useEditor() {
+        return React.useContext(EditorContext);
+    }
+
+    function useDataSource() {
+        return React.useContext(DataSourceContext);
+    }
+
+    const feRealSessionIdKey = 'feRealSessionIdKey';
+    const generateFeSessionId = () => {
+        const uid = getUid(); // 32位长度
+        const timestamp = Date.now(); // 13位长度
+        const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
+        return result;
+    };
+    // 生成或者获取sessionID
+    const storeAndLoadFeSessionId = () => {
+        let result = getFeSessionId();
+        if (!result) {
+            result = generateFeSessionId();
+            window.localStorage.setItem(feRealSessionIdKey, result);
+        }
+        return result;
+    };
+    const refreshFeSessionId = () => {
+        const result = generateFeSessionId();
+        window.localStorage.setItem(feRealSessionIdKey, result);
+    };
+    // 获取 sessionID
+    const getFeSessionId = () => {
+        return window.localStorage.getItem(feRealSessionIdKey);
+    };
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
@@ -495,39 +528,6 @@
         window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
     };
 
-    function useEditor() {
-        return React.useContext(EditorContext);
-    }
-
-    function useDataSource() {
-        return React.useContext(DataSourceContext);
-    }
-
-    const feRealSessionIdKey = 'feRealSessionIdKey';
-    const generateFeSessionId = () => {
-        const uid = getUid(); // 32位长度
-        const timestamp = Date.now(); // 13位长度
-        const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
-        return result;
-    };
-    // 生成或者获取sessionID
-    const storeAndLoadFeSessionId = () => {
-        let result = getFeSessionId();
-        if (!result) {
-            result = generateFeSessionId();
-            window.localStorage.setItem(feRealSessionIdKey, result);
-        }
-        return result;
-    };
-    const refreshFeSessionId = () => {
-        const result = generateFeSessionId();
-        window.localStorage.setItem(feRealSessionIdKey, result);
-    };
-    // 获取 sessionID
-    const getFeSessionId = () => {
-        return window.localStorage.getItem(feRealSessionIdKey);
-    };
-
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
@@ -740,8 +740,12 @@
             // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
             if (options.type === 'beacon' && navigator.sendBeacon) {
                 return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
-                    JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
-                ], { type: 'application/json;charset=UTF-8' }));
+                    JSON.stringify({
+                        body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
+                    })
+                ], {
+                    type: 'application/json;charset=UTF-8'
+                }));
             }
             return window
                 .fetch(`${url}/api/${path}`, {
@@ -772,16 +776,17 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-            var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-            query = Object.assign({ maxSize: 50, defaultSize: 50, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
+            var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+            query = Object.assign({ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize, defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
             if (channel) {
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
             }
             else if (utmVal) {
-                const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+                const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
+                    var _a, _b;
                     const key = val.split('=')[0];
-                    return key;
-                })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
+                    return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
+                })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
                 if (val)
                     query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
@@ -795,19 +800,19 @@
                 let list = [];
                 let result = null;
                 const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
-                    var _t, _u, _v, _w, _x, _y;
+                    var _v, _w, _x, _y, _z, _0;
                     query.pageNum = pageNum;
                     result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
                     if (!(result === null || result === void 0 ? void 0 : result.success)) {
                         return undefined;
                     }
                     setLoading(false);
-                    list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
+                    list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
                     if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
                         setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
                         setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
                     }
-                    const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+                    const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                     if (isNotNullList) {
                         pageNum = pageNum + 1;
                         yield recurveRecList(query);
@@ -815,13 +820,13 @@
                 });
                 yield recurveRecList(query);
                 if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                    setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
+                    setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
                 return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
             }
             if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
-                query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
+                query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
             }
-            const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
+            const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
             if (!(result === null || result === void 0 ? void 0 : result.success)) {
                 return undefined;
             }
@@ -829,8 +834,8 @@
                 setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
                 let list = [];
-                list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
-                const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+                list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
+                const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                 if (!isNotNullList) {
                     setIsNoMoreData(true);
                 }
@@ -839,12 +844,12 @@
             return result === null || result === void 0 ? void 0 : result.data;
         }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
         const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
-            var _z, _0, _1, _2;
+            var _1, _2, _3, _4;
             if (rtcList.length <= 0) {
                 return;
             }
             const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
-            const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
+            const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
             setRtcList(rtcList.concat(getFilterRecList(data)));
             setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
             return data;
@@ -901,7 +906,7 @@
             console.log('userInfo:', userInfo);
             console.log('eventInfo:', ef);
             console.log('========= 结束 =========');
-            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
+            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/cld/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
                 method: 'POST',
                 body: { userInfo: realUserInfo, eventInfo: realEventInfo },
                 type: 'beacon'
@@ -917,7 +922,7 @@
             bffDataSource
         ]);
         const bffFbReport = React.useCallback(({ eventName, product }) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!enableReportEvent ||
                 !enabledMetaConversionApi ||
                 (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -981,7 +986,15 @@
                 }
             };
             getEventParams(jsonParams);
-            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
+            const params = {};
+            const queryString = location.search.slice(1);
+            (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
+                const key = val.split('=')[0];
+                const value = val.split('=')[1];
+                params[key] = value;
+            });
+            const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
+            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
                 method: 'POST',
                 body: jsonParams,
                 type: 'beacon'
@@ -1009,18 +1022,18 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
-            var _3, _4, _5, _6, _7, _8, _9, _10;
-            const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
+            var _5, _6, _7, _8, _9, _10, _11, _12;
+            const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
             if (!utmVal || !isShowTag)
                 return;
             try {
-                const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
+                const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
                     var _a, _b;
                     const key = val.split('=')[0];
                     return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
-                })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
+                })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
                 const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-                setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
+                setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
             }
             catch (e) {
                 console.log('e', e);
@@ -1080,10 +1093,10 @@
             });
         }, [bffEventReport]);
         const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _11, _12;
+            var _13, _14;
             const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
-            setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
-            return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
+            setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
+            return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
         }), [bffFetch]);
         const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
             const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1478,7 +1491,7 @@
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
 
-    var index$3 = /*#__PURE__*/Object.freeze({
+    var index$2 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         EditorCore: EditorCore
     });
@@ -10098,15 +10111,7 @@
                     wordBreak: 'break-word'
                 }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
             React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-            text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
-                    textDecoration: 'underline',
-                    cursor: 'pointer',
-                    outline: 'none',
-                    border: 'none',
-                    boxSizing: 'content-box',
-                    padding: 0,
-                    background: 'transparent'
-                }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+            text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                     __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
                 } }))));
     };
@@ -12464,7 +12469,7 @@ Made in Italy` })));
         const handleClick = lodash.throttle((e) => {
             var _a, _b, _c, _d, _e, _f;
             e.preventDefault();
-            const item = multItem || ((_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);
+            const item = multItem ? multItem : (_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'
@@ -12491,7 +12496,7 @@ Made in Italy` })));
                 setElement(null);
             }
         }, [element, popup]);
-        return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
+        return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
     };
     var EventProvider$1 = React.memo(EventProvider);
 
@@ -13087,7 +13092,6 @@ Made in Italy` })));
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-        console.log(recData, '222');
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13294,7 +13298,6 @@ Made in Italy` })));
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-        console.log(recData, '333');
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -17570,15 +17573,15 @@ Made in Italy` })));
         Swipe: Swipe
     });
 
-    const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
     const LikeButton = (_a) => {
         var _b;
         var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
         const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
         const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
-        const likeIcon = useIconLink(defaultLikeIconPath$2);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
+        const likeIcon = useIconLink(defaultLikeIconPath$1);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
         const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
             var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             if (state) {
@@ -17669,7 +17672,7 @@ Made in Italy` })));
         };
     })();
 
-    const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+    const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
         const videoStartTime = React.useRef(0);
@@ -18014,7 +18017,7 @@ Made in Italy` })));
             renderLoading,
             isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
     };
-    var VideoWidget$5 = React.memo(VideoWidget$4);
+    var VideoWidget$3 = React.memo(VideoWidget$2);
 
     const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
         const [isTrue, setIsTure] = React.useState(defaultValue);
@@ -18103,7 +18106,7 @@ Made in Italy` })));
                 }, onLoad: onShowFirstImage }))));
     };
 
-    const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
         var _a, _b;
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18197,7 +18200,7 @@ Made in Italy` })));
                     React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
             }))));
     };
-    var PictureGroup$5 = React.memo(PictureGroup$4);
+    var PictureGroup$3 = React.memo(PictureGroup$2);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -18313,7 +18316,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-28 14:46:08
+     * @LastEditTime: 2024-10-31 10:30:55
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
      *
      */
@@ -18323,10 +18326,10 @@ Made in Italy` })));
             return null;
         const renderComp = React.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;
-            // 如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
+            //如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
             if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
                 return;
-            // 默认不渲染category为cta类型的组件，该类型的组件只用于某一处
+            //默认不渲染category为cta类型的组件，该类型的组件只用于某一处
             if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
                 return;
             if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
@@ -18343,10 +18346,10 @@ Made in Italy` })));
                 const Component = withBindDataSource(t);
                 const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
                 const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
-                const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
+                let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
                 if (style.hasOwnProperty('backdropFilter')) {
-                    const sbf = style.backdropFilter;
-                    style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
+                    let sbf = style['backdropFilter'];
+                    style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
                 }
                 return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), 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), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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, isActive: isActive })));
             }
@@ -18707,10 +18710,10 @@ Made in Italy` })));
                 return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
             }
             if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-                return (React.createElement(VideoWidget$5, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+                return (React.createElement(VideoWidget$3, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
             }
             if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
-                return (React.createElement(PictureGroup$5, { 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, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                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, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
             }
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
                 return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19078,9 +19081,9 @@ Made in Italy` })));
             React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
             openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } })))))));
     };
-    var index$2 = React.memo(SxpPageRender);
+    var SxpPageRender$1 = React.memo(SxpPageRender);
 
-    const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
+    const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
         return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
                 clickable: true,
                 bulletActiveClass: 'swipe-item-active-bullet',
@@ -19090,9 +19093,9 @@ Made in Italy` })));
                 React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
         })));
     };
-    var PictureGroup$3 = React.memo(PictureGroup$2);
+    var PictureGroup$1 = React.memo(PictureGroup);
 
-    const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
+    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const videoRef = React.useRef(null);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19322,14 +19325,14 @@ Made in Italy` })));
             renderPoster,
             React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
     };
-    var VideoWidget$3 = React.memo(VideoWidget$2);
+    var VideoWidget$1 = React.memo(VideoWidget);
 
-    const RESOLVER$2 = {};
+    const RESOLVER$1 = {};
     Object.values(_materials_).forEach((v) => {
-        RESOLVER$2[v.extend.type] = v;
+        RESOLVER$1[v.extend.type] = v;
     });
-    const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
     const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
         const height = React.useMemo(() => {
             let minusHeight = 0;
@@ -19344,16 +19347,16 @@ Made in Italy` })));
         const renderContent = (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: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
+                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
             }
             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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                return (React.createElement(PictureGroup$1, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
             }
             if (rec.product) {
                 if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                     return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
                         var _a, _b, _c, _d, _e, _f, _g, _h;
-                        const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
+                        const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                         const Component = withBindDataSource(t);
                         const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
                         return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, 
@@ -19375,7 +19378,7 @@ Made in Italy` })));
         const CTA = (rec, index) => {
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
                 return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
+                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
             }
             return null;
         };
@@ -19393,8 +19396,8 @@ Made in Italy` })));
             }
             return null;
         };
-        const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
+        const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
         const renderLikeButton = (rec, index) => {
             var _a, _b, _c, _d;
             if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19444,666 +19447,11 @@ Made in Italy` })));
     };
     var index$1 = React.memo(DiyPortalPreview);
 
-    const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
-        const { isActive } = useSwiperSlide();
-        const [isload, setIsLoad] = React.useState(false);
-        React.useEffect(() => {
-            if (isActive && isload && loopPlay) {
-                setTimeout(() => {
-                    var _a, _b, _c, _d;
-                    if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-                        (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
-                    }
-                    else {
-                        const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
-                        (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
-                    }
-                }, 3000);
-            }
-        }, [isActive, isload, data, index, swiperRef, loopPlay]);
-        const loadFinishImage = () => {
-            setIsLoad(true);
-        };
-        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
-                clickable: true,
-                bulletActiveClass: 'swipe-item-active-bullet',
-                bulletElement: 'button'
-            }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-            return (React.createElement(SwiperSlide, { key: url },
-                React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
-        })));
-    };
-    var PictureGroup$1 = React.memo(PictureGroup);
-
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
-        const { isActive } = useSwiperSlide();
-        const [isPauseVideo, setIsPauseVideo] = React.useState(false);
-        const videoRef = React.useRef(null);
-        const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
-        const videoStartTime = React.useRef(0);
-        const [isLoadFinish, setIsLoadFinish] = React.useState(false);
-        const [isFirstPlay, setIsFirstPlay] = React.useState(true);
-        const canvasRef = React.useRef(null);
-        const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
-        const videoId = `pb-cache-video-${index}`;
-        const hlsRef = React.useRef(null);
-        React.useEffect(() => {
-            if (!videoRef.current)
-                return;
-            videoRef.current.muted = muted;
-        }, [muted]);
-        React.useCallback(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, []);
-        const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-        const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f;
-            setIsPauseVideo(false);
-            const item = data[index];
-            if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-                ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-                ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-                setIsFirstPlay(false);
-            }
-        }, [bffEventReport, data, index, isFirstPlay]);
-        const handleLoadedMetadata = React.useCallback(() => {
-            var _a;
-            videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
-            (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-            setIsLoadFinish(true);
-        }, []);
-        React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e;
-            if (!isLoadFinish)
-                return;
-            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-            switch (type) {
-                case 'start':
-                    if (!isPause)
-                        return;
-                    (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
-                    setIsPauseVideo(false);
-                    break;
-                case 'pause':
-                    if (isPause)
-                        return;
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-                    setIsPauseVideo(true);
-                    break;
-                default:
-                    if (isPause) {
-                        // if (videoRef?.current?.currentTime >= rec?.endTime) {
-                        //   videoRef.current.currentTime = rec?.startTime;
-                        // }
-                        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
-                    }
-                    else {
-                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
-                    }
-                    setIsPauseVideo(!isPause);
-                    break;
-            }
-        }, [isLoadFinish]);
-        React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f;
-            data[index];
-            ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-            ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-                (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-            }
-        }, [data, index, bffEventReport]);
-        const blur = React.useMemo(() => {
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-        }, [videoPostConfig]);
-        React.useMemo(() => {
-            var _a;
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
-                ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
-                : 'translateY(-50%)';
-        }, [videoPostConfig]);
-        const handLoadeddata = React.useCallback(() => {
-            if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
-                return;
-            const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-            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);
-            setFirstFrameSrc(canvas.toDataURL());
-        }, []);
-        const handleTimeUpload = React.useCallback(() => {
-            var _a, _b, _c;
-            if (!videoRef.current)
-                return;
-            if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
-                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-            }
-        }, []);
-        // useEffect(() => {
-        //   if (!videoRef.current || !isActive) return;
-        //   if (isPlay) {
-        //     videoRef.current?.play();
-        //   } else {
-        //     videoRef.current?.pause();
-        //   }
-        // }, [isPlay, isActive]);
-        const handlePause = () => {
-            var _a, _b, _c, _d, _e, _f;
-            if (!videoRef.current || !isActive)
-                return;
-            if (!loopPlay)
-                return;
-            if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-                (_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.slideTo(0);
-            }
-            else {
-                const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
-                (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
-            }
-        };
-        React.useEffect(() => {
-            var _a, _b, _c;
-            if (!isActive)
-                return;
-            const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
-            if (!videoSrc)
-                return;
-            setIsPauseVideo(false);
-            const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
-            if (!videoPlayerWrapperNode)
-                return;
-            videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
-                return;
-            const Hls = window === null || window === void 0 ? void 0 : window.Hls;
-            let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
-            if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
-                hls = new Hls();
-                hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
-                hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
-                hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
-                    var _a;
-                    videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
-                    (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-                });
-            }
-            else {
-                videoRef.current.src = videoSrc;
-            }
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
-            // videoRef.current?.addEventListener('playing', handlePlaying);
-            // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
-            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
-            return () => {
-                var _a, _b, _c, _d;
-                if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
-                    (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-                setIsLoadFinish(false);
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
-                // videoRef.current?.removeEventListener('playing', handlePlaying);
-                // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
-                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
-            };
-        }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
-        const renderPoster = React.useMemo(() => {
-            if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
-                return null;
-            }
-            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
-        }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
-        React.useMemo(() => {
-            return blur
-                ? {
-                    filter: 'blur(10px)',
-                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
-                }
-                : {};
-        }, [blur]);
-        if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
-            return null;
-        }
-        // const renderLoading = useMemo(() => {
-        //     if (!waiting || !isLoadFinish) return;
-        //     return (
-        //       <img
-        //         style={{
-        //           position: 'absolute',
-        //           top: '50%',
-        //           left: 0,
-        //           right: 0,
-        //           transform: 'translateY(-100%)',
-        //           margin: 'auto',
-        //           width: '50px',
-        //           height: '50px',
-        //           objectFit: 'contain'
-        //         }}
-        //         src={loading_gif}
-        //         alt='placeholder image'
-        //       />
-        //     );
-        // }, [waiting, isLoadFinish]);
-        return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
-                position: 'relative',
-                width: '100%',
-                height,
-                overflow: 'hidden'
-            } },
-            React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
-            renderPoster,
-            isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
-    };
-    var VideoWidget$1 = React.memo(VideoWidget);
-
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2025-03-25 13:54:27
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-28 18:08:02
-     * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
-     *
-     */
-    const recData = {
-        position: 0,
-        isCollected: false,
-        product: null,
-        video: {
-            appId: null,
-            itemId: 'VIDEOSsRgI1695278974368',
-            title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
-            enTitle: null,
-            icon: null,
-            cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
-            link: null,
-            linkTitle: null,
-            linkType: null,
-            menuCategoryId: null,
-            remark: null,
-            tags: [
-                'Gift-Giving',
-                'Daily Wear',
-                'Business Formal',
-                'Sports/Casual',
-                'Anniversary Gifts',
-                'Wedding/Engagement',
-                'Formal Dinner/Party'
-            ],
-            traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-            value: 385,
-            weight: null,
-            bindCta: null,
-            bindProduct: null,
-            bindProducts: [
-                {
-                    appId: 'wx448578f8851f3dce',
-                    itemId: 'test02178888',
-                    title: 'christian dior小包包 新CDN',
-                    enTitle: null,
-                    icon: null,
-                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                    link: '/pages/details/index?spu_id=1702262707659534338',
-                    linkTitle: '',
-                    linkType: 'MP',
-                    menuCategoryId: null,
-                    remark: null,
-                    tags: [],
-                    traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null,
-                    bindCta: {
-                        appId: 'wx448578f8851f3dce',
-                        itemId: 'CTA3KofE1716186622249',
-                        title: 'SHOP NOW 立即购买',
-                        enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
-                        icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
-                        cover: null,
-                        link: '/pages/details/index?spu_id=1702262707659534338',
-                        linkTitle: '',
-                        linkType: 'MP',
-                        menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                        remark: null,
-                        tags: [
-                            "Woman's Perfumes",
-                            'Plates & Bowls',
-                            'Glasses',
-                            'Multicolor',
-                            'Carafes',
-                            'Tea & Coffee',
-                            'Green',
-                            'Grey',
-                            'Cutlery'
-                        ],
-                        traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                        value: null,
-                        weight: null
-                    },
-                    collection: 'Ricco',
-                    currency: 'INR-₹',
-                    homePage: [
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
-                    ],
-                    info: 'test',
-                    price: 53200,
-                    shippingInfo: null,
-                    taxInfo: null
-                },
-                {
-                    appId: null,
-                    itemId: '113J631A0684_C520',
-                    title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
-                    enTitle: null,
-                    icon: null,
-                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                    link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
-                    linkTitle: null,
-                    linkType: 'WEB',
-                    menuCategoryId: null,
-                    remark: null,
-                    tags: [],
-                    traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null,
-                    bindCta: {
-                        appId: null,
-                        itemId: 'CTAAfaKf1730796437032',
-                        title: 'test',
-                        enTitle: 'test',
-                        icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
-                        cover: null,
-                        link: null,
-                        linkTitle: null,
-                        linkType: null,
-                        menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                        remark: '',
-                        tags: [],
-                        traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                        value: null,
-                        weight: null
-                    },
-                    collection: 'Jacquard de coton éponge bleu',
-                    currency: 'EUR-€',
-                    homePage: [
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
-                    ],
-                    info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
-                    price: 1800,
-                    shippingInfo: null,
-                    taxInfo: null
-                },
-                {
-                    appId: null,
-                    itemId: 'S5573CRIW_M928',
-                    title: 'Mini Dior Book Tote',
-                    enTitle: null,
-                    icon: null,
-                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                    link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
-                    linkTitle: null,
-                    linkType: 'WEB',
-                    menuCategoryId: null,
-                    remark: null,
-                    tags: ['ダイヤモンド'],
-                    traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null,
-                    bindCta: null,
-                    collection: null,
-                    currency: 'GBP-￡',
-                    homePage: [
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
-                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
-                    ],
-                    info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
-                    price: 1950,
-                    shippingInfo: null,
-                    taxInfo: null
-                }
-            ],
-            url: null,
-            blockCta: 1,
-            blockProduct: 1,
-            hashTags: [
-                'Sports/Casual',
-                'Formal Dinner/Party',
-                'Business Formal',
-                'Wedding/Engagement',
-                'Gift-Giving',
-                'Daily Wear',
-                'Anniversary Gifts'
-            ]
-        }
-    };
-    const RESOLVER$1 = {};
-    Object.values(_materials_).forEach((v) => {
-        RESOLVER$1[v.extend.type] = v;
-    });
-    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-    const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
-        const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
-        const swiperRef = React.useRef(null);
-        React.useMemo(() => {
-            let minusHeight = 0;
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-                minusHeight += 45;
-            }
-            if (tagList.length > 0) {
-                minusHeight += 45;
-            }
-            return containerHeight - minusHeight;
-        }, [globalConfig, containerHeight, tagList]);
-        // 判断是否是视频
-        const isVideoUrl = (url) => {
-            if (url && url !== '' && typeof url === 'string') {
-                const imageExtensions = ['.mp4', '.m3u8'];
-                const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
-                return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
-            }
-            else {
-                return false;
-            }
-        };
-        const renderContent = (rec, index) => {
-            const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
-            if (isVideo) {
-                return (React.createElement(VideoWidget$1, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
-            }
-            else {
-                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
-            }
-        };
-        React.useMemo(() => {
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-                return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
-                    React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
-            }
-            return null;
-        }, [globalConfig]);
-        const renderBottom = (rec, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (rec === null || rec === void 0 ? void 0 : rec.video) {
-                let cta = null;
-                if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
-                    cta = '多商品CTA';
-                }
-                else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
-                    cta = '商品CTA';
-                }
-                else {
-                    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];
-                return (React.createElement(React.Fragment, null,
-                    ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
-                            background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
-                            height: '130px',
-                            position: 'absolute',
-                            bottom: 0,
-                            width: '100%',
-                            willChange: 'transform',
-                            zIndex: 2,
-                            pointerEvents
-                        } })),
-                    React.createElement("div", { style: {
-                            marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
-                            zIndex: 999,
-                            position: 'absolute',
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            paddingTop: '20px'
-                        } },
-                        (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
-                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
-                        React.createElement("div", null,
-                            React.createElement(ExpandableText$1
-                            // className='clc-sxp-bottom-text'
-                            , { 
-                                // 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: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', 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', padding: '0 20px', fontSize: '12px' }) }),
-                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
-                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
-            }
-            return null;
-        };
-        const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
-        const renderLikeButton = (rec, index) => {
-            var _a, _b, _c, _d;
-            if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
-                return;
-            let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
-            if (top < 40) {
-                top += 40;
-            }
-            if (rec === null || rec === void 0 ? void 0 : rec.video) {
-                return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, 
-                    // className={style['clc-sxp-like-button']}
-                    style: {
-                        top,
-                        right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
-                        position: 'absolute',
-                        zIndex: 999,
-                        backgroundColor: 'transparent',
-                        width: '50px',
-                        height: '50px',
-                        outline: 'none',
-                        border: 'none',
-                        boxSizing: 'content-box',
-                        padding: 0,
-                        transform: 'translate3d(0px, 0px, 0px)'
-                    } }));
-            }
-            return null;
-        };
-        const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
-        const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
-        const renderToggleButton = (visible) => {
-            var _a, _b, _c, _d;
-            if (!visible)
-                return;
-            let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
-                top += 45;
-            }
-            return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
-                    position: 'absolute',
-                    visibility: 'visible',
-                    zIndex: 999,
-                    transform: 'translate3d(0px,0px,0px)',
-                    [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
-                    [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
-                    backgroundColor: 'transparent',
-                    width: '50px',
-                    height: '50px',
-                    outline: 'none',
-                    border: 'none',
-                    boxSizing: 'content-box',
-                    padding: 0
-                }, defaultValue: true, 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 })));
-        };
-        const renderView = (item, index) => {
-            var _a, _b, _c, _d;
-            const rec = lodash.cloneDeep(recData);
-            rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
-            rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
-            return (React.createElement("div", { style: { position: 'relative' } },
-                React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
-                    renderBottom(rec, index),
-                    renderLikeButton(rec, index),
-                    renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-                    React.createElement(ToggleButton$1, { style: {
-                            position: 'absolute',
-                            right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
-                            visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                            bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
-                            zIndex: 999
-                        }, defaultValue: true, 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 }),
-                    renderContent(item, index))));
-        };
-        React.useEffect(() => {
-            var _a, _b;
-            if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-                return;
-            (_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.slideTo(activeIndex);
-        }, [activeIndex]);
-        React.useEffect(() => {
-            if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-                return;
-            // swiperRef?.current?.swiper?.slideTo(0);
-            setLooPlaySwiper(loopPlay);
-        }, [loopPlay]);
-        const handleSessionExpire = React.useCallback(lodash.debounce(() => {
-            setLooPlaySwiper(false);
-        }, 1000), []);
-        React.useEffect(() => {
-            const events = ['touchstart', 'touchcancel'];
-            events.forEach((event) => {
-                window.addEventListener(event, handleSessionExpire);
-            });
-            return () => {
-                events.forEach((event) => {
-                    window.removeEventListener(event, handleSessionExpire);
-                });
-            };
-        }, [handleSessionExpire]);
-        return (React.createElement("div", { id: 'sxp-render', 
-            // className={style['clc-sxp-container']}
-            style: { height: containerHeight, position: 'relative', pointerEvents } },
-            React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
-                    swiperRef.current.swiper.allowTouchMove = false;
-                    setTimeout(() => {
-                        swiperRef.current.swiper.allowTouchMove = true;
-                    }, 500);
-                }, onActiveIndexChange: (swiper) => {
-                    // setActiveIndex(swiper.activeIndex);
-                    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
-                }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
-                return renderView(rec, index);
-            }))));
-    };
-    var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
-
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-31 10:56:01
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-28 17:15:47
+     * @LastEditTime: 2024-10-23 15:07:29
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
      *
      */
@@ -20195,9 +19543,17 @@ Made in Italy` })));
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-03-20 10:27:31
+     * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-28 16:55:21
+     * @LastEditTime: 2025-02-24 15:47:44
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
+     *
+     */
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-11-24 15:58:00
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2023-12-26 10:24:42
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -20205,20 +19561,20 @@ Made in Italy` })));
     Object.values(_materials_).forEach((v) => {
         RESOLVER[v.extend.type] = v;
     });
-    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
+        var _a, _b, _c, _d, _e, _f;
         const utmVal = React.useMemo(() => {
             var _a;
             const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
             return searchParams;
         }, []);
-        const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
+        const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
         const [channel, setChannel] = React.useState();
         return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
-            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
-                    var _a, _b;
+            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
+                    var _a;
                     return (React.createElement(React.Fragment, null,
-                        React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
+                        React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
                         React.createElement(Popup, null)));
                 } })));
     };
@@ -20228,18 +19584,17 @@ Made in Italy` })));
      * @Author       : haocanweng@chatlabs.cn
      * @Date         : 2023-08-21 16:31:58
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-25 14:31:53
+     * @LastEditTime: 2024-06-25 11:37:48
      * @FilePath: \pb-sxp-ui\src\index.ts
      */
 
     exports.DiyPortalPreview = index$1;
-    exports.DiyStoryPreview = DiyStoryPreview$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
-    exports.SxpPageRender = index$2;
-    exports.core = index$3;
+    exports.SxpPageRender = SxpPageRender$1;
+    exports.core = index$2;
     exports.default = Pagebuilder;
     exports.materials = _materials_;
     exports.useEditorDataProvider = useEditorDataProvider;