pb-sxp-ui 1.15.13-alpha.3 → 1.15.13-alpha.5
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 +203 -112
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +203 -112
- 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 +203 -112
- 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 +10 -2
- package/es/core/components/DiyStoryPreview/VideoWidget.js +68 -24
- package/es/core/components/DiyStoryPreview/index.d.ts +20 -1
- package/es/core/components/DiyStoryPreview/index.js +51 -20
- 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 +10 -2
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +67 -23
- package/lib/core/components/DiyStoryPreview/index.d.ts +20 -1
- package/lib/core/components/DiyStoryPreview/index.js +49 -18
- 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 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
|
19480
19479
|
const { isActive } = useSwiperSlide();
|
19481
19480
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
19482
19481
|
const videoRef = React.useRef(null);
|
@@ -19488,6 +19487,38 @@ Made in Italy` })));
|
|
19488
19487
|
const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
|
19489
19488
|
const videoId = `pb-cache-video-${index}`;
|
19490
19489
|
const hlsRef = React.useRef(null);
|
19490
|
+
const loopPlayRef = React.useRef(loopPlay);
|
19491
|
+
React.useEffect(() => {
|
19492
|
+
loopPlayRef.current = loopPlay;
|
19493
|
+
}, [loopPlay]);
|
19494
|
+
React.useImperativeHandle(ref, () => {
|
19495
|
+
return {
|
19496
|
+
play() {
|
19497
|
+
var _a;
|
19498
|
+
if (!videoRef.current)
|
19499
|
+
return;
|
19500
|
+
handleTimeUpload();
|
19501
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19502
|
+
setIsPauseVideo(false);
|
19503
|
+
},
|
19504
|
+
pause() {
|
19505
|
+
var _a;
|
19506
|
+
if (!videoRef.current)
|
19507
|
+
return;
|
19508
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19509
|
+
setIsPauseVideo(true);
|
19510
|
+
},
|
19511
|
+
setLoopPlay(v) {
|
19512
|
+
if (!videoRef.current)
|
19513
|
+
return;
|
19514
|
+
loopPlayRef.current = v;
|
19515
|
+
},
|
19516
|
+
isPlaying() {
|
19517
|
+
var _a;
|
19518
|
+
return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
|
19519
|
+
}
|
19520
|
+
};
|
19521
|
+
});
|
19491
19522
|
React.useEffect(() => {
|
19492
19523
|
if (!videoRef.current)
|
19493
19524
|
return;
|
@@ -19497,8 +19528,8 @@ Made in Italy` })));
|
|
19497
19528
|
var _a;
|
19498
19529
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19499
19530
|
}, []);
|
19500
|
-
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19501
|
-
|
19531
|
+
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19532
|
+
React.useCallback(() => {
|
19502
19533
|
var _a, _b, _c, _d, _e, _f;
|
19503
19534
|
setIsPauseVideo(false);
|
19504
19535
|
const item = data[index];
|
@@ -19515,9 +19546,9 @@ Made in Italy` })));
|
|
19515
19546
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19516
19547
|
setIsLoadFinish(true);
|
19517
19548
|
}, []);
|
19518
|
-
React.useCallback((type) => () => {
|
19519
|
-
var _a, _b, _c, _d, _e;
|
19520
|
-
if (!isLoadFinish)
|
19549
|
+
const handleClickVideo = React.useCallback((type) => () => {
|
19550
|
+
var _a, _b, _c, _d, _e, _f;
|
19551
|
+
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
19521
19552
|
return;
|
19522
19553
|
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
19523
19554
|
switch (type) {
|
@@ -19535,10 +19566,13 @@ Made in Italy` })));
|
|
19535
19566
|
break;
|
19536
19567
|
default:
|
19537
19568
|
if (isPause) {
|
19538
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
19569
|
+
if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
|
19570
|
+
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
19571
|
+
}
|
19572
|
+
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
19539
19573
|
}
|
19540
19574
|
else {
|
19541
|
-
(
|
19575
|
+
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
19542
19576
|
}
|
19543
19577
|
setIsPauseVideo(!isPause);
|
19544
19578
|
break;
|
@@ -19562,7 +19596,7 @@ Made in Italy` })));
|
|
19562
19596
|
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
|
19563
19597
|
: 'translateY(-50%)';
|
19564
19598
|
}, [videoPostConfig]);
|
19565
|
-
|
19599
|
+
React.useCallback(() => {
|
19566
19600
|
if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
|
19567
19601
|
return;
|
19568
19602
|
const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
|
@@ -19576,36 +19610,34 @@ Made in Italy` })));
|
|
19576
19610
|
setFirstFrameSrc(canvas.toDataURL());
|
19577
19611
|
}, []);
|
19578
19612
|
const handleTimeUpload = React.useCallback(() => {
|
19579
|
-
var _a
|
19613
|
+
var _a;
|
19580
19614
|
if (!videoRef.current)
|
19581
19615
|
return;
|
19582
|
-
|
19583
|
-
|
19584
|
-
|
19616
|
+
const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
|
19617
|
+
handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
|
19618
|
+
setTimeout(() => {
|
19619
|
+
var _a, _b;
|
19620
|
+
if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
19621
|
+
slideSwiper();
|
19622
|
+
}
|
19623
|
+
});
|
19585
19624
|
}, []);
|
19586
|
-
const
|
19587
|
-
var _a, _b, _c, _d, _e, _f;
|
19588
|
-
|
19589
|
-
|
19590
|
-
if (!loopPlay)
|
19625
|
+
const slideSwiper = () => {
|
19626
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
19627
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19628
|
+
if (!loopPlayRef.current)
|
19591
19629
|
return;
|
19592
19630
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
19593
|
-
(
|
19631
|
+
(_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
|
19594
19632
|
}
|
19595
19633
|
else {
|
19596
|
-
const i = (
|
19597
|
-
(
|
19634
|
+
const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
|
19635
|
+
(_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
|
19598
19636
|
}
|
19599
19637
|
};
|
19600
|
-
|
19601
|
-
|
19602
|
-
|
19603
|
-
// if (!loopPlay) {
|
19604
|
-
// videoRef?.current?.pause();
|
19605
|
-
// } else {
|
19606
|
-
// videoRef?.current?.play();
|
19607
|
-
// }
|
19608
|
-
// }, [loopPlay, isActive]);
|
19638
|
+
const handlePause = () => {
|
19639
|
+
setIsPauseVideo(true);
|
19640
|
+
};
|
19609
19641
|
React.useEffect(() => {
|
19610
19642
|
var _a, _b, _c;
|
19611
19643
|
if (!isActive)
|
@@ -19651,8 +19683,8 @@ Made in Italy` })));
|
|
19651
19683
|
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
19652
19684
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19653
19685
|
};
|
19654
|
-
}, [
|
19655
|
-
React.useMemo(() => {
|
19686
|
+
}, [isActive]);
|
19687
|
+
const renderPoster = React.useMemo(() => {
|
19656
19688
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19657
19689
|
return null;
|
19658
19690
|
}
|
@@ -19669,22 +19701,43 @@ Made in Italy` })));
|
|
19669
19701
|
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19670
19702
|
return null;
|
19671
19703
|
}
|
19704
|
+
// const renderLoading = useMemo(() => {
|
19705
|
+
// if (!waiting || !isLoadFinish) return;
|
19706
|
+
// return (
|
19707
|
+
// <img
|
19708
|
+
// style={{
|
19709
|
+
// position: 'absolute',
|
19710
|
+
// top: '50%',
|
19711
|
+
// left: 0,
|
19712
|
+
// right: 0,
|
19713
|
+
// transform: 'translateY(-100%)',
|
19714
|
+
// margin: 'auto',
|
19715
|
+
// width: '50px',
|
19716
|
+
// height: '50px',
|
19717
|
+
// objectFit: 'contain'
|
19718
|
+
// }}
|
19719
|
+
// src={loading_gif}
|
19720
|
+
// alt='placeholder image'
|
19721
|
+
// />
|
19722
|
+
// );
|
19723
|
+
// }, [waiting, isLoadFinish]);
|
19672
19724
|
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19673
19725
|
position: 'relative',
|
19674
19726
|
width: '100%',
|
19675
19727
|
height,
|
19676
|
-
overflow: 'hidden'
|
19677
|
-
|
19678
|
-
} },
|
19679
|
-
|
19680
|
-
|
19728
|
+
overflow: 'hidden'
|
19729
|
+
}, onClick: handleClickVideo() },
|
19730
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19731
|
+
renderPoster,
|
19732
|
+
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19733
|
+
});
|
19681
19734
|
var VideoWidget$1 = React.memo(VideoWidget);
|
19682
19735
|
|
19683
19736
|
/*
|
19684
19737
|
* @Author: binruan@chatlabs.com
|
19685
19738
|
* @Date: 2025-03-25 13:54:27
|
19686
19739
|
* @LastEditors: binruan@chatlabs.com
|
19687
|
-
* @LastEditTime: 2025-03-
|
19740
|
+
* @LastEditTime: 2025-03-31 14:29:21
|
19688
19741
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19689
19742
|
*
|
19690
19743
|
*/
|
@@ -19872,9 +19925,10 @@ Made in Italy` })));
|
|
19872
19925
|
});
|
19873
19926
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19874
19927
|
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' }) => {
|
19876
|
-
const
|
19928
|
+
const DiyStoryPreview = React.forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
|
19929
|
+
const videoWidgetRef = React.useRef(null);
|
19877
19930
|
const swiperRef = React.useRef(null);
|
19931
|
+
const [curIndex, setCurIndex] = React.useState(0);
|
19878
19932
|
React.useMemo(() => {
|
19879
19933
|
let minusHeight = 0;
|
19880
19934
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
@@ -19885,6 +19939,32 @@ Made in Italy` })));
|
|
19885
19939
|
}
|
19886
19940
|
return containerHeight - minusHeight;
|
19887
19941
|
}, [globalConfig, containerHeight, tagList]);
|
19942
|
+
React.useImperativeHandle(ref, () => {
|
19943
|
+
return {
|
19944
|
+
play() {
|
19945
|
+
var _a;
|
19946
|
+
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19947
|
+
},
|
19948
|
+
pause() {
|
19949
|
+
var _a;
|
19950
|
+
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
19951
|
+
},
|
19952
|
+
slideTo(n) {
|
19953
|
+
var _a, _b;
|
19954
|
+
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
19955
|
+
return;
|
19956
|
+
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
|
19957
|
+
},
|
19958
|
+
isPlaying() {
|
19959
|
+
var _a, _b;
|
19960
|
+
return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
|
19961
|
+
},
|
19962
|
+
setLoopPlay(v) {
|
19963
|
+
var _a;
|
19964
|
+
(_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
|
19965
|
+
}
|
19966
|
+
};
|
19967
|
+
});
|
19888
19968
|
// 判断是否是视频
|
19889
19969
|
const isVideoUrl = (url) => {
|
19890
19970
|
if (url && url !== '' && typeof url === 'string') {
|
@@ -19899,10 +19979,10 @@ Made in Italy` })));
|
|
19899
19979
|
const renderContent = (rec, index) => {
|
19900
19980
|
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19901
19981
|
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:
|
19982
|
+
return (React.createElement(VideoWidget$1, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
|
19903
19983
|
}
|
19904
19984
|
else {
|
19905
|
-
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
|
19985
|
+
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 }));
|
19906
19986
|
}
|
19907
19987
|
};
|
19908
19988
|
React.useMemo(() => {
|
@@ -20019,6 +20099,7 @@ Made in Italy` })));
|
|
20019
20099
|
var _a, _b, _c, _d;
|
20020
20100
|
const rec = lodash.cloneDeep(recData);
|
20021
20101
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20102
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20022
20103
|
return (React.createElement("div", { style: { position: 'relative' } },
|
20023
20104
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20024
20105
|
renderBottom(rec, index),
|
@@ -20039,35 +20120,45 @@ Made in Italy` })));
|
|
20039
20120
|
return;
|
20040
20121
|
(_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
20122
|
}, [activeIndex]);
|
20123
|
+
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
20124
|
+
var _a;
|
20125
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
20126
|
+
}, 1000), []);
|
20042
20127
|
React.useEffect(() => {
|
20043
|
-
|
20044
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20128
|
+
if (disabledListener)
|
20045
20129
|
return;
|
20046
|
-
|
20047
|
-
|
20130
|
+
const events = ['touchstart', 'touchcancel'];
|
20131
|
+
events.forEach((event) => {
|
20132
|
+
window.addEventListener(event, handleSessionExpire);
|
20133
|
+
});
|
20134
|
+
return () => {
|
20135
|
+
events.forEach((event) => {
|
20136
|
+
window.removeEventListener(event, handleSessionExpire);
|
20137
|
+
});
|
20138
|
+
};
|
20139
|
+
}, [handleSessionExpire, disabledListener]);
|
20048
20140
|
return (React.createElement("div", { id: 'sxp-render',
|
20049
20141
|
// className={style['clc-sxp-container']}
|
20050
20142
|
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20051
20143
|
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20052
|
-
setLooPlaySwiper(false);
|
20053
20144
|
swiperRef.current.swiper.allowTouchMove = false;
|
20054
20145
|
setTimeout(() => {
|
20055
20146
|
swiperRef.current.swiper.allowTouchMove = true;
|
20056
20147
|
}, 500);
|
20057
20148
|
}, onActiveIndexChange: (swiper) => {
|
20058
|
-
|
20149
|
+
setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
|
20059
20150
|
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20060
20151
|
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20061
20152
|
return renderView(rec, index);
|
20062
20153
|
}))));
|
20063
|
-
};
|
20154
|
+
});
|
20064
20155
|
var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
|
20065
20156
|
|
20066
20157
|
/*
|
20067
20158
|
* @Author: binruan@chatlabs.com
|
20068
20159
|
* @Date: 2023-10-31 10:56:01
|
20069
20160
|
* @LastEditors: binruan@chatlabs.com
|
20070
|
-
* @LastEditTime:
|
20161
|
+
* @LastEditTime: 2025-03-28 17:15:47
|
20071
20162
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20072
20163
|
*
|
20073
20164
|
*/
|
@@ -20161,7 +20252,7 @@ Made in Italy` })));
|
|
20161
20252
|
* @Author: binruan@chatlabs.com
|
20162
20253
|
* @Date: 2024-03-20 10:27:31
|
20163
20254
|
* @LastEditors: binruan@chatlabs.com
|
20164
|
-
* @LastEditTime: 2025-03-
|
20255
|
+
* @LastEditTime: 2025-03-28 16:55:21
|
20165
20256
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20166
20257
|
*
|
20167
20258
|
*/
|
@@ -20170,19 +20261,19 @@ Made in Italy` })));
|
|
20170
20261
|
RESOLVER[v.extend.type] = v;
|
20171
20262
|
});
|
20172
20263
|
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
20173
|
-
var _a, _b, _c, _d, _e, _f;
|
20264
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
20174
20265
|
const utmVal = React.useMemo(() => {
|
20175
20266
|
var _a;
|
20176
20267
|
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
20268
|
return searchParams;
|
20178
20269
|
}, []);
|
20179
|
-
const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
|
20270
|
+
const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
20180
20271
|
const [channel, setChannel] = React.useState();
|
20181
20272
|
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;
|
20273
|
+
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 }) => {
|
20274
|
+
var _a, _b;
|
20184
20275
|
return (React.createElement(React.Fragment, null,
|
20185
|
-
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (
|
20276
|
+
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
20277
|
React.createElement(Popup, null)));
|
20187
20278
|
} })));
|
20188
20279
|
};
|