pb-sxp-ui 1.0.91 → 1.0.93

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

@@ -4,6 +4,7 @@ import { useIconLink } from '../useIconLink';
 import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+import loading_gif from './loading.gif';
 const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -13,6 +14,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = useSwiperSlide();
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const [waiting, setWaiting] = useState(false);
     const videoId = `pb-cache-video-${index}`;
     const videoEleRef = useRef(null);
     const blur = useMemo(() => {
@@ -47,7 +49,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             return;
         videoRef.muted = muted;
     }, [muted, videoRef]);
-    const handleEnded = useCallback(() => {
+    const handlePlay = useCallback(() => {
         if (!videoRef)
             return;
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -57,6 +59,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!videoRef)
             return;
+        setWaiting(false);
         setIsLoadFinish(true);
         setIsPauseVideo(false);
         const item = data[index];
@@ -168,6 +171,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             });
         }
     }, [data, index, bffEventReport, videoRef, activeIndex]);
+    const handleWaiting = useCallback(() => {
+        setWaiting(true);
+    }, []);
     useEffect(() => {
         if (!isActive || !videoRef)
             return;
@@ -175,20 +181,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (!videoSrc)
             return;
         const Hls = window === null || window === void 0 ? void 0 : window.Hls;
-        if (videoSrc.includes('.m3u8')) {
-            if (Hls && Hls.isSupported()) {
-                const hls = new Hls();
-                hls.loadSource(videoSrc);
-                hls.attachMedia(videoRef);
-            }
-            else {
-                videoRef.src = videoSrc;
-            }
+        if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource(videoSrc);
+            hls.attachMedia(videoRef);
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            });
         }
         else {
             videoRef.src = videoSrc;
         }
-        setIsPauseVideo(false);
         const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
         const dom = document.querySelector('#player-container-id');
         const dom2 = document.querySelector('#player-container-id-copy');
@@ -201,14 +204,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
         return () => {
+            setIsLoadFinish(false);
             dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
         };
     }, [isActive, videoId, rec, videoRef]);
     useEffect(() => {
@@ -258,6 +265,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }
         return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    const renderLoading = useMemo(() => {
+        if (!waiting || !isLoadFinish)
+            return;
+        return (React.createElement("img", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+                right: 0,
+                transform: 'translateY(-100%)',
+                margin: 'auto',
+                width: '50px',
+                height: '50px',
+                objectFit: 'contain'
+            }, src: loading_gif, alt: 'placeholder image' }));
+    }, [waiting, isLoadFinish]);
     useEffect(() => {
         if (!videoRef)
             return;
@@ -290,7 +312,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
                 React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
-        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
+        renderPoster,
+        renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
             width: '100%',
             height,
@@ -298,6 +321,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }, onClick: handleClickVideo() },
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
+        renderLoading,
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
 };
 export default memo(VideoWidget);

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

@@ -366,7 +366,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     };
     const visList = useMemo(() => {
         var _a;
-        const list = activeIndex === 0
+        const list = activeIndex === 0 && !waterFallData
             ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
             : data === null || data === void 0 ? void 0 : data.map((item, index) => {
                 if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {

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

@@ -6,7 +6,7 @@ import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Img from '../components/Img';
 const Commodity = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -22,6 +22,6 @@ const Commodity = (_a) => {
                 overflow: 'hidden'
             }) },
             React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
-            React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
+            React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
 };
 export default memo(Commodity);

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import useOnScreen from '../../../../core/hooks/useOnScreen';
 import { useSxpDataSource } from '../../../../core/hooks';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
@@ -15,8 +15,11 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
+    const imgSrc = useMemo(() => {
+        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/40`;
+    }, [src]);
     return (React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
-            React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
+            React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
 };
 export default memo(Img);

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

@@ -7,6 +7,7 @@ const useIconLink_1 = require("../useIconLink");
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
+const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
 const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -16,6 +17,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = (0, react_2.useSwiperSlide)();
     const canvasRef = (0, react_1.useRef)(null);
     const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
+    const [waiting, setWaiting] = (0, react_1.useState)(false);
     const videoId = `pb-cache-video-${index}`;
     const videoEleRef = (0, react_1.useRef)(null);
     const blur = (0, react_1.useMemo)(() => {
@@ -50,7 +52,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             return;
         videoRef.muted = muted;
     }, [muted, videoRef]);
-    const handleEnded = (0, react_1.useCallback)(() => {
+    const handlePlay = (0, react_1.useCallback)(() => {
         if (!videoRef)
             return;
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -60,6 +62,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!videoRef)
             return;
+        setWaiting(false);
         setIsLoadFinish(true);
         setIsPauseVideo(false);
         const item = data[index];
@@ -171,6 +174,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             });
         }
     }, [data, index, bffEventReport, videoRef, activeIndex]);
+    const handleWaiting = (0, react_1.useCallback)(() => {
+        setWaiting(true);
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!isActive || !videoRef)
             return;
@@ -178,20 +184,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (!videoSrc)
             return;
         const Hls = window === null || window === void 0 ? void 0 : window.Hls;
-        if (videoSrc.includes('.m3u8')) {
-            if (Hls && Hls.isSupported()) {
-                const hls = new Hls();
-                hls.loadSource(videoSrc);
-                hls.attachMedia(videoRef);
-            }
-            else {
-                videoRef.src = videoSrc;
-            }
+        if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource(videoSrc);
+            hls.attachMedia(videoRef);
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            });
         }
         else {
             videoRef.src = videoSrc;
         }
-        setIsPauseVideo(false);
         const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
         const dom = document.querySelector('#player-container-id');
         const dom2 = document.querySelector('#player-container-id-copy');
@@ -204,14 +207,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
         return () => {
+            setIsLoadFinish(false);
             dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
         };
     }, [isActive, videoId, rec, videoRef]);
     (0, react_1.useEffect)(() => {
@@ -261,6 +268,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }
         return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    const renderLoading = (0, react_1.useMemo)(() => {
+        if (!waiting || !isLoadFinish)
+            return;
+        return (react_1.default.createElement("img", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+                right: 0,
+                transform: 'translateY(-100%)',
+                margin: 'auto',
+                width: '50px',
+                height: '50px',
+                objectFit: 'contain'
+            }, src: loading_gif_1.default, alt: 'placeholder image' }));
+    }, [waiting, isLoadFinish]);
     (0, react_1.useEffect)(() => {
         if (!videoRef)
             return;
@@ -293,7 +315,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
                 react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
-        renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
+        renderPoster,
+        renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
             width: '100%',
             height,
@@ -301,6 +324,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }, onClick: handleClickVideo() },
         react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
+        renderLoading,
         react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

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

@@ -369,7 +369,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     };
     const visList = (0, react_1.useMemo)(() => {
         var _a;
-        const list = activeIndex === 0
+        const list = activeIndex === 0 && !waterFallData
             ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
             : data === null || data === void 0 ? void 0 : data.map((item, index) => {
                 if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {

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

@@ -8,7 +8,7 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
 const hooks_1 = require("../../../../core/hooks");
 const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const Commodity = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -24,6 +24,6 @@ const Commodity = (_a) => {
                 overflow: 'hidden'
             }) },
             react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
-            react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
+            react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
 };
 exports.default = (0, react_1.memo)(Commodity);

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

@@ -18,8 +18,11 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
+    const imgSrc = (0, react_1.useMemo)(() => {
+        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/40`;
+    }, [src]);
     return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
 };
 exports.default = (0, react_1.memo)(Img);

package/package.json

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