pb-sxp-ui 1.0.41 → 1.0.43

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 (48) hide show
  1. package/dist/index.cjs +218 -497
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -6
  4. package/dist/index.js +218 -496
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -4
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -4
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +222 -500
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -4
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  16. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  17. package/es/core/components/SxpPageRender/index.js +58 -11
  18. package/es/core/context/SxpDataSourceProvider.d.ts +2 -0
  19. package/es/core/context/SxpDataSourceProvider.js +5 -2
  20. package/es/core/hooks/useEventReport.js +4 -4
  21. package/es/index.d.ts +0 -1
  22. package/es/index.js +0 -1
  23. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -6
  24. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  25. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  26. package/lib/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  27. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  28. package/lib/core/components/SxpPageRender/index.js +58 -11
  29. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -0
  30. package/lib/core/context/SxpDataSourceProvider.js +5 -2
  31. package/lib/core/hooks/useEventReport.js +4 -4
  32. package/lib/index.d.ts +0 -1
  33. package/lib/index.js +1 -3
  34. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -6
  35. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  36. package/package.json +1 -2
  37. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  38. package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
  39. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  40. package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
  41. package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
  42. package/es/core/components/DiyPortalPreview/index.js +0 -112
  43. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  44. package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
  45. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  46. package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
  47. package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
  48. package/lib/core/components/DiyPortalPreview/index.js +0 -115
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -10,7 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
10
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetailDiroNew = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
14
14
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const [spread, setSpread] = useState(true);
16
16
  const { sxpParameter } = useSxpDataSource();
@@ -58,7 +58,7 @@ const CommodityDetailDiroNew = (_a) => {
58
58
  return '£102,300.00';
59
59
  }
60
60
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
61
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
61
+ const width = isPreview ? 375 : window.innerWidth;
62
62
  const handleClickCollapse = () => {
63
63
  setSpread(!spread);
64
64
  };
@@ -89,7 +89,7 @@ Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
91
91
  React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
92
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
92
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
93
93
  clickable: true,
94
94
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
95
95
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -97,7 +97,7 @@ Made in Italy` })));
97
97
  : 'commondityDiroNew-swiper-clickable-center'
98
98
  }, loop: true, autoplay: {
99
99
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
100
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
100
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
101
101
  return (React.createElement(SwiperSlide, { key: src },
102
102
  React.createElement("div", { style: {
103
103
  overflow: 'hidden',
@@ -106,7 +106,7 @@ Made in Italy` })));
106
106
  } },
107
107
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
108
108
  }))),
109
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
109
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
110
110
  position: 'relative',
111
111
  height: 0,
112
112
  width: '100%',
@@ -119,16 +119,16 @@ Made in Italy` })));
119
119
  top: 0,
120
120
  objectFit: 'cover',
121
121
  width: '100%'
122
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
122
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
123
123
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
124
124
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
125
125
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
126
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
126
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
127
127
  React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
128
128
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
129
129
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
130
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
131
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
130
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
131
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
132
132
  productInfoText({ isPost }))),
133
133
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
134
134
  };
package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
+ videoRef?: any;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
14
15
  export default _default;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,9 +7,8 @@ const useIconLink_1 = require("../useIconLink");
7
7
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
10
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
11
11
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
12
- const videoRef = (0, react_1.useRef)(null);
13
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
14
13
  const videoStartTime = (0, react_1.useRef)(0);
15
14
  const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
@@ -17,99 +16,118 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
17
16
  const { isActive } = (0, react_2.useSwiperSlide)();
18
17
  const canvasRef = (0, react_1.useRef)(null);
19
18
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
+ const videoId = `pb-cache-video-${index}`;
20
+ const videoEleRef = (0, react_1.useRef)(null);
20
21
  (0, react_1.useEffect)(() => {
21
- if (!videoRef.current)
22
+ if (!videoRef)
22
23
  return;
23
- videoRef.current.muted = muted;
24
- }, [muted]);
25
- const handleVideoStart = (0, react_1.useCallback)(() => {
26
- var _a;
27
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
28
- }, []);
24
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
25
+ }, [muted, videoRef]);
26
+ const handleEnded = (0, react_1.useCallback)(() => {
27
+ if (!videoRef)
28
+ return;
29
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
30
+ }, [videoRef]);
29
31
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
30
32
  const handlePlaying = (0, react_1.useCallback)(() => {
31
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
33
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
34
+ if (!videoRef)
35
+ return;
32
36
  setIsPauseVideo(false);
33
37
  const item = data[index];
34
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
35
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
36
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
37
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
38
+ if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
39
+ videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
40
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
41
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
38
42
  const playType = isFirstPlay ? '0' : '1';
39
43
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
40
44
  eventInfo: {
41
45
  eventSubject: 'playVideo',
42
46
  eventDescription: 'User played the video',
43
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
44
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
47
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
48
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
45
49
  playType,
46
50
  startTime: videoCurrentTime,
47
51
  videoDuration,
48
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
52
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
49
53
  position: index + '',
50
54
  contentFormat: 'video',
51
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
55
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
52
56
  }
53
57
  });
54
58
  setIsFirstPlay(false);
55
59
  }
56
- }, [bffEventReport, data, index, isFirstPlay]);
57
- const handleLoadedMetadata = (0, react_1.useCallback)(() => {
60
+ }, [bffEventReport, data, index, isFirstPlay, videoRef]);
61
+ const handleLoadedmetadata = (0, react_1.useCallback)(() => {
62
+ if (!videoRef)
63
+ return;
64
+ if (activeIndex !== index) {
65
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
66
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
67
+ }
68
+ setIsLoadFinish(true);
69
+ }, [activeIndex, index, videoRef]);
70
+ const handleCanplay = (0, react_1.useCallback)(() => {
58
71
  setIsLoadFinish(true);
59
72
  }, []);
60
73
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
61
- var _a, _b, _c, _d, _e;
74
+ if (!videoRef)
75
+ return;
62
76
  if (!isLoadFinish)
63
77
  return;
64
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
78
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
65
79
  switch (type) {
66
80
  case 'start':
67
81
  if (!isPause)
68
82
  return;
69
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
83
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
70
84
  setIsPauseVideo(false);
71
85
  break;
72
86
  case 'pause':
73
87
  if (isPause)
74
88
  return;
75
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
89
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
76
90
  setIsPauseVideo(true);
77
91
  break;
78
92
  default:
79
93
  if (isPause) {
80
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
94
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
81
95
  }
82
96
  else {
83
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
97
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
84
98
  }
85
99
  setIsPauseVideo(!isPause);
86
100
  break;
87
101
  }
88
- }, [isLoadFinish]);
89
- const onPause = (0, react_1.useCallback)(() => {
90
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
102
+ }, [isLoadFinish, videoRef]);
103
+ const handlePause = (0, react_1.useCallback)(() => {
104
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
105
+ if (!videoRef)
106
+ return;
107
+ if (activeIndex !== index)
108
+ return;
91
109
  const item = data[index];
92
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
93
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
94
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
95
- const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
110
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
111
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
112
+ if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
113
+ const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
96
114
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
97
115
  eventInfo: {
98
116
  eventSubject: 'playOverVideo',
99
117
  eventDescription: 'User finished playing the video',
100
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
101
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
118
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
119
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
102
120
  endTime: videoCurrentTime,
103
121
  videoDuration,
104
122
  playDuration,
105
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
123
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
106
124
  position: index + '',
107
125
  contentFormat: 'video',
108
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
126
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
109
127
  }
110
128
  });
111
129
  }
112
- }, [data, index, bffEventReport]);
130
+ }, [data, index, bffEventReport, videoRef]);
113
131
  const blur = (0, react_1.useMemo)(() => {
114
132
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
115
133
  }, [videoPostConfig]);
@@ -124,64 +142,79 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
142
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
125
143
  }, [firstFrameSrc, rec]);
126
144
  const handLoadeddata = (0, react_1.useCallback)(() => {
127
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
145
+ var _a;
146
+ if (!videoRef)
128
147
  return;
129
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
130
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
131
- const ctx = canvas.getContext('2d');
132
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
133
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
134
- canvas.height = targetHeight;
135
- canvas.width = targetWidth;
136
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
137
- setFirstFrameSrc(canvas.toDataURL());
138
- }, []);
148
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
149
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
150
+ return;
151
+ const setFrameImg = () => {
152
+ const video = videoDomRef;
153
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
154
+ const ctx = canvas.getContext('2d');
155
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
156
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
157
+ canvas.height = targetHeight;
158
+ canvas.width = targetWidth;
159
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
160
+ setFirstFrameSrc(canvas.toDataURL());
161
+ };
162
+ setFrameImg();
163
+ setTimeout(() => {
164
+ setFrameImg();
165
+ }, 500);
166
+ }, [videoRef]);
139
167
  (0, react_1.useEffect)(() => {
140
- var _a, _b, _c, _d;
141
- if (!videoRef.current)
168
+ if (!isActive || !videoRef)
169
+ return;
170
+ const videoSrc = rec.video.url;
171
+ if (!videoSrc)
142
172
  return;
143
173
  setIsPauseVideo(false);
144
- if (!videoRef.current.src) {
145
- const videoSrc = rec.video.url;
146
- videoRef.current.src = videoSrc;
147
- videoRef.current.setAttribute('x5-playsinline', 'true');
148
- videoRef.current.setAttribute('webkit-playsinline', 'true');
149
- }
150
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
151
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
152
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
153
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
174
+ const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
175
+ const dom = document.querySelector('#player-container-id');
176
+ const dom2 = document.querySelector('#player-container-id-copy');
177
+ if (!dom && !dom2)
178
+ return;
179
+ videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
180
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
181
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
182
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
183
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
184
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
185
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
186
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
154
187
  return () => {
155
- var _a, _b, _c, _d;
156
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
157
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
158
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
159
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
188
+ dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
189
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
190
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
191
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
192
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
193
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
194
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
160
195
  };
161
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
196
+ }, [isActive, videoId, rec, videoRef]);
162
197
  (0, react_1.useEffect)(() => {
163
- var _a;
164
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
198
+ if (!videoRef || !isLoadFinish)
165
199
  return;
166
200
  if (isActive) {
167
- videoRef.current.play();
201
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
168
202
  }
169
203
  else {
170
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
204
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
171
205
  }
172
- }, [isActive, isLoadFinish]);
206
+ }, [isActive, isLoadFinish, videoRef]);
173
207
  (0, react_1.useEffect)(() => {
174
- var _a, _b, _c;
175
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
208
+ if (!isActive || !videoRef)
176
209
  return;
177
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
210
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
178
211
  if (!isPause && openHashtag) {
179
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
180
213
  }
181
214
  else if (!openHashtag) {
182
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
215
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
183
216
  }
184
- }, [openHashtag, isActive]);
217
+ }, [openHashtag, isActive, videoRef]);
185
218
  (0, react_1.useEffect)(() => {
186
219
  if (!isActive)
187
220
  return;
@@ -201,9 +234,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
201
234
  return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
202
235
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
203
236
  (0, react_1.useEffect)(() => {
237
+ if (!videoRef)
238
+ return;
204
239
  const handleBeforeUnload = () => {
205
- var _a, _b;
206
- if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
240
+ var _a;
241
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
207
242
  handleClickVideo('pause')();
208
243
  }
209
244
  };
@@ -241,19 +276,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
241
276
  right: 0
242
277
  } },
243
278
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
244
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
245
- width: '100%',
246
- height: '100%',
247
- objectFit: 'contain'
248
- } }),
279
+ react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
249
280
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
250
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
281
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
251
282
  position: 'relative',
252
283
  width: '100%',
253
284
  height,
254
285
  overflow: 'hidden'
255
- } },
256
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
286
+ }, onClick: handleClickVideo() },
287
+ react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
257
288
  renderPoster,
258
289
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
259
290
  };
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -66,7 +66,7 @@ const WaterFall = (props) => {
66
66
  }
67
67
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
68
68
  eventInfo: {
69
- contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
69
+ relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
70
70
  position: cacheActiveIndex + '',
71
71
  contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
72
72
  traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -36,6 +36,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
36
36
  const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
37
37
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
38
38
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
39
+ const [videoRef, setVideoRef] = (0, react_1.useState)(null);
40
+ const playerRef = (0, react_1.useRef)();
39
41
  const { productView } = (0, useEventReport_1.useEventReport)();
40
42
  const isShowFingerTip = (0, react_1.useMemo)(() => {
41
43
  return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
@@ -71,6 +73,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
71
73
  viewTime.current = new Date();
72
74
  (0, sessionStore_1.refreshFeSessionId)();
73
75
  };
76
+ const firstRef = (0, react_1.useRef)();
77
+ (0, react_1.useEffect)(() => {
78
+ if (!firstRef.current && !videoRef) {
79
+ firstRef.current = true;
80
+ const player = TCPlayer('player-container-id', {
81
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
82
+ controls: false,
83
+ autoplay: false,
84
+ loop: false,
85
+ muted: true,
86
+ preload: 'auto',
87
+ posterImage: false,
88
+ bigPlayButton: true
89
+ });
90
+ player === null || player === void 0 ? void 0 : player.ready(() => {
91
+ setVideoRef(player);
92
+ });
93
+ }
94
+ }, [videoRef]);
74
95
  (0, react_1.useEffect)(() => {
75
96
  if (!isInit)
76
97
  handleH5EnterLink();
@@ -123,12 +144,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
123
144
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
124
145
  eventSubject: 'sessionCompleted',
125
146
  eventDescription: 'Session completed',
126
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
127
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
147
+ relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
148
+ relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
128
149
  position: activeIndex + '',
129
150
  fromKName,
130
151
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
131
- ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
152
+ relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
132
153
  }
133
154
  });
134
155
  }
@@ -156,7 +177,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
156
177
  const renderContent = (0, react_1.useCallback)((rec, index) => {
157
178
  var _a, _b, _c, _d;
158
179
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
159
- return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
180
+ return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
160
181
  }
161
182
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
162
183
  return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -171,7 +192,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
171
192
  });
172
193
  }
173
194
  return null;
174
- }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
195
+ }, [
196
+ containerWidth,
197
+ data,
198
+ height,
199
+ isMuted,
200
+ activeIndex,
201
+ globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
202
+ viewTime,
203
+ tipText,
204
+ resolver,
205
+ schema,
206
+ videoRef
207
+ ]);
175
208
  const onExpandableChange = (0, react_1.useCallback)((v) => {
176
209
  setIsShowMore(v);
177
210
  }, []);
@@ -261,8 +294,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
261
294
  eventInfo: {
262
295
  eventSubject: 'scrollDown',
263
296
  eventDescription: 'User scroll down',
264
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
265
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
297
+ relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
298
+ relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
266
299
  requestId: null
267
300
  }
268
301
  });
@@ -273,8 +306,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
273
306
  eventInfo: {
274
307
  eventSubject: 'scrollUp',
275
308
  eventDescription: 'User scroll up',
276
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
277
- productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
309
+ relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
310
+ relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
278
311
  requestId: null
279
312
  }
280
313
  });
@@ -352,7 +385,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
352
385
  } })),
353
386
  renderLogo,
354
387
  isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
355
- react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
388
+ react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
389
+ swiperRef.current.swiper.allowTouchMove = false;
390
+ setTimeout(() => {
391
+ swiperRef.current.swiper.allowTouchMove = true;
392
+ }, 500);
393
+ }, onActiveIndexChange: (swiper) => {
356
394
  setActiveIndex(swiper.activeIndex);
357
395
  if (openHashtag)
358
396
  return;
@@ -376,6 +414,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
376
414
  zIndex: 999
377
415
  }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
378
416
  renderView),
379
- react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
417
+ react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
418
+ react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
419
+ react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
420
+ backgroundColor: 'transparent',
421
+ width: '100%',
422
+ height: '100%',
423
+ objectFit: 'cover',
424
+ pointerEvents: 'none'
425
+ } }),
426
+ react_1.default.createElement("div", { id: 'player-container-id-copy' }))));
380
427
  };
381
428
  exports.default = SxpPageRender;
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -60,6 +60,8 @@ export interface ISxpDataSourceContext {
60
60
  hashTagSize?: number;
61
61
  loadingImage?: string;
62
62
  isOpenHashTag?: boolean;
63
+ videoRef?: any;
64
+ setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
63
65
  }
64
66
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
65
67
  export interface SxpDataSourceProviderProps {
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -27,6 +27,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
27
27
  const [cacheRtcList, setCacheRtcList] = (0, react_1.useState)([]);
28
28
  const [cacheActiveIndex, setCacheActiveIndex] = (0, react_1.useState)(0);
29
29
  const [isFromHashtag, setIsFromHashtag] = (0, react_1.useState)(false);
30
+ const [videoRef, setVideoRef] = (0, react_1.useState)(null);
30
31
  (0, react_1.useEffect)(() => {
31
32
  setOpenHashtag(isOpenHashTag);
32
33
  }, [isOpenHashTag]);
@@ -144,7 +145,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
144
145
  fromKName = 'imagePage';
145
146
  }
146
147
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
147
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
148
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
148
149
  });
149
150
  }, [bffEventReport, isFromHashtag]);
150
151
  (0, react_1.useEffect)(() => {
@@ -205,7 +206,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
205
206
  appDomain,
206
207
  hashTagSize,
207
208
  loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
208
- isOpenHashTag
209
+ isOpenHashTag,
210
+ videoRef,
211
+ setVideoRef
209
212
  } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
210
213
  };
211
214
  exports.default = (0, react_1.memo)(SxpDataSourceProvider);
package/lib/core/hooks/useEventReport.js CHANGED
@@ -35,8 +35,8 @@ function useEventReport() {
35
35
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
36
36
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
37
37
  position: position + '',
38
- contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
39
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
38
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
39
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
40
40
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
41
41
  }
42
42
  });
@@ -60,8 +60,8 @@ function useEventReport() {
60
60
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
61
61
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
62
62
  position: position + '',
63
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
64
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
63
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
64
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
65
65
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
66
66
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
67
67
  eventSubject: 'productView',