pb-sxp-ui 1.0.24 → 1.0.26

package/dist/pb-ui.js

@@ -8303,21 +8303,22 @@
      * @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` }),
@@ -8325,7 +8326,7 @@
                     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);
 
@@ -11981,7 +11982,7 @@ Made in Italy` })));
         SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
     })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const videoRef = React.useRef(null);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -11989,6 +11990,8 @@ Made in Italy` })));
         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;
@@ -12082,8 +12085,24 @@ Made in Italy` })));
                 });
             }
         }, [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);
@@ -12108,12 +12127,14 @@ Made in Italy` })));
             }
             (_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)
@@ -12170,17 +12191,61 @@ Made in Italy` })));
                 window.removeEventListener('beforeunload', handleBeforeUnload);
             };
         }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+        const blur = React.useMemo(() => {
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+        }, [videoPostConfig]);
+        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%)';
+        }, [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("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+        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("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(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%',
+                    height: 'auto',
+                    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 === 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: {
+                position: 'relative',
+                width: '100%',
+                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 }),
             renderPoster,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
     };
     var VideoWidget$1 = React.memo(VideoWidget);
 
@@ -12233,21 +12298,21 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-18 10:30:17
+     * @LastEditTime: 2024-04-18 19:27:35
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
     const Picture = (props) => {
-        const { src, height, width } = props;
-        const [blur, setBlur] = React.useState(false);
-        const onLoad = (img) => {
-            const aspectRatio = img.naturalHeight / img.naturalWidth;
-            const targetAspectRatio = 16 / 9;
-            const tolerance = 0.05; // 允许的宽高比误差范围
-            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
-                setBlur(true);
-            }
-        };
+        const { src, height, imgUrlsPostConfig } = props;
+        const blur = React.useMemo(() => {
+            return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
+        }, [imgUrlsPostConfig]);
+        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%)';
+        }, [imgUrlsPostConfig]);
         return (React.createElement("div", { style: {
                 overflow: 'hidden',
                 height,
@@ -12260,13 +12325,13 @@ Made in Italy` })));
                     objectFit: 'cover',
                     filter: blur ? 'blur(10px)' : 'none',
                     transform: blur ? 'scale(1.2)' : 'none'
-                }, onLoad: onLoad }),
+                } }),
             blur && (React.createElement(FormatImage$1, { src: src, style: {
                     width: '100%',
                     objectFit: 'contain',
                     position: 'absolute',
                     top: '50%',
-                    transform: 'translateY(-50%)',
+                    transform: translateY,
                     left: 0,
                     right: 0
                 } }))));
@@ -12276,10 +12341,11 @@ Made in Italy` })));
      * @Author: lewinlu@chatlabs.com
      * @Date: 2024-01-03 14:39:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-17 18:52:45
+     * @LastEditTime: 2024-04-18 19:56:22
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
      */
-    const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+    const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
+        var _a;
         const ref = React.useRef();
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -12302,9 +12368,9 @@ Made in Italy` })));
         // if (!isActive) {
         //   return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
         // }
-        return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+        return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
             return (React.createElement(SwiperSlide, { key: url },
-                React.createElement(Picture, { src: url, width: width, height: height })));
+                React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
         })));
     };
     var PictureGroup$1 = React.memo(PictureGroup);
@@ -12486,7 +12552,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-18 16:49:34
+     * @LastEditTime: 2024-04-18 19:27:03
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12647,10 +12713,10 @@ Made in Italy` })));
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
+                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
             }
             if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-                return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
+                return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
             }
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {