pb-sxp-ui 1.0.28 → 1.0.30

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 (18) hide show
  1. package/dist/index.cjs +26 -26
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +4 -0
  4. package/dist/index.js +26 -26
  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 +26 -26
  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/PictureGroup/Picture.js +10 -8
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +13 -11
  16. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +10 -8
  17. package/lib/core/components/SxpPageRender/VideoWidget/index.js +13 -11
  18. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -8,22 +8,24 @@ const Picture = (props) => {
8
8
  const translateY = useMemo(() => {
9
9
  var _a;
10
10
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
11
- ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
11
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
12
12
  : 'translateY(-50%)';
13
13
  }, [imgUrlsPostConfig]);
14
+ const blurStyle = useMemo(() => {
15
+ return blur
16
+ ? {
17
+ filter: 'blur(10px)',
18
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19
+ }
20
+ : {};
21
+ }, [blur]);
14
22
  return (React.createElement("div", { style: {
15
23
  overflow: 'hidden',
16
24
  height,
17
25
  width: '100%',
18
26
  position: 'relative'
19
27
  } },
20
- React.createElement(FormatImage, { src: src, style: {
21
- height: '100%',
22
- width: '100%',
23
- objectFit: 'cover',
24
- filter: blur ? 'blur(10px)' : 'none',
25
- transform: blur ? 'scale(1.2)' : 'none'
26
- } }),
28
+ React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
27
29
  blur && (React.createElement(FormatImage, { src: src, style: {
28
30
  width: '100%',
29
31
  objectFit: 'contain',
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -113,7 +113,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
113
113
  const translateY = useMemo(() => {
114
114
  var _a;
115
115
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
116
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
116
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
117
117
  : 'translateY(-50%)';
118
118
  }, [videoPostConfig]);
119
119
  const blurBgSrc = useMemo(() => {
@@ -209,6 +209,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
209
209
  window.removeEventListener('beforeunload', handleBeforeUnload);
210
210
  };
211
211
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
212
+ const blurStyle = useMemo(() => {
213
+ return blur
214
+ ? {
215
+ filter: 'blur(10px)',
216
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
217
+ }
218
+ : {};
219
+ }, [blur]);
212
220
  if (!rec.video) {
213
221
  return null;
214
222
  }
@@ -218,27 +226,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
218
226
  height,
219
227
  overflow: 'hidden'
220
228
  } },
221
- React.createElement(FormatImage, { src: blurBgSrc, style: {
222
- height: '100%',
223
- width: '100%',
224
- objectFit: 'cover',
225
- filter: blur ? 'blur(10px)' : 'none',
226
- transform: blur ? 'scale(1.2)' : 'none'
227
- } }),
229
+ React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
228
230
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
229
231
  React.createElement("div", { style: {
230
232
  position: 'absolute',
231
233
  width: '100%',
232
- height: 'auto',
234
+ height: '100%',
233
235
  top: '50%',
234
236
  transform: translateY,
235
237
  left: 0,
236
238
  right: 0
237
239
  } },
238
- React.createElement("div", { style: { position: 'relative' } },
240
+ React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
239
241
  React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
240
242
  width: '100%',
241
- height: 'auto',
243
+ height: '100%',
242
244
  objectFit: 'contain'
243
245
  } }),
244
246
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -11,22 +11,24 @@ const Picture = (props) => {
11
11
  const translateY = (0, react_1.useMemo)(() => {
12
12
  var _a;
13
13
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
14
- ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
14
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
15
15
  : 'translateY(-50%)';
16
16
  }, [imgUrlsPostConfig]);
17
+ const blurStyle = (0, react_1.useMemo)(() => {
18
+ return blur
19
+ ? {
20
+ filter: 'blur(10px)',
21
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
22
+ }
23
+ : {};
24
+ }, [blur]);
17
25
  return (react_1.default.createElement("div", { style: {
18
26
  overflow: 'hidden',
19
27
  height,
20
28
  width: '100%',
21
29
  position: 'relative'
22
30
  } },
23
- react_1.default.createElement(FormatImage_1.default, { src: src, style: {
24
- height: '100%',
25
- width: '100%',
26
- objectFit: 'cover',
27
- filter: blur ? 'blur(10px)' : 'none',
28
- transform: blur ? 'scale(1.2)' : 'none'
29
- } }),
31
+ react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
30
32
  blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
31
33
  width: '100%',
32
34
  objectFit: 'contain',
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -116,7 +116,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
116
116
  const translateY = (0, react_1.useMemo)(() => {
117
117
  var _a;
118
118
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
119
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
119
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
120
120
  : 'translateY(-50%)';
121
121
  }, [videoPostConfig]);
122
122
  const blurBgSrc = (0, react_1.useMemo)(() => {
@@ -212,6 +212,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
212
212
  window.removeEventListener('beforeunload', handleBeforeUnload);
213
213
  };
214
214
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
215
+ const blurStyle = (0, react_1.useMemo)(() => {
216
+ return blur
217
+ ? {
218
+ filter: 'blur(10px)',
219
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
220
+ }
221
+ : {};
222
+ }, [blur]);
215
223
  if (!rec.video) {
216
224
  return null;
217
225
  }
@@ -221,27 +229,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
221
229
  height,
222
230
  overflow: 'hidden'
223
231
  } },
224
- react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: {
225
- height: '100%',
226
- width: '100%',
227
- objectFit: 'cover',
228
- filter: blur ? 'blur(10px)' : 'none',
229
- transform: blur ? 'scale(1.2)' : 'none'
230
- } }),
232
+ react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
231
233
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
232
234
  react_1.default.createElement("div", { style: {
233
235
  position: 'absolute',
234
236
  width: '100%',
235
- height: 'auto',
237
+ height: '100%',
236
238
  top: '50%',
237
239
  transform: translateY,
238
240
  left: 0,
239
241
  right: 0
240
242
  } },
241
- react_1.default.createElement("div", { style: { position: 'relative' } },
243
+ react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
242
244
  react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
243
245
  width: '100%',
244
- height: 'auto',
246
+ height: '100%',
245
247
  objectFit: 'contain'
246
248
  } }),
247
249
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.28",
3
+ "version": "1.0.30",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",