pb-sxp-ui 1.0.87 → 1.0.89

package/es/materials/sxp/template/CommodityDiro/index.js

@@ -4,22 +4,15 @@ import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
-import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
+import Img from '../components/Img';
 const CommodityDiro = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage, { className: css({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css({
                 color: '#fff',
                 display: 'flex',
@@ -28,7 +21,7 @@ const CommodityDiro = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-            React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+            React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
 };
 export default memo(CommodityDiro);

package/es/materials/sxp/template/CommodityDiroNew/index.js

@@ -4,22 +4,15 @@ import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
-import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
+import Img from '../components/Img';
 const CommodityDiroNew = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage, { className: css({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css({
                 color: '#fff',
                 display: 'flex',
@@ -28,7 +21,7 @@ const CommodityDiroNew = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-            React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+            React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop now'))));
 };
 export default memo(CommodityDiroNew);

package/es/materials/sxp/template/Link/index.js

@@ -5,9 +5,9 @@ import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
-import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
+import Img from '../components/Img';
 const Link = (_a) => {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
     const { sxpParameter, bffEventReport } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
@@ -19,15 +19,15 @@ const Link = (_a) => {
             window.location.href = window.getJointUtmLink(cta.link);
         }
     };
+    const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider, Object.assign({ index: index, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-        React.createElement("div", { className: css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
+        React.createElement(Img, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css({
                 display: 'flex',
                 alignItems: 'center',
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_f = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _f !== void 0 ? _f : 'Product Name'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name'))));
 };
 export default memo(Link);

package/es/materials/sxp/template/MultiCommodity/index.js

@@ -34,11 +34,8 @@ const MultiCommodity = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img, { 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, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        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(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img, { 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({
                     color: '#fff',
                     display: 'flex',
@@ -48,7 +45,7 @@ const MultiCommodity = (_a) => {
                     overflow: 'hidden'
                 }) },
                 React.createElement("div", { className: styles['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(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(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'))))));
     })));
 };
 export default memo(MultiCommodity);

package/es/materials/sxp/template/MultiCommodityDiro/index.js

@@ -33,11 +33,8 @@ const MultiCommodityDiro = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img, { 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, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img, { 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({
                     color: '#000',
                     display: 'flex',
@@ -47,7 +44,7 @@ const MultiCommodityDiro = (_a) => {
                     overflow: 'hidden'
                 }) },
                 React.createElement("div", { className: styles['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(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', 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(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', 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'))))));
     })));
 };
 export default memo(MultiCommodityDiro);

package/es/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -33,11 +33,8 @@ const MultiCommodityDiroNew = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img, { 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, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img, { 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({
                     color: '#fff',
                     display: 'flex',
@@ -48,7 +45,7 @@ const MultiCommodityDiroNew = (_a) => {
                     lineHeight: '20px'
                 }) },
                 React.createElement("div", { className: styles['tow-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(Object.assign({ 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(Object.assign({ 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'))))));
     })));
 };
 export default memo(MultiCommodityDiroNew);

package/es/materials/sxp/template/components/EventProvider.js

@@ -1,26 +1,14 @@
 import { __rest } from "tslib";
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import { throttle } from 'lodash';
-import useOnScreen from '../../../../core/hooks/useOnScreen';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 const EventProvider = (_a) => {
     var { rec, children, className, onClick, style, isExternalLink = false, index } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
     const ref = useRef(null);
-    const isOnScreen = useOnScreen(ref);
     const { popup } = useEditor();
     const { setPopupDetailData, ctaEvent } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
-    useEffect(() => {
-        var _a, _b;
-        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'ctaExposure',
-                eventDescription: 'The cta was shown to the user'
-            }, rec, item, index);
-        }
-    }, [isOnScreen, ref, rec, ctaEvent, index]);
     const handleClick = throttle(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;

package/es/materials/sxp/template/components/Img.d.ts

@@ -1,11 +1,13 @@
 import React, { CSSProperties } from 'react';
-import { ProductInfoType, RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import { ProductInfoType, RecItemType, VideoInfoType } from '../../../../core/components/SxpPageRender/typing';
 export interface IImgProps {
-    src: string;
+    src?: string;
     rec?: RecItemType;
-    item?: ProductInfoType;
+    item?: ProductInfoType | VideoInfoType | null;
     index?: number;
     style?: CSSProperties;
+    translateY?: number;
+    imgStyle?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

package/es/materials/sxp/template/components/Img.js

@@ -3,7 +3,7 @@ import React, { memo, useEffect, useRef } from 'react';
 import useOnScreen from '../../../../core/hooks/useOnScreen';
 import { useSxpDataSource } from '../../../../core/hooks';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
-const Img = ({ src, rec, item, index, style }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     const ref = useRef(null);
     const isOnScreen = useOnScreen(ref);
     const { ctaEvent } = useSxpDataSource();
@@ -15,7 +15,8 @@ const Img = ({ src, rec, item, index, style }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
-        React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }, style)), src: src })));
+    return (React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
+        React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
+            React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
 };
 export default memo(Img);

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

@@ -2,22 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const hooks_1 = require("../../../core/hooks");
 const FormatImage = (0, react_1.forwardRef)((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
     const [imgSrc, setImgSrc] = (0, react_1.useState)();
-    const { swiperRef } = (0, hooks_1.useSxpDataSource)();
     (0, react_1.useImperativeHandle)(ref, () => ({
         setSrc: (v) => {
             setImgSrc(v);
         }
     }));
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const index = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
-        if (index === 0 || index > 0)
-            setImgSrc(src);
-    }, [src, swiperRef]);
+        setImgSrc(src);
+    }, [src]);
     const imgRef = (0, react_1.useRef)(null);
     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 }),

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

@@ -7,6 +7,7 @@ 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 hls_js_1 = tslib_1.__importDefault(require("hls.js"));
 const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -48,7 +49,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     (0, react_1.useEffect)(() => {
         if (!videoRef)
             return;
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
+        videoRef.muted = muted;
     }, [muted, videoRef]);
     const handleEnded = (0, react_1.useCallback)(() => {
         if (!videoRef)
@@ -63,10 +64,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setIsLoadFinish(true);
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
-            videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
-            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
+            videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
+            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
             const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
@@ -90,21 +91,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a;
         if (!videoRef || firstFrameSrc || !blur)
             return;
-        const videoDomRef = document.getElementById('player-container-id_html5_api');
-        if (!videoDomRef)
-            return;
-        videoDomRef.style.objectFit = 'contain';
+        videoRef.style.objectFit = 'contain';
         if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
             return;
         const setFrameImg = () => {
-            const video = videoDomRef;
             const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
             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);
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
             setFirstFrameSrc(canvas.toDataURL());
         };
         setFrameImg();
@@ -117,15 +114,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             return;
         handLoadeddata();
     }, [videoRef, handLoadeddata]);
-    const handleCanplay = (0, react_1.useCallback)(() => {
-        setIsLoadFinish(true);
-    }, []);
     const handleClickVideo = (0, react_1.useCallback)((type) => () => {
         if (!videoRef)
             return;
         if (!isLoadFinish)
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
@@ -157,10 +151,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (activeIndex !== index)
             return;
         const item = data[index];
-        const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-        const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
-            const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
+        const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+        const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) {
+            const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) - videoStartTime.current).toFixed(2);
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playOverVideo',
@@ -184,7 +178,19 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
         if (!videoSrc)
             return;
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
+        if (videoSrc.includes('.m3u8')) {
+            if (hls_js_1.default.isSupported()) {
+                const hls = new hls_js_1.default();
+                hls.loadSource(videoSrc);
+                hls.attachMedia(videoRef.current);
+            }
+            else {
+                videoRef.src = videoSrc;
+            }
+        }
+        else {
+            videoRef.src = videoSrc;
+        }
         setIsPauseVideo(false);
         const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
         const dom = document.querySelector('#player-container-id');
@@ -192,18 +198,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (!dom && !dom2)
             return;
         videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
+        videoRef.setAttribute('x5-playsinline', 'true');
+        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('playing', handlePlaying);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
         return () => {
             dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
+            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('playing', handlePlaying);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
         };
     }, [isActive, videoId, rec, videoRef]);
     (0, react_1.useEffect)(() => {
@@ -222,7 +230,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     (0, react_1.useEffect)(() => {
         if (!isActive || !videoRef)
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
         if (!isPause && openHashtag) {
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
         }