pb-sxp-ui 1.0.20 → 1.0.21

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 +16 -17
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +16 -17
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +2 -1
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +2 -1
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +16 -17
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +2 -1
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +15 -17
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +2 -1
  15. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +14 -16
  16. package/lib/core/components/SxpPageRender/VideoWidget/index.js +2 -1
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -1,31 +1,29 @@
1
- import React, { useCallback, useEffect, useState } from 'react';
1
+ import React, { useCallback, useState } from 'react';
2
2
  import { useSxpDataSource } from '../../../../core/hooks';
3
3
  const Picture = (props) => {
4
4
  const { src, height, width } = props;
5
5
  const [blur, setBlur] = useState(false);
6
6
  const { sxpParameter } = useSxpDataSource();
7
- useEffect(() => {
8
- if (src === '' || !src)
9
- return;
10
- const img = new Image();
11
- img.src = `${src}?imageMogr2/format/jpg`;
12
- img.onload = () => {
13
- const aspectRatio = img.height / img.width;
14
- const targetAspectRatio = 16 / 9;
15
- const tolerance = 0.05;
16
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
17
- setBlur(true);
18
- }
19
- };
20
- }, [src]);
7
+ const onLoad = (img) => {
8
+ const aspectRatio = img.height / img.width;
9
+ const targetAspectRatio = 16 / 9;
10
+ const tolerance = 0.05;
11
+ if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
12
+ setBlur(true);
13
+ }
14
+ };
21
15
  const getImg = useCallback((src, style) => {
22
16
  if (src === '' || !src)
23
17
  return;
24
- return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (React.createElement("picture", null,
18
+ return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
25
19
  React.createElement("source", { type: 'image/avif', srcSet: src }),
26
20
  React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
27
21
  React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
28
- React.createElement("img", { loading: 'lazy', src: src, style: style }))) : (React.createElement("img", { loading: 'lazy', src: src, style: style }));
22
+ React.createElement("img", { src: src, style: style, onLoad: (e) => {
23
+ onLoad(e.target);
24
+ } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
25
+ onLoad(e.target);
26
+ } }));
29
27
  }, []);
30
28
  return (React.createElement("div", { style: {
31
29
  overflow: 'hidden',
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -212,7 +212,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
212
212
  width: '100%',
213
213
  height
214
214
  } },
215
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
215
+ React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
216
+ renderPoster,
216
217
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
217
218
  };
218
219
  export default memo(VideoWidget);
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -7,28 +7,26 @@ const Picture = (props) => {
7
7
  const { src, height, width } = props;
8
8
  const [blur, setBlur] = (0, react_1.useState)(false);
9
9
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
10
- (0, react_1.useEffect)(() => {
11
- if (src === '' || !src)
12
- return;
13
- const img = new Image();
14
- img.src = `${src}?imageMogr2/format/jpg`;
15
- img.onload = () => {
16
- const aspectRatio = img.height / img.width;
17
- const targetAspectRatio = 16 / 9;
18
- const tolerance = 0.05;
19
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
20
- setBlur(true);
21
- }
22
- };
23
- }, [src]);
10
+ const onLoad = (img) => {
11
+ const aspectRatio = img.height / img.width;
12
+ const targetAspectRatio = 16 / 9;
13
+ const tolerance = 0.05;
14
+ if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
15
+ setBlur(true);
16
+ }
17
+ };
24
18
  const getImg = (0, react_1.useCallback)((src, style) => {
25
19
  if (src === '' || !src)
26
20
  return;
27
- return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (react_1.default.createElement("picture", null,
21
+ return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (react_1.default.createElement("picture", null,
28
22
  react_1.default.createElement("source", { type: 'image/avif', srcSet: src }),
29
23
  react_1.default.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
30
24
  react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
31
- react_1.default.createElement("img", { loading: 'lazy', src: src, style: style }))) : (react_1.default.createElement("img", { loading: 'lazy', src: src, style: style }));
25
+ react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
26
+ onLoad(e.target);
27
+ } }))) : (react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
28
+ onLoad(e.target);
29
+ } }));
32
30
  }, []);
33
31
  return (react_1.default.createElement("div", { style: {
34
32
  overflow: 'hidden',
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -215,7 +215,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
215
215
  width: '100%',
216
216
  height
217
217
  } },
218
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
218
+ react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
219
+ renderPoster,
219
220
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
220
221
  };
221
222
  exports.default = (0, react_1.memo)(VideoWidget);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.20",
3
+ "version": "1.0.21",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",