pb-sxp-ui 1.17.1 → 1.18.1

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