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.
@@ -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, _e, _f;
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 = (_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.activeIndex;
40
- (_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);
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, data, index, swiperRef]);
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, _g, _h;
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 = (_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;
92
- (_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);
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
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
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 || isDiyH5)
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, _e, _f;
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 = (_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.activeIndex;
42
- (_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);
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, data, index, swiperRef]);
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, _g, _h;
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 = (_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;
94
- (_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);
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
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
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 || isDiyH5)
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(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.16.10",
3
+ "version": "1.16.11",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",