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.js
CHANGED
@@ -429,39 +429,6 @@ const Pagebuilder = {
|
|
429
429
|
})
|
430
430
|
};
|
431
431
|
|
432
|
-
function useEditor() {
|
433
|
-
return useContext(EditorContext);
|
434
|
-
}
|
435
|
-
|
436
|
-
function useDataSource() {
|
437
|
-
return useContext(DataSourceContext);
|
438
|
-
}
|
439
|
-
|
440
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
441
|
-
const generateFeSessionId = () => {
|
442
|
-
const uid = getUid(); // 32位长度
|
443
|
-
const timestamp = Date.now(); // 13位长度
|
444
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
445
|
-
return result;
|
446
|
-
};
|
447
|
-
// 生成或者获取sessionID
|
448
|
-
const storeAndLoadFeSessionId = () => {
|
449
|
-
let result = getFeSessionId();
|
450
|
-
if (!result) {
|
451
|
-
result = generateFeSessionId();
|
452
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
453
|
-
}
|
454
|
-
return result;
|
455
|
-
};
|
456
|
-
const refreshFeSessionId = () => {
|
457
|
-
const result = generateFeSessionId();
|
458
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
459
|
-
};
|
460
|
-
// 获取 sessionID
|
461
|
-
const getFeSessionId = () => {
|
462
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
463
|
-
};
|
464
|
-
|
465
432
|
/*
|
466
433
|
* @Author: binruan@chatlabs.com
|
467
434
|
* @Date: 2024-03-20 10:27:31
|
@@ -513,6 +480,39 @@ const setUserConsentResult = () => {
|
|
513
480
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
514
481
|
};
|
515
482
|
|
483
|
+
function useEditor() {
|
484
|
+
return useContext(EditorContext);
|
485
|
+
}
|
486
|
+
|
487
|
+
function useDataSource() {
|
488
|
+
return useContext(DataSourceContext);
|
489
|
+
}
|
490
|
+
|
491
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
492
|
+
const generateFeSessionId = () => {
|
493
|
+
const uid = getUid(); // 32位长度
|
494
|
+
const timestamp = Date.now(); // 13位长度
|
495
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
496
|
+
return result;
|
497
|
+
};
|
498
|
+
// 生成或者获取sessionID
|
499
|
+
const storeAndLoadFeSessionId = () => {
|
500
|
+
let result = getFeSessionId();
|
501
|
+
if (!result) {
|
502
|
+
result = generateFeSessionId();
|
503
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
504
|
+
}
|
505
|
+
return result;
|
506
|
+
};
|
507
|
+
const refreshFeSessionId = () => {
|
508
|
+
const result = generateFeSessionId();
|
509
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
510
|
+
};
|
511
|
+
// 获取 sessionID
|
512
|
+
const getFeSessionId = () => {
|
513
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
514
|
+
};
|
515
|
+
|
516
516
|
/*
|
517
517
|
* @Author: binruan@chatlabs.com
|
518
518
|
* @Date: 2024-03-20 10:27:31
|
@@ -757,16 +757,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
757
757
|
}, [bffDataSource]);
|
758
758
|
// 获取推荐视频数据
|
759
759
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
760
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
761
|
-
query = Object.assign({ maxSize:
|
760
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
761
|
+
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 }));
|
762
762
|
if (channel) {
|
763
763
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
764
764
|
}
|
765
765
|
else if (utmVal) {
|
766
|
-
const val = (
|
766
|
+
const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
767
767
|
const key = val.split('=')[0];
|
768
768
|
return key;
|
769
|
-
})) === null ||
|
769
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
770
770
|
if (val)
|
771
771
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
772
772
|
}
|
@@ -780,19 +780,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
780
780
|
let list = [];
|
781
781
|
let result = null;
|
782
782
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
783
|
-
var _v, _w, _x, _y
|
783
|
+
var _t, _u, _v, _w, _x, _y;
|
784
784
|
query.pageNum = pageNum;
|
785
785
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
786
786
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
787
787
|
return undefined;
|
788
788
|
}
|
789
789
|
setLoading(false);
|
790
|
-
list = list.concat((
|
790
|
+
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 : []);
|
791
791
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
792
792
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
793
793
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
794
794
|
}
|
795
|
-
const isNotNullList = (
|
795
|
+
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));
|
796
796
|
if (isNotNullList) {
|
797
797
|
pageNum = pageNum + 1;
|
798
798
|
yield recurveRecList(query);
|
@@ -800,11 +800,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
800
800
|
});
|
801
801
|
yield recurveRecList(query);
|
802
802
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
803
|
-
setCurReqInfo({ rtc: (
|
803
|
+
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 });
|
804
804
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
805
805
|
}
|
806
806
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
807
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
807
|
+
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 });
|
808
808
|
}
|
809
809
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
|
810
810
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
@@ -814,8 +814,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
814
814
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
815
815
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
816
816
|
let list = [];
|
817
|
-
list = list.concat((
|
818
|
-
const isNotNullList = (
|
817
|
+
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 : []);
|
818
|
+
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));
|
819
819
|
if (!isNotNullList) {
|
820
820
|
setIsNoMoreData(true);
|
821
821
|
}
|
@@ -824,12 +824,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
824
824
|
return result === null || result === void 0 ? void 0 : result.data;
|
825
825
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
826
826
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
827
|
-
var
|
827
|
+
var _z, _0, _1, _2;
|
828
828
|
if (rtcList.length <= 0) {
|
829
829
|
return;
|
830
830
|
}
|
831
831
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
832
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
832
|
+
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 })));
|
833
833
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
834
834
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
835
835
|
return data;
|
@@ -994,18 +994,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
994
994
|
}), [bffFetch]);
|
995
995
|
// 获取 Tag
|
996
996
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
997
|
-
var _5, _6, _7, _8, _9, _10
|
998
|
-
const isShowTag = !!((
|
997
|
+
var _3, _4, _5, _6, _7, _8, _9, _10;
|
998
|
+
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);
|
999
999
|
if (!utmVal || !isShowTag)
|
1000
1000
|
return;
|
1001
1001
|
try {
|
1002
|
-
const val = (
|
1002
|
+
const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
|
1003
1003
|
var _a, _b;
|
1004
1004
|
const key = val.split('=')[0];
|
1005
1005
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
1006
|
-
})) === null ||
|
1006
|
+
})) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
|
1007
1007
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1008
|
-
setTagList((
|
1008
|
+
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 : []);
|
1009
1009
|
}
|
1010
1010
|
catch (e) {
|
1011
1011
|
console.log('e', e);
|
@@ -1065,10 +1065,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1065
1065
|
});
|
1066
1066
|
}, [bffEventReport]);
|
1067
1067
|
const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1068
|
-
var
|
1068
|
+
var _11, _12;
|
1069
1069
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1070
|
-
setChatlabsId((
|
1071
|
-
return ((
|
1070
|
+
setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
|
1071
|
+
return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
|
1072
1072
|
}), [bffFetch]);
|
1073
1073
|
const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1074
1074
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -1083,7 +1083,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1083
1083
|
if (!isShowConsent)
|
1084
1084
|
h5EnterLink();
|
1085
1085
|
}, [isShowConsent]);
|
1086
|
-
console.log(data, '111');
|
1087
1086
|
useEffect(() => {
|
1088
1087
|
if (isShowConsent || isPreview)
|
1089
1088
|
return;
|
@@ -18299,7 +18298,7 @@ function withBindDataSource(Component) {
|
|
18299
18298
|
* @Author: binruan@chatlabs.com
|
18300
18299
|
* @Date: 2023-12-26 16:11:34
|
18301
18300
|
* @LastEditors: binruan@chatlabs.com
|
18302
|
-
* @LastEditTime: 2025-03-
|
18301
|
+
* @LastEditTime: 2025-03-28 14:46:08
|
18303
18302
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18304
18303
|
*
|
18305
18304
|
*/
|
@@ -19461,7 +19460,7 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, s
|
|
19461
19460
|
};
|
19462
19461
|
var PictureGroup$1 = memo(PictureGroup);
|
19463
19462
|
|
19464
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
19463
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
|
19465
19464
|
const { isActive } = useSwiperSlide();
|
19466
19465
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
19467
19466
|
const videoRef = useRef(null);
|
@@ -19482,7 +19481,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19482
19481
|
var _a;
|
19483
19482
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19484
19483
|
}, []);
|
19485
|
-
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19484
|
+
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19486
19485
|
const handlePlaying = useCallback(() => {
|
19487
19486
|
var _a, _b, _c, _d, _e, _f;
|
19488
19487
|
setIsPauseVideo(false);
|
@@ -19520,6 +19519,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19520
19519
|
break;
|
19521
19520
|
default:
|
19522
19521
|
if (isPause) {
|
19522
|
+
// if (videoRef?.current?.currentTime >= rec?.endTime) {
|
19523
|
+
// videoRef.current.currentTime = rec?.startTime;
|
19524
|
+
// }
|
19523
19525
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
19524
19526
|
}
|
19525
19527
|
else {
|
@@ -19568,6 +19570,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19568
19570
|
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19569
19571
|
}
|
19570
19572
|
}, []);
|
19573
|
+
// useEffect(() => {
|
19574
|
+
// if (!videoRef.current || !isActive) return;
|
19575
|
+
// if (isPlay) {
|
19576
|
+
// videoRef.current?.play();
|
19577
|
+
// } else {
|
19578
|
+
// videoRef.current?.pause();
|
19579
|
+
// }
|
19580
|
+
// }, [isPlay, isActive]);
|
19571
19581
|
const handlePause = () => {
|
19572
19582
|
var _a, _b, _c, _d, _e, _f;
|
19573
19583
|
if (!videoRef.current || !isActive)
|
@@ -19582,15 +19592,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19582
19592
|
(_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);
|
19583
19593
|
}
|
19584
19594
|
};
|
19585
|
-
// useEffect(() => {
|
19586
|
-
// if (!videoRef.current) return;
|
19587
|
-
// if (!isActive) return;
|
19588
|
-
// if (!loopPlay) {
|
19589
|
-
// videoRef?.current?.pause();
|
19590
|
-
// } else {
|
19591
|
-
// videoRef?.current?.play();
|
19592
|
-
// }
|
19593
|
-
// }, [loopPlay, isActive]);
|
19594
19595
|
useEffect(() => {
|
19595
19596
|
var _a, _b, _c;
|
19596
19597
|
if (!isActive)
|
@@ -19637,7 +19638,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19637
19638
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19638
19639
|
};
|
19639
19640
|
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
19640
|
-
useMemo(() => {
|
19641
|
+
const renderPoster = useMemo(() => {
|
19641
19642
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19642
19643
|
return null;
|
19643
19644
|
}
|
@@ -19654,14 +19655,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19654
19655
|
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19655
19656
|
return null;
|
19656
19657
|
}
|
19658
|
+
// const renderLoading = useMemo(() => {
|
19659
|
+
// if (!waiting || !isLoadFinish) return;
|
19660
|
+
// return (
|
19661
|
+
// <img
|
19662
|
+
// style={{
|
19663
|
+
// position: 'absolute',
|
19664
|
+
// top: '50%',
|
19665
|
+
// left: 0,
|
19666
|
+
// right: 0,
|
19667
|
+
// transform: 'translateY(-100%)',
|
19668
|
+
// margin: 'auto',
|
19669
|
+
// width: '50px',
|
19670
|
+
// height: '50px',
|
19671
|
+
// objectFit: 'contain'
|
19672
|
+
// }}
|
19673
|
+
// src={loading_gif}
|
19674
|
+
// alt='placeholder image'
|
19675
|
+
// />
|
19676
|
+
// );
|
19677
|
+
// }, [waiting, isLoadFinish]);
|
19657
19678
|
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19658
19679
|
position: 'relative',
|
19659
19680
|
width: '100%',
|
19660
19681
|
height,
|
19661
|
-
overflow: 'hidden'
|
19662
|
-
pointerEvents: 'none'
|
19682
|
+
overflow: 'hidden'
|
19663
19683
|
} },
|
19664
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })
|
19684
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19685
|
+
renderPoster,
|
19686
|
+
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19665
19687
|
};
|
19666
19688
|
var VideoWidget$1 = memo(VideoWidget);
|
19667
19689
|
|
@@ -19669,7 +19691,7 @@ var VideoWidget$1 = memo(VideoWidget);
|
|
19669
19691
|
* @Author: binruan@chatlabs.com
|
19670
19692
|
* @Date: 2025-03-25 13:54:27
|
19671
19693
|
* @LastEditors: binruan@chatlabs.com
|
19672
|
-
* @LastEditTime: 2025-03-
|
19694
|
+
* @LastEditTime: 2025-03-28 18:08:02
|
19673
19695
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19674
19696
|
*
|
19675
19697
|
*/
|
@@ -19857,7 +19879,7 @@ Object.values(_materials_).forEach((v) => {
|
|
19857
19879
|
});
|
19858
19880
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19859
19881
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19860
|
-
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
|
19882
|
+
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
|
19861
19883
|
const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
|
19862
19884
|
const swiperRef = useRef(null);
|
19863
19885
|
useMemo(() => {
|
@@ -19884,7 +19906,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
19884
19906
|
const renderContent = (rec, index) => {
|
19885
19907
|
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19886
19908
|
if (isVideo) {
|
19887
|
-
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 }));
|
19909
|
+
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 }));
|
19888
19910
|
}
|
19889
19911
|
else {
|
19890
19912
|
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 }));
|
@@ -20004,6 +20026,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20004
20026
|
var _a, _b, _c, _d;
|
20005
20027
|
const rec = cloneDeep(recData);
|
20006
20028
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20029
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20007
20030
|
return (React.createElement("div", { style: { position: 'relative' } },
|
20008
20031
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20009
20032
|
renderBottom(rec, index),
|
@@ -20025,16 +20048,29 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20025
20048
|
(_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);
|
20026
20049
|
}, [activeIndex]);
|
20027
20050
|
useEffect(() => {
|
20028
|
-
var _a, _b;
|
20029
20051
|
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20030
20052
|
return;
|
20031
|
-
|
20053
|
+
// swiperRef?.current?.swiper?.slideTo(0);
|
20054
|
+
setLooPlaySwiper(loopPlay);
|
20032
20055
|
}, [loopPlay]);
|
20056
|
+
const handleSessionExpire = useCallback(debounce(() => {
|
20057
|
+
setLooPlaySwiper(false);
|
20058
|
+
}, 1000), []);
|
20059
|
+
useEffect(() => {
|
20060
|
+
const events = ['touchstart', 'touchcancel'];
|
20061
|
+
events.forEach((event) => {
|
20062
|
+
window.addEventListener(event, handleSessionExpire);
|
20063
|
+
});
|
20064
|
+
return () => {
|
20065
|
+
events.forEach((event) => {
|
20066
|
+
window.removeEventListener(event, handleSessionExpire);
|
20067
|
+
});
|
20068
|
+
};
|
20069
|
+
}, [handleSessionExpire]);
|
20033
20070
|
return (React.createElement("div", { id: 'sxp-render',
|
20034
20071
|
// className={style['clc-sxp-container']}
|
20035
20072
|
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20036
20073
|
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20037
|
-
setLooPlaySwiper(false);
|
20038
20074
|
swiperRef.current.swiper.allowTouchMove = false;
|
20039
20075
|
setTimeout(() => {
|
20040
20076
|
swiperRef.current.swiper.allowTouchMove = true;
|
@@ -20052,7 +20088,7 @@ var DiyStoryPreview$1 = memo(DiyStoryPreview);
|
|
20052
20088
|
* @Author: binruan@chatlabs.com
|
20053
20089
|
* @Date: 2023-10-31 10:56:01
|
20054
20090
|
* @LastEditors: binruan@chatlabs.com
|
20055
|
-
* @LastEditTime:
|
20091
|
+
* @LastEditTime: 2025-03-28 17:15:47
|
20056
20092
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20057
20093
|
*
|
20058
20094
|
*/
|
@@ -20146,7 +20182,7 @@ const Popup = () => {
|
|
20146
20182
|
* @Author: binruan@chatlabs.com
|
20147
20183
|
* @Date: 2024-03-20 10:27:31
|
20148
20184
|
* @LastEditors: binruan@chatlabs.com
|
20149
|
-
* @LastEditTime: 2025-03-
|
20185
|
+
* @LastEditTime: 2025-03-28 16:55:21
|
20150
20186
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20151
20187
|
*
|
20152
20188
|
*/
|
@@ -20155,19 +20191,19 @@ Object.values(_materials_).forEach((v) => {
|
|
20155
20191
|
RESOLVER[v.extend.type] = v;
|
20156
20192
|
});
|
20157
20193
|
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
20158
|
-
var _a, _b, _c, _d, _e, _f;
|
20194
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
20159
20195
|
const utmVal = useMemo(() => {
|
20160
20196
|
var _a;
|
20161
20197
|
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('?', '') : '';
|
20162
20198
|
return searchParams;
|
20163
20199
|
}, []);
|
20164
|
-
const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
|
20200
|
+
const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
20165
20201
|
const [channel, setChannel] = useState();
|
20166
20202
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20167
|
-
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: (
|
20168
|
-
var _a;
|
20203
|
+
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 }) => {
|
20204
|
+
var _a, _b;
|
20169
20205
|
return (React.createElement(React.Fragment, null,
|
20170
|
-
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (
|
20206
|
+
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 })),
|
20171
20207
|
React.createElement(Popup, null)));
|
20172
20208
|
} })));
|
20173
20209
|
};
|