pb-sxp-ui 1.16.10 → 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 +140 -164
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +140 -164
  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 +140 -164
  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 -42
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +44 -34
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
  19. package/es/core/components/SxpPageRender/index.js +36 -47
  20. package/es/core/context/SxpDataSourceProvider.js +2 -2
  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 -41
  28. package/lib/core/components/SxpPageRender/VideoWidget/index.js +44 -34
  29. package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
  30. package/lib/core/components/SxpPageRender/index.js +36 -47
  31. package/lib/core/context/SxpDataSourceProvider.js +2 -2
  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.js CHANGED
@@ -4,53 +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, _e, _f;
35
- if (!loopPlayRef.current)
36
- return;
37
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
38
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
39
- }
40
- else {
41
- const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
42
- (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
43
- }
44
- }, 3000);
45
- }
46
- return () => {
47
- if (timerId)
48
- clearTimeout(timerId);
49
- };
50
- }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
51
22
  (0, react_1.useEffect)(() => {
52
23
  if (isLoad && isActive) {
53
- (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();
54
25
  if (openHashtag) {
55
26
  onViewImageEndEvent(rec);
56
27
  }
@@ -60,7 +31,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
60
31
  }
61
32
  }
62
33
  else {
63
- (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();
64
35
  }
65
36
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
66
37
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -84,13 +55,13 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
84
55
  };
85
56
  }, [isActive, imgInfo]);
86
57
  const handleMouseEnter = (0, react_1.useCallback)(() => {
87
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
88
- imgsSwiperRef.current.swiper.autoplay.stop();
58
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
+ swiperRef.current.swiper.autoplay.stop();
89
60
  }
90
61
  }, []);
91
62
  const handleMouseLeave = (0, react_1.useCallback)(() => {
92
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
93
- imgsSwiperRef.current.swiper.autoplay.start();
63
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
+ swiperRef.current.swiper.autoplay.start();
94
65
  }
95
66
  }, []);
96
67
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -111,7 +82,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
111
82
  enabled: true
112
83
  }
113
84
  }
114
- : {}), { 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': {
115
86
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
116
87
  fontSize: '14px'
117
88
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -128,5 +99,5 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
128
99
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
129
100
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
130
101
  }))));
131
- });
102
+ };
132
103
  exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -78,26 +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, _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
- };
101
81
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
102
82
  const handlePlaying = (0, react_1.useCallback)(() => {
103
83
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -106,7 +86,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
106
86
  setIsLoadFinish(true);
107
87
  }, []);
108
88
  const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
109
- 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;
110
90
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
111
91
  return;
112
92
  setIsPauseVideo(false);
@@ -117,11 +97,16 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
117
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);
118
98
  const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
119
99
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
120
- 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) + '' }))
121
101
  });
122
102
  isFirstPlayRef.current = false;
123
103
  }
124
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
+ }, []);
125
110
  const handLoadeddata = (0, react_1.useCallback)(() => {
126
111
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
127
112
  return;
@@ -146,12 +131,13 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
146
131
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
147
132
  if (!videoRef.current)
148
133
  return;
134
+ setCurrentTimeByStartTime();
149
135
  loadedTimeRef.current = new Date();
150
136
  handleStartPlay();
151
137
  handLoadeddata();
152
138
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
153
139
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
154
- var _a, _b, _c, _d, _e;
140
+ var _a, _b, _c, _d, _e, _f;
155
141
  if (!videoRef.current)
156
142
  return;
157
143
  if (!isLoadFinish)
@@ -172,17 +158,20 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
172
158
  break;
173
159
  default:
174
160
  if (isPause) {
175
- (_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();
176
165
  }
177
166
  else {
178
- (_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();
179
168
  }
180
169
  setIsPauseVideo(!isPause);
181
170
  break;
182
171
  }
183
172
  }, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
184
173
  const handlePause = (0, react_1.useCallback)(() => {
185
- 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;
186
175
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
187
176
  return;
188
177
  if (activeIndex !== index)
@@ -198,15 +187,14 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
198
187
  eventSubject: 'playOverVideo',
199
188
  eventDescription: 'User finished playing the video',
200
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 : '',
201
- 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 : '',
202
- 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 : '',
203
191
  endTime: videoCurrentTime,
204
192
  videoDuration,
205
193
  playDuration,
206
- 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 : []),
207
195
  position: index + '',
208
196
  contentFormat: 'video',
209
- 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
210
198
  }
211
199
  });
212
200
  }
@@ -214,8 +202,27 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
214
202
  const handleWaiting = (0, react_1.useCallback)(() => {
215
203
  setWaiting(true);
216
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
+ };
217
224
  (0, react_1.useEffect)(() => {
218
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
225
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
219
226
  if (!isActive)
220
227
  return;
221
228
  const videoSrc = videoUrl;
@@ -236,6 +243,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
236
243
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
237
244
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
238
245
  var _a;
246
+ setCurrentTimeByStartTime();
239
247
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
240
248
  });
241
249
  }
@@ -249,11 +257,12 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
249
257
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
250
258
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
251
259
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
252
- (_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);
253
261
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
254
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);
255
264
  return () => {
256
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
265
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
257
266
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
258
267
  if (!isPause)
259
268
  handlePause();
@@ -265,9 +274,10 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
265
274
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
266
275
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
267
276
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
268
- (_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);
269
278
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
270
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);
271
281
  };
272
282
  }, [isActive]);
273
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
  }
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -451,7 +451,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
451
451
  }
452
452
  }), [bffFetch, utmVal]);
453
453
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
454
- 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, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
454
+ 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, _3, _4, _5, _6, _7, _8, _9, _10, _11;
455
455
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
456
456
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
457
457
  let fromKName = '';
@@ -469,7 +469,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
469
469
  }
470
470
  const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
471
471
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
472
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
472
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
473
473
  });
474
474
  }, [bffEventReport, isFromHashtag]);
475
475
  const h5EnterLink = (0, react_1.useCallback)(() => {