pb-sxp-ui 1.15.13-alpha.3 → 1.15.13-alpha.4
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 +120 -84
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +120 -84
- 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 +120 -84
- 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/DiyStoryPreview/VideoWidget.d.ts +2 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.js +6 -4
- package/es/core/components/DiyStoryPreview/index.d.ts +2 -0
- package/es/core/components/DiyStoryPreview/index.js +20 -15
- package/es/core/components/SxpPageCore/index.js +5 -5
- package/es/core/context/EditorContext.js +1 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +21 -22
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +2 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +6 -4
- package/lib/core/components/DiyStoryPreview/index.d.ts +2 -0
- package/lib/core/components/DiyStoryPreview/index.js +18 -13
- package/lib/core/components/SxpPageCore/index.js +5 -5
- package/lib/core/context/EditorContext.js +1 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +21 -22
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -451,39 +451,6 @@ 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
|
-
|
487
454
|
/*
|
488
455
|
* @Author: binruan@chatlabs.com
|
489
456
|
* @Date: 2024-03-20 10:27:31
|
@@ -535,6 +502,39 @@ const setUserConsentResult = () => {
|
|
535
502
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
536
503
|
};
|
537
504
|
|
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
|
@@ -779,16 +779,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
779
779
|
}, [bffDataSource]);
|
780
780
|
// 获取推荐视频数据
|
781
781
|
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:
|
782
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
783
|
+
query = Object.assign({ maxSize: 50, defaultSize: 50, 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
784
|
if (channel) {
|
785
785
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
786
786
|
}
|
787
787
|
else if (utmVal) {
|
788
|
-
const val = (
|
788
|
+
const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
789
789
|
const key = val.split('=')[0];
|
790
790
|
return key;
|
791
|
-
})) === null ||
|
791
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
792
792
|
if (val)
|
793
793
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
794
794
|
}
|
@@ -802,19 +802,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
802
802
|
let list = [];
|
803
803
|
let result = null;
|
804
804
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
805
|
-
var _v, _w, _x, _y
|
805
|
+
var _t, _u, _v, _w, _x, _y;
|
806
806
|
query.pageNum = pageNum;
|
807
807
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
808
808
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
809
809
|
return undefined;
|
810
810
|
}
|
811
811
|
setLoading(false);
|
812
|
-
list = list.concat((
|
812
|
+
list = list.concat((_w = (_v = (_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.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
|
813
813
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
814
814
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
815
815
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
816
816
|
}
|
817
|
-
const isNotNullList = (
|
817
|
+
const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
818
818
|
if (isNotNullList) {
|
819
819
|
pageNum = pageNum + 1;
|
820
820
|
yield recurveRecList(query);
|
@@ -822,11 +822,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
822
822
|
});
|
823
823
|
yield recurveRecList(query);
|
824
824
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
825
|
-
setCurReqInfo({ rtc: (
|
825
|
+
setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
|
826
826
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
827
827
|
}
|
828
828
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
829
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
829
|
+
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
|
830
830
|
}
|
831
831
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
|
832
832
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
@@ -836,8 +836,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
836
836
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
837
837
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
838
838
|
let list = [];
|
839
|
-
list = list.concat((
|
840
|
-
const isNotNullList = (
|
839
|
+
list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
|
840
|
+
const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
841
841
|
if (!isNotNullList) {
|
842
842
|
setIsNoMoreData(true);
|
843
843
|
}
|
@@ -846,12 +846,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
846
846
|
return result === null || result === void 0 ? void 0 : result.data;
|
847
847
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
848
848
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
849
|
-
var
|
849
|
+
var _z, _0, _1, _2;
|
850
850
|
if (rtcList.length <= 0) {
|
851
851
|
return;
|
852
852
|
}
|
853
853
|
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 }, (((
|
854
|
+
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
855
855
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
856
856
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
857
857
|
return data;
|
@@ -1016,18 +1016,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1016
1016
|
}), [bffFetch]);
|
1017
1017
|
// 获取 Tag
|
1018
1018
|
const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
1019
|
-
var _5, _6, _7, _8, _9, _10
|
1020
|
-
const isShowTag = !!((
|
1019
|
+
var _3, _4, _5, _6, _7, _8, _9, _10;
|
1020
|
+
const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
|
1021
1021
|
if (!utmVal || !isShowTag)
|
1022
1022
|
return;
|
1023
1023
|
try {
|
1024
|
-
const val = (
|
1024
|
+
const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
|
1025
1025
|
var _a, _b;
|
1026
1026
|
const key = val.split('=')[0];
|
1027
1027
|
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 ||
|
1028
|
+
})) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
|
1029
1029
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1030
|
-
setTagList((
|
1030
|
+
setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
|
1031
1031
|
}
|
1032
1032
|
catch (e) {
|
1033
1033
|
console.log('e', e);
|
@@ -1087,10 +1087,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1087
1087
|
});
|
1088
1088
|
}, [bffEventReport]);
|
1089
1089
|
const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1090
|
-
var
|
1090
|
+
var _11, _12;
|
1091
1091
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1092
|
-
setChatlabsId((
|
1093
|
-
return ((
|
1092
|
+
setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
|
1093
|
+
return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
|
1094
1094
|
}), [bffFetch]);
|
1095
1095
|
const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1096
1096
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1105,7 +1105,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1105
1105
|
if (!isShowConsent)
|
1106
1106
|
h5EnterLink();
|
1107
1107
|
}, [isShowConsent]);
|
1108
|
-
console.log(data, '111');
|
1109
1108
|
React.useEffect(() => {
|
1110
1109
|
if (isShowConsent || isPreview)
|
1111
1110
|
return;
|
@@ -18321,7 +18320,7 @@ function withBindDataSource(Component) {
|
|
18321
18320
|
* @Author: binruan@chatlabs.com
|
18322
18321
|
* @Date: 2023-12-26 16:11:34
|
18323
18322
|
* @LastEditors: binruan@chatlabs.com
|
18324
|
-
* @LastEditTime: 2025-03-
|
18323
|
+
* @LastEditTime: 2025-03-28 14:46:08
|
18325
18324
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18326
18325
|
*
|
18327
18326
|
*/
|
@@ -19483,7 +19482,7 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, s
|
|
19483
19482
|
};
|
19484
19483
|
var PictureGroup$1 = React.memo(PictureGroup);
|
19485
19484
|
|
19486
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
19485
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
|
19487
19486
|
const { isActive } = useSwiperSlide();
|
19488
19487
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19489
19488
|
const videoRef = React.useRef(null);
|
@@ -19504,7 +19503,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19504
19503
|
var _a;
|
19505
19504
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19506
19505
|
}, []);
|
19507
|
-
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19506
|
+
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19508
19507
|
const handlePlaying = React.useCallback(() => {
|
19509
19508
|
var _a, _b, _c, _d, _e, _f;
|
19510
19509
|
setIsPauseVideo(false);
|
@@ -19542,6 +19541,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19542
19541
|
break;
|
19543
19542
|
default:
|
19544
19543
|
if (isPause) {
|
19544
|
+
// if (videoRef?.current?.currentTime >= rec?.endTime) {
|
19545
|
+
// videoRef.current.currentTime = rec?.startTime;
|
19546
|
+
// }
|
19545
19547
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
19546
19548
|
}
|
19547
19549
|
else {
|
@@ -19590,6 +19592,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19590
19592
|
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19591
19593
|
}
|
19592
19594
|
}, []);
|
19595
|
+
// useEffect(() => {
|
19596
|
+
// if (!videoRef.current || !isActive) return;
|
19597
|
+
// if (isPlay) {
|
19598
|
+
// videoRef.current?.play();
|
19599
|
+
// } else {
|
19600
|
+
// videoRef.current?.pause();
|
19601
|
+
// }
|
19602
|
+
// }, [isPlay, isActive]);
|
19593
19603
|
const handlePause = () => {
|
19594
19604
|
var _a, _b, _c, _d, _e, _f;
|
19595
19605
|
if (!videoRef.current || !isActive)
|
@@ -19604,15 +19614,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19604
19614
|
(_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
|
19605
19615
|
}
|
19606
19616
|
};
|
19607
|
-
// useEffect(() => {
|
19608
|
-
// if (!videoRef.current) return;
|
19609
|
-
// if (!isActive) return;
|
19610
|
-
// if (!loopPlay) {
|
19611
|
-
// videoRef?.current?.pause();
|
19612
|
-
// } else {
|
19613
|
-
// videoRef?.current?.play();
|
19614
|
-
// }
|
19615
|
-
// }, [loopPlay, isActive]);
|
19616
19617
|
React.useEffect(() => {
|
19617
19618
|
var _a, _b, _c;
|
19618
19619
|
if (!isActive)
|
@@ -19659,7 +19660,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19659
19660
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19660
19661
|
};
|
19661
19662
|
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
19662
|
-
React.useMemo(() => {
|
19663
|
+
const renderPoster = React.useMemo(() => {
|
19663
19664
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19664
19665
|
return null;
|
19665
19666
|
}
|
@@ -19676,14 +19677,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19676
19677
|
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19677
19678
|
return null;
|
19678
19679
|
}
|
19680
|
+
// const renderLoading = useMemo(() => {
|
19681
|
+
// if (!waiting || !isLoadFinish) return;
|
19682
|
+
// return (
|
19683
|
+
// <img
|
19684
|
+
// style={{
|
19685
|
+
// position: 'absolute',
|
19686
|
+
// top: '50%',
|
19687
|
+
// left: 0,
|
19688
|
+
// right: 0,
|
19689
|
+
// transform: 'translateY(-100%)',
|
19690
|
+
// margin: 'auto',
|
19691
|
+
// width: '50px',
|
19692
|
+
// height: '50px',
|
19693
|
+
// objectFit: 'contain'
|
19694
|
+
// }}
|
19695
|
+
// src={loading_gif}
|
19696
|
+
// alt='placeholder image'
|
19697
|
+
// />
|
19698
|
+
// );
|
19699
|
+
// }, [waiting, isLoadFinish]);
|
19679
19700
|
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19680
19701
|
position: 'relative',
|
19681
19702
|
width: '100%',
|
19682
19703
|
height,
|
19683
|
-
overflow: 'hidden'
|
19684
|
-
pointerEvents: 'none'
|
19704
|
+
overflow: 'hidden'
|
19685
19705
|
} },
|
19686
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })
|
19706
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19707
|
+
renderPoster,
|
19708
|
+
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19687
19709
|
};
|
19688
19710
|
var VideoWidget$1 = React.memo(VideoWidget);
|
19689
19711
|
|
@@ -19691,7 +19713,7 @@ var VideoWidget$1 = React.memo(VideoWidget);
|
|
19691
19713
|
* @Author: binruan@chatlabs.com
|
19692
19714
|
* @Date: 2025-03-25 13:54:27
|
19693
19715
|
* @LastEditors: binruan@chatlabs.com
|
19694
|
-
* @LastEditTime: 2025-03-
|
19716
|
+
* @LastEditTime: 2025-03-28 18:08:02
|
19695
19717
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19696
19718
|
*
|
19697
19719
|
*/
|
@@ -19879,7 +19901,7 @@ Object.values(_materials_).forEach((v) => {
|
|
19879
19901
|
});
|
19880
19902
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19881
19903
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19882
|
-
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
|
19904
|
+
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
|
19883
19905
|
const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
|
19884
19906
|
const swiperRef = React.useRef(null);
|
19885
19907
|
React.useMemo(() => {
|
@@ -19906,7 +19928,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
19906
19928
|
const renderContent = (rec, index) => {
|
19907
19929
|
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19908
19930
|
if (isVideo) {
|
19909
|
-
return (React.createElement(VideoWidget$1, { 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, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19931
|
+
return (React.createElement(VideoWidget$1, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19910
19932
|
}
|
19911
19933
|
else {
|
19912
19934
|
return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
@@ -20026,6 +20048,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20026
20048
|
var _a, _b, _c, _d;
|
20027
20049
|
const rec = lodash.cloneDeep(recData);
|
20028
20050
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20051
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20029
20052
|
return (React.createElement("div", { style: { position: 'relative' } },
|
20030
20053
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20031
20054
|
renderBottom(rec, index),
|
@@ -20047,16 +20070,29 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20047
20070
|
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
|
20048
20071
|
}, [activeIndex]);
|
20049
20072
|
React.useEffect(() => {
|
20050
|
-
var _a, _b;
|
20051
20073
|
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20052
20074
|
return;
|
20053
|
-
|
20075
|
+
// swiperRef?.current?.swiper?.slideTo(0);
|
20076
|
+
setLooPlaySwiper(loopPlay);
|
20054
20077
|
}, [loopPlay]);
|
20078
|
+
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20079
|
+
setLooPlaySwiper(false);
|
20080
|
+
}, 1000), []);
|
20081
|
+
React.useEffect(() => {
|
20082
|
+
const events = ['touchstart', 'touchcancel'];
|
20083
|
+
events.forEach((event) => {
|
20084
|
+
window.addEventListener(event, handleSessionExpire);
|
20085
|
+
});
|
20086
|
+
return () => {
|
20087
|
+
events.forEach((event) => {
|
20088
|
+
window.removeEventListener(event, handleSessionExpire);
|
20089
|
+
});
|
20090
|
+
};
|
20091
|
+
}, [handleSessionExpire]);
|
20055
20092
|
return (React.createElement("div", { id: 'sxp-render',
|
20056
20093
|
// className={style['clc-sxp-container']}
|
20057
20094
|
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20058
20095
|
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20059
|
-
setLooPlaySwiper(false);
|
20060
20096
|
swiperRef.current.swiper.allowTouchMove = false;
|
20061
20097
|
setTimeout(() => {
|
20062
20098
|
swiperRef.current.swiper.allowTouchMove = true;
|
@@ -20074,7 +20110,7 @@ var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
|
|
20074
20110
|
* @Author: binruan@chatlabs.com
|
20075
20111
|
* @Date: 2023-10-31 10:56:01
|
20076
20112
|
* @LastEditors: binruan@chatlabs.com
|
20077
|
-
* @LastEditTime:
|
20113
|
+
* @LastEditTime: 2025-03-28 17:15:47
|
20078
20114
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20079
20115
|
*
|
20080
20116
|
*/
|
@@ -20168,7 +20204,7 @@ const Popup = () => {
|
|
20168
20204
|
* @Author: binruan@chatlabs.com
|
20169
20205
|
* @Date: 2024-03-20 10:27:31
|
20170
20206
|
* @LastEditors: binruan@chatlabs.com
|
20171
|
-
* @LastEditTime: 2025-03-
|
20207
|
+
* @LastEditTime: 2025-03-28 16:55:21
|
20172
20208
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20173
20209
|
*
|
20174
20210
|
*/
|
@@ -20177,19 +20213,19 @@ Object.values(_materials_).forEach((v) => {
|
|
20177
20213
|
RESOLVER[v.extend.type] = v;
|
20178
20214
|
});
|
20179
20215
|
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
20180
|
-
var _a, _b, _c, _d, _e, _f;
|
20216
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
20181
20217
|
const utmVal = React.useMemo(() => {
|
20182
20218
|
var _a;
|
20183
20219
|
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('?', '') : '';
|
20184
20220
|
return searchParams;
|
20185
20221
|
}, []);
|
20186
|
-
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20222
|
+
const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
20187
20223
|
const [channel, setChannel] = React.useState();
|
20188
20224
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20189
|
-
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: (
|
20190
|
-
var _a;
|
20225
|
+
React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
|
20226
|
+
var _a, _b;
|
20191
20227
|
return (React.createElement(React.Fragment, null,
|
20192
|
-
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (
|
20228
|
+
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
|
20193
20229
|
React.createElement(Popup, null)));
|
20194
20230
|
} })));
|
20195
20231
|
};
|