pb-sxp-ui 1.15.15-alpha.1 → 1.15.16-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +135 -824
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +134 -822
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +135 -824
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageCore/index.d.ts +0 -1
- package/es/core/components/SxpPageCore/index.js +7 -7
- package/es/core/components/SxpPageRender/ExpandableText.js +2 -10
- package/es/core/components/SxpPageRender/RenderCard.js +4 -4
- package/es/core/context/EditorContext.js +1 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +47 -28
- package/es/index.d.ts +0 -1
- package/es/index.js +0 -1
- package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
- package/es/materials/sxp/template/components/EventProvider.js +2 -2
- package/lib/core/components/SxpPageCore/index.d.ts +0 -1
- package/lib/core/components/SxpPageCore/index.js +7 -7
- package/lib/core/components/SxpPageRender/ExpandableText.js +2 -10
- package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
- package/lib/core/context/EditorContext.js +1 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +47 -28
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -3
- package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
- package/lib/materials/sxp/template/components/EventProvider.js +2 -2
- package/package.json +1 -1
- package/es/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
- package/es/core/components/DiyStoryPreview/PictureGroup.js +0 -34
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
- package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -239
- package/es/core/components/DiyStoryPreview/index.d.ts +0 -51
- package/es/core/components/DiyStoryPreview/index.js +0 -411
- package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
- package/lib/core/components/DiyStoryPreview/PictureGroup.js +0 -37
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -242
- package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
- package/lib/core/components/DiyStoryPreview/index.js +0 -414
package/dist/index.js
CHANGED
@@ -429,6 +429,39 @@ const Pagebuilder = {
|
|
429
429
|
})
|
430
430
|
};
|
431
431
|
|
432
|
+
function useEditor() {
|
433
|
+
return useContext(EditorContext);
|
434
|
+
}
|
435
|
+
|
436
|
+
function useDataSource() {
|
437
|
+
return useContext(DataSourceContext);
|
438
|
+
}
|
439
|
+
|
440
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
441
|
+
const generateFeSessionId = () => {
|
442
|
+
const uid = getUid(); // 32位长度
|
443
|
+
const timestamp = Date.now(); // 13位长度
|
444
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
445
|
+
return result;
|
446
|
+
};
|
447
|
+
// 生成或者获取sessionID
|
448
|
+
const storeAndLoadFeSessionId = () => {
|
449
|
+
let result = getFeSessionId();
|
450
|
+
if (!result) {
|
451
|
+
result = generateFeSessionId();
|
452
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
453
|
+
}
|
454
|
+
return result;
|
455
|
+
};
|
456
|
+
const refreshFeSessionId = () => {
|
457
|
+
const result = generateFeSessionId();
|
458
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
459
|
+
};
|
460
|
+
// 获取 sessionID
|
461
|
+
const getFeSessionId = () => {
|
462
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
463
|
+
};
|
464
|
+
|
432
465
|
/*
|
433
466
|
* @Author: binruan@chatlabs.com
|
434
467
|
* @Date: 2024-03-20 10:27:31
|
@@ -480,39 +513,6 @@ const setUserConsentResult = () => {
|
|
480
513
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
481
514
|
};
|
482
515
|
|
483
|
-
function useEditor() {
|
484
|
-
return useContext(EditorContext);
|
485
|
-
}
|
486
|
-
|
487
|
-
function useDataSource() {
|
488
|
-
return useContext(DataSourceContext);
|
489
|
-
}
|
490
|
-
|
491
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
492
|
-
const generateFeSessionId = () => {
|
493
|
-
const uid = getUid(); // 32位长度
|
494
|
-
const timestamp = Date.now(); // 13位长度
|
495
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
496
|
-
return result;
|
497
|
-
};
|
498
|
-
// 生成或者获取sessionID
|
499
|
-
const storeAndLoadFeSessionId = () => {
|
500
|
-
let result = getFeSessionId();
|
501
|
-
if (!result) {
|
502
|
-
result = generateFeSessionId();
|
503
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
504
|
-
}
|
505
|
-
return result;
|
506
|
-
};
|
507
|
-
const refreshFeSessionId = () => {
|
508
|
-
const result = generateFeSessionId();
|
509
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
510
|
-
};
|
511
|
-
// 获取 sessionID
|
512
|
-
const getFeSessionId = () => {
|
513
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
514
|
-
};
|
515
|
-
|
516
516
|
/*
|
517
517
|
* @Author: binruan@chatlabs.com
|
518
518
|
* @Date: 2024-03-20 10:27:31
|
@@ -725,8 +725,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
725
725
|
// Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
|
726
726
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
727
727
|
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
728
|
-
JSON.stringify(
|
729
|
-
|
728
|
+
JSON.stringify({
|
729
|
+
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
730
|
+
})
|
731
|
+
], {
|
732
|
+
type: 'application/json;charset=UTF-8'
|
733
|
+
}));
|
730
734
|
}
|
731
735
|
return window
|
732
736
|
.fetch(`${url}/api/${path}`, {
|
@@ -757,16 +761,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
757
761
|
}, [bffDataSource]);
|
758
762
|
// 获取推荐视频数据
|
759
763
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
760
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
761
|
-
query = Object.assign({ maxSize:
|
764
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
765
|
+
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 }));
|
762
766
|
if (channel) {
|
763
767
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
764
768
|
}
|
765
769
|
else if (utmVal) {
|
766
|
-
const val = (
|
770
|
+
const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
|
771
|
+
var _a, _b;
|
767
772
|
const key = val.split('=')[0];
|
768
|
-
return key;
|
769
|
-
})) === null ||
|
773
|
+
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);
|
774
|
+
})) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
|
770
775
|
if (val)
|
771
776
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
772
777
|
}
|
@@ -780,19 +785,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
780
785
|
let list = [];
|
781
786
|
let result = null;
|
782
787
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
783
|
-
var
|
788
|
+
var _v, _w, _x, _y, _z, _0;
|
784
789
|
query.pageNum = pageNum;
|
785
790
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
786
791
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
787
792
|
return undefined;
|
788
793
|
}
|
789
794
|
setLoading(false);
|
790
|
-
list = list.concat((
|
795
|
+
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 : []);
|
791
796
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
792
797
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
793
798
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
794
799
|
}
|
795
|
-
const isNotNullList = (
|
800
|
+
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));
|
796
801
|
if (isNotNullList) {
|
797
802
|
pageNum = pageNum + 1;
|
798
803
|
yield recurveRecList(query);
|
@@ -800,13 +805,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
800
805
|
});
|
801
806
|
yield recurveRecList(query);
|
802
807
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
803
|
-
setCurReqInfo({ rtc: (
|
808
|
+
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 });
|
804
809
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
805
810
|
}
|
806
811
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
807
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
812
|
+
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 });
|
808
813
|
}
|
809
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
814
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
810
815
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
811
816
|
return undefined;
|
812
817
|
}
|
@@ -814,8 +819,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
814
819
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
815
820
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
816
821
|
let list = [];
|
817
|
-
list = list.concat((
|
818
|
-
const isNotNullList = (
|
822
|
+
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 : []);
|
823
|
+
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));
|
819
824
|
if (!isNotNullList) {
|
820
825
|
setIsNoMoreData(true);
|
821
826
|
}
|
@@ -824,12 +829,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
824
829
|
return result === null || result === void 0 ? void 0 : result.data;
|
825
830
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
826
831
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
827
|
-
var
|
832
|
+
var _1, _2, _3, _4;
|
828
833
|
if (rtcList.length <= 0) {
|
829
834
|
return;
|
830
835
|
}
|
831
836
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
832
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
837
|
+
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 })));
|
833
838
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
834
839
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
835
840
|
return data;
|
@@ -886,7 +891,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
886
891
|
console.log('userInfo:', userInfo);
|
887
892
|
console.log('eventInfo:', ef);
|
888
893
|
console.log('========= 结束 =========');
|
889
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/
|
894
|
+
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)}` : ''}`, {
|
890
895
|
method: 'POST',
|
891
896
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
892
897
|
type: 'beacon'
|
@@ -902,7 +907,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
902
907
|
bffDataSource
|
903
908
|
]);
|
904
909
|
const bffFbReport = useCallback(({ eventName, product }) => {
|
905
|
-
var _a, _b, _c, _d, _e, _f;
|
910
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
911
|
+
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
912
|
+
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
|
913
|
+
page_location: window.location.href,
|
914
|
+
page_title: document.title
|
915
|
+
});
|
916
|
+
}
|
906
917
|
if (!enableReportEvent ||
|
907
918
|
!enabledMetaConversionApi ||
|
908
919
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -966,7 +977,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
966
977
|
}
|
967
978
|
};
|
968
979
|
getEventParams(jsonParams);
|
969
|
-
|
980
|
+
const params = {};
|
981
|
+
const queryString = location.search.slice(1);
|
982
|
+
(_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
|
983
|
+
const key = val.split('=')[0];
|
984
|
+
const value = val.split('=')[1];
|
985
|
+
params[key] = value;
|
986
|
+
});
|
987
|
+
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
988
|
+
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)}` : ''}`, {
|
970
989
|
method: 'POST',
|
971
990
|
body: jsonParams,
|
972
991
|
type: 'beacon'
|
@@ -994,18 +1013,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
994
1013
|
}), [bffFetch]);
|
995
1014
|
// 获取 Tag
|
996
1015
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
997
|
-
var
|
998
|
-
const isShowTag = !!((
|
1016
|
+
var _5, _6, _7, _8, _9, _10, _11, _12;
|
1017
|
+
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);
|
999
1018
|
if (!utmVal || !isShowTag)
|
1000
1019
|
return;
|
1001
1020
|
try {
|
1002
|
-
const val = (
|
1021
|
+
const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
|
1003
1022
|
var _a, _b;
|
1004
1023
|
const key = val.split('=')[0];
|
1005
1024
|
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);
|
1006
|
-
})) === null ||
|
1025
|
+
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
1007
1026
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1008
|
-
setTagList((
|
1027
|
+
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 : []);
|
1009
1028
|
}
|
1010
1029
|
catch (e) {
|
1011
1030
|
console.log('e', e);
|
@@ -1065,10 +1084,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1065
1084
|
});
|
1066
1085
|
}, [bffEventReport]);
|
1067
1086
|
const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1068
|
-
var
|
1087
|
+
var _13, _14;
|
1069
1088
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1070
|
-
setChatlabsId((
|
1071
|
-
return ((
|
1089
|
+
setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
|
1090
|
+
return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
|
1072
1091
|
}), [bffFetch]);
|
1073
1092
|
const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1074
1093
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1463,7 +1482,7 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
|
|
1463
1482
|
React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
|
1464
1483
|
});
|
1465
1484
|
|
1466
|
-
var index$
|
1485
|
+
var index$2 = /*#__PURE__*/Object.freeze({
|
1467
1486
|
__proto__: null,
|
1468
1487
|
EditorCore: EditorCore
|
1469
1488
|
});
|
@@ -10083,15 +10102,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10083
10102
|
wordBreak: 'break-word'
|
10084
10103
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10085
10104
|
React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10086
|
-
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
10087
|
-
textDecoration: 'underline',
|
10088
|
-
cursor: 'pointer',
|
10089
|
-
outline: 'none',
|
10090
|
-
border: 'none',
|
10091
|
-
boxSizing: 'content-box',
|
10092
|
-
padding: 0,
|
10093
|
-
background: 'transparent'
|
10094
|
-
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
10105
|
+
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: {
|
10095
10106
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
10096
10107
|
} }))));
|
10097
10108
|
};
|
@@ -12449,7 +12460,7 @@ const EventProvider = (_a) => {
|
|
12449
12460
|
const handleClick = throttle((e) => {
|
12450
12461
|
var _a, _b, _c, _d, _e, _f;
|
12451
12462
|
e.preventDefault();
|
12452
|
-
const item = multItem
|
12463
|
+
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;
|
12453
12464
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
12454
12465
|
eventSubject: 'clickCta',
|
12455
12466
|
eventDescription: 'User clicked the CTA'
|
@@ -12476,7 +12487,7 @@ const EventProvider = (_a) => {
|
|
12476
12487
|
setElement(null);
|
12477
12488
|
}
|
12478
12489
|
}, [element, popup]);
|
12479
|
-
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({
|
12490
|
+
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));
|
12480
12491
|
};
|
12481
12492
|
var EventProvider$1 = memo(EventProvider);
|
12482
12493
|
|
@@ -13072,7 +13083,6 @@ const MultiCommodityDiro$1 = (_a) => {
|
|
13072
13083
|
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"]);
|
13073
13084
|
const { sxpParameter } = useSxpDataSource();
|
13074
13085
|
const [products] = 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]);
|
13075
|
-
console.log(recData, '222');
|
13076
13086
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13077
13087
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
13078
13088
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -13279,7 +13289,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
|
|
13279
13289
|
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"]);
|
13280
13290
|
const { sxpParameter } = useSxpDataSource();
|
13281
13291
|
const [products] = 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]);
|
13282
|
-
console.log(recData, '333');
|
13283
13292
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13284
13293
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
13285
13294
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -17555,15 +17564,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
|
|
17555
17564
|
Swipe: Swipe
|
17556
17565
|
});
|
17557
17566
|
|
17558
|
-
const defaultUnLikeIconPath$
|
17559
|
-
const defaultLikeIconPath$
|
17567
|
+
const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
17568
|
+
const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
17560
17569
|
const LikeButton = (_a) => {
|
17561
17570
|
var _b;
|
17562
17571
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
17563
17572
|
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
17564
17573
|
const [state, setState] = useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
|
17565
|
-
const likeIcon = useIconLink(defaultLikeIconPath$
|
17566
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath$
|
17574
|
+
const likeIcon = useIconLink(defaultLikeIconPath$1);
|
17575
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
|
17567
17576
|
const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17568
17577
|
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17569
17578
|
if (state) {
|
@@ -17654,7 +17663,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17654
17663
|
};
|
17655
17664
|
})();
|
17656
17665
|
|
17657
|
-
const VideoWidget$
|
17666
|
+
const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
17658
17667
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
17659
17668
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
17660
17669
|
const videoStartTime = useRef(0);
|
@@ -17999,7 +18008,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
17999
18008
|
renderLoading,
|
18000
18009
|
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
|
18001
18010
|
};
|
18002
|
-
var VideoWidget$
|
18011
|
+
var VideoWidget$3 = memo(VideoWidget$2);
|
18003
18012
|
|
18004
18013
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
18005
18014
|
const [isTrue, setIsTure] = useState(defaultValue);
|
@@ -18088,7 +18097,7 @@ const Picture = (props) => {
|
|
18088
18097
|
}, onLoad: onShowFirstImage }))));
|
18089
18098
|
};
|
18090
18099
|
|
18091
|
-
const PictureGroup$
|
18100
|
+
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18092
18101
|
var _a, _b;
|
18093
18102
|
const { isActive } = useSwiperSlide();
|
18094
18103
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -18182,7 +18191,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18182
18191
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18183
18192
|
}))));
|
18184
18193
|
};
|
18185
|
-
var PictureGroup$
|
18194
|
+
var PictureGroup$3 = memo(PictureGroup$2);
|
18186
18195
|
|
18187
18196
|
/*
|
18188
18197
|
* @Author: binruan@chatlabs.com
|
@@ -18298,7 +18307,7 @@ function withBindDataSource(Component) {
|
|
18298
18307
|
* @Author: binruan@chatlabs.com
|
18299
18308
|
* @Date: 2023-12-26 16:11:34
|
18300
18309
|
* @LastEditors: binruan@chatlabs.com
|
18301
|
-
* @LastEditTime:
|
18310
|
+
* @LastEditTime: 2024-10-31 10:30:55
|
18302
18311
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18303
18312
|
*
|
18304
18313
|
*/
|
@@ -18308,10 +18317,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18308
18317
|
return null;
|
18309
18318
|
const renderComp = useMemo(() => {
|
18310
18319
|
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;
|
18311
|
-
|
18320
|
+
//如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18312
18321
|
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)))
|
18313
18322
|
return;
|
18314
|
-
|
18323
|
+
//默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18315
18324
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18316
18325
|
return;
|
18317
18326
|
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)) ||
|
@@ -18328,10 +18337,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18328
18337
|
const Component = withBindDataSource(t);
|
18329
18338
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18330
18339
|
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';
|
18331
|
-
|
18340
|
+
let style = cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18332
18341
|
if (style.hasOwnProperty('backdropFilter')) {
|
18333
|
-
|
18334
|
-
style
|
18342
|
+
let sbf = style['backdropFilter'];
|
18343
|
+
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18335
18344
|
}
|
18336
18345
|
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 })));
|
18337
18346
|
}
|
@@ -18692,10 +18701,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18692
18701
|
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)));
|
18693
18702
|
}
|
18694
18703
|
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18695
|
-
return (React.createElement(VideoWidget$
|
18704
|
+
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 }));
|
18696
18705
|
}
|
18697
18706
|
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18698
|
-
return (React.createElement(PictureGroup$
|
18707
|
+
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 }));
|
18699
18708
|
}
|
18700
18709
|
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) {
|
18701
18710
|
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
@@ -19063,9 +19072,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19063
19072
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
19064
19073
|
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 } })))))));
|
19065
19074
|
};
|
19066
|
-
var
|
19075
|
+
var SxpPageRender$1 = memo(SxpPageRender);
|
19067
19076
|
|
19068
|
-
const PictureGroup
|
19077
|
+
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
19069
19078
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19070
19079
|
clickable: true,
|
19071
19080
|
bulletActiveClass: 'swipe-item-active-bullet',
|
@@ -19075,9 +19084,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
|
|
19075
19084
|
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
19076
19085
|
})));
|
19077
19086
|
};
|
19078
|
-
var PictureGroup$
|
19087
|
+
var PictureGroup$1 = memo(PictureGroup);
|
19079
19088
|
|
19080
|
-
const VideoWidget
|
19089
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
19081
19090
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
19082
19091
|
const videoRef = useRef(null);
|
19083
19092
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
@@ -19307,14 +19316,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19307
19316
|
renderPoster,
|
19308
19317
|
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
19309
19318
|
};
|
19310
|
-
var VideoWidget$
|
19319
|
+
var VideoWidget$1 = memo(VideoWidget);
|
19311
19320
|
|
19312
|
-
const RESOLVER$
|
19321
|
+
const RESOLVER$1 = {};
|
19313
19322
|
Object.values(_materials_).forEach((v) => {
|
19314
|
-
RESOLVER$
|
19323
|
+
RESOLVER$1[v.extend.type] = v;
|
19315
19324
|
});
|
19316
|
-
const defaultUnLikeIconPath
|
19317
|
-
const defaultLikeIconPath
|
19325
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19326
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19318
19327
|
const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
|
19319
19328
|
const height = useMemo(() => {
|
19320
19329
|
let minusHeight = 0;
|
@@ -19329,16 +19338,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19329
19338
|
const renderContent = (rec, index) => {
|
19330
19339
|
var _a, _b, _c, _d;
|
19331
19340
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
19332
|
-
return (React.createElement(VideoWidget$
|
19341
|
+
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 }));
|
19333
19342
|
}
|
19334
19343
|
if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
19335
|
-
return (React.createElement(PictureGroup$
|
19344
|
+
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 }));
|
19336
19345
|
}
|
19337
19346
|
if (rec.product) {
|
19338
19347
|
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) {
|
19339
19348
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
19340
19349
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19341
|
-
const t = RESOLVER$
|
19350
|
+
const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19342
19351
|
const Component = withBindDataSource(t);
|
19343
19352
|
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
19344
19353
|
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) || {},
|
@@ -19360,7 +19369,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19360
19369
|
const CTA = (rec, index) => {
|
19361
19370
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
19362
19371
|
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
19363
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$
|
19372
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
|
19364
19373
|
}
|
19365
19374
|
return null;
|
19366
19375
|
};
|
@@ -19378,8 +19387,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19378
19387
|
}
|
19379
19388
|
return null;
|
19380
19389
|
};
|
19381
|
-
const likeIcon = useIconLink(defaultLikeIconPath
|
19382
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath
|
19390
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19391
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19383
19392
|
const renderLikeButton = (rec, index) => {
|
19384
19393
|
var _a, _b, _c, _d;
|
19385
19394
|
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
@@ -19429,716 +19438,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19429
19438
|
};
|
19430
19439
|
var index$1 = memo(DiyPortalPreview);
|
19431
19440
|
|
19432
|
-
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
|
19433
|
-
const { isActive } = useSwiperSlide();
|
19434
|
-
const [isload, setIsLoad] = useState(false);
|
19435
|
-
useEffect(() => {
|
19436
|
-
if (isActive && isload && loopPlay) {
|
19437
|
-
setTimeout(() => {
|
19438
|
-
var _a, _b, _c, _d;
|
19439
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19440
|
-
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
|
19441
|
-
}
|
19442
|
-
else {
|
19443
|
-
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;
|
19444
|
-
(_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
|
19445
|
-
}
|
19446
|
-
}, 3000);
|
19447
|
-
}
|
19448
|
-
}, [isActive, isload, data, index, swiperRef, loopPlay]);
|
19449
|
-
const loadFinishImage = () => {
|
19450
|
-
setIsLoad(true);
|
19451
|
-
};
|
19452
|
-
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19453
|
-
clickable: true,
|
19454
|
-
bulletActiveClass: 'swipe-item-active-bullet',
|
19455
|
-
bulletElement: 'button'
|
19456
|
-
}, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
|
19457
|
-
return (React.createElement(SwiperSlide, { key: url },
|
19458
|
-
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
|
19459
|
-
})));
|
19460
|
-
};
|
19461
|
-
var PictureGroup$1 = memo(PictureGroup);
|
19462
|
-
|
19463
|
-
const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
|
19464
|
-
const { isActive } = useSwiperSlide();
|
19465
|
-
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
19466
|
-
const videoRef = useRef(null);
|
19467
|
-
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
19468
|
-
const videoStartTime = useRef(0);
|
19469
|
-
const [isLoadFinish, setIsLoadFinish] = useState(false);
|
19470
|
-
const [isFirstPlay, setIsFirstPlay] = useState(true);
|
19471
|
-
const canvasRef = useRef(null);
|
19472
|
-
const [firstFrameSrc, setFirstFrameSrc] = useState('');
|
19473
|
-
const videoId = `pb-cache-video-${index}`;
|
19474
|
-
const hlsRef = useRef(null);
|
19475
|
-
const loopPlayRef = useRef(loopPlay);
|
19476
|
-
useEffect(() => {
|
19477
|
-
loopPlayRef.current = loopPlay;
|
19478
|
-
}, [loopPlay]);
|
19479
|
-
useImperativeHandle(ref, () => {
|
19480
|
-
return {
|
19481
|
-
play() {
|
19482
|
-
var _a;
|
19483
|
-
if (!videoRef.current)
|
19484
|
-
return;
|
19485
|
-
handleTimeUpload();
|
19486
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19487
|
-
setIsPauseVideo(false);
|
19488
|
-
},
|
19489
|
-
pause() {
|
19490
|
-
var _a;
|
19491
|
-
if (!videoRef.current)
|
19492
|
-
return;
|
19493
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19494
|
-
setIsPauseVideo(true);
|
19495
|
-
},
|
19496
|
-
setLoopPlay(v) {
|
19497
|
-
if (!videoRef.current)
|
19498
|
-
return;
|
19499
|
-
loopPlayRef.current = v;
|
19500
|
-
},
|
19501
|
-
isPlaying() {
|
19502
|
-
var _a;
|
19503
|
-
return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
|
19504
|
-
}
|
19505
|
-
};
|
19506
|
-
});
|
19507
|
-
useEffect(() => {
|
19508
|
-
if (!videoRef.current)
|
19509
|
-
return;
|
19510
|
-
videoRef.current.muted = muted;
|
19511
|
-
}, [muted]);
|
19512
|
-
useCallback(() => {
|
19513
|
-
var _a;
|
19514
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19515
|
-
}, []);
|
19516
|
-
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19517
|
-
useCallback(() => {
|
19518
|
-
var _a, _b, _c, _d, _e, _f;
|
19519
|
-
setIsPauseVideo(false);
|
19520
|
-
const item = data[index];
|
19521
|
-
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
19522
|
-
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
19523
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
19524
|
-
((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
19525
|
-
setIsFirstPlay(false);
|
19526
|
-
}
|
19527
|
-
}, [bffEventReport, data, index, isFirstPlay]);
|
19528
|
-
const handleLoadedMetadata = useCallback(() => {
|
19529
|
-
var _a;
|
19530
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19531
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19532
|
-
setIsLoadFinish(true);
|
19533
|
-
}, []);
|
19534
|
-
const handleClickVideo = useCallback((type) => () => {
|
19535
|
-
var _a, _b, _c, _d, _e, _f;
|
19536
|
-
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
19537
|
-
return;
|
19538
|
-
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
19539
|
-
switch (type) {
|
19540
|
-
case 'start':
|
19541
|
-
if (!isPause)
|
19542
|
-
return;
|
19543
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
19544
|
-
setIsPauseVideo(false);
|
19545
|
-
break;
|
19546
|
-
case 'pause':
|
19547
|
-
if (isPause)
|
19548
|
-
return;
|
19549
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19550
|
-
setIsPauseVideo(true);
|
19551
|
-
break;
|
19552
|
-
default:
|
19553
|
-
if (isPause) {
|
19554
|
-
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)) {
|
19555
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19556
|
-
}
|
19557
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
19558
|
-
}
|
19559
|
-
else {
|
19560
|
-
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
19561
|
-
}
|
19562
|
-
setIsPauseVideo(!isPause);
|
19563
|
-
break;
|
19564
|
-
}
|
19565
|
-
}, [isLoadFinish]);
|
19566
|
-
const blur = useMemo(() => {
|
19567
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
19568
|
-
}, [videoPostConfig]);
|
19569
|
-
useMemo(() => {
|
19570
|
-
var _a;
|
19571
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
19572
|
-
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
|
19573
|
-
: 'translateY(-50%)';
|
19574
|
-
}, [videoPostConfig]);
|
19575
|
-
useCallback(() => {
|
19576
|
-
if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
|
19577
|
-
return;
|
19578
|
-
const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
|
19579
|
-
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
19580
|
-
const ctx = canvas.getContext('2d');
|
19581
|
-
const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
|
19582
|
-
const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
|
19583
|
-
canvas.height = targetHeight;
|
19584
|
-
canvas.width = targetWidth;
|
19585
|
-
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
19586
|
-
setFirstFrameSrc(canvas.toDataURL());
|
19587
|
-
}, []);
|
19588
|
-
const handleTimeUpload = useCallback(() => {
|
19589
|
-
var _a;
|
19590
|
-
if (!videoRef.current)
|
19591
|
-
return;
|
19592
|
-
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);
|
19593
|
-
onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
|
19594
|
-
setTimeout(() => {
|
19595
|
-
var _a, _b;
|
19596
|
-
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)) {
|
19597
|
-
slideSwiper();
|
19598
|
-
}
|
19599
|
-
});
|
19600
|
-
}, []);
|
19601
|
-
const slideSwiper = () => {
|
19602
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
19603
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19604
|
-
if (!loopPlayRef.current)
|
19605
|
-
return;
|
19606
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19607
|
-
(_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);
|
19608
|
-
}
|
19609
|
-
else {
|
19610
|
-
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;
|
19611
|
-
(_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);
|
19612
|
-
}
|
19613
|
-
};
|
19614
|
-
const handlePause = () => {
|
19615
|
-
setIsPauseVideo(true);
|
19616
|
-
onPause === null || onPause === void 0 ? void 0 : onPause();
|
19617
|
-
};
|
19618
|
-
const handlePlay = () => {
|
19619
|
-
var _a;
|
19620
|
-
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);
|
19621
|
-
onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
|
19622
|
-
};
|
19623
|
-
useEffect(() => {
|
19624
|
-
var _a, _b, _c, _d;
|
19625
|
-
if (!isActive)
|
19626
|
-
return;
|
19627
|
-
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
19628
|
-
if (!videoSrc)
|
19629
|
-
return;
|
19630
|
-
setIsPauseVideo(false);
|
19631
|
-
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
19632
|
-
if (!videoPlayerWrapperNode)
|
19633
|
-
return;
|
19634
|
-
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
19635
|
-
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
19636
|
-
return;
|
19637
|
-
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
19638
|
-
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
19639
|
-
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
19640
|
-
hls = new Hls();
|
19641
|
-
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
19642
|
-
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
19643
|
-
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
19644
|
-
var _a;
|
19645
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19646
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19647
|
-
});
|
19648
|
-
}
|
19649
|
-
else {
|
19650
|
-
videoRef.current.src = videoSrc;
|
19651
|
-
}
|
19652
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
19653
|
-
// videoRef.current?.addEventListener('playing', handlePlaying);
|
19654
|
-
// videoRef.current?.addEventListener('loadeddata', handLoadeddata);
|
19655
|
-
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
19656
|
-
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
|
19657
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
|
19658
|
-
return () => {
|
19659
|
-
var _a, _b, _c, _d, _e;
|
19660
|
-
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
19661
|
-
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
19662
|
-
setIsLoadFinish(false);
|
19663
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
19664
|
-
// videoRef.current?.removeEventListener('playing', handlePlaying);
|
19665
|
-
// videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
|
19666
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
19667
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
|
19668
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
|
19669
|
-
};
|
19670
|
-
}, [isActive]);
|
19671
|
-
const renderPoster = useMemo(() => {
|
19672
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19673
|
-
return null;
|
19674
|
-
}
|
19675
|
-
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' }));
|
19676
|
-
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
19677
|
-
useMemo(() => {
|
19678
|
-
return blur
|
19679
|
-
? {
|
19680
|
-
filter: 'blur(10px)',
|
19681
|
-
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
19682
|
-
}
|
19683
|
-
: {};
|
19684
|
-
}, [blur]);
|
19685
|
-
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19686
|
-
return null;
|
19687
|
-
}
|
19688
|
-
// const renderLoading = useMemo(() => {
|
19689
|
-
// if (!waiting || !isLoadFinish) return;
|
19690
|
-
// return (
|
19691
|
-
// <img
|
19692
|
-
// style={{
|
19693
|
-
// position: 'absolute',
|
19694
|
-
// top: '50%',
|
19695
|
-
// left: 0,
|
19696
|
-
// right: 0,
|
19697
|
-
// transform: 'translateY(-100%)',
|
19698
|
-
// margin: 'auto',
|
19699
|
-
// width: '50px',
|
19700
|
-
// height: '50px',
|
19701
|
-
// objectFit: 'contain'
|
19702
|
-
// }}
|
19703
|
-
// src={loading_gif}
|
19704
|
-
// alt='placeholder image'
|
19705
|
-
// />
|
19706
|
-
// );
|
19707
|
-
// }, [waiting, isLoadFinish]);
|
19708
|
-
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19709
|
-
position: 'relative',
|
19710
|
-
width: '100%',
|
19711
|
-
height,
|
19712
|
-
overflow: 'hidden'
|
19713
|
-
}, onClick: handleClickVideo() },
|
19714
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19715
|
-
renderPoster,
|
19716
|
-
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19717
|
-
});
|
19718
|
-
var VideoWidget$1 = memo(VideoWidget);
|
19719
|
-
|
19720
|
-
/*
|
19721
|
-
* @Author: binruan@chatlabs.com
|
19722
|
-
* @Date: 2025-03-25 13:54:27
|
19723
|
-
* @LastEditors: binruan@chatlabs.com
|
19724
|
-
* @LastEditTime: 2025-04-01 17:54:08
|
19725
|
-
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19726
|
-
*
|
19727
|
-
*/
|
19728
|
-
const recData = {
|
19729
|
-
position: 0,
|
19730
|
-
isCollected: false,
|
19731
|
-
product: null,
|
19732
|
-
video: {
|
19733
|
-
appId: null,
|
19734
|
-
itemId: 'VIDEOSsRgI1695278974368',
|
19735
|
-
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
19736
|
-
enTitle: null,
|
19737
|
-
icon: null,
|
19738
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
19739
|
-
link: null,
|
19740
|
-
linkTitle: null,
|
19741
|
-
linkType: null,
|
19742
|
-
menuCategoryId: null,
|
19743
|
-
remark: null,
|
19744
|
-
tags: [
|
19745
|
-
'Gift-Giving',
|
19746
|
-
'Daily Wear',
|
19747
|
-
'Business Formal',
|
19748
|
-
'Sports/Casual',
|
19749
|
-
'Anniversary Gifts',
|
19750
|
-
'Wedding/Engagement',
|
19751
|
-
'Formal Dinner/Party'
|
19752
|
-
],
|
19753
|
-
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19754
|
-
value: 385,
|
19755
|
-
weight: null,
|
19756
|
-
bindCta: null,
|
19757
|
-
bindProduct: null,
|
19758
|
-
bindProducts: [
|
19759
|
-
{
|
19760
|
-
appId: 'wx448578f8851f3dce',
|
19761
|
-
itemId: 'test02178888',
|
19762
|
-
title: 'christian dior小包包 新CDN',
|
19763
|
-
enTitle: null,
|
19764
|
-
icon: null,
|
19765
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19766
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19767
|
-
linkTitle: '',
|
19768
|
-
linkType: 'MP',
|
19769
|
-
menuCategoryId: null,
|
19770
|
-
remark: null,
|
19771
|
-
tags: [],
|
19772
|
-
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19773
|
-
value: null,
|
19774
|
-
weight: null,
|
19775
|
-
bindCta: {
|
19776
|
-
appId: 'wx448578f8851f3dce',
|
19777
|
-
itemId: 'CTA3KofE1716186622249',
|
19778
|
-
title: 'SHOP NOW 立即购买',
|
19779
|
-
enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
|
19780
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
19781
|
-
cover: null,
|
19782
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19783
|
-
linkTitle: '',
|
19784
|
-
linkType: 'MP',
|
19785
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19786
|
-
remark: null,
|
19787
|
-
tags: [
|
19788
|
-
"Woman's Perfumes",
|
19789
|
-
'Plates & Bowls',
|
19790
|
-
'Glasses',
|
19791
|
-
'Multicolor',
|
19792
|
-
'Carafes',
|
19793
|
-
'Tea & Coffee',
|
19794
|
-
'Green',
|
19795
|
-
'Grey',
|
19796
|
-
'Cutlery'
|
19797
|
-
],
|
19798
|
-
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19799
|
-
value: null,
|
19800
|
-
weight: null
|
19801
|
-
},
|
19802
|
-
collection: 'Ricco',
|
19803
|
-
currency: 'INR-₹',
|
19804
|
-
homePage: [
|
19805
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19806
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
19807
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
19808
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
19809
|
-
],
|
19810
|
-
info: 'test',
|
19811
|
-
price: 53200,
|
19812
|
-
shippingInfo: null,
|
19813
|
-
taxInfo: null
|
19814
|
-
},
|
19815
|
-
{
|
19816
|
-
appId: null,
|
19817
|
-
itemId: '113J631A0684_C520',
|
19818
|
-
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
19819
|
-
enTitle: null,
|
19820
|
-
icon: null,
|
19821
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19822
|
-
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
19823
|
-
linkTitle: null,
|
19824
|
-
linkType: 'WEB',
|
19825
|
-
menuCategoryId: null,
|
19826
|
-
remark: null,
|
19827
|
-
tags: [],
|
19828
|
-
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19829
|
-
value: null,
|
19830
|
-
weight: null,
|
19831
|
-
bindCta: {
|
19832
|
-
appId: null,
|
19833
|
-
itemId: 'CTAAfaKf1730796437032',
|
19834
|
-
title: 'test',
|
19835
|
-
enTitle: 'test',
|
19836
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
19837
|
-
cover: null,
|
19838
|
-
link: null,
|
19839
|
-
linkTitle: null,
|
19840
|
-
linkType: null,
|
19841
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19842
|
-
remark: '',
|
19843
|
-
tags: [],
|
19844
|
-
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19845
|
-
value: null,
|
19846
|
-
weight: null
|
19847
|
-
},
|
19848
|
-
collection: 'Jacquard de coton éponge bleu',
|
19849
|
-
currency: 'EUR-€',
|
19850
|
-
homePage: [
|
19851
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19852
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
19853
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
19854
|
-
],
|
19855
|
-
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",
|
19856
|
-
price: 1800,
|
19857
|
-
shippingInfo: null,
|
19858
|
-
taxInfo: null
|
19859
|
-
},
|
19860
|
-
{
|
19861
|
-
appId: null,
|
19862
|
-
itemId: 'S5573CRIW_M928',
|
19863
|
-
title: 'Mini Dior Book Tote',
|
19864
|
-
enTitle: null,
|
19865
|
-
icon: null,
|
19866
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19867
|
-
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
19868
|
-
linkTitle: null,
|
19869
|
-
linkType: 'WEB',
|
19870
|
-
menuCategoryId: null,
|
19871
|
-
remark: null,
|
19872
|
-
tags: ['ダイヤモンド'],
|
19873
|
-
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19874
|
-
value: null,
|
19875
|
-
weight: null,
|
19876
|
-
bindCta: null,
|
19877
|
-
collection: null,
|
19878
|
-
currency: 'GBP-£',
|
19879
|
-
homePage: [
|
19880
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19881
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
19882
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
19883
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
19884
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
19885
|
-
],
|
19886
|
-
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.",
|
19887
|
-
price: 1950,
|
19888
|
-
shippingInfo: null,
|
19889
|
-
taxInfo: null
|
19890
|
-
}
|
19891
|
-
],
|
19892
|
-
url: null,
|
19893
|
-
blockCta: 1,
|
19894
|
-
blockProduct: 1,
|
19895
|
-
hashTags: [
|
19896
|
-
'Sports/Casual',
|
19897
|
-
'Formal Dinner/Party',
|
19898
|
-
'Business Formal',
|
19899
|
-
'Wedding/Engagement',
|
19900
|
-
'Gift-Giving',
|
19901
|
-
'Daily Wear',
|
19902
|
-
'Anniversary Gifts'
|
19903
|
-
]
|
19904
|
-
}
|
19905
|
-
};
|
19906
|
-
const RESOLVER$1 = {};
|
19907
|
-
Object.values(_materials_).forEach((v) => {
|
19908
|
-
RESOLVER$1[v.extend.type] = v;
|
19909
|
-
});
|
19910
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19911
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19912
|
-
const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
|
19913
|
-
const videoWidgetRef = useRef(null);
|
19914
|
-
const swiperRef = useRef(null);
|
19915
|
-
const [curIndex, setCurIndex] = useState(0);
|
19916
|
-
useMemo(() => {
|
19917
|
-
let minusHeight = 0;
|
19918
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19919
|
-
minusHeight += 45;
|
19920
|
-
}
|
19921
|
-
if (tagList.length > 0) {
|
19922
|
-
minusHeight += 45;
|
19923
|
-
}
|
19924
|
-
return containerHeight - minusHeight;
|
19925
|
-
}, [globalConfig, containerHeight, tagList]);
|
19926
|
-
useImperativeHandle(ref, () => {
|
19927
|
-
return {
|
19928
|
-
play() {
|
19929
|
-
var _a;
|
19930
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19931
|
-
},
|
19932
|
-
pause() {
|
19933
|
-
var _a;
|
19934
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19935
|
-
},
|
19936
|
-
slideTo(n) {
|
19937
|
-
var _a, _b;
|
19938
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
19939
|
-
return;
|
19940
|
-
(_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(n);
|
19941
|
-
},
|
19942
|
-
isPlaying() {
|
19943
|
-
var _a, _b;
|
19944
|
-
return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
|
19945
|
-
}
|
19946
|
-
};
|
19947
|
-
});
|
19948
|
-
// 判断是否是视频
|
19949
|
-
const isVideoUrl = (url) => {
|
19950
|
-
if (url && url !== '' && typeof url === 'string') {
|
19951
|
-
const imageExtensions = ['.mp4', '.m3u8'];
|
19952
|
-
const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
|
19953
|
-
return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
|
19954
|
-
}
|
19955
|
-
else {
|
19956
|
-
return false;
|
19957
|
-
}
|
19958
|
-
};
|
19959
|
-
const renderContent = (rec, index) => {
|
19960
|
-
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19961
|
-
if (isVideo) {
|
19962
|
-
return (React.createElement(VideoWidget$1, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { 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: loopPlay, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
|
19963
|
-
}
|
19964
|
-
else {
|
19965
|
-
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 }));
|
19966
|
-
}
|
19967
|
-
};
|
19968
|
-
useMemo(() => {
|
19969
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19970
|
-
return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
19971
|
-
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
19972
|
-
}
|
19973
|
-
return null;
|
19974
|
-
}, [globalConfig]);
|
19975
|
-
const renderBottom = (rec, index) => {
|
19976
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19977
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19978
|
-
let cta = null;
|
19979
|
-
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) {
|
19980
|
-
cta = '多商品CTA';
|
19981
|
-
}
|
19982
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19983
|
-
cta = '商品CTA';
|
19984
|
-
}
|
19985
|
-
else {
|
19986
|
-
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;
|
19987
|
-
}
|
19988
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19989
|
-
return (React.createElement(React.Fragment, null,
|
19990
|
-
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
19991
|
-
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
19992
|
-
height: '130px',
|
19993
|
-
position: 'absolute',
|
19994
|
-
bottom: 0,
|
19995
|
-
width: '100%',
|
19996
|
-
willChange: 'transform',
|
19997
|
-
zIndex: 2,
|
19998
|
-
pointerEvents
|
19999
|
-
} })),
|
20000
|
-
React.createElement("div", { style: {
|
20001
|
-
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
20002
|
-
zIndex: 999,
|
20003
|
-
position: 'absolute',
|
20004
|
-
bottom: 0,
|
20005
|
-
left: 0,
|
20006
|
-
right: 0,
|
20007
|
-
paddingTop: '20px'
|
20008
|
-
} },
|
20009
|
-
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
20010
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
20011
|
-
React.createElement("div", null,
|
20012
|
-
React.createElement(ExpandableText$1
|
20013
|
-
// className='clc-sxp-bottom-text'
|
20014
|
-
, {
|
20015
|
-
// className='clc-sxp-bottom-text'
|
20016
|
-
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' }) }),
|
20017
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
20018
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
20019
|
-
}
|
20020
|
-
return null;
|
20021
|
-
};
|
20022
|
-
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
20023
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
20024
|
-
const renderLikeButton = (rec, index) => {
|
20025
|
-
var _a, _b, _c, _d;
|
20026
|
-
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
20027
|
-
return;
|
20028
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
20029
|
-
if (top < 40) {
|
20030
|
-
top += 40;
|
20031
|
-
}
|
20032
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
20033
|
-
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,
|
20034
|
-
// className={style['clc-sxp-like-button']}
|
20035
|
-
style: {
|
20036
|
-
top,
|
20037
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
20038
|
-
position: 'absolute',
|
20039
|
-
zIndex: 999,
|
20040
|
-
backgroundColor: 'transparent',
|
20041
|
-
width: '50px',
|
20042
|
-
height: '50px',
|
20043
|
-
outline: 'none',
|
20044
|
-
border: 'none',
|
20045
|
-
boxSizing: 'content-box',
|
20046
|
-
padding: 0,
|
20047
|
-
transform: 'translate3d(0px, 0px, 0px)'
|
20048
|
-
} }));
|
20049
|
-
}
|
20050
|
-
return null;
|
20051
|
-
};
|
20052
|
-
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
20053
|
-
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
20054
|
-
const renderToggleButton = (visible) => {
|
20055
|
-
var _a, _b, _c, _d;
|
20056
|
-
if (!visible)
|
20057
|
-
return;
|
20058
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
20059
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
20060
|
-
top += 45;
|
20061
|
-
}
|
20062
|
-
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: {
|
20063
|
-
position: 'absolute',
|
20064
|
-
visibility: 'visible',
|
20065
|
-
zIndex: 999,
|
20066
|
-
transform: 'translate3d(0px,0px,0px)',
|
20067
|
-
[(_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,
|
20068
|
-
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
20069
|
-
backgroundColor: 'transparent',
|
20070
|
-
width: '50px',
|
20071
|
-
height: '50px',
|
20072
|
-
outline: 'none',
|
20073
|
-
border: 'none',
|
20074
|
-
boxSizing: 'content-box',
|
20075
|
-
padding: 0
|
20076
|
-
}, 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 })));
|
20077
|
-
};
|
20078
|
-
const renderView = (item, index) => {
|
20079
|
-
var _a, _b, _c, _d;
|
20080
|
-
const rec = cloneDeep(recData);
|
20081
|
-
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20082
|
-
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20083
|
-
return (React.createElement("div", { style: { position: 'relative' } },
|
20084
|
-
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20085
|
-
renderBottom(rec, index),
|
20086
|
-
renderLikeButton(rec, index),
|
20087
|
-
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
20088
|
-
React.createElement(ToggleButton$1, { style: {
|
20089
|
-
position: 'absolute',
|
20090
|
-
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
20091
|
-
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',
|
20092
|
-
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
20093
|
-
zIndex: 999
|
20094
|
-
}, 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 }),
|
20095
|
-
renderContent(item, index))));
|
20096
|
-
};
|
20097
|
-
useEffect(() => {
|
20098
|
-
var _a, _b;
|
20099
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20100
|
-
return;
|
20101
|
-
(_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);
|
20102
|
-
}, [activeIndex]);
|
20103
|
-
const handleSessionExpire = useCallback(debounce(() => {
|
20104
|
-
var _a;
|
20105
|
-
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
20106
|
-
}, 1000), []);
|
20107
|
-
useEffect(() => {
|
20108
|
-
if (disabledListener)
|
20109
|
-
return;
|
20110
|
-
const events = ['touchstart', 'touchcancel'];
|
20111
|
-
events.forEach((event) => {
|
20112
|
-
window.addEventListener(event, handleSessionExpire);
|
20113
|
-
});
|
20114
|
-
return () => {
|
20115
|
-
events.forEach((event) => {
|
20116
|
-
window.removeEventListener(event, handleSessionExpire);
|
20117
|
-
});
|
20118
|
-
};
|
20119
|
-
}, [handleSessionExpire, disabledListener]);
|
20120
|
-
return (React.createElement("div", { id: 'sxp-render',
|
20121
|
-
// className={style['clc-sxp-container']}
|
20122
|
-
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20123
|
-
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20124
|
-
swiperRef.current.swiper.allowTouchMove = false;
|
20125
|
-
setTimeout(() => {
|
20126
|
-
swiperRef.current.swiper.allowTouchMove = true;
|
20127
|
-
}, 500);
|
20128
|
-
}, onActiveIndexChange: (swiper) => {
|
20129
|
-
setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
|
20130
|
-
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20131
|
-
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20132
|
-
return renderView(rec, index);
|
20133
|
-
}))));
|
20134
|
-
});
|
20135
|
-
var DiyStoryPreview$1 = memo(DiyStoryPreview);
|
20136
|
-
|
20137
19441
|
/*
|
20138
19442
|
* @Author: binruan@chatlabs.com
|
20139
19443
|
* @Date: 2023-10-31 10:56:01
|
20140
19444
|
* @LastEditors: binruan@chatlabs.com
|
20141
|
-
* @LastEditTime:
|
19445
|
+
* @LastEditTime: 2024-10-23 15:07:29
|
20142
19446
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20143
19447
|
*
|
20144
19448
|
*/
|
@@ -20230,9 +19534,17 @@ const Popup = () => {
|
|
20230
19534
|
|
20231
19535
|
/*
|
20232
19536
|
* @Author: binruan@chatlabs.com
|
20233
|
-
* @Date: 2024-
|
19537
|
+
* @Date: 2024-01-15 19:03:09
|
19538
|
+
* @LastEditors: binruan@chatlabs.com
|
19539
|
+
* @LastEditTime: 2025-02-24 15:47:44
|
19540
|
+
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
19541
|
+
*
|
19542
|
+
*/
|
19543
|
+
/*
|
19544
|
+
* @Author: binruan@chatlabs.com
|
19545
|
+
* @Date: 2023-11-24 15:58:00
|
20234
19546
|
* @LastEditors: binruan@chatlabs.com
|
20235
|
-
* @LastEditTime:
|
19547
|
+
* @LastEditTime: 2023-12-26 10:24:42
|
20236
19548
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20237
19549
|
*
|
20238
19550
|
*/
|
@@ -20240,20 +19552,20 @@ const RESOLVER = {};
|
|
20240
19552
|
Object.values(_materials_).forEach((v) => {
|
20241
19553
|
RESOLVER[v.extend.type] = v;
|
20242
19554
|
});
|
20243
|
-
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList
|
20244
|
-
var _a, _b, _c, _d, _e, _f
|
19555
|
+
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
|
19556
|
+
var _a, _b, _c, _d, _e, _f;
|
20245
19557
|
const utmVal = useMemo(() => {
|
20246
19558
|
var _a;
|
20247
19559
|
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('?', '') : '';
|
20248
19560
|
return searchParams;
|
20249
19561
|
}, []);
|
20250
|
-
const [_schema, setSchema] = useState(
|
19562
|
+
const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
|
20251
19563
|
const [channel, setChannel] = useState();
|
20252
19564
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20253
|
-
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: (
|
20254
|
-
var _a
|
19565
|
+
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 }) => {
|
19566
|
+
var _a;
|
20255
19567
|
return (React.createElement(React.Fragment, null,
|
20256
|
-
React.createElement(
|
19568
|
+
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 })),
|
20257
19569
|
React.createElement(Popup, null)));
|
20258
19570
|
} })));
|
20259
19571
|
};
|
@@ -20263,9 +19575,9 @@ var index = memo(SxpPageCore);
|
|
20263
19575
|
* @Author : haocanweng@chatlabs.cn
|
20264
19576
|
* @Date : 2023-08-21 16:31:58
|
20265
19577
|
* @LastEditors: binruan@chatlabs.com
|
20266
|
-
* @LastEditTime:
|
19578
|
+
* @LastEditTime: 2024-06-25 11:37:48
|
20267
19579
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
20268
19580
|
*/
|
20269
19581
|
|
20270
|
-
export { index$1 as DiyPortalPreview,
|
19582
|
+
export { index$1 as DiyPortalPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender$1 as SxpPageRender, index$2 as core, Pagebuilder as default, _materials_ as materials, useEditorDataProvider };
|
20271
19583
|
//# sourceMappingURL=index.js.map
|