pb-sxp-ui 1.0.3-alpha.2 → 1.0.3-alpha.4

package/dist/index.css

@@ -62,6 +62,7 @@
 
 .pb-commondity {
   position: relative;
+  height: 100%;
 }
 .pb-commondity-content {
   padding: 21px 19px 80px;
@@ -162,14 +163,16 @@
       -ms-flex: 1;
           flex: 1;
 }
-.pb-commondityDiroNew-content-top-price {
-  font-size: 13px;
-  font-weight: bold;
+.pb-commondityDiroNew-content-top-right {
   -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
           flex-shrink: 0;
   margin-left: 35px;
 }
+.pb-commondityDiroNew-content-top-right-price {
+  font-size: 13px;
+  font-weight: bold;
+}
 .pb-commondityDiroNew-content-collection {
   font-size: 13px;
   color: #757575;
@@ -669,7 +672,6 @@
   margin-bottom: 40px;
   text-align: center;
   color: #757575;
-  display: block;
   font-size: 12px;
   text-decoration: underline;
   cursor: pointer;
@@ -1454,6 +1456,7 @@ button.swiper-pagination-bullet {
   height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
+  display: block;
 }
 .flex {
   display: -webkit-box;

package/dist/index.js

@@ -8209,7 +8209,7 @@ var Modal$1 = memo(Modal);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-02 18:52:59
+ * @LastEditTime: 2024-04-09 11:00:07
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
  *
  */
@@ -8252,7 +8252,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                     const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
                     const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
                     const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
-                    const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 4;
+                    const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
                     const lineHeight = isNaN(lh) ? fs : lh;
                     if (text && height > lineHeight * lineClamp) {
                         setIsShowMore(false);
@@ -8320,15 +8320,16 @@ const CommodityDetail$1 = (_a) => {
     const width = isPreview ? 375 : window.innerWidth;
     const renderContent = ({ isPost }) => {
         var _a, _b, _c;
-        return (React.createElement("div", { className: 'pb-commondity-content' },
-            React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
-            React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
-            React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
-            React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+        return (React.createElement("div", null,
+            React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
+            React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
+            React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
+            React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+                React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
             bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
             collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
             necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
-            18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info })));
+            18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
     };
     const renderBtn = () => {
         var _a;
@@ -8367,10 +8368,10 @@ const CommodityDetail$1 = (_a) => {
                         objectFit: 'cover',
                         width: '100%'
                     }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
-            renderContent({ isPost })),
+            React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
-            renderContent({ isPost: false }),
+            React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
             renderBtn())));
 };
 var CommodityDetailComponent = memo(CommodityDetail$1);
@@ -8813,11 +8814,12 @@ Made in Italy` })));
                     }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
             React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
-                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
-                    React.createElement("div", { className: '' },
-                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
-                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
-                React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
                 (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
                 productInfoText({ isPost }))),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
@@ -11518,7 +11520,7 @@ const WaterfallFlowItem = (props) => {
             React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
         React.createElement("div", { className: 'list-content-listItem-info' },
             React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
-            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
+            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
 };
 function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h;
@@ -11880,10 +11882,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         videoRef.current.muted = muted;
     }, [muted]);
     const handleVideoStart = useCallback(() => {
-        var _a, _b;
-        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-            return;
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+        var _a;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
     const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = useCallback(() => {
@@ -11940,38 +11940,37 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             });
         }
         setTimeout(() => {
-            var _a, _b;
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-                return;
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+            var _a;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         }, 0);
     }, [index, bffEventReport, data, isLoad]);
     const handleClickVideo = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e, _f;
-        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-            return;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!isLoad)
             return;
-        const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
+        data[index];
+        ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+        const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
+                (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
+                (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
+                    (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
                 }
                 else {
-                    (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
+                    (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
@@ -12002,16 +12001,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
     }, [data, index, bffEventReport]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         if (data.length <= 0)
             return;
         if (!videoRef.current)
             return;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         setIsPauseVideo(false);
         if (!isActive) {
-            if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
             return;
         }
         if (!videoRef.current.src) {
@@ -12034,12 +12031,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
         else {
-            if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
-                return;
             videoRef.current.play();
         }
-        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
-        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
+        (_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);
         return () => {
             var _a, _b;
             (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
@@ -12050,17 +12045,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
     打开/关闭hashtag暂停/播放视频
     */
     useEffect(() => {
-        var _a, _b, _c, _d;
-        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-            return;
-        const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
+        var _a, _b, _c;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         if (!isActive)
             return;
         if (!isPause && openHashtag) {
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
         else if (!openHashtag) {
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
         }
     }, [openHashtag, isActive]);
     useEffect(() => {
@@ -12152,10 +12145,35 @@ const FingerSwipeTip = ({ imageUrl }) => {
         React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
 };
 
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2024-03-20 10:27:31
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2024-04-08 18:44:58
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
+ *
+ */
 const Picture = (props) => {
     const { src, height, width } = props;
+    const [blur, setBlur] = useState(false);
     const imgDom = useRef(null);
     const { sxpParameter } = useSxpDataSource();
+    useEffect(() => {
+        if (imgDom.current === null || src === '') {
+            return;
+        }
+        const img = new Image();
+        img.src = src;
+        img.onload = () => {
+            const aspectRatio = img.height / img.width;
+            const targetAspectRatio = 16 / 9;
+            const tolerance = 0.05; // 允许的宽高比误差范围
+            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+                setBlur(true);
+            }
+        };
+        imgDom.current.src = src;
+    }, [src]);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
             height,
@@ -12165,8 +12183,19 @@ const Picture = (props) => {
         React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
                 height: '100%',
                 width: '100%',
-                objectFit: 'cover'
-            } })));
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            } }),
+        blur && (React.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
+                width: '100%',
+                objectFit: 'contain',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                left: 0,
+                right: 0
+            } }))));
 };
 
 /*