pb-sxp-ui 1.0.18 → 1.0.20

package/es/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -1,19 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 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;
@@ -22,22 +17,31 @@ const Picture = (props) => {
                 setBlur(true);
             }
         };
-        imgDom.current.src = getAvifToPng(src);
-    }, [src, getAvifToPng]);
+    }, [src]);
+    const getImg = 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',
@@ -45,6 +49,6 @@ const Picture = (props) => {
                 transform: 'translateY(-50%)',
                 left: 0,
                 right: 0
-            } }))));
+            })));
 };
 export default Picture;

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -1,14 +1,16 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
 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);
             }
@@ -18,9 +20,10 @@ 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]);
-    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 })));
     })));

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -212,8 +212,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             width: '100%',
             height
         } },
-        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 }),
-        renderPoster,
+        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 }),
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
 };
 export default memo(VideoWidget);

package/lib/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -6,17 +6,12 @@ const hooks_1 = require("../../../../core/hooks");
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = (0, react_1.useState)(false);
-    const imgDom = (0, react_1.useRef)(null);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const getAvifToPng = (0, react_1.useCallback)((src) => {
-        return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webp` : src;
-    }, []);
     (0, react_1.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;
@@ -25,22 +20,31 @@ const Picture = (props) => {
                 setBlur(true);
             }
         };
-        imgDom.current.src = getAvifToPng(src);
-    }, [src, getAvifToPng]);
+    }, [src]);
+    const getImg = (0, react_1.useCallback)((src, style) => {
+        if (src === '' || !src)
+            return;
+        return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (react_1.default.createElement("picture", null,
+            react_1.default.createElement("source", { type: 'image/avif', srcSet: src }),
+            react_1.default.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
+            react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
+            react_1.default.createElement("img", { loading: 'lazy', src: src, style: style }))) : (react_1.default.createElement("img", { loading: 'lazy', src: src, style: style }));
+    }, []);
     return (react_1.default.createElement("div", { style: {
             overflow: 'hidden',
             height,
             width: '100%',
             position: 'relative'
         } },
-        react_1.default.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_1.default.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',
@@ -48,6 +52,6 @@ const Picture = (props) => {
                 transform: 'translateY(-50%)',
                 left: 0,
                 right: 0
-            } }))));
+            })));
 };
 exports.default = Picture;

package/lib/core/components/SxpPageRender/PictureGroup/index.js

@@ -7,11 +7,13 @@ const react_2 = require("swiper/react");
 const Picture_1 = tslib_1.__importDefault(require("./Picture"));
 const hooks_1 = require("../../../../core/hooks");
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+    const ref = (0, react_1.useRef)();
     const { isActive } = (0, react_2.useSwiperSlide)();
     const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
     const [isLoad, setIsLoad] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (isLoad && isActive) {
+            (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
             if (openHashtag) {
                 onReportViewImageEnd(rec);
             }
@@ -21,9 +23,10 @@ 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]);
-    return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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_1.default.createElement(react_2.SwiperSlide, { key: url },
             react_1.default.createElement(Picture_1.default, { src: url, width: width, height: height })));
     })));

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -215,8 +215,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             width: '100%',
             height
         } },
-        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 }),
-        renderPoster,
+        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 }),
         react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",