pb-sxp-ui 1.0.28 → 1.0.29

package/dist/index.css

@@ -1409,6 +1409,10 @@ button.swiper-pagination-bullet {
   background: #000 !important;
   opacity: 1 !important;
 }
+.video-container {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
 .video-container video {
   width: 100%;
   height: 100%;

package/dist/index.js

@@ -12076,7 +12076,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const translateY = 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 = useMemo(() => {
@@ -12188,6 +12188,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
     }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+    const blurStyle = useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
     if (!rec.video) {
         return null;
     }
@@ -12197,13 +12205,7 @@ 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',
@@ -12215,9 +12217,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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("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',
                         objectFit: 'contain'
@@ -12229,9 +12229,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 })))));
 };
@@ -12286,7 +12284,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
  *
  */
@@ -12298,22 +12296,24 @@ const Picture = (props) => {
     const translateY = 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 = 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',