pb-sxp-ui 1.7.1 → 1.7.3

package/es/core/components/SxpPageRender/Modal/index.js

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
@@ -15,7 +15,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     const [isShow, setIsShow] = useState(false);
     const modalEleRef = useRef(null);
     const { globalConfig, popupDetailData } = useSxpDataSource();
-    const { schema: _schema } = useEditor();
+    const { schema: _schema, popup: _popup } = useEditor();
     const [scrollTop, setScrollTop] = useState(15);
     useEffect(() => {
         const parentNode = document.getElementById('sxp-render');
@@ -53,6 +53,9 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
             }, popup === null || popup === void 0 ? void 0 : popup.duration);
         }
     }, [isOpen, popup]);
+    const child = useCallback(() => {
+        return children;
+    }, [_popup]);
     if (!modalEleRef.current)
         return null;
     const handleClose = debounce(() => {
@@ -135,6 +138,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                         var _a;
                         setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
                     }
-                })), children)))))), modalEleRef.current);
+                })), child())))))), modalEleRef.current);
 };
 export default memo(Modal);

package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -4,7 +4,7 @@ interface IPictureProps {
     src: string;
     height?: number;
     imgUrlsPostConfig?: postConfigType;
-    onShowFirstImage?: () => void;
+    onShowFirstImage?: (e: any) => void;
 }
 declare const Picture: (props: IPictureProps) => React.JSX.Element;
 export default Picture;

package/es/core/components/SxpPageRender/PictureGroup/index.d.ts

@@ -8,7 +8,10 @@ interface IPictureGroupProps {
     rec: RecItemType;
     index: number;
     onReportViewImageEnd: (rec: RecItemType) => void;
-    onViewImageStartEvent: (index: number) => void;
+    onViewImageStartEvent: (index: number, imgInfo?: {
+        contentSize: string;
+        loadTime: string;
+    }) => void;
     imgUrlsPostConfig?: postConfigType;
 }
 declare const _default: React.NamedExoticComponent<IPictureGroupProps>;

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -1,15 +1,20 @@
+import { __awaiter } from "tslib";
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { css } from '@emotion/css';
+import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
     var _a, _b;
     const ref = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
     const [isLoad, setIsLoad] = useState(false);
+    const [imgInfo, setImgInfo] = useState();
+    const initTime = new Date();
     useEffect(() => {
         if (isLoad && isActive) {
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
@@ -17,18 +22,33 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
                 onReportViewImageEnd(rec);
             }
             else {
-                onViewImageStartEvent(index);
+                onViewImageStartEvent(index, imgInfo);
             }
         }
         else {
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
-    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    const showFirstImageFn = useCallback(() => {
+    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
+    const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
         if (!isLoad) {
+            const contentSize = yield getResFileSizeFromSrc(e.src);
+            setImgInfo({
+                contentSize,
+                loadTime: (new Date() - initTime).toFixed(2) + ''
+            });
             setIsLoad(true);
         }
-    }, [isLoad]);
+    }), [isLoad]);
+    useEffect(() => {
+        const onShow = () => onViewImageStartEvent(index, imgInfo);
+        const onHide = () => onReportViewImageEnd(rec);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        return () => {
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        };
+    }, [imgInfo]);
     return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
             clickable: true,
             bulletActiveClass: 'swipe-item-active-bullet',

package/es/core/components/SxpPageRender/RenderCard.js

@@ -49,7 +49,12 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
             const Component = withBindDataSource(t);
             const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
             const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
-            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.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 })));
+            let style = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style;
+            if (style.hasOwnProperty('backdropFilter')) {
+                let 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), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.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 })));
         }
         else {
             return null;

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

@@ -1,3 +1,4 @@
+import { __awaiter } from "tslib";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSwiperSlide } from 'swiper/react';
 import { useIconLink } from '../useIconLink';
@@ -6,6 +7,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
 import loading_gif from './loading.gif';
 import { mountVideoPlayerAtNode } from './VideoPlayer';
+import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
 const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -20,6 +22,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const videoId = `pb-cache-video-${index}`;
     const videoEleRef = useRef(null);
     const hlsRef = useRef(null);
+    const initTimeRef = useRef();
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -65,8 +68,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setWaiting(false);
         setIsLoadFinish(true);
     }, []);
-    const handleStartPlay = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         setIsPauseVideo(false);
@@ -76,24 +79,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
             const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
             const playType = isFirstPlay ? '0' : '1';
+            const contentSize = yield getResFileSizeFromSrc((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playVideo',
                     eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                    contentId: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.itemId) !== null && _j !== void 0 ? _j : '',
+                    contentName: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '',
                     playType,
                     startTime: videoCurrentTime,
                     videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                    contentTags: JSON.stringify((_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []),
                     position: index + '',
                     contentFormat: 'video',
-                    traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                    traceInfo: (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo,
+                    contentSize,
+                    loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
                 }
             });
             setIsFirstPlay(false);
         }
-    }, [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
+    }), [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     const handLoadeddata = useCallback(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
@@ -197,6 +203,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
+        initTimeRef.current = new Date();
         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()) {
@@ -240,17 +247,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         };
     }, [isActive]);
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
             return;
         if (isActive) {
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ViewContent'
+                eventName: 'ViewContent',
+                product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
             });
-            (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
         }
         else {
-            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+            (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
         }
     }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     useEffect(() => {
@@ -269,9 +277,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (!isActive)
             return;
         const onShow = () => {
+            var _a, _b;
             handleClickVideo('start')();
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ViewContent'
+                eventName: 'ViewContent',
+                product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
             });
         };
         const onHide = handleClickVideo('pause');

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -41,7 +41,8 @@ const WaterfallFlowItem = (props) => {
         product: rec === null || rec === void 0 ? void 0 : rec.product,
         enableFormattedPrice: (_a = textStyles === null || textStyles === void 0 ? void 0 : textStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice,
         globalConfig,
-        isHiddenDef: true
+        isHiddenDef: true,
+        style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price
     });
     useEffect(() => {
         const observer = new IntersectionObserver((entries) => {
@@ -113,7 +114,7 @@ const WaterfallFlowItem = (props) => {
                     __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
                 } }),
             React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText, dangerouslySetInnerHTML: {
-                    __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                    __html: priceText !== null && priceText !== void 0 ? priceText : ''
                 } }))));
 };
 export default function WaterfallList(_a) {

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -64,7 +64,8 @@ const WaterfallFlowItem = (props) => {
         product: rec === null || rec === void 0 ? void 0 : rec.product,
         enableFormattedPrice: (_a = textStyles === null || textStyles === void 0 ? void 0 : textStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice,
         globalConfig,
-        isHiddenDef: true
+        isHiddenDef: true,
+        style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price
     });
     useEffect(() => {
         if (imgDom.current === null || src === '') {
@@ -105,7 +106,7 @@ const WaterfallFlowItem = (props) => {
                     __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
                 } }),
             React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price, dangerouslySetInnerHTML: {
-                    __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                    __html: priceText !== null && priceText !== void 0 ? priceText : ''
                 } }))));
 };
 export default function WaterfallList(_a) {

package/es/core/components/SxpPageRender/WaterFall/index.js

@@ -9,7 +9,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 const WaterFall = (props) => {
     var _a;
-    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
+    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag, bffFbReport } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
     const ref = useRef(null);
     const modalEleRef = useRef(null);
@@ -78,8 +78,11 @@ const WaterFall = (props) => {
     useEffect(() => {
         if (openHashtag) {
             setViewTime(new Date());
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView'
+            });
         }
-    }, [openHashtag]);
+    }, [openHashtag, bffFbReport]);
     useEffect(() => {
         const initTime = () => {
             setViewTime(new Date());

package/es/core/components/SxpPageRender/index.d.ts

@@ -56,6 +56,7 @@ export interface ISxpPageRenderProps {
             decimalPoint?: string;
             currencyPosition?: string;
             showTwoDecimalPoint?: boolean;
+            fontFamily?: string;
         };
         backButton?: {
             enable: boolean;
@@ -65,6 +66,7 @@ export interface ISxpPageRenderProps {
             yPosit: string;
             y: number;
         };
+        converApi?: any;
     };
     descStyle?: CSSProperties;
     tipText?: {

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

@@ -48,9 +48,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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 = useCallback(() => {
@@ -59,11 +56,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         if (data.length > 0) {
             const now = new Date();
             viewTime.current = now;
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'PageView'
-            });
         }
-    }, [data.length, bffFbReport, h5EnterLink]);
+    }, [data.length, h5EnterLink]);
     useEffect(() => {
         var _a;
         if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -92,7 +86,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             if (document.visibilityState === 'hidden') {
                 if (repCond) {
                     SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
-                    handleReportViewImageEnd(item);
                     handleReportProductView(item);
                 }
                 let fromKName = '';
@@ -136,7 +129,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 }
                 handleH5EnterLink();
                 if (repCond) {
-                    handleViewImageStartEvent(activeIndex);
                     SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
                     backMainFeed('external', selectTag);
                 }
@@ -229,7 +221,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 const t = resolver[(_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) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { height: '100%', overflow: 'auto' }), index: index })));
+                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) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { height: '100%', overflow: 'auto' }), index: index, isActive: activeIndex === index })));
             });
         }
         return null;
@@ -386,7 +378,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
                     requestId: null,
                     traceInfo: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : '',
-                    contentFormat
+                    contentFormat,
+                    position: ((_k = swiper.previousIndex) !== null && _k !== void 0 ? _k : 0) + ''
                 }
             });
             handleReportViewImageEnd(item);
@@ -397,22 +390,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    contentId: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '',
-                    productId: (_o = (_m = item.product) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '',
+                    contentId: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                    productId: (_p = (_o = item.product) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
                     requestId: null,
-                    traceInfo: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : '',
-                    contentFormat
+                    traceInfo: (_r = (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo) !== null && _r !== void 0 ? _r : '',
+                    contentFormat,
+                    position: ((_s = swiper.previousIndex) !== null && _s !== void 0 ? _s : 0) + ''
                 }
             });
             handleReportViewImageEnd(item);
         }
         handleReportProductView(item);
-        const curItem = data[swiper.activeIndex];
-        if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ProductView'
-            });
-        }
         viewTime.current = new Date();
     };
     const handleReportProductView = (item) => {
@@ -430,8 +418,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             viewTime.current = new Date();
         }
     }, [openHashtag, data, activeIndex]);
-    const handleViewImageStartEvent = (activeIndex) => {
-        var _a, _b, _c, _d, _e, _f;
+    const handleViewImageStartEvent = (activeIndex, imgInfo) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const item = data[activeIndex];
         if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
             const startTime = Date.now();
@@ -446,11 +434,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
                     position: activeIndex + '',
                     contentFormat: 'image',
-                    traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
+                    traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
+                    contentSize: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.contentSize,
+                    loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
                 }
             });
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ViewContent'
+                eventName: 'ViewContent',
+                product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
+            });
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView',
+                product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
             });
         }
     };

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -67,10 +67,8 @@ export interface ISxpDataSourceContext {
     videoRef?: any;
     setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
     bffFbReport?: (body: {
-        eventName: string;
-        actionSource?: string;
-        eventSourceUrl?: string;
-        externalId?: string;
+        eventName: 'PageView' | 'ProductView' | 'ViewContent';
+        product?: any;
     }) => Promise<any> | undefined | boolean;
     curTime?: any;
     h5EnterLink?: () => void;

package/es/core/context/SxpDataSourceProvider.js

@@ -189,23 +189,65 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             type: 'beacon'
         });
     }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
-    const bffFbReport = useCallback((_a) => {
-        var _b, _c, _d;
-        var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
+    const bffFbReport = useCallback(({ eventName, product }) => {
+        var _a, _b, _c, _d;
         if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
             return;
         }
-        const fakeUserId = storeAndLoadFeUserId();
+        let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
         const urlParams = new URLSearchParams(window.location.search);
-        const fbclid = urlParams.get('fbclid');
+        const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
+        const fix_par = {
+            event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
+            external_id: storeAndLoadFeUserId(),
+            client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
+            fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
+            fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
+            time: new Date().getTime()
+        };
+        const regex = /\{\{(.*?)\}\}/g;
+        const getEventParams = (obj) => {
+            if (!obj)
+                return;
+            if (obj instanceof Array) {
+                obj === null || obj === void 0 ? void 0 : obj.map((item) => getEventParams(item));
+            }
+            else {
+                for (const key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        const value = obj === null || obj === void 0 ? void 0 : obj[key];
+                        if (typeof value === 'object') {
+                            getEventParams(value);
+                        }
+                        else if (typeof value === 'string') {
+                            const matches = value === null || value === void 0 ? void 0 : value.match(regex);
+                            if (matches) {
+                                matches.forEach((match) => {
+                                    const prop = match.substring(2, match.length - 2);
+                                    try {
+                                        const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
+                                        if (replaceValue) {
+                                            obj[key] = replaceValue;
+                                        }
+                                        else {
+                                            delete obj[key];
+                                        }
+                                    }
+                                    catch (error) {
+                                        delete obj[key];
+                                        console.error('An error occurred:', error === null || error === void 0 ? void 0 : error.message);
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        getEventParams(jsonParams);
         return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
             method: 'POST',
-            body: {
-                eventName,
-                actionSource,
-                eventSourceUrl,
-                userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
-            },
+            body: jsonParams,
             type: 'beacon'
         });
     }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);

package/es/core/utils/materials.d.ts

@@ -11,9 +11,15 @@ export declare const getBgStyleByImg: (data: any) => "" | {
     backgroundRepeat: string;
     backgroundSize: string;
 };
-export declare const getPriceText: ({ product, enableFormattedPrice, globalConfig, isHiddenDef }: {
+interface IfontType {
+    'fontFamily-cn': string;
+    'fontFamily-en': string;
+}
+export declare const getPriceText: ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }: {
     product: ProductInfoType | undefined | null;
     enableFormattedPrice: boolean | undefined;
     globalConfig: ISxpPageRenderProps['globalConfig'];
     isHiddenDef?: boolean;
+    style?: IfontType | any;
 }) => string | null;
+export {};

package/es/core/utils/materials.js

@@ -1,3 +1,4 @@
+import { setFontForText } from './tool';
 export const getMediaValueByMode = (obj) => {
     var _a;
     if (!obj || typeof obj !== 'object') {
@@ -29,8 +30,8 @@ export const getBgStyleByImg = (data) => {
     const imgSrc = typeof bgImg === 'string' ? bgImg : getMediaValueByMode(bgImg);
     return getBgStyle(imgSrc);
 };
-export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef }) => {
-    var _a, _b, _c, _d, _e;
+export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
         return null;
     let price = (product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000;
@@ -77,6 +78,8 @@ export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHi
             }
         });
     }
+    currency = `<span style="font-family:${(_h = (_g = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : style === null || style === void 0 ? void 0 : style['fontFamily-en']) !== null && _h !== void 0 ? _h : 'inherit'}">${currency}</span>`;
+    text = setFontForText(text, style);
     if ((priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) && (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) !== 'none') {
         text = (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) === 'left' ? currency + text : text + currency;
     }

package/es/core/utils/tool.d.ts

@@ -11,4 +11,5 @@ declare function getBrowserInfo(): string | null;
 declare function getSystem(): string | null;
 declare function getDevice(): string | null;
 declare function getCookie(val: string): string;
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
+declare const getResFileSizeFromSrc: (imageSrc?: string) => "" | Promise<string>;
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };

package/es/core/utils/tool.js

@@ -156,4 +156,14 @@ function getCookie(val) {
     });
     return value !== null && value !== void 0 ? value : '';
 }
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
+const getResFileSizeFromSrc = (imageSrc) => {
+    if (!imageSrc)
+        return '';
+    return fetch(imageSrc)
+        .then((response) => response.blob())
+        .then((blob) => {
+        const fileSizeInMB = blob.size / (1024 * 1024);
+        return fileSizeInMB.toFixed(2) + '';
+    });
+};
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };