pb-sxp-ui 1.0.94 → 1.0.96

package/dist/pb-ui.js

@@ -10267,7 +10267,7 @@ Made in Italy` })));
             }
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
                 React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
                 React.createElement("div", { className: css.css({
@@ -10279,7 +10279,7 @@ Made in Italy` })));
                         overflow: 'hidden'
                     }) },
                     React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))))));
         })));
     };
     var MultiCommodityComponent = React.memo(MultiCommodity$1);
@@ -12910,11 +12910,15 @@ Made in Italy` })));
         }, [videoRef]);
         const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
         const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (!videoRef)
                 return;
             setWaiting(false);
             setIsLoadFinish(true);
+        }, []);
+        const handleStartPlay = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (!videoRef)
+                return;
             setIsPauseVideo(false);
             const item = data[index];
             if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -12965,8 +12969,9 @@ Made in Italy` })));
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef)
                 return;
+            handleStartPlay();
             handLoadeddata();
-        }, [videoRef, handLoadeddata]);
+        }, [videoRef, handLoadeddata, handleStartPlay]);
         const handleClickVideo = React.useCallback((type) => () => {
             if (!videoRef)
                 return;
@@ -13056,6 +13061,7 @@ Made in Italy` })));
             videoRef.setAttribute('webkit-playsinline', 'true');
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -13066,9 +13072,11 @@ Made in Italy` })));
                 dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
             };
         }, [isActive, videoId, rec, videoRef]);
@@ -13162,7 +13170,7 @@ Made in Italy` })));
             return null;
         }
         return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
-            !isBgColor && isLoadFinish && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+            !isBgColor && isLoadFinish && blurBgSrc && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
             React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
             React.createElement("div", { style: {
                     position: 'absolute',