pb-sxp-ui 1.0.25 → 1.0.27

package/dist/index.cjs

@@ -8311,21 +8311,22 @@ var ExpandableText$1 = React.memo(ExpandableText);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 20:45:55
+ * @LastEditTime: 2024-04-19 14:12:55
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
  *
  */
 const FormatImage = React.forwardRef((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
-    const [imgSrc, setImgSrc] = React.useState(src);
+    const [imgSrc, setImgSrc] = React.useState();
     React.useImperativeHandle(ref, () => ({
         setSrc: (v) => {
             setImgSrc(v);
         }
     }));
-    if (imgSrc === '' || !imgSrc)
-        return null;
-    return (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
+    React.useEffect(() => {
+        setImgSrc(src);
+    }, [src]);
+    return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
         React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
         React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
         React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
@@ -8333,7 +8334,7 @@ const FormatImage = React.forwardRef((props, ref) => {
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
             } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-        } }));
+        } }))));
 });
 var FormatImage$1 = React.memo(FormatImage);
 
@@ -11997,6 +11998,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const [isLoadFinish, setIsLoadFinish] = React.useState(false);
     const [isFirstPlay, setIsFirstPlay] = React.useState(true);
     const { isActive } = useSwiperSlide();
+    const canvasRef = React.useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
     React.useEffect(() => {
         if (!videoRef.current)
             return;
@@ -12090,8 +12093,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             });
         }
     }, [data, index, bffEventReport]);
+    const handLoadeddata = React.useCallback(() => {
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        if (!video)
+            return;
+        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;
+        canvas.height = targetHeight;
+        canvas.width = targetWidth;
+        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        setFirstFrameSrc(canvas.toDataURL());
+        canvas.remove();
+    }, []);
     React.useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
@@ -12116,12 +12135,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }
         (_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);
         return () => {
-            var _a, _b;
+            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);
         };
-    }, [handleLoadedMetadata, handlePlaying, rec.video]);
+    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
     React.useEffect(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -12187,21 +12208,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
             : 'translateY(-50%)';
     }, [videoPostConfig]);
+    const blurBgSrc = React.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]);
     if (!rec.video) {
         return null;
     }
     return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width: '100%',
-            height
+            height,
+            overflow: 'hidden'
         } },
-        React.createElement(FormatImage$1, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+        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("canvas", { ref: canvasRef, style: { display: 'none' } }),
         React.createElement("div", { style: {
                 position: 'absolute',
                 width: '100%',
@@ -12212,18 +12239,19 @@ 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, 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', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                         width: '100%',
                         height: 'auto',
                         objectFit: 'contain'
                     } }),
-                renderPoster,
-                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width: '100%',
-            height
+            height,
+            overflow: 'hidden'
         } },
-        React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, 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', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, 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 })))));
 };
@@ -13085,4 +13113,3 @@ exports.default = Pagebuilder;
 exports.defaultSetting = defaultSetting;
 exports.materials = _materials_;
 exports.useEditorDataProvider = useEditorDataProvider;
-//# sourceMappingURL=index.cjs.map