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

package/dist/pb-ui.js

@@ -8224,7 +8224,7 @@
      * @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
      *
      */
@@ -8267,7 +8267,7 @@
                         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);
@@ -8335,15 +8335,16 @@
         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;
@@ -8382,10 +8383,10 @@
                             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 = React.memo(CommodityDetail$1);
@@ -8828,11 +8829,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 }))));
@@ -11533,7 +11535,7 @@ Made in Italy` })));
                 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;
@@ -11895,10 +11897,8 @@ Made in Italy` })));
             videoRef.current.muted = muted;
         }, [muted]);
         const handleVideoStart = React.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 = React.useCallback(() => {
@@ -11955,38 +11955,37 @@ Made in Italy` })));
                 });
             }
             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 = React.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;
@@ -12017,16 +12016,14 @@ Made in Italy` })));
             }
         }, [data, index, bffEventReport]);
         React.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) {
@@ -12049,12 +12046,10 @@ Made in Italy` })));
                 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);
@@ -12065,17 +12060,15 @@ Made in Italy` })));
         打开/关闭hashtag暂停/播放视频
         */
         React.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]);
         React.useEffect(() => {
@@ -12167,10 +12160,35 @@ Made in Italy` })));
             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] = React.useState(false);
         const imgDom = React.useRef(null);
         const { sxpParameter } = useSxpDataSource();
+        React.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,
@@ -12180,8 +12198,19 @@ Made in Italy` })));
             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
+                } }))));
     };
 
     /*