pb-sxp-ui 1.0.3-alpha.2 → 1.0.3-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/index.cjs +77 -48
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +7 -4
  4. package/dist/index.js +77 -48
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +77 -48
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  15. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +31 -3
  16. package/es/core/components/SxpPageRender/VideoWidget/index.js +21 -30
  17. package/es/core/components/SxpPageRender/WaterFall/List.js +1 -1
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +9 -8
  19. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -5
  20. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  21. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +30 -2
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +21 -30
  23. package/lib/core/components/SxpPageRender/WaterFall/List.js +1 -1
  24. package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -8
  25. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -5
  26. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -36,7 +36,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
36
36
  const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
37
37
  const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
38
38
  const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
39
- const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 4;
39
+ const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
40
40
  const lineHeight = isNaN(lh) ? fs : lh;
41
41
  if (text && height > lineHeight * lineClamp) {
42
42
  setIsShowMore(false);
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -1,9 +1,26 @@
1
- import React, { useRef } from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
2
2
  import { useSxpDataSource } from '../../../../core/hooks';
3
3
  const Picture = (props) => {
4
4
  const { src, height, width } = props;
5
+ const [blur, setBlur] = useState(false);
5
6
  const imgDom = useRef(null);
6
7
  const { sxpParameter } = useSxpDataSource();
8
+ useEffect(() => {
9
+ if (imgDom.current === null || src === '') {
10
+ return;
11
+ }
12
+ const img = new Image();
13
+ img.src = src;
14
+ img.onload = () => {
15
+ const aspectRatio = img.height / img.width;
16
+ const targetAspectRatio = 16 / 9;
17
+ const tolerance = 0.05;
18
+ if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
19
+ setBlur(true);
20
+ }
21
+ };
22
+ imgDom.current.src = src;
23
+ }, [src]);
7
24
  return (React.createElement("div", { style: {
8
25
  overflow: 'hidden',
9
26
  height,
@@ -13,7 +30,18 @@ const Picture = (props) => {
13
30
  React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
14
31
  height: '100%',
15
32
  width: '100%',
16
- objectFit: 'cover'
17
- } })));
33
+ objectFit: 'cover',
34
+ filter: blur ? 'blur(10px)' : 'none',
35
+ transform: blur ? 'scale(1.2)' : 'none'
36
+ } }),
37
+ blur && (React.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
38
+ width: '100%',
39
+ objectFit: 'contain',
40
+ position: 'absolute',
41
+ top: '50%',
42
+ transform: 'translateY(-50%)',
43
+ left: 0,
44
+ right: 0
45
+ } }))));
18
46
  };
19
47
  export default Picture;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -16,10 +16,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
16
16
  videoRef.current.muted = muted;
17
17
  }, [muted]);
18
18
  const handleVideoStart = useCallback(() => {
19
- var _a, _b;
20
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
21
- return;
22
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
19
+ var _a;
20
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
23
21
  }, []);
24
22
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
25
23
  const handlePlaying = useCallback(() => {
@@ -76,38 +74,37 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
76
74
  });
77
75
  }
78
76
  setTimeout(() => {
79
- var _a, _b;
80
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
81
- return;
82
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
77
+ var _a;
78
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
83
79
  }, 0);
84
80
  }, [index, bffEventReport, data, isLoad]);
85
81
  const handleClickVideo = useCallback((type) => () => {
86
- var _a, _b, _c, _d, _e, _f;
87
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
88
- return;
82
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
89
83
  if (!isLoad)
90
84
  return;
91
- const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
85
+ const item = data[index];
86
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
87
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
88
+ const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
92
89
  switch (type) {
93
90
  case 'start':
94
91
  if (!isPause)
95
92
  return;
96
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
93
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
97
94
  setIsPauseVideo(false);
98
95
  break;
99
96
  case 'pause':
100
97
  if (isPause)
101
98
  return;
102
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
99
+ (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
103
100
  setIsPauseVideo(true);
104
101
  break;
105
102
  default:
106
103
  if (isPause) {
107
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
104
+ (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
108
105
  }
109
106
  else {
110
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
107
+ (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
111
108
  }
112
109
  setIsPauseVideo(!isPause);
113
110
  break;
@@ -138,16 +135,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
138
135
  }
139
136
  }, [data, index, bffEventReport]);
140
137
  useEffect(() => {
141
- var _a, _b, _c, _d, _e, _f;
138
+ var _a, _b, _c;
142
139
  if (data.length <= 0)
143
140
  return;
144
141
  if (!videoRef.current)
145
142
  return;
146
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
147
143
  setIsPauseVideo(false);
148
144
  if (!isActive) {
149
- if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
150
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
145
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
151
146
  return;
152
147
  }
153
148
  if (!videoRef.current.src) {
@@ -157,12 +152,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
157
152
  videoRef.current.setAttribute('webkit-playsinline', 'true');
158
153
  }
159
154
  else {
160
- if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
161
- return;
162
155
  videoRef.current.play();
163
156
  }
164
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
165
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
157
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
158
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
166
159
  return () => {
167
160
  var _a, _b;
168
161
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
@@ -170,17 +163,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
170
163
  };
171
164
  }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
172
165
  useEffect(() => {
173
- var _a, _b, _c, _d;
174
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
175
- return;
176
- const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
166
+ var _a, _b, _c;
167
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
177
168
  if (!isActive)
178
169
  return;
179
170
  if (!isPause && openHashtag) {
180
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
171
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
181
172
  }
182
173
  else if (!openHashtag) {
183
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
174
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
184
175
  }
185
176
  }, [openHashtag, isActive]);
186
177
  useEffect(() => {
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -112,7 +112,7 @@ const WaterfallFlowItem = (props) => {
112
112
  React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
113
113
  React.createElement("div", { className: 'list-content-listItem-info' },
114
114
  React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
115
- React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
115
+ React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
116
116
  };
117
117
  export default function WaterfallList(_a) {
118
118
  var _b, _c, _d, _e, _f, _g, _h;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -52,15 +52,16 @@ const CommodityDetail = (_a) => {
52
52
  const width = isPreview ? 375 : window.innerWidth;
53
53
  const renderContent = ({ isPost }) => {
54
54
  var _a, _b, _c;
55
- return (React.createElement("div", { className: 'pb-commondity-content' },
56
- React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
57
- React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
58
- React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
59
- 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
55
+ return (React.createElement("div", null,
56
+ React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
57
+ 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'),
58
+ 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),
59
+ React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
60
+ 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
60
61
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
61
62
  collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
62
63
  necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
63
- 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 })));
64
+ 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 }))));
64
65
  };
65
66
  const renderBtn = () => {
66
67
  var _a;
@@ -99,10 +100,10 @@ const CommodityDetail = (_a) => {
99
100
  objectFit: 'cover',
100
101
  width: '100%'
101
102
  }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
102
- renderContent({ isPost })),
103
+ React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
103
104
  renderBtn(),
104
105
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
105
- renderContent({ isPost: false }),
106
+ React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
106
107
  renderBtn())));
107
108
  };
108
109
  export default memo(CommodityDetail);
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -120,11 +120,12 @@ Made in Italy` })));
120
120
  }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
121
121
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
122
122
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
123
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
124
- React.createElement("div", { className: '' },
125
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
126
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
127
- React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
123
+ React.createElement("div", null,
124
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
125
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
126
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
127
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
128
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
128
129
  (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
129
130
  productInfoText({ isPost }))),
130
131
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -39,7 +39,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
39
39
  const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
40
40
  const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
41
41
  const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
42
- const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 4;
42
+ const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
43
43
  const lineHeight = isNaN(lh) ? fs : lh;
44
44
  if (text && height > lineHeight * lineClamp) {
45
45
  setIsShowMore(false);
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -5,8 +5,25 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  const hooks_1 = require("../../../../core/hooks");
6
6
  const Picture = (props) => {
7
7
  const { src, height, width } = props;
8
+ const [blur, setBlur] = (0, react_1.useState)(false);
8
9
  const imgDom = (0, react_1.useRef)(null);
9
10
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
11
+ (0, react_1.useEffect)(() => {
12
+ if (imgDom.current === null || src === '') {
13
+ return;
14
+ }
15
+ const img = new Image();
16
+ img.src = src;
17
+ img.onload = () => {
18
+ const aspectRatio = img.height / img.width;
19
+ const targetAspectRatio = 16 / 9;
20
+ const tolerance = 0.05;
21
+ if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
22
+ setBlur(true);
23
+ }
24
+ };
25
+ imgDom.current.src = src;
26
+ }, [src]);
10
27
  return (react_1.default.createElement("div", { style: {
11
28
  overflow: 'hidden',
12
29
  height,
@@ -16,7 +33,18 @@ const Picture = (props) => {
16
33
  react_1.default.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
17
34
  height: '100%',
18
35
  width: '100%',
19
- objectFit: 'cover'
20
- } })));
36
+ objectFit: 'cover',
37
+ filter: blur ? 'blur(10px)' : 'none',
38
+ transform: blur ? 'scale(1.2)' : 'none'
39
+ } }),
40
+ blur && (react_1.default.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
41
+ width: '100%',
42
+ objectFit: 'contain',
43
+ position: 'absolute',
44
+ top: '50%',
45
+ transform: 'translateY(-50%)',
46
+ left: 0,
47
+ right: 0
48
+ } }))));
21
49
  };
22
50
  exports.default = Picture;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -19,10 +19,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
19
19
  videoRef.current.muted = muted;
20
20
  }, [muted]);
21
21
  const handleVideoStart = (0, react_1.useCallback)(() => {
22
- var _a, _b;
23
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
24
- return;
25
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
22
+ var _a;
23
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
26
24
  }, []);
27
25
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
28
26
  const handlePlaying = (0, react_1.useCallback)(() => {
@@ -79,38 +77,37 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
79
77
  });
80
78
  }
81
79
  setTimeout(() => {
82
- var _a, _b;
83
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
84
- return;
85
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
80
+ var _a;
81
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
86
82
  }, 0);
87
83
  }, [index, bffEventReport, data, isLoad]);
88
84
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
89
- var _a, _b, _c, _d, _e, _f;
90
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
91
- return;
85
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
92
86
  if (!isLoad)
93
87
  return;
94
- const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
88
+ const item = data[index];
89
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
91
+ const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
95
92
  switch (type) {
96
93
  case 'start':
97
94
  if (!isPause)
98
95
  return;
99
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
96
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
100
97
  setIsPauseVideo(false);
101
98
  break;
102
99
  case 'pause':
103
100
  if (isPause)
104
101
  return;
105
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
102
+ (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
106
103
  setIsPauseVideo(true);
107
104
  break;
108
105
  default:
109
106
  if (isPause) {
110
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
107
+ (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
111
108
  }
112
109
  else {
113
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
110
+ (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
114
111
  }
115
112
  setIsPauseVideo(!isPause);
116
113
  break;
@@ -141,16 +138,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
141
138
  }
142
139
  }, [data, index, bffEventReport]);
143
140
  (0, react_1.useEffect)(() => {
144
- var _a, _b, _c, _d, _e, _f;
141
+ var _a, _b, _c;
145
142
  if (data.length <= 0)
146
143
  return;
147
144
  if (!videoRef.current)
148
145
  return;
149
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
150
146
  setIsPauseVideo(false);
151
147
  if (!isActive) {
152
- if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
153
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
148
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
154
149
  return;
155
150
  }
156
151
  if (!videoRef.current.src) {
@@ -160,12 +155,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
160
155
  videoRef.current.setAttribute('webkit-playsinline', 'true');
161
156
  }
162
157
  else {
163
- if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
164
- return;
165
158
  videoRef.current.play();
166
159
  }
167
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
168
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
160
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
161
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
169
162
  return () => {
170
163
  var _a, _b;
171
164
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
@@ -173,17 +166,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
173
166
  };
174
167
  }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
175
168
  (0, react_1.useEffect)(() => {
176
- var _a, _b, _c, _d;
177
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
178
- return;
179
- const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
169
+ var _a, _b, _c;
170
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
180
171
  if (!isActive)
181
172
  return;
182
173
  if (!isPause && openHashtag) {
183
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
174
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
184
175
  }
185
176
  else if (!openHashtag) {
186
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
177
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
187
178
  }
188
179
  }, [openHashtag, isActive]);
189
180
  (0, react_1.useEffect)(() => {
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -114,7 +114,7 @@ const WaterfallFlowItem = (props) => {
114
114
  react_1.default.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
115
115
  react_1.default.createElement("div", { className: 'list-content-listItem-info' },
116
116
  react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
117
- react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
117
+ react_1.default.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
  function WaterfallList(_a) {
120
120
  var _b, _c, _d, _e, _f, _g, _h;
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -54,15 +54,16 @@ const CommodityDetail = (_a) => {
54
54
  const width = isPreview ? 375 : window.innerWidth;
55
55
  const renderContent = ({ isPost }) => {
56
56
  var _a, _b, _c;
57
- return (react_1.default.createElement("div", { className: 'pb-commondity-content' },
58
- react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
59
- react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
60
- react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
61
- 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
57
+ return (react_1.default.createElement("div", null,
58
+ react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
59
+ 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'),
60
+ 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),
61
+ 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) === '') },
62
+ 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
62
63
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
63
64
  collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
64
65
  necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
65
- 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 })));
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 }))));
66
67
  };
67
68
  const renderBtn = () => {
68
69
  var _a;
@@ -101,10 +102,10 @@ const CommodityDetail = (_a) => {
101
102
  objectFit: 'cover',
102
103
  width: '100%'
103
104
  }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
104
- renderContent({ isPost })),
105
+ react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
105
106
  renderBtn(),
106
107
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
107
- renderContent({ isPost: false }),
108
+ react_1.default.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
108
109
  renderBtn())));
109
110
  };
110
111
  exports.default = (0, react_1.memo)(CommodityDetail);
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -122,11 +122,12 @@ Made in Italy` })));
122
122
  }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
123
123
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
124
124
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
125
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
126
- react_1.default.createElement("div", { className: '' },
127
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
128
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
129
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
125
+ react_1.default.createElement("div", null,
126
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
127
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
128
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
129
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
130
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
130
131
  (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
131
132
  productInfoText({ isPost }))),
132
133
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.3-alpha.2",
3
+ "version": "1.0.3-alpha.4",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",