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/pb-ui.js
CHANGED
@@ -444,39 +444,6 @@
|
|
444
444
|
})
|
445
445
|
};
|
446
446
|
|
447
|
-
function useEditor() {
|
448
|
-
return React.useContext(EditorContext);
|
449
|
-
}
|
450
|
-
|
451
|
-
function useDataSource() {
|
452
|
-
return React.useContext(DataSourceContext);
|
453
|
-
}
|
454
|
-
|
455
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
456
|
-
const generateFeSessionId = () => {
|
457
|
-
const uid = getUid(); // 32位长度
|
458
|
-
const timestamp = Date.now(); // 13位长度
|
459
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
460
|
-
return result;
|
461
|
-
};
|
462
|
-
// 生成或者获取sessionID
|
463
|
-
const storeAndLoadFeSessionId = () => {
|
464
|
-
let result = getFeSessionId();
|
465
|
-
if (!result) {
|
466
|
-
result = generateFeSessionId();
|
467
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
468
|
-
}
|
469
|
-
return result;
|
470
|
-
};
|
471
|
-
const refreshFeSessionId = () => {
|
472
|
-
const result = generateFeSessionId();
|
473
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
474
|
-
};
|
475
|
-
// 获取 sessionID
|
476
|
-
const getFeSessionId = () => {
|
477
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
478
|
-
};
|
479
|
-
|
480
447
|
/*
|
481
448
|
* @Author: binruan@chatlabs.com
|
482
449
|
* @Date: 2024-03-20 10:27:31
|
@@ -528,6 +495,39 @@
|
|
528
495
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
529
496
|
};
|
530
497
|
|
498
|
+
function useEditor() {
|
499
|
+
return React.useContext(EditorContext);
|
500
|
+
}
|
501
|
+
|
502
|
+
function useDataSource() {
|
503
|
+
return React.useContext(DataSourceContext);
|
504
|
+
}
|
505
|
+
|
506
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
507
|
+
const generateFeSessionId = () => {
|
508
|
+
const uid = getUid(); // 32位长度
|
509
|
+
const timestamp = Date.now(); // 13位长度
|
510
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
511
|
+
return result;
|
512
|
+
};
|
513
|
+
// 生成或者获取sessionID
|
514
|
+
const storeAndLoadFeSessionId = () => {
|
515
|
+
let result = getFeSessionId();
|
516
|
+
if (!result) {
|
517
|
+
result = generateFeSessionId();
|
518
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
519
|
+
}
|
520
|
+
return result;
|
521
|
+
};
|
522
|
+
const refreshFeSessionId = () => {
|
523
|
+
const result = generateFeSessionId();
|
524
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
525
|
+
};
|
526
|
+
// 获取 sessionID
|
527
|
+
const getFeSessionId = () => {
|
528
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
529
|
+
};
|
530
|
+
|
531
531
|
/*
|
532
532
|
* @Author: binruan@chatlabs.com
|
533
533
|
* @Date: 2024-03-20 10:27:31
|
@@ -772,16 +772,16 @@
|
|
772
772
|
}, [bffDataSource]);
|
773
773
|
// 获取推荐视频数据
|
774
774
|
const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
775
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
776
|
-
query = Object.assign({ maxSize:
|
775
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
776
|
+
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 }));
|
777
777
|
if (channel) {
|
778
778
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
779
779
|
}
|
780
780
|
else if (utmVal) {
|
781
|
-
const val = (
|
781
|
+
const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
782
782
|
const key = val.split('=')[0];
|
783
783
|
return key;
|
784
|
-
})) === null ||
|
784
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
785
785
|
if (val)
|
786
786
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
787
787
|
}
|
@@ -795,19 +795,19 @@
|
|
795
795
|
let list = [];
|
796
796
|
let result = null;
|
797
797
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
798
|
-
var _v, _w, _x, _y
|
798
|
+
var _t, _u, _v, _w, _x, _y;
|
799
799
|
query.pageNum = pageNum;
|
800
800
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
801
801
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
802
802
|
return undefined;
|
803
803
|
}
|
804
804
|
setLoading(false);
|
805
|
-
list = list.concat((
|
805
|
+
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 : []);
|
806
806
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
807
807
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
808
808
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
809
809
|
}
|
810
|
-
const isNotNullList = (
|
810
|
+
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));
|
811
811
|
if (isNotNullList) {
|
812
812
|
pageNum = pageNum + 1;
|
813
813
|
yield recurveRecList(query);
|
@@ -815,11 +815,11 @@
|
|
815
815
|
});
|
816
816
|
yield recurveRecList(query);
|
817
817
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
818
|
-
setCurReqInfo({ rtc: (
|
818
|
+
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 });
|
819
819
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
820
820
|
}
|
821
821
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
822
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
822
|
+
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 });
|
823
823
|
}
|
824
824
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
|
825
825
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
@@ -829,8 +829,8 @@
|
|
829
829
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
830
830
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
831
831
|
let list = [];
|
832
|
-
list = list.concat((
|
833
|
-
const isNotNullList = (
|
832
|
+
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 : []);
|
833
|
+
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));
|
834
834
|
if (!isNotNullList) {
|
835
835
|
setIsNoMoreData(true);
|
836
836
|
}
|
@@ -839,12 +839,12 @@
|
|
839
839
|
return result === null || result === void 0 ? void 0 : result.data;
|
840
840
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
841
841
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
842
|
-
var
|
842
|
+
var _z, _0, _1, _2;
|
843
843
|
if (rtcList.length <= 0) {
|
844
844
|
return;
|
845
845
|
}
|
846
846
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
847
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
847
|
+
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 })));
|
848
848
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
849
849
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
850
850
|
return data;
|
@@ -1009,18 +1009,18 @@
|
|
1009
1009
|
}), [bffFetch]);
|
1010
1010
|
// 获取 Tag
|
1011
1011
|
const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
1012
|
-
var _5, _6, _7, _8, _9, _10
|
1013
|
-
const isShowTag = !!((
|
1012
|
+
var _3, _4, _5, _6, _7, _8, _9, _10;
|
1013
|
+
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);
|
1014
1014
|
if (!utmVal || !isShowTag)
|
1015
1015
|
return;
|
1016
1016
|
try {
|
1017
|
-
const val = (
|
1017
|
+
const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
|
1018
1018
|
var _a, _b;
|
1019
1019
|
const key = val.split('=')[0];
|
1020
1020
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
1021
|
-
})) === null ||
|
1021
|
+
})) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
|
1022
1022
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1023
|
-
setTagList((
|
1023
|
+
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 : []);
|
1024
1024
|
}
|
1025
1025
|
catch (e) {
|
1026
1026
|
console.log('e', e);
|
@@ -1080,10 +1080,10 @@
|
|
1080
1080
|
});
|
1081
1081
|
}, [bffEventReport]);
|
1082
1082
|
const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1083
|
-
var
|
1083
|
+
var _11, _12;
|
1084
1084
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1085
|
-
setChatlabsId((
|
1086
|
-
return ((
|
1085
|
+
setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
|
1086
|
+
return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
|
1087
1087
|
}), [bffFetch]);
|
1088
1088
|
const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1089
1089
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1098,7 +1098,6 @@
|
|
1098
1098
|
if (!isShowConsent)
|
1099
1099
|
h5EnterLink();
|
1100
1100
|
}, [isShowConsent]);
|
1101
|
-
console.log(data, '111');
|
1102
1101
|
React.useEffect(() => {
|
1103
1102
|
if (isShowConsent || isPreview)
|
1104
1103
|
return;
|
@@ -18314,7 +18313,7 @@ Made in Italy` })));
|
|
18314
18313
|
* @Author: binruan@chatlabs.com
|
18315
18314
|
* @Date: 2023-12-26 16:11:34
|
18316
18315
|
* @LastEditors: binruan@chatlabs.com
|
18317
|
-
* @LastEditTime: 2025-03-
|
18316
|
+
* @LastEditTime: 2025-03-28 14:46:08
|
18318
18317
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18319
18318
|
*
|
18320
18319
|
*/
|
@@ -19476,7 +19475,7 @@ Made in Italy` })));
|
|
19476
19475
|
};
|
19477
19476
|
var PictureGroup$1 = React.memo(PictureGroup);
|
19478
19477
|
|
19479
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
19478
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
|
19480
19479
|
const { isActive } = useSwiperSlide();
|
19481
19480
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19482
19481
|
const videoRef = React.useRef(null);
|
@@ -19497,7 +19496,7 @@ Made in Italy` })));
|
|
19497
19496
|
var _a;
|
19498
19497
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19499
19498
|
}, []);
|
19500
|
-
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19499
|
+
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19501
19500
|
const handlePlaying = React.useCallback(() => {
|
19502
19501
|
var _a, _b, _c, _d, _e, _f;
|
19503
19502
|
setIsPauseVideo(false);
|
@@ -19535,6 +19534,9 @@ Made in Italy` })));
|
|
19535
19534
|
break;
|
19536
19535
|
default:
|
19537
19536
|
if (isPause) {
|
19537
|
+
// if (videoRef?.current?.currentTime >= rec?.endTime) {
|
19538
|
+
// videoRef.current.currentTime = rec?.startTime;
|
19539
|
+
// }
|
19538
19540
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
19539
19541
|
}
|
19540
19542
|
else {
|
@@ -19583,6 +19585,14 @@ Made in Italy` })));
|
|
19583
19585
|
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19584
19586
|
}
|
19585
19587
|
}, []);
|
19588
|
+
// useEffect(() => {
|
19589
|
+
// if (!videoRef.current || !isActive) return;
|
19590
|
+
// if (isPlay) {
|
19591
|
+
// videoRef.current?.play();
|
19592
|
+
// } else {
|
19593
|
+
// videoRef.current?.pause();
|
19594
|
+
// }
|
19595
|
+
// }, [isPlay, isActive]);
|
19586
19596
|
const handlePause = () => {
|
19587
19597
|
var _a, _b, _c, _d, _e, _f;
|
19588
19598
|
if (!videoRef.current || !isActive)
|
@@ -19597,15 +19607,6 @@ Made in Italy` })));
|
|
19597
19607
|
(_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);
|
19598
19608
|
}
|
19599
19609
|
};
|
19600
|
-
// useEffect(() => {
|
19601
|
-
// if (!videoRef.current) return;
|
19602
|
-
// if (!isActive) return;
|
19603
|
-
// if (!loopPlay) {
|
19604
|
-
// videoRef?.current?.pause();
|
19605
|
-
// } else {
|
19606
|
-
// videoRef?.current?.play();
|
19607
|
-
// }
|
19608
|
-
// }, [loopPlay, isActive]);
|
19609
19610
|
React.useEffect(() => {
|
19610
19611
|
var _a, _b, _c;
|
19611
19612
|
if (!isActive)
|
@@ -19652,7 +19653,7 @@ Made in Italy` })));
|
|
19652
19653
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19653
19654
|
};
|
19654
19655
|
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
19655
|
-
React.useMemo(() => {
|
19656
|
+
const renderPoster = React.useMemo(() => {
|
19656
19657
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19657
19658
|
return null;
|
19658
19659
|
}
|
@@ -19669,14 +19670,35 @@ Made in Italy` })));
|
|
19669
19670
|
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19670
19671
|
return null;
|
19671
19672
|
}
|
19673
|
+
// const renderLoading = useMemo(() => {
|
19674
|
+
// if (!waiting || !isLoadFinish) return;
|
19675
|
+
// return (
|
19676
|
+
// <img
|
19677
|
+
// style={{
|
19678
|
+
// position: 'absolute',
|
19679
|
+
// top: '50%',
|
19680
|
+
// left: 0,
|
19681
|
+
// right: 0,
|
19682
|
+
// transform: 'translateY(-100%)',
|
19683
|
+
// margin: 'auto',
|
19684
|
+
// width: '50px',
|
19685
|
+
// height: '50px',
|
19686
|
+
// objectFit: 'contain'
|
19687
|
+
// }}
|
19688
|
+
// src={loading_gif}
|
19689
|
+
// alt='placeholder image'
|
19690
|
+
// />
|
19691
|
+
// );
|
19692
|
+
// }, [waiting, isLoadFinish]);
|
19672
19693
|
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19673
19694
|
position: 'relative',
|
19674
19695
|
width: '100%',
|
19675
19696
|
height,
|
19676
|
-
overflow: 'hidden'
|
19677
|
-
pointerEvents: 'none'
|
19697
|
+
overflow: 'hidden'
|
19678
19698
|
} },
|
19679
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })
|
19699
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19700
|
+
renderPoster,
|
19701
|
+
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19680
19702
|
};
|
19681
19703
|
var VideoWidget$1 = React.memo(VideoWidget);
|
19682
19704
|
|
@@ -19684,7 +19706,7 @@ Made in Italy` })));
|
|
19684
19706
|
* @Author: binruan@chatlabs.com
|
19685
19707
|
* @Date: 2025-03-25 13:54:27
|
19686
19708
|
* @LastEditors: binruan@chatlabs.com
|
19687
|
-
* @LastEditTime: 2025-03-
|
19709
|
+
* @LastEditTime: 2025-03-28 18:08:02
|
19688
19710
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19689
19711
|
*
|
19690
19712
|
*/
|
@@ -19872,7 +19894,7 @@ Made in Italy` })));
|
|
19872
19894
|
});
|
19873
19895
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19874
19896
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19875
|
-
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
|
19897
|
+
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
|
19876
19898
|
const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
|
19877
19899
|
const swiperRef = React.useRef(null);
|
19878
19900
|
React.useMemo(() => {
|
@@ -19899,7 +19921,7 @@ Made in Italy` })));
|
|
19899
19921
|
const renderContent = (rec, index) => {
|
19900
19922
|
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19901
19923
|
if (isVideo) {
|
19902
|
-
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 }));
|
19924
|
+
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 }));
|
19903
19925
|
}
|
19904
19926
|
else {
|
19905
19927
|
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 }));
|
@@ -20019,6 +20041,7 @@ Made in Italy` })));
|
|
20019
20041
|
var _a, _b, _c, _d;
|
20020
20042
|
const rec = lodash.cloneDeep(recData);
|
20021
20043
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20044
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20022
20045
|
return (React.createElement("div", { style: { position: 'relative' } },
|
20023
20046
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20024
20047
|
renderBottom(rec, index),
|
@@ -20040,16 +20063,29 @@ Made in Italy` })));
|
|
20040
20063
|
(_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);
|
20041
20064
|
}, [activeIndex]);
|
20042
20065
|
React.useEffect(() => {
|
20043
|
-
var _a, _b;
|
20044
20066
|
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20045
20067
|
return;
|
20046
|
-
|
20068
|
+
// swiperRef?.current?.swiper?.slideTo(0);
|
20069
|
+
setLooPlaySwiper(loopPlay);
|
20047
20070
|
}, [loopPlay]);
|
20071
|
+
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20072
|
+
setLooPlaySwiper(false);
|
20073
|
+
}, 1000), []);
|
20074
|
+
React.useEffect(() => {
|
20075
|
+
const events = ['touchstart', 'touchcancel'];
|
20076
|
+
events.forEach((event) => {
|
20077
|
+
window.addEventListener(event, handleSessionExpire);
|
20078
|
+
});
|
20079
|
+
return () => {
|
20080
|
+
events.forEach((event) => {
|
20081
|
+
window.removeEventListener(event, handleSessionExpire);
|
20082
|
+
});
|
20083
|
+
};
|
20084
|
+
}, [handleSessionExpire]);
|
20048
20085
|
return (React.createElement("div", { id: 'sxp-render',
|
20049
20086
|
// className={style['clc-sxp-container']}
|
20050
20087
|
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20051
20088
|
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20052
|
-
setLooPlaySwiper(false);
|
20053
20089
|
swiperRef.current.swiper.allowTouchMove = false;
|
20054
20090
|
setTimeout(() => {
|
20055
20091
|
swiperRef.current.swiper.allowTouchMove = true;
|
@@ -20067,7 +20103,7 @@ Made in Italy` })));
|
|
20067
20103
|
* @Author: binruan@chatlabs.com
|
20068
20104
|
* @Date: 2023-10-31 10:56:01
|
20069
20105
|
* @LastEditors: binruan@chatlabs.com
|
20070
|
-
* @LastEditTime:
|
20106
|
+
* @LastEditTime: 2025-03-28 17:15:47
|
20071
20107
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20072
20108
|
*
|
20073
20109
|
*/
|
@@ -20161,7 +20197,7 @@ Made in Italy` })));
|
|
20161
20197
|
* @Author: binruan@chatlabs.com
|
20162
20198
|
* @Date: 2024-03-20 10:27:31
|
20163
20199
|
* @LastEditors: binruan@chatlabs.com
|
20164
|
-
* @LastEditTime: 2025-03-
|
20200
|
+
* @LastEditTime: 2025-03-28 16:55:21
|
20165
20201
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20166
20202
|
*
|
20167
20203
|
*/
|
@@ -20170,19 +20206,19 @@ Made in Italy` })));
|
|
20170
20206
|
RESOLVER[v.extend.type] = v;
|
20171
20207
|
});
|
20172
20208
|
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
20173
|
-
var _a, _b, _c, _d, _e, _f;
|
20209
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
20174
20210
|
const utmVal = React.useMemo(() => {
|
20175
20211
|
var _a;
|
20176
20212
|
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('?', '') : '';
|
20177
20213
|
return searchParams;
|
20178
20214
|
}, []);
|
20179
|
-
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20215
|
+
const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
20180
20216
|
const [channel, setChannel] = React.useState();
|
20181
20217
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20182
|
-
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: (
|
20183
|
-
var _a;
|
20218
|
+
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 }) => {
|
20219
|
+
var _a, _b;
|
20184
20220
|
return (React.createElement(React.Fragment, null,
|
20185
|
-
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (
|
20221
|
+
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 })),
|
20186
20222
|
React.createElement(Popup, null)));
|
20187
20223
|
} })));
|
20188
20224
|
};
|