pb-sxp-ui 1.0.18 → 1.0.20

package/dist/pb-ui.js

@@ -12229,24 +12229,19 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-17 13:55:13
+     * @LastEditTime: 2024-04-17 16:46:54
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
     const Picture = (props) => {
         const { src, height, width } = props;
         const [blur, setBlur] = React.useState(false);
-        const imgDom = React.useRef(null);
         const { sxpParameter } = useSxpDataSource();
-        const getAvifToPng = React.useCallback((src) => {
-            return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webp` : src;
-        }, []);
         React.useEffect(() => {
-            if (imgDom.current === null || src === '') {
+            if (src === '' || !src)
                 return;
-            }
             const img = new Image();
-            img.src = src;
+            img.src = `${src}?imageMogr2/format/jpg`;
             img.onload = () => {
                 const aspectRatio = img.height / img.width;
                 const targetAspectRatio = 16 / 9;
@@ -12255,22 +12250,31 @@ Made in Italy` })));
                     setBlur(true);
                 }
             };
-            imgDom.current.src = getAvifToPng(src);
-        }, [src, getAvifToPng]);
+        }, [src]);
+        const getImg = React.useCallback((src, style) => {
+            if (src === '' || !src)
+                return;
+            return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (React.createElement("picture", null,
+                React.createElement("source", { type: 'image/avif', srcSet: src }),
+                React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
+                React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
+                React.createElement("img", { loading: 'lazy', src: src, style: style }))) : (React.createElement("img", { loading: 'lazy', src: src, style: style }));
+        }, []);
         return (React.createElement("div", { style: {
                 overflow: 'hidden',
                 height,
                 width: '100%',
                 position: 'relative'
             } },
-            React.createElement("img", { ref: imgDom, loading: 'lazy', src: src ? getAvifToPng(src) : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                    filter: blur ? 'blur(10px)' : 'none',
-                    transform: blur ? 'scale(1.2)' : 'none'
-                } }),
-            blur && (React.createElement("img", { ref: imgDom, src: getAvifToPng(src), loading: 'lazy', style: {
+            getImg(src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            }),
+            blur &&
+                getImg(src, {
                     width: '100%',
                     objectFit: 'contain',
                     position: 'absolute',
@@ -12278,22 +12282,24 @@ Made in Italy` })));
                     transform: 'translateY(-50%)',
                     left: 0,
                     right: 0
-                } }))));
+                })));
     };
 
     /*
      * @Author: lewinlu@chatlabs.com
      * @Date: 2024-01-03 14:39:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-17 13:53:34
+     * @LastEditTime: 2024-04-17 15:15:33
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
      */
     const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+        const ref = React.useRef();
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
         const [isLoad, setIsLoad] = React.useState(false);
         React.useEffect(() => {
             if (isLoad && isActive) {
+                (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
                 if (openHashtag) {
                     onReportViewImageEnd(rec);
                 }
@@ -12303,12 +12309,13 @@ Made in Italy` })));
             }
             else {
                 setIsLoad(true);
+                (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
             }
         }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
         // if (!isActive) {
         //   return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
         // }
-        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: isActive ? { delay: 3000 } : false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+        return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
             return (React.createElement(SwiperSlide, { key: url },
                 React.createElement(Picture, { src: url, width: width, height: height })));
         })));
@@ -13051,4 +13058,3 @@ Made in Italy` })));
     Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
-//# sourceMappingURL=pb-ui.js.map