pb-sxp-ui 1.0.94 → 1.0.96

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 (17) hide show
  1. package/dist/index.cjs +13 -5
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +13 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +13 -5
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/VideoWidget/index.js +11 -3
  14. package/es/materials/sxp/template/MultiCommodity/index.js +2 -2
  15. package/lib/core/components/SxpPageRender/VideoWidget/index.js +11 -3
  16. package/lib/materials/sxp/template/MultiCommodity/index.js +2 -2
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -56,11 +56,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
56
56
  }, [videoRef]);
57
57
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
58
58
  const handlePlaying = useCallback(() => {
59
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
60
59
  if (!videoRef)
61
60
  return;
62
61
  setWaiting(false);
63
62
  setIsLoadFinish(true);
63
+ }, []);
64
+ const handleStartPlay = useCallback(() => {
65
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
66
+ if (!videoRef)
67
+ return;
64
68
  setIsPauseVideo(false);
65
69
  const item = data[index];
66
70
  if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -111,8 +115,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
111
115
  const handleLoadedmetadata = useCallback(() => {
112
116
  if (!videoRef)
113
117
  return;
118
+ handleStartPlay();
114
119
  handLoadeddata();
115
- }, [videoRef, handLoadeddata]);
120
+ }, [videoRef, handLoadeddata, handleStartPlay]);
116
121
  const handleClickVideo = useCallback((type) => () => {
117
122
  if (!videoRef)
118
123
  return;
@@ -202,6 +207,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
202
207
  videoRef.setAttribute('webkit-playsinline', 'true');
203
208
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
204
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
210
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
205
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
206
212
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
207
213
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -212,9 +218,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
212
218
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
213
219
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
214
220
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
221
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
215
222
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
216
223
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
217
224
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
225
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
218
226
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
219
227
  };
220
228
  }, [isActive, videoId, rec, videoRef]);
@@ -305,7 +313,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
305
313
  return null;
306
314
  }
307
315
  return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
308
- !isBgColor && isLoadFinish && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
316
+ !isBgColor && isLoadFinish && blurBgSrc && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
309
317
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
310
318
  React.createElement("div", { style: {
311
319
  position: 'absolute',
package/es/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -33,7 +33,7 @@ const MultiCommodity = (_a) => {
33
33
  }
34
34
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
35
35
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
36
- var _a, _b, _c, _d, _e, _f, _g;
36
+ var _a, _b, _c, _d, _e, _f, _g, _h;
37
37
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
38
38
  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 }),
39
39
  React.createElement("div", { className: css({
@@ -45,7 +45,7 @@ const MultiCommodity = (_a) => {
45
45
  overflow: 'hidden'
46
46
  }) },
47
47
  React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
48
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
48
+ React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))))));
49
49
  })));
50
50
  };
51
51
  export default memo(MultiCommodity);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -59,11 +59,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
59
59
  }, [videoRef]);
60
60
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
61
61
  const handlePlaying = (0, react_1.useCallback)(() => {
62
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
63
62
  if (!videoRef)
64
63
  return;
65
64
  setWaiting(false);
66
65
  setIsLoadFinish(true);
66
+ }, []);
67
+ const handleStartPlay = (0, react_1.useCallback)(() => {
68
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
69
+ if (!videoRef)
70
+ return;
67
71
  setIsPauseVideo(false);
68
72
  const item = data[index];
69
73
  if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -114,8 +118,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
114
118
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
115
119
  if (!videoRef)
116
120
  return;
121
+ handleStartPlay();
117
122
  handLoadeddata();
118
- }, [videoRef, handLoadeddata]);
123
+ }, [videoRef, handLoadeddata, handleStartPlay]);
119
124
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
120
125
  if (!videoRef)
121
126
  return;
@@ -205,6 +210,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
205
210
  videoRef.setAttribute('webkit-playsinline', 'true');
206
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
207
212
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
213
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
208
214
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
209
215
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
210
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -215,9 +221,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
215
221
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
216
222
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
217
223
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
224
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
218
225
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
219
226
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
220
227
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
228
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
221
229
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
222
230
  };
223
231
  }, [isActive, videoId, rec, videoRef]);
@@ -308,7 +316,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
308
316
  return null;
309
317
  }
310
318
  return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
311
- !isBgColor && isLoadFinish && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
319
+ !isBgColor && isLoadFinish && blurBgSrc && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
312
320
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
313
321
  react_1.default.createElement("div", { style: {
314
322
  position: 'absolute',
package/lib/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -35,7 +35,7 @@ const MultiCommodity = (_a) => {
35
35
  }
36
36
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
37
37
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
38
- var _a, _b, _c, _d, _e, _f, _g;
38
+ var _a, _b, _c, _d, _e, _f, _g, _h;
39
39
  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, Object.assign({ key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
40
40
  react_1.default.createElement(Img_1.default, { 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 }),
41
41
  react_1.default.createElement("div", { className: (0, css_1.css)({
@@ -47,7 +47,7 @@ const MultiCommodity = (_a) => {
47
47
  overflow: 'hidden'
48
48
  }) },
49
49
  react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
50
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
50
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))))));
51
51
  })));
52
52
  };
53
53
  exports.default = (0, react_1.memo)(MultiCommodity);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.94",
3
+ "version": "1.0.96",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",