pb-sxp-ui 1.15.15-alpha.1 → 1.15.16-alpha.1

package/lib/core/context/SxpDataSourceProvider.js

@@ -117,8 +117,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         }
         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}`, {
@@ -147,16 +151,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__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 = (0, tool_1.splitUrlParams)(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+            const val = (_k = (_j = (_h = (0, tool_1.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) });
         }
@@ -170,19 +175,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             let list = [];
             let result = null;
             const recurveRecList = (query) => tslib_1.__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);
@@ -190,13 +195,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             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;
         }
@@ -204,8 +209,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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);
             }
@@ -214,12 +219,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
     const loadVideos = (0, react_1.useCallback)((pageNum) => tslib_1.__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;
@@ -271,7 +276,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         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'
@@ -287,7 +292,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         bffDataSource
     ]);
     const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
+            window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
+                page_location: window.location.href,
+                page_title: document.title
+            });
+        }
         if (!enableReportEvent ||
             !enabledMetaConversionApi ||
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -351,7 +362,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
         };
         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 = (0, tool_1.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'
@@ -378,18 +397,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = (0, react_1.useCallback)((data) => tslib_1.__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 = (0, tool_1.splitUrlParams)(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
+            const val = (_10 = (_9 = (_8 = (0, tool_1.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);
@@ -449,10 +468,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport]);
     const getAccount = (0, react_1.useCallback)(() => tslib_1.__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 = (0, react_1.useCallback)((consentResult) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {

package/lib/index.d.ts

@@ -4,7 +4,6 @@ export * as core from './core';
 export * as materials from './materials';
 export { default as SxpPageRender } from './core/components/SxpPageRender';
 export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
-export { default as DiyStoryPreview } from './core/components/DiyStoryPreview';
 export { default as Modal } from './core/components/SxpPageRender/Modal';
 export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
 export { default as SxpPageCore } from './core/components/SxpPageCore';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyStoryPreview = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
+exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
 const tslib_1 = require("tslib");
 const Pagebuilder_1 = require("./core/Pagebuilder");
 require("./index.css");
@@ -10,8 +10,6 @@ var SxpPageRender_1 = require("./core/components/SxpPageRender");
 Object.defineProperty(exports, "SxpPageRender", { enumerable: true, get: function () { return tslib_1.__importDefault(SxpPageRender_1).default; } });
 var DiyPortalPreview_1 = require("./core/components/DiyPortalPreview");
 Object.defineProperty(exports, "DiyPortalPreview", { enumerable: true, get: function () { return tslib_1.__importDefault(DiyPortalPreview_1).default; } });
-var DiyStoryPreview_1 = require("./core/components/DiyStoryPreview");
-Object.defineProperty(exports, "DiyStoryPreview", { enumerable: true, get: function () { return tslib_1.__importDefault(DiyStoryPreview_1).default; } });
 var Modal_1 = require("./core/components/SxpPageRender/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return tslib_1.__importDefault(Modal_1).default; } });
 var SxpDataSourceProvider_1 = require("./core/context/SxpDataSourceProvider");

package/lib/materials/sxp/template/MultiCommodity/index.js

@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
-const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const tool_1 = require("../../../../core/utils/tool");
+const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const MultiCommodity = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);

package/lib/materials/sxp/template/MultiCommodityDiro/index.js

@@ -6,16 +6,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
 const Img_1 = tslib_1.__importDefault(require("../components/Img"));
-const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const tool_1 = require("../../../../core/utils/tool");
+const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const MultiCommodityDiro = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const [products] = (0, react_1.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_1.default.createElement(Scroll_1.default, { 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_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },

package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -6,16 +6,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
 const Img_1 = tslib_1.__importDefault(require("../components/Img"));
-const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const tool_1 = require("../../../../core/utils/tool");
+const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const [products] = (0, react_1.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_1.default.createElement(Scroll_1.default, { 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_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },

package/lib/materials/sxp/template/components/EventProvider.js

@@ -15,7 +15,7 @@ const EventProvider = (_a) => {
     const handleClick = (0, lodash_1.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'
@@ -42,6 +42,6 @@ const EventProvider = (_a) => {
             setElement(null);
         }
     }, [element, popup]);
-    return (react_1.default.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_1.default.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
 };
 exports.default = (0, react_1.memo)(EventProvider);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.15.15-alpha.1",
+  "version": "1.15.16-alpha.1",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/es/core/components/DiyStoryPreview/PictureGroup.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { postConfigType } from '../SxpPageRender';
-import { IScene, ScenesType } from '.';
-interface IPictureGroupProps {
-    imgUrls?: string[];
-    width: number;
-    height: number;
-    rec: IScene;
-    index: number;
-    imgUrlsPostConfig?: postConfigType;
-    swiperRef?: any;
-    data?: ScenesType;
-    loopPlay?: boolean;
-}
-declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
-export default _default;

package/es/core/components/DiyStoryPreview/PictureGroup.js

@@ -1,34 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import { Autoplay, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
-import Picture from '../SxpPageRender/PictureGroup/Picture';
-const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
-    const { isActive } = useSwiperSlide();
-    const [isload, setIsLoad] = useState(false);
-    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 })));
-    })));
-};
-export default memo(PictureGroup);

package/es/core/components/DiyStoryPreview/VideoWidget.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { postConfigType } from '../SxpPageRender';
-import { IScene, ScenesType } from '.';
-interface IVideoWidgetProps {
-    rec: IScene;
-    index: number;
-    height: number;
-    width: number;
-    data: ScenesType;
-    muted: boolean;
-    activeIndex?: number;
-    videoPostConfig?: postConfigType;
-    swiperRef?: any;
-    videoPlayIcon?: string;
-    onUpdateTimeLine?: (index: number, v: number) => void;
-    loopPlay: any;
-    onPlay?: (index: number, v: number) => void;
-    onPause?: () => void;
-}
-export interface IVideoWidgetRef {
-    play: () => void;
-    pause: () => void;
-    setLoopPlay: (v: boolean) => void;
-    isPlaying: () => boolean;
-}
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
-export default _default;

package/es/core/components/DiyStoryPreview/VideoWidget.js

@@ -1,239 +0,0 @@
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useSwiperSlide } from 'swiper/react';
-import { useIconLink } from '../SxpPageRender/useIconLink';
-import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
-import FormatImage from '../SxpPageRender/FormatImage';
-import { useSxpDataSource } from '../../../core/hooks';
-const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
-    const { isActive } = useSwiperSlide();
-    const [isPauseVideo, setIsPauseVideo] = useState(false);
-    const videoRef = useRef(null);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
-    const videoStartTime = useRef(0);
-    const [isLoadFinish, setIsLoadFinish] = useState(false);
-    const [isFirstPlay, setIsFirstPlay] = useState(true);
-    const canvasRef = useRef(null);
-    const [firstFrameSrc, setFirstFrameSrc] = useState('');
-    const videoId = `pb-cache-video-${index}`;
-    const hlsRef = useRef(null);
-    const loopPlayRef = useRef(loopPlay);
-    useEffect(() => {
-        loopPlayRef.current = loopPlay;
-    }, [loopPlay]);
-    useImperativeHandle(ref, () => {
-        return {
-            play() {
-                var _a;
-                if (!videoRef.current)
-                    return;
-                handleTimeUpload();
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-                setIsPauseVideo(false);
-            },
-            pause() {
-                var _a;
-                if (!videoRef.current)
-                    return;
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-                setIsPauseVideo(true);
-            },
-            setLoopPlay(v) {
-                if (!videoRef.current)
-                    return;
-                loopPlayRef.current = v;
-            },
-            isPlaying() {
-                var _a;
-                return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
-            }
-        };
-    });
-    useEffect(() => {
-        if (!videoRef.current)
-            return;
-        videoRef.current.muted = muted;
-    }, [muted]);
-    const handleVideoStart = useCallback(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-    }, []);
-    const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = 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;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = isFirstPlay ? '0' : '1';
-            setIsFirstPlay(false);
-        }
-    }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = 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);
-    }, []);
-    const handleClickVideo = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e, _f;
-        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !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 (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
-                        videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
-                    }
-                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
-                }
-                else {
-                    (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
-                }
-                setIsPauseVideo(!isPause);
-                break;
-        }
-    }, [isLoadFinish]);
-    const blur = useMemo(() => {
-        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-    }, [videoPostConfig]);
-    const translateY = 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 = 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 = useCallback(() => {
-        var _a;
-        if (!videoRef.current)
-            return;
-        const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
-        onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
-        setTimeout(() => {
-            var _a, _b;
-            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)) {
-                slideSwiper();
-            }
-        });
-    }, []);
-    const slideSwiper = () => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-        if (!loopPlayRef.current)
-            return;
-        if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-            (_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.slideTo(0);
-        }
-        else {
-            const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
-            (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
-        }
-    };
-    const handlePause = () => {
-        setIsPauseVideo(true);
-        onPause === null || onPause === void 0 ? void 0 : onPause();
-    };
-    const handlePlay = () => {
-        var _a;
-        const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
-        onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
-    };
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        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);
-        (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
-        (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
-        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
-        return () => {
-            var _a, _b, _c, _d, _e;
-            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);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
-            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
-        };
-    }, [isActive]);
-    const renderPoster = 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]);
-    const blurStyle = 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;
-    }
-    return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
-            position: 'relative',
-            width: '100%',
-            height,
-            overflow: 'hidden'
-        }, onClick: handleClickVideo() },
-        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
-        renderPoster,
-        isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
-});
-export default memo(VideoWidget);