pb-sxp-ui 1.15.15-alpha.2 → 1.15.16-alpha.2
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 +146 -785
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +145 -783
- 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 +146 -785
- 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 +58 -32
- 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 +58 -32
- 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 -195
- 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 -198
- package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
- package/lib/core/components/DiyStoryPreview/index.js +0 -414
package/dist/pb-ui.js
CHANGED
@@ -444,6 +444,39 @@
|
|
444
444
|
})
|
445
445
|
};
|
446
446
|
|
447
|
+
function useEditor() {
|
448
|
+
return React.useContext(EditorContext);
|
449
|
+
}
|
450
|
+
|
451
|
+
function useDataSource() {
|
452
|
+
return React.useContext(DataSourceContext);
|
453
|
+
}
|
454
|
+
|
455
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
456
|
+
const generateFeSessionId = () => {
|
457
|
+
const uid = getUid(); // 32位长度
|
458
|
+
const timestamp = Date.now(); // 13位长度
|
459
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
460
|
+
return result;
|
461
|
+
};
|
462
|
+
// 生成或者获取sessionID
|
463
|
+
const storeAndLoadFeSessionId = () => {
|
464
|
+
let result = getFeSessionId();
|
465
|
+
if (!result) {
|
466
|
+
result = generateFeSessionId();
|
467
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
468
|
+
}
|
469
|
+
return result;
|
470
|
+
};
|
471
|
+
const refreshFeSessionId = () => {
|
472
|
+
const result = generateFeSessionId();
|
473
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
474
|
+
};
|
475
|
+
// 获取 sessionID
|
476
|
+
const getFeSessionId = () => {
|
477
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
478
|
+
};
|
479
|
+
|
447
480
|
/*
|
448
481
|
* @Author: binruan@chatlabs.com
|
449
482
|
* @Date: 2024-03-20 10:27:31
|
@@ -495,39 +528,6 @@
|
|
495
528
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
496
529
|
};
|
497
530
|
|
498
|
-
function useEditor() {
|
499
|
-
return React.useContext(EditorContext);
|
500
|
-
}
|
501
|
-
|
502
|
-
function useDataSource() {
|
503
|
-
return React.useContext(DataSourceContext);
|
504
|
-
}
|
505
|
-
|
506
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
507
|
-
const generateFeSessionId = () => {
|
508
|
-
const uid = getUid(); // 32位长度
|
509
|
-
const timestamp = Date.now(); // 13位长度
|
510
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
511
|
-
return result;
|
512
|
-
};
|
513
|
-
// 生成或者获取sessionID
|
514
|
-
const storeAndLoadFeSessionId = () => {
|
515
|
-
let result = getFeSessionId();
|
516
|
-
if (!result) {
|
517
|
-
result = generateFeSessionId();
|
518
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
519
|
-
}
|
520
|
-
return result;
|
521
|
-
};
|
522
|
-
const refreshFeSessionId = () => {
|
523
|
-
const result = generateFeSessionId();
|
524
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
525
|
-
};
|
526
|
-
// 获取 sessionID
|
527
|
-
const getFeSessionId = () => {
|
528
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
529
|
-
};
|
530
|
-
|
531
531
|
/*
|
532
532
|
* @Author: binruan@chatlabs.com
|
533
533
|
* @Date: 2024-03-20 10:27:31
|
@@ -740,8 +740,12 @@
|
|
740
740
|
// Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
|
741
741
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
742
742
|
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
743
|
-
JSON.stringify(
|
744
|
-
|
743
|
+
JSON.stringify({
|
744
|
+
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
745
|
+
})
|
746
|
+
], {
|
747
|
+
type: 'application/json;charset=UTF-8'
|
748
|
+
}));
|
745
749
|
}
|
746
750
|
return window
|
747
751
|
.fetch(`${url}/api/${path}`, {
|
@@ -772,16 +776,17 @@
|
|
772
776
|
}, [bffDataSource]);
|
773
777
|
// 获取推荐视频数据
|
774
778
|
const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
775
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
776
|
-
query = Object.assign({ maxSize:
|
779
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
780
|
+
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 }));
|
777
781
|
if (channel) {
|
778
782
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
779
783
|
}
|
780
784
|
else if (utmVal) {
|
781
|
-
const val = (
|
785
|
+
const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
|
786
|
+
var _a, _b;
|
782
787
|
const key = val.split('=')[0];
|
783
|
-
return key;
|
784
|
-
})) === null ||
|
788
|
+
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);
|
789
|
+
})) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
|
785
790
|
if (val)
|
786
791
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
787
792
|
}
|
@@ -795,19 +800,19 @@
|
|
795
800
|
let list = [];
|
796
801
|
let result = null;
|
797
802
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
798
|
-
var
|
803
|
+
var _v, _w, _x, _y, _z, _0;
|
799
804
|
query.pageNum = pageNum;
|
800
805
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
801
806
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
802
807
|
return undefined;
|
803
808
|
}
|
804
809
|
setLoading(false);
|
805
|
-
list = list.concat((
|
810
|
+
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 : []);
|
806
811
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
807
812
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
808
813
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
809
814
|
}
|
810
|
-
const isNotNullList = (
|
815
|
+
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));
|
811
816
|
if (isNotNullList) {
|
812
817
|
pageNum = pageNum + 1;
|
813
818
|
yield recurveRecList(query);
|
@@ -815,13 +820,13 @@
|
|
815
820
|
});
|
816
821
|
yield recurveRecList(query);
|
817
822
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
818
|
-
setCurReqInfo({ rtc: (
|
823
|
+
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 });
|
819
824
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
820
825
|
}
|
821
826
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
822
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
827
|
+
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 });
|
823
828
|
}
|
824
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
829
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
825
830
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
826
831
|
return undefined;
|
827
832
|
}
|
@@ -829,8 +834,8 @@
|
|
829
834
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
830
835
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
831
836
|
let list = [];
|
832
|
-
list = list.concat((
|
833
|
-
const isNotNullList = (
|
837
|
+
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 : []);
|
838
|
+
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));
|
834
839
|
if (!isNotNullList) {
|
835
840
|
setIsNoMoreData(true);
|
836
841
|
}
|
@@ -839,12 +844,12 @@
|
|
839
844
|
return result === null || result === void 0 ? void 0 : result.data;
|
840
845
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
841
846
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
842
|
-
var
|
847
|
+
var _1, _2, _3, _4;
|
843
848
|
if (rtcList.length <= 0) {
|
844
849
|
return;
|
845
850
|
}
|
846
851
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
847
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
852
|
+
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 })));
|
848
853
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
849
854
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
850
855
|
return data;
|
@@ -901,7 +906,7 @@
|
|
901
906
|
console.log('userInfo:', userInfo);
|
902
907
|
console.log('eventInfo:', ef);
|
903
908
|
console.log('========= 结束 =========');
|
904
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/
|
909
|
+
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)}` : ''}`, {
|
905
910
|
method: 'POST',
|
906
911
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
907
912
|
type: 'beacon'
|
@@ -917,20 +922,33 @@
|
|
917
922
|
bffDataSource
|
918
923
|
]);
|
919
924
|
const bffFbReport = React.useCallback(({ eventName, product }) => {
|
920
|
-
var _a, _b, _c, _d, _e, _f;
|
925
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
926
|
+
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
927
|
+
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
|
928
|
+
page_location: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
|
929
|
+
page_title: document === null || document === void 0 ? void 0 : document.title
|
930
|
+
});
|
931
|
+
}
|
932
|
+
if (eventName && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
933
|
+
window === null || window === void 0 ? void 0 : window.fbq('track', eventName, {
|
934
|
+
page_path: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.pathname,
|
935
|
+
page_location: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
936
|
+
page_title: document === null || document === void 0 ? void 0 : document.title
|
937
|
+
});
|
938
|
+
}
|
921
939
|
if (!enableReportEvent ||
|
922
940
|
!enabledMetaConversionApi ||
|
923
941
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
924
|
-
!((
|
942
|
+
!((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _d === void 0 ? void 0 : _d[eventName])) {
|
925
943
|
return;
|
926
944
|
}
|
927
|
-
const jsonParams = lodash.cloneDeep((
|
945
|
+
const jsonParams = lodash.cloneDeep((_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _e === void 0 ? void 0 : _e[eventName]);
|
928
946
|
const urlParams = new URLSearchParams(window.location.search);
|
929
947
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
930
948
|
const fix_par = {
|
931
|
-
event_source_url: (
|
949
|
+
event_source_url: (_f = window === null || window === void 0 ? void 0 : window.location) === null || _f === void 0 ? void 0 : _f.href,
|
932
950
|
external_id: fakeUserId,
|
933
|
-
client_user_agent: (
|
951
|
+
client_user_agent: (_h = (_g = window === null || window === void 0 ? void 0 : window.navigator) === null || _g === void 0 ? void 0 : _g.userAgent) !== null && _h !== void 0 ? _h : '',
|
934
952
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
935
953
|
fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
|
936
954
|
time: Math.floor(Date.now() / 1000)
|
@@ -981,7 +999,15 @@
|
|
981
999
|
}
|
982
1000
|
};
|
983
1001
|
getEventParams(jsonParams);
|
984
|
-
|
1002
|
+
const params = {};
|
1003
|
+
const queryString = location.search.slice(1);
|
1004
|
+
(_j = splitUrlParams(queryString)) === null || _j === void 0 ? void 0 : _j.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/${(_k = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _k === void 0 ? void 0 : _k['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
|
985
1011
|
method: 'POST',
|
986
1012
|
body: jsonParams,
|
987
1013
|
type: 'beacon'
|
@@ -1009,18 +1035,18 @@
|
|
1009
1035
|
}), [bffFetch]);
|
1010
1036
|
// 获取 Tag
|
1011
1037
|
const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
1012
|
-
var
|
1013
|
-
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);
|
1014
1040
|
if (!utmVal || !isShowTag)
|
1015
1041
|
return;
|
1016
1042
|
try {
|
1017
|
-
const val = (
|
1043
|
+
const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
|
1018
1044
|
var _a, _b;
|
1019
1045
|
const key = val.split('=')[0];
|
1020
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);
|
1021
|
-
})) === null ||
|
1047
|
+
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
1022
1048
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1023
|
-
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 : []);
|
1024
1050
|
}
|
1025
1051
|
catch (e) {
|
1026
1052
|
console.log('e', e);
|
@@ -1080,10 +1106,10 @@
|
|
1080
1106
|
});
|
1081
1107
|
}, [bffEventReport]);
|
1082
1108
|
const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1083
|
-
var
|
1109
|
+
var _13, _14;
|
1084
1110
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1085
|
-
setChatlabsId((
|
1086
|
-
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';
|
1087
1113
|
}), [bffFetch]);
|
1088
1114
|
const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1089
1115
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1478,7 +1504,7 @@
|
|
1478
1504
|
React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
|
1479
1505
|
});
|
1480
1506
|
|
1481
|
-
var index$
|
1507
|
+
var index$2 = /*#__PURE__*/Object.freeze({
|
1482
1508
|
__proto__: null,
|
1483
1509
|
EditorCore: EditorCore
|
1484
1510
|
});
|
@@ -10098,15 +10124,7 @@
|
|
10098
10124
|
wordBreak: 'break-word'
|
10099
10125
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10100
10126
|
React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
10101
|
-
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
10102
|
-
textDecoration: 'underline',
|
10103
|
-
cursor: 'pointer',
|
10104
|
-
outline: 'none',
|
10105
|
-
border: 'none',
|
10106
|
-
boxSizing: 'content-box',
|
10107
|
-
padding: 0,
|
10108
|
-
background: 'transparent'
|
10109
|
-
}, 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: {
|
10110
10128
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
10111
10129
|
} }))));
|
10112
10130
|
};
|
@@ -12464,7 +12482,7 @@ Made in Italy` })));
|
|
12464
12482
|
const handleClick = lodash.throttle((e) => {
|
12465
12483
|
var _a, _b, _c, _d, _e, _f;
|
12466
12484
|
e.preventDefault();
|
12467
|
-
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;
|
12468
12486
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
12469
12487
|
eventSubject: 'clickCta',
|
12470
12488
|
eventDescription: 'User clicked the CTA'
|
@@ -12491,7 +12509,7 @@ Made in Italy` })));
|
|
12491
12509
|
setElement(null);
|
12492
12510
|
}
|
12493
12511
|
}, [element, popup]);
|
12494
|
-
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));
|
12495
12513
|
};
|
12496
12514
|
var EventProvider$1 = React.memo(EventProvider);
|
12497
12515
|
|
@@ -13087,7 +13105,6 @@ Made in Italy` })));
|
|
13087
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"]);
|
13088
13106
|
const { sxpParameter } = useSxpDataSource();
|
13089
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]);
|
13090
|
-
console.log(recData, '222');
|
13091
13108
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13092
13109
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
13093
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' },
|
@@ -13294,7 +13311,6 @@ Made in Italy` })));
|
|
13294
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"]);
|
13295
13312
|
const { sxpParameter } = useSxpDataSource();
|
13296
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]);
|
13297
|
-
console.log(recData, '333');
|
13298
13314
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13299
13315
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
13300
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' },
|
@@ -17570,15 +17586,15 @@ Made in Italy` })));
|
|
17570
17586
|
Swipe: Swipe
|
17571
17587
|
});
|
17572
17588
|
|
17573
|
-
const defaultUnLikeIconPath$
|
17574
|
-
const defaultLikeIconPath$
|
17589
|
+
const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
17590
|
+
const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
17575
17591
|
const LikeButton = (_a) => {
|
17576
17592
|
var _b;
|
17577
17593
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
17578
17594
|
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
17579
17595
|
const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
|
17580
|
-
const likeIcon = useIconLink(defaultLikeIconPath$
|
17581
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath$
|
17596
|
+
const likeIcon = useIconLink(defaultLikeIconPath$1);
|
17597
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
|
17582
17598
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17583
17599
|
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17584
17600
|
if (state) {
|
@@ -17669,7 +17685,7 @@ Made in Italy` })));
|
|
17669
17685
|
};
|
17670
17686
|
})();
|
17671
17687
|
|
17672
|
-
const VideoWidget$
|
17688
|
+
const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
17673
17689
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17674
17690
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
17675
17691
|
const videoStartTime = React.useRef(0);
|
@@ -18014,7 +18030,7 @@ Made in Italy` })));
|
|
18014
18030
|
renderLoading,
|
18015
18031
|
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
|
18016
18032
|
};
|
18017
|
-
var VideoWidget$
|
18033
|
+
var VideoWidget$3 = React.memo(VideoWidget$2);
|
18018
18034
|
|
18019
18035
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
18020
18036
|
const [isTrue, setIsTure] = React.useState(defaultValue);
|
@@ -18103,7 +18119,7 @@ Made in Italy` })));
|
|
18103
18119
|
}, onLoad: onShowFirstImage }))));
|
18104
18120
|
};
|
18105
18121
|
|
18106
|
-
const PictureGroup$
|
18122
|
+
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18107
18123
|
var _a, _b;
|
18108
18124
|
const { isActive } = useSwiperSlide();
|
18109
18125
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -18197,7 +18213,7 @@ Made in Italy` })));
|
|
18197
18213
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18198
18214
|
}))));
|
18199
18215
|
};
|
18200
|
-
var PictureGroup$
|
18216
|
+
var PictureGroup$3 = React.memo(PictureGroup$2);
|
18201
18217
|
|
18202
18218
|
/*
|
18203
18219
|
* @Author: binruan@chatlabs.com
|
@@ -18313,7 +18329,7 @@ Made in Italy` })));
|
|
18313
18329
|
* @Author: binruan@chatlabs.com
|
18314
18330
|
* @Date: 2023-12-26 16:11:34
|
18315
18331
|
* @LastEditors: binruan@chatlabs.com
|
18316
|
-
* @LastEditTime:
|
18332
|
+
* @LastEditTime: 2024-10-31 10:30:55
|
18317
18333
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18318
18334
|
*
|
18319
18335
|
*/
|
@@ -18323,10 +18339,10 @@ Made in Italy` })));
|
|
18323
18339
|
return null;
|
18324
18340
|
const renderComp = React.useMemo(() => {
|
18325
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;
|
18326
|
-
|
18342
|
+
//如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18327
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)))
|
18328
18344
|
return;
|
18329
|
-
|
18345
|
+
//默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18330
18346
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18331
18347
|
return;
|
18332
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)) ||
|
@@ -18343,10 +18359,10 @@ Made in Italy` })));
|
|
18343
18359
|
const Component = withBindDataSource(t);
|
18344
18360
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18345
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';
|
18346
|
-
|
18362
|
+
let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18347
18363
|
if (style.hasOwnProperty('backdropFilter')) {
|
18348
|
-
|
18349
|
-
style
|
18364
|
+
let sbf = style['backdropFilter'];
|
18365
|
+
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18350
18366
|
}
|
18351
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 })));
|
18352
18368
|
}
|
@@ -18707,10 +18723,10 @@ Made in Italy` })));
|
|
18707
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)));
|
18708
18724
|
}
|
18709
18725
|
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18710
|
-
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 }));
|
18711
18727
|
}
|
18712
18728
|
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18713
|
-
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 }));
|
18714
18730
|
}
|
18715
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) {
|
18716
18732
|
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
@@ -19078,9 +19094,9 @@ Made in Italy` })));
|
|
19078
19094
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
19079
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 } })))))));
|
19080
19096
|
};
|
19081
|
-
var
|
19097
|
+
var SxpPageRender$1 = React.memo(SxpPageRender);
|
19082
19098
|
|
19083
|
-
const PictureGroup
|
19099
|
+
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
19084
19100
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19085
19101
|
clickable: true,
|
19086
19102
|
bulletActiveClass: 'swipe-item-active-bullet',
|
@@ -19090,9 +19106,9 @@ Made in Italy` })));
|
|
19090
19106
|
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
19091
19107
|
})));
|
19092
19108
|
};
|
19093
|
-
var PictureGroup$
|
19109
|
+
var PictureGroup$1 = React.memo(PictureGroup);
|
19094
19110
|
|
19095
|
-
const VideoWidget
|
19111
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
19096
19112
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19097
19113
|
const videoRef = React.useRef(null);
|
19098
19114
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
@@ -19322,14 +19338,14 @@ Made in Italy` })));
|
|
19322
19338
|
renderPoster,
|
19323
19339
|
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
19324
19340
|
};
|
19325
|
-
var VideoWidget$
|
19341
|
+
var VideoWidget$1 = React.memo(VideoWidget);
|
19326
19342
|
|
19327
|
-
const RESOLVER$
|
19343
|
+
const RESOLVER$1 = {};
|
19328
19344
|
Object.values(_materials_).forEach((v) => {
|
19329
|
-
RESOLVER$
|
19345
|
+
RESOLVER$1[v.extend.type] = v;
|
19330
19346
|
});
|
19331
|
-
const defaultUnLikeIconPath
|
19332
|
-
const defaultLikeIconPath
|
19347
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19348
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19333
19349
|
const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
|
19334
19350
|
const height = React.useMemo(() => {
|
19335
19351
|
let minusHeight = 0;
|
@@ -19344,16 +19360,16 @@ Made in Italy` })));
|
|
19344
19360
|
const renderContent = (rec, index) => {
|
19345
19361
|
var _a, _b, _c, _d;
|
19346
19362
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
19347
|
-
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 }));
|
19348
19364
|
}
|
19349
19365
|
if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
19350
|
-
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 }));
|
19351
19367
|
}
|
19352
19368
|
if (rec.product) {
|
19353
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) {
|
19354
19370
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
19355
19371
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19356
|
-
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];
|
19357
19373
|
const Component = withBindDataSource(t);
|
19358
19374
|
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
19359
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) || {},
|
@@ -19375,7 +19391,7 @@ Made in Italy` })));
|
|
19375
19391
|
const CTA = (rec, index) => {
|
19376
19392
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
19377
19393
|
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
19378
|
-
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 })));
|
19379
19395
|
}
|
19380
19396
|
return null;
|
19381
19397
|
};
|
@@ -19393,8 +19409,8 @@ Made in Italy` })));
|
|
19393
19409
|
}
|
19394
19410
|
return null;
|
19395
19411
|
};
|
19396
|
-
const likeIcon = useIconLink(defaultLikeIconPath
|
19397
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath
|
19412
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19413
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19398
19414
|
const renderLikeButton = (rec, index) => {
|
19399
19415
|
var _a, _b, _c, _d;
|
19400
19416
|
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
@@ -19444,673 +19460,11 @@ Made in Italy` })));
|
|
19444
19460
|
};
|
19445
19461
|
var index$1 = React.memo(DiyPortalPreview);
|
19446
19462
|
|
19447
|
-
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
|
19448
|
-
const { isActive } = useSwiperSlide();
|
19449
|
-
const [isload, setIsLoad] = React.useState(false);
|
19450
|
-
React.useEffect(() => {
|
19451
|
-
if (isActive && isload && loopPlay) {
|
19452
|
-
setTimeout(() => {
|
19453
|
-
var _a, _b, _c, _d;
|
19454
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19455
|
-
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
|
19456
|
-
}
|
19457
|
-
else {
|
19458
|
-
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;
|
19459
|
-
(_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
|
19460
|
-
}
|
19461
|
-
}, 3000);
|
19462
|
-
}
|
19463
|
-
}, [isActive, isload, data, index, swiperRef, loopPlay]);
|
19464
|
-
const loadFinishImage = () => {
|
19465
|
-
setIsLoad(true);
|
19466
|
-
};
|
19467
|
-
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
19468
|
-
clickable: true,
|
19469
|
-
bulletActiveClass: 'swipe-item-active-bullet',
|
19470
|
-
bulletElement: 'button'
|
19471
|
-
}, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
|
19472
|
-
return (React.createElement(SwiperSlide, { key: url },
|
19473
|
-
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
|
19474
|
-
})));
|
19475
|
-
};
|
19476
|
-
var PictureGroup$1 = React.memo(PictureGroup);
|
19477
|
-
|
19478
|
-
const VideoWidget = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
|
19479
|
-
const { isActive } = useSwiperSlide();
|
19480
|
-
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19481
|
-
const videoRef = React.useRef(null);
|
19482
|
-
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
19483
|
-
React.useRef(0);
|
19484
|
-
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
19485
|
-
React.useState(true);
|
19486
|
-
React.useRef(null);
|
19487
|
-
React.useState('');
|
19488
|
-
const videoId = `pb-cache-video-${index}`;
|
19489
|
-
const hlsRef = React.useRef(null);
|
19490
|
-
const loopPlayRef = React.useRef(loopPlay);
|
19491
|
-
React.useEffect(() => {
|
19492
|
-
loopPlayRef.current = loopPlay;
|
19493
|
-
}, [loopPlay]);
|
19494
|
-
React.useImperativeHandle(ref, () => {
|
19495
|
-
return {
|
19496
|
-
play() {
|
19497
|
-
var _a;
|
19498
|
-
if (!videoRef.current)
|
19499
|
-
return;
|
19500
|
-
handleTimeUpload();
|
19501
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19502
|
-
setIsPauseVideo(false);
|
19503
|
-
},
|
19504
|
-
pause() {
|
19505
|
-
var _a;
|
19506
|
-
if (!videoRef.current)
|
19507
|
-
return;
|
19508
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19509
|
-
setIsPauseVideo(true);
|
19510
|
-
},
|
19511
|
-
setLoopPlay(v) {
|
19512
|
-
loopPlayRef.current = v;
|
19513
|
-
},
|
19514
|
-
isPlaying() {
|
19515
|
-
var _a;
|
19516
|
-
return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
|
19517
|
-
}
|
19518
|
-
};
|
19519
|
-
});
|
19520
|
-
React.useEffect(() => {
|
19521
|
-
if (!videoRef.current)
|
19522
|
-
return;
|
19523
|
-
videoRef.current.muted = muted;
|
19524
|
-
}, [muted]);
|
19525
|
-
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19526
|
-
const handleLoadedMetadata = React.useCallback(() => {
|
19527
|
-
var _a;
|
19528
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19529
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19530
|
-
setIsLoadFinish(true);
|
19531
|
-
}, []);
|
19532
|
-
const handleClickVideo = React.useCallback((type) => () => {
|
19533
|
-
var _a, _b, _c, _d, _e, _f;
|
19534
|
-
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
19535
|
-
return;
|
19536
|
-
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
19537
|
-
switch (type) {
|
19538
|
-
case 'start':
|
19539
|
-
if (!isPause)
|
19540
|
-
return;
|
19541
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
19542
|
-
setIsPauseVideo(false);
|
19543
|
-
break;
|
19544
|
-
case 'pause':
|
19545
|
-
if (isPause)
|
19546
|
-
return;
|
19547
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19548
|
-
setIsPauseVideo(true);
|
19549
|
-
break;
|
19550
|
-
default:
|
19551
|
-
if (isPause) {
|
19552
|
-
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)) {
|
19553
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19554
|
-
}
|
19555
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
19556
|
-
}
|
19557
|
-
else {
|
19558
|
-
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
19559
|
-
}
|
19560
|
-
setIsPauseVideo(!isPause);
|
19561
|
-
break;
|
19562
|
-
}
|
19563
|
-
}, [isLoadFinish]);
|
19564
|
-
const blur = React.useMemo(() => {
|
19565
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
19566
|
-
}, [videoPostConfig]);
|
19567
|
-
const handleTimeUpload = () => {
|
19568
|
-
if (!videoRef.current)
|
19569
|
-
return;
|
19570
|
-
setTimeout(() => {
|
19571
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19572
|
-
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)) {
|
19573
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19574
|
-
if (!loopPlayRef.current)
|
19575
|
-
return;
|
19576
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19577
|
-
(_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.slideTo(0);
|
19578
|
-
}
|
19579
|
-
else {
|
19580
|
-
const i = (_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.activeIndex;
|
19581
|
-
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
19582
|
-
}
|
19583
|
-
}
|
19584
|
-
});
|
19585
|
-
};
|
19586
|
-
const handlePause = () => {
|
19587
|
-
setIsPauseVideo(true);
|
19588
|
-
onPause === null || onPause === void 0 ? void 0 : onPause();
|
19589
|
-
};
|
19590
|
-
const handlePlay = () => {
|
19591
|
-
var _a;
|
19592
|
-
const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
|
19593
|
-
onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
|
19594
|
-
};
|
19595
|
-
React.useEffect(() => {
|
19596
|
-
var _a, _b, _c, _d;
|
19597
|
-
if (!isActive)
|
19598
|
-
return;
|
19599
|
-
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
19600
|
-
if (!videoSrc)
|
19601
|
-
return;
|
19602
|
-
setIsPauseVideo(false);
|
19603
|
-
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
19604
|
-
if (!videoPlayerWrapperNode)
|
19605
|
-
return;
|
19606
|
-
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
19607
|
-
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
19608
|
-
return;
|
19609
|
-
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
19610
|
-
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
19611
|
-
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
19612
|
-
hls = new Hls();
|
19613
|
-
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
19614
|
-
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
19615
|
-
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
19616
|
-
var _a;
|
19617
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19618
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19619
|
-
});
|
19620
|
-
}
|
19621
|
-
else {
|
19622
|
-
videoRef.current.src = videoSrc;
|
19623
|
-
}
|
19624
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
19625
|
-
// videoRef.current?.addEventListener('playing', handlePlaying);
|
19626
|
-
// videoRef.current?.addEventListener('loadeddata', handLoadeddata);
|
19627
|
-
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
19628
|
-
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
|
19629
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
|
19630
|
-
return () => {
|
19631
|
-
var _a, _b, _c, _d, _e;
|
19632
|
-
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
19633
|
-
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
19634
|
-
setIsLoadFinish(false);
|
19635
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
19636
|
-
// videoRef.current?.removeEventListener('playing', handlePlaying);
|
19637
|
-
// videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
|
19638
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
19639
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
|
19640
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
|
19641
|
-
};
|
19642
|
-
}, [isActive]);
|
19643
|
-
const renderPoster = React.useMemo(() => {
|
19644
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19645
|
-
return null;
|
19646
|
-
}
|
19647
|
-
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' }));
|
19648
|
-
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
19649
|
-
React.useMemo(() => {
|
19650
|
-
return blur
|
19651
|
-
? {
|
19652
|
-
filter: 'blur(10px)',
|
19653
|
-
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
19654
|
-
}
|
19655
|
-
: {};
|
19656
|
-
}, [blur]);
|
19657
|
-
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19658
|
-
return null;
|
19659
|
-
}
|
19660
|
-
// const renderLoading = useMemo(() => {
|
19661
|
-
// if (!waiting || !isLoadFinish) return;
|
19662
|
-
// return (
|
19663
|
-
// <img
|
19664
|
-
// style={{
|
19665
|
-
// position: 'absolute',
|
19666
|
-
// top: '50%',
|
19667
|
-
// left: 0,
|
19668
|
-
// right: 0,
|
19669
|
-
// transform: 'translateY(-100%)',
|
19670
|
-
// margin: 'auto',
|
19671
|
-
// width: '50px',
|
19672
|
-
// height: '50px',
|
19673
|
-
// objectFit: 'contain'
|
19674
|
-
// }}
|
19675
|
-
// src={loading_gif}
|
19676
|
-
// alt='placeholder image'
|
19677
|
-
// />
|
19678
|
-
// );
|
19679
|
-
// }, [waiting, isLoadFinish]);
|
19680
|
-
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19681
|
-
position: 'relative',
|
19682
|
-
width: '100%',
|
19683
|
-
height,
|
19684
|
-
overflow: 'hidden'
|
19685
|
-
}, onClick: handleClickVideo() },
|
19686
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19687
|
-
renderPoster,
|
19688
|
-
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19689
|
-
});
|
19690
|
-
var VideoWidget$1 = React.memo(VideoWidget);
|
19691
|
-
|
19692
|
-
/*
|
19693
|
-
* @Author: binruan@chatlabs.com
|
19694
|
-
* @Date: 2025-03-25 13:54:27
|
19695
|
-
* @LastEditors: binruan@chatlabs.com
|
19696
|
-
* @LastEditTime: 2025-04-02 13:53:15
|
19697
|
-
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19698
|
-
*
|
19699
|
-
*/
|
19700
|
-
const recData = {
|
19701
|
-
position: 0,
|
19702
|
-
isCollected: false,
|
19703
|
-
product: null,
|
19704
|
-
video: {
|
19705
|
-
appId: null,
|
19706
|
-
itemId: 'VIDEOSsRgI1695278974368',
|
19707
|
-
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
19708
|
-
enTitle: null,
|
19709
|
-
icon: null,
|
19710
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
19711
|
-
link: null,
|
19712
|
-
linkTitle: null,
|
19713
|
-
linkType: null,
|
19714
|
-
menuCategoryId: null,
|
19715
|
-
remark: null,
|
19716
|
-
tags: [
|
19717
|
-
'Gift-Giving',
|
19718
|
-
'Daily Wear',
|
19719
|
-
'Business Formal',
|
19720
|
-
'Sports/Casual',
|
19721
|
-
'Anniversary Gifts',
|
19722
|
-
'Wedding/Engagement',
|
19723
|
-
'Formal Dinner/Party'
|
19724
|
-
],
|
19725
|
-
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19726
|
-
value: 385,
|
19727
|
-
weight: null,
|
19728
|
-
bindCta: null,
|
19729
|
-
bindProduct: null,
|
19730
|
-
bindProducts: [
|
19731
|
-
{
|
19732
|
-
appId: 'wx448578f8851f3dce',
|
19733
|
-
itemId: 'test02178888',
|
19734
|
-
title: 'christian dior小包包 新CDN',
|
19735
|
-
enTitle: null,
|
19736
|
-
icon: null,
|
19737
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19738
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19739
|
-
linkTitle: '',
|
19740
|
-
linkType: 'MP',
|
19741
|
-
menuCategoryId: null,
|
19742
|
-
remark: null,
|
19743
|
-
tags: [],
|
19744
|
-
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19745
|
-
value: null,
|
19746
|
-
weight: null,
|
19747
|
-
bindCta: {
|
19748
|
-
appId: 'wx448578f8851f3dce',
|
19749
|
-
itemId: 'CTA3KofE1716186622249',
|
19750
|
-
title: 'SHOP NOW 立即购买',
|
19751
|
-
enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
|
19752
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
19753
|
-
cover: null,
|
19754
|
-
link: '/pages/details/index?spu_id=1702262707659534338',
|
19755
|
-
linkTitle: '',
|
19756
|
-
linkType: 'MP',
|
19757
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19758
|
-
remark: null,
|
19759
|
-
tags: [
|
19760
|
-
"Woman's Perfumes",
|
19761
|
-
'Plates & Bowls',
|
19762
|
-
'Glasses',
|
19763
|
-
'Multicolor',
|
19764
|
-
'Carafes',
|
19765
|
-
'Tea & Coffee',
|
19766
|
-
'Green',
|
19767
|
-
'Grey',
|
19768
|
-
'Cutlery'
|
19769
|
-
],
|
19770
|
-
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19771
|
-
value: null,
|
19772
|
-
weight: null
|
19773
|
-
},
|
19774
|
-
collection: 'Ricco',
|
19775
|
-
currency: 'INR-₹',
|
19776
|
-
homePage: [
|
19777
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
19778
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
19779
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
19780
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
19781
|
-
],
|
19782
|
-
info: 'test',
|
19783
|
-
price: 53200,
|
19784
|
-
shippingInfo: null,
|
19785
|
-
taxInfo: null
|
19786
|
-
},
|
19787
|
-
{
|
19788
|
-
appId: null,
|
19789
|
-
itemId: '113J631A0684_C520',
|
19790
|
-
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
19791
|
-
enTitle: null,
|
19792
|
-
icon: null,
|
19793
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19794
|
-
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
19795
|
-
linkTitle: null,
|
19796
|
-
linkType: 'WEB',
|
19797
|
-
menuCategoryId: null,
|
19798
|
-
remark: null,
|
19799
|
-
tags: [],
|
19800
|
-
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19801
|
-
value: null,
|
19802
|
-
weight: null,
|
19803
|
-
bindCta: {
|
19804
|
-
appId: null,
|
19805
|
-
itemId: 'CTAAfaKf1730796437032',
|
19806
|
-
title: 'test',
|
19807
|
-
enTitle: 'test',
|
19808
|
-
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
19809
|
-
cover: null,
|
19810
|
-
link: null,
|
19811
|
-
linkTitle: null,
|
19812
|
-
linkType: null,
|
19813
|
-
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
19814
|
-
remark: '',
|
19815
|
-
tags: [],
|
19816
|
-
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19817
|
-
value: null,
|
19818
|
-
weight: null
|
19819
|
-
},
|
19820
|
-
collection: 'Jacquard de coton éponge bleu',
|
19821
|
-
currency: 'EUR-€',
|
19822
|
-
homePage: [
|
19823
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
19824
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
19825
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
19826
|
-
],
|
19827
|
-
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",
|
19828
|
-
price: 1800,
|
19829
|
-
shippingInfo: null,
|
19830
|
-
taxInfo: null
|
19831
|
-
},
|
19832
|
-
{
|
19833
|
-
appId: null,
|
19834
|
-
itemId: 'S5573CRIW_M928',
|
19835
|
-
title: 'Mini Dior Book Tote',
|
19836
|
-
enTitle: null,
|
19837
|
-
icon: null,
|
19838
|
-
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19839
|
-
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
19840
|
-
linkTitle: null,
|
19841
|
-
linkType: 'WEB',
|
19842
|
-
menuCategoryId: null,
|
19843
|
-
remark: null,
|
19844
|
-
tags: ['ダイヤモンド'],
|
19845
|
-
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
19846
|
-
value: null,
|
19847
|
-
weight: null,
|
19848
|
-
bindCta: null,
|
19849
|
-
collection: null,
|
19850
|
-
currency: 'GBP-£',
|
19851
|
-
homePage: [
|
19852
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
19853
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
19854
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
19855
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
19856
|
-
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
19857
|
-
],
|
19858
|
-
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.",
|
19859
|
-
price: 1950,
|
19860
|
-
shippingInfo: null,
|
19861
|
-
taxInfo: null
|
19862
|
-
}
|
19863
|
-
],
|
19864
|
-
url: null,
|
19865
|
-
blockCta: 1,
|
19866
|
-
blockProduct: 1,
|
19867
|
-
hashTags: [
|
19868
|
-
'Sports/Casual',
|
19869
|
-
'Formal Dinner/Party',
|
19870
|
-
'Business Formal',
|
19871
|
-
'Wedding/Engagement',
|
19872
|
-
'Gift-Giving',
|
19873
|
-
'Daily Wear',
|
19874
|
-
'Anniversary Gifts'
|
19875
|
-
]
|
19876
|
-
}
|
19877
|
-
};
|
19878
|
-
const RESOLVER$1 = {};
|
19879
|
-
Object.values(_materials_).forEach((v) => {
|
19880
|
-
RESOLVER$1[v.extend.type] = v;
|
19881
|
-
});
|
19882
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19883
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19884
|
-
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) => {
|
19885
|
-
const videoWidgetRef = React.useRef(null);
|
19886
|
-
const swiperRef = React.useRef(null);
|
19887
|
-
const [curIndex, setCurIndex] = React.useState(0);
|
19888
|
-
React.useMemo(() => {
|
19889
|
-
let minusHeight = 0;
|
19890
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19891
|
-
minusHeight += 45;
|
19892
|
-
}
|
19893
|
-
if (tagList.length > 0) {
|
19894
|
-
minusHeight += 45;
|
19895
|
-
}
|
19896
|
-
return containerHeight - minusHeight;
|
19897
|
-
}, [globalConfig, containerHeight, tagList]);
|
19898
|
-
React.useImperativeHandle(ref, () => {
|
19899
|
-
return {
|
19900
|
-
play() {
|
19901
|
-
var _a;
|
19902
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19903
|
-
},
|
19904
|
-
pause() {
|
19905
|
-
var _a;
|
19906
|
-
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19907
|
-
},
|
19908
|
-
slideTo(n) {
|
19909
|
-
var _a, _b;
|
19910
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
19911
|
-
return;
|
19912
|
-
(_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);
|
19913
|
-
},
|
19914
|
-
isPlaying() {
|
19915
|
-
var _a, _b;
|
19916
|
-
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;
|
19917
|
-
}
|
19918
|
-
};
|
19919
|
-
});
|
19920
|
-
// 判断是否是视频
|
19921
|
-
const isVideoUrl = (url) => {
|
19922
|
-
if (url && url !== '' && typeof url === 'string') {
|
19923
|
-
const imageExtensions = ['.mp4', '.m3u8'];
|
19924
|
-
const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
|
19925
|
-
return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
|
19926
|
-
}
|
19927
|
-
else {
|
19928
|
-
return false;
|
19929
|
-
}
|
19930
|
-
};
|
19931
|
-
const renderContent = (rec, index) => {
|
19932
|
-
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19933
|
-
if (isVideo) {
|
19934
|
-
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 })));
|
19935
|
-
}
|
19936
|
-
else {
|
19937
|
-
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 }));
|
19938
|
-
}
|
19939
|
-
};
|
19940
|
-
React.useMemo(() => {
|
19941
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
19942
|
-
return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
19943
|
-
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
19944
|
-
}
|
19945
|
-
return null;
|
19946
|
-
}, [globalConfig]);
|
19947
|
-
const renderBottom = (rec, index) => {
|
19948
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19949
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19950
|
-
let cta = null;
|
19951
|
-
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) {
|
19952
|
-
cta = '多商品CTA';
|
19953
|
-
}
|
19954
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19955
|
-
cta = '商品CTA';
|
19956
|
-
}
|
19957
|
-
else {
|
19958
|
-
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;
|
19959
|
-
}
|
19960
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19961
|
-
return (React.createElement(React.Fragment, null,
|
19962
|
-
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
19963
|
-
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
19964
|
-
height: '130px',
|
19965
|
-
position: 'absolute',
|
19966
|
-
bottom: 0,
|
19967
|
-
width: '100%',
|
19968
|
-
willChange: 'transform',
|
19969
|
-
zIndex: 2,
|
19970
|
-
pointerEvents
|
19971
|
-
} })),
|
19972
|
-
React.createElement("div", { style: {
|
19973
|
-
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
19974
|
-
zIndex: 999,
|
19975
|
-
position: 'absolute',
|
19976
|
-
bottom: 0,
|
19977
|
-
left: 0,
|
19978
|
-
right: 0,
|
19979
|
-
paddingTop: '20px'
|
19980
|
-
} },
|
19981
|
-
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
19982
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
19983
|
-
React.createElement("div", null,
|
19984
|
-
React.createElement(ExpandableText$1
|
19985
|
-
// className='clc-sxp-bottom-text'
|
19986
|
-
, {
|
19987
|
-
// className='clc-sxp-bottom-text'
|
19988
|
-
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' }) }),
|
19989
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
19990
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19991
|
-
}
|
19992
|
-
return null;
|
19993
|
-
};
|
19994
|
-
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
19995
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
19996
|
-
const renderLikeButton = (rec, index) => {
|
19997
|
-
var _a, _b, _c, _d;
|
19998
|
-
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
19999
|
-
return null;
|
20000
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
20001
|
-
if (top < 40) {
|
20002
|
-
top += 40;
|
20003
|
-
}
|
20004
|
-
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
20005
|
-
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,
|
20006
|
-
// className={style['clc-sxp-like-button']}
|
20007
|
-
style: {
|
20008
|
-
top,
|
20009
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
20010
|
-
position: 'absolute',
|
20011
|
-
zIndex: 999,
|
20012
|
-
backgroundColor: 'transparent',
|
20013
|
-
width: '50px',
|
20014
|
-
height: '50px',
|
20015
|
-
outline: 'none',
|
20016
|
-
border: 'none',
|
20017
|
-
boxSizing: 'content-box',
|
20018
|
-
padding: 0,
|
20019
|
-
transform: 'translate3d(0px, 0px, 0px)'
|
20020
|
-
} }));
|
20021
|
-
}
|
20022
|
-
return null;
|
20023
|
-
};
|
20024
|
-
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
20025
|
-
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
20026
|
-
const renderToggleButton = (visible) => {
|
20027
|
-
var _a, _b, _c, _d;
|
20028
|
-
if (!visible)
|
20029
|
-
return null;
|
20030
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
20031
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
20032
|
-
top += 45;
|
20033
|
-
}
|
20034
|
-
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: {
|
20035
|
-
position: 'absolute',
|
20036
|
-
visibility: 'visible',
|
20037
|
-
zIndex: 999,
|
20038
|
-
transform: 'translate3d(0px,0px,0px)',
|
20039
|
-
[(_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,
|
20040
|
-
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
20041
|
-
backgroundColor: 'transparent',
|
20042
|
-
width: '50px',
|
20043
|
-
height: '50px',
|
20044
|
-
outline: 'none',
|
20045
|
-
border: 'none',
|
20046
|
-
boxSizing: 'content-box',
|
20047
|
-
padding: 0
|
20048
|
-
}, 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 })) : null;
|
20049
|
-
};
|
20050
|
-
const renderView = (item, index) => {
|
20051
|
-
var _a, _b, _c, _d;
|
20052
|
-
const rec = lodash.cloneDeep(recData);
|
20053
|
-
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20054
|
-
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20055
|
-
return (React.createElement("div", { style: { position: 'relative' } },
|
20056
|
-
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20057
|
-
renderBottom(rec, index),
|
20058
|
-
renderLikeButton(rec, index),
|
20059
|
-
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
20060
|
-
React.createElement(ToggleButton$1, { style: {
|
20061
|
-
position: 'absolute',
|
20062
|
-
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
20063
|
-
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',
|
20064
|
-
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
20065
|
-
zIndex: 999
|
20066
|
-
}, 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 }),
|
20067
|
-
renderContent(item, index))));
|
20068
|
-
};
|
20069
|
-
React.useEffect(() => {
|
20070
|
-
var _a, _b;
|
20071
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20072
|
-
return;
|
20073
|
-
(_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);
|
20074
|
-
}, [activeIndex]);
|
20075
|
-
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20076
|
-
var _a;
|
20077
|
-
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
20078
|
-
}, 1000), []);
|
20079
|
-
React.useEffect(() => {
|
20080
|
-
if (disabledListener)
|
20081
|
-
return;
|
20082
|
-
const events = ['touchstart', 'touchcancel'];
|
20083
|
-
events.forEach((event) => {
|
20084
|
-
window.addEventListener(event, handleSessionExpire);
|
20085
|
-
});
|
20086
|
-
return () => {
|
20087
|
-
events.forEach((event) => {
|
20088
|
-
window.removeEventListener(event, handleSessionExpire);
|
20089
|
-
});
|
20090
|
-
};
|
20091
|
-
}, [handleSessionExpire, disabledListener]);
|
20092
|
-
return (React.createElement("div", { id: 'sxp-render',
|
20093
|
-
// className={style['clc-sxp-container']}
|
20094
|
-
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20095
|
-
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20096
|
-
swiperRef.current.swiper.allowTouchMove = false;
|
20097
|
-
setTimeout(() => {
|
20098
|
-
swiperRef.current.swiper.allowTouchMove = true;
|
20099
|
-
}, 500);
|
20100
|
-
}, onActiveIndexChange: (swiper) => {
|
20101
|
-
setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
|
20102
|
-
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20103
|
-
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20104
|
-
return renderView(rec, index);
|
20105
|
-
}))));
|
20106
|
-
});
|
20107
|
-
var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
|
20108
|
-
|
20109
19463
|
/*
|
20110
19464
|
* @Author: binruan@chatlabs.com
|
20111
19465
|
* @Date: 2023-10-31 10:56:01
|
20112
19466
|
* @LastEditors: binruan@chatlabs.com
|
20113
|
-
* @LastEditTime:
|
19467
|
+
* @LastEditTime: 2024-10-23 15:07:29
|
20114
19468
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20115
19469
|
*
|
20116
19470
|
*/
|
@@ -20202,9 +19556,17 @@ Made in Italy` })));
|
|
20202
19556
|
|
20203
19557
|
/*
|
20204
19558
|
* @Author: binruan@chatlabs.com
|
20205
|
-
* @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
|
20206
19568
|
* @LastEditors: binruan@chatlabs.com
|
20207
|
-
* @LastEditTime:
|
19569
|
+
* @LastEditTime: 2023-12-26 10:24:42
|
20208
19570
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20209
19571
|
*
|
20210
19572
|
*/
|
@@ -20212,20 +19574,20 @@ Made in Italy` })));
|
|
20212
19574
|
Object.values(_materials_).forEach((v) => {
|
20213
19575
|
RESOLVER[v.extend.type] = v;
|
20214
19576
|
});
|
20215
|
-
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList
|
20216
|
-
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;
|
20217
19579
|
const utmVal = React.useMemo(() => {
|
20218
19580
|
var _a;
|
20219
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('?', '') : '';
|
20220
19582
|
return searchParams;
|
20221
19583
|
}, []);
|
20222
|
-
const [_schema, setSchema] = React.useState(
|
19584
|
+
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20223
19585
|
const [channel, setChannel] = React.useState();
|
20224
19586
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20225
|
-
React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (
|
20226
|
-
var _a
|
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;
|
20227
19589
|
return (React.createElement(React.Fragment, null,
|
20228
|
-
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 })),
|
20229
19591
|
React.createElement(Popup, null)));
|
20230
19592
|
} })));
|
20231
19593
|
};
|
@@ -20235,18 +19597,17 @@ Made in Italy` })));
|
|
20235
19597
|
* @Author : haocanweng@chatlabs.cn
|
20236
19598
|
* @Date : 2023-08-21 16:31:58
|
20237
19599
|
* @LastEditors: binruan@chatlabs.com
|
20238
|
-
* @LastEditTime:
|
19600
|
+
* @LastEditTime: 2024-06-25 11:37:48
|
20239
19601
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
20240
19602
|
*/
|
20241
19603
|
|
20242
19604
|
exports.DiyPortalPreview = index$1;
|
20243
|
-
exports.DiyStoryPreview = DiyStoryPreview$1;
|
20244
19605
|
exports.EditorDataProvider = EditorDataProvider;
|
20245
19606
|
exports.Modal = Modal$1;
|
20246
19607
|
exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
|
20247
19608
|
exports.SxpPageCore = index;
|
20248
|
-
exports.SxpPageRender =
|
20249
|
-
exports.core = index$
|
19609
|
+
exports.SxpPageRender = SxpPageRender$1;
|
19610
|
+
exports.core = index$2;
|
20250
19611
|
exports.default = Pagebuilder;
|
20251
19612
|
exports.materials = _materials_;
|
20252
19613
|
exports.useEditorDataProvider = useEditorDataProvider;
|