pb-sxp-ui 1.0.47 → 1.0.48

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 (24) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +69 -71
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +2 -0
  6. package/dist/index.js +69 -71
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -3
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -3
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +69 -71
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -3
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/SxpPageRender/VideoWidget/index.js +54 -56
  17. package/es/core/components/SxpPageRender/WaterFall/List.js +6 -6
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
  19. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  20. package/lib/core/components/SxpPageRender/VideoWidget/index.js +54 -56
  21. package/lib/core/components/SxpPageRender/WaterFall/List.js +6 -6
  22. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
  23. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  24. package/package.json +115 -115
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -15,6 +15,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
15
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
16
  const videoId = `pb-cache-video-${index}`;
17
17
  const videoEleRef = useRef(null);
18
+ const blur = useMemo(() => {
19
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
20
+ }, [videoPostConfig]);
21
+ const translateY = useMemo(() => {
22
+ var _a;
23
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
24
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
25
+ : 'translateY(-50%)';
26
+ }, [videoPostConfig]);
27
+ const blurBgSrc = useMemo(() => {
28
+ var _a;
29
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
30
+ }, [firstFrameSrc, rec]);
31
+ const blurStyle = useMemo(() => {
32
+ return blur
33
+ ? {
34
+ filter: 'blur(10px)',
35
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
36
+ }
37
+ : {};
38
+ }, [blur]);
39
+ const isBgColor = useMemo(() => {
40
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
41
+ }, [videoPostConfig]);
42
+ const bgStyle = useMemo(() => {
43
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
44
+ }, [videoPostConfig, isBgColor]);
18
45
  useEffect(() => {
19
46
  if (!videoRef)
20
47
  return;
@@ -55,15 +82,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
55
82
  setIsFirstPlay(false);
56
83
  }
57
84
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
85
+ const handLoadeddata = useCallback(() => {
86
+ var _a;
87
+ if (!videoRef || isBgColor || firstFrameSrc)
88
+ return;
89
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
90
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
91
+ return;
92
+ const setFrameImg = () => {
93
+ const video = videoDomRef;
94
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
95
+ const ctx = canvas.getContext('2d');
96
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
97
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
98
+ canvas.height = targetHeight;
99
+ canvas.width = targetWidth;
100
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
101
+ setFirstFrameSrc(canvas.toDataURL());
102
+ };
103
+ setFrameImg();
104
+ setTimeout(() => {
105
+ setFrameImg();
106
+ }, 500);
107
+ }, [videoRef, isBgColor, rec, firstFrameSrc]);
58
108
  const handleLoadedmetadata = useCallback(() => {
59
109
  if (!videoRef)
60
110
  return;
61
- if (activeIndex !== index) {
62
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
63
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
64
- }
111
+ handLoadeddata();
65
112
  setIsLoadFinish(true);
66
- }, [activeIndex, index, videoRef]);
113
+ }, [videoRef, handLoadeddata]);
67
114
  const handleCanplay = useCallback(() => {
68
115
  setIsLoadFinish(true);
69
116
  }, []);
@@ -124,57 +171,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
171
  }
125
172
  });
126
173
  }
127
- }, [data, index, bffEventReport, videoRef]);
128
- const blur = useMemo(() => {
129
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
130
- }, [videoPostConfig]);
131
- const translateY = useMemo(() => {
132
- var _a;
133
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
134
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
135
- : 'translateY(-50%)';
136
- }, [videoPostConfig]);
137
- const blurBgSrc = useMemo(() => {
138
- var _a;
139
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
140
- }, [firstFrameSrc, rec]);
141
- const blurStyle = useMemo(() => {
142
- return blur
143
- ? {
144
- filter: 'blur(10px)',
145
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
146
- }
147
- : {};
148
- }, [blur]);
149
- const isBgColor = useMemo(() => {
150
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
151
- }, [videoPostConfig]);
152
- const bgStyle = useMemo(() => {
153
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
154
- }, [videoPostConfig, isBgColor]);
155
- const handLoadeddata = useCallback(() => {
156
- var _a;
157
- if (!videoRef || isBgColor)
158
- return;
159
- const videoDomRef = document.getElementById('player-container-id_html5_api');
160
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
161
- return;
162
- const setFrameImg = () => {
163
- const video = videoDomRef;
164
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
165
- const ctx = canvas.getContext('2d');
166
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
167
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
168
- canvas.height = targetHeight;
169
- canvas.width = targetWidth;
170
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
171
- setFirstFrameSrc(canvas.toDataURL());
172
- };
173
- setFrameImg();
174
- setTimeout(() => {
175
- setFrameImg();
176
- }, 500);
177
- }, [videoRef, isBgColor, rec]);
174
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
178
175
  useEffect(() => {
179
176
  if (!isActive || !videoRef)
180
177
  return;
@@ -188,6 +185,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
185
  if (!dom && !dom2)
189
186
  return;
190
187
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
188
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
191
189
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
192
190
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
191
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -117,7 +117,7 @@ const WaterfallFlowItem = (props) => {
117
117
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
118
118
  };
119
119
  export default function WaterfallList(_a) {
120
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
120
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
121
121
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
122
122
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
123
123
  const [list, setList] = useState();
@@ -178,10 +178,10 @@ export default function WaterfallList(_a) {
178
178
  return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
179
179
  })),
180
180
  React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
181
- React.createElement("div", { style: {
182
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
181
+ React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
182
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
183
183
  } })),
184
- React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
- React.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
- React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
184
+ React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
+ React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
+ React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
187
187
  }
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -59,10 +59,10 @@ const CommodityDetail = (_a) => {
59
59
  React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
60
60
  React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
61
61
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
62
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
62
+ React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
66
66
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
67
67
  };
68
68
  const renderBtn = () => {
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -84,7 +84,7 @@ const CommodityDetailDiroNew = (_a) => {
84
84
  const productInfoText = ({ isPost }) => {
85
85
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
86
86
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
87
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
87
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
88
88
  Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -18,6 +18,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
18
18
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
19
  const videoId = `pb-cache-video-${index}`;
20
20
  const videoEleRef = (0, react_1.useRef)(null);
21
+ const blur = (0, react_1.useMemo)(() => {
22
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
23
+ }, [videoPostConfig]);
24
+ const translateY = (0, react_1.useMemo)(() => {
25
+ var _a;
26
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
27
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
28
+ : 'translateY(-50%)';
29
+ }, [videoPostConfig]);
30
+ const blurBgSrc = (0, react_1.useMemo)(() => {
31
+ var _a;
32
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
33
+ }, [firstFrameSrc, rec]);
34
+ const blurStyle = (0, react_1.useMemo)(() => {
35
+ return blur
36
+ ? {
37
+ filter: 'blur(10px)',
38
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
39
+ }
40
+ : {};
41
+ }, [blur]);
42
+ const isBgColor = (0, react_1.useMemo)(() => {
43
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
44
+ }, [videoPostConfig]);
45
+ const bgStyle = (0, react_1.useMemo)(() => {
46
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
47
+ }, [videoPostConfig, isBgColor]);
21
48
  (0, react_1.useEffect)(() => {
22
49
  if (!videoRef)
23
50
  return;
@@ -58,15 +85,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
58
85
  setIsFirstPlay(false);
59
86
  }
60
87
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
88
+ const handLoadeddata = (0, react_1.useCallback)(() => {
89
+ var _a;
90
+ if (!videoRef || isBgColor || firstFrameSrc)
91
+ return;
92
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
93
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
94
+ return;
95
+ const setFrameImg = () => {
96
+ const video = videoDomRef;
97
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
98
+ const ctx = canvas.getContext('2d');
99
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
100
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
101
+ canvas.height = targetHeight;
102
+ canvas.width = targetWidth;
103
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
104
+ setFirstFrameSrc(canvas.toDataURL());
105
+ };
106
+ setFrameImg();
107
+ setTimeout(() => {
108
+ setFrameImg();
109
+ }, 500);
110
+ }, [videoRef, isBgColor, rec, firstFrameSrc]);
61
111
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
62
112
  if (!videoRef)
63
113
  return;
64
- if (activeIndex !== index) {
65
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
66
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
67
- }
114
+ handLoadeddata();
68
115
  setIsLoadFinish(true);
69
- }, [activeIndex, index, videoRef]);
116
+ }, [videoRef, handLoadeddata]);
70
117
  const handleCanplay = (0, react_1.useCallback)(() => {
71
118
  setIsLoadFinish(true);
72
119
  }, []);
@@ -127,57 +174,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
127
174
  }
128
175
  });
129
176
  }
130
- }, [data, index, bffEventReport, videoRef]);
131
- const blur = (0, react_1.useMemo)(() => {
132
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
133
- }, [videoPostConfig]);
134
- const translateY = (0, react_1.useMemo)(() => {
135
- var _a;
136
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
137
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
138
- : 'translateY(-50%)';
139
- }, [videoPostConfig]);
140
- const blurBgSrc = (0, react_1.useMemo)(() => {
141
- var _a;
142
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
143
- }, [firstFrameSrc, rec]);
144
- const blurStyle = (0, react_1.useMemo)(() => {
145
- return blur
146
- ? {
147
- filter: 'blur(10px)',
148
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
149
- }
150
- : {};
151
- }, [blur]);
152
- const isBgColor = (0, react_1.useMemo)(() => {
153
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
154
- }, [videoPostConfig]);
155
- const bgStyle = (0, react_1.useMemo)(() => {
156
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
157
- }, [videoPostConfig, isBgColor]);
158
- const handLoadeddata = (0, react_1.useCallback)(() => {
159
- var _a;
160
- if (!videoRef || isBgColor)
161
- return;
162
- const videoDomRef = document.getElementById('player-container-id_html5_api');
163
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
164
- return;
165
- const setFrameImg = () => {
166
- const video = videoDomRef;
167
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
168
- const ctx = canvas.getContext('2d');
169
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
170
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
171
- canvas.height = targetHeight;
172
- canvas.width = targetWidth;
173
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
174
- setFirstFrameSrc(canvas.toDataURL());
175
- };
176
- setFrameImg();
177
- setTimeout(() => {
178
- setFrameImg();
179
- }, 500);
180
- }, [videoRef, isBgColor, rec]);
177
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
181
178
  (0, react_1.useEffect)(() => {
182
179
  if (!isActive || !videoRef)
183
180
  return;
@@ -191,6 +188,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
188
  if (!dom && !dom2)
192
189
  return;
193
190
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
191
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
194
192
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
193
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
194
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -119,7 +119,7 @@ const WaterfallFlowItem = (props) => {
119
119
  react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
120
120
  };
121
121
  function WaterfallList(_a) {
122
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
122
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
123
123
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
124
124
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
125
125
  const [list, setList] = (0, react_1.useState)();
@@ -180,11 +180,11 @@ function WaterfallList(_a) {
180
180
  return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
181
181
  })),
182
182
  react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
183
- react_1.default.createElement("div", { style: {
184
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
183
+ react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
184
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
185
185
  } })),
186
- react_1.default.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
- react_1.default.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
- react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
186
+ react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
+ react_1.default.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
+ react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
189
189
  }
190
190
  exports.default = WaterfallList;
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -61,10 +61,10 @@ const CommodityDetail = (_a) => {
61
61
  react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
62
62
  react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
63
63
  react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
64
- react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
65
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
64
+ react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
65
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
68
68
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
69
69
  };
70
70
  const renderBtn = () => {
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -86,7 +86,7 @@ const CommodityDetailDiroNew = (_a) => {
86
86
  const productInfoText = ({ isPost }) => {
87
87
  return (react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
88
88
  react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
89
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
89
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
90
90
  Made in Italy` })));
91
91
  };
92
92
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
package/package.json CHANGED
@@ -1,115 +1,115 @@
1
- {
2
- "name": "pb-sxp-ui",
3
- "version": "1.0.47",
4
- "description": "React enterprise-class UI components",
5
- "main": "dist/index.cjs",
6
- "module": "dist/index.js",
7
- "unpkg": "dist/pb-ui.min.js",
8
- "typings": "es/index.d.ts",
9
- "type": "module",
10
- "scripts": {
11
- "prebuild": "rimraf lib && rimraf es && rimraf dist",
12
- "build": "tsc --build tsconfig.es.json && tsc --build tsconfig.cjs.json",
13
- "postbuild": "tsc-alias -p tsconfig.es.json && tsc-alias -p tsconfig.cjs.json",
14
- "package": "npm run build && cross-env NODE_ENV=production rollup -c --configPlugin typescript",
15
- "start": "npm run build && cross-env NODE_ENV=development rollup -w -c",
16
- "lint": "eslint .",
17
- "lint:fix": "eslint --fix .",
18
- "dev": "rollup -w -c",
19
- "dev:package": "npm run build && rollup -w -c",
20
- "pub": "zx ./scripts/publish.mjs"
21
- },
22
- "files": [
23
- "dist",
24
- "lib",
25
- "es",
26
- "package.json",
27
- "README.md"
28
- ],
29
- "keywords": [
30
- "antd",
31
- "react",
32
- "react-component",
33
- "ui",
34
- "component",
35
- "components"
36
- ],
37
- "author": "frontend@chatlabs.cn",
38
- "license": "MIT",
39
- "dependencies": {
40
- "@ant-design/pro-components": "^2.6.35",
41
- "@emotion/css": "^11.11.2",
42
- "antd": "^5.15.3",
43
- "eslint": "^8.48.0",
44
- "eventemitter3": "^5.0.1",
45
- "hls.js": "^1.5.8",
46
- "less": "^4.2.0",
47
- "lodash": "^4.17.21",
48
- "pako": "^2.1.0",
49
- "qs": "^6.11.2",
50
- "swiper": "^11.0.3",
51
- "uuid": "^9.0.1"
52
- },
53
- "devDependencies": {
54
- "@babel/core": "^7.22.11",
55
- "@babel/plugin-transform-runtime": "^7.22.10",
56
- "@babel/preset-env": "^7.22.10",
57
- "@rollup/plugin-alias": "^5.0.0",
58
- "@rollup/plugin-babel": "^6.0.3",
59
- "@rollup/plugin-commonjs": "^25.0.4",
60
- "@rollup/plugin-eslint": "^9.0.4",
61
- "@rollup/plugin-image": "^3.0.2",
62
- "@rollup/plugin-json": "^6.0.0",
63
- "@rollup/plugin-node-resolve": "^15.2.0",
64
- "@rollup/plugin-typescript": "^11.1.2",
65
- "@rollup/plugin-url": "^8.0.1",
66
- "@svgr/rollup": "^8.1.0",
67
- "@types/crypto-js": "^4.1.3",
68
- "@types/lodash": "^4.14.198",
69
- "@types/node": "^20.5.3",
70
- "@types/pako": "^2.0.3",
71
- "@types/qs": "^6.9.8",
72
- "@types/react": "^18.2.21",
73
- "@types/react-dom": "^18.2.14",
74
- "@types/uuid": "^9.0.7",
75
- "@typescript-eslint/eslint-plugin": "^6.6.0",
76
- "@typescript-eslint/parser": "^6.6.0",
77
- "autoprefixer": "^10.4.15",
78
- "cross-env": "^7.0.3",
79
- "cssnano": "^6.0.1",
80
- "esbuild": "^0.19.2",
81
- "eslint-config-standard": "^17.1.0",
82
- "eslint-config-standard-react": "^13.0.0",
83
- "eslint-plugin-import": "^2.28.1",
84
- "eslint-plugin-n": "^16.0.2",
85
- "eslint-plugin-promise": "^6.1.1",
86
- "eslint-plugin-react": "^7.33.2",
87
- "eslint-plugin-react-hooks": "^4.6.0",
88
- "eslint-plugin-unused-imports": "^3.0.0",
89
- "postcss": "^8.4.28",
90
- "querystring": "^0.2.1",
91
- "react": "^18.2.0",
92
- "react-dom": "^18.2.0",
93
- "rimraf": "^5.0.1",
94
- "rollup": "^3.28.1",
95
- "rollup-plugin-esbuild": "^5.0.0",
96
- "rollup-plugin-postcss": "^4.0.2",
97
- "rollup-plugin-terser": "^7.0.2",
98
- "tsc-alias": "^1.8.7",
99
- "tslib": "^2.6.2",
100
- "typescript": "^5.1.6",
101
- "zx": "^7.2.3"
102
- },
103
- "peerDependencies": {
104
- "react": ">=16.9.0",
105
- "react-dom": ">=16.9.0"
106
- },
107
- "browserslist": [
108
- "defaults",
109
- "not ie < 8",
110
- "last 2 versions",
111
- "> 1%",
112
- "iOS 7",
113
- "last 3 iOS versions"
114
- ]
115
- }
1
+ {
2
+ "name": "pb-sxp-ui",
3
+ "version": "1.0.48",
4
+ "description": "React enterprise-class UI components",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.js",
7
+ "unpkg": "dist/pb-ui.min.js",
8
+ "typings": "es/index.d.ts",
9
+ "type": "module",
10
+ "scripts": {
11
+ "prebuild": "rimraf lib && rimraf es && rimraf dist",
12
+ "build": "tsc --build tsconfig.es.json && tsc --build tsconfig.cjs.json",
13
+ "postbuild": "tsc-alias -p tsconfig.es.json && tsc-alias -p tsconfig.cjs.json",
14
+ "package": "npm run build && cross-env NODE_ENV=production rollup -c --configPlugin typescript",
15
+ "start": "npm run build && cross-env NODE_ENV=development rollup -w -c",
16
+ "lint": "eslint .",
17
+ "lint:fix": "eslint --fix .",
18
+ "dev": "rollup -w -c",
19
+ "dev:package": "npm run build && rollup -w -c",
20
+ "pub": "zx ./scripts/publish.mjs"
21
+ },
22
+ "files": [
23
+ "dist",
24
+ "lib",
25
+ "es",
26
+ "package.json",
27
+ "README.md"
28
+ ],
29
+ "keywords": [
30
+ "antd",
31
+ "react",
32
+ "react-component",
33
+ "ui",
34
+ "component",
35
+ "components"
36
+ ],
37
+ "author": "frontend@chatlabs.cn",
38
+ "license": "MIT",
39
+ "dependencies": {
40
+ "@ant-design/pro-components": "^2.6.35",
41
+ "@emotion/css": "^11.11.2",
42
+ "antd": "^5.15.3",
43
+ "eslint": "^8.48.0",
44
+ "eventemitter3": "^5.0.1",
45
+ "hls.js": "^1.5.8",
46
+ "less": "^4.2.0",
47
+ "lodash": "^4.17.21",
48
+ "pako": "^2.1.0",
49
+ "qs": "^6.11.2",
50
+ "swiper": "^11.0.3",
51
+ "uuid": "^9.0.1"
52
+ },
53
+ "devDependencies": {
54
+ "@babel/core": "^7.22.11",
55
+ "@babel/plugin-transform-runtime": "^7.22.10",
56
+ "@babel/preset-env": "^7.22.10",
57
+ "@rollup/plugin-alias": "^5.0.0",
58
+ "@rollup/plugin-babel": "^6.0.3",
59
+ "@rollup/plugin-commonjs": "^25.0.4",
60
+ "@rollup/plugin-eslint": "^9.0.4",
61
+ "@rollup/plugin-image": "^3.0.2",
62
+ "@rollup/plugin-json": "^6.0.0",
63
+ "@rollup/plugin-node-resolve": "^15.2.0",
64
+ "@rollup/plugin-typescript": "^11.1.2",
65
+ "@rollup/plugin-url": "^8.0.1",
66
+ "@svgr/rollup": "^8.1.0",
67
+ "@types/crypto-js": "^4.1.3",
68
+ "@types/lodash": "^4.14.198",
69
+ "@types/node": "^20.5.3",
70
+ "@types/pako": "^2.0.3",
71
+ "@types/qs": "^6.9.8",
72
+ "@types/react": "^18.2.21",
73
+ "@types/react-dom": "^18.2.14",
74
+ "@types/uuid": "^9.0.7",
75
+ "@typescript-eslint/eslint-plugin": "^6.6.0",
76
+ "@typescript-eslint/parser": "^6.6.0",
77
+ "autoprefixer": "^10.4.15",
78
+ "cross-env": "^7.0.3",
79
+ "cssnano": "^6.0.1",
80
+ "esbuild": "^0.19.2",
81
+ "eslint-config-standard": "^17.1.0",
82
+ "eslint-config-standard-react": "^13.0.0",
83
+ "eslint-plugin-import": "^2.28.1",
84
+ "eslint-plugin-n": "^16.0.2",
85
+ "eslint-plugin-promise": "^6.1.1",
86
+ "eslint-plugin-react": "^7.33.2",
87
+ "eslint-plugin-react-hooks": "^4.6.0",
88
+ "eslint-plugin-unused-imports": "^3.0.0",
89
+ "postcss": "^8.4.28",
90
+ "querystring": "^0.2.1",
91
+ "react": "^18.2.0",
92
+ "react-dom": "^18.2.0",
93
+ "rimraf": "^5.0.1",
94
+ "rollup": "^3.28.1",
95
+ "rollup-plugin-esbuild": "^5.0.0",
96
+ "rollup-plugin-postcss": "^4.0.2",
97
+ "rollup-plugin-terser": "^7.0.2",
98
+ "tsc-alias": "^1.8.7",
99
+ "tslib": "^2.6.2",
100
+ "typescript": "^5.1.6",
101
+ "zx": "^7.2.3"
102
+ },
103
+ "peerDependencies": {
104
+ "react": ">=16.9.0",
105
+ "react-dom": ">=16.9.0"
106
+ },
107
+ "browserslist": [
108
+ "defaults",
109
+ "not ie < 8",
110
+ "last 2 versions",
111
+ "> 1%",
112
+ "iOS 7",
113
+ "last 3 iOS versions"
114
+ ]
115
+ }