pb-sxp-ui 1.16.11 → 1.16.12

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 (35) hide show
  1. package/dist/index.cjs +142 -182
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +142 -182
  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 +142 -182
  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/DiyPortalPreview/VideoWidget.js +8 -10
  14. package/es/core/components/SxpPageRender/LikeButton/index.js +15 -17
  15. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +13 -41
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +44 -33
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
  19. package/es/core/components/SxpPageRender/index.js +37 -53
  20. package/es/core/context/SxpDataSourceProvider.js +3 -18
  21. package/es/core/hooks/useEventReport.js +5 -6
  22. package/es/materials/sxp/popup/CommodityDetail/index.js +7 -1
  23. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
  24. package/lib/core/components/DiyPortalPreview/VideoWidget.js +8 -10
  25. package/lib/core/components/SxpPageRender/LikeButton/index.js +15 -17
  26. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
  27. package/lib/core/components/SxpPageRender/PictureGroup/index.js +12 -40
  28. package/lib/core/components/SxpPageRender/VideoWidget/index.js +44 -33
  29. package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
  30. package/lib/core/components/SxpPageRender/index.js +37 -53
  31. package/lib/core/context/SxpDataSourceProvider.js +3 -18
  32. package/lib/core/hooks/useEventReport.js +5 -6
  33. package/lib/materials/sxp/popup/CommodityDetail/index.js +7 -1
  34. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
  35. package/package.json +1 -1
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,11 +12,6 @@ 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;
20
15
  }
21
16
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
22
17
  export default _default;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -4,52 +4,24 @@ 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");
8
7
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
9
8
  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 = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
12
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
13
13
  var _a, _b;
14
14
  const { isActive } = (0, react_2.useSwiperSlide)();
15
- const { sxpParameter, openHashtag, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
15
+ const { sxpParameter, openHashtag } = (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 imgsSwiperRef = (0, react_1.useRef)();
19
+ const swiperRef = (0, react_1.useRef)();
20
20
  const isFirstPlayRef = (0, react_1.useRef)(true);
21
- const loopPlayRef = (0, react_1.useRef)(true);
22
21
  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
- let timerId;
32
- if (isLoad && isActive && isDiyH5) {
33
- timerId = setTimeout(() => {
34
- var _a, _b, _c, _d;
35
- if (!loopPlayRef.current)
36
- return;
37
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
38
- }
39
- else {
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);
42
- }
43
- }, 3000);
44
- }
45
- return () => {
46
- if (timerId)
47
- clearTimeout(timerId);
48
- };
49
- }, [isLoad, isActive, isDiyH5, index, swiperRef]);
50
22
  (0, react_1.useEffect)(() => {
51
23
  if (isLoad && isActive) {
52
- (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
24
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
53
25
  if (openHashtag) {
54
26
  onViewImageEndEvent(rec);
55
27
  }
@@ -59,7 +31,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
59
31
  }
60
32
  }
61
33
  else {
62
- (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
34
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
63
35
  }
64
36
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
65
37
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -83,13 +55,13 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
83
55
  };
84
56
  }, [isActive, imgInfo]);
85
57
  const handleMouseEnter = (0, react_1.useCallback)(() => {
86
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
87
- imgsSwiperRef.current.swiper.autoplay.stop();
58
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
+ swiperRef.current.swiper.autoplay.stop();
88
60
  }
89
61
  }, []);
90
62
  const handleMouseLeave = (0, react_1.useCallback)(() => {
91
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
92
- imgsSwiperRef.current.swiper.autoplay.start();
63
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
+ swiperRef.current.swiper.autoplay.start();
93
65
  }
94
66
  }, []);
95
67
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -110,7 +82,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
110
82
  enabled: true
111
83
  }
112
84
  }
113
- : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
85
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
114
86
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
115
87
  fontSize: '14px'
116
88
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -127,5 +99,5 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
127
99
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
128
100
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
129
101
  }))));
130
- });
102
+ };
131
103
  exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -78,25 +78,6 @@ 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;
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
- }
91
- else {
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);
94
- }
95
- }
96
- else {
97
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
98
- }
99
- };
100
81
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
101
82
  const handlePlaying = (0, react_1.useCallback)(() => {
102
83
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -105,7 +86,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
105
86
  setIsLoadFinish(true);
106
87
  }, []);
107
88
  const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
108
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
89
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
109
90
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
110
91
  return;
111
92
  setIsPauseVideo(false);
@@ -116,11 +97,16 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
116
97
  const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
117
98
  const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
118
99
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
119
- eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', sceneId: (_o = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.scene) === null || _m === void 0 ? void 0 : _m.sceneId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
100
+ eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
120
101
  });
121
102
  isFirstPlayRef.current = false;
122
103
  }
123
104
  }), [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
+ }, []);
124
110
  const handLoadeddata = (0, react_1.useCallback)(() => {
125
111
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
126
112
  return;
@@ -145,12 +131,13 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
145
131
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
146
132
  if (!videoRef.current)
147
133
  return;
134
+ setCurrentTimeByStartTime();
148
135
  loadedTimeRef.current = new Date();
149
136
  handleStartPlay();
150
137
  handLoadeddata();
151
138
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
152
139
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
153
- var _a, _b, _c, _d, _e;
140
+ var _a, _b, _c, _d, _e, _f;
154
141
  if (!videoRef.current)
155
142
  return;
156
143
  if (!isLoadFinish)
@@ -171,17 +158,20 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
171
158
  break;
172
159
  default:
173
160
  if (isPause) {
174
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
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
165
  }
176
166
  else {
177
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
167
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
178
168
  }
179
169
  setIsPauseVideo(!isPause);
180
170
  break;
181
171
  }
182
172
  }, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
183
173
  const handlePause = (0, react_1.useCallback)(() => {
184
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
174
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
185
175
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
186
176
  return;
187
177
  if (activeIndex !== index)
@@ -197,15 +187,14 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
197
187
  eventSubject: 'playOverVideo',
198
188
  eventDescription: 'User finished playing the video',
199
189
  contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
200
- sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
201
- contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
190
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
202
191
  endTime: videoCurrentTime,
203
192
  videoDuration,
204
193
  playDuration,
205
- contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
194
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
206
195
  position: index + '',
207
196
  contentFormat: 'video',
208
- traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
197
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
209
198
  }
210
199
  });
211
200
  }
@@ -213,8 +202,27 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
213
202
  const handleWaiting = (0, react_1.useCallback)(() => {
214
203
  setWaiting(true);
215
204
  }, []);
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
+ };
216
224
  (0, react_1.useEffect)(() => {
217
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
225
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
218
226
  if (!isActive)
219
227
  return;
220
228
  const videoSrc = videoUrl;
@@ -235,6 +243,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
235
243
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
236
244
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
237
245
  var _a;
246
+ setCurrentTimeByStartTime();
238
247
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
239
248
  });
240
249
  }
@@ -248,11 +257,12 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
248
257
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
249
258
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
250
259
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
251
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
260
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
252
261
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
253
262
  (_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);
254
264
  return () => {
255
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
265
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
256
266
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
257
267
  if (!isPause)
258
268
  handlePause();
@@ -264,9 +274,10 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
264
274
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
265
275
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
266
276
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
267
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
277
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
268
278
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
269
279
  (_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);
270
281
  };
271
282
  }, [isActive]);
272
283
  (0, react_1.useEffect)(() => {
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -44,7 +44,7 @@ const WaterFall = (props) => {
44
44
  }
45
45
  }, [waterFallData]);
46
46
  const reportTagsView = (0, react_1.useCallback)(() => {
47
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
47
+ var _a, _b, _c, _d, _e, _f;
48
48
  const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
49
49
  if (!rec)
50
50
  return;
@@ -64,10 +64,9 @@ const WaterFall = (props) => {
64
64
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
65
65
  eventInfo: {
66
66
  contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
67
- sceneId: (_g = (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
68
67
  position: cacheActiveIndex + '',
69
- contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
70
- traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
68
+ contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
69
+ traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
71
70
  hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
72
71
  fromKName,
73
72
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -45,7 +45,6 @@ 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);
49
48
  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)();
50
49
  const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
51
50
  const isShowFingerTip = (0, react_1.useMemo)(() => {
@@ -93,7 +92,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
93
92
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
94
93
  }, [data, ctaType, swiperRef]);
95
94
  const handleSessionCompleted = (0, react_1.useCallback)((fk) => {
96
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
95
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
97
96
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
98
97
  let fromKName = '';
99
98
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
@@ -120,13 +119,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
120
119
  eventSubject: 'sessionCompleted',
121
120
  eventDescription: 'Session completed',
122
121
  contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
123
- sceneId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.scene) === null || _p === void 0 ? void 0 : _p.sceneId) !== null && _q !== void 0 ? _q : '',
124
- productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
122
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
125
123
  position: activeIndex + '',
126
124
  fromKName: fk || fromKName,
127
125
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- ctatId: (_u = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '',
129
- traceInfo: (_y = (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : ''
126
+ ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
127
+ traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
130
128
  }
131
129
  });
132
130
  }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
@@ -182,9 +180,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
182
180
  refreshFeSession
183
181
  ]);
184
182
  const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
185
- var _a, _b;
183
+ var _a;
186
184
  (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
187
- (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
188
185
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
189
186
  }, 1000), [handleSessionCompleted, refreshFeSession]);
190
187
  (0, react_1.useEffect)(() => {
@@ -254,18 +251,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
254
251
  return null;
255
252
  }, [globalConfig, activeIndex, visList]);
256
253
  const renderContent = (0, react_1.useCallback)((rec, index) => {
257
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
254
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
258
255
  if (rec === 'organic menu') {
259
256
  return (react_1.default.createElement(MultiPosts_1.default, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
260
257
  }
261
- if (((_h = (_g = rec.video) === null || _g === void 0 ? void 0 : _g.scene) === null || _h === void 0 ? void 0 : _h.mediaUrl) || ((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.url)) {
258
+ if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
262
259
  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 })));
263
260
  }
264
- if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
265
- 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 })));
261
+ 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 }));
266
263
  }
267
- if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _l === void 0 ? void 0 : _l.length) > 0) {
268
- return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
264
+ 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
+ return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
269
266
  var _a, _b, _c, _d, _e, _f, _g, _h;
270
267
  const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
271
268
  const Component = (0, withBindDataSource_1.default)(t);
@@ -303,7 +300,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
303
300
  };
304
301
  }, [isShowMore]);
305
302
  const renderBottom = (0, react_1.useCallback)((rec, index) => {
306
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
303
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
307
304
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
308
305
  let cta = null;
309
306
  if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
@@ -312,27 +309,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
312
309
  else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
313
310
  cta = '商品CTA';
314
311
  }
315
- else if (tempMap && ((_d = Object.keys(tempMap)) === null || _d === void 0 ? void 0 : _d.includes('服务CTA')) && ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId)) {
316
- cta = '服务CTA';
317
- }
318
312
  else {
319
- cta = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.itemId;
313
+ cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
320
314
  }
321
315
  const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
322
316
  const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
323
317
  index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
324
- ((_j = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _j === void 0 ? void 0 : _j.includes((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type));
318
+ ((_f = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _f === void 0 ? void 0 : _f.includes((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type));
325
319
  return (react_1.default.createElement(react_1.default.Fragment, null,
326
320
  isNineProduct && (react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
327
- ((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
328
- react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _m !== void 0 ? _m : 40}px` } },
321
+ ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
322
+ react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _j !== void 0 ? _j : 40}px` } },
329
323
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
330
324
  ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
331
325
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
332
326
  react_1.default.createElement("div", null,
333
- react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
327
+ react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
334
328
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
335
- react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.hashTags) !== null && _r !== void 0 ? _r : [], itemId: (_s = rec === null || rec === void 0 ? void 0 : rec.video) === null || _s === void 0 ? void 0 : _s.itemId, itemType: ((_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
329
+ react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.hashTags) !== null && _o !== void 0 ? _o : [], itemId: (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.itemId, itemType: ((_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
336
330
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
337
331
  }
338
332
  return null;
@@ -371,7 +365,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
371
365
  return null;
372
366
  }, [globalConfig, waterFallData]);
373
367
  const handleViewImageStartEnd = (item) => {
374
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
368
+ var _a, _b, _c, _d, _e, _f;
375
369
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
376
370
  const endTime = Date.now();
377
371
  const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
@@ -380,11 +374,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
380
374
  eventSubject: 'viewImageCarouselEnd',
381
375
  eventDescription: 'User end view the image carousel',
382
376
  contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
383
- sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
384
- contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
377
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
385
378
  imageEndTime: `${endTime}`,
386
379
  playDuration: `${duration}`,
387
- contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
380
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
388
381
  position: activeIndex + '',
389
382
  contentFormat: 'image',
390
383
  traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
@@ -393,7 +386,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
393
386
  }
394
387
  };
395
388
  const handleSlideSkip = (item, position) => {
396
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
389
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
397
390
  if (isPreview || waterFallData)
398
391
  return;
399
392
  const t = new Date() - curTime.current;
@@ -419,8 +412,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
419
412
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
420
413
  position: position + '',
421
414
  contentId: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.itemId) !== null && _t !== void 0 ? _t : '',
422
- sceneId: (_w = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.scene) === null || _v === void 0 ? void 0 : _v.sceneId) !== null && _w !== void 0 ? _w : '',
423
- traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
415
+ traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
424
416
  contentFormat
425
417
  }
426
418
  });
@@ -430,7 +422,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
430
422
  }
431
423
  };
432
424
  const handleScrollEvent = (swiper) => {
433
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
425
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
434
426
  const item = data[swiper.previousIndex];
435
427
  if (!item)
436
428
  return;
@@ -447,12 +439,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
447
439
  eventSubject: 'scrollDown',
448
440
  eventDescription: 'User scroll down',
449
441
  contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
450
- sceneId: (_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.video) === null || _f === void 0 ? void 0 : _f.scene) === null || _g === void 0 ? void 0 : _g.sceneId) !== null && _h !== void 0 ? _h : '',
451
- productId: (_k = (_j = item === null || item === void 0 ? void 0 : item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
442
+ productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
452
443
  requestId: null,
453
- traceInfo: (_p = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
444
+ traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
454
445
  contentFormat,
455
- position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
446
+ position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
456
447
  }
457
448
  });
458
449
  handleViewImageStartEnd(item);
@@ -463,13 +454,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
463
454
  eventInfo: {
464
455
  eventSubject: 'scrollUp',
465
456
  eventDescription: 'User scroll up',
466
- contentId: (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
467
- sceneId: (_v = (_u = (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.scene) === null || _u === void 0 ? void 0 : _u.sceneId) !== null && _v !== void 0 ? _v : '',
468
- productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
457
+ contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
458
+ productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
469
459
  requestId: null,
470
- traceInfo: (_1 = (_z = (_y = item === null || item === void 0 ? void 0 : item.video) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_0 = item === null || item === void 0 ? void 0 : item.product) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : '',
460
+ traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
471
461
  contentFormat,
472
- position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
462
+ position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
473
463
  }
474
464
  });
475
465
  handleViewImageStartEnd(item);
@@ -493,7 +483,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
493
483
  }
494
484
  }, [openHashtag, data, activeIndex]);
495
485
  const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
496
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
486
+ var _a, _b, _c, _d, _e, _f, _g, _h;
497
487
  const item = data[activeIndex];
498
488
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
499
489
  const startTime = Date.now();
@@ -503,10 +493,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
503
493
  eventSubject: 'viewImageCarouselStart',
504
494
  eventDescription: 'User start view the image carousel',
505
495
  contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
506
- sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
507
- contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
496
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
508
497
  imageStartTime: `${startTime}`,
509
- contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
498
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
510
499
  position: activeIndex + '',
511
500
  contentFormat: 'image',
512
501
  traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
@@ -516,11 +505,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
516
505
  if (enableCapi) {
517
506
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
518
507
  eventName: 'ViewContent',
519
- product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
508
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
520
509
  });
521
510
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
522
511
  eventName: 'PageView',
523
- product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
512
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
524
513
  });
525
514
  }
526
515
  }
@@ -612,19 +601,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
612
601
  swiperRef.current.swiper.allowTouchMove = true;
613
602
  }, 500);
614
603
  }, onActiveIndexChange: (swiper) => {
615
- var _a, _b;
616
604
  setActiveIndex(swiper.activeIndex);
617
605
  if (openHashtag)
618
606
  return;
619
607
  handleScrollEvent(swiper);
620
- if (waterFallData || isEditor)
608
+ if (waterFallData || isEditor || isDiyH5)
621
609
  return;
622
610
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
623
611
  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
- }
628
612
  setIsLoadMore(true);
629
613
  loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
630
614
  var _a;