pb-sxp-ui 1.16.25 → 1.17.0-alpha

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 (76) hide show
  1. package/dist/index.cjs +268 -338
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +15 -7
  4. package/dist/index.js +268 -338
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +6 -6
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +6 -6
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +268 -338
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +6 -6
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/DiyPortalPreview/VideoWidget.js +8 -10
  15. package/es/core/components/SxpPageRender/LikeButton/index.js +16 -18
  16. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
  17. package/es/core/components/SxpPageRender/PictureGroup/index.js +13 -39
  18. package/es/core/components/SxpPageRender/RenderCard.js +1 -1
  19. package/es/core/components/SxpPageRender/VideoWidget/index.js +45 -32
  20. package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
  21. package/es/core/components/SxpPageRender/index.js +37 -53
  22. package/es/core/context/SxpDataSourceProvider.d.ts +12 -5
  23. package/es/core/context/SxpDataSourceProvider.js +10 -32
  24. package/es/core/hooks/useEventReport.js +5 -6
  25. package/es/materials/sxp/consentPopup/Display/index.js +1 -1
  26. package/es/materials/sxp/cta/AniLinkPopup/material.js +2 -3
  27. package/es/materials/sxp/popup/CommodityDetail/material.js +1 -2
  28. package/es/materials/sxp/popup/CommodityList/index.js +4 -5
  29. package/es/materials/sxp/popup/CommodityList/material.js +1 -1
  30. package/es/materials/sxp/popup/CommodityList/settingRender.js +1 -1
  31. package/es/materials/sxp/template/Appoint/material.js +1 -2
  32. package/es/materials/sxp/template/Commodity/material.js +2 -3
  33. package/es/materials/sxp/template/CommodityDiro/material.js +2 -3
  34. package/es/materials/sxp/template/CommodityDiroNew/material.js +2 -4
  35. package/es/materials/sxp/template/Link/material.js +2 -4
  36. package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
  37. package/es/materials/sxp/template/MultiCommodity/material.js +1 -2
  38. package/es/materials/sxp/template/MultiCommodityDiro/index.js +1 -1
  39. package/es/materials/sxp/template/MultiCommodityDiro/material.js +2 -3
  40. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -1
  41. package/es/materials/sxp/template/MultiCommodityDiroNew/material.js +2 -4
  42. package/es/materials/sxp/template/NineCommodity/material.js +2 -3
  43. package/es/materials/sxp/template/components/CommodityGroup.js +1 -1
  44. package/es/materials/sxp/template/components/settingRender.js +1 -1
  45. package/lib/core/components/DiyPortalPreview/VideoWidget.js +8 -10
  46. package/lib/core/components/SxpPageRender/LikeButton/index.js +16 -18
  47. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
  48. package/lib/core/components/SxpPageRender/PictureGroup/index.js +12 -38
  49. package/lib/core/components/SxpPageRender/RenderCard.js +1 -1
  50. package/lib/core/components/SxpPageRender/VideoWidget/index.js +45 -32
  51. package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
  52. package/lib/core/components/SxpPageRender/index.js +37 -53
  53. package/lib/core/context/SxpDataSourceProvider.d.ts +12 -5
  54. package/lib/core/context/SxpDataSourceProvider.js +10 -32
  55. package/lib/core/hooks/useEventReport.js +5 -6
  56. package/lib/materials/sxp/consentPopup/Display/index.js +1 -1
  57. package/lib/materials/sxp/cta/AniLinkPopup/material.js +1 -2
  58. package/lib/materials/sxp/popup/CommodityDetail/material.js +1 -2
  59. package/lib/materials/sxp/popup/CommodityList/index.js +4 -5
  60. package/lib/materials/sxp/popup/CommodityList/material.js +1 -1
  61. package/lib/materials/sxp/popup/CommodityList/settingRender.js +1 -1
  62. package/lib/materials/sxp/template/Appoint/material.js +1 -2
  63. package/lib/materials/sxp/template/Commodity/material.js +2 -3
  64. package/lib/materials/sxp/template/CommodityDiro/material.js +2 -3
  65. package/lib/materials/sxp/template/CommodityDiroNew/material.js +2 -4
  66. package/lib/materials/sxp/template/Link/material.js +2 -4
  67. package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
  68. package/lib/materials/sxp/template/MultiCommodity/material.js +1 -2
  69. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +1 -1
  70. package/lib/materials/sxp/template/MultiCommodityDiro/material.js +2 -3
  71. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -1
  72. package/lib/materials/sxp/template/MultiCommodityDiroNew/material.js +2 -4
  73. package/lib/materials/sxp/template/NineCommodity/material.js +2 -3
  74. package/lib/materials/sxp/template/components/CommodityGroup.js +1 -1
  75. package/lib/materials/sxp/template/components/settingRender.js +1 -1
  76. package/package.json +1 -1
@@ -16,7 +16,7 @@ const CommodityList = createMaterial(CommodityListComponent, {
16
16
  commodityPicture: {
17
17
  width: 100,
18
18
  height: 100,
19
- marginRight: 10
19
+ marginInlineStart: 10
20
20
  },
21
21
  commodityStyles: {
22
22
  price: {
@@ -71,7 +71,7 @@ export default [
71
71
  type: 'Number',
72
72
  label: '与右侧边距',
73
73
  addonAfter: 'px',
74
- name: ['props', 'commodityPicture', 'marginRight']
74
+ name: ['props', 'commodityPicture', 'marginInlineStart']
75
75
  },
76
76
  {
77
77
  label: '居中垂直偏移',
@@ -19,12 +19,11 @@ const Appoint = createMaterial(AppointComponent, {
19
19
  borderRadius: 3,
20
20
  width: 30,
21
21
  height: 30,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  ctaTitle: {
25
25
  fontSize: 12,
26
26
  color: '#fff',
27
- textAlign: 'left',
28
27
  width: 130,
29
28
  height: 20
30
29
  }
@@ -19,12 +19,11 @@ const Commodity = createMaterial(CommodityComponent, {
19
19
  borderRadius: 3,
20
20
  width: 60,
21
21
  height: 60,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
- color: '#fff',
27
- textAlign: 'left'
26
+ color: '#fff'
28
27
  },
29
28
  ctaTitle: {
30
29
  fontSize: 10,
@@ -19,12 +19,11 @@ const CommodityDiro = createMaterial(CommodityDiroComponent, {
19
19
  borderRadius: 3,
20
20
  width: 60,
21
21
  height: 60,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
- color: '#000',
27
- textAlign: 'left'
26
+ color: '#000'
28
27
  },
29
28
  ctaTitle: {
30
29
  fontSize: 10,
@@ -19,19 +19,17 @@ const CommodityDiroNew = createMaterial(CommodityDiroNewComponent, {
19
19
  borderRadius: 8,
20
20
  width: 78,
21
21
  height: 78,
22
- marginRight: 16
22
+ marginInlineStart: 16
23
23
  },
24
24
  title: {
25
25
  fontSize: 13,
26
- color: '#000',
27
- textAlign: 'left'
26
+ color: '#000'
28
27
  },
29
28
  ctaTitle: {
30
29
  textDecoration: 'underline',
31
30
  fontSize: 14,
32
31
  fontWeight: 'bold',
33
32
  color: '#000',
34
- textAlign: 'left',
35
33
  width: 150,
36
34
  height: 20
37
35
  }
@@ -1,9 +1,9 @@
1
1
  var _a;
2
2
  import settingRender from '../components/settingRender';
3
3
  import linkSettingRender from './settingRender';
4
+ import interactionRender from './interactionRender';
4
5
  import LinkComponent from '.';
5
6
  import { createMaterial } from '../../../../core/create';
6
- import interactionRender from './interactionRender';
7
7
  const Link = createMaterial(LinkComponent, {
8
8
  displayName: '普通CTA',
9
9
  icon: '',
@@ -21,19 +21,17 @@ const Link = createMaterial(LinkComponent, {
21
21
  borderRadius: 3,
22
22
  width: 60,
23
23
  height: 60,
24
- marginRight: 8
24
+ marginInlineStart: 8
25
25
  },
26
26
  ctaTitle: {
27
27
  fontSize: 12,
28
28
  color: '#fff',
29
- textAlign: 'left',
30
29
  width: 130,
31
30
  height: 20
32
31
  }
33
32
  },
34
33
  customTitle: {
35
34
  style: {
36
- textAlign: 'left',
37
35
  textDecoration: 'underline',
38
36
  fontWeight: 'bold',
39
37
  width: 130,
@@ -15,7 +15,7 @@ const MultiCommodity = (_a) => {
15
15
  const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
16
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
17
17
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
18
- return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
18
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineEnd: 0, marginInlineStart: '8px' })), tag: 'li', role: 'listitem' },
19
19
  React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, props),
20
20
  React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
21
21
  React.createElement("div", { className: css({
@@ -19,12 +19,11 @@ const MultiCommodity = createMaterial(MultiCommodityComponent, {
19
19
  borderRadius: 3,
20
20
  width: 60,
21
21
  height: 60,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
26
  color: '#fff',
27
- textAlign: 'left'
28
27
  },
29
28
  ctaTitle: {
30
29
  fontSize: 10,
@@ -15,7 +15,7 @@ const MultiCommodityDiro = (_a) => {
15
15
  const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
16
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
17
17
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
18
- return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
18
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineEnd: 0, marginInlineStart: '8px' })), tag: 'li', role: 'listitem' },
19
19
  React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, props),
20
20
  React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
21
21
  React.createElement("div", { className: css({
@@ -19,12 +19,11 @@ const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
19
19
  borderRadius: 3,
20
20
  width: 60,
21
21
  height: 60,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
- color: '#000',
27
- textAlign: 'left'
26
+ color: '#000'
28
27
  },
29
28
  ctaTitle: {
30
29
  fontSize: 10,
@@ -15,7 +15,7 @@ const MultiCommodityDiroNew = (_a) => {
15
15
  const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
16
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
17
17
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
18
- return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
18
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginInlineEnd: 0, marginInlineStart: '8px' })), tag: 'li', role: 'listitem' },
19
19
  React.createElement(EventProvider, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, props),
20
20
  React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
21
21
  React.createElement("div", { className: css({
@@ -19,19 +19,17 @@ const MultiCommodityDiroNew = createMaterial(MultiCommodityDiroNewComponent, {
19
19
  borderRadius: 8,
20
20
  width: 78,
21
21
  height: 78,
22
- marginRight: 16
22
+ marginInlineStart: 16
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
- color: '#000',
27
- textAlign: 'left'
26
+ color: '#000'
28
27
  },
29
28
  ctaTitle: {
30
29
  textDecoration: 'underline',
31
30
  fontSize: 12,
32
31
  fontWeight: 'bold',
33
32
  color: '#000',
34
- textAlign: 'left',
35
33
  width: 150,
36
34
  height: 20
37
35
  }
@@ -19,12 +19,11 @@ const NineCommodity = createMaterial(NineCommodityComponent, {
19
19
  borderRadius: 3,
20
20
  width: 60,
21
21
  height: 60,
22
- marginRight: 8
22
+ marginInlineStart: 8
23
23
  },
24
24
  title: {
25
25
  fontSize: 12,
26
- color: '#fff',
27
- textAlign: 'left'
26
+ color: '#fff'
28
27
  },
29
28
  ctaTitle: {
30
29
  fontSize: 10,
@@ -21,7 +21,7 @@ const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailDat
21
21
  return (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (React.createElement(SwiperSlide, { className: css({
22
22
  width: '50px',
23
23
  height: '50px',
24
- marginRight: '10px'
24
+ marginInlineStart: '10px'
25
25
  }), onClick: () => {
26
26
  handleClick(item, index);
27
27
  }, key: index },
@@ -100,7 +100,7 @@ export default [
100
100
  type: 'Number',
101
101
  label: '与右侧边距',
102
102
  addonAfter: 'px',
103
- name: ['props', 'ctaTempStyles', 'img', 'marginRight']
103
+ name: ['props', 'ctaTempStyles', 'img', 'marginInlineStart']
104
104
  },
105
105
  {
106
106
  label: '居中垂直偏移',
@@ -25,7 +25,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
25
25
  }, []);
26
26
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
27
27
  const handlePlaying = (0, react_1.useCallback)(() => {
28
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
28
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
29
29
  setIsPauseVideo(false);
30
30
  const item = data[index];
31
31
  if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
@@ -38,15 +38,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
38
38
  eventSubject: 'playVideo',
39
39
  eventDescription: 'User played the video',
40
40
  contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
41
- sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
42
- contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
41
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
43
42
  playType,
44
43
  startTime: videoCurrentTime,
45
44
  videoDuration,
46
- contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
45
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
47
46
  position: index + '',
48
47
  contentFormat: 'video',
49
- traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
48
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
50
49
  }
51
50
  });
52
51
  setIsFirstPlay(false);
@@ -85,7 +84,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
85
84
  }
86
85
  }, [isLoadFinish]);
87
86
  const onPause = (0, react_1.useCallback)(() => {
88
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
87
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
89
88
  const item = data[index];
90
89
  const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
91
90
  const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
@@ -96,15 +95,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
96
95
  eventSubject: 'playOverVideo',
97
96
  eventDescription: 'User finished playing the video',
98
97
  contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
99
- sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
100
- contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
98
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
101
99
  endTime: videoCurrentTime,
102
100
  videoDuration,
103
101
  playDuration,
104
- contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
102
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
105
103
  position: index + '',
106
104
  contentFormat: 'video',
107
- traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
105
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
108
106
  }
109
107
  });
110
108
  }
@@ -15,62 +15,60 @@ const LikeButton = (_a) => {
15
15
  const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
16
16
  const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
17
17
  const handleClick = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
18
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
18
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
19
19
  if (state) {
20
20
  setState(false);
21
- const result = (_e = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ itemId: (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '' })))) !== null && _e !== void 0 ? _e : false;
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;
22
22
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
23
23
  eventInfo: {
24
24
  eventSubject: 'favoriteContentCanceled',
25
25
  eventDescription: 'This content was unfavorite by the user',
26
26
  contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
27
- sceneId: (_k = (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.scene) === null || _j === void 0 ? void 0 : _j.sceneId) !== null && _k !== void 0 ? _k : '',
28
- contentName: (_m = (_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '',
29
- contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
27
+ contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
28
+ contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
30
29
  position: position + '',
31
- contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
32
- traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
30
+ contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
31
+ traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
33
32
  }
34
33
  });
35
34
  if (!result) {
36
35
  setState(true);
37
36
  }
38
37
  else {
39
- const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
38
+ const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
40
39
  if (index === position) {
41
40
  item.isCollected = false;
42
41
  }
43
42
  return item;
44
- })) !== null && _s !== void 0 ? _s : [];
43
+ })) !== null && _p !== void 0 ? _p : [];
45
44
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
46
45
  }
47
46
  }
48
47
  else {
49
48
  setState(true);
50
- const result = (_v = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData), itemId: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '' })))) !== null && _v !== void 0 ? _v : false;
49
+ const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
51
50
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
52
51
  eventInfo: {
53
52
  eventSubject: 'favoriteContent',
54
53
  eventDescription: 'This content was favorite by the user',
55
- contentId: (_x = (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
56
- sceneId: (_0 = (_z = (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.scene) === null || _z === void 0 ? void 0 : _z.sceneId) !== null && _0 !== void 0 ? _0 : '',
57
- contentName: (_2 = (_1 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _1 === void 0 ? void 0 : _1.title) !== null && _2 !== void 0 ? _2 : '',
58
- contentTags: JSON.stringify((_4 = (_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.tags) !== null && _4 !== void 0 ? _4 : []),
54
+ contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
55
+ contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
56
+ contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
59
57
  position: position + '',
60
- contentFormat: ((_5 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _5 === void 0 ? void 0 : _5.url) ? 'video' : 'image',
61
- traceInfo: (_6 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _6 === void 0 ? void 0 : _6.traceInfo
58
+ contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
59
+ traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
62
60
  }
63
61
  });
64
62
  if (!result) {
65
63
  setState(false);
66
64
  }
67
65
  else {
68
- const nRtcList = (_7 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
66
+ const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
69
67
  if (index === position) {
70
68
  item.isCollected = true;
71
69
  }
72
70
  return item;
73
- })) !== null && _7 !== void 0 ? _7 : [];
71
+ })) !== null && _z !== void 0 ? _z : [];
74
72
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
75
73
  }
76
74
  }
@@ -12,11 +12,6 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
- data: RecItemType[];
16
- swiperRef?: any;
17
- }
18
- export interface IPictureGroupRef {
19
- setLoopPlay: (v: boolean) => void;
20
15
  }
21
16
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
22
17
  export default _default;
@@ -4,50 +4,24 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
- const css_1 = require("@emotion/css");
8
7
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
9
8
  const hooks_1 = require("../../../../core/hooks");
9
+ const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
12
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
13
13
  var _a, _b;
14
14
  const { isActive } = (0, react_2.useSwiperSlide)();
15
- const { firstRtcList, openHashtag, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
15
+ const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
16
16
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
17
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
18
  const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
- const imgsSwiperRef = (0, react_1.useRef)();
19
+ const swiperRef = (0, react_1.useRef)();
20
20
  const isFirstPlayRef = (0, react_1.useRef)(true);
21
- const loopPlayRef = (0, react_1.useRef)(true);
22
21
  const initTime = new Date();
23
- (0, react_1.useImperativeHandle)(ref, () => {
24
- return {
25
- setLoopPlay(v) {
26
- loopPlayRef.current = v;
27
- }
28
- };
29
- });
30
- (0, react_1.useEffect)(() => {
31
- let timerId;
32
- if (isLoad && isActive && isDiyH5) {
33
- timerId = setTimeout(() => {
34
- var _a, _b, _c, _d;
35
- if (!loopPlayRef.current)
36
- return;
37
- if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
38
- const i = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
39
- (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(i + 1);
40
- }
41
- }, 3000);
42
- }
43
- return () => {
44
- if (timerId)
45
- clearTimeout(timerId);
46
- };
47
- }, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
48
22
  (0, react_1.useEffect)(() => {
49
23
  if (isLoad && isActive) {
50
- (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
24
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
51
25
  if (openHashtag) {
52
26
  onViewImageEndEvent(rec);
53
27
  }
@@ -57,7 +31,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
57
31
  }
58
32
  }
59
33
  else {
60
- (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
34
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
61
35
  }
62
36
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
63
37
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -81,13 +55,13 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
81
55
  };
82
56
  }, [isActive, imgInfo]);
83
57
  const handleMouseEnter = (0, react_1.useCallback)(() => {
84
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
85
- imgsSwiperRef.current.swiper.autoplay.stop();
58
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
+ swiperRef.current.swiper.autoplay.stop();
86
60
  }
87
61
  }, []);
88
62
  const handleMouseLeave = (0, react_1.useCallback)(() => {
89
- if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
90
- imgsSwiperRef.current.swiper.autoplay.start();
63
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
+ swiperRef.current.swiper.autoplay.start();
91
65
  }
92
66
  }, []);
93
67
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -108,7 +82,7 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
108
82
  enabled: true
109
83
  }
110
84
  }
111
- : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
85
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
112
86
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
113
87
  fontSize: '14px'
114
88
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -125,5 +99,5 @@ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, inde
125
99
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
126
100
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
127
101
  }))));
128
- });
102
+ };
129
103
  exports.default = (0, react_1.memo)(PictureGroup);
@@ -34,7 +34,7 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
34
34
  const sbf = style.backdropFilter;
35
35
  style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
36
36
  }
37
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
37
+ return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginInlineEnd: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
38
38
  }
39
39
  else {
40
40
  return null;