pb-sxp-ui 1.0.24 → 1.0.26

package/es/core/components/SxpPageRender/FormatImage.js

@@ -1,15 +1,16 @@
-import React, { forwardRef, memo, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
 const FormatImage = forwardRef((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
-    const [imgSrc, setImgSrc] = useState(src);
+    const [imgSrc, setImgSrc] = useState();
     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,
+    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` }),
@@ -17,6 +18,6 @@ const FormatImage = 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);
-        } }));
+        } }))));
 });
 export default memo(FormatImage);

package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { postConfigType } from '..';
 interface IPictureProps {
     src: string;
-    height: number;
-    width: number;
+    height?: number;
+    imgUrlsPostConfig?: postConfigType;
 }
 declare const Picture: (props: IPictureProps) => React.JSX.Element;
 export default Picture;

package/es/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import FormatImage from '../FormatImage';
 const Picture = (props) => {
-    const { src, height, width } = props;
-    const [blur, setBlur] = 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 = useMemo(() => {
+        return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
+    }, [imgUrlsPostConfig]);
+    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%)';
+    }, [imgUrlsPostConfig]);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
             height,
@@ -23,13 +23,13 @@ const Picture = (props) => {
                 objectFit: 'cover',
                 filter: blur ? 'blur(10px)' : 'none',
                 transform: blur ? 'scale(1.2)' : 'none'
-            }, onLoad: onLoad }),
+            } }),
         blur && (React.createElement(FormatImage, { src: src, style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
                 top: '50%',
-                transform: 'translateY(-50%)',
+                transform: translateY,
                 left: 0,
                 right: 0
             } }))));

package/es/core/components/SxpPageRender/PictureGroup/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RecItemType } from '../typing';
+import { postConfigType } from '..';
 interface IPictureGroupProps {
     imgUrls?: string[];
     width: number;
@@ -8,6 +9,7 @@ interface IPictureGroupProps {
     index: number;
     onReportViewImageEnd: (rec: RecItemType) => void;
     onViewImageStartEvent: (index: number) => void;
+    imgUrlsPostConfig?: postConfigType;
 }
 declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
 export default _default;

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -3,7 +3,8 @@ import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
-const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    var _a;
     const ref = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -23,9 +24,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    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 })));
     })));
 };
 export default memo(PictureGroup);

package/es/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RecItemType } from '../typing';
+import { postConfigType } from '..';
 interface IVideoWidgetProps {
     rec: RecItemType;
     index: number;
@@ -7,6 +8,7 @@ interface IVideoWidgetProps {
     data: RecItemType[];
     muted: boolean;
     activeIndex?: number;
+    videoPostConfig?: postConfigType;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -1,9 +1,10 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSwiperSlide } from 'swiper/react';
 import { useIconLink } from '../useIconLink';
+import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const videoRef = useRef(null);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -11,6 +12,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
     const [isLoadFinish, setIsLoadFinish] = useState(false);
     const [isFirstPlay, setIsFirstPlay] = useState(true);
     const { isActive } = useSwiperSlide();
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
     useEffect(() => {
         if (!videoRef.current)
             return;
@@ -104,8 +107,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             });
         }
     }, [data, index, bffEventReport]);
+    const handLoadeddata = 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();
+    }, []);
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
@@ -117,12 +136,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
         (_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]);
     useEffect(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -176,16 +197,60 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             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]);
     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,
+            overflow: 'hidden'
+        } },
+        React.createElement(FormatImage, { 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
+            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 })));
+        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };
 export default memo(VideoWidget);

package/es/core/components/SxpPageRender/index.d.ts

@@ -1,7 +1,12 @@
 import { CSSProperties, FC } from 'react';
 import { RecItemType } from './typing';
 import './index.less';
-interface ISxpPageRenderProps {
+export type postConfigType = {
+    mode?: '1' | '2';
+    offsetTop?: number;
+    delay?: number;
+};
+export interface ISxpPageRenderProps {
     globalConfig?: {
         isShowLogo?: boolean;
         logoUrl?: string;
@@ -19,6 +24,8 @@ interface ISxpPageRenderProps {
         swipeTipIcon?: string;
         hashTag?: any[];
         isOpenTextShadow?: boolean;
+        videoPost?: postConfigType;
+        imgUrlsPost?: postConfigType;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/es/core/components/SxpPageRender/index.js

@@ -153,10 +153,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
+            return (React.createElement(VideoWidget, { 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, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
+            return (React.createElement(PictureGroup, { 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) => {

package/lib/core/components/SxpPageRender/FormatImage.js

@@ -4,15 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const FormatImage = (0, react_1.forwardRef)((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(src);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)();
     (0, react_1.useImperativeHandle)(ref, () => ({
         setSrc: (v) => {
             setImgSrc(v);
         }
     }));
-    if (imgSrc === '' || !imgSrc)
-        return null;
-    return (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
+    (0, react_1.useEffect)(() => {
+        setImgSrc(src);
+    }, [src]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
         react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
         react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
         react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
@@ -20,6 +21,6 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
             } }))) : (react_1.default.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-        } }));
+        } }))));
 });
 exports.default = (0, react_1.memo)(FormatImage);

package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { postConfigType } from '..';
 interface IPictureProps {
     src: string;
-    height: number;
-    width: number;
+    height?: number;
+    imgUrlsPostConfig?: postConfigType;
 }
 declare const Picture: (props: IPictureProps) => React.JSX.Element;
 export default Picture;

package/lib/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -4,16 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const Picture = (props) => {
-    const { src, height, width } = props;
-    const [blur, setBlur] = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
+    }, [imgUrlsPostConfig]);
+    const translateY = (0, react_1.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_1.default.createElement("div", { style: {
             overflow: 'hidden',
             height,
@@ -26,13 +26,13 @@ const Picture = (props) => {
                 objectFit: 'cover',
                 filter: blur ? 'blur(10px)' : 'none',
                 transform: blur ? 'scale(1.2)' : 'none'
-            }, onLoad: onLoad }),
+            } }),
         blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
                 top: '50%',
-                transform: 'translateY(-50%)',
+                transform: translateY,
                 left: 0,
                 right: 0
             } }))));

package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RecItemType } from '../typing';
+import { postConfigType } from '..';
 interface IPictureGroupProps {
     imgUrls?: string[];
     width: number;
@@ -8,6 +9,7 @@ interface IPictureGroupProps {
     index: number;
     onReportViewImageEnd: (rec: RecItemType) => void;
     onViewImageStartEvent: (index: number) => void;
+    imgUrlsPostConfig?: postConfigType;
 }
 declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
 export default _default;

package/lib/core/components/SxpPageRender/PictureGroup/index.js

@@ -6,7 +6,8 @@ const modules_1 = require("swiper/modules");
 const react_2 = require("swiper/react");
 const Picture_1 = tslib_1.__importDefault(require("./Picture"));
 const hooks_1 = require("../../../../core/hooks");
-const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    var _a;
     const ref = (0, react_1.useRef)();
     const { isActive } = (0, react_2.useSwiperSlide)();
     const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -26,9 +27,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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_1.default.createElement(react_2.SwiperSlide, { key: url },
-            react_1.default.createElement(Picture_1.default, { src: url, width: width, height: height })));
+            react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
     })));
 };
 exports.default = (0, react_1.memo)(PictureGroup);

package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RecItemType } from '../typing';
+import { postConfigType } from '..';
 interface IVideoWidgetProps {
     rec: RecItemType;
     index: number;
@@ -7,6 +8,7 @@ interface IVideoWidgetProps {
     data: RecItemType[];
     muted: boolean;
     activeIndex?: number;
+    videoPostConfig?: postConfigType;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -4,9 +4,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const useIconLink_1 = require("../useIconLink");
+const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const videoRef = (0, react_1.useRef)(null);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -14,6 +15,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
     const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
     const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
     const { isActive } = (0, react_2.useSwiperSlide)();
+    const canvasRef = (0, react_1.useRef)(null);
+    const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
         if (!videoRef.current)
             return;
@@ -107,8 +110,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             });
         }
     }, [data, index, bffEventReport]);
+    const handLoadeddata = (0, react_1.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();
+    }, []);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
@@ -120,12 +139,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
         (_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]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -179,16 +200,60 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
     }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+    const blur = (0, react_1.useMemo)(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    const translateY = (0, react_1.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 = (0, react_1.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_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+    return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width: '100%',
+            height,
+            overflow: 'hidden'
+        } },
+        react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            } }),
+        react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
+        react_1.default.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: 'auto',
+                top: '50%',
+                transform: translateY,
+                left: 0,
+                right: 0
+            } },
+            react_1.default.createElement("div", { style: { position: 'relative' } },
+                react_1.default.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_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width: '100%',
-            height
+            height,
+            overflow: 'hidden'
         } },
-        react_1.default.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_1.default.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_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/SxpPageRender/index.d.ts

@@ -1,7 +1,12 @@
 import { CSSProperties, FC } from 'react';
 import { RecItemType } from './typing';
 import './index.less';
-interface ISxpPageRenderProps {
+export type postConfigType = {
+    mode?: '1' | '2';
+    offsetTop?: number;
+    delay?: number;
+};
+export interface ISxpPageRenderProps {
     globalConfig?: {
         isShowLogo?: boolean;
         logoUrl?: string;
@@ -19,6 +24,8 @@ interface ISxpPageRenderProps {
         swipeTipIcon?: string;
         hashTag?: any[];
         isOpenTextShadow?: boolean;
+        videoPost?: postConfigType;
+        imgUrlsPost?: postConfigType;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/lib/core/components/SxpPageRender/index.js

@@ -156,10 +156,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
+            return (react_1.default.createElement(VideoWidget_1.default, { 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_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
+            return (react_1.default.createElement(PictureGroup_1.default, { 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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",