pb-sxp-ui 1.0.27 → 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

@@ -12070,13 +12070,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             });
         }
     }, [data, index, bffEventReport]);
+    const blur = useMemo(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    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)}%) translate3d(0px, 0px, 0px)`
+            : 'translateY(-50%)';
+    }, [videoPostConfig]);
+    const blurBgSrc = useMemo(() => {
+        var _a;
+        return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
+    }, [firstFrameSrc, rec]);
     const handLoadeddata = useCallback(() => {
-        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-        if (!video)
+        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
             return;
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
         const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-        if (!canvas)
-            return;
         const ctx = canvas.getContext('2d');
         const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
         const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
@@ -12084,10 +12095,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         canvas.width = targetWidth;
         ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         setFirstFrameSrc(canvas.toDataURL());
-        canvas.remove();
     }, []);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
@@ -12110,14 +12120,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             videoRef.current.setAttribute('x5-playsinline', 'true');
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadeddata', handLoadeddata);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
+        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
         return () => {
-            var _a, _b, _c;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
+            var _a, _b, _c, _d;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
         };
     }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
     useEffect(() => {
@@ -12176,19 +12188,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
     }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-    const blur = useMemo(() => {
-        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-    }, [videoPostConfig]);
-    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%)';
-    }, [videoPostConfig]);
-    const blurBgSrc = useMemo(() => {
-        var _a;
-        return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
-    }, [firstFrameSrc, rec]);
+    const blurStyle = useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
     if (!rec.video) {
         return null;
     }
@@ -12198,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',
@@ -12216,7 +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 === null || sxpParameter === void 0 ? void 0 : 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'
@@ -12228,7 +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 === null || sxpParameter === void 0 ? void 0 : 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 })))));
 };
@@ -12283,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
  *
  */
@@ -12295,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',
@@ -13081,3 +13084,4 @@ function useEditorDataProvider() {
  */
 
 export { EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender, index$1 as core, Pagebuilder as default, defaultSetting, _materials_ as materials, useEditorDataProvider };
+//# sourceMappingURL=index.js.map