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