pb-sxp-ui 1.15.13-alpha.2 → 1.15.13-alpha.4

package/es/core/components/DiyStoryPreview/VideoWidget.d.ts

@@ -12,6 +12,8 @@ interface IVideoWidgetProps {
     videoPostConfig?: postConfigType;
     swiperRef?: any;
     loopPlay?: boolean;
+    videoPlayIcon?: string;
+    isPlay?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/es/core/components/DiyStoryPreview/VideoWidget.js

@@ -2,8 +2,9 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { useSwiperSlide } from 'swiper/react';
 import { useIconLink } from '../SxpPageRender/useIconLink';
 import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
+import FormatImage from '../SxpPageRender/FormatImage';
 import { useSxpDataSource } from '../../../core/hooks';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
     const { isActive } = useSwiperSlide();
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const videoRef = useRef(null);
@@ -188,9 +189,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             position: 'relative',
             width: '100%',
             height,
-            overflow: 'hidden',
-            pointerEvents: 'none'
+            overflow: 'hidden'
         } },
-        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
+        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
+        renderPoster,
+        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/DiyStoryPreview/index.d.ts

@@ -15,6 +15,7 @@ export interface IScene {
     startTime: number;
     traceInfo: string;
     bindProducts?: any[];
+    title?: string;
 }
 export type ScenesType = IScene[];
 export type DiyStoryPreviewType = ISxpPageRenderProps & {
@@ -23,6 +24,8 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
     activeIndex?: number;
     onActiveChange?: (v: number) => void;
     loopPlay?: boolean;
+    pointerEvents?: any;
+    isPlay?: boolean;
 };
 declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
 export default _default;

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

@@ -1,6 +1,6 @@
-import React, { memo, useEffect, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, debounce } from 'lodash';
 import RenderCard from '../SxpPageRender/RenderCard';
 import ExpandableText from '../SxpPageRender/ExpandableText';
 import LikeButton from '../SxpPageRender/LikeButton';
@@ -10,12 +10,6 @@ import PictureGroup from './PictureGroup';
 import VideoWidget from './VideoWidget';
 import * as _materials_ from '../../../materials';
 import '../SxpPageRender/index.less';
-const RESOLVER = {};
-Object.values(_materials_).forEach((v) => {
-    RESOLVER[v.extend.type] = v;
-});
-const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const recData = {
     position: 0,
     isCollected: false,
@@ -194,7 +188,14 @@ const recData = {
         ]
     }
 };
-const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
+const RESOLVER = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER[v.extend.type] = v;
+});
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
+    const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
     const swiperRef = useRef(null);
     const height = useMemo(() => {
         let minusHeight = 0;
@@ -219,10 +220,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
     const renderContent = (rec, index) => {
         const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
         if (isVideo) {
-            return (React.createElement(VideoWidget, { 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 }));
+            return (React.createElement(VideoWidget, { isPlay: isPlay, 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, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
         }
         else {
-            return (React.createElement(PictureGroup, { 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 }));
+            return (React.createElement(PictureGroup, { 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: loopPlaySwiper }));
         }
     };
     const renderLogo = useMemo(() => {
@@ -232,14 +233,6 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         }
         return null;
     }, [globalConfig]);
-    const CTA = (rec, index) => {
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
-            console.log(globalConfig, rec, '111');
-            return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
-        }
-        return null;
-    };
     const renderBottom = (rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -263,7 +256,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
                         width: '100%',
                         willChange: 'transform',
                         zIndex: 2,
-                        pointerEvents: 'none'
+                        pointerEvents
                     } })),
                 React.createElement("div", { style: {
                         marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
@@ -341,6 +334,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         var _a, _b, _c, _d;
         const rec = cloneDeep(recData);
         rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
+        rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
         return (React.createElement("div", { style: { position: 'relative' } },
             React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
                 renderBottom(rec, index),
@@ -362,13 +356,31 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         (_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]);
     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);
+        setLooPlaySwiper(loopPlay);
     }, [loopPlay]);
-    return (React.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
-        React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
+    const handleSessionExpire = useCallback(debounce(() => {
+        setLooPlaySwiper(false);
+    }, 1000), []);
+    useEffect(() => {
+        const events = ['touchstart', 'touchcancel'];
+        events.forEach((event) => {
+            window.addEventListener(event, handleSessionExpire);
+        });
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, handleSessionExpire);
+            });
+        };
+    }, [handleSessionExpire]);
+    return (React.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
+        React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
+                swiperRef.current.swiper.allowTouchMove = false;
+                setTimeout(() => {
+                    swiperRef.current.swiper.allowTouchMove = true;
+                }, 500);
+            }, onActiveIndexChange: (swiper) => {
                 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);

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

@@ -9,6 +9,7 @@ export interface ISxpPageCoreProps {
     appDomain?: string;
     enabledMetaConversionApi?: boolean;
     dataList?: PageData[];
+    pointerEvents?: string;
 }
 declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
-import SxpPageRender from '../SxpPageRender';
 import Popup from '../SxpPageRender/Popup';
+import DiyStoryPreview from '../DiyStoryPreview';
 import * as _materials_ from '../../../materials';
 import { EditorCore } from '../../../core';
 import SxpDataSourceProvider from '../../../core/context/SxpDataSourceProvider';
@@ -8,20 +8,20 @@ const RESOLVER = {};
 Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
-const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
-    var _a, _b, _c, _d, _e, _f;
+const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const utmVal = useMemo(() => {
         var _a;
         const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
         return searchParams;
     }, []);
-    const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
+    const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
     const [channel, setChannel] = useState();
     return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
-        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
-                var _a;
+        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
+                var _a, _b;
                 return (React.createElement(React.Fragment, null,
-                    React.createElement(SxpPageRender, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
+                    React.createElement(DiyStoryPreview, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
                     React.createElement(Popup, null)));
             } })));
 };

package/es/core/context/EditorContext.js

@@ -1,8 +1,8 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useMemo } from 'react';
 import { cloneDeep } from 'lodash';
+import { setSlideSkipState } from '../utils/localStore';
 import DataSourceProvider from './DataSourceProvider';
 import { uuid } from '../../core/utils/tool';
-import { setSlideSkipState } from '../utils/localStore';
 const item = {
     id: uuid(6, 10),
     item: {

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

@@ -131,7 +131,7 @@ export interface SxpDataSourceProviderProps {
     isEditor?: boolean;
     utmParameter?: PageData['utm_parameter'];
     channelQueryList?: any[];
-    data?: PageData;
+    data?: any;
     dataList?: PageData[];
     onUpdateSchema?: (d: PageData['data']) => void;
     onUpdateChannel?: (d: string) => void;

package/es/core/context/SxpDataSourceProvider.js

@@ -144,17 +144,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [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 }));
+        var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        query = Object.assign({ maxSize: 50, defaultSize: 50, 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 }));
         if (channel) {
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
         }
         else if (utmVal) {
-            const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
-                var _a, _b;
+            const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                 const key = val.split('=')[0];
-                return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
-            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+                return key;
+            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             if (val)
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
@@ -168,19 +167,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             let list = [];
             let result = null;
             const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
-                var _v, _w, _x, _y, _z, _0;
+                var _t, _u, _v, _w, _x, _y;
                 query.pageNum = pageNum;
                 result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
                 if (!(result === null || result === void 0 ? void 0 : result.success)) {
                     return undefined;
                 }
                 setLoading(false);
-                list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
+                list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
                 if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
                     setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
                     setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
                 }
-                const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+                const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                 if (isNotNullList) {
                     pageNum = pageNum + 1;
                     yield recurveRecList(query);
@@ -188,13 +187,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             yield recurveRecList(query);
             if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
+                setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
             return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
         }
         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 });
+            query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 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('v3/recommend/direct', { method: 'POST', body: query }));
         if (!(result === null || result === void 0 ? void 0 : result.success)) {
             return undefined;
         }
@@ -202,8 +201,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
             let list = [];
-            list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
-            const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+            list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
+            const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
             if (!isNotNullList) {
                 setIsNoMoreData(true);
             }
@@ -212,12 +211,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
     const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
-        var _1, _2, _3, _4;
+        var _z, _0, _1, _2;
         if (rtcList.length <= 0) {
             return;
         }
         const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
-        const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
+        const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
         setRtcList(rtcList.concat(getFilterRecList(data)));
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
         return data;
@@ -376,18 +375,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
-        var _5, _6, _7, _8, _9, _10, _11, _12;
-        const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
+        var _3, _4, _5, _6, _7, _8, _9, _10;
+        const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
+            const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
                 var _a, _b;
                 const key = val.split('=')[0];
                 return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
-            })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
+            })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
+            setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
         }
         catch (e) {
             console.log('e', e);
@@ -447,10 +446,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport]);
     const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _13, _14;
+        var _11, _12;
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
-        setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
-        return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
+        setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
+        return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
     }), [bffFetch]);
     const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {

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

@@ -12,6 +12,8 @@ interface IVideoWidgetProps {
     videoPostConfig?: postConfigType;
     swiperRef?: any;
     loopPlay?: boolean;
+    videoPlayIcon?: string;
+    isPlay?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

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

@@ -5,8 +5,9 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const useIconLink_1 = require("../SxpPageRender/useIconLink");
 const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
+const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
 const hooks_1 = require("../../../core/hooks");
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
     const { isActive } = (0, react_2.useSwiperSlide)();
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const videoRef = (0, react_1.useRef)(null);
@@ -191,9 +192,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             position: 'relative',
             width: '100%',
             height,
-            overflow: 'hidden',
-            pointerEvents: 'none'
+            overflow: 'hidden'
         } },
-        react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
+        react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
+        renderPoster,
+        isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

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

@@ -15,6 +15,7 @@ export interface IScene {
     startTime: number;
     traceInfo: string;
     bindProducts?: any[];
+    title?: string;
 }
 export type ScenesType = IScene[];
 export type DiyStoryPreviewType = ISxpPageRenderProps & {
@@ -23,6 +24,8 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
     activeIndex?: number;
     onActiveChange?: (v: number) => void;
     loopPlay?: boolean;
+    pointerEvents?: any;
+    isPlay?: boolean;
 };
 declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
 export default _default;

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

@@ -13,12 +13,6 @@ const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
 const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
 const _materials_ = tslib_1.__importStar(require("../../../materials"));
 require("../SxpPageRender/index.less");
-const RESOLVER = {};
-Object.values(_materials_).forEach((v) => {
-    RESOLVER[v.extend.type] = v;
-});
-const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const recData = {
     position: 0,
     isCollected: false,
@@ -197,7 +191,14 @@ const recData = {
         ]
     }
 };
-const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
+const RESOLVER = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER[v.extend.type] = v;
+});
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
+    const [loopPlaySwiper, setLooPlaySwiper] = (0, react_1.useState)(loopPlay);
     const swiperRef = (0, react_1.useRef)(null);
     const height = (0, react_1.useMemo)(() => {
         let minusHeight = 0;
@@ -222,10 +223,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
     const renderContent = (rec, index) => {
         const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
         if (isVideo) {
-            return (react_1.default.createElement(VideoWidget_1.default, { 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 }));
+            return (react_1.default.createElement(VideoWidget_1.default, { isPlay: isPlay, 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, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
         }
         else {
-            return (react_1.default.createElement(PictureGroup_1.default, { 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 }));
+            return (react_1.default.createElement(PictureGroup_1.default, { 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: loopPlaySwiper }));
         }
     };
     const renderLogo = (0, react_1.useMemo)(() => {
@@ -235,14 +236,6 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         }
         return null;
     }, [globalConfig]);
-    const CTA = (rec, index) => {
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
-            console.log(globalConfig, rec, '111');
-            return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
-                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
-        }
-        return null;
-    };
     const renderBottom = (rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -266,7 +259,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
                         width: '100%',
                         willChange: 'transform',
                         zIndex: 2,
-                        pointerEvents: 'none'
+                        pointerEvents
                     } })),
                 react_1.default.createElement("div", { style: {
                         marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
@@ -344,6 +337,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         var _a, _b, _c, _d;
         const rec = (0, lodash_1.cloneDeep)(recData);
         rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
+        rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
         return (react_1.default.createElement("div", { style: { position: 'relative' } },
             react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
                 renderBottom(rec, index),
@@ -365,13 +359,31 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         (_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]);
     (0, react_1.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);
+        setLooPlaySwiper(loopPlay);
     }, [loopPlay]);
-    return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
-        react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
+    const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
+        setLooPlaySwiper(false);
+    }, 1000), []);
+    (0, react_1.useEffect)(() => {
+        const events = ['touchstart', 'touchcancel'];
+        events.forEach((event) => {
+            window.addEventListener(event, handleSessionExpire);
+        });
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, handleSessionExpire);
+            });
+        };
+    }, [handleSessionExpire]);
+    return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
+        react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
+                swiperRef.current.swiper.allowTouchMove = false;
+                setTimeout(() => {
+                    swiperRef.current.swiper.allowTouchMove = true;
+                }, 500);
+            }, onActiveIndexChange: (swiper) => {
                 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);

package/lib/core/components/SxpPageCore/index.d.ts

@@ -9,6 +9,7 @@ export interface ISxpPageCoreProps {
     appDomain?: string;
     enabledMetaConversionApi?: boolean;
     dataList?: PageData[];
+    pointerEvents?: string;
 }
 declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
 export default _default;

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const SxpPageRender_1 = tslib_1.__importDefault(require("../SxpPageRender"));
 const Popup_1 = tslib_1.__importDefault(require("../SxpPageRender/Popup"));
+const DiyStoryPreview_1 = tslib_1.__importDefault(require("../DiyStoryPreview"));
 const _materials_ = tslib_1.__importStar(require("../../../materials"));
 const core_1 = require("../../../core");
 const SxpDataSourceProvider_1 = tslib_1.__importDefault(require("../../../core/context/SxpDataSourceProvider"));
@@ -11,20 +11,20 @@ const RESOLVER = {};
 Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
-const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
-    var _a, _b, _c, _d, _e, _f;
+const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const utmVal = (0, react_1.useMemo)(() => {
         var _a;
         const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
         return searchParams;
     }, []);
-    const [_schema, setSchema] = (0, react_1.useState)(data === null || data === void 0 ? void 0 : data.data);
+    const [_schema, setSchema] = (0, react_1.useState)((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
     const [channel, setChannel] = (0, react_1.useState)();
     return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
-        react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
-                var _a;
+        react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
+                var _a, _b;
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SxpPageRender_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
+                    react_1.default.createElement(DiyStoryPreview_1.default, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
                     react_1.default.createElement(Popup_1.default, null)));
             } })));
 };

package/lib/core/context/EditorContext.js

@@ -4,9 +4,9 @@ exports.EditorCore = exports.EditorContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = require("lodash");
+const localStore_1 = require("../utils/localStore");
 const DataSourceProvider_1 = tslib_1.__importDefault(require("./DataSourceProvider"));
 const tool_1 = require("../../core/utils/tool");
-const localStore_1 = require("../utils/localStore");
 const item = {
     id: (0, tool_1.uuid)(6, 10),
     item: {