pb-sxp-ui 1.0.20 → 1.0.22

package/es/core/components/SxpPageRender/FormatImage.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from 'react';
+interface IFormatImageProps {
+    src?: string;
+    onLoad?: (e: any) => void;
+    style?: CSSProperties;
+    className?: any;
+    loading?: 'eager' | 'lazy';
+}
+interface IFormatImageRefProps {
+    setSrc: (v: string) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IFormatImageProps & React.RefAttributes<IFormatImageRefProps>>>;
+export default _default;

package/es/core/components/SxpPageRender/FormatImage.js

@@ -0,0 +1,22 @@
+import React, { forwardRef, memo, useImperativeHandle, useState } from 'react';
+const FormatImage = forwardRef((props, ref) => {
+    const { src, onLoad, style, className, loading } = props;
+    const [imgSrc, setImgSrc] = useState(src);
+    useImperativeHandle(ref, () => ({
+        setSrc: (v) => {
+            setImgSrc(v);
+        }
+    }));
+    if (imgSrc === '' || !imgSrc)
+        return null;
+    return (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
+        React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
+        React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
+        React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
+        React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+            } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+        } }));
+});
+export default memo(FormatImage);

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

@@ -1,31 +1,30 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = useState(false);
     const { sxpParameter } = useSxpDataSource();
-    useEffect(() => {
-        if (src === '' || !src)
-            return;
-        const img = new Image();
-        img.src = `${src}?imageMogr2/format/jpg`;
-        img.onload = () => {
-            const aspectRatio = img.height / img.width;
-            const targetAspectRatio = 16 / 9;
-            const tolerance = 0.05;
-            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
-                setBlur(true);
-            }
-        };
-    }, [src]);
+    const onLoad = (img) => {
+        const aspectRatio = img.height / img.width;
+        const targetAspectRatio = 16 / 9;
+        const tolerance = 0.05;
+        if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+            setBlur(true);
+        }
+    };
     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,
+        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (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 }));
+            React.createElement("img", { src: src, style: style, onLoad: (e) => {
+                    onLoad(e.target);
+                } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
+                onLoad(e.target);
+            } }));
     }, []);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
@@ -33,15 +32,14 @@ const Picture = (props) => {
             width: '100%',
             position: 'relative'
         } },
-        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, {
+        React.createElement(FormatImage, { src: src, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            }, onLoad: onLoad }),
+        blur && (React.createElement(FormatImage, { src: src, style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
@@ -49,6 +47,6 @@ const Picture = (props) => {
                 transform: 'translateY(-50%)',
                 left: 0,
                 right: 0
-            })));
+            } }))));
 };
 export default Picture;

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

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

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import './List.less';
+import FormatImage from '../FormatImage';
 import previewData from './preview.json';
 import { useSxpDataSource } from '../../../../core/hooks';
 const WaterfallFlowItem = (props) => {
@@ -8,6 +9,7 @@ const WaterfallFlowItem = (props) => {
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
     const imgDom = useRef(null);
+    const ref = useRef(null);
     const videoDom = useRef(null);
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
@@ -49,20 +51,20 @@ const WaterfallFlowItem = (props) => {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
-                    if (imgDom.current === null || src === '') {
+                    if (ref.current === null || src === '') {
                         return;
                     }
                     if (showVideo && firstFrameSrc) {
-                        imgDom.current.src = firstFrameSrc;
+                        imgDom.current.setSrc(firstFrameSrc);
                     }
                     else {
-                        imgDom.current.src = src;
+                        imgDom.current.setSrc(src);
                     }
-                    observer.unobserve(imgDom.current);
+                    observer.unobserve(ref.current);
                 }
             });
         });
-        observer.observe(imgDom.current);
+        observer.observe(ref.current);
         return () => {
             observer.disconnect();
         };
@@ -104,12 +106,12 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
+    return (React.createElement("div", { ref: ref, className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
         React.createElement("div", { className: 'list-content-listItem-picture' },
             showVideo && (React.createElement("div", { style: { display: 'none' } },
                 React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                 React.createElement("canvas", { ref: canvasRef }))),
-            React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
+            React.createElement(FormatImage, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
         React.createElement("div", { className: 'list-content-listItem-info' },
             React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
             React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -8,6 +8,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -85,7 +86,7 @@ const CommodityDetail = (_a) => {
                             width,
                             height: width
                         } },
-                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
                     position: 'relative',

package/es/materials/sxp/popup/CommodityDetailDiro/index.js

@@ -7,6 +7,7 @@ import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import arrow from './arrow.png';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const CommodityDetailDiro = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "index"]);
@@ -127,7 +128,7 @@ const CommodityDetailDiro = (_a) => {
                             width,
                             height: width
                         } },
-                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
                     position: 'relative',

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -8,6 +8,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const CommodityDetailDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -103,7 +104,7 @@ Made in Italy` })));
                             width,
                             height: width
                         } },
-                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
                     position: 'relative',

package/es/materials/sxp/template/Commodity/index.js

@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const Commodity = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
@@ -12,7 +13,7 @@ const Commodity = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css({
                 color: '#fff',
                 display: 'flex',

package/es/materials/sxp/template/CommodityDiro/index.js

@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const CommodityDiro = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
@@ -12,7 +13,7 @@ const CommodityDiro = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css({
                 color: '#fff',
                 display: 'flex',

package/es/materials/sxp/template/CommodityDiroNew/index.js

@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const CommodityDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
@@ -12,7 +13,7 @@ const CommodityDiroNew = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css({
                 color: '#fff',
                 display: 'flex',

package/es/materials/sxp/template/Link/index.js

@@ -5,6 +5,7 @@ import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const Link = (_a) => {
     var _b, _c, _d, _e, _f;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
@@ -20,7 +21,7 @@ const Link = (_a) => {
     };
     return (React.createElement(EventProvider, Object.assign({ index: index, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
         React.createElement("div", { className: css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image, alt: '' })),
+            React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
         React.createElement("div", { className: css({
                 display: 'flex',
                 alignItems: 'center',

package/es/materials/sxp/template/components/Img.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React, { memo, useEffect, useRef } from 'react';
 import useOnScreen from '../../../../core/hooks/useOnScreen';
 import { useSxpDataSource } from '../../../../core/hooks';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 const Img = ({ src, rec, item, index }) => {
     const ref = useRef(null);
     const isOnScreen = useOnScreen(ref);
@@ -14,6 +15,7 @@ const Img = ({ src, rec, item, index }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (React.createElement("img", { ref: ref, hidden: !src, className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, alt: '' }));
+    return (React.createElement("div", { ref: ref, hidden: !src },
+        React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
 };
 export default memo(Img);

package/lib/core/components/SxpPageRender/FormatImage.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from 'react';
+interface IFormatImageProps {
+    src?: string;
+    onLoad?: (e: any) => void;
+    style?: CSSProperties;
+    className?: any;
+    loading?: 'eager' | 'lazy';
+}
+interface IFormatImageRefProps {
+    setSrc: (v: string) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IFormatImageProps & React.RefAttributes<IFormatImageRefProps>>>;
+export default _default;

package/lib/core/components/SxpPageRender/FormatImage.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const FormatImage = (0, react_1.forwardRef)((props, ref) => {
+    const { src, onLoad, style, className, loading } = props;
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(src);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setSrc: (v) => {
+            setImgSrc(v);
+        }
+    }));
+    if (imgSrc === '' || !imgSrc)
+        return null;
+    return (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
+        react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
+        react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
+        react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
+        react_1.default.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+            } }))) : (react_1.default.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+        } }));
+});
+exports.default = (0, react_1.memo)(FormatImage);

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

@@ -2,33 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = (0, react_1.useState)(false);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    (0, react_1.useEffect)(() => {
-        if (src === '' || !src)
-            return;
-        const img = new Image();
-        img.src = `${src}?imageMogr2/format/jpg`;
-        img.onload = () => {
-            const aspectRatio = img.height / img.width;
-            const targetAspectRatio = 16 / 9;
-            const tolerance = 0.05;
-            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
-                setBlur(true);
-            }
-        };
-    }, [src]);
+    const onLoad = (img) => {
+        const aspectRatio = img.height / img.width;
+        const targetAspectRatio = 16 / 9;
+        const tolerance = 0.05;
+        if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+            setBlur(true);
+        }
+    };
     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,
+        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (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 }));
+            react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
+                    onLoad(e.target);
+                } }))) : (react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
+                onLoad(e.target);
+            } }));
     }, []);
     return (react_1.default.createElement("div", { style: {
             overflow: 'hidden',
@@ -36,15 +35,14 @@ const Picture = (props) => {
             width: '100%',
             position: 'relative'
         } },
-        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, {
+        react_1.default.createElement(FormatImage_1.default, { src: src, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            }, onLoad: onLoad }),
+        blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
@@ -52,6 +50,6 @@ const Picture = (props) => {
                 transform: 'translateY(-50%)',
                 left: 0,
                 right: 0
-            })));
+            } }))));
 };
 exports.default = Picture;

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

@@ -215,7 +215,8 @@ 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, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
+        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("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("./List.less");
+const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const hooks_1 = require("../../../../core/hooks");
 const WaterfallFlowItem = (props) => {
@@ -10,6 +11,7 @@ const WaterfallFlowItem = (props) => {
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const [showVideo, setShowVideo] = (0, react_1.useState)(false);
     const imgDom = (0, react_1.useRef)(null);
+    const ref = (0, react_1.useRef)(null);
     const videoDom = (0, react_1.useRef)(null);
     const canvasRef = (0, react_1.useRef)(null);
     const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
@@ -51,20 +53,20 @@ const WaterfallFlowItem = (props) => {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
-                    if (imgDom.current === null || src === '') {
+                    if (ref.current === null || src === '') {
                         return;
                     }
                     if (showVideo && firstFrameSrc) {
-                        imgDom.current.src = firstFrameSrc;
+                        imgDom.current.setSrc(firstFrameSrc);
                     }
                     else {
-                        imgDom.current.src = src;
+                        imgDom.current.setSrc(src);
                     }
-                    observer.unobserve(imgDom.current);
+                    observer.unobserve(ref.current);
                 }
             });
         });
-        observer.observe(imgDom.current);
+        observer.observe(ref.current);
         return () => {
             observer.disconnect();
         };
@@ -106,12 +108,12 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (react_1.default.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
+    return (react_1.default.createElement("div", { ref: ref, className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
         react_1.default.createElement("div", { className: 'list-content-listItem-picture' },
             showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
                 react_1.default.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                 react_1.default.createElement("canvas", { ref: canvasRef }))),
-            react_1.default.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
+            react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
         react_1.default.createElement("div", { className: 'list-content-listItem-info' },
             react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
             react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -10,6 +10,7 @@ const react_2 = require("swiper/react");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -87,7 +88,7 @@ const CommodityDetail = (_a) => {
                             width,
                             height: width
                         } },
-                        react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        react_1.default.createElement(FormatImage_1.default, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',

package/lib/materials/sxp/popup/CommodityDetailDiro/index.js

@@ -9,6 +9,7 @@ const modules_1 = require("swiper/modules");
 const react_2 = require("swiper/react");
 const arrow_png_1 = tslib_1.__importDefault(require("./arrow.png"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetailDiro = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "index"]);
@@ -129,7 +130,7 @@ const CommodityDetailDiro = (_a) => {
                             width,
                             height: width
                         } },
-                        react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        react_1.default.createElement(FormatImage_1.default, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -10,6 +10,7 @@ const react_2 = require("swiper/react");
 const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetailDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -105,7 +106,7 @@ Made in Italy` })));
                             width,
                             height: width
                         } },
-                        react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        react_1.default.createElement(FormatImage_1.default, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',

package/lib/materials/sxp/template/Commodity/index.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const Commodity = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
@@ -14,7 +15,7 @@ const Commodity = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',