pb-sxp-ui 1.16.15 → 1.16.17

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 (33) hide show
  1. package/dist/index.cjs +235 -162
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +235 -162
  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 +235 -162
  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 +10 -8
  14. package/es/core/components/SxpPageRender/LikeButton/index.js +17 -15
  15. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +39 -13
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +32 -45
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
  19. package/es/core/components/SxpPageRender/index.js +53 -37
  20. package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
  21. package/es/core/context/SxpDataSourceProvider.js +70 -33
  22. package/es/core/hooks/useEventReport.js +6 -5
  23. package/lib/core/components/DiyPortalPreview/VideoWidget.js +10 -8
  24. package/lib/core/components/SxpPageRender/LikeButton/index.js +17 -15
  25. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  26. package/lib/core/components/SxpPageRender/PictureGroup/index.js +38 -12
  27. package/lib/core/components/SxpPageRender/VideoWidget/index.js +32 -45
  28. package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
  29. package/lib/core/components/SxpPageRender/index.js +53 -37
  30. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
  31. package/lib/core/context/SxpDataSourceProvider.js +70 -33
  32. package/lib/core/hooks/useEventReport.js +6 -5
  33. package/package.json +1 -1
package/lib/core/components/DiyPortalPreview/VideoWidget.js CHANGED
@@ -25,7 +25,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
25
25
  }, []);
26
26
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
27
27
  const handlePlaying = (0, react_1.useCallback)(() => {
28
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
28
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
29
29
  setIsPauseVideo(false);
30
30
  const item = data[index];
31
31
  if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
@@ -38,14 +38,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
38
38
  eventSubject: 'playVideo',
39
39
  eventDescription: 'User played the video',
40
40
  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 : '',
41
- 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 : '',
41
+ 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 : '',
42
+ 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 : '',
42
43
  playType,
43
44
  startTime: videoCurrentTime,
44
45
  videoDuration,
45
- 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 : []),
46
+ 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 : []),
46
47
  position: index + '',
47
48
  contentFormat: 'video',
48
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
49
+ traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
49
50
  }
50
51
  });
51
52
  setIsFirstPlay(false);
@@ -84,7 +85,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
84
85
  }
85
86
  }, [isLoadFinish]);
86
87
  const onPause = (0, react_1.useCallback)(() => {
87
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
88
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
88
89
  const item = data[index];
89
90
  const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
91
  const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
@@ -95,14 +96,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
95
96
  eventSubject: 'playOverVideo',
96
97
  eventDescription: 'User finished playing the video',
97
98
  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 : '',
98
- 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 : '',
99
+ 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 : '',
100
+ 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 : '',
99
101
  endTime: videoCurrentTime,
100
102
  videoDuration,
101
103
  playDuration,
102
- 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 : []),
104
+ 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 : []),
103
105
  position: index + '',
104
106
  contentFormat: 'video',
105
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
107
+ traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
106
108
  }
107
109
  });
108
110
  }
package/lib/core/components/SxpPageRender/LikeButton/index.js CHANGED
@@ -15,7 +15,7 @@ const LikeButton = (_a) => {
15
15
  const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
16
16
  const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
17
17
  const handleClick = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
18
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
18
+ var _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;
19
19
  if (state) {
20
20
  setState(false);
21
21
  const result = (_e = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '' })))) !== null && _e !== void 0 ? _e : false;
@@ -24,51 +24,53 @@ const LikeButton = (_a) => {
24
24
  eventSubject: 'favoriteContentCanceled',
25
25
  eventDescription: 'This content was unfavorite by the user',
26
26
  contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
27
- contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
28
- contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
27
+ sceneId: (_k = (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.scene) === null || _j === void 0 ? void 0 : _j.sceneId) !== null && _k !== void 0 ? _k : '',
28
+ contentName: (_m = (_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '',
29
+ contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
29
30
  position: position + '',
30
- contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
31
- traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
31
+ contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
32
+ traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
32
33
  }
33
34
  });
34
35
  if (!result) {
35
36
  setState(true);
36
37
  }
37
38
  else {
38
- const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
39
+ const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
39
40
  if (index === position) {
40
41
  item.isCollected = false;
41
42
  }
42
43
  return item;
43
- })) !== null && _p !== void 0 ? _p : [];
44
+ })) !== null && _s !== void 0 ? _s : [];
44
45
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
45
46
  }
46
47
  }
47
48
  else {
48
49
  setState(true);
49
- const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
50
+ const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
50
51
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
51
52
  eventInfo: {
52
53
  eventSubject: 'favoriteContent',
53
54
  eventDescription: 'This content was favorite by the user',
54
- contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
55
- contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
56
- contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
55
+ contentId: (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
56
+ sceneId: (_y = (_x = (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.scene) === null || _x === void 0 ? void 0 : _x.sceneId) !== null && _y !== void 0 ? _y : '',
57
+ contentName: (_0 = (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.title) !== null && _0 !== void 0 ? _0 : '',
58
+ contentTags: JSON.stringify((_2 = (_1 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _1 === void 0 ? void 0 : _1.tags) !== null && _2 !== void 0 ? _2 : []),
57
59
  position: position + '',
58
- contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
59
- traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
60
+ contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
61
+ traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
60
62
  }
61
63
  });
62
64
  if (!result) {
63
65
  setState(false);
64
66
  }
65
67
  else {
66
- const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
68
+ const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
67
69
  if (index === position) {
68
70
  item.isCollected = true;
69
71
  }
70
72
  return item;
71
- })) !== null && _z !== void 0 ? _z : [];
73
+ })) !== null && _5 !== void 0 ? _5 : [];
72
74
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
73
75
  }
74
76
  }
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,6 +12,11 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
+ data: RecItemType[];
16
+ swiperRef?: any;
17
+ }
18
+ export interface IPictureGroupRef {
19
+ setLoopPlay: (v: boolean) => void;
15
20
  }
16
21
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
17
22
  export default _default;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -4,24 +4,50 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
+ const css_1 = require("@emotion/css");
7
8
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
9
  const hooks_1 = require("../../../../core/hooks");
9
- const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
+ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
13
13
  var _a, _b;
14
14
  const { isActive } = (0, react_2.useSwiperSlide)();
15
- const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
15
+ const { firstRtcList, openHashtag, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
16
16
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
17
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
18
  const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
- const swiperRef = (0, react_1.useRef)();
19
+ const imgsSwiperRef = (0, react_1.useRef)();
20
20
  const isFirstPlayRef = (0, react_1.useRef)(true);
21
+ const loopPlayRef = (0, react_1.useRef)(true);
21
22
  const initTime = new Date();
23
+ (0, react_1.useImperativeHandle)(ref, () => {
24
+ return {
25
+ setLoopPlay(v) {
26
+ loopPlayRef.current = v;
27
+ }
28
+ };
29
+ });
30
+ (0, react_1.useEffect)(() => {
31
+ let timerId;
32
+ if (isLoad && isActive && isDiyH5) {
33
+ timerId = setTimeout(() => {
34
+ var _a, _b, _c, _d;
35
+ if (!loopPlayRef.current)
36
+ return;
37
+ if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
38
+ const i = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
39
+ (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(i + 1);
40
+ }
41
+ }, 3000);
42
+ }
43
+ return () => {
44
+ if (timerId)
45
+ clearTimeout(timerId);
46
+ };
47
+ }, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
22
48
  (0, react_1.useEffect)(() => {
23
49
  if (isLoad && isActive) {
24
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
50
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
25
51
  if (openHashtag) {
26
52
  onViewImageEndEvent(rec);
27
53
  }
@@ -31,7 +57,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
31
57
  }
32
58
  }
33
59
  else {
34
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
60
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
35
61
  }
36
62
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
37
63
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -55,13 +81,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
55
81
  };
56
82
  }, [isActive, imgInfo]);
57
83
  const handleMouseEnter = (0, react_1.useCallback)(() => {
58
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
- swiperRef.current.swiper.autoplay.stop();
84
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
85
+ imgsSwiperRef.current.swiper.autoplay.stop();
60
86
  }
61
87
  }, []);
62
88
  const handleMouseLeave = (0, react_1.useCallback)(() => {
63
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
- swiperRef.current.swiper.autoplay.start();
89
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
90
+ imgsSwiperRef.current.swiper.autoplay.start();
65
91
  }
66
92
  }, []);
67
93
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -82,7 +108,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
82
108
  enabled: true
83
109
  }
84
110
  }
85
- : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
111
+ : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
86
112
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
87
113
  fontSize: '14px'
88
114
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -99,5 +125,5 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
99
125
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
100
126
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
101
127
  }))));
102
- };
128
+ });
103
129
  exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -12,7 +12,7 @@ const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
12
12
  const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
13
13
  var _a, _b;
14
14
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
15
- const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
15
+ const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
16
16
  const videoStartTime = (0, react_1.useRef)(0);
17
17
  const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
18
18
  const { isActive } = (0, react_2.useSwiperSlide)();
@@ -78,6 +78,23 @@ 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 (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
90
+ const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
91
+ (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(i + 1);
92
+ }
93
+ }
94
+ else {
95
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
96
+ }
97
+ };
81
98
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
82
99
  const handlePlaying = (0, react_1.useCallback)(() => {
83
100
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -86,7 +103,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
86
103
  setIsLoadFinish(true);
87
104
  }, []);
88
105
  const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
89
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
106
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
90
107
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
91
108
  return;
92
109
  setIsPauseVideo(false);
@@ -97,16 +114,11 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
97
114
  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);
98
115
  const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
99
116
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
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) + '' }))
117
+ 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) + '' }))
101
118
  });
102
119
  isFirstPlayRef.current = false;
103
120
  }
104
121
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
105
- const setCurrentTimeByStartTime = (0, react_1.useCallback)(() => {
106
- if (isDiyH5) {
107
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
108
- }
109
- }, []);
110
122
  const handLoadeddata = (0, react_1.useCallback)(() => {
111
123
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
112
124
  return;
@@ -131,13 +143,12 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
131
143
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
132
144
  if (!videoRef.current)
133
145
  return;
134
- setCurrentTimeByStartTime();
135
146
  loadedTimeRef.current = new Date();
136
147
  handleStartPlay();
137
148
  handLoadeddata();
138
149
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
139
150
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
140
- var _a, _b, _c, _d, _e, _f;
151
+ var _a, _b, _c, _d, _e;
141
152
  if (!videoRef.current)
142
153
  return;
143
154
  if (!isLoadFinish)
@@ -158,20 +169,17 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
158
169
  break;
159
170
  default:
160
171
  if (isPause) {
161
- if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
162
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
163
- }
164
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
172
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
165
173
  }
166
174
  else {
167
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
175
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
168
176
  }
169
177
  setIsPauseVideo(!isPause);
170
178
  break;
171
179
  }
172
180
  }, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
173
181
  const handlePause = (0, react_1.useCallback)(() => {
174
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
182
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
175
183
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
176
184
  return;
177
185
  if (activeIndex !== index)
@@ -187,14 +195,15 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
187
195
  eventSubject: 'playOverVideo',
188
196
  eventDescription: 'User finished playing the video',
189
197
  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 : '',
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 : '',
198
+ 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 : '',
199
+ 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 : '',
191
200
  endTime: videoCurrentTime,
192
201
  videoDuration,
193
202
  playDuration,
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 : []),
203
+ 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 : []),
195
204
  position: index + '',
196
205
  contentFormat: 'video',
197
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
206
+ traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
198
207
  }
199
208
  });
200
209
  }
@@ -202,27 +211,8 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
202
211
  const handleWaiting = (0, react_1.useCallback)(() => {
203
212
  setWaiting(true);
204
213
  }, []);
205
- const handleTimeUpload = () => {
206
- if (!videoRef.current || !isDiyH5)
207
- return;
208
- setTimeout(() => {
209
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
210
- if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
211
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
212
- if (!loopPlayRef.current)
213
- return;
214
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
215
- (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
216
- }
217
- else {
218
- const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
219
- (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
220
- }
221
- }
222
- });
223
- };
224
214
  (0, react_1.useEffect)(() => {
225
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
215
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
226
216
  if (!isActive)
227
217
  return;
228
218
  const videoSrc = videoUrl;
@@ -243,7 +233,6 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
243
233
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
244
234
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
245
235
  var _a;
246
- setCurrentTimeByStartTime();
247
236
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
248
237
  });
249
238
  }
@@ -257,12 +246,11 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
257
246
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
258
247
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
259
248
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
260
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
249
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
261
250
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
262
251
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
263
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
264
252
  return () => {
265
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
253
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
266
254
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
267
255
  if (!isPause)
268
256
  handlePause();
@@ -274,10 +262,9 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
274
262
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
275
263
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
276
264
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
277
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
265
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
278
266
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
279
267
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
280
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
281
268
  };
282
269
  }, [isActive]);
283
270
  (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;
47
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
48
48
  const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
49
49
  if (!rec)
50
50
  return;
@@ -64,9 +64,10 @@ 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 : '',
67
68
  position: cacheActiveIndex + '',
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,
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,
70
71
  hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
71
72
  fromKName,
72
73
  fromKPage: location === null || location === void 0 ? void 0 : location.href,