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.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,13 @@ 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;
|
933
|
+
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
934
|
+
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
|
935
|
+
page_location: window.location.href,
|
936
|
+
page_title: document.title
|
937
|
+
});
|
938
|
+
}
|
928
939
|
if (!enableReportEvent ||
|
929
940
|
!enabledMetaConversionApi ||
|
930
941
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -988,7 +999,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
988
999
|
}
|
989
1000
|
};
|
990
1001
|
getEventParams(jsonParams);
|
991
|
-
|
1002
|
+
const params = {};
|
1003
|
+
const queryString = location.search.slice(1);
|
1004
|
+
(_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
|
1005
|
+
const key = val.split('=')[0];
|
1006
|
+
const value = val.split('=')[1];
|
1007
|
+
params[key] = value;
|
1008
|
+
});
|
1009
|
+
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
1010
|
+
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
1011
|
method: 'POST',
|
993
1012
|
body: jsonParams,
|
994
1013
|
type: 'beacon'
|
@@ -1016,18 +1035,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1016
1035
|
}), [bffFetch]);
|
1017
1036
|
// 获取 Tag
|
1018
1037
|
const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
1019
|
-
var
|
1020
|
-
const isShowTag = !!((
|
1038
|
+
var _5, _6, _7, _8, _9, _10, _11, _12;
|
1039
|
+
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
1040
|
if (!utmVal || !isShowTag)
|
1022
1041
|
return;
|
1023
1042
|
try {
|
1024
|
-
const val = (
|
1043
|
+
const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
|
1025
1044
|
var _a, _b;
|
1026
1045
|
const key = val.split('=')[0];
|
1027
1046
|
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 ||
|
1047
|
+
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
1029
1048
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1030
|
-
setTagList((
|
1049
|
+
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
1050
|
}
|
1032
1051
|
catch (e) {
|
1033
1052
|
console.log('e', e);
|
@@ -1087,10 +1106,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1087
1106
|
});
|
1088
1107
|
}, [bffEventReport]);
|
1089
1108
|
const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1090
|
-
var
|
1109
|
+
var _13, _14;
|
1091
1110
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1092
|
-
setChatlabsId((
|
1093
|
-
return ((
|
1111
|
+
setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
|
1112
|
+
return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
|
1094
1113
|
}), [bffFetch]);
|
1095
1114
|
const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1096
1115
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1485,7 +1504,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
|
|
1485
1504
|
React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
|
1486
1505
|
});
|
1487
1506
|
|
1488
|
-
var index$
|
1507
|
+
var index$2 = /*#__PURE__*/Object.freeze({
|
1489
1508
|
__proto__: null,
|
1490
1509
|
EditorCore: EditorCore
|
1491
1510
|
});
|
@@ -10105,15 +10124,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10105
10124
|
wordBreak: 'break-word'
|
10106
10125
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10107
10126
|
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: {
|
10127
|
+
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
10128
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
10118
10129
|
} }))));
|
10119
10130
|
};
|
@@ -12471,7 +12482,7 @@ const EventProvider = (_a) => {
|
|
12471
12482
|
const handleClick = lodash.throttle((e) => {
|
12472
12483
|
var _a, _b, _c, _d, _e, _f;
|
12473
12484
|
e.preventDefault();
|
12474
|
-
const item = multItem
|
12485
|
+
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
12486
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
12476
12487
|
eventSubject: 'clickCta',
|
12477
12488
|
eventDescription: 'User clicked the CTA'
|
@@ -12498,7 +12509,7 @@ const EventProvider = (_a) => {
|
|
12498
12509
|
setElement(null);
|
12499
12510
|
}
|
12500
12511
|
}, [element, popup]);
|
12501
|
-
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({
|
12512
|
+
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
12513
|
};
|
12503
12514
|
var EventProvider$1 = React.memo(EventProvider);
|
12504
12515
|
|
@@ -13094,7 +13105,6 @@ const MultiCommodityDiro$1 = (_a) => {
|
|
13094
13105
|
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
13106
|
const { sxpParameter } = useSxpDataSource();
|
13096
13107
|
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
13108
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13099
13109
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
13100
13110
|
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 +13311,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
|
|
13301
13311
|
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
13312
|
const { sxpParameter } = useSxpDataSource();
|
13303
13313
|
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
13314
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13306
13315
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
13307
13316
|
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 +17586,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
|
|
17577
17586
|
Swipe: Swipe
|
17578
17587
|
});
|
17579
17588
|
|
17580
|
-
const defaultUnLikeIconPath$
|
17581
|
-
const defaultLikeIconPath$
|
17589
|
+
const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
17590
|
+
const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
17582
17591
|
const LikeButton = (_a) => {
|
17583
17592
|
var _b;
|
17584
17593
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
17585
17594
|
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
17586
17595
|
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$
|
17596
|
+
const likeIcon = useIconLink(defaultLikeIconPath$1);
|
17597
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
|
17589
17598
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17590
17599
|
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17591
17600
|
if (state) {
|
@@ -17676,7 +17685,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17676
17685
|
};
|
17677
17686
|
})();
|
17678
17687
|
|
17679
|
-
const VideoWidget$
|
17688
|
+
const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
17680
17689
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17681
17690
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
17682
17691
|
const videoStartTime = React.useRef(0);
|
@@ -18021,7 +18030,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
18021
18030
|
renderLoading,
|
18022
18031
|
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
|
18023
18032
|
};
|
18024
|
-
var VideoWidget$
|
18033
|
+
var VideoWidget$3 = React.memo(VideoWidget$2);
|
18025
18034
|
|
18026
18035
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
18027
18036
|
const [isTrue, setIsTure] = React.useState(defaultValue);
|
@@ -18110,7 +18119,7 @@ const Picture = (props) => {
|
|
18110
18119
|
}, onLoad: onShowFirstImage }))));
|
18111
18120
|
};
|
18112
18121
|
|
18113
|
-
const PictureGroup$
|
18122
|
+
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18114
18123
|
var _a, _b;
|
18115
18124
|
const { isActive } = useSwiperSlide();
|
18116
18125
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -18204,7 +18213,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18204
18213
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18205
18214
|
}))));
|
18206
18215
|
};
|
18207
|
-
var PictureGroup$
|
18216
|
+
var PictureGroup$3 = React.memo(PictureGroup$2);
|
18208
18217
|
|
18209
18218
|
/*
|
18210
18219
|
* @Author: binruan@chatlabs.com
|
@@ -18320,7 +18329,7 @@ function withBindDataSource(Component) {
|
|
18320
18329
|
* @Author: binruan@chatlabs.com
|
18321
18330
|
* @Date: 2023-12-26 16:11:34
|
18322
18331
|
* @LastEditors: binruan@chatlabs.com
|
18323
|
-
* @LastEditTime:
|
18332
|
+
* @LastEditTime: 2024-10-31 10:30:55
|
18324
18333
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18325
18334
|
*
|
18326
18335
|
*/
|
@@ -18330,10 +18339,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18330
18339
|
return null;
|
18331
18340
|
const renderComp = React.useMemo(() => {
|
18332
18341
|
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
|
-
|
18342
|
+
//如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18334
18343
|
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
18344
|
return;
|
18336
|
-
|
18345
|
+
//默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18337
18346
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18338
18347
|
return;
|
18339
18348
|
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 +18359,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
18350
18359
|
const Component = withBindDataSource(t);
|
18351
18360
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18352
18361
|
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
|
-
|
18362
|
+
let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18354
18363
|
if (style.hasOwnProperty('backdropFilter')) {
|
18355
|
-
|
18356
|
-
style
|
18364
|
+
let sbf = style['backdropFilter'];
|
18365
|
+
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18357
18366
|
}
|
18358
18367
|
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
18368
|
}
|
@@ -18714,10 +18723,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18714
18723
|
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
18724
|
}
|
18716
18725
|
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18717
|
-
return (React.createElement(VideoWidget$
|
18726
|
+
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
18727
|
}
|
18719
18728
|
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18720
|
-
return (React.createElement(PictureGroup$
|
18729
|
+
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
18730
|
}
|
18722
18731
|
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
18732
|
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
@@ -19085,9 +19094,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19085
19094
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
19086
19095
|
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
19096
|
};
|
19088
|
-
var
|
19097
|
+
var SxpPageRender$1 = React.memo(SxpPageRender);
|
19089
19098
|
|
19090
|
-
const PictureGroup
|
19099
|
+
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
19091
19100
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19092
19101
|
clickable: true,
|
19093
19102
|
bulletActiveClass: 'swipe-item-active-bullet',
|
@@ -19097,9 +19106,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
|
|
19097
19106
|
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
19098
19107
|
})));
|
19099
19108
|
};
|
19100
|
-
var PictureGroup$
|
19109
|
+
var PictureGroup$1 = React.memo(PictureGroup);
|
19101
19110
|
|
19102
|
-
const VideoWidget
|
19111
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
19103
19112
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19104
19113
|
const videoRef = React.useRef(null);
|
19105
19114
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
@@ -19329,14 +19338,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19329
19338
|
renderPoster,
|
19330
19339
|
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
19331
19340
|
};
|
19332
|
-
var VideoWidget$
|
19341
|
+
var VideoWidget$1 = React.memo(VideoWidget);
|
19333
19342
|
|
19334
|
-
const RESOLVER$
|
19343
|
+
const RESOLVER$1 = {};
|
19335
19344
|
Object.values(_materials_).forEach((v) => {
|
19336
|
-
RESOLVER$
|
19345
|
+
RESOLVER$1[v.extend.type] = v;
|
19337
19346
|
});
|
19338
|
-
const defaultUnLikeIconPath
|
19339
|
-
const defaultLikeIconPath
|
19347
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19348
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19340
19349
|
const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
|
19341
19350
|
const height = React.useMemo(() => {
|
19342
19351
|
let minusHeight = 0;
|
@@ -19351,16 +19360,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19351
19360
|
const renderContent = (rec, index) => {
|
19352
19361
|
var _a, _b, _c, _d;
|
19353
19362
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
19354
|
-
return (React.createElement(VideoWidget$
|
19363
|
+
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
19364
|
}
|
19356
19365
|
if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
19357
|
-
return (React.createElement(PictureGroup$
|
19366
|
+
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
19367
|
}
|
19359
19368
|
if (rec.product) {
|
19360
19369
|
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
19370
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
19362
19371
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19363
|
-
const t = RESOLVER$
|
19372
|
+
const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19364
19373
|
const Component = withBindDataSource(t);
|
19365
19374
|
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
19366
19375
|
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 +19391,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19382
19391
|
const CTA = (rec, index) => {
|
19383
19392
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
19384
19393
|
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
19385
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$
|
19394
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
|
19386
19395
|
}
|
19387
19396
|
return null;
|
19388
19397
|
};
|
@@ -19400,8 +19409,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19400
19409
|
}
|
19401
19410
|
return null;
|
19402
19411
|
};
|
19403
|
-
const likeIcon = useIconLink(defaultLikeIconPath
|
19404
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath
|
19412
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19413
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19405
19414
|
const renderLikeButton = (rec, index) => {
|
19406
19415
|
var _a, _b, _c, _d;
|
19407
19416
|
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
@@ -19451,716 +19460,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19451
19460
|
};
|
19452
19461
|
var index$1 = React.memo(DiyPortalPreview);
|
19453
19462
|
|
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 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
|
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
|
-
const loopPlayRef = React.useRef(loopPlay);
|
19498
|
-
React.useEffect(() => {
|
19499
|
-
loopPlayRef.current = loopPlay;
|
19500
|
-
}, [loopPlay]);
|
19501
|
-
React.useImperativeHandle(ref, () => {
|
19502
|
-
return {
|
19503
|
-
play() {
|
19504
|
-
var _a;
|
19505
|
-
if (!videoRef.current)
|
19506
|
-
return;
|
19507
|
-
handleTimeUpload();
|
19508
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19509
|
-
setIsPauseVideo(false);
|
19510
|
-
},
|
19511
|
-
pause() {
|
19512
|
-
var _a;
|
19513
|
-
if (!videoRef.current)
|
19514
|
-
return;
|
19515
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19516
|
-
setIsPauseVideo(true);
|
19517
|
-
},
|
19518
|
-
setLoopPlay(v) {
|
19519
|
-
if (!videoRef.current)
|
19520
|
-
return;
|
19521
|
-
loopPlayRef.current = v;
|
19522
|
-
},
|
19523
|
-
isPlaying() {
|
19524
|
-
var _a;
|
19525
|
-
return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
|
19526
|
-
}
|
19527
|
-
};
|
19528
|
-
});
|
19529
|
-
React.useEffect(() => {
|
19530
|
-
if (!videoRef.current)
|
19531
|
-
return;
|
19532
|
-
videoRef.current.muted = muted;
|
19533
|
-
}, [muted]);
|
19534
|
-
React.useCallback(() => {
|
19535
|
-
var _a;
|
19536
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19537
|
-
}, []);
|
19538
|
-
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19539
|
-
React.useCallback(() => {
|
19540
|
-
var _a, _b, _c, _d, _e, _f;
|
19541
|
-
setIsPauseVideo(false);
|
19542
|
-
const item = data[index];
|
19543
|
-
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
19544
|
-
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
19545
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
19546
|
-
((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
19547
|
-
setIsFirstPlay(false);
|
19548
|
-
}
|
19549
|
-
}, [bffEventReport, data, index, isFirstPlay]);
|
19550
|
-
const handleLoadedMetadata = React.useCallback(() => {
|
19551
|
-
var _a;
|
19552
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19553
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19554
|
-
setIsLoadFinish(true);
|
19555
|
-
}, []);
|
19556
|
-
const handleClickVideo = React.useCallback((type) => () => {
|
19557
|
-
var _a, _b, _c, _d, _e, _f;
|
19558
|
-
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
19559
|
-
return;
|
19560
|
-
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
19561
|
-
switch (type) {
|
19562
|
-
case 'start':
|
19563
|
-
if (!isPause)
|
19564
|
-
return;
|
19565
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
19566
|
-
setIsPauseVideo(false);
|
19567
|
-
break;
|
19568
|
-
case 'pause':
|
19569
|
-
if (isPause)
|
19570
|
-
return;
|
19571
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19572
|
-
setIsPauseVideo(true);
|
19573
|
-
break;
|
19574
|
-
default:
|
19575
|
-
if (isPause) {
|
19576
|
-
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)) {
|
19577
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19578
|
-
}
|
19579
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
19580
|
-
}
|
19581
|
-
else {
|
19582
|
-
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
19583
|
-
}
|
19584
|
-
setIsPauseVideo(!isPause);
|
19585
|
-
break;
|
19586
|
-
}
|
19587
|
-
}, [isLoadFinish]);
|
19588
|
-
const blur = React.useMemo(() => {
|
19589
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
19590
|
-
}, [videoPostConfig]);
|
19591
|
-
React.useMemo(() => {
|
19592
|
-
var _a;
|
19593
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
19594
|
-
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
|
19595
|
-
: 'translateY(-50%)';
|
19596
|
-
}, [videoPostConfig]);
|
19597
|
-
React.useCallback(() => {
|
19598
|
-
if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
|
19599
|
-
return;
|
19600
|
-
const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
|
19601
|
-
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
19602
|
-
const ctx = canvas.getContext('2d');
|
19603
|
-
const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
|
19604
|
-
const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
|
19605
|
-
canvas.height = targetHeight;
|
19606
|
-
canvas.width = targetWidth;
|
19607
|
-
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
19608
|
-
setFirstFrameSrc(canvas.toDataURL());
|
19609
|
-
}, []);
|
19610
|
-
const handleTimeUpload = React.useCallback(() => {
|
19611
|
-
var _a;
|
19612
|
-
if (!videoRef.current)
|
19613
|
-
return;
|
19614
|
-
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);
|
19615
|
-
onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
|
19616
|
-
setTimeout(() => {
|
19617
|
-
var _a, _b;
|
19618
|
-
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)) {
|
19619
|
-
slideSwiper();
|
19620
|
-
}
|
19621
|
-
});
|
19622
|
-
}, []);
|
19623
|
-
const slideSwiper = () => {
|
19624
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
19625
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19626
|
-
if (!loopPlayRef.current)
|
19627
|
-
return;
|
19628
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19629
|
-
(_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);
|
19630
|
-
}
|
19631
|
-
else {
|
19632
|
-
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;
|
19633
|
-
(_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);
|
19634
|
-
}
|
19635
|
-
};
|
19636
|
-
const handlePause = () => {
|
19637
|
-
setIsPauseVideo(true);
|
19638
|
-
onPause === null || onPause === void 0 ? void 0 : onPause();
|
19639
|
-
};
|
19640
|
-
const handlePlay = () => {
|
19641
|
-
var _a;
|
19642
|
-
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);
|
19643
|
-
onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
|
19644
|
-
};
|
19645
|
-
React.useEffect(() => {
|
19646
|
-
var _a, _b, _c, _d;
|
19647
|
-
if (!isActive)
|
19648
|
-
return;
|
19649
|
-
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
19650
|
-
if (!videoSrc)
|
19651
|
-
return;
|
19652
|
-
setIsPauseVideo(false);
|
19653
|
-
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
19654
|
-
if (!videoPlayerWrapperNode)
|
19655
|
-
return;
|
19656
|
-
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
19657
|
-
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
19658
|
-
return;
|
19659
|
-
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
19660
|
-
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
19661
|
-
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
19662
|
-
hls = new Hls();
|
19663
|
-
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
19664
|
-
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
19665
|
-
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
19666
|
-
var _a;
|
19667
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19668
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19669
|
-
});
|
19670
|
-
}
|
19671
|
-
else {
|
19672
|
-
videoRef.current.src = videoSrc;
|
19673
|
-
}
|
19674
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
19675
|
-
// videoRef.current?.addEventListener('playing', handlePlaying);
|
19676
|
-
// videoRef.current?.addEventListener('loadeddata', handLoadeddata);
|
19677
|
-
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
19678
|
-
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
|
19679
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
|
19680
|
-
return () => {
|
19681
|
-
var _a, _b, _c, _d, _e;
|
19682
|
-
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
19683
|
-
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
19684
|
-
setIsLoadFinish(false);
|
19685
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
19686
|
-
// videoRef.current?.removeEventListener('playing', handlePlaying);
|
19687
|
-
// videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
|
19688
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
19689
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
|
19690
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
|
19691
|
-
};
|
19692
|
-
}, [isActive]);
|
19693
|
-
const renderPoster = React.useMemo(() => {
|
19694
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19695
|
-
return null;
|
19696
|
-
}
|
19697
|
-
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' }));
|
19698
|
-
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
19699
|
-
React.useMemo(() => {
|
19700
|
-
return blur
|
19701
|
-
? {
|
19702
|
-
filter: 'blur(10px)',
|
19703
|
-
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
19704
|
-
}
|
19705
|
-
: {};
|
19706
|
-
}, [blur]);
|
19707
|
-
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19708
|
-
return null;
|
19709
|
-
}
|
19710
|
-
// const renderLoading = useMemo(() => {
|
19711
|
-
// if (!waiting || !isLoadFinish) return;
|
19712
|
-
// return (
|
19713
|
-
// <img
|
19714
|
-
// style={{
|
19715
|
-
// position: 'absolute',
|
19716
|
-
// top: '50%',
|
19717
|
-
// left: 0,
|
19718
|
-
// right: 0,
|
19719
|
-
// transform: 'translateY(-100%)',
|
19720
|
-
// margin: 'auto',
|
19721
|
-
// width: '50px',
|
19722
|
-
// height: '50px',
|
19723
|
-
// objectFit: 'contain'
|
19724
|
-
// }}
|
19725
|
-
// src={loading_gif}
|
19726
|
-
// alt='placeholder image'
|
19727
|
-
// />
|
19728
|
-
// );
|
19729
|
-
// }, [waiting, isLoadFinish]);
|
19730
|
-
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19731
|
-
position: 'relative',
|
19732
|
-
width: '100%',
|
19733
|
-
height,
|
19734
|
-
overflow: 'hidden'
|
19735
|
-
}, onClick: handleClickVideo() },
|
19736
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19737
|
-
renderPoster,
|
19738
|
-
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19739
|
-
});
|
19740
|
-
var VideoWidget$1 = React.memo(VideoWidget);
|
19741
|
-
|
19742
|
-
/*
|
19743
|
-
* @Author: binruan@chatlabs.com
|
19744
|
-
* @Date: 2025-03-25 13:54:27
|
19745
|
-
* @LastEditors: binruan@chatlabs.com
|
19746
|
-
* @LastEditTime: 2025-04-01 17:54:08
|
19747
|
-
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19748
|
-
*
|
19749
|
-
*/
|
19750
|
-
const recData = {
|
19751
|
-
position: 0,
|
19752
|
-
isCollected: false,
|
19753
|
-
product: null,
|
19754
|
-
video: {
|
19755
|
-
appId: null,
|
19756
|
-
itemId: 'VIDEOSsRgI1695278974368',
|
19757
|
-
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
19758
|
-
enTitle: null,
|
19759
|
-
icon: null,
|
19760
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
19761
|
-
link: null,
|
19762
|
-
linkTitle: null,
|
19763
|
-
linkType: null,
|
19764
|
-
menuCategoryId: null,
|
19765
|
-
remark: null,
|
19766
|
-
tags: [
|
19767
|
-
'Gift-Giving',
|
19768
|
-
'Daily Wear',
|
19769
|
-
'Business Formal',
|
19770
|
-
'Sports/Casual',
|
19771
|
-
'Anniversary Gifts',
|
19772
|
-
'Wedding/Engagement',
|
19773
|
-
'Formal Dinner/Party'
|
19774
|
-
],
|
19775
|
-
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19776
|
-
value: 385,
|
19777
|
-
weight: null,
|
19778
|
-
bindCta: null,
|
19779
|
-
bindProduct: null,
|
19780
|
-
bindProducts: [
|
19781
|
-
{
|
19782
|
-
appId: 'wx448578f8851f3dce',
|
19783
|
-
itemId: 'test02178888',
|
19784
|
-
title: 'christian dior小包包 新CDN',
|
19785
|
-
enTitle: null,
|
19786
|
-
icon: null,
|
19787
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19788
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19789
|
-
linkTitle: '',
|
19790
|
-
linkType: 'MP',
|
19791
|
-
menuCategoryId: null,
|
19792
|
-
remark: null,
|
19793
|
-
tags: [],
|
19794
|
-
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19795
|
-
value: null,
|
19796
|
-
weight: null,
|
19797
|
-
bindCta: {
|
19798
|
-
appId: 'wx448578f8851f3dce',
|
19799
|
-
itemId: 'CTA3KofE1716186622249',
|
19800
|
-
title: 'SHOP NOW 立即购买',
|
19801
|
-
enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
|
19802
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
19803
|
-
cover: null,
|
19804
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19805
|
-
linkTitle: '',
|
19806
|
-
linkType: 'MP',
|
19807
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19808
|
-
remark: null,
|
19809
|
-
tags: [
|
19810
|
-
"Woman's Perfumes",
|
19811
|
-
'Plates & Bowls',
|
19812
|
-
'Glasses',
|
19813
|
-
'Multicolor',
|
19814
|
-
'Carafes',
|
19815
|
-
'Tea & Coffee',
|
19816
|
-
'Green',
|
19817
|
-
'Grey',
|
19818
|
-
'Cutlery'
|
19819
|
-
],
|
19820
|
-
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19821
|
-
value: null,
|
19822
|
-
weight: null
|
19823
|
-
},
|
19824
|
-
collection: 'Ricco',
|
19825
|
-
currency: 'INR-₹',
|
19826
|
-
homePage: [
|
19827
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19828
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
19829
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
19830
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
19831
|
-
],
|
19832
|
-
info: 'test',
|
19833
|
-
price: 53200,
|
19834
|
-
shippingInfo: null,
|
19835
|
-
taxInfo: null
|
19836
|
-
},
|
19837
|
-
{
|
19838
|
-
appId: null,
|
19839
|
-
itemId: '113J631A0684_C520',
|
19840
|
-
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
19841
|
-
enTitle: null,
|
19842
|
-
icon: null,
|
19843
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19844
|
-
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
19845
|
-
linkTitle: null,
|
19846
|
-
linkType: 'WEB',
|
19847
|
-
menuCategoryId: null,
|
19848
|
-
remark: null,
|
19849
|
-
tags: [],
|
19850
|
-
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19851
|
-
value: null,
|
19852
|
-
weight: null,
|
19853
|
-
bindCta: {
|
19854
|
-
appId: null,
|
19855
|
-
itemId: 'CTAAfaKf1730796437032',
|
19856
|
-
title: 'test',
|
19857
|
-
enTitle: 'test',
|
19858
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
19859
|
-
cover: null,
|
19860
|
-
link: null,
|
19861
|
-
linkTitle: null,
|
19862
|
-
linkType: null,
|
19863
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19864
|
-
remark: '',
|
19865
|
-
tags: [],
|
19866
|
-
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19867
|
-
value: null,
|
19868
|
-
weight: null
|
19869
|
-
},
|
19870
|
-
collection: 'Jacquard de coton éponge bleu',
|
19871
|
-
currency: 'EUR-€',
|
19872
|
-
homePage: [
|
19873
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19874
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
19875
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
19876
|
-
],
|
19877
|
-
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",
|
19878
|
-
price: 1800,
|
19879
|
-
shippingInfo: null,
|
19880
|
-
taxInfo: null
|
19881
|
-
},
|
19882
|
-
{
|
19883
|
-
appId: null,
|
19884
|
-
itemId: 'S5573CRIW_M928',
|
19885
|
-
title: 'Mini Dior Book Tote',
|
19886
|
-
enTitle: null,
|
19887
|
-
icon: null,
|
19888
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19889
|
-
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
19890
|
-
linkTitle: null,
|
19891
|
-
linkType: 'WEB',
|
19892
|
-
menuCategoryId: null,
|
19893
|
-
remark: null,
|
19894
|
-
tags: ['ダイヤモンド'],
|
19895
|
-
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19896
|
-
value: null,
|
19897
|
-
weight: null,
|
19898
|
-
bindCta: null,
|
19899
|
-
collection: null,
|
19900
|
-
currency: 'GBP-£',
|
19901
|
-
homePage: [
|
19902
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19903
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
19904
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
19905
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
19906
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
19907
|
-
],
|
19908
|
-
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.",
|
19909
|
-
price: 1950,
|
19910
|
-
shippingInfo: null,
|
19911
|
-
taxInfo: null
|
19912
|
-
}
|
19913
|
-
],
|
19914
|
-
url: null,
|
19915
|
-
blockCta: 1,
|
19916
|
-
blockProduct: 1,
|
19917
|
-
hashTags: [
|
19918
|
-
'Sports/Casual',
|
19919
|
-
'Formal Dinner/Party',
|
19920
|
-
'Business Formal',
|
19921
|
-
'Wedding/Engagement',
|
19922
|
-
'Gift-Giving',
|
19923
|
-
'Daily Wear',
|
19924
|
-
'Anniversary Gifts'
|
19925
|
-
]
|
19926
|
-
}
|
19927
|
-
};
|
19928
|
-
const RESOLVER$1 = {};
|
19929
|
-
Object.values(_materials_).forEach((v) => {
|
19930
|
-
RESOLVER$1[v.extend.type] = v;
|
19931
|
-
});
|
19932
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19933
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19934
|
-
const DiyStoryPreview = React.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) => {
|
19935
|
-
const videoWidgetRef = React.useRef(null);
|
19936
|
-
const swiperRef = React.useRef(null);
|
19937
|
-
const [curIndex, setCurIndex] = React.useState(0);
|
19938
|
-
React.useMemo(() => {
|
19939
|
-
let minusHeight = 0;
|
19940
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19941
|
-
minusHeight += 45;
|
19942
|
-
}
|
19943
|
-
if (tagList.length > 0) {
|
19944
|
-
minusHeight += 45;
|
19945
|
-
}
|
19946
|
-
return containerHeight - minusHeight;
|
19947
|
-
}, [globalConfig, containerHeight, tagList]);
|
19948
|
-
React.useImperativeHandle(ref, () => {
|
19949
|
-
return {
|
19950
|
-
play() {
|
19951
|
-
var _a;
|
19952
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19953
|
-
},
|
19954
|
-
pause() {
|
19955
|
-
var _a;
|
19956
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19957
|
-
},
|
19958
|
-
slideTo(n) {
|
19959
|
-
var _a, _b;
|
19960
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
19961
|
-
return;
|
19962
|
-
(_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);
|
19963
|
-
},
|
19964
|
-
isPlaying() {
|
19965
|
-
var _a, _b;
|
19966
|
-
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;
|
19967
|
-
}
|
19968
|
-
};
|
19969
|
-
});
|
19970
|
-
// 判断是否是视频
|
19971
|
-
const isVideoUrl = (url) => {
|
19972
|
-
if (url && url !== '' && typeof url === 'string') {
|
19973
|
-
const imageExtensions = ['.mp4', '.m3u8'];
|
19974
|
-
const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
|
19975
|
-
return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
|
19976
|
-
}
|
19977
|
-
else {
|
19978
|
-
return false;
|
19979
|
-
}
|
19980
|
-
};
|
19981
|
-
const renderContent = (rec, index) => {
|
19982
|
-
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19983
|
-
if (isVideo) {
|
19984
|
-
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 })));
|
19985
|
-
}
|
19986
|
-
else {
|
19987
|
-
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 }));
|
19988
|
-
}
|
19989
|
-
};
|
19990
|
-
React.useMemo(() => {
|
19991
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19992
|
-
return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
19993
|
-
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
19994
|
-
}
|
19995
|
-
return null;
|
19996
|
-
}, [globalConfig]);
|
19997
|
-
const renderBottom = (rec, index) => {
|
19998
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19999
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
20000
|
-
let cta = null;
|
20001
|
-
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) {
|
20002
|
-
cta = '多商品CTA';
|
20003
|
-
}
|
20004
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
20005
|
-
cta = '商品CTA';
|
20006
|
-
}
|
20007
|
-
else {
|
20008
|
-
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;
|
20009
|
-
}
|
20010
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
20011
|
-
return (React.createElement(React.Fragment, null,
|
20012
|
-
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
20013
|
-
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
20014
|
-
height: '130px',
|
20015
|
-
position: 'absolute',
|
20016
|
-
bottom: 0,
|
20017
|
-
width: '100%',
|
20018
|
-
willChange: 'transform',
|
20019
|
-
zIndex: 2,
|
20020
|
-
pointerEvents
|
20021
|
-
} })),
|
20022
|
-
React.createElement("div", { style: {
|
20023
|
-
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
20024
|
-
zIndex: 999,
|
20025
|
-
position: 'absolute',
|
20026
|
-
bottom: 0,
|
20027
|
-
left: 0,
|
20028
|
-
right: 0,
|
20029
|
-
paddingTop: '20px'
|
20030
|
-
} },
|
20031
|
-
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
20032
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
20033
|
-
React.createElement("div", null,
|
20034
|
-
React.createElement(ExpandableText$1
|
20035
|
-
// className='clc-sxp-bottom-text'
|
20036
|
-
, {
|
20037
|
-
// className='clc-sxp-bottom-text'
|
20038
|
-
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' }) }),
|
20039
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
20040
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
20041
|
-
}
|
20042
|
-
return null;
|
20043
|
-
};
|
20044
|
-
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
20045
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
20046
|
-
const renderLikeButton = (rec, index) => {
|
20047
|
-
var _a, _b, _c, _d;
|
20048
|
-
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
20049
|
-
return;
|
20050
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
20051
|
-
if (top < 40) {
|
20052
|
-
top += 40;
|
20053
|
-
}
|
20054
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
20055
|
-
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,
|
20056
|
-
// className={style['clc-sxp-like-button']}
|
20057
|
-
style: {
|
20058
|
-
top,
|
20059
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
20060
|
-
position: 'absolute',
|
20061
|
-
zIndex: 999,
|
20062
|
-
backgroundColor: 'transparent',
|
20063
|
-
width: '50px',
|
20064
|
-
height: '50px',
|
20065
|
-
outline: 'none',
|
20066
|
-
border: 'none',
|
20067
|
-
boxSizing: 'content-box',
|
20068
|
-
padding: 0,
|
20069
|
-
transform: 'translate3d(0px, 0px, 0px)'
|
20070
|
-
} }));
|
20071
|
-
}
|
20072
|
-
return null;
|
20073
|
-
};
|
20074
|
-
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
20075
|
-
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
20076
|
-
const renderToggleButton = (visible) => {
|
20077
|
-
var _a, _b, _c, _d;
|
20078
|
-
if (!visible)
|
20079
|
-
return;
|
20080
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
20081
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
20082
|
-
top += 45;
|
20083
|
-
}
|
20084
|
-
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: {
|
20085
|
-
position: 'absolute',
|
20086
|
-
visibility: 'visible',
|
20087
|
-
zIndex: 999,
|
20088
|
-
transform: 'translate3d(0px,0px,0px)',
|
20089
|
-
[(_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,
|
20090
|
-
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
20091
|
-
backgroundColor: 'transparent',
|
20092
|
-
width: '50px',
|
20093
|
-
height: '50px',
|
20094
|
-
outline: 'none',
|
20095
|
-
border: 'none',
|
20096
|
-
boxSizing: 'content-box',
|
20097
|
-
padding: 0
|
20098
|
-
}, 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 })));
|
20099
|
-
};
|
20100
|
-
const renderView = (item, index) => {
|
20101
|
-
var _a, _b, _c, _d;
|
20102
|
-
const rec = lodash.cloneDeep(recData);
|
20103
|
-
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20104
|
-
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20105
|
-
return (React.createElement("div", { style: { position: 'relative' } },
|
20106
|
-
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20107
|
-
renderBottom(rec, index),
|
20108
|
-
renderLikeButton(rec, index),
|
20109
|
-
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
20110
|
-
React.createElement(ToggleButton$1, { style: {
|
20111
|
-
position: 'absolute',
|
20112
|
-
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
20113
|
-
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',
|
20114
|
-
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
20115
|
-
zIndex: 999
|
20116
|
-
}, 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 }),
|
20117
|
-
renderContent(item, index))));
|
20118
|
-
};
|
20119
|
-
React.useEffect(() => {
|
20120
|
-
var _a, _b;
|
20121
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20122
|
-
return;
|
20123
|
-
(_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);
|
20124
|
-
}, [activeIndex]);
|
20125
|
-
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20126
|
-
var _a;
|
20127
|
-
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
20128
|
-
}, 1000), []);
|
20129
|
-
React.useEffect(() => {
|
20130
|
-
if (disabledListener)
|
20131
|
-
return;
|
20132
|
-
const events = ['touchstart', 'touchcancel'];
|
20133
|
-
events.forEach((event) => {
|
20134
|
-
window.addEventListener(event, handleSessionExpire);
|
20135
|
-
});
|
20136
|
-
return () => {
|
20137
|
-
events.forEach((event) => {
|
20138
|
-
window.removeEventListener(event, handleSessionExpire);
|
20139
|
-
});
|
20140
|
-
};
|
20141
|
-
}, [handleSessionExpire, disabledListener]);
|
20142
|
-
return (React.createElement("div", { id: 'sxp-render',
|
20143
|
-
// className={style['clc-sxp-container']}
|
20144
|
-
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20145
|
-
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20146
|
-
swiperRef.current.swiper.allowTouchMove = false;
|
20147
|
-
setTimeout(() => {
|
20148
|
-
swiperRef.current.swiper.allowTouchMove = true;
|
20149
|
-
}, 500);
|
20150
|
-
}, onActiveIndexChange: (swiper) => {
|
20151
|
-
setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
|
20152
|
-
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20153
|
-
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20154
|
-
return renderView(rec, index);
|
20155
|
-
}))));
|
20156
|
-
});
|
20157
|
-
var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
|
20158
|
-
|
20159
19463
|
/*
|
20160
19464
|
* @Author: binruan@chatlabs.com
|
20161
19465
|
* @Date: 2023-10-31 10:56:01
|
20162
19466
|
* @LastEditors: binruan@chatlabs.com
|
20163
|
-
* @LastEditTime:
|
19467
|
+
* @LastEditTime: 2024-10-23 15:07:29
|
20164
19468
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20165
19469
|
*
|
20166
19470
|
*/
|
@@ -20252,9 +19556,17 @@ const Popup = () => {
|
|
20252
19556
|
|
20253
19557
|
/*
|
20254
19558
|
* @Author: binruan@chatlabs.com
|
20255
|
-
* @Date: 2024-
|
19559
|
+
* @Date: 2024-01-15 19:03:09
|
19560
|
+
* @LastEditors: binruan@chatlabs.com
|
19561
|
+
* @LastEditTime: 2025-02-24 15:47:44
|
19562
|
+
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
19563
|
+
*
|
19564
|
+
*/
|
19565
|
+
/*
|
19566
|
+
* @Author: binruan@chatlabs.com
|
19567
|
+
* @Date: 2023-11-24 15:58:00
|
20256
19568
|
* @LastEditors: binruan@chatlabs.com
|
20257
|
-
* @LastEditTime:
|
19569
|
+
* @LastEditTime: 2023-12-26 10:24:42
|
20258
19570
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20259
19571
|
*
|
20260
19572
|
*/
|
@@ -20262,20 +19574,20 @@ const RESOLVER = {};
|
|
20262
19574
|
Object.values(_materials_).forEach((v) => {
|
20263
19575
|
RESOLVER[v.extend.type] = v;
|
20264
19576
|
});
|
20265
|
-
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList
|
20266
|
-
var _a, _b, _c, _d, _e, _f
|
19577
|
+
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
|
19578
|
+
var _a, _b, _c, _d, _e, _f;
|
20267
19579
|
const utmVal = React.useMemo(() => {
|
20268
19580
|
var _a;
|
20269
19581
|
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('?', '') : '';
|
20270
19582
|
return searchParams;
|
20271
19583
|
}, []);
|
20272
|
-
const [_schema, setSchema] = React.useState(
|
19584
|
+
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20273
19585
|
const [channel, setChannel] = React.useState();
|
20274
19586
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20275
|
-
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: (
|
20276
|
-
var _a
|
19587
|
+
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 }) => {
|
19588
|
+
var _a;
|
20277
19589
|
return (React.createElement(React.Fragment, null,
|
20278
|
-
React.createElement(
|
19590
|
+
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 })),
|
20279
19591
|
React.createElement(Popup, null)));
|
20280
19592
|
} })));
|
20281
19593
|
};
|
@@ -20285,18 +19597,17 @@ var index = React.memo(SxpPageCore);
|
|
20285
19597
|
* @Author : haocanweng@chatlabs.cn
|
20286
19598
|
* @Date : 2023-08-21 16:31:58
|
20287
19599
|
* @LastEditors: binruan@chatlabs.com
|
20288
|
-
* @LastEditTime:
|
19600
|
+
* @LastEditTime: 2024-06-25 11:37:48
|
20289
19601
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
20290
19602
|
*/
|
20291
19603
|
|
20292
19604
|
exports.DiyPortalPreview = index$1;
|
20293
|
-
exports.DiyStoryPreview = DiyStoryPreview$1;
|
20294
19605
|
exports.EditorDataProvider = EditorDataProvider;
|
20295
19606
|
exports.Modal = Modal$1;
|
20296
19607
|
exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
|
20297
19608
|
exports.SxpPageCore = index;
|
20298
|
-
exports.SxpPageRender =
|
20299
|
-
exports.core = index$
|
19609
|
+
exports.SxpPageRender = SxpPageRender$1;
|
19610
|
+
exports.core = index$2;
|
20300
19611
|
exports.default = Pagebuilder;
|
20301
19612
|
exports.materials = _materials_;
|
20302
19613
|
exports.useEditorDataProvider = useEditorDataProvider;
|