pb-sxp-ui 1.16.10 → 1.16.11
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 +32 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +32 -16
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +32 -16
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/PictureGroup/index.js +4 -5
- package/es/core/components/SxpPageRender/VideoWidget/index.js +4 -5
- package/es/core/components/SxpPageRender/index.js +6 -1
- package/es/core/context/SxpDataSourceProvider.js +16 -1
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +4 -5
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +4 -5
- package/lib/core/components/SxpPageRender/index.js +6 -1
- package/lib/core/context/SxpDataSourceProvider.js +16 -1
- package/package.json +1 -1
@@ -29,15 +29,14 @@ const PictureGroup = forwardRef(({ imgUrls, data, height, rec, index, onViewImag
|
|
29
29
|
let timerId;
|
30
30
|
if (isLoad && isActive && isDiyH5) {
|
31
31
|
timerId = setTimeout(() => {
|
32
|
-
var _a, _b, _c, _d
|
32
|
+
var _a, _b, _c, _d;
|
33
33
|
if (!loopPlayRef.current)
|
34
34
|
return;
|
35
35
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
36
|
-
(_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(0);
|
37
36
|
}
|
38
37
|
else {
|
39
|
-
const i = (
|
40
|
-
(
|
38
|
+
const i = (_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.activeIndex;
|
39
|
+
(_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(i + 1);
|
41
40
|
}
|
42
41
|
}, 3000);
|
43
42
|
}
|
@@ -45,7 +44,7 @@ const PictureGroup = forwardRef(({ imgUrls, data, height, rec, index, onViewImag
|
|
45
44
|
if (timerId)
|
46
45
|
clearTimeout(timerId);
|
47
46
|
};
|
48
|
-
}, [isLoad, isActive, isDiyH5,
|
47
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef]);
|
49
48
|
useEffect(() => {
|
50
49
|
if (isLoad && isActive) {
|
51
50
|
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
@@ -77,7 +77,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
|
|
77
77
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
78
78
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
79
79
|
const handleEnd = () => {
|
80
|
-
var _a, _b, _c, _d, _e, _f
|
80
|
+
var _a, _b, _c, _d, _e, _f;
|
81
81
|
if (!videoRef.current)
|
82
82
|
return;
|
83
83
|
if (isDiyH5) {
|
@@ -85,15 +85,14 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
|
|
85
85
|
if (!loopPlayRef.current)
|
86
86
|
return;
|
87
87
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
88
|
-
(_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);
|
89
88
|
}
|
90
89
|
else {
|
91
|
-
const i = (
|
92
|
-
(
|
90
|
+
const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
|
91
|
+
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(i + 1);
|
93
92
|
}
|
94
93
|
}
|
95
94
|
else {
|
96
|
-
(
|
95
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
97
96
|
}
|
98
97
|
};
|
99
98
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
@@ -609,14 +609,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
609
609
|
swiperRef.current.swiper.allowTouchMove = true;
|
610
610
|
}, 500);
|
611
611
|
}, onActiveIndexChange: (swiper) => {
|
612
|
+
var _a, _b;
|
612
613
|
setActiveIndex(swiper.activeIndex);
|
613
614
|
if (openHashtag)
|
614
615
|
return;
|
615
616
|
handleScrollEvent(swiper);
|
616
|
-
if (waterFallData || isEditor
|
617
|
+
if (waterFallData || isEditor)
|
617
618
|
return;
|
618
619
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
619
620
|
if (!isLoadMore) {
|
621
|
+
if (isDiyH5) {
|
622
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
623
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
624
|
+
}
|
620
625
|
setIsLoadMore(true);
|
621
626
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
622
627
|
var _a;
|
@@ -20,6 +20,7 @@ export const DEFAULT_TAG = 'FOR U';
|
|
20
20
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
21
21
|
var _a, _b, _c, _d, _e;
|
22
22
|
const [rtcList, setRtcList] = useState([]);
|
23
|
+
const [firstRtcList, setFirstRtcList] = useState([]);
|
23
24
|
const [tagList, setTagList] = useState([]);
|
24
25
|
const [loading, setLoading] = useState(true);
|
25
26
|
const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
|
@@ -183,6 +184,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
183
184
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
184
185
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
185
186
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
187
|
+
if (isDiyH5) {
|
188
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
189
|
+
}
|
186
190
|
}
|
187
191
|
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
188
192
|
if (isNotNullList) {
|
@@ -222,12 +226,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
222
226
|
if (rtcList.length <= 0) {
|
223
227
|
return;
|
224
228
|
}
|
229
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
230
|
+
setRtcList(rtcList.concat(firstRtcList));
|
231
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
232
|
+
return;
|
233
|
+
}
|
225
234
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
226
235
|
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
227
236
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
228
237
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
229
238
|
return data;
|
230
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
239
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
231
240
|
const refreshFeSession = useCallback((enableReSid, event) => {
|
232
241
|
var _a, _b, _c, _d, _e;
|
233
242
|
let expire = false;
|
@@ -568,6 +577,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
568
577
|
}
|
569
578
|
setRtcList(list);
|
570
579
|
setCacheRtcList(list);
|
580
|
+
if (isDiyH5) {
|
581
|
+
setFirstRtcList(list);
|
582
|
+
}
|
571
583
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
572
584
|
if (channel) {
|
573
585
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -602,6 +614,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
602
614
|
}
|
603
615
|
setRtcList(list);
|
604
616
|
setCacheRtcList(list);
|
617
|
+
if (isDiyH5) {
|
618
|
+
setFirstRtcList(list);
|
619
|
+
}
|
605
620
|
}
|
606
621
|
})
|
607
622
|
.finally(() => {
|
@@ -31,15 +31,14 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
|
|
31
31
|
let timerId;
|
32
32
|
if (isLoad && isActive && isDiyH5) {
|
33
33
|
timerId = setTimeout(() => {
|
34
|
-
var _a, _b, _c, _d
|
34
|
+
var _a, _b, _c, _d;
|
35
35
|
if (!loopPlayRef.current)
|
36
36
|
return;
|
37
37
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
38
|
-
(_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(0);
|
39
38
|
}
|
40
39
|
else {
|
41
|
-
const i = (
|
42
|
-
(
|
40
|
+
const i = (_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.activeIndex;
|
41
|
+
(_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(i + 1);
|
43
42
|
}
|
44
43
|
}, 3000);
|
45
44
|
}
|
@@ -47,7 +46,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
|
|
47
46
|
if (timerId)
|
48
47
|
clearTimeout(timerId);
|
49
48
|
};
|
50
|
-
}, [isLoad, isActive, isDiyH5,
|
49
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef]);
|
51
50
|
(0, react_1.useEffect)(() => {
|
52
51
|
if (isLoad && isActive) {
|
53
52
|
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
@@ -79,7 +79,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
|
|
79
79
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
80
80
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
81
81
|
const handleEnd = () => {
|
82
|
-
var _a, _b, _c, _d, _e, _f
|
82
|
+
var _a, _b, _c, _d, _e, _f;
|
83
83
|
if (!videoRef.current)
|
84
84
|
return;
|
85
85
|
if (isDiyH5) {
|
@@ -87,15 +87,14 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
|
|
87
87
|
if (!loopPlayRef.current)
|
88
88
|
return;
|
89
89
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
90
|
-
(_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);
|
91
90
|
}
|
92
91
|
else {
|
93
|
-
const i = (
|
94
|
-
(
|
92
|
+
const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
|
93
|
+
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(i + 1);
|
95
94
|
}
|
96
95
|
}
|
97
96
|
else {
|
98
|
-
(
|
97
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
99
98
|
}
|
100
99
|
};
|
101
100
|
const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
@@ -612,14 +612,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
612
612
|
swiperRef.current.swiper.allowTouchMove = true;
|
613
613
|
}, 500);
|
614
614
|
}, onActiveIndexChange: (swiper) => {
|
615
|
+
var _a, _b;
|
615
616
|
setActiveIndex(swiper.activeIndex);
|
616
617
|
if (openHashtag)
|
617
618
|
return;
|
618
619
|
handleScrollEvent(swiper);
|
619
|
-
if (waterFallData || isEditor
|
620
|
+
if (waterFallData || isEditor)
|
620
621
|
return;
|
621
622
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
622
623
|
if (!isLoadMore) {
|
624
|
+
if (isDiyH5) {
|
625
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
626
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
627
|
+
}
|
623
628
|
setIsLoadMore(true);
|
624
629
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
625
630
|
var _a;
|
@@ -23,6 +23,7 @@ exports.DEFAULT_TAG = 'FOR U';
|
|
23
23
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
24
24
|
var _a, _b, _c, _d, _e;
|
25
25
|
const [rtcList, setRtcList] = (0, react_1.useState)([]);
|
26
|
+
const [firstRtcList, setFirstRtcList] = (0, react_1.useState)([]);
|
26
27
|
const [tagList, setTagList] = (0, react_1.useState)([]);
|
27
28
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
28
29
|
const [curReqInfo, setCurReqInfo] = (0, react_1.useState)({ rtc: '', requestId: '' });
|
@@ -186,6 +187,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
186
187
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
187
188
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
188
189
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
190
|
+
if (isDiyH5) {
|
191
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
192
|
+
}
|
189
193
|
}
|
190
194
|
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
191
195
|
if (isNotNullList) {
|
@@ -225,12 +229,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
225
229
|
if (rtcList.length <= 0) {
|
226
230
|
return;
|
227
231
|
}
|
232
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
233
|
+
setRtcList(rtcList.concat(firstRtcList));
|
234
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
235
|
+
return;
|
236
|
+
}
|
228
237
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
229
238
|
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
230
239
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
231
240
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
232
241
|
return data;
|
233
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
242
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
234
243
|
const refreshFeSession = (0, react_1.useCallback)((enableReSid, event) => {
|
235
244
|
var _a, _b, _c, _d, _e;
|
236
245
|
let expire = false;
|
@@ -571,6 +580,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
571
580
|
}
|
572
581
|
setRtcList(list);
|
573
582
|
setCacheRtcList(list);
|
583
|
+
if (isDiyH5) {
|
584
|
+
setFirstRtcList(list);
|
585
|
+
}
|
574
586
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
575
587
|
if (channel) {
|
576
588
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -605,6 +617,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
605
617
|
}
|
606
618
|
setRtcList(list);
|
607
619
|
setCacheRtcList(list);
|
620
|
+
if (isDiyH5) {
|
621
|
+
setFirstRtcList(list);
|
622
|
+
}
|
608
623
|
}
|
609
624
|
})
|
610
625
|
.finally(() => {
|