pb-sxp-ui 1.0.18 → 1.0.19

package/dist/index.js

@@ -12214,24 +12214,19 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @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 15:37:47
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
  *
  */
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = useState(false);
-    const imgDom = useRef(null);
     const { sxpParameter } = useSxpDataSource();
-    const getAvifToPng = useCallback((src) => {
-        return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webp` : src;
-    }, []);
     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;
@@ -12240,22 +12235,31 @@ const Picture = (props) => {
                 setBlur(true);
             }
         };
-        imgDom.current.src = getAvifToPng(src);
-    }, [src, getAvifToPng]);
+    }, [src]);
+    const getImg = useCallback((src, style) => {
+        if (src === '' || !src)
+            return;
+        return (React.createElement("picture", null,
+            React.createElement("source", { type: 'image/avif', srcSet: `${src}?imageMogr2/format/avif` }),
+            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 })));
+    }, []);
     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',
@@ -12263,22 +12267,24 @@ const Picture = (props) => {
                 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 = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
     const [isLoad, setIsLoad] = useState(false);
     useEffect(() => {
         if (isLoad && isActive) {
+            (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
             if (openHashtag) {
                 onReportViewImageEnd(rec);
             }
@@ -12288,12 +12294,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
         }
         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 })));
     })));