pb-sxp-ui 1.15.41 → 1.15.42

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.
Files changed (21) hide show
  1. package/dist/index.cjs +66 -51
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +66 -51
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +66 -51
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  14. package/es/core/components/SxpPageRender/PictureGroup/index.js +37 -13
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +27 -38
  16. package/es/core/components/SxpPageRender/index.js +4 -2
  17. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  18. package/lib/core/components/SxpPageRender/PictureGroup/index.js +36 -12
  19. package/lib/core/components/SxpPageRender/VideoWidget/index.js +27 -38
  20. package/lib/core/components/SxpPageRender/index.js +4 -2
  21. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,6 +12,11 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
+ data: RecItemType[];
16
+ swiperRef?: any;
17
+ }
18
+ export interface IPictureGroupRef {
19
+ setLoopPlay: (v: boolean) => void;
15
20
  }
16
21
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
17
22
  export default _default;
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -1,25 +1,49 @@
1
1
  import { __awaiter } from "tslib";
2
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
3
  import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
4
4
  import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
5
+ import { css } from '@emotion/css';
5
6
  import Picture from './Picture';
6
7
  import { useSxpDataSource } from '../../../../core/hooks';
7
- import { css } from '@emotion/css';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
9
  import { getScreenReader } from '../../../../core/utils/tool';
10
- const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
10
+ const PictureGroup = forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
11
11
  var _a, _b;
12
12
  const { isActive } = useSwiperSlide();
13
- const { sxpParameter, openHashtag } = useSxpDataSource();
13
+ const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
14
14
  const [isLoad, setIsLoad] = useState(false);
15
15
  const [imgInfo, setImgInfo] = useState();
16
16
  const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
17
- const swiperRef = useRef();
17
+ const imgsSwiperRef = useRef();
18
18
  const isFirstPlayRef = useRef(true);
19
+ const loopPlayRef = useRef(true);
19
20
  const initTime = new Date();
21
+ useImperativeHandle(ref, () => {
22
+ return {
23
+ setLoopPlay(v) {
24
+ loopPlayRef.current = v;
25
+ }
26
+ };
27
+ });
28
+ useEffect(() => {
29
+ if (isLoad && isActive && isDiyH5) {
30
+ setTimeout(() => {
31
+ var _a, _b, _c, _d, _e, _f;
32
+ if (!loopPlayRef.current)
33
+ return;
34
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
35
+ (_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);
36
+ }
37
+ else {
38
+ 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;
39
+ (_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
+ }
41
+ }, 3000);
42
+ }
43
+ }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
20
44
  useEffect(() => {
21
45
  if (isLoad && isActive) {
22
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
46
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
23
47
  if (openHashtag) {
24
48
  onViewImageEndEvent(rec);
25
49
  }
@@ -29,7 +53,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
29
53
  }
30
54
  }
31
55
  else {
32
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
56
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
33
57
  }
34
58
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
35
59
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -53,13 +77,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
53
77
  };
54
78
  }, [isActive, imgInfo]);
55
79
  const handleMouseEnter = useCallback(() => {
56
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
57
- swiperRef.current.swiper.autoplay.stop();
80
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
81
+ imgsSwiperRef.current.swiper.autoplay.stop();
58
82
  }
59
83
  }, []);
60
84
  const handleMouseLeave = useCallback(() => {
61
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
62
- swiperRef.current.swiper.autoplay.start();
85
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
86
+ imgsSwiperRef.current.swiper.autoplay.start();
63
87
  }
64
88
  }, []);
65
89
  const handleSlideChange = useCallback((swiper) => {
@@ -80,7 +104,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
80
104
  enabled: true
81
105
  }
82
106
  }
83
- : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
107
+ : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
84
108
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
85
109
  fontSize: '14px'
86
110
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -97,5 +121,5 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
97
121
  return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
98
122
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
99
123
  }))));
100
- };
124
+ });
101
125
  export default memo(PictureGroup);
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -76,6 +76,26 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
76
76
  return;
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
+ const handleEnd = () => {
80
+ var _a, _b, _c, _d, _e, _f, _g, _h;
81
+ if (!videoRef.current)
82
+ return;
83
+ if (isDiyH5) {
84
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
85
+ if (!loopPlayRef.current)
86
+ return;
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
+ }
90
+ 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);
93
+ }
94
+ }
95
+ else {
96
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
97
+ }
98
+ };
79
99
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
80
100
  const handlePlaying = useCallback(() => {
81
101
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -100,11 +120,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
100
120
  isFirstPlayRef.current = false;
101
121
  }
102
122
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
103
- const setCurrentTimeByStartTime = useCallback(() => {
104
- if (isDiyH5) {
105
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
106
- }
107
- }, []);
108
123
  const handLoadeddata = useCallback(() => {
109
124
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
110
125
  return;
@@ -129,13 +144,12 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
129
144
  const handleLoadedmetadata = useCallback(() => {
130
145
  if (!videoRef.current)
131
146
  return;
132
- setCurrentTimeByStartTime();
133
147
  loadedTimeRef.current = new Date();
134
148
  handleStartPlay();
135
149
  handLoadeddata();
136
150
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
137
151
  const handleClickVideo = useCallback((type) => () => {
138
- var _a, _b, _c, _d, _e, _f;
152
+ var _a, _b, _c, _d, _e;
139
153
  if (!videoRef.current)
140
154
  return;
141
155
  if (!isLoadFinish)
@@ -156,13 +170,10 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
156
170
  break;
157
171
  default:
158
172
  if (isPause) {
159
- if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
160
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
161
- }
162
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
173
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
163
174
  }
164
175
  else {
165
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
176
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
166
177
  }
167
178
  setIsPauseVideo(!isPause);
168
179
  break;
@@ -200,27 +211,8 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
200
211
  const handleWaiting = useCallback(() => {
201
212
  setWaiting(true);
202
213
  }, []);
203
- const handleTimeUpload = () => {
204
- if (!videoRef.current || !isDiyH5)
205
- return;
206
- setTimeout(() => {
207
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
208
- if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
209
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
210
- if (!loopPlayRef.current)
211
- return;
212
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
213
- (_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(0);
214
- }
215
- else {
216
- const i = (_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.activeIndex;
217
- (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
218
- }
219
- }
220
- });
221
- };
222
214
  useEffect(() => {
223
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
215
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
224
216
  if (!isActive)
225
217
  return;
226
218
  const videoSrc = videoUrl;
@@ -241,7 +233,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
241
233
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
242
234
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
243
235
  var _a;
244
- setCurrentTimeByStartTime();
245
236
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
246
237
  });
247
238
  }
@@ -255,12 +246,11 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
255
246
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
256
247
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
257
248
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
258
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
249
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
259
250
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
260
251
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
261
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
262
252
  return () => {
263
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
253
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
264
254
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
265
255
  if (!isPause)
266
256
  handlePause();
@@ -272,10 +262,9 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
272
262
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
273
263
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
274
264
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
275
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
265
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
276
266
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
277
267
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
278
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
279
268
  };
280
269
  }, [isActive]);
281
270
  useEffect(() => {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -42,6 +42,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
42
42
  const skipLinkRef = useRef(false);
43
43
  const [pageNum, setPageNum] = useState(2);
44
44
  const videoWidgetRef = useRef(null);
45
+ const pictureGroupRef = useRef(null);
45
46
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
46
47
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
47
48
  const isShowFingerTip = useMemo(() => {
@@ -177,8 +178,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
177
178
  refreshFeSession
178
179
  ]);
179
180
  const handleSessionExpire = useCallback(debounce(() => {
180
- var _a;
181
+ var _a, _b;
181
182
  (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
183
+ (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
182
184
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
183
185
  }, 1000), [handleSessionCompleted, refreshFeSession]);
184
186
  useEffect(() => {
@@ -256,7 +258,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
256
258
  return (React.createElement(VideoWidget, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
257
259
  }
258
260
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
259
- return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
261
+ return (React.createElement(PictureGroup, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
260
262
  }
261
263
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
262
264
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,6 +12,11 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
+ data: RecItemType[];
16
+ swiperRef?: any;
17
+ }
18
+ export interface IPictureGroupRef {
19
+ setLoopPlay: (v: boolean) => void;
15
20
  }
16
21
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
17
22
  export default _default;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -4,24 +4,48 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
+ const css_1 = require("@emotion/css");
7
8
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
9
  const hooks_1 = require("../../../../core/hooks");
9
- const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
+ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
13
13
  var _a, _b;
14
14
  const { isActive } = (0, react_2.useSwiperSlide)();
15
- const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
15
+ const { sxpParameter, openHashtag, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
16
16
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
17
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
18
  const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
- const swiperRef = (0, react_1.useRef)();
19
+ const imgsSwiperRef = (0, react_1.useRef)();
20
20
  const isFirstPlayRef = (0, react_1.useRef)(true);
21
+ const loopPlayRef = (0, react_1.useRef)(true);
21
22
  const initTime = new Date();
23
+ (0, react_1.useImperativeHandle)(ref, () => {
24
+ return {
25
+ setLoopPlay(v) {
26
+ loopPlayRef.current = v;
27
+ }
28
+ };
29
+ });
30
+ (0, react_1.useEffect)(() => {
31
+ if (isLoad && isActive && isDiyH5) {
32
+ setTimeout(() => {
33
+ var _a, _b, _c, _d, _e, _f;
34
+ if (!loopPlayRef.current)
35
+ return;
36
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
37
+ (_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);
38
+ }
39
+ else {
40
+ 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;
41
+ (_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);
42
+ }
43
+ }, 3000);
44
+ }
45
+ }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
22
46
  (0, react_1.useEffect)(() => {
23
47
  if (isLoad && isActive) {
24
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
48
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
25
49
  if (openHashtag) {
26
50
  onViewImageEndEvent(rec);
27
51
  }
@@ -31,7 +55,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
31
55
  }
32
56
  }
33
57
  else {
34
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
58
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
35
59
  }
36
60
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
37
61
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -55,13 +79,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
55
79
  };
56
80
  }, [isActive, imgInfo]);
57
81
  const handleMouseEnter = (0, react_1.useCallback)(() => {
58
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
- swiperRef.current.swiper.autoplay.stop();
82
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
83
+ imgsSwiperRef.current.swiper.autoplay.stop();
60
84
  }
61
85
  }, []);
62
86
  const handleMouseLeave = (0, react_1.useCallback)(() => {
63
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
- swiperRef.current.swiper.autoplay.start();
87
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
88
+ imgsSwiperRef.current.swiper.autoplay.start();
65
89
  }
66
90
  }, []);
67
91
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -82,7 +106,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
82
106
  enabled: true
83
107
  }
84
108
  }
85
- : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
109
+ : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
86
110
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
87
111
  fontSize: '14px'
88
112
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -99,5 +123,5 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
99
123
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
100
124
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
101
125
  }))));
102
- };
126
+ });
103
127
  exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -78,6 +78,26 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
78
78
  return;
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
+ const handleEnd = () => {
82
+ var _a, _b, _c, _d, _e, _f, _g, _h;
83
+ if (!videoRef.current)
84
+ return;
85
+ if (isDiyH5) {
86
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
87
+ if (!loopPlayRef.current)
88
+ return;
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
+ }
92
+ 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);
95
+ }
96
+ }
97
+ else {
98
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
99
+ }
100
+ };
81
101
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
82
102
  const handlePlaying = (0, react_1.useCallback)(() => {
83
103
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -102,11 +122,6 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
102
122
  isFirstPlayRef.current = false;
103
123
  }
104
124
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
105
- const setCurrentTimeByStartTime = (0, react_1.useCallback)(() => {
106
- if (isDiyH5) {
107
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
108
- }
109
- }, []);
110
125
  const handLoadeddata = (0, react_1.useCallback)(() => {
111
126
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
112
127
  return;
@@ -131,13 +146,12 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
131
146
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
132
147
  if (!videoRef.current)
133
148
  return;
134
- setCurrentTimeByStartTime();
135
149
  loadedTimeRef.current = new Date();
136
150
  handleStartPlay();
137
151
  handLoadeddata();
138
152
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
139
153
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
140
- var _a, _b, _c, _d, _e, _f;
154
+ var _a, _b, _c, _d, _e;
141
155
  if (!videoRef.current)
142
156
  return;
143
157
  if (!isLoadFinish)
@@ -158,13 +172,10 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
158
172
  break;
159
173
  default:
160
174
  if (isPause) {
161
- if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
162
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
163
- }
164
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
175
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
165
176
  }
166
177
  else {
167
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
178
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
168
179
  }
169
180
  setIsPauseVideo(!isPause);
170
181
  break;
@@ -202,27 +213,8 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
202
213
  const handleWaiting = (0, react_1.useCallback)(() => {
203
214
  setWaiting(true);
204
215
  }, []);
205
- const handleTimeUpload = () => {
206
- if (!videoRef.current || !isDiyH5)
207
- return;
208
- setTimeout(() => {
209
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
210
- if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
211
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
212
- if (!loopPlayRef.current)
213
- return;
214
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
215
- (_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(0);
216
- }
217
- else {
218
- const i = (_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.activeIndex;
219
- (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
220
- }
221
- }
222
- });
223
- };
224
216
  (0, react_1.useEffect)(() => {
225
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
217
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
226
218
  if (!isActive)
227
219
  return;
228
220
  const videoSrc = videoUrl;
@@ -243,7 +235,6 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
243
235
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
244
236
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
245
237
  var _a;
246
- setCurrentTimeByStartTime();
247
238
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
248
239
  });
249
240
  }
@@ -257,12 +248,11 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
257
248
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
258
249
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
259
250
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
260
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
251
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
261
252
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
262
253
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
263
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
264
254
  return () => {
265
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
255
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
266
256
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
267
257
  if (!isPause)
268
258
  handlePause();
@@ -274,10 +264,9 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
274
264
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
275
265
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
276
266
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
277
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
267
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
278
268
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
279
269
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
280
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
281
270
  };
282
271
  }, [isActive]);
283
272
  (0, react_1.useEffect)(() => {
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -45,6 +45,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
45
45
  const skipLinkRef = (0, react_1.useRef)(false);
46
46
  const [pageNum, setPageNum] = (0, react_1.useState)(2);
47
47
  const videoWidgetRef = (0, react_1.useRef)(null);
48
+ const pictureGroupRef = (0, react_1.useRef)(null);
48
49
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
49
50
  const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
50
51
  const isShowFingerTip = (0, react_1.useMemo)(() => {
@@ -180,8 +181,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
180
181
  refreshFeSession
181
182
  ]);
182
183
  const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
183
- var _a;
184
+ var _a, _b;
184
185
  (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
186
+ (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
185
187
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
186
188
  }, 1000), [handleSessionCompleted, refreshFeSession]);
187
189
  (0, react_1.useEffect)(() => {
@@ -259,7 +261,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
259
261
  return (react_1.default.createElement(VideoWidget_1.default, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
260
262
  }
261
263
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
262
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
264
+ return (react_1.default.createElement(PictureGroup_1.default, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
263
265
  }
264
266
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
265
267
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.41",
3
+ "version": "1.15.42",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",