pb-sxp-ui 1.0.24 → 1.0.25

package/dist/index.cjs

@@ -11989,7 +11989,7 @@ var SXP_EVENT_TYPE;
     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();
@@ -12178,17 +12178,54 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             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]);
     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
+        } },
+        React.createElement(FormatImage$1, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : '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, 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
         } },
         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 }),
         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);
 
@@ -12241,21 +12278,21 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @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,
@@ -12268,13 +12305,13 @@ const Picture = (props) => {
                 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
             } }))));
@@ -12284,10 +12321,11 @@ const Picture = (props) => {
  * @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();
@@ -12310,9 +12348,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
     // 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);
@@ -12494,7 +12532,7 @@ const Nudge = ({ nudge }) => {
  * @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
  *
  */
@@ -12655,10 +12693,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     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) => {