pb-sxp-ui 1.0.87 → 1.0.89

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

@@ -24,9 +24,8 @@ const useEventReport_1 = require("../../../core/hooks/useEventReport");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
 const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
 const localStore_1 = require("../../../core/utils/localStore");
-const Consent_1 = tslib_1.__importDefault(require("../Consent"));
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { schema } = (0, hooks_1.useEditor)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const viewImageStartTime = (0, react_1.useRef)(0);
@@ -37,58 +36,44 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed } = (0, useEventReport_1.useEventReport)();
-    const [videoRef, setVideoRef] = (0, react_1.useState)(null);
-    const playerRef = (0, react_1.useRef)();
+    const videoRef = (0, react_1.useRef)();
     const { productView } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
     }, [data, loading]);
-    const handleH5EnterLink = (0, react_1.useCallback)(() => {
-        if (data.length <= 0) {
-            return;
+    (0, react_1.useEffect)(() => {
+        (0, sessionStore_1.refreshFeSessionId)();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+            const now = new Date();
+            viewTime.current = now;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView'
+            });
         }
+    }, [data === null || data === void 0 ? void 0 : data.length]);
+    const handleH5EnterLink = (0, react_1.useCallback)(() => {
         (0, sessionStore_1.refreshFeSessionId)();
-        const now = new Date();
-        viewTime.current = now;
-        if (isInit) {
-            h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+        h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+        if (data.length > 0) {
+            const now = new Date();
+            viewTime.current = now;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView'
+            });
         }
-        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-            eventName: 'PageView'
-        });
-        setIsInit(true);
-    }, [data.length, bffFbReport, h5EnterLink, isInit]);
+    }, [data.length, bffFbReport, h5EnterLink]);
     const firstRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
-        if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
+        if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
             firstRef.current = true;
-            const player = TCPlayer('player-container-id', {
-                licenseUrl,
-                controls: false,
-                loop: false,
-                autoplay: true,
-                muted: true,
-                preload: 'auto',
-                posterImage: false,
-                bigPlayButton: true,
-                sources: ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url)
-                    ? [
-                        {
-                            src: (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url
-                        }
-                    ]
-                    : []
-            });
-            player === null || player === void 0 ? void 0 : player.ready(() => {
-                setVideoRef(player);
-            });
+            if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
+                videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
+            }
         }
-    }, [videoRef, licenseUrl, data]);
-    (0, react_1.useEffect)(() => {
-        if (!isInit)
-            handleH5EnterLink();
-    }, [handleH5EnterLink, isInit]);
+    }, [videoRef, data]);
     (0, react_1.useEffect)(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -203,7 +188,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : 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 }));
@@ -229,7 +214,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tipText,
         resolver,
         schema,
-        videoRef
+        videoRef.current
     ]);
     const onExpandableChange = (0, react_1.useCallback)((v) => {
         setIsShowMore(v);
@@ -383,14 +368,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
     };
     const visList = (0, react_1.useMemo)(() => {
-        const list = data === null || data === void 0 ? void 0 : data.map((item, index) => {
-            if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
-                return item;
-            }
-            else {
-                return null;
-            }
-        });
+        var _a;
+        const list = activeIndex === 0
+            ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
+            : data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                    return item;
+                }
+                else {
+                    return null;
+                }
+            });
         return !waterFallData ? list.concat([{ loading: true }]) : list;
     }, [data, activeIndex, waterFallData]);
     const renderView = (0, react_1.useMemo)(() => {
@@ -415,47 +403,46 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-        isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-                } })),
-            renderLogo,
-            react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
-            isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
-            react_1.default.createElement(react_2.Swiper, { style: {
-                    marginTop: tagHeight
-                }, ref: swiperRef, onSlideChange: () => {
-                    swiperRef.current.swiper.allowTouchMove = false;
-                    setTimeout(() => {
-                        swiperRef.current.swiper.allowTouchMove = true;
-                    }, 500);
-                }, onActiveIndexChange: (swiper) => {
-                    setActiveIndex(swiper.activeIndex);
-                    if (openHashtag)
-                        return;
-                    handleScrollEvent(swiper);
-                    if (waterFallData)
-                        return;
-                    if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
-                        if (!isLoadMore) {
-                            setIsLoadMore(true);
-                            loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
-                                setIsLoadMore(false);
-                            });
-                        }
+        waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+            } })),
+        renderLogo,
+        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
+        isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
+        react_1.default.createElement(react_2.Swiper, { style: {
+                marginTop: tagHeight
+            }, ref: swiperRef, onSlideChange: () => {
+                swiperRef.current.swiper.allowTouchMove = false;
+                setTimeout(() => {
+                    swiperRef.current.swiper.allowTouchMove = true;
+                }, 500);
+            }, onActiveIndexChange: (swiper) => {
+                setActiveIndex(swiper.activeIndex);
+                if (openHashtag)
+                    return;
+                handleScrollEvent(swiper);
+                if (waterFallData)
+                    return;
+                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                    if (!isLoadMore) {
+                        setIsLoadMore(true);
+                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                            setIsLoadMore(false);
+                        });
                     }
-                }, direction: 'vertical', height: height },
-                react_1.default.createElement(ToggleButton_1.default, { style: {
-                        position: 'fixed',
-                        visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
-                        zIndex: 999,
-                        [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
-                        [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 23
-                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
-                renderView))),
-        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
+                }
+            }, direction: 'vertical', height: height },
+            react_1.default.createElement(ToggleButton_1.default, { style: {
+                    position: 'fixed',
+                    visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
+                    zIndex: 999,
+                    [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
+                    [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
+                }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+            renderView),
+        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
         react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
-            react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
+            react_1.default.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
                     backgroundColor: 'transparent',
                     width: '100%',
                     height: '100%',

package/lib/core/context/SxpDataSourceProvider.js

@@ -8,6 +8,7 @@ const sessionStore_1 = require("../utils/sessionStore");
 const localStore_1 = require("../utils/localStore");
 const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
 const event_1 = tslib_1.__importStar(require("../utils/event"));
+const Consent_1 = tslib_1.__importDefault(require("../components/Consent"));
 exports.SxpDataSourceContext = (0, react_1.createContext)({
     rtcList: [],
     tagList: []
@@ -19,6 +20,7 @@ var DataSourceType;
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
 exports.DEFAULT_TAG = 'FOR U';
 const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
+    var _a, _b, _c;
     const [rtcList, setRtcList] = (0, react_1.useState)([]);
     const [tagList, setTagList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
@@ -79,10 +81,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e;
+        var _d, _e, _f, _g, _h;
         query = {
-            maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
-            defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
+            maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
+            defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
             'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
             'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
             hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -90,10 +92,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag: query === null || query === void 0 ? void 0 : query.themeTag
         };
         if (utmVal) {
-            const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
+            const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
+            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -105,7 +107,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize]);
     const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+        var _j, _k;
         if (rtcList.length <= 0) {
             return;
         }
@@ -115,8 +117,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
-        setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
+        setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
+        setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {
@@ -174,16 +176,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j, _k, _l, _m;
+        var _l, _m, _o, _p, _q;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
+            const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+            })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
+            setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
         }
         catch (e) {
             console.log('e', e);
@@ -234,8 +236,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport]);
     (0, react_1.useEffect)(() => {
-        h5EnterLink();
-    }, []);
+        if (!isShowConsent)
+            h5EnterLink();
+    }, [isShowConsent]);
     (0, react_1.useEffect)(() => {
         if (isShowConsent)
             return;
@@ -318,12 +321,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             isShowConsent,
             selectTag,
             setSelectTag
-        } }, render({
+        } }, isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
         rtcList,
         mutateLike: bffMutateLike,
         mutateUnlike: bffMutateUnlike,
         submitForm: bffSubmitForm,
         tagList
-    })));
+    }))));
 };
 exports.default = (0, react_1.memo)(SxpDataSourceProvider);

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
-const pro_components_1 = require("@ant-design/pro-components");
 const lodash_1 = require("lodash");
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
@@ -83,8 +82,7 @@ const AppointForm = (_a) => {
     return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
         react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
-                react_1.default.createElement(pro_components_1.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+            react_1.default.createElement("div", { className: 'pb-appoint-form-container' })),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
             react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
 };

package/lib/materials/sxp/template/Appoint/index.js

@@ -5,14 +5,15 @@ const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const hooks_1 = require("../../../../core/hooks");
+const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const Appoint = (_a) => {
-    var _b, _c, _d, _e;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+    var _b, _c, _d, _e, _f, _g;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
+    const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
+        react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name')));
 };
 exports.default = (0, react_1.memo)(Appoint);

package/lib/materials/sxp/template/Commodity/index.js

@@ -6,22 +6,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
-const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
+const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const Commodity = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__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 = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = (0, hooks_1.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_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',
@@ -30,7 +23,7 @@ const Commodity = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            react_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', 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_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', 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'))));
 };
 exports.default = (0, react_1.memo)(Commodity);

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

@@ -6,22 +6,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
-const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
+const Img_1 = tslib_1.__importDefault(require("../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 = tslib_1.__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 = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = (0, hooks_1.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_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',
@@ -30,7 +23,7 @@ const CommodityDiro = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            react_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.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_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.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'))));
 };
 exports.default = (0, react_1.memo)(CommodityDiro);

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

@@ -6,22 +6,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
-const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
+const Img_1 = tslib_1.__importDefault(require("../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 = tslib_1.__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 = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = (0, hooks_1.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_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',
@@ -30,7 +23,7 @@ const CommodityDiroNew = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            react_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.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_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.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'))));
 };
 exports.default = (0, react_1.memo)(CommodityDiroNew);

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

@@ -7,9 +7,9 @@ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProv
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
-const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
+const Img_1 = tslib_1.__importDefault(require("../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 = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
     const { sxpParameter, bffEventReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -21,15 +21,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_1.default.createElement(EventProvider_1.default, Object.assign({ index: index, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-        react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.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_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                 display: 'flex',
                 alignItems: 'center',
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            react_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: index_module_less_1.default['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'))));
 };
 exports.default = (0, react_1.memo)(Link);

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

@@ -36,11 +36,8 @@ const MultiCommodity = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                react_1.default.createElement(Img_1.default, { 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_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',
@@ -50,7 +47,7 @@ const MultiCommodity = (_a) => {
                     overflow: 'hidden'
                 }) },
                 react_1.default.createElement("div", { className: index_module_less_1.default['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_1.default.createElement("div", { className: (0, css_1.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_1.default.createElement("div", { className: (0, css_1.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'))))));
     })));
 };
 exports.default = (0, react_1.memo)(MultiCommodity);