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