pb-sxp-ui 1.15.12-alpha.8 → 1.15.13-alpha.2

package/dist/index.cjs

@@ -44,7 +44,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __rest(s, e) {
@@ -747,12 +747,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
         if (options.type === 'beacon' && navigator.sendBeacon) {
             return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
-                JSON.stringify({
-                    body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
-                })
-            ], {
-                type: 'application/json;charset=UTF-8'
-            }));
+                JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
+            ], { type: 'application/json;charset=UTF-8' }));
         }
         return window
             .fetch(`${url}/api/${path}`, {
@@ -913,7 +909,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         console.log('userInfo:', userInfo);
         console.log('eventInfo:', ef);
         console.log('========= 结束 =========');
-        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/cld/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
             method: 'POST',
             body: { userInfo: realUserInfo, eventInfo: realEventInfo },
             type: 'beacon'
@@ -929,7 +925,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         bffDataSource
     ]);
     const bffFbReport = React.useCallback(({ eventName, product }) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         if (!enableReportEvent ||
             !enabledMetaConversionApi ||
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -993,15 +989,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
         };
         getEventParams(jsonParams);
-        const params = {};
-        const queryString = location.search.slice(1);
-        (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
-            const key = val.split('=')[0];
-            const value = val.split('=')[1];
-            params[key] = value;
-        });
-        const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
-        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
             method: 'POST',
             body: jsonParams,
             type: 'beacon'
@@ -1498,7 +1486,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
         React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
 });
 
-var index$2 = /*#__PURE__*/Object.freeze({
+var index$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     EditorCore: EditorCore
 });
@@ -10118,7 +10106,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-        text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+        text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                outline: 'none',
+                border: 'none',
+                boxSizing: 'content-box',
+                padding: 0,
+                background: 'transparent'
+            }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                 __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
             } }))));
 };
@@ -12476,7 +12472,7 @@ const EventProvider = (_a) => {
     const handleClick = lodash.throttle((e) => {
         var _a, _b, _c, _d, _e, _f;
         e.preventDefault();
-        const item = multItem ? multItem : (_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;
+        const item = multItem || ((_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: 'clickCta',
             eventDescription: 'User clicked the CTA'
@@ -12503,7 +12499,7 @@ const EventProvider = (_a) => {
             setElement(null);
         }
     }, [element, popup]);
-    return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
+    return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
 };
 var EventProvider$1 = React.memo(EventProvider);
 
@@ -13099,6 +13095,7 @@ const MultiCommodityDiro$1 = (_a) => {
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+    console.log(recData, '222');
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13305,6 +13302,7 @@ const MultiCommodityDiroNew$1 = (_a) => {
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+    console.log(recData, '333');
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -17580,15 +17578,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
     Swipe: Swipe
 });
 
-const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const LikeButton = (_a) => {
     var _b;
     var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
     const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
     const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
-    const likeIcon = useIconLink(defaultLikeIconPath$1);
-    const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
+    const likeIcon = useIconLink(defaultLikeIconPath$2);
+    const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
     const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
         var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         if (state) {
@@ -17679,7 +17677,7 @@ const mountVideoPlayerAtNode = (() => {
     };
 })();
 
-const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = React.useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
     const videoStartTime = React.useRef(0);
@@ -18024,7 +18022,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         renderLoading,
         isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
 };
-var VideoWidget$3 = React.memo(VideoWidget$2);
+var VideoWidget$5 = React.memo(VideoWidget$4);
 
 const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
     const [isTrue, setIsTure] = React.useState(defaultValue);
@@ -18113,7 +18111,7 @@ const Picture = (props) => {
             }, onLoad: onShowFirstImage }))));
 };
 
-const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
+const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
     var _a, _b;
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18207,7 +18205,7 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
                 React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
         }))));
 };
-var PictureGroup$3 = React.memo(PictureGroup$2);
+var PictureGroup$5 = React.memo(PictureGroup$4);
 
 /*
  * @Author: binruan@chatlabs.com
@@ -18323,7 +18321,7 @@ function withBindDataSource(Component) {
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-31 10:30:55
+ * @LastEditTime: 2025-03-26 19:32:00
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
  *
  */
@@ -18333,10 +18331,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
         return null;
     const renderComp = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-        //如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
+        // 如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
         if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
             return;
-        //默认不渲染category为cta类型的组件，该类型的组件只用于某一处
+        // 默认不渲染category为cta类型的组件，该类型的组件只用于某一处
         if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
             return;
         if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
@@ -18353,10 +18351,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
             const Component = withBindDataSource(t);
             const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
             const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
-            let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
+            const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
             if (style.hasOwnProperty('backdropFilter')) {
-                let sbf = style['backdropFilter'];
-                style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
+                const sbf = style.backdropFilter;
+                style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
             }
             return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
         }
@@ -18717,10 +18715,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
         }
         if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-            return (React.createElement(VideoWidget$3, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+            return (React.createElement(VideoWidget$5, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
-            return (React.createElement(PictureGroup$3, { 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, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+            return (React.createElement(PictureGroup$5, { 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, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
         }
         if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
             return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19090,7 +19088,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
 };
 var SxpPageRender$1 = React.memo(SxpPageRender);
 
-const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
+const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
     return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
             clickable: true,
             bulletActiveClass: 'swipe-item-active-bullet',
@@ -19100,9 +19098,9 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index })
             React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
     })));
 };
-var PictureGroup$1 = React.memo(PictureGroup);
+var PictureGroup$3 = React.memo(PictureGroup$2);
 
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
+const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
     const [isPauseVideo, setIsPauseVideo] = React.useState(false);
     const videoRef = React.useRef(null);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19332,14 +19330,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         renderPoster,
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
 };
-var VideoWidget$1 = React.memo(VideoWidget);
+var VideoWidget$3 = React.memo(VideoWidget$2);
 
-const RESOLVER$1 = {};
+const RESOLVER$2 = {};
 Object.values(_materials_).forEach((v) => {
-    RESOLVER$1[v.extend.type] = v;
+    RESOLVER$2[v.extend.type] = v;
 });
-const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
     const height = React.useMemo(() => {
         let minusHeight = 0;
@@ -19354,16 +19352,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     const renderContent = (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.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
+            return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-            return (React.createElement(PictureGroup$1, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+            return (React.createElement(PictureGroup$3, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
         }
         if (rec.product) {
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
+                    const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                     const Component = withBindDataSource(t);
                     const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
                     return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, 
@@ -19385,7 +19383,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     const CTA = (rec, index) => {
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
             return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
+                React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
         }
         return null;
     };
@@ -19403,8 +19401,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
         }
         return null;
     };
-    const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
-    const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
+    const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
+    const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
     const renderLikeButton = (rec, index) => {
         var _a, _b, _c, _d;
         if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19452,7 +19450,618 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
         return renderView(rec, index);
     })));
 };
-var index$1 = React.memo(DiyPortalPreview);
+var index$2 = React.memo(DiyPortalPreview);
+
+const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
+    const { isActive } = useSwiperSlide();
+    const [isload, setIsLoad] = React.useState(false);
+    React.useEffect(() => {
+        if (isActive && isload && loopPlay) {
+            setTimeout(() => {
+                var _a, _b, _c, _d;
+                if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                    (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
+                }
+                else {
+                    const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
+                    (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
+                }
+            }, 3000);
+        }
+    }, [isActive, isload, data, index, swiperRef, loopPlay]);
+    const loadFinishImage = () => {
+        setIsLoad(true);
+    };
+    return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
+            clickable: true,
+            bulletActiveClass: 'swipe-item-active-bullet',
+            bulletElement: 'button'
+        }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+        return (React.createElement(SwiperSlide, { key: url },
+            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
+    })));
+};
+var PictureGroup$1 = React.memo(PictureGroup);
+
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
+    const { isActive } = useSwiperSlide();
+    const [isPauseVideo, setIsPauseVideo] = React.useState(false);
+    const videoRef = React.useRef(null);
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
+    const videoStartTime = React.useRef(0);
+    const [isLoadFinish, setIsLoadFinish] = React.useState(false);
+    const [isFirstPlay, setIsFirstPlay] = React.useState(true);
+    const canvasRef = React.useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+    const videoId = `pb-cache-video-${index}`;
+    const hlsRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = muted;
+    }, [muted]);
+    React.useCallback(() => {
+        var _a;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+    }, []);
+    useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    const handlePlaying = React.useCallback(() => {
+        var _a, _b, _c, _d, _e, _f;
+        setIsPauseVideo(false);
+        const item = data[index];
+        if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
+            ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+            ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+            setIsFirstPlay(false);
+        }
+    }, [bffEventReport, data, index, isFirstPlay]);
+    const handleLoadedMetadata = React.useCallback(() => {
+        var _a;
+        videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+        (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+        setIsLoadFinish(true);
+    }, []);
+    React.useCallback((type) => () => {
+        var _a, _b, _c, _d, _e;
+        if (!isLoadFinish)
+            return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        switch (type) {
+            case 'start':
+                if (!isPause)
+                    return;
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+                setIsPauseVideo(false);
+                break;
+            case 'pause':
+                if (isPause)
+                    return;
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                setIsPauseVideo(true);
+                break;
+            default:
+                if (isPause) {
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                }
+                else {
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                }
+                setIsPauseVideo(!isPause);
+                break;
+        }
+    }, [isLoadFinish]);
+    React.useCallback(() => {
+        var _a, _b, _c, _d, _e, _f;
+        data[index];
+        ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
+            (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+        }
+    }, [data, index, bffEventReport]);
+    const blur = React.useMemo(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    React.useMemo(() => {
+        var _a;
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
+            ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
+            : 'translateY(-50%)';
+    }, [videoPostConfig]);
+    const handLoadeddata = React.useCallback(() => {
+        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
+            return;
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        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);
+        setFirstFrameSrc(canvas.toDataURL());
+    }, []);
+    const handleTimeUpload = React.useCallback(() => {
+        var _a, _b, _c;
+        if (!videoRef.current)
+            return;
+        if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
+            (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+        }
+    }, []);
+    const handlePause = () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!videoRef.current || !isActive)
+            return;
+        if (!loopPlay)
+            return;
+        if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+            (_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.slideTo(0);
+        }
+        else {
+            const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
+            (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
+        }
+    };
+    // useEffect(() => {
+    //   if (!videoRef.current) return;
+    //   if (!isActive) return;
+    //   if (!loopPlay) {
+    //     videoRef?.current?.pause();
+    //   } else {
+    //     videoRef?.current?.play();
+    //   }
+    // }, [loopPlay, isActive]);
+    React.useEffect(() => {
+        var _a, _b, _c;
+        if (!isActive)
+            return;
+        const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
+        if (!videoSrc)
+            return;
+        setIsPauseVideo(false);
+        const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+        if (!videoPlayerWrapperNode)
+            return;
+        videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+            return;
+        const Hls = window === null || window === void 0 ? void 0 : window.Hls;
+        let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
+        if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+            hls = new Hls();
+            hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
+            hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
+            hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                var _a;
+                videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            });
+        }
+        else {
+            videoRef.current.src = videoSrc;
+        }
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        // videoRef.current?.addEventListener('playing', handlePlaying);
+        // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
+        (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
+        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
+        return () => {
+            var _a, _b, _c, _d;
+            if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
+                (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            setIsLoadFinish(false);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            // videoRef.current?.removeEventListener('playing', handlePlaying);
+            // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
+        };
+    }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
+    React.useMemo(() => {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
+            return null;
+        }
+        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    React.useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
+        return null;
+    }
+    return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
+            position: 'relative',
+            width: '100%',
+            height,
+            overflow: 'hidden',
+            pointerEvents: 'none'
+        } },
+        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
+};
+var VideoWidget$1 = React.memo(VideoWidget);
+
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2025-03-25 13:54:27
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2025-03-26 22:40:52
+ * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
+ *
+ */
+const RESOLVER$1 = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER$1[v.extend.type] = v;
+});
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const recData = {
+    position: 0,
+    isCollected: false,
+    product: null,
+    video: {
+        appId: null,
+        itemId: 'VIDEOSsRgI1695278974368',
+        title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
+        enTitle: null,
+        icon: null,
+        cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
+        link: null,
+        linkTitle: null,
+        linkType: null,
+        menuCategoryId: null,
+        remark: null,
+        tags: [
+            'Gift-Giving',
+            'Daily Wear',
+            'Business Formal',
+            'Sports/Casual',
+            'Anniversary Gifts',
+            'Wedding/Engagement',
+            'Formal Dinner/Party'
+        ],
+        traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+        value: 385,
+        weight: null,
+        bindCta: null,
+        bindProduct: null,
+        bindProducts: [
+            {
+                appId: 'wx448578f8851f3dce',
+                itemId: 'test02178888',
+                title: 'christian dior小包包 新CDN',
+                enTitle: null,
+                icon: null,
+                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
+                link: '/pages/details/index?spu_id=1702262707659534338',
+                linkTitle: '',
+                linkType: 'MP',
+                menuCategoryId: null,
+                remark: null,
+                tags: [],
+                traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                value: null,
+                weight: null,
+                bindCta: {
+                    appId: 'wx448578f8851f3dce',
+                    itemId: 'CTA3KofE1716186622249',
+                    title: 'SHOP NOW 立即购买',
+                    enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
+                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
+                    cover: null,
+                    link: '/pages/details/index?spu_id=1702262707659534338',
+                    linkTitle: '',
+                    linkType: 'MP',
+                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
+                    remark: null,
+                    tags: [
+                        "Woman's Perfumes",
+                        'Plates & Bowls',
+                        'Glasses',
+                        'Multicolor',
+                        'Carafes',
+                        'Tea & Coffee',
+                        'Green',
+                        'Grey',
+                        'Cutlery'
+                    ],
+                    traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                    value: null,
+                    weight: null
+                },
+                collection: 'Ricco',
+                currency: 'INR-₹',
+                homePage: [
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
+                ],
+                info: 'test',
+                price: 53200,
+                shippingInfo: null,
+                taxInfo: null
+            },
+            {
+                appId: null,
+                itemId: '113J631A0684_C520',
+                title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
+                enTitle: null,
+                icon: null,
+                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
+                link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
+                linkTitle: null,
+                linkType: 'WEB',
+                menuCategoryId: null,
+                remark: null,
+                tags: [],
+                traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                value: null,
+                weight: null,
+                bindCta: {
+                    appId: null,
+                    itemId: 'CTAAfaKf1730796437032',
+                    title: 'test',
+                    enTitle: 'test',
+                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
+                    cover: null,
+                    link: null,
+                    linkTitle: null,
+                    linkType: null,
+                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
+                    remark: '',
+                    tags: [],
+                    traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                    value: null,
+                    weight: null
+                },
+                collection: 'Jacquard de coton éponge bleu',
+                currency: 'EUR-€',
+                homePage: [
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
+                ],
+                info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
+                price: 1800,
+                shippingInfo: null,
+                taxInfo: null
+            },
+            {
+                appId: null,
+                itemId: 'S5573CRIW_M928',
+                title: 'Mini Dior Book Tote',
+                enTitle: null,
+                icon: null,
+                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
+                link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
+                linkTitle: null,
+                linkType: 'WEB',
+                menuCategoryId: null,
+                remark: null,
+                tags: ['ダイヤモンド'],
+                traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                value: null,
+                weight: null,
+                bindCta: null,
+                collection: null,
+                currency: 'GBP-￡',
+                homePage: [
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
+                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
+                ],
+                info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
+                price: 1950,
+                shippingInfo: null,
+                taxInfo: null
+            }
+        ],
+        url: null,
+        blockCta: 1,
+        blockProduct: 1,
+        hashTags: [
+            'Sports/Casual',
+            'Formal Dinner/Party',
+            'Business Formal',
+            'Wedding/Engagement',
+            'Gift-Giving',
+            'Daily Wear',
+            'Anniversary Gifts'
+        ]
+    }
+};
+const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
+    const swiperRef = React.useRef(null);
+    React.useMemo(() => {
+        let minusHeight = 0;
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            minusHeight += 45;
+        }
+        if (tagList.length > 0) {
+            minusHeight += 45;
+        }
+        return containerHeight - minusHeight;
+    }, [globalConfig, containerHeight, tagList]);
+    // 判断是否是视频
+    const isVideoUrl = (url) => {
+        if (url && url !== '' && typeof url === 'string') {
+            const imageExtensions = ['.mp4', '.m3u8'];
+            const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
+            return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
+        }
+        else {
+            return false;
+        }
+    };
+    const renderContent = (rec, index) => {
+        const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
+        if (isVideo) {
+            return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlay }));
+        }
+        else {
+            return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlay }));
+        }
+    };
+    React.useMemo(() => {
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
+                React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
+        }
+        return null;
+    }, [globalConfig]);
+    const renderBottom = (rec, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (rec === null || rec === void 0 ? void 0 : rec.video) {
+            let cta = null;
+            if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
+                cta = '多商品CTA';
+            }
+            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
+                cta = '商品CTA';
+            }
+            else {
+                cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
+            }
+            const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
+            return (React.createElement(React.Fragment, null,
+                ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
+                        background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
+                        height: '130px',
+                        position: 'absolute',
+                        bottom: 0,
+                        width: '100%',
+                        willChange: 'transform',
+                        zIndex: 2,
+                        pointerEvents: 'none'
+                    } })),
+                React.createElement("div", { style: {
+                        marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
+                        zIndex: 999,
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        paddingTop: '20px'
+                    } },
+                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
+                        React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
+                    React.createElement("div", null,
+                        React.createElement(ExpandableText$1
+                        // className='clc-sxp-bottom-text'
+                        , { 
+                            // className='clc-sxp-bottom-text'
+                            isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
+                        React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
+                React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
+        }
+        return null;
+    };
+    const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
+    const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
+    const renderLikeButton = (rec, index) => {
+        var _a, _b, _c, _d;
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+            return;
+        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
+        if (top < 40) {
+            top += 40;
+        }
+        if (rec === null || rec === void 0 ? void 0 : rec.video) {
+            return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, 
+                // className={style['clc-sxp-like-button']}
+                style: {
+                    top,
+                    right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
+                    position: 'absolute',
+                    zIndex: 999,
+                    backgroundColor: 'transparent',
+                    width: '50px',
+                    height: '50px',
+                    outline: 'none',
+                    border: 'none',
+                    boxSizing: 'content-box',
+                    padding: 0,
+                    transform: 'translate3d(0px, 0px, 0px)'
+                } }));
+        }
+        return null;
+    };
+    const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
+    const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
+    const renderToggleButton = (visible) => {
+        var _a, _b, _c, _d;
+        if (!visible)
+            return;
+        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
+            top += 45;
+        }
+        return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
+                position: 'absolute',
+                visibility: 'visible',
+                zIndex: 999,
+                transform: 'translate3d(0px,0px,0px)',
+                [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
+                [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
+                backgroundColor: 'transparent',
+                width: '50px',
+                height: '50px',
+                outline: 'none',
+                border: 'none',
+                boxSizing: 'content-box',
+                padding: 0
+            }, defaultValue: true, 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 })));
+    };
+    const renderView = (item, index) => {
+        var _a, _b, _c, _d;
+        const rec = lodash.cloneDeep(recData);
+        rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
+        return (React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
+                renderBottom(rec, index),
+                renderLikeButton(rec, index),
+                renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
+                React.createElement(ToggleButton$1, { style: {
+                        position: 'absolute',
+                        right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
+                        visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
+                        bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
+                        zIndex: 999
+                    }, defaultValue: true, 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 }),
+                renderContent(item, index))));
+    };
+    React.useEffect(() => {
+        var _a, _b;
+        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+            return;
+        (_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.slideTo(activeIndex);
+    }, [activeIndex]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+            return;
+        (_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.slideTo(0);
+    }, [loopPlay]);
+    return (React.createElement("div", { id: 'sxp-render', 
+        // className={style['clc-sxp-container']}
+        style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
+        React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
+                // setActiveIndex(swiper.activeIndex);
+                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
+            }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
+            return renderView(rec, index);
+        }))));
+};
+var index$1 = React.memo(DiyStoryPreview);
 
 /*
  * @Author: binruan@chatlabs.com
@@ -19591,17 +20200,18 @@ var index = React.memo(SxpPageCore);
  * @Author       : haocanweng@chatlabs.cn
  * @Date         : 2023-08-21 16:31:58
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-25 11:37:48
+ * @LastEditTime: 2025-03-25 14:31:53
  * @FilePath: \pb-sxp-ui\src\index.ts
  */
 
-exports.DiyPortalPreview = index$1;
+exports.DiyPortalPreview = index$2;
+exports.DiyStoryPreview = index$1;
 exports.EditorDataProvider = EditorDataProvider;
 exports.Modal = Modal$1;
 exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
 exports.SxpPageCore = index;
 exports.SxpPageRender = SxpPageRender$1;
-exports.core = index$2;
+exports.core = index$3;
 exports.default = Pagebuilder;
 exports.materials = _materials_;
 exports.useEditorDataProvider = useEditorDataProvider;