pb-sxp-ui 1.15.13-alpha.4 → 1.15.14
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 +129 -774
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +128 -772
- 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 +129 -774
- 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 +41 -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 +41 -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 -19
- package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -198
- package/es/core/components/DiyStoryPreview/index.d.ts +0 -31
- package/es/core/components/DiyStoryPreview/index.js +0 -389
- 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 -19
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -201
- package/lib/core/components/DiyStoryPreview/index.d.ts +0 -31
- package/lib/core/components/DiyStoryPreview/index.js +0 -392
package/dist/index.cjs
CHANGED
@@ -451,6 +451,39 @@ const Pagebuilder = {
|
|
451
451
|
})
|
452
452
|
};
|
453
453
|
|
454
|
+
function useEditor() {
|
455
|
+
return React.useContext(EditorContext);
|
456
|
+
}
|
457
|
+
|
458
|
+
function useDataSource() {
|
459
|
+
return React.useContext(DataSourceContext);
|
460
|
+
}
|
461
|
+
|
462
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
463
|
+
const generateFeSessionId = () => {
|
464
|
+
const uid = getUid(); // 32位长度
|
465
|
+
const timestamp = Date.now(); // 13位长度
|
466
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
467
|
+
return result;
|
468
|
+
};
|
469
|
+
// 生成或者获取sessionID
|
470
|
+
const storeAndLoadFeSessionId = () => {
|
471
|
+
let result = getFeSessionId();
|
472
|
+
if (!result) {
|
473
|
+
result = generateFeSessionId();
|
474
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
475
|
+
}
|
476
|
+
return result;
|
477
|
+
};
|
478
|
+
const refreshFeSessionId = () => {
|
479
|
+
const result = generateFeSessionId();
|
480
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
481
|
+
};
|
482
|
+
// 获取 sessionID
|
483
|
+
const getFeSessionId = () => {
|
484
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
485
|
+
};
|
486
|
+
|
454
487
|
/*
|
455
488
|
* @Author: binruan@chatlabs.com
|
456
489
|
* @Date: 2024-03-20 10:27:31
|
@@ -502,39 +535,6 @@ const setUserConsentResult = () => {
|
|
502
535
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
503
536
|
};
|
504
537
|
|
505
|
-
function useEditor() {
|
506
|
-
return React.useContext(EditorContext);
|
507
|
-
}
|
508
|
-
|
509
|
-
function useDataSource() {
|
510
|
-
return React.useContext(DataSourceContext);
|
511
|
-
}
|
512
|
-
|
513
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
514
|
-
const generateFeSessionId = () => {
|
515
|
-
const uid = getUid(); // 32位长度
|
516
|
-
const timestamp = Date.now(); // 13位长度
|
517
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
518
|
-
return result;
|
519
|
-
};
|
520
|
-
// 生成或者获取sessionID
|
521
|
-
const storeAndLoadFeSessionId = () => {
|
522
|
-
let result = getFeSessionId();
|
523
|
-
if (!result) {
|
524
|
-
result = generateFeSessionId();
|
525
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
526
|
-
}
|
527
|
-
return result;
|
528
|
-
};
|
529
|
-
const refreshFeSessionId = () => {
|
530
|
-
const result = generateFeSessionId();
|
531
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
532
|
-
};
|
533
|
-
// 获取 sessionID
|
534
|
-
const getFeSessionId = () => {
|
535
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
536
|
-
};
|
537
|
-
|
538
538
|
/*
|
539
539
|
* @Author: binruan@chatlabs.com
|
540
540
|
* @Date: 2024-03-20 10:27:31
|
@@ -747,8 +747,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
747
747
|
// Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
|
748
748
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
749
749
|
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
750
|
-
JSON.stringify(
|
751
|
-
|
750
|
+
JSON.stringify({
|
751
|
+
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
752
|
+
})
|
753
|
+
], {
|
754
|
+
type: 'application/json;charset=UTF-8'
|
755
|
+
}));
|
752
756
|
}
|
753
757
|
return window
|
754
758
|
.fetch(`${url}/api/${path}`, {
|
@@ -779,16 +783,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
779
783
|
}, [bffDataSource]);
|
780
784
|
// 获取推荐视频数据
|
781
785
|
const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
782
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
783
|
-
query = Object.assign({ maxSize:
|
786
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
787
|
+
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 }));
|
784
788
|
if (channel) {
|
785
789
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
786
790
|
}
|
787
791
|
else if (utmVal) {
|
788
|
-
const val = (
|
792
|
+
const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
|
793
|
+
var _a, _b;
|
789
794
|
const key = val.split('=')[0];
|
790
|
-
return key;
|
791
|
-
})) === null ||
|
795
|
+
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);
|
796
|
+
})) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
|
792
797
|
if (val)
|
793
798
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
794
799
|
}
|
@@ -802,19 +807,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
802
807
|
let list = [];
|
803
808
|
let result = null;
|
804
809
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
805
|
-
var
|
810
|
+
var _v, _w, _x, _y, _z, _0;
|
806
811
|
query.pageNum = pageNum;
|
807
812
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
808
813
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
809
814
|
return undefined;
|
810
815
|
}
|
811
816
|
setLoading(false);
|
812
|
-
list = list.concat((
|
817
|
+
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 : []);
|
813
818
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
814
819
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
815
820
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
816
821
|
}
|
817
|
-
const isNotNullList = (
|
822
|
+
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));
|
818
823
|
if (isNotNullList) {
|
819
824
|
pageNum = pageNum + 1;
|
820
825
|
yield recurveRecList(query);
|
@@ -822,13 +827,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
822
827
|
});
|
823
828
|
yield recurveRecList(query);
|
824
829
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
825
|
-
setCurReqInfo({ rtc: (
|
830
|
+
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 });
|
826
831
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
827
832
|
}
|
828
833
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
829
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
834
|
+
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 });
|
830
835
|
}
|
831
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
836
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
832
837
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
833
838
|
return undefined;
|
834
839
|
}
|
@@ -836,8 +841,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
836
841
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
837
842
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
838
843
|
let list = [];
|
839
|
-
list = list.concat((
|
840
|
-
const isNotNullList = (
|
844
|
+
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 : []);
|
845
|
+
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));
|
841
846
|
if (!isNotNullList) {
|
842
847
|
setIsNoMoreData(true);
|
843
848
|
}
|
@@ -846,12 +851,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
846
851
|
return result === null || result === void 0 ? void 0 : result.data;
|
847
852
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
848
853
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
849
|
-
var
|
854
|
+
var _1, _2, _3, _4;
|
850
855
|
if (rtcList.length <= 0) {
|
851
856
|
return;
|
852
857
|
}
|
853
858
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
854
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
859
|
+
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 })));
|
855
860
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
856
861
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
857
862
|
return data;
|
@@ -908,7 +913,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
908
913
|
console.log('userInfo:', userInfo);
|
909
914
|
console.log('eventInfo:', ef);
|
910
915
|
console.log('========= 结束 =========');
|
911
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/
|
916
|
+
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)}` : ''}`, {
|
912
917
|
method: 'POST',
|
913
918
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
914
919
|
type: 'beacon'
|
@@ -924,7 +929,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
924
929
|
bffDataSource
|
925
930
|
]);
|
926
931
|
const bffFbReport = React.useCallback(({ eventName, product }) => {
|
927
|
-
var _a, _b, _c, _d, _e, _f;
|
932
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
928
933
|
if (!enableReportEvent ||
|
929
934
|
!enabledMetaConversionApi ||
|
930
935
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -988,7 +993,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
988
993
|
}
|
989
994
|
};
|
990
995
|
getEventParams(jsonParams);
|
991
|
-
|
996
|
+
const params = {};
|
997
|
+
const queryString = location.search.slice(1);
|
998
|
+
(_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
|
999
|
+
const key = val.split('=')[0];
|
1000
|
+
const value = val.split('=')[1];
|
1001
|
+
params[key] = value;
|
1002
|
+
});
|
1003
|
+
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
1004
|
+
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)}` : ''}`, {
|
992
1005
|
method: 'POST',
|
993
1006
|
body: jsonParams,
|
994
1007
|
type: 'beacon'
|
@@ -1016,18 +1029,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1016
1029
|
}), [bffFetch]);
|
1017
1030
|
// 获取 Tag
|
1018
1031
|
const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
1019
|
-
var
|
1020
|
-
const isShowTag = !!((
|
1032
|
+
var _5, _6, _7, _8, _9, _10, _11, _12;
|
1033
|
+
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);
|
1021
1034
|
if (!utmVal || !isShowTag)
|
1022
1035
|
return;
|
1023
1036
|
try {
|
1024
|
-
const val = (
|
1037
|
+
const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
|
1025
1038
|
var _a, _b;
|
1026
1039
|
const key = val.split('=')[0];
|
1027
1040
|
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);
|
1028
|
-
})) === null ||
|
1041
|
+
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
1029
1042
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1030
|
-
setTagList((
|
1043
|
+
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 : []);
|
1031
1044
|
}
|
1032
1045
|
catch (e) {
|
1033
1046
|
console.log('e', e);
|
@@ -1087,10 +1100,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1087
1100
|
});
|
1088
1101
|
}, [bffEventReport]);
|
1089
1102
|
const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1090
|
-
var
|
1103
|
+
var _13, _14;
|
1091
1104
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1092
|
-
setChatlabsId((
|
1093
|
-
return ((
|
1105
|
+
setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
|
1106
|
+
return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
|
1094
1107
|
}), [bffFetch]);
|
1095
1108
|
const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1096
1109
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1485,7 +1498,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
|
|
1485
1498
|
React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
|
1486
1499
|
});
|
1487
1500
|
|
1488
|
-
var index$
|
1501
|
+
var index$2 = /*#__PURE__*/Object.freeze({
|
1489
1502
|
__proto__: null,
|
1490
1503
|
EditorCore: EditorCore
|
1491
1504
|
});
|
@@ -10105,15 +10118,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10105
10118
|
wordBreak: 'break-word'
|
10106
10119
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10107
10120
|
React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10108
|
-
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
10109
|
-
textDecoration: 'underline',
|
10110
|
-
cursor: 'pointer',
|
10111
|
-
outline: 'none',
|
10112
|
-
border: 'none',
|
10113
|
-
boxSizing: 'content-box',
|
10114
|
-
padding: 0,
|
10115
|
-
background: 'transparent'
|
10116
|
-
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
10121
|
+
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: {
|
10117
10122
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
10118
10123
|
} }))));
|
10119
10124
|
};
|
@@ -12471,7 +12476,7 @@ const EventProvider = (_a) => {
|
|
12471
12476
|
const handleClick = lodash.throttle((e) => {
|
12472
12477
|
var _a, _b, _c, _d, _e, _f;
|
12473
12478
|
e.preventDefault();
|
12474
|
-
const item = multItem
|
12479
|
+
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;
|
12475
12480
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
12476
12481
|
eventSubject: 'clickCta',
|
12477
12482
|
eventDescription: 'User clicked the CTA'
|
@@ -12498,7 +12503,7 @@ const EventProvider = (_a) => {
|
|
12498
12503
|
setElement(null);
|
12499
12504
|
}
|
12500
12505
|
}, [element, popup]);
|
12501
|
-
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({
|
12506
|
+
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));
|
12502
12507
|
};
|
12503
12508
|
var EventProvider$1 = React.memo(EventProvider);
|
12504
12509
|
|
@@ -13094,7 +13099,6 @@ const MultiCommodityDiro$1 = (_a) => {
|
|
13094
13099
|
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"]);
|
13095
13100
|
const { sxpParameter } = useSxpDataSource();
|
13096
13101
|
const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
|
13097
|
-
console.log(recData, '222');
|
13098
13102
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13099
13103
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
13100
13104
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -13301,7 +13305,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
|
|
13301
13305
|
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"]);
|
13302
13306
|
const { sxpParameter } = useSxpDataSource();
|
13303
13307
|
const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
|
13304
|
-
console.log(recData, '333');
|
13305
13308
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13306
13309
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
13307
13310
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -17577,15 +17580,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
|
|
17577
17580
|
Swipe: Swipe
|
17578
17581
|
});
|
17579
17582
|
|
17580
|
-
const defaultUnLikeIconPath$
|
17581
|
-
const defaultLikeIconPath$
|
17583
|
+
const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
17584
|
+
const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
17582
17585
|
const LikeButton = (_a) => {
|
17583
17586
|
var _b;
|
17584
17587
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
17585
17588
|
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
17586
17589
|
const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
|
17587
|
-
const likeIcon = useIconLink(defaultLikeIconPath$
|
17588
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath$
|
17590
|
+
const likeIcon = useIconLink(defaultLikeIconPath$1);
|
17591
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
|
17589
17592
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17590
17593
|
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17591
17594
|
if (state) {
|
@@ -17676,7 +17679,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17676
17679
|
};
|
17677
17680
|
})();
|
17678
17681
|
|
17679
|
-
const VideoWidget$
|
17682
|
+
const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
17680
17683
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17681
17684
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
17682
17685
|
const videoStartTime = React.useRef(0);
|
@@ -18021,7 +18024,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
18021
18024
|
renderLoading,
|
18022
18025
|
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
|
18023
18026
|
};
|
18024
|
-
var VideoWidget$
|
18027
|
+
var VideoWidget$3 = React.memo(VideoWidget$2);
|
18025
18028
|
|
18026
18029
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
18027
18030
|
const [isTrue, setIsTure] = React.useState(defaultValue);
|
@@ -18110,7 +18113,7 @@ const Picture = (props) => {
|
|
18110
18113
|
}, onLoad: onShowFirstImage }))));
|
18111
18114
|
};
|
18112
18115
|
|
18113
|
-
const PictureGroup$
|
18116
|
+
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18114
18117
|
var _a, _b;
|
18115
18118
|
const { isActive } = useSwiperSlide();
|
18116
18119
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -18204,7 +18207,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18204
18207
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18205
18208
|
}))));
|
18206
18209
|
};
|
18207
|
-
var PictureGroup$
|
18210
|
+
var PictureGroup$3 = React.memo(PictureGroup$2);
|
18208
18211
|
|
18209
18212
|
/*
|
18210
18213
|
* @Author: binruan@chatlabs.com
|
@@ -18320,7 +18323,7 @@ function withBindDataSource(Component) {
|
|
18320
18323
|
* @Author: binruan@chatlabs.com
|
18321
18324
|
* @Date: 2023-12-26 16:11:34
|
18322
18325
|
* @LastEditors: binruan@chatlabs.com
|
18323
|
-
* @LastEditTime:
|
18326
|
+
* @LastEditTime: 2024-10-31 10:30:55
|
18324
18327
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18325
18328
|
*
|
18326
18329
|
*/
|
@@ -18330,10 +18333,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18330
18333
|
return null;
|
18331
18334
|
const renderComp = React.useMemo(() => {
|
18332
18335
|
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;
|
18333
|
-
|
18336
|
+
//如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18334
18337
|
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)))
|
18335
18338
|
return;
|
18336
|
-
|
18339
|
+
//默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18337
18340
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18338
18341
|
return;
|
18339
18342
|
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)) ||
|
@@ -18350,10 +18353,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18350
18353
|
const Component = withBindDataSource(t);
|
18351
18354
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18352
18355
|
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';
|
18353
|
-
|
18356
|
+
let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18354
18357
|
if (style.hasOwnProperty('backdropFilter')) {
|
18355
|
-
|
18356
|
-
style
|
18358
|
+
let sbf = style['backdropFilter'];
|
18359
|
+
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18357
18360
|
}
|
18358
18361
|
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 })));
|
18359
18362
|
}
|
@@ -18714,10 +18717,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18714
18717
|
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)));
|
18715
18718
|
}
|
18716
18719
|
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18717
|
-
return (React.createElement(VideoWidget$
|
18720
|
+
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 }));
|
18718
18721
|
}
|
18719
18722
|
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18720
|
-
return (React.createElement(PictureGroup$
|
18723
|
+
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 }));
|
18721
18724
|
}
|
18722
18725
|
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) {
|
18723
18726
|
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
@@ -19085,9 +19088,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19085
19088
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
19086
19089
|
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 } })))))));
|
19087
19090
|
};
|
19088
|
-
var
|
19091
|
+
var SxpPageRender$1 = React.memo(SxpPageRender);
|
19089
19092
|
|
19090
|
-
const PictureGroup
|
19093
|
+
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
19091
19094
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19092
19095
|
clickable: true,
|
19093
19096
|
bulletActiveClass: 'swipe-item-active-bullet',
|
@@ -19097,9 +19100,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
|
|
19097
19100
|
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
19098
19101
|
})));
|
19099
19102
|
};
|
19100
|
-
var PictureGroup$
|
19103
|
+
var PictureGroup$1 = React.memo(PictureGroup);
|
19101
19104
|
|
19102
|
-
const VideoWidget
|
19105
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
19103
19106
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19104
19107
|
const videoRef = React.useRef(null);
|
19105
19108
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
@@ -19329,14 +19332,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19329
19332
|
renderPoster,
|
19330
19333
|
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
19331
19334
|
};
|
19332
|
-
var VideoWidget$
|
19335
|
+
var VideoWidget$1 = React.memo(VideoWidget);
|
19333
19336
|
|
19334
|
-
const RESOLVER$
|
19337
|
+
const RESOLVER$1 = {};
|
19335
19338
|
Object.values(_materials_).forEach((v) => {
|
19336
|
-
RESOLVER$
|
19339
|
+
RESOLVER$1[v.extend.type] = v;
|
19337
19340
|
});
|
19338
|
-
const defaultUnLikeIconPath
|
19339
|
-
const defaultLikeIconPath
|
19341
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19342
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19340
19343
|
const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
|
19341
19344
|
const height = React.useMemo(() => {
|
19342
19345
|
let minusHeight = 0;
|
@@ -19351,16 +19354,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19351
19354
|
const renderContent = (rec, index) => {
|
19352
19355
|
var _a, _b, _c, _d;
|
19353
19356
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
19354
|
-
return (React.createElement(VideoWidget$
|
19357
|
+
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 }));
|
19355
19358
|
}
|
19356
19359
|
if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
19357
|
-
return (React.createElement(PictureGroup$
|
19360
|
+
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 }));
|
19358
19361
|
}
|
19359
19362
|
if (rec.product) {
|
19360
19363
|
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) {
|
19361
19364
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
19362
19365
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19363
|
-
const t = RESOLVER$
|
19366
|
+
const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19364
19367
|
const Component = withBindDataSource(t);
|
19365
19368
|
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
19366
19369
|
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) || {},
|
@@ -19382,7 +19385,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19382
19385
|
const CTA = (rec, index) => {
|
19383
19386
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
19384
19387
|
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
19385
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$
|
19388
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
|
19386
19389
|
}
|
19387
19390
|
return null;
|
19388
19391
|
};
|
@@ -19400,8 +19403,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19400
19403
|
}
|
19401
19404
|
return null;
|
19402
19405
|
};
|
19403
|
-
const likeIcon = useIconLink(defaultLikeIconPath
|
19404
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath
|
19406
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19407
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19405
19408
|
const renderLikeButton = (rec, index) => {
|
19406
19409
|
var _a, _b, _c, _d;
|
19407
19410
|
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
@@ -19451,666 +19454,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19451
19454
|
};
|
19452
19455
|
var index$1 = React.memo(DiyPortalPreview);
|
19453
19456
|
|
19454
|
-
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
|
19455
|
-
const { isActive } = useSwiperSlide();
|
19456
|
-
const [isload, setIsLoad] = React.useState(false);
|
19457
|
-
React.useEffect(() => {
|
19458
|
-
if (isActive && isload && loopPlay) {
|
19459
|
-
setTimeout(() => {
|
19460
|
-
var _a, _b, _c, _d;
|
19461
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19462
|
-
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
|
19463
|
-
}
|
19464
|
-
else {
|
19465
|
-
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;
|
19466
|
-
(_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
|
19467
|
-
}
|
19468
|
-
}, 3000);
|
19469
|
-
}
|
19470
|
-
}, [isActive, isload, data, index, swiperRef, loopPlay]);
|
19471
|
-
const loadFinishImage = () => {
|
19472
|
-
setIsLoad(true);
|
19473
|
-
};
|
19474
|
-
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19475
|
-
clickable: true,
|
19476
|
-
bulletActiveClass: 'swipe-item-active-bullet',
|
19477
|
-
bulletElement: 'button'
|
19478
|
-
}, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
|
19479
|
-
return (React.createElement(SwiperSlide, { key: url },
|
19480
|
-
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
|
19481
|
-
})));
|
19482
|
-
};
|
19483
|
-
var PictureGroup$1 = React.memo(PictureGroup);
|
19484
|
-
|
19485
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
|
19486
|
-
const { isActive } = useSwiperSlide();
|
19487
|
-
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19488
|
-
const videoRef = React.useRef(null);
|
19489
|
-
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
19490
|
-
const videoStartTime = React.useRef(0);
|
19491
|
-
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
19492
|
-
const [isFirstPlay, setIsFirstPlay] = React.useState(true);
|
19493
|
-
const canvasRef = React.useRef(null);
|
19494
|
-
const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
|
19495
|
-
const videoId = `pb-cache-video-${index}`;
|
19496
|
-
const hlsRef = React.useRef(null);
|
19497
|
-
React.useEffect(() => {
|
19498
|
-
if (!videoRef.current)
|
19499
|
-
return;
|
19500
|
-
videoRef.current.muted = muted;
|
19501
|
-
}, [muted]);
|
19502
|
-
React.useCallback(() => {
|
19503
|
-
var _a;
|
19504
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19505
|
-
}, []);
|
19506
|
-
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19507
|
-
const handlePlaying = React.useCallback(() => {
|
19508
|
-
var _a, _b, _c, _d, _e, _f;
|
19509
|
-
setIsPauseVideo(false);
|
19510
|
-
const item = data[index];
|
19511
|
-
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
19512
|
-
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
19513
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
19514
|
-
((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
19515
|
-
setIsFirstPlay(false);
|
19516
|
-
}
|
19517
|
-
}, [bffEventReport, data, index, isFirstPlay]);
|
19518
|
-
const handleLoadedMetadata = React.useCallback(() => {
|
19519
|
-
var _a;
|
19520
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19521
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19522
|
-
setIsLoadFinish(true);
|
19523
|
-
}, []);
|
19524
|
-
React.useCallback((type) => () => {
|
19525
|
-
var _a, _b, _c, _d, _e;
|
19526
|
-
if (!isLoadFinish)
|
19527
|
-
return;
|
19528
|
-
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
19529
|
-
switch (type) {
|
19530
|
-
case 'start':
|
19531
|
-
if (!isPause)
|
19532
|
-
return;
|
19533
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
19534
|
-
setIsPauseVideo(false);
|
19535
|
-
break;
|
19536
|
-
case 'pause':
|
19537
|
-
if (isPause)
|
19538
|
-
return;
|
19539
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19540
|
-
setIsPauseVideo(true);
|
19541
|
-
break;
|
19542
|
-
default:
|
19543
|
-
if (isPause) {
|
19544
|
-
// if (videoRef?.current?.currentTime >= rec?.endTime) {
|
19545
|
-
// videoRef.current.currentTime = rec?.startTime;
|
19546
|
-
// }
|
19547
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
19548
|
-
}
|
19549
|
-
else {
|
19550
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
19551
|
-
}
|
19552
|
-
setIsPauseVideo(!isPause);
|
19553
|
-
break;
|
19554
|
-
}
|
19555
|
-
}, [isLoadFinish]);
|
19556
|
-
React.useCallback(() => {
|
19557
|
-
var _a, _b, _c, _d, _e, _f;
|
19558
|
-
data[index];
|
19559
|
-
((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19560
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
19561
|
-
if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
|
19562
|
-
(((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
|
19563
|
-
}
|
19564
|
-
}, [data, index, bffEventReport]);
|
19565
|
-
const blur = React.useMemo(() => {
|
19566
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
19567
|
-
}, [videoPostConfig]);
|
19568
|
-
React.useMemo(() => {
|
19569
|
-
var _a;
|
19570
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
19571
|
-
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
|
19572
|
-
: 'translateY(-50%)';
|
19573
|
-
}, [videoPostConfig]);
|
19574
|
-
const handLoadeddata = React.useCallback(() => {
|
19575
|
-
if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
|
19576
|
-
return;
|
19577
|
-
const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
|
19578
|
-
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
19579
|
-
const ctx = canvas.getContext('2d');
|
19580
|
-
const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
|
19581
|
-
const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
|
19582
|
-
canvas.height = targetHeight;
|
19583
|
-
canvas.width = targetWidth;
|
19584
|
-
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
19585
|
-
setFirstFrameSrc(canvas.toDataURL());
|
19586
|
-
}, []);
|
19587
|
-
const handleTimeUpload = React.useCallback(() => {
|
19588
|
-
var _a, _b, _c;
|
19589
|
-
if (!videoRef.current)
|
19590
|
-
return;
|
19591
|
-
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)) {
|
19592
|
-
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19593
|
-
}
|
19594
|
-
}, []);
|
19595
|
-
// useEffect(() => {
|
19596
|
-
// if (!videoRef.current || !isActive) return;
|
19597
|
-
// if (isPlay) {
|
19598
|
-
// videoRef.current?.play();
|
19599
|
-
// } else {
|
19600
|
-
// videoRef.current?.pause();
|
19601
|
-
// }
|
19602
|
-
// }, [isPlay, isActive]);
|
19603
|
-
const handlePause = () => {
|
19604
|
-
var _a, _b, _c, _d, _e, _f;
|
19605
|
-
if (!videoRef.current || !isActive)
|
19606
|
-
return;
|
19607
|
-
if (!loopPlay)
|
19608
|
-
return;
|
19609
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19610
|
-
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
|
19611
|
-
}
|
19612
|
-
else {
|
19613
|
-
const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
|
19614
|
-
(_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
|
19615
|
-
}
|
19616
|
-
};
|
19617
|
-
React.useEffect(() => {
|
19618
|
-
var _a, _b, _c;
|
19619
|
-
if (!isActive)
|
19620
|
-
return;
|
19621
|
-
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
19622
|
-
if (!videoSrc)
|
19623
|
-
return;
|
19624
|
-
setIsPauseVideo(false);
|
19625
|
-
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
19626
|
-
if (!videoPlayerWrapperNode)
|
19627
|
-
return;
|
19628
|
-
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
19629
|
-
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
19630
|
-
return;
|
19631
|
-
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
19632
|
-
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
19633
|
-
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
19634
|
-
hls = new Hls();
|
19635
|
-
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
19636
|
-
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
19637
|
-
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
19638
|
-
var _a;
|
19639
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19640
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19641
|
-
});
|
19642
|
-
}
|
19643
|
-
else {
|
19644
|
-
videoRef.current.src = videoSrc;
|
19645
|
-
}
|
19646
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
19647
|
-
// videoRef.current?.addEventListener('playing', handlePlaying);
|
19648
|
-
// videoRef.current?.addEventListener('loadeddata', handLoadeddata);
|
19649
|
-
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
19650
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
|
19651
|
-
return () => {
|
19652
|
-
var _a, _b, _c, _d;
|
19653
|
-
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
19654
|
-
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
19655
|
-
setIsLoadFinish(false);
|
19656
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
19657
|
-
// videoRef.current?.removeEventListener('playing', handlePlaying);
|
19658
|
-
// videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
|
19659
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
19660
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19661
|
-
};
|
19662
|
-
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
19663
|
-
const renderPoster = React.useMemo(() => {
|
19664
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19665
|
-
return null;
|
19666
|
-
}
|
19667
|
-
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' }));
|
19668
|
-
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
19669
|
-
React.useMemo(() => {
|
19670
|
-
return blur
|
19671
|
-
? {
|
19672
|
-
filter: 'blur(10px)',
|
19673
|
-
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
19674
|
-
}
|
19675
|
-
: {};
|
19676
|
-
}, [blur]);
|
19677
|
-
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19678
|
-
return null;
|
19679
|
-
}
|
19680
|
-
// const renderLoading = useMemo(() => {
|
19681
|
-
// if (!waiting || !isLoadFinish) return;
|
19682
|
-
// return (
|
19683
|
-
// <img
|
19684
|
-
// style={{
|
19685
|
-
// position: 'absolute',
|
19686
|
-
// top: '50%',
|
19687
|
-
// left: 0,
|
19688
|
-
// right: 0,
|
19689
|
-
// transform: 'translateY(-100%)',
|
19690
|
-
// margin: 'auto',
|
19691
|
-
// width: '50px',
|
19692
|
-
// height: '50px',
|
19693
|
-
// objectFit: 'contain'
|
19694
|
-
// }}
|
19695
|
-
// src={loading_gif}
|
19696
|
-
// alt='placeholder image'
|
19697
|
-
// />
|
19698
|
-
// );
|
19699
|
-
// }, [waiting, isLoadFinish]);
|
19700
|
-
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19701
|
-
position: 'relative',
|
19702
|
-
width: '100%',
|
19703
|
-
height,
|
19704
|
-
overflow: 'hidden'
|
19705
|
-
} },
|
19706
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19707
|
-
renderPoster,
|
19708
|
-
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19709
|
-
};
|
19710
|
-
var VideoWidget$1 = React.memo(VideoWidget);
|
19711
|
-
|
19712
|
-
/*
|
19713
|
-
* @Author: binruan@chatlabs.com
|
19714
|
-
* @Date: 2025-03-25 13:54:27
|
19715
|
-
* @LastEditors: binruan@chatlabs.com
|
19716
|
-
* @LastEditTime: 2025-03-28 18:08:02
|
19717
|
-
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19718
|
-
*
|
19719
|
-
*/
|
19720
|
-
const recData = {
|
19721
|
-
position: 0,
|
19722
|
-
isCollected: false,
|
19723
|
-
product: null,
|
19724
|
-
video: {
|
19725
|
-
appId: null,
|
19726
|
-
itemId: 'VIDEOSsRgI1695278974368',
|
19727
|
-
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
19728
|
-
enTitle: null,
|
19729
|
-
icon: null,
|
19730
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
19731
|
-
link: null,
|
19732
|
-
linkTitle: null,
|
19733
|
-
linkType: null,
|
19734
|
-
menuCategoryId: null,
|
19735
|
-
remark: null,
|
19736
|
-
tags: [
|
19737
|
-
'Gift-Giving',
|
19738
|
-
'Daily Wear',
|
19739
|
-
'Business Formal',
|
19740
|
-
'Sports/Casual',
|
19741
|
-
'Anniversary Gifts',
|
19742
|
-
'Wedding/Engagement',
|
19743
|
-
'Formal Dinner/Party'
|
19744
|
-
],
|
19745
|
-
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19746
|
-
value: 385,
|
19747
|
-
weight: null,
|
19748
|
-
bindCta: null,
|
19749
|
-
bindProduct: null,
|
19750
|
-
bindProducts: [
|
19751
|
-
{
|
19752
|
-
appId: 'wx448578f8851f3dce',
|
19753
|
-
itemId: 'test02178888',
|
19754
|
-
title: 'christian dior小包包 新CDN',
|
19755
|
-
enTitle: null,
|
19756
|
-
icon: null,
|
19757
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19758
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19759
|
-
linkTitle: '',
|
19760
|
-
linkType: 'MP',
|
19761
|
-
menuCategoryId: null,
|
19762
|
-
remark: null,
|
19763
|
-
tags: [],
|
19764
|
-
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19765
|
-
value: null,
|
19766
|
-
weight: null,
|
19767
|
-
bindCta: {
|
19768
|
-
appId: 'wx448578f8851f3dce',
|
19769
|
-
itemId: 'CTA3KofE1716186622249',
|
19770
|
-
title: 'SHOP NOW 立即购买',
|
19771
|
-
enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
|
19772
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
19773
|
-
cover: null,
|
19774
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19775
|
-
linkTitle: '',
|
19776
|
-
linkType: 'MP',
|
19777
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19778
|
-
remark: null,
|
19779
|
-
tags: [
|
19780
|
-
"Woman's Perfumes",
|
19781
|
-
'Plates & Bowls',
|
19782
|
-
'Glasses',
|
19783
|
-
'Multicolor',
|
19784
|
-
'Carafes',
|
19785
|
-
'Tea & Coffee',
|
19786
|
-
'Green',
|
19787
|
-
'Grey',
|
19788
|
-
'Cutlery'
|
19789
|
-
],
|
19790
|
-
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19791
|
-
value: null,
|
19792
|
-
weight: null
|
19793
|
-
},
|
19794
|
-
collection: 'Ricco',
|
19795
|
-
currency: 'INR-₹',
|
19796
|
-
homePage: [
|
19797
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19798
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
19799
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
19800
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
19801
|
-
],
|
19802
|
-
info: 'test',
|
19803
|
-
price: 53200,
|
19804
|
-
shippingInfo: null,
|
19805
|
-
taxInfo: null
|
19806
|
-
},
|
19807
|
-
{
|
19808
|
-
appId: null,
|
19809
|
-
itemId: '113J631A0684_C520',
|
19810
|
-
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
19811
|
-
enTitle: null,
|
19812
|
-
icon: null,
|
19813
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19814
|
-
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
19815
|
-
linkTitle: null,
|
19816
|
-
linkType: 'WEB',
|
19817
|
-
menuCategoryId: null,
|
19818
|
-
remark: null,
|
19819
|
-
tags: [],
|
19820
|
-
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19821
|
-
value: null,
|
19822
|
-
weight: null,
|
19823
|
-
bindCta: {
|
19824
|
-
appId: null,
|
19825
|
-
itemId: 'CTAAfaKf1730796437032',
|
19826
|
-
title: 'test',
|
19827
|
-
enTitle: 'test',
|
19828
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
19829
|
-
cover: null,
|
19830
|
-
link: null,
|
19831
|
-
linkTitle: null,
|
19832
|
-
linkType: null,
|
19833
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19834
|
-
remark: '',
|
19835
|
-
tags: [],
|
19836
|
-
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19837
|
-
value: null,
|
19838
|
-
weight: null
|
19839
|
-
},
|
19840
|
-
collection: 'Jacquard de coton éponge bleu',
|
19841
|
-
currency: 'EUR-€',
|
19842
|
-
homePage: [
|
19843
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19844
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
19845
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
19846
|
-
],
|
19847
|
-
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",
|
19848
|
-
price: 1800,
|
19849
|
-
shippingInfo: null,
|
19850
|
-
taxInfo: null
|
19851
|
-
},
|
19852
|
-
{
|
19853
|
-
appId: null,
|
19854
|
-
itemId: 'S5573CRIW_M928',
|
19855
|
-
title: 'Mini Dior Book Tote',
|
19856
|
-
enTitle: null,
|
19857
|
-
icon: null,
|
19858
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19859
|
-
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
19860
|
-
linkTitle: null,
|
19861
|
-
linkType: 'WEB',
|
19862
|
-
menuCategoryId: null,
|
19863
|
-
remark: null,
|
19864
|
-
tags: ['ダイヤモンド'],
|
19865
|
-
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19866
|
-
value: null,
|
19867
|
-
weight: null,
|
19868
|
-
bindCta: null,
|
19869
|
-
collection: null,
|
19870
|
-
currency: 'GBP-£',
|
19871
|
-
homePage: [
|
19872
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19873
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
19874
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
19875
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
19876
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
19877
|
-
],
|
19878
|
-
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.",
|
19879
|
-
price: 1950,
|
19880
|
-
shippingInfo: null,
|
19881
|
-
taxInfo: null
|
19882
|
-
}
|
19883
|
-
],
|
19884
|
-
url: null,
|
19885
|
-
blockCta: 1,
|
19886
|
-
blockProduct: 1,
|
19887
|
-
hashTags: [
|
19888
|
-
'Sports/Casual',
|
19889
|
-
'Formal Dinner/Party',
|
19890
|
-
'Business Formal',
|
19891
|
-
'Wedding/Engagement',
|
19892
|
-
'Gift-Giving',
|
19893
|
-
'Daily Wear',
|
19894
|
-
'Anniversary Gifts'
|
19895
|
-
]
|
19896
|
-
}
|
19897
|
-
};
|
19898
|
-
const RESOLVER$1 = {};
|
19899
|
-
Object.values(_materials_).forEach((v) => {
|
19900
|
-
RESOLVER$1[v.extend.type] = v;
|
19901
|
-
});
|
19902
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19903
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19904
|
-
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
|
19905
|
-
const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
|
19906
|
-
const swiperRef = React.useRef(null);
|
19907
|
-
React.useMemo(() => {
|
19908
|
-
let minusHeight = 0;
|
19909
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19910
|
-
minusHeight += 45;
|
19911
|
-
}
|
19912
|
-
if (tagList.length > 0) {
|
19913
|
-
minusHeight += 45;
|
19914
|
-
}
|
19915
|
-
return containerHeight - minusHeight;
|
19916
|
-
}, [globalConfig, containerHeight, tagList]);
|
19917
|
-
// 判断是否是视频
|
19918
|
-
const isVideoUrl = (url) => {
|
19919
|
-
if (url && url !== '' && typeof url === 'string') {
|
19920
|
-
const imageExtensions = ['.mp4', '.m3u8'];
|
19921
|
-
const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
|
19922
|
-
return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
|
19923
|
-
}
|
19924
|
-
else {
|
19925
|
-
return false;
|
19926
|
-
}
|
19927
|
-
};
|
19928
|
-
const renderContent = (rec, index) => {
|
19929
|
-
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19930
|
-
if (isVideo) {
|
19931
|
-
return (React.createElement(VideoWidget$1, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19932
|
-
}
|
19933
|
-
else {
|
19934
|
-
return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19935
|
-
}
|
19936
|
-
};
|
19937
|
-
React.useMemo(() => {
|
19938
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19939
|
-
return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
19940
|
-
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
19941
|
-
}
|
19942
|
-
return null;
|
19943
|
-
}, [globalConfig]);
|
19944
|
-
const renderBottom = (rec, index) => {
|
19945
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19946
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19947
|
-
let cta = null;
|
19948
|
-
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) {
|
19949
|
-
cta = '多商品CTA';
|
19950
|
-
}
|
19951
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19952
|
-
cta = '商品CTA';
|
19953
|
-
}
|
19954
|
-
else {
|
19955
|
-
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;
|
19956
|
-
}
|
19957
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19958
|
-
return (React.createElement(React.Fragment, null,
|
19959
|
-
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
19960
|
-
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
19961
|
-
height: '130px',
|
19962
|
-
position: 'absolute',
|
19963
|
-
bottom: 0,
|
19964
|
-
width: '100%',
|
19965
|
-
willChange: 'transform',
|
19966
|
-
zIndex: 2,
|
19967
|
-
pointerEvents
|
19968
|
-
} })),
|
19969
|
-
React.createElement("div", { style: {
|
19970
|
-
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
19971
|
-
zIndex: 999,
|
19972
|
-
position: 'absolute',
|
19973
|
-
bottom: 0,
|
19974
|
-
left: 0,
|
19975
|
-
right: 0,
|
19976
|
-
paddingTop: '20px'
|
19977
|
-
} },
|
19978
|
-
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
19979
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
19980
|
-
React.createElement("div", null,
|
19981
|
-
React.createElement(ExpandableText$1
|
19982
|
-
// className='clc-sxp-bottom-text'
|
19983
|
-
, {
|
19984
|
-
// className='clc-sxp-bottom-text'
|
19985
|
-
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' }) }),
|
19986
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
19987
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19988
|
-
}
|
19989
|
-
return null;
|
19990
|
-
};
|
19991
|
-
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19992
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19993
|
-
const renderLikeButton = (rec, index) => {
|
19994
|
-
var _a, _b, _c, _d;
|
19995
|
-
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
19996
|
-
return;
|
19997
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
19998
|
-
if (top < 40) {
|
19999
|
-
top += 40;
|
20000
|
-
}
|
20001
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
20002
|
-
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,
|
20003
|
-
// className={style['clc-sxp-like-button']}
|
20004
|
-
style: {
|
20005
|
-
top,
|
20006
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
20007
|
-
position: 'absolute',
|
20008
|
-
zIndex: 999,
|
20009
|
-
backgroundColor: 'transparent',
|
20010
|
-
width: '50px',
|
20011
|
-
height: '50px',
|
20012
|
-
outline: 'none',
|
20013
|
-
border: 'none',
|
20014
|
-
boxSizing: 'content-box',
|
20015
|
-
padding: 0,
|
20016
|
-
transform: 'translate3d(0px, 0px, 0px)'
|
20017
|
-
} }));
|
20018
|
-
}
|
20019
|
-
return null;
|
20020
|
-
};
|
20021
|
-
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
20022
|
-
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
20023
|
-
const renderToggleButton = (visible) => {
|
20024
|
-
var _a, _b, _c, _d;
|
20025
|
-
if (!visible)
|
20026
|
-
return;
|
20027
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
20028
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
20029
|
-
top += 45;
|
20030
|
-
}
|
20031
|
-
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: {
|
20032
|
-
position: 'absolute',
|
20033
|
-
visibility: 'visible',
|
20034
|
-
zIndex: 999,
|
20035
|
-
transform: 'translate3d(0px,0px,0px)',
|
20036
|
-
[(_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,
|
20037
|
-
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
20038
|
-
backgroundColor: 'transparent',
|
20039
|
-
width: '50px',
|
20040
|
-
height: '50px',
|
20041
|
-
outline: 'none',
|
20042
|
-
border: 'none',
|
20043
|
-
boxSizing: 'content-box',
|
20044
|
-
padding: 0
|
20045
|
-
}, 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 })));
|
20046
|
-
};
|
20047
|
-
const renderView = (item, index) => {
|
20048
|
-
var _a, _b, _c, _d;
|
20049
|
-
const rec = lodash.cloneDeep(recData);
|
20050
|
-
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20051
|
-
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20052
|
-
return (React.createElement("div", { style: { position: 'relative' } },
|
20053
|
-
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20054
|
-
renderBottom(rec, index),
|
20055
|
-
renderLikeButton(rec, index),
|
20056
|
-
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
20057
|
-
React.createElement(ToggleButton$1, { style: {
|
20058
|
-
position: 'absolute',
|
20059
|
-
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
20060
|
-
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',
|
20061
|
-
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
20062
|
-
zIndex: 999
|
20063
|
-
}, 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 }),
|
20064
|
-
renderContent(item, index))));
|
20065
|
-
};
|
20066
|
-
React.useEffect(() => {
|
20067
|
-
var _a, _b;
|
20068
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20069
|
-
return;
|
20070
|
-
(_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);
|
20071
|
-
}, [activeIndex]);
|
20072
|
-
React.useEffect(() => {
|
20073
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20074
|
-
return;
|
20075
|
-
// swiperRef?.current?.swiper?.slideTo(0);
|
20076
|
-
setLooPlaySwiper(loopPlay);
|
20077
|
-
}, [loopPlay]);
|
20078
|
-
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20079
|
-
setLooPlaySwiper(false);
|
20080
|
-
}, 1000), []);
|
20081
|
-
React.useEffect(() => {
|
20082
|
-
const events = ['touchstart', 'touchcancel'];
|
20083
|
-
events.forEach((event) => {
|
20084
|
-
window.addEventListener(event, handleSessionExpire);
|
20085
|
-
});
|
20086
|
-
return () => {
|
20087
|
-
events.forEach((event) => {
|
20088
|
-
window.removeEventListener(event, handleSessionExpire);
|
20089
|
-
});
|
20090
|
-
};
|
20091
|
-
}, [handleSessionExpire]);
|
20092
|
-
return (React.createElement("div", { id: 'sxp-render',
|
20093
|
-
// className={style['clc-sxp-container']}
|
20094
|
-
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20095
|
-
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20096
|
-
swiperRef.current.swiper.allowTouchMove = false;
|
20097
|
-
setTimeout(() => {
|
20098
|
-
swiperRef.current.swiper.allowTouchMove = true;
|
20099
|
-
}, 500);
|
20100
|
-
}, onActiveIndexChange: (swiper) => {
|
20101
|
-
// setActiveIndex(swiper.activeIndex);
|
20102
|
-
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20103
|
-
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20104
|
-
return renderView(rec, index);
|
20105
|
-
}))));
|
20106
|
-
};
|
20107
|
-
var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
|
20108
|
-
|
20109
19457
|
/*
|
20110
19458
|
* @Author: binruan@chatlabs.com
|
20111
19459
|
* @Date: 2023-10-31 10:56:01
|
20112
19460
|
* @LastEditors: binruan@chatlabs.com
|
20113
|
-
* @LastEditTime:
|
19461
|
+
* @LastEditTime: 2024-10-23 15:07:29
|
20114
19462
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20115
19463
|
*
|
20116
19464
|
*/
|
@@ -20202,9 +19550,17 @@ const Popup = () => {
|
|
20202
19550
|
|
20203
19551
|
/*
|
20204
19552
|
* @Author: binruan@chatlabs.com
|
20205
|
-
* @Date: 2024-
|
19553
|
+
* @Date: 2024-01-15 19:03:09
|
20206
19554
|
* @LastEditors: binruan@chatlabs.com
|
20207
|
-
* @LastEditTime: 2025-
|
19555
|
+
* @LastEditTime: 2025-02-24 15:47:44
|
19556
|
+
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
19557
|
+
*
|
19558
|
+
*/
|
19559
|
+
/*
|
19560
|
+
* @Author: binruan@chatlabs.com
|
19561
|
+
* @Date: 2023-11-24 15:58:00
|
19562
|
+
* @LastEditors: binruan@chatlabs.com
|
19563
|
+
* @LastEditTime: 2023-12-26 10:24:42
|
20208
19564
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20209
19565
|
*
|
20210
19566
|
*/
|
@@ -20212,20 +19568,20 @@ const RESOLVER = {};
|
|
20212
19568
|
Object.values(_materials_).forEach((v) => {
|
20213
19569
|
RESOLVER[v.extend.type] = v;
|
20214
19570
|
});
|
20215
|
-
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList
|
20216
|
-
var _a, _b, _c, _d, _e, _f
|
19571
|
+
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
|
19572
|
+
var _a, _b, _c, _d, _e, _f;
|
20217
19573
|
const utmVal = React.useMemo(() => {
|
20218
19574
|
var _a;
|
20219
19575
|
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('?', '') : '';
|
20220
19576
|
return searchParams;
|
20221
19577
|
}, []);
|
20222
|
-
const [_schema, setSchema] = React.useState(
|
19578
|
+
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20223
19579
|
const [channel, setChannel] = React.useState();
|
20224
19580
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20225
|
-
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: (
|
20226
|
-
var _a
|
19581
|
+
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 }) => {
|
19582
|
+
var _a;
|
20227
19583
|
return (React.createElement(React.Fragment, null,
|
20228
|
-
React.createElement(
|
19584
|
+
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 })),
|
20229
19585
|
React.createElement(Popup, null)));
|
20230
19586
|
} })));
|
20231
19587
|
};
|
@@ -20235,18 +19591,17 @@ var index = React.memo(SxpPageCore);
|
|
20235
19591
|
* @Author : haocanweng@chatlabs.cn
|
20236
19592
|
* @Date : 2023-08-21 16:31:58
|
20237
19593
|
* @LastEditors: binruan@chatlabs.com
|
20238
|
-
* @LastEditTime:
|
19594
|
+
* @LastEditTime: 2024-06-25 11:37:48
|
20239
19595
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
20240
19596
|
*/
|
20241
19597
|
|
20242
19598
|
exports.DiyPortalPreview = index$1;
|
20243
|
-
exports.DiyStoryPreview = DiyStoryPreview$1;
|
20244
19599
|
exports.EditorDataProvider = EditorDataProvider;
|
20245
19600
|
exports.Modal = Modal$1;
|
20246
19601
|
exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
|
20247
19602
|
exports.SxpPageCore = index;
|
20248
|
-
exports.SxpPageRender =
|
20249
|
-
exports.core = index$
|
19603
|
+
exports.SxpPageRender = SxpPageRender$1;
|
19604
|
+
exports.core = index$2;
|
20250
19605
|
exports.default = Pagebuilder;
|
20251
19606
|
exports.materials = _materials_;
|
20252
19607
|
exports.useEditorDataProvider = useEditorDataProvider;
|