pb-sxp-ui 1.15.21 → 1.15.22-alpha.2

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

@@ -1,15 +1,15 @@
 import { __awaiter } from "tslib";
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useSwiperSlide } from 'swiper/react';
 import { useIconLink } from '../useIconLink';
 import FormatImage from '../FormatImage';
-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';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+import { useSxpDataSource } from '../../../../core/hooks';
+import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
     const videoStartTime = useRef(0);
     const [isLoadFinish, setIsLoadFinish] = useState(false);
     const { isActive } = useSwiperSlide();
@@ -23,6 +23,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const initTimeRef = useRef();
     const loadedTimeRef = useRef();
     const isFirstPlayRef = useRef(true);
+    const loopPlayRef = useRef(loopPlay);
+    const scene = rec.video.scene;
+    useImperativeHandle(ref, () => {
+        return {
+            setLoopPlay(v) {
+                loopPlayRef.current = v;
+            }
+        };
+    });
+    useEffect(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -110,12 +122,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleLoadedmetadata = useCallback(() => {
         if (!videoRef.current)
             return;
+        if (isDiyH5) {
+            videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+        }
         loadedTimeRef.current = new Date();
         handleStartPlay();
         handLoadeddata();
     }, [videoRef.current, handLoadeddata, handleStartPlay]);
     const handleClickVideo = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (!videoRef.current)
             return;
         if (!isLoadFinish)
@@ -136,10 +151,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
             default:
                 if (isPause) {
-                    (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                    if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
+                        videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+                    }
+                    (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
                 }
                 else {
-                    (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                    (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
@@ -176,8 +194,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleWaiting = useCallback(() => {
         setWaiting(true);
     }, []);
+    const handleTimeUpload = () => {
+        if (!videoRef.current || !isDiyH5)
+            return;
+        setTimeout(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                if (!loopPlayRef.current)
+                    return;
+                if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                    (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
+                }
+                else {
+                    const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
+                    (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
+                }
+            }
+        });
+    };
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!isActive)
             return;
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
@@ -198,6 +235,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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 = scene === null || scene === void 0 ? void 0 : scene.startTime;
                 (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
             });
         }
@@ -214,8 +252,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
         (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
         (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
+        (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
         return () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
             if (!isPause)
                 handlePause();
@@ -230,6 +269,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
             (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
             (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
+            (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
         };
     }, [isActive]);
     useEffect(() => {
@@ -347,6 +387,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
-};
+        isPauseVideo && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' }))))));
+});
 export default memo(VideoWidget);

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

@@ -67,7 +67,6 @@ export interface ISxpPageRenderProps {
             y: number;
         };
         converApi?: any;
-        pixel?: any;
         consentPopup?: any;
         multiPosts?: any;
         playbook?: 'paid media' | 'organic menu';

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

@@ -41,7 +41,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isReload, setIsReload] = useState(new Date().getTime());
     const skipLinkRef = useRef(false);
     const [pageNum, setPageNum] = useState(2);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession } = useSxpDataSource();
+    const videoWidgetRef = useRef(null);
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
     const { backMainFeed, productView, jumpToWeb } = useEventReport();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -176,6 +177,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         refreshFeSession
     ]);
     const handleSessionExpire = useCallback(debounce(() => {
+        var _a;
+        (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
         refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
     }, 1000), [handleSessionCompleted, refreshFeSession]);
     useEffect(() => {
@@ -250,7 +253,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (React.createElement(MultiPosts, 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, { 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, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { 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, loopPlay: true, swiperRef: swiperRef })));
         }
         if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
             return (React.createElement(PictureGroup, { 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 }));
@@ -594,7 +597,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 if (openHashtag)
                     return;
                 handleScrollEvent(swiper);
-                if (waterFallData || isEditor)
+                if (waterFallData || isEditor || isDiyH5)
                     return;
                 if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
                     if (!isLoadMore) {

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

@@ -47,6 +47,24 @@ export type ProductInfoType = {
     cover?: string;
     remark?: string;
 };
+export interface IScene {
+    blueprintStep: number;
+    endTime: number;
+    itemId: string;
+    mediaFileNo: string;
+    mediaUrl: string;
+    position: number;
+    postId: string;
+    sceneId: string;
+    sceneInfo: string;
+    sceneTag: string;
+    startTime: number;
+    traceInfo: string;
+    cover: string;
+    bindProducts?: any[];
+    title?: string;
+}
+export type ScenesType = IScene[];
 export type VideoInfoType = {
     bindCtaId: string;
     bindProductId: string;
@@ -65,6 +83,7 @@ export type VideoInfoType = {
     bindProduct: ProductInfoType;
     bindCta: CTAInfoType;
     hashTags: string[];
+    scene: IScene;
 };
 export type RecommendVideoResultType = {
     recList: Array<RecItemType>;

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

@@ -72,7 +72,7 @@ export interface ISxpDataSourceContext {
     bffFbReport?: (body: {
         eventName: 'PageView' | 'ProductView' | 'ViewContent';
         product?: any;
-    }) => void;
+    }) => Promise<any> | undefined | boolean;
     curTime?: any;
     h5EnterLink?: () => void;
     themeTag?: any;
@@ -92,6 +92,7 @@ export interface ISxpDataSourceContext {
     refreshFeSession?: (enableReSid?: boolean, event?: (fk: string) => void) => void;
     getAccount?: () => Promise<any>;
     accountSonsent?: (v: boolean) => Promise<boolean>;
+    isDiyH5?: boolean;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {
@@ -133,6 +134,7 @@ export interface SxpDataSourceProviderProps {
     channelQueryList?: any[];
     data?: PageData;
     dataList?: PageData[];
+    isDiyH5?: boolean;
     onUpdateSchema?: (d: PageData['data']) => void;
     onUpdateChannel?: (d: string) => void;
 }

package/es/core/context/SxpDataSourceProvider.js

@@ -17,7 +17,7 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 export const DEFAULT_TAG = 'FOR U';
-const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, onUpdateSchema, onUpdateChannel }) => {
+const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
     var _a, _b, _c, _d, _e;
     const [rtcList, setRtcList] = useState([]);
     const [tagList, setTagList] = useState([]);
@@ -105,7 +105,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
     }, [bffDataSource]);
     const bffFetch = useCallback((path, options) => {
-        var _a, _b;
         if (!bffDataSource)
             return;
         const url = bffDataSource.url;
@@ -113,33 +112,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             const queryString = qs.stringify(options.query);
             path = `${path}?${queryString}`;
         }
-        let isTikTokChannel = false;
-        const params = {};
-        const queryString = location.search.slice(1);
-        (_a = splitUrlParams(queryString)) === null || _a === void 0 ? void 0 : _a.forEach((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;
-        if (cl_source &&
-            ((_b = [
-                '40A-SPRK--DRESS_EYEWEAR-',
-                '41A-SPRK--MADRAGUE-',
-                '42A-SPRK--MOOD-',
-                '43A-SPRK--SUMMER-',
-                '44A-SPRK--DRESS_EYEWEAR-',
-                '45A-SPRK--MADRAGUE-',
-                '46A-SPRK--MOOD-',
-                '47A-SPRK--SUMMER-',
-                '48A-SPRK--DRESS_EYEWEAR-',
-                '49A-SPRK--MADRAGUE-',
-                '50A-SPRK--MOOD-',
-                '51A-SPRK--SUMMER-'
-            ]) === null || _b === void 0 ? void 0 : _b.includes(cl_source))) {
-            isTikTokChannel = true;
-        }
-        if (options.type === 'beacon' && navigator.sendBeacon && !isTikTokChannel) {
+        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 }))))
@@ -149,11 +122,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }));
         }
         return window
-            .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: isTikTokChannel
-                ? JSON.stringify({
-                    body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
-                })
-                : JSON.stringify(options.body) }, (isTikTokChannel && { keepalive: true })))
+            .fetch(`${url}/api/${path}`, {
+            headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
+            method: options.method,
+            body: JSON.stringify(options.body)
+        })
             .then((res) => res.json())
             .catch((err) => Promise.reject(err));
     }, [bffDataSource, fakeUserId]);
@@ -176,7 +149,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [bffDataSource]);
     const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        query = Object.assign({ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize, defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
+        query = Object.assign(Object.assign({ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize, defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId })), (isDiyH5 && { type: 'story' }));
         if (channel) {
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
         }
@@ -225,7 +198,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
             query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
         }
-        const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
+        const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', {
+            method: 'POST',
+            body: query
+        }));
         if (!(result === null || result === void 0 ? void 0 : result.success)) {
             return undefined;
         }
@@ -285,7 +261,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         const sessionID = storeAndLoadFeSessionId();
         const params = {};
         const queryString = location.search.slice(1);
-        (_a = splitUrlParams(queryString)) === null || _a === void 0 ? void 0 : _a.map((val) => {
+        (_a = splitUrlParams(queryString)) === null || _a === void 0 ? void 0 : _a.forEach((val) => {
             const key = val.split('=')[0];
             const value = val.split('=')[1];
             params[key] = value;
@@ -315,17 +291,23 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         playbookType,
         bffDataSource
     ]);
-    const getEventParamsByJson = useCallback((json, product) => {
-        var _a, _b, _c;
-        const jsonParams = cloneDeep(json);
+    const bffFbReport = useCallback(({ eventName, product }) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!enableReportEvent ||
+            !enabledMetaConversionApi ||
+            (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
+            !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
+            return;
+        }
+        const jsonParams = cloneDeep((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
         const urlParams = new URLSearchParams(window.location.search);
         const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
         const fix_par = {
-            event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
+            event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
             external_id: fakeUserId,
-            client_user_agent: (_c = (_b = window === null || window === void 0 ? void 0 : window.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) !== null && _c !== void 0 ? _c : '',
+            client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
             fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
-            fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
+            fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
             time: Math.floor(Date.now() / 1000)
         };
         const regex = /\{\{(.*?)\}\}/g;
@@ -337,7 +319,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
             else {
                 for (const key in obj) {
-                    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    if (obj.hasOwnProperty(key)) {
                         const value = obj === null || obj === void 0 ? void 0 : obj[key];
                         if (typeof value === 'object') {
                             getEventParams(value);
@@ -374,59 +356,28 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
         };
         getEventParams(jsonParams);
-        return jsonParams;
-    }, [fakeUserId]);
-    const bffFbReport = useCallback(({ eventName, product }) => {
-        var _a, _b, _c, _d;
-        if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
-            return;
-        }
-        const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
-        if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
-            function updateQueryStringParameter(uri, key, value) {
-                const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-                const separator = uri.indexOf('?') !== -1 ? '&' : '?';
-                if (uri.match(re)) {
-                    return uri.replace(re, '$1' + key + '=' + value + '$2');
-                }
-                else {
-                    return uri + separator + key + '=' + value;
-                }
-            }
-            if (eventName === 'PageView' && (pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) === 'PageView') {
-                const currentUrl = window.location.href;
-                const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
-                history.pushState({ path: newUrl }, '', newUrl);
-            }
-            else {
-                const body = getEventParamsByJson(pixelEventParamsJson);
-                window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, body);
-                if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
-                    window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
-                }
-            }
-        }
-        else if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
-            window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
-        }
-        const converApiEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName];
-        if (enabledMetaConversionApi && converApiEventParamsJson) {
-            const body = getEventParamsByJson(converApiEventParamsJson, product);
-            const params = {};
-            const queryString = location.search.slice(1);
-            (_c = splitUrlParams(queryString)) === null || _c === void 0 ? void 0 : _c.forEach((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;
-            bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_d = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _d === void 0 ? void 0 : _d['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
-                method: 'POST',
-                body,
-                type: 'beacon'
-            });
-        }
-    }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
+        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)}` : ''}`, {
+            method: 'POST',
+            body: jsonParams,
+            type: 'beacon'
+        });
+    }, [
+        bffFetch,
+        enableReportEvent,
+        enabledMetaConversionApi,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
+        globalConfig,
+        fakeUserId,
+        bffDataSource
+    ]);
     const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
         return res === null || res === void 0 ? void 0 : res.success;
@@ -674,7 +625,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             multiPostTimeRef,
             refreshFeSession,
             getAccount,
-            accountSonsent
+            accountSonsent,
+            isDiyH5
         } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
         rtcList,
         mutateLike: bffMutateLike,

package/es/index.d.ts

@@ -4,6 +4,7 @@ export * as core from './core';
 export * as materials from './materials';
 export { default as SxpPageRender } from './core/components/SxpPageRender';
 export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
+export { default as DiyStoryPreview } from './core/components/DiyStoryPreview';
 export { default as Modal } from './core/components/SxpPageRender/Modal';
 export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
 export { default as SxpPageCore } from './core/components/SxpPageCore';

package/es/index.js

@@ -6,6 +6,7 @@ import * as materials_1 from './materials';
 export { materials_1 as materials };
 export { default as SxpPageRender } from './core/components/SxpPageRender';
 export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
+export { default as DiyStoryPreview } from './core/components/DiyStoryPreview';
 export { default as Modal } from './core/components/SxpPageRender/Modal';
 export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
 export { default as SxpPageCore } from './core/components/SxpPageCore';

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import CommodityGroup from '../../template/components/CommodityGroup';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
 import { A11y, Autoplay, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper/modules';
@@ -11,6 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
+import CommodityGroup from '../../template/components/CommodityGroup';
 import { getPriceText } from '../../../../core/utils/materials';
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
@@ -67,7 +67,7 @@ const CommodityDetail = (_a) => {
         };
     }, []);
     const priceText = getPriceText({
-        product,
+        product: product,
         enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
         globalConfig,
         style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import CommodityGroup from '../../template/components/CommodityGroup';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
 import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
@@ -11,6 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
+import CommodityGroup from '../../template/components/CommodityGroup';
 import { getPriceText } from '../../../../core/utils/materials';
 const CommodityDetailDiroNew = (_a) => {
     var _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, _4;

package/lib/core/Pagebuilder/type.d.ts

@@ -50,11 +50,16 @@ export interface SeoParameter {
     key_word: string;
 }
 export interface UtmParameter {
-    utm_source: string;
-    utm_medium: string;
-    utm_campaign: string;
-    channels?: string[];
-    enabled_meta_conversion_api?: boolean;
+    channels: string[];
+    enabled_meta_conversion_api: boolean;
+    values: string[];
+    cos_path: string;
+    enabled_google_no_index: boolean;
+    enabled_google_analytics: boolean;
+    enabled_gtm: boolean;
+    enabled_alibaba_cloud: boolean;
+    enabled_uptime: boolean;
+    experience_id: string | null;
 }
 interface PagebuilderProps {
     init: (e: initParams) => void;

package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { postConfigType } from '../SxpPageRender';
+import { RecItemType } from '../SxpPageRender/typing';
+interface IPictureGroupProps {
+    imgUrls?: string[];
+    width: number;
+    height: number;
+    rec: RecItemType;
+    index: number;
+    imgUrlsPostConfig?: postConfigType;
+    swiperRef?: any;
+    data?: RecItemType[];
+    loopPlay?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
+export default _default;

package/lib/core/components/DiyStoryPreview/PictureGroup.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const modules_1 = require("swiper/modules");
+const react_2 = require("swiper/react");
+const Picture_1 = tslib_1.__importDefault(require("../SxpPageRender/PictureGroup/Picture"));
+const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
+    const { isActive } = (0, react_2.useSwiperSlide)();
+    const [isload, setIsLoad] = (0, react_1.useState)(false);
+    (0, react_1.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_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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_1.default.createElement(react_2.SwiperSlide, { key: url },
+            react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
+    })));
+};
+exports.default = (0, react_1.memo)(PictureGroup);