pb-sxp-ui 1.15.13-alpha.1 → 1.15.13-alpha.3

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 (37) hide show
  1. package/dist/index.cjs +356 -48
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +354 -46
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +356 -48
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyStoryPreview/VideoWidget.js +5 -2
  14. package/es/core/components/DiyStoryPreview/index.d.ts +3 -0
  15. package/es/core/components/DiyStoryPreview/index.js +288 -22
  16. package/es/core/components/SxpPageCore/index.d.ts +1 -0
  17. package/es/core/components/SxpPageCore/index.js +3 -3
  18. package/es/core/components/SxpPageRender/ExpandableText.js +10 -2
  19. package/es/core/components/SxpPageRender/RenderCard.js +4 -4
  20. package/es/core/context/SxpDataSourceProvider.js +3 -3
  21. package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
  22. package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
  23. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
  24. package/es/materials/sxp/template/components/EventProvider.js +2 -2
  25. package/lib/core/components/DiyStoryPreview/VideoWidget.js +5 -2
  26. package/lib/core/components/DiyStoryPreview/index.d.ts +3 -0
  27. package/lib/core/components/DiyStoryPreview/index.js +287 -21
  28. package/lib/core/components/SxpPageCore/index.d.ts +1 -0
  29. package/lib/core/components/SxpPageCore/index.js +3 -3
  30. package/lib/core/components/SxpPageRender/ExpandableText.js +10 -2
  31. package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
  32. package/lib/core/context/SxpDataSourceProvider.js +3 -3
  33. package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
  34. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
  35. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
  36. package/lib/materials/sxp/template/components/EventProvider.js +2 -2
  37. package/package.json +1 -1
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -13,7 +13,7 @@ const EventProvider = (_a) => {
13
13
  const handleClick = throttle((e) => {
14
14
  var _a, _b, _c, _d, _e, _f;
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
17
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
18
18
  eventSubject: 'clickCta',
19
19
  eventDescription: 'User clicked the CTA'
@@ -40,6 +40,6 @@ const EventProvider = (_a) => {
40
40
  setElement(null);
41
41
  }
42
42
  }, [element, popup]);
43
- return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
43
+ return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
44
44
  };
45
45
  export default memo(EventProvider);
package/lib/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -42,6 +42,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
42
42
  }, [bffEventReport, data, index, isFirstPlay]);
43
43
  const handleLoadedMetadata = (0, react_1.useCallback)(() => {
44
44
  var _a;
45
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
45
46
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
46
47
  setIsLoadFinish(true);
47
48
  }, []);
@@ -115,6 +116,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
115
116
  }, []);
116
117
  const handlePause = () => {
117
118
  var _a, _b, _c, _d, _e, _f;
119
+ if (!videoRef.current || !isActive)
120
+ return;
118
121
  if (!loopPlay)
119
122
  return;
120
123
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
@@ -137,7 +140,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
137
140
  if (!videoPlayerWrapperNode)
138
141
  return;
139
142
  videoRef.current = VideoPlayer_1.mountVideoPlayerAtNode === null || VideoPlayer_1.mountVideoPlayerAtNode === void 0 ? void 0 : (0, VideoPlayer_1.mountVideoPlayerAtNode)(videoPlayerWrapperNode);
140
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
141
143
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
142
144
  return;
143
145
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
@@ -148,6 +150,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
148
150
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
149
151
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
150
152
  var _a;
153
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
151
154
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
152
155
  });
153
156
  }
@@ -166,7 +169,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
166
169
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
167
170
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
168
171
  };
169
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive]);
172
+ }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
170
173
  const renderPoster = (0, react_1.useMemo)(() => {
171
174
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
172
175
  return null;
package/lib/core/components/DiyStoryPreview/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ISxpPageRenderProps } from '../SxpPageRender';
3
+ import '../SxpPageRender/index.less';
3
4
  export interface IScene {
4
5
  blueprintStep: number;
5
6
  endTime: number;
@@ -13,6 +14,7 @@ export interface IScene {
13
14
  sceneTag: string;
14
15
  startTime: number;
15
16
  traceInfo: string;
17
+ bindProducts?: any[];
16
18
  }
17
19
  export type ScenesType = IScene[];
18
20
  export type DiyStoryPreviewType = ISxpPageRenderProps & {
@@ -21,6 +23,7 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
21
23
  activeIndex?: number;
22
24
  onActiveChange?: (v: number) => void;
23
25
  loopPlay?: boolean;
26
+ pointerEvents?: any;
24
27
  };
25
28
  declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
26
29
  export default _default;
package/lib/core/components/DiyStoryPreview/index.js CHANGED
@@ -3,22 +3,202 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const react_2 = require("swiper/react");
6
- const Nudge_1 = tslib_1.__importDefault(require("../SxpPageRender/Nudge"));
6
+ const lodash_1 = require("lodash");
7
7
  const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
8
8
  const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
9
- const Hashtag_1 = tslib_1.__importDefault(require("../SxpPageRender/Hashtag"));
10
9
  const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
11
10
  const useIconLink_1 = require("../SxpPageRender/useIconLink");
11
+ const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
12
12
  const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
13
13
  const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
14
14
  const _materials_ = tslib_1.__importStar(require("../../../materials"));
15
+ require("../SxpPageRender/index.less");
16
+ const recData = {
17
+ position: 0,
18
+ isCollected: false,
19
+ product: null,
20
+ video: {
21
+ appId: null,
22
+ itemId: 'VIDEOSsRgI1695278974368',
23
+ title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
24
+ enTitle: null,
25
+ icon: null,
26
+ cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
27
+ link: null,
28
+ linkTitle: null,
29
+ linkType: null,
30
+ menuCategoryId: null,
31
+ remark: null,
32
+ tags: [
33
+ 'Gift-Giving',
34
+ 'Daily Wear',
35
+ 'Business Formal',
36
+ 'Sports/Casual',
37
+ 'Anniversary Gifts',
38
+ 'Wedding/Engagement',
39
+ 'Formal Dinner/Party'
40
+ ],
41
+ traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
42
+ value: 385,
43
+ weight: null,
44
+ bindCta: null,
45
+ bindProduct: null,
46
+ bindProducts: [
47
+ {
48
+ appId: 'wx448578f8851f3dce',
49
+ itemId: 'test02178888',
50
+ title: 'christian dior小包包 新CDN',
51
+ enTitle: null,
52
+ icon: null,
53
+ cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
54
+ link: '/pages/details/index?spu_id=1702262707659534338',
55
+ linkTitle: '',
56
+ linkType: 'MP',
57
+ menuCategoryId: null,
58
+ remark: null,
59
+ tags: [],
60
+ traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
61
+ value: null,
62
+ weight: null,
63
+ bindCta: {
64
+ appId: 'wx448578f8851f3dce',
65
+ itemId: 'CTA3KofE1716186622249',
66
+ title: 'SHOP NOW 立即购买',
67
+ enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
68
+ icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
69
+ cover: null,
70
+ link: '/pages/details/index?spu_id=1702262707659534338',
71
+ linkTitle: '',
72
+ linkType: 'MP',
73
+ menuCategoryId: '64b60b202caf0e1c1ce1e17d',
74
+ remark: null,
75
+ tags: [
76
+ "Woman's Perfumes",
77
+ 'Plates & Bowls',
78
+ 'Glasses',
79
+ 'Multicolor',
80
+ 'Carafes',
81
+ 'Tea & Coffee',
82
+ 'Green',
83
+ 'Grey',
84
+ 'Cutlery'
85
+ ],
86
+ traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
87
+ value: null,
88
+ weight: null
89
+ },
90
+ collection: 'Ricco',
91
+ currency: 'INR-₹',
92
+ homePage: [
93
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
94
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
95
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
96
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
97
+ ],
98
+ info: 'test',
99
+ price: 53200,
100
+ shippingInfo: null,
101
+ taxInfo: null
102
+ },
103
+ {
104
+ appId: null,
105
+ itemId: '113J631A0684_C520',
106
+ title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
107
+ enTitle: null,
108
+ icon: null,
109
+ cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
110
+ link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
111
+ linkTitle: null,
112
+ linkType: 'WEB',
113
+ menuCategoryId: null,
114
+ remark: null,
115
+ tags: [],
116
+ traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
117
+ value: null,
118
+ weight: null,
119
+ bindCta: {
120
+ appId: null,
121
+ itemId: 'CTAAfaKf1730796437032',
122
+ title: 'test',
123
+ enTitle: 'test',
124
+ icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
125
+ cover: null,
126
+ link: null,
127
+ linkTitle: null,
128
+ linkType: null,
129
+ menuCategoryId: '64b60b202caf0e1c1ce1e17d',
130
+ remark: '',
131
+ tags: [],
132
+ traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
133
+ value: null,
134
+ weight: null
135
+ },
136
+ collection: 'Jacquard de coton éponge bleu',
137
+ currency: 'EUR-€',
138
+ homePage: [
139
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
140
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
141
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
142
+ ],
143
+ info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
144
+ price: 1800,
145
+ shippingInfo: null,
146
+ taxInfo: null
147
+ },
148
+ {
149
+ appId: null,
150
+ itemId: 'S5573CRIW_M928',
151
+ title: 'Mini Dior Book Tote',
152
+ enTitle: null,
153
+ icon: null,
154
+ cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
155
+ link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
156
+ linkTitle: null,
157
+ linkType: 'WEB',
158
+ menuCategoryId: null,
159
+ remark: null,
160
+ tags: ['ダイヤモンド'],
161
+ traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
162
+ value: null,
163
+ weight: null,
164
+ bindCta: null,
165
+ collection: null,
166
+ currency: 'GBP-￡',
167
+ homePage: [
168
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
169
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
170
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
171
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
172
+ 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
173
+ ],
174
+ info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
175
+ price: 1950,
176
+ shippingInfo: null,
177
+ taxInfo: null
178
+ }
179
+ ],
180
+ url: null,
181
+ blockCta: 1,
182
+ blockProduct: 1,
183
+ hashTags: [
184
+ 'Sports/Casual',
185
+ 'Formal Dinner/Party',
186
+ 'Business Formal',
187
+ 'Wedding/Engagement',
188
+ 'Gift-Giving',
189
+ 'Daily Wear',
190
+ 'Anniversary Gifts'
191
+ ]
192
+ }
193
+ };
15
194
  const RESOLVER = {};
16
195
  Object.values(_materials_).forEach((v) => {
17
196
  RESOLVER[v.extend.type] = v;
18
197
  });
19
198
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
20
199
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
21
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
200
+ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
201
+ const [loopPlaySwiper, setLooPlaySwiper] = (0, react_1.useState)(loopPlay);
22
202
  const swiperRef = (0, react_1.useRef)(null);
23
203
  const height = (0, react_1.useMemo)(() => {
24
204
  let minusHeight = 0;
@@ -43,10 +223,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
43
223
  const renderContent = (rec, index) => {
44
224
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
45
225
  if (isVideo) {
46
- return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlay }));
226
+ return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
47
227
  }
48
228
  else {
49
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlay }));
229
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
50
230
  }
51
231
  };
52
232
  const renderLogo = (0, react_1.useMemo)(() => {
@@ -58,22 +238,52 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
58
238
  }, [globalConfig]);
59
239
  const CTA = (rec, index) => {
60
240
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
241
+ console.log(globalConfig, rec, '111');
61
242
  return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
62
243
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
63
244
  }
64
245
  return null;
65
246
  };
66
247
  const renderBottom = (rec, index) => {
67
- var _a, _b, _c, _d, _e, _f, _g;
248
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
68
249
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
250
+ let cta = null;
251
+ if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
252
+ cta = '多商品CTA';
253
+ }
254
+ else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
255
+ cta = '商品CTA';
256
+ }
257
+ else {
258
+ cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
259
+ }
260
+ const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
69
261
  return (react_1.default.createElement(react_1.default.Fragment, null,
70
- ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
71
- react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
72
- react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
73
- CTA(rec, index),
262
+ ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (react_1.default.createElement("div", { style: {
263
+ background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
264
+ height: '130px',
265
+ position: 'absolute',
266
+ bottom: 0,
267
+ width: '100%',
268
+ willChange: 'transform',
269
+ zIndex: 2,
270
+ pointerEvents
271
+ } })),
272
+ react_1.default.createElement("div", { style: {
273
+ marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
274
+ zIndex: 999,
275
+ position: 'absolute',
276
+ bottom: 0,
277
+ left: 0,
278
+ right: 0,
279
+ paddingTop: '20px'
280
+ } },
281
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { style: {} },
282
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
74
283
  react_1.default.createElement("div", null,
75
- react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
76
- react_1.default.createElement(Hashtag_1.default, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
284
+ react_1.default.createElement(ExpandableText_1.default, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
285
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
286
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
77
287
  }
78
288
  return null;
79
289
  };
@@ -88,17 +298,66 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
88
298
  top += 40;
89
299
  }
90
300
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
91
- return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
301
+ return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, style: {
92
302
  top,
93
- right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
303
+ right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
304
+ position: 'absolute',
305
+ zIndex: 999,
306
+ backgroundColor: 'transparent',
307
+ width: '50px',
308
+ height: '50px',
309
+ outline: 'none',
310
+ border: 'none',
311
+ boxSizing: 'content-box',
312
+ padding: 0,
313
+ transform: 'translate3d(0px, 0px, 0px)'
94
314
  } }));
95
315
  }
96
316
  return null;
97
317
  };
98
318
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
99
319
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
100
- const renderView = (rec, index) => {
101
- return (react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } }, renderContent(rec, index)));
320
+ const renderToggleButton = (visible) => {
321
+ var _a, _b, _c, _d;
322
+ if (!visible)
323
+ return;
324
+ let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
325
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
326
+ top += 45;
327
+ }
328
+ return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
329
+ position: 'absolute',
330
+ visibility: 'visible',
331
+ zIndex: 999,
332
+ transform: 'translate3d(0px,0px,0px)',
333
+ [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
334
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
335
+ backgroundColor: 'transparent',
336
+ width: '50px',
337
+ height: '50px',
338
+ outline: 'none',
339
+ border: 'none',
340
+ boxSizing: 'content-box',
341
+ padding: 0
342
+ }, defaultValue: true, 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 })));
343
+ };
344
+ const renderView = (item, index) => {
345
+ var _a, _b, _c, _d;
346
+ const rec = (0, lodash_1.cloneDeep)(recData);
347
+ rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
348
+ return (react_1.default.createElement("div", { style: { position: 'relative' } },
349
+ react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
350
+ renderBottom(rec, index),
351
+ renderLikeButton(rec, index),
352
+ renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
353
+ react_1.default.createElement(ToggleButton_1.default, { style: {
354
+ position: 'absolute',
355
+ right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
356
+ visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
357
+ bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
358
+ zIndex: 999
359
+ }, defaultValue: true, 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 }),
360
+ renderContent(item, index))));
102
361
  };
103
362
  (0, react_1.useEffect)(() => {
104
363
  var _a, _b;
@@ -112,10 +371,17 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
112
371
  return;
113
372
  (_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.slideTo(0);
114
373
  }, [loopPlay]);
115
- return (react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
116
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
117
- }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight } }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
118
- return renderView(rec, index);
119
- })));
374
+ return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
375
+ react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
376
+ setLooPlaySwiper(false);
377
+ swiperRef.current.swiper.allowTouchMove = false;
378
+ setTimeout(() => {
379
+ swiperRef.current.swiper.allowTouchMove = true;
380
+ }, 500);
381
+ }, onActiveIndexChange: (swiper) => {
382
+ onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
383
+ }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
384
+ return renderView(rec, index);
385
+ }))));
120
386
  };
121
387
  exports.default = (0, react_1.memo)(DiyStoryPreview);
package/lib/core/components/SxpPageCore/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface ISxpPageCoreProps {
9
9
  appDomain?: string;
10
10
  enabledMetaConversionApi?: boolean;
11
11
  dataList?: PageData[];
12
+ pointerEvents?: string;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
14
15
  export default _default;
package/lib/core/components/SxpPageCore/index.js CHANGED
@@ -2,8 +2,8 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
- const SxpPageRender_1 = tslib_1.__importDefault(require("../SxpPageRender"));
6
5
  const Popup_1 = tslib_1.__importDefault(require("../SxpPageRender/Popup"));
6
+ const DiyStoryPreview_1 = tslib_1.__importDefault(require("../DiyStoryPreview"));
7
7
  const _materials_ = tslib_1.__importStar(require("../../../materials"));
8
8
  const core_1 = require("../../../core");
9
9
  const SxpDataSourceProvider_1 = tslib_1.__importDefault(require("../../../core/context/SxpDataSourceProvider"));
@@ -11,7 +11,7 @@ const RESOLVER = {};
11
11
  Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
14
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
15
15
  var _a, _b, _c, _d, _e, _f;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
@@ -24,7 +24,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
24
24
  react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
25
25
  var _a;
26
26
  return (react_1.default.createElement(react_1.default.Fragment, null,
27
- react_1.default.createElement(SxpPageRender_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
27
+ react_1.default.createElement(DiyStoryPreview_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents })),
28
28
  react_1.default.createElement(Popup_1.default, null)));
29
29
  } })));
30
30
  };
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
- const tool_1 = require("../../../core/utils/tool");
5
4
  const react_1 = tslib_1.__importStar(require("react"));
5
+ const tool_1 = require("../../../core/utils/tool");
6
6
  const limitTextLastWholeWord = (originalText = '', limit) => {
7
7
  const chineseRegex = /[\u4e00-\u9fa5]+/;
8
8
  if (chineseRegex.test(originalText)) {
@@ -53,7 +53,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
53
53
  wordBreak: 'break-word'
54
54
  }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
55
55
  react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
56
- text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
56
+ text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
57
+ textDecoration: 'underline',
58
+ cursor: 'pointer',
59
+ outline: 'none',
60
+ border: 'none',
61
+ boxSizing: 'content-box',
62
+ padding: 0,
63
+ background: 'transparent'
64
+ }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
57
65
  __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
58
66
  } }))));
59
67
  };
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  require("./index.less");
6
+ const lodash_1 = require("lodash");
6
7
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
7
8
  const hooks_1 = require("../../../core/hooks");
8
- const lodash_1 = require("lodash");
9
9
  const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
10
10
  const { schema } = (0, hooks_1.useEditor)();
11
11
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
@@ -29,10 +29,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
29
29
  const Component = (0, withBindDataSource_1.default)(t);
30
30
  const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
31
31
  const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
32
- let style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
32
+ const style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
33
33
  if (style.hasOwnProperty('backdropFilter')) {
34
- let sbf = style['backdropFilter'];
35
- style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
34
+ const sbf = style.backdropFilter;
35
+ style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
36
36
  }
37
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 })));
38
38
  }
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -154,9 +154,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
154
154
  }
155
155
  else if (utmVal) {
156
156
  const val = (_k = (_j = (_h = (0, tool_1.splitUrlParams)(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
157
- var _a, _b;
158
157
  const key = val.split('=')[0];
159
- return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
158
+ return key;
160
159
  })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
161
160
  if (val)
162
161
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
@@ -197,7 +196,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
197
196
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
198
197
  query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
199
198
  }
200
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
199
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
201
200
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
202
201
  return undefined;
203
202
  }
@@ -468,6 +467,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
468
467
  if (!isShowConsent)
469
468
  h5EnterLink();
470
469
  }, [isShowConsent]);
470
+ console.log(data, '111');
471
471
  (0, react_1.useEffect)(() => {
472
472
  if (isShowConsent || isPreview)
473
473
  return;
package/lib/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importStar(require("react"));
6
6
  const react_2 = require("swiper/react");
7
7
  const Img_1 = tslib_1.__importDefault(require("../components/Img"));
8
8
  const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
9
+ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
9
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
10
11
  const hooks_1 = require("../../../../core/hooks");
11
12
  const tool_1 = require("../../../../core/utils/tool");
12
- const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
13
13
  const MultiCommodity = (_a) => {
14
14
  var _b, _c;
15
15
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
package/lib/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -6,15 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
6
6
  const react_2 = require("swiper/react");
7
7
  const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
8
8
  const Img_1 = tslib_1.__importDefault(require("../components/Img"));
9
+ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
9
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
10
11
  const hooks_1 = require("../../../../core/hooks");
11
12
  const tool_1 = require("../../../../core/utils/tool");
12
- const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
13
13
  const MultiCommodityDiro = (_a) => {
14
14
  var _b, _c;
15
15
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
16
16
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
17
17
  const [products] = (0, react_1.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]);
18
+ console.log(recData, '222');
18
19
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
19
20
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
20
21
  return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },