pb-sxp-ui 1.0.28 → 1.0.30

package/dist/index.cjs

@@ -12099,7 +12099,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     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(() => {
@@ -12211,6 +12211,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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;
     }
@@ -12220,29 +12228,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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 }))),
@@ -12252,9 +12252,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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 })))));
 };
@@ -12309,7 +12307,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @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
  *
  */
@@ -12321,22 +12319,24 @@ const Picture = (props) => {
     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',