pb-sxp-ui 1.0.28 → 1.0.30

package/dist/pb-ui.js

@@ -12091,7 +12091,7 @@ Made in Italy` })));
         const translateY = React.useMemo(() => {
             var _a;
             return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
-                ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
+                ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
                 : 'translateY(-50%)';
         }, [videoPostConfig]);
         const blurBgSrc = React.useMemo(() => {
@@ -12203,6 +12203,14 @@ Made in Italy` })));
                 window.removeEventListener('beforeunload', handleBeforeUnload);
             };
         }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+        const blurStyle = React.useMemo(() => {
+            return blur
+                ? {
+                    filter: 'blur(10px)',
+                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+                }
+                : {};
+        }, [blur]);
         if (!rec.video) {
             return null;
         }
@@ -12212,29 +12220,21 @@ Made in Italy` })));
                 height,
                 overflow: 'hidden'
             } },
-            React.createElement(FormatImage$1, { src: blurBgSrc, style: {
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                    filter: blur ? 'blur(10px)' : 'none',
-                    transform: blur ? 'scale(1.2)' : 'none'
-                } }),
+            React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
             React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
             React.createElement("div", { style: {
                     position: 'absolute',
                     width: '100%',
-                    height: 'auto',
+                    height: '100%',
                     top: '50%',
                     transform: translateY,
                     left: 0,
                     right: 0
                 } },
-                React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 
-                        // poster={sxpParameter?.placeholder_image}
-                        muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
+                React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
+                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                             width: '100%',
-                            height: 'auto',
+                            height: '100%',
                             objectFit: 'contain'
                         } }),
                     React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
@@ -12244,9 +12244,7 @@ Made in Italy` })));
                 height,
                 overflow: 'hidden'
             } },
-            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 
-                // poster={sxpParameter?.placeholder_image}
-                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, crossOrigin: 'anonymous', 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 })))));
     };
@@ -12301,7 +12299,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-18 19:27:35
+     * @LastEditTime: 2024-04-22 14:04:00
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
@@ -12313,22 +12311,24 @@ Made in Italy` })));
         const translateY = React.useMemo(() => {
             var _a;
             return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
-                ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
+                ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
                 : 'translateY(-50%)';
         }, [imgUrlsPostConfig]);
+        const blurStyle = React.useMemo(() => {
+            return blur
+                ? {
+                    filter: 'blur(10px)',
+                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+                }
+                : {};
+        }, [blur]);
         return (React.createElement("div", { style: {
                 overflow: 'hidden',
                 height,
                 width: '100%',
                 position: 'relative'
             } },
-            React.createElement(FormatImage$1, { src: src, style: {
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                    filter: blur ? 'blur(10px)' : 'none',
-                    transform: blur ? 'scale(1.2)' : 'none'
-                } }),
+            React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
             blur && (React.createElement(FormatImage$1, { src: src, style: {
                     width: '100%',
                     objectFit: 'contain',