pb-sxp-ui 1.20.2 → 1.20.4

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 (45) hide show
  1. package/dist/index.cjs +379 -123
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +379 -123
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +7 -7
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +7 -7
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +379 -123
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +7 -7
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/LikeButton/index.js +12 -4
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +6 -2
  15. package/es/core/components/SxpPageRender/WaterFall/List.js +12 -22
  16. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +6 -4
  17. package/es/core/components/SxpPageRender/WaterFall/index.js +6 -2
  18. package/es/core/components/SxpPageRender/index.js +62 -16
  19. package/es/core/context/SxpDataSourceProvider.d.ts +8 -3
  20. package/es/core/context/SxpDataSourceProvider.js +63 -43
  21. package/es/core/utils/tool.d.ts +2 -1
  22. package/es/core/utils/tool.js +15 -1
  23. package/es/materials/sxp/cta/AniLink/index.js +18 -7
  24. package/es/materials/sxp/cta/AniLinkPopup/index.js +21 -10
  25. package/es/materials/sxp/popup/CommodityDetail/index.js +59 -2
  26. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +60 -3
  27. package/es/materials/sxp/popup/CommodityList/index.js +21 -5
  28. package/es/materials/sxp/template/components/EventProvider.js +22 -10
  29. package/lib/core/components/SxpPageRender/LikeButton/index.js +12 -4
  30. package/lib/core/components/SxpPageRender/VideoWidget/index.js +6 -2
  31. package/lib/core/components/SxpPageRender/WaterFall/List.js +11 -21
  32. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +6 -4
  33. package/lib/core/components/SxpPageRender/WaterFall/index.js +6 -2
  34. package/lib/core/components/SxpPageRender/index.js +62 -16
  35. package/lib/core/context/SxpDataSourceProvider.d.ts +8 -3
  36. package/lib/core/context/SxpDataSourceProvider.js +61 -41
  37. package/lib/core/utils/tool.d.ts +2 -1
  38. package/lib/core/utils/tool.js +16 -1
  39. package/lib/materials/sxp/cta/AniLink/index.js +18 -7
  40. package/lib/materials/sxp/cta/AniLinkPopup/index.js +21 -10
  41. package/lib/materials/sxp/popup/CommodityDetail/index.js +59 -2
  42. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +60 -3
  43. package/lib/materials/sxp/popup/CommodityList/index.js +21 -5
  44. package/lib/materials/sxp/template/components/EventProvider.js +22 -10
  45. package/package.json +1 -1
package/es/core/utils/tool.js CHANGED
@@ -219,4 +219,18 @@ function setCookie(name, value, days = 0, path = '/', domain = '', secure = fals
219
219
  }
220
220
  document.cookie = cookieString;
221
221
  }
222
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie };
222
+ function getUrlParamByKey(key) {
223
+ var _a, _b;
224
+ const queryString = location.search.slice(1);
225
+ const params = {};
226
+ (_a = splitUrlParams(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
227
+ const key = val.split('=')[0];
228
+ const value = val.split('=')[1];
229
+ params[key] = value;
230
+ });
231
+ for (const key in params) {
232
+ params[key] = params[key].replace(/%2B/g, '+');
233
+ }
234
+ return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
235
+ }
236
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };
package/es/materials/sxp/cta/AniLink/index.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
4
+ import styles from './index.module.less';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import { useEventReport } from '../../../../core/hooks/useEventReport';
6
7
  import { setFontForText } from '../../../../core/utils/tool';
7
- import styles from './index.module.less';
8
8
  import useOnScreen from '../../../../core/hooks/useOnScreen';
9
9
  const AniLink = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
11
11
  var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
12
- const { ctaEvent, setPopupDetailData } = useSxpDataSource();
12
+ const { ctaEvent, setPopupDetailData, bffFbReport } = useSxpDataSource();
13
13
  const { jumpToWeb } = useEventReport();
14
14
  const [visible, setVisible] = useState(false);
15
15
  const ref = useRef(null);
@@ -19,17 +19,28 @@ const AniLink = (_a) => {
19
19
  const handleTo = (e) => {
20
20
  var _a, _b, _c, _d;
21
21
  const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
22
+ const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
22
23
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
23
24
  eventSubject: 'clickCta',
24
25
  eventDescription: 'User clicked the CTA'
25
26
  }, recData, item, index);
27
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
28
+ eventName: 'ClickCTA',
29
+ product: product ? [product] : undefined,
30
+ contentType: 'post',
31
+ recData,
32
+ index,
33
+ cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
34
+ cta_action_type: (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup',
35
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
36
+ target_url: link
37
+ });
26
38
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
27
39
  if (isExternalLink) {
28
- const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
29
- if (link) {
30
- jumpToWeb(e, recData, product, cta, index);
31
- window.location.href = window.getJointUtmLink(link);
32
- }
40
+ if (!link)
41
+ return;
42
+ jumpToWeb(e, recData, product, cta, index);
43
+ window.location.href = window.getJointUtmLink(link);
33
44
  }
34
45
  else {
35
46
  onClick === null || onClick === void 0 ? void 0 : onClick();
package/es/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useEffect, useMemo, useState } from 'react';
4
+ import Img from '../../template/components/Img';
5
+ import styles from './index.module.less';
4
6
  import { useSxpDataSource } from '../../../../core/hooks';
5
7
  import { useEventReport } from '../../../../core/hooks/useEventReport';
6
- import Img from '../../template/components/Img';
7
8
  import { setFontForText } from '../../../../core/utils/tool';
8
- import styles from './index.module.less';
9
9
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
10
10
  const AniLinkPopup = (_a) => {
11
11
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
12
12
  var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
13
13
  style === null || style === void 0 ? true : delete style.transform;
14
- const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
14
+ const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData, bffFbReport } = useSxpDataSource();
15
15
  const { jumpToWeb } = useEventReport();
16
16
  const [visible, setVisible] = useState(true);
17
17
  const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
@@ -19,17 +19,28 @@ const AniLinkPopup = (_a) => {
19
19
  const handleTo = (e) => {
20
20
  var _a, _b, _c, _d;
21
21
  const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
22
+ const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
22
23
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
23
24
  eventSubject: 'clickCta',
24
25
  eventDescription: 'User clicked the CTA'
25
26
  }, recData, item, index);
27
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
28
+ eventName: 'ClickCTA',
29
+ product: product ? [product] : undefined,
30
+ contentType: 'post',
31
+ recData,
32
+ index,
33
+ cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
34
+ cta_action_type: (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup',
35
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
36
+ target_url: link
37
+ });
26
38
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
27
39
  if (isExternalLink) {
28
- const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
29
- if (link) {
30
- jumpToWeb(e, recData, product, cta, index);
31
- window.location.href = window.getJointUtmLink(link);
32
- }
40
+ if (!link)
41
+ return;
42
+ jumpToWeb(e, recData, product, cta, index);
43
+ window.location.href = window.getJointUtmLink(link);
33
44
  }
34
45
  else {
35
46
  onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -63,8 +74,8 @@ const AniLinkPopup = (_a) => {
63
74
  height: '40px',
64
75
  lineHeight: '40px',
65
76
  paddingLeft: '6px'
66
- } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle} ${css(aniTimStyle)}`, onClick: handleTo }),
67
- React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
77
+ } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles.aniLinkPopup} ${aniNamStyle} ${css(aniTimStyle)}`, onClick: handleTo }),
78
+ React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style.padding) !== null && _s !== void 0 ? _s : 0 } },
68
79
  React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
80
  React.createElement(Img, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
70
81
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -12,6 +12,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
12
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
13
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
15
16
  const CommodityDetail = (_a) => {
16
17
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
17
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
@@ -46,22 +47,78 @@ const CommodityDetail = (_a) => {
46
47
  eventSubject: 'clickCta',
47
48
  eventDescription: 'User clicked the CTA'
48
49
  }, data, product, position);
50
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
51
+ eventName: 'ClickCTA',
52
+ product: product ? [product] : undefined,
53
+ contentType: 'product',
54
+ data,
55
+ position,
56
+ cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
57
+ cta_action_type: 'open_external_link',
58
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
59
+ target_url: product.link
60
+ });
49
61
  }
50
62
  window.location.href = window.getJointUtmLink(product.link);
51
63
  }
52
64
  };
53
65
  useEffect(() => {
66
+ var _a;
54
67
  if (!isActive)
55
68
  return;
69
+ const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
56
70
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
57
71
  eventName: 'ProductView',
58
- product
72
+ product: product ? [product] : undefined,
73
+ contentType: 'product',
74
+ rec: recData,
75
+ position
59
76
  });
60
77
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
61
78
  eventName: 'PageView',
62
- product
79
+ product: product ? [product] : undefined,
80
+ contentType: 'product',
81
+ rec: recData,
82
+ position
63
83
  });
64
84
  }, [isActive, bffFbReport]);
85
+ useEffect(() => {
86
+ if (!isActive || isPost)
87
+ return;
88
+ const onShow = () => {
89
+ curTimeRef.current = new Date();
90
+ };
91
+ const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
92
+ const onHide = () => {
93
+ var _a;
94
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
95
+ eventName: 'ExitFeed',
96
+ product: product ? [product] : undefined,
97
+ contentType: 'product',
98
+ rec: recData,
99
+ position,
100
+ view_time: new Date() - curTimeRef.current,
101
+ content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
102
+ });
103
+ };
104
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
105
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
106
+ return () => {
107
+ var _a;
108
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
109
+ eventName: 'Engagement',
110
+ product: product ? [product] : undefined,
111
+ rec: recData,
112
+ position,
113
+ content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
114
+ engagement_type: 'close_popup',
115
+ contentType: 'product',
116
+ view_time: new Date() - curTimeRef.current
117
+ });
118
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
119
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
120
+ };
121
+ }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
65
122
  useEffect(() => {
66
123
  const initTime = () => {
67
124
  curTimeRef.current = new Date();
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -12,6 +12,7 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
12
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
13
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
15
16
  const CommodityDetailDiroNew = (_a) => {
16
17
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
17
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
@@ -50,22 +51,78 @@ const CommodityDetailDiroNew = (_a) => {
50
51
  eventSubject: 'clickCta',
51
52
  eventDescription: 'User clicked the CTA'
52
53
  }, data, product, position);
54
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
55
+ eventName: 'ClickCTA',
56
+ product: product ? [product] : undefined,
57
+ contentType: 'product',
58
+ data,
59
+ position,
60
+ cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
61
+ cta_action_type: 'open_external_link',
62
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
63
+ target_url: product.link
64
+ });
53
65
  }
54
66
  window.location.href = window.getJointUtmLink(product.link);
55
67
  }
56
68
  };
57
69
  useEffect(() => {
70
+ var _a;
58
71
  if (!isActive)
59
72
  return;
73
+ const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
60
74
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
61
75
  eventName: 'ProductView',
62
- product
76
+ product: product ? [product] : undefined,
77
+ contentType: 'product',
78
+ rec: recData,
79
+ position
63
80
  });
64
81
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
65
82
  eventName: 'PageView',
66
- product
83
+ product: product ? [product] : undefined,
84
+ contentType: 'product',
85
+ rec: recData,
86
+ position
67
87
  });
68
- }, [isActive, bffFbReport]);
88
+ }, [isActive, bffFbReport, isPost]);
89
+ useEffect(() => {
90
+ if (!isActive || isPost)
91
+ return;
92
+ const onShow = () => {
93
+ curTimeRef.current = new Date();
94
+ };
95
+ const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
96
+ const onHide = () => {
97
+ var _a;
98
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
99
+ eventName: 'ExitFeed',
100
+ product: product ? [product] : undefined,
101
+ contentType: 'product',
102
+ rec: recData,
103
+ position,
104
+ view_time: new Date() - curTimeRef.current,
105
+ content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
106
+ });
107
+ };
108
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
109
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
110
+ return () => {
111
+ var _a;
112
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
113
+ eventName: 'Engagement',
114
+ product: product ? [product] : undefined,
115
+ rec: recData,
116
+ position,
117
+ content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
118
+ engagement_type: 'close_popup',
119
+ contentType: 'product',
120
+ view_time: new Date() - curTimeRef.current
121
+ });
122
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
123
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
124
+ };
125
+ }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
69
126
  useEffect(() => {
70
127
  const initTime = () => {
71
128
  if (!isActive)
package/es/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -27,16 +27,28 @@ const CommodityList = (_a) => {
27
27
  });
28
28
  }, [(_d = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _d === void 0 ? void 0 : _d.enableFormattedPrice, globalConfig]);
29
29
  const handleClick = throttle((item, multiCheckIndex, e) => {
30
+ var _a;
30
31
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
31
32
  eventSubject: 'clickCta',
32
33
  eventDescription: 'User clicked the CTA'
33
34
  }, recData, item, index);
35
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
36
+ eventName: 'ClickCTA',
37
+ product: item ? [item] : undefined,
38
+ contentType: 'product',
39
+ recData,
40
+ index,
41
+ cta_text: (_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.enTitle,
42
+ cta_action_type: isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup',
43
+ target_content_id: item === null || item === void 0 ? void 0 : item.itemId,
44
+ target_url: item.link
45
+ });
34
46
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
35
47
  if (isExternalLink) {
36
- if (item === null || item === void 0 ? void 0 : item.link) {
37
- jumpToWeb(e, recData, item, item.bindCta, index);
38
- window.location.href = window.getJointUtmLink(item.link);
39
- }
48
+ if (!(item === null || item === void 0 ? void 0 : item.link))
49
+ return;
50
+ jumpToWeb(e, recData, item, item.bindCta, index);
51
+ window.location.href = window.getJointUtmLink(item.link);
40
52
  }
41
53
  else {
42
54
  onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -44,7 +56,11 @@ const CommodityList = (_a) => {
44
56
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
45
57
  useEffect(() => {
46
58
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
47
- eventName: 'PageView'
59
+ eventName: 'PageView',
60
+ product: (product !== null && product !== void 0 ? product : []),
61
+ contentType: 'product',
62
+ rec: recData,
63
+ position: index
48
64
  });
49
65
  }, []);
50
66
  return (React.createElement("ul", { role: 'list', className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -7,28 +7,40 @@ const EventProvider = (_a) => {
7
7
  var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
8
8
  const ref = useRef(null);
9
9
  const { popup } = useEditor();
10
- const { setPopupDetailData, ctaEvent } = useSxpDataSource();
10
+ const { setPopupDetailData, ctaEvent, bffFbReport } = useSxpDataSource();
11
11
  const { jumpToWeb } = useEventReport();
12
12
  const [element, setElement] = useState(null);
13
13
  const handleClick = throttle((e) => {
14
- var _a, _b, _c, _d, _e, _f;
14
+ var _a, _b, _c, _d, _e, _f, _g, _h;
15
15
  e.preventDefault();
16
- const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
16
+ const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
17
+ const link = jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link) || '';
17
18
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
18
19
  eventSubject: 'clickCta',
19
20
  eventDescription: 'User clicked the CTA'
20
21
  }, rec, item, index);
22
+ const product = multItem || ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindProduct);
23
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
24
+ eventName: 'ClickCTA',
25
+ product: product ? [product] : undefined,
26
+ contentType: 'post',
27
+ rec,
28
+ index,
29
+ cta_text: (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle,
30
+ cta_action_type: isExternalLink && (!!link) ? 'open_external_link' : 'open_internal_popup',
31
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
32
+ target_url: link
33
+ });
21
34
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex !== undefined && multiCheckIndex >= 0
22
35
  ? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
23
36
  setElement(ref === null || ref === void 0 ? void 0 : ref.current);
24
37
  if (isExternalLink) {
25
- const link = ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
26
- if (jumpLink || link) {
27
- const cta = ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
28
- const product = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct) || multItem;
29
- jumpToWeb(e, rec, product, cta, index);
30
- window.location.href = window.getJointUtmLink(jumpLink || link || '');
31
- }
38
+ if (!link)
39
+ return;
40
+ const cta = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
41
+ const product = ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || multItem;
42
+ jumpToWeb(e, rec, product, cta, index);
43
+ window.location.href = window.getJointUtmLink(link);
32
44
  }
33
45
  else {
34
46
  onClick === null || onClick === void 0 ? void 0 : onClick();
package/lib/core/components/SxpPageRender/LikeButton/index.js CHANGED
@@ -10,12 +10,12 @@ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
10
10
  const LikeButton = (_a) => {
11
11
  var _b;
12
12
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = tslib_1.__rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
13
- const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = (0, hooks_1.useSxpDataSource)();
13
+ const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList, bffFbReport } = (0, hooks_1.useSxpDataSource)();
14
14
  const [state, setState] = (0, react_1.useState)((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
15
15
  const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
16
16
  const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
17
17
  const handleClick = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
18
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
18
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
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;
@@ -59,16 +59,24 @@ const LikeButton = (_a) => {
59
59
  traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
60
60
  }
61
61
  });
62
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
63
+ eventName: 'Engagement',
64
+ product: (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.bindProducts,
65
+ rec: recData,
66
+ position,
67
+ content_id: (_1 = (_0 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _0 === void 0 ? void 0 : _0.itemId) !== null && _1 !== void 0 ? _1 : '',
68
+ engagement_type: 'like'
69
+ });
62
70
  if (!result) {
63
71
  setState(false);
64
72
  }
65
73
  else {
66
- const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
74
+ const nRtcList = (_2 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
67
75
  if (index === position) {
68
76
  item.isCollected = true;
69
77
  }
70
78
  return item;
71
- })) !== null && _z !== void 0 ? _z : [];
79
+ })) !== null && _2 !== void 0 ? _2 : [];
72
80
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
73
81
  }
74
82
  }
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -287,11 +287,15 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
287
287
  if (isActive) {
288
288
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
289
289
  eventName: 'ViewContent',
290
- product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
290
+ product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProducts,
291
+ rec: data === null || data === void 0 ? void 0 : data[index],
292
+ position: index
291
293
  });
292
294
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
293
295
  eventName: 'PageView',
294
- product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
296
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProducts,
297
+ rec: data === null || data === void 0 ? void 0 : data[index],
298
+ position: index
295
299
  });
296
300
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
297
301
  }
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -12,7 +12,8 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
12
12
  const materials_1 = require("../../../../core/utils/materials");
13
13
  const WaterfallFlowItem = (props) => {
14
14
  var _a;
15
- const { rec, index, list, reportTagsView, textStyles, space, openFixedSize, fixedSizeRatio } = props;
15
+ const { listItem, index, list, reportTagsView, textStyles, space, openFixedSize, fixedSizeRatio } = props;
16
+ const rec = listItem;
16
17
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter, globalConfig } = (0, hooks_1.useSxpDataSource)();
17
18
  const [showVideo, setShowVideo] = (0, react_1.useState)(false);
18
19
  const imgDom = (0, react_1.useRef)(null);
@@ -122,41 +123,30 @@ const WaterfallFlowItem = (props) => {
122
123
  function WaterfallList(_a) {
123
124
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
124
125
  var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
125
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = (0, hooks_1.useSxpDataSource)();
126
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = (0, hooks_1.useSxpDataSource)();
126
127
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
127
128
  const [list, setList] = (0, react_1.useState)();
128
129
  const [data, setData] = (0, react_1.useState)();
129
130
  const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
130
131
  const containerRef = (0, react_1.useRef)(null);
131
132
  const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
132
- const loadMoreData = (0, react_1.useCallback)(() => {
133
- if (isLoadMore)
134
- return;
135
- setIsLoadMore(true);
136
- waterFallData &&
137
- (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
138
- hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag
139
- }).then((res) => {
140
- var _a;
141
- setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
142
- setIsLoadMore(false);
143
- }));
144
- }, [waterFallData, getRecommendVideos, list, isLoadMore]);
145
133
  (0, react_1.useEffect)(() => {
146
134
  var _a, _b;
147
135
  setIsLoadingData(true);
148
- waterFallData &&
149
- (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
136
+ if (waterFallData) {
137
+ getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
150
138
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
151
139
  defaultSize: hashTagSize,
152
140
  maxSize: hashTagSize
153
141
  }).then((res) => {
154
142
  var _a, _b;
155
143
  setData(res);
156
- setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
144
+ const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
145
+ setList(list);
157
146
  setIsLoadingData(false);
158
- }));
159
- if (isOpenHashTag) {
147
+ });
148
+ }
149
+ else if (isOpenHashTag) {
160
150
  const res = preview_json_1.default;
161
151
  setData(res);
162
152
  setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
@@ -188,7 +178,7 @@ function WaterfallList(_a) {
188
178
  __html: (0, tool_1.setFontForText)(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
189
179
  } }),
190
180
  react_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
191
- return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
181
+ return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, listItem: item, list: list, reportTagsView: reportTagsView }, props)));
192
182
  })),
193
183
  react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
194
184
  react_1.default.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -12,7 +12,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
12
12
  const materials_1 = require("../../../../core/utils/materials");
13
13
  const WaterfallFlowItem = (props) => {
14
14
  var _a;
15
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
15
+ const { listItem, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
16
16
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter, globalConfig } = (0, hooks_1.useSxpDataSource)();
17
17
  const [showVideo, setShowVideo] = (0, react_1.useState)(false);
18
18
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -25,6 +25,7 @@ const WaterfallFlowItem = (props) => {
25
25
  const videoDom = (0, react_1.useRef)(null);
26
26
  const canvasRef = (0, react_1.useRef)(null);
27
27
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
28
+ const rec = listItem;
28
29
  const src = (0, react_1.useMemo)(() => {
29
30
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
30
31
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
@@ -114,7 +115,7 @@ const WaterfallFlowItem = (props) => {
114
115
  function WaterfallList(_a) {
115
116
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
116
117
  var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
117
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = (0, hooks_1.useSxpDataSource)();
118
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = (0, hooks_1.useSxpDataSource)();
118
119
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
119
120
  const scrollParent = (0, react_1.useRef)(null);
120
121
  const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -219,7 +220,8 @@ function WaterfallList(_a) {
219
220
  }).then((res) => {
220
221
  var _a, _b;
221
222
  setData(res);
222
- setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
223
+ const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
224
+ setList(list);
223
225
  setIsLoadingData(false);
224
226
  }));
225
227
  if (isOpenHashTag) {
@@ -298,7 +300,7 @@ function WaterfallList(_a) {
298
300
  react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
299
301
  list.map((item, ind) => {
300
302
  var _a;
301
- return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
303
+ return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, listItem: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
302
304
  }),
303
305
  react_1.default.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
304
306
  position: 'absolute',
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -78,13 +78,17 @@ const WaterFall = (props) => {
78
78
  });
79
79
  }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
80
80
  (0, react_1.useEffect)(() => {
81
+ var _a, _b;
81
82
  if (openHashtag) {
82
83
  setViewTime(new Date());
83
84
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
84
- eventName: 'PageView'
85
+ eventName: 'PageView',
86
+ product: (_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProducts,
87
+ rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
88
+ position: cacheActiveIndex
85
89
  });
86
90
  }
87
- }, [openHashtag, bffFbReport]);
91
+ }, [openHashtag, bffFbReport, waterFallData, cacheActiveIndex]);
88
92
  (0, react_1.useEffect)(() => {
89
93
  const initTime = () => {
90
94
  setViewTime(new Date());