pb-sxp-ui 1.16.13 → 1.16.15

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