pb-sxp-ui 1.15.13-alpha.3 → 1.15.13-alpha.5

package/dist/index.js

@@ -429,39 +429,6 @@ const Pagebuilder = {
     })
 };
 
-function useEditor() {
-    return useContext(EditorContext);
-}
-
-function useDataSource() {
-    return useContext(DataSourceContext);
-}
-
-const feRealSessionIdKey = 'feRealSessionIdKey';
-const generateFeSessionId = () => {
-    const uid = getUid(); // 32位长度
-    const timestamp = Date.now(); // 13位长度
-    const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
-    return result;
-};
-// 生成或者获取sessionID
-const storeAndLoadFeSessionId = () => {
-    let result = getFeSessionId();
-    if (!result) {
-        result = generateFeSessionId();
-        window.localStorage.setItem(feRealSessionIdKey, result);
-    }
-    return result;
-};
-const refreshFeSessionId = () => {
-    const result = generateFeSessionId();
-    window.localStorage.setItem(feRealSessionIdKey, result);
-};
-// 获取 sessionID
-const getFeSessionId = () => {
-    return window.localStorage.getItem(feRealSessionIdKey);
-};
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
@@ -513,6 +480,39 @@ const setUserConsentResult = () => {
     window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
 };
 
+function useEditor() {
+    return useContext(EditorContext);
+}
+
+function useDataSource() {
+    return useContext(DataSourceContext);
+}
+
+const feRealSessionIdKey = 'feRealSessionIdKey';
+const generateFeSessionId = () => {
+    const uid = getUid(); // 32位长度
+    const timestamp = Date.now(); // 13位长度
+    const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
+    return result;
+};
+// 生成或者获取sessionID
+const storeAndLoadFeSessionId = () => {
+    let result = getFeSessionId();
+    if (!result) {
+        result = generateFeSessionId();
+        window.localStorage.setItem(feRealSessionIdKey, result);
+    }
+    return result;
+};
+const refreshFeSessionId = () => {
+    const result = generateFeSessionId();
+    window.localStorage.setItem(feRealSessionIdKey, result);
+};
+// 获取 sessionID
+const getFeSessionId = () => {
+    return window.localStorage.getItem(feRealSessionIdKey);
+};
+
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
@@ -757,16 +757,16 @@ 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 }));
+        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) => {
+            const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                 const key = val.split('=')[0];
                 return key;
-            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             if (val)
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
@@ -780,19 +780,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);
@@ -800,11 +800,11 @@ 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('v3/recommend/direct', { method: 'POST', body: query }));
         if (!(result === null || result === void 0 ? void 0 : result.success)) {
@@ -814,8 +814,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);
             }
@@ -824,12 +824,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;
@@ -994,18 +994,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }), [bffFetch]);
     // 获取 Tag
     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);
@@ -1065,10 +1065,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', {
@@ -1083,7 +1083,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         if (!isShowConsent)
             h5EnterLink();
     }, [isShowConsent]);
-    console.log(data, '111');
     useEffect(() => {
         if (isShowConsent || isPreview)
             return;
@@ -18299,7 +18298,7 @@ function withBindDataSource(Component) {
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2025-03-26 19:32:00
+ * @LastEditTime: 2025-03-28 14:46:08
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
  *
  */
@@ -19461,7 +19460,7 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, s
 };
 var PictureGroup$1 = memo(PictureGroup);
 
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
     const { isActive } = useSwiperSlide();
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const videoRef = useRef(null);
@@ -19473,6 +19472,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
     const videoId = `pb-cache-video-${index}`;
     const hlsRef = useRef(null);
+    const loopPlayRef = useRef(loopPlay);
+    useEffect(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                var _a;
+                if (!videoRef.current)
+                    return;
+                handleTimeUpload();
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                setIsPauseVideo(false);
+            },
+            pause() {
+                var _a;
+                if (!videoRef.current)
+                    return;
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                setIsPauseVideo(true);
+            },
+            setLoopPlay(v) {
+                if (!videoRef.current)
+                    return;
+                loopPlayRef.current = v;
+            },
+            isPlaying() {
+                var _a;
+                return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
+            }
+        };
+    });
     useEffect(() => {
         if (!videoRef.current)
             return;
@@ -19482,8 +19513,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a;
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
-    useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = useCallback(() => {
+    const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         setIsPauseVideo(false);
         const item = data[index];
@@ -19500,9 +19531,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         setIsLoadFinish(true);
     }, []);
-    useCallback((type) => () => {
-        var _a, _b, _c, _d, _e;
-        if (!isLoadFinish)
+    const handleClickVideo = useCallback((type) => () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
             return;
         const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         switch (type) {
@@ -19520,10 +19551,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
             default:
                 if (isPause) {
-                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                    if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
+                        videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+                    }
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
                 }
                 else {
-                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                    (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
@@ -19547,7 +19581,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
             : 'translateY(-50%)';
     }, [videoPostConfig]);
-    const handLoadeddata = useCallback(() => {
+    useCallback(() => {
         if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
             return;
         const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
@@ -19561,36 +19595,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setFirstFrameSrc(canvas.toDataURL());
     }, []);
     const handleTimeUpload = useCallback(() => {
-        var _a, _b, _c;
+        var _a;
         if (!videoRef.current)
             return;
-        if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
-            (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-        }
+        const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
+        handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
+        setTimeout(() => {
+            var _a, _b;
+            if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
+                slideSwiper();
+            }
+        });
     }, []);
-    const handlePause = () => {
-        var _a, _b, _c, _d, _e, _f;
-        if (!videoRef.current || !isActive)
-            return;
-        if (!loopPlay)
+    const slideSwiper = () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        if (!loopPlayRef.current)
             return;
         if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-            (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
+            (_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.slideTo(0);
         }
         else {
-            const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
-            (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
+            const i = (_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.activeIndex;
+            (_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.slideTo(i + 1);
         }
     };
-    // useEffect(() => {
-    //   if (!videoRef.current) return;
-    //   if (!isActive) return;
-    //   if (!loopPlay) {
-    //     videoRef?.current?.pause();
-    //   } else {
-    //     videoRef?.current?.play();
-    //   }
-    // }, [loopPlay, isActive]);
+    const handlePause = () => {
+        setIsPauseVideo(true);
+    };
     useEffect(() => {
         var _a, _b, _c;
         if (!isActive)
@@ -19636,8 +19668,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
             (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
         };
-    }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
-    useMemo(() => {
+    }, [isActive]);
+    const renderPoster = useMemo(() => {
         if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
         }
@@ -19654,22 +19686,43 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
         return null;
     }
+    // const renderLoading = useMemo(() => {
+    //     if (!waiting || !isLoadFinish) return;
+    //     return (
+    //       <img
+    //         style={{
+    //           position: 'absolute',
+    //           top: '50%',
+    //           left: 0,
+    //           right: 0,
+    //           transform: 'translateY(-100%)',
+    //           margin: 'auto',
+    //           width: '50px',
+    //           height: '50px',
+    //           objectFit: 'contain'
+    //         }}
+    //         src={loading_gif}
+    //         alt='placeholder image'
+    //       />
+    //     );
+    // }, [waiting, isLoadFinish]);
     return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
             position: 'relative',
             width: '100%',
             height,
-            overflow: 'hidden',
-            pointerEvents: 'none'
-        } },
-        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
-};
+            overflow: 'hidden'
+        }, onClick: handleClickVideo() },
+        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
+        renderPoster,
+        isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
+});
 var VideoWidget$1 = memo(VideoWidget);
 
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2025-03-25 13:54:27
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2025-03-27 17:20:34
+ * @LastEditTime: 2025-03-31 14:29:21
  * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
  *
  */
@@ -19857,9 +19910,10 @@ Object.values(_materials_).forEach((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' }) => {
-    const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
+const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
+    const videoWidgetRef = useRef(null);
     const swiperRef = useRef(null);
+    const [curIndex, setCurIndex] = useState(0);
     useMemo(() => {
         let minusHeight = 0;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -19870,6 +19924,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         }
         return containerHeight - minusHeight;
     }, [globalConfig, containerHeight, tagList]);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                var _a;
+                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            },
+            pause() {
+                var _a;
+                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            },
+            slideTo(n) {
+                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(n);
+            },
+            isPlaying() {
+                var _a, _b;
+                return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
+            },
+            setLoopPlay(v) {
+                var _a;
+                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
+            }
+        };
+    });
     // 判断是否是视频
     const isVideoUrl = (url) => {
         if (url && url !== '' && typeof url === 'string') {
@@ -19884,10 +19964,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$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
+            return (React.createElement(VideoWidget$1, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { 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: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
         }
         else {
-            return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
+            return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
         }
     };
     useMemo(() => {
@@ -20004,6 +20084,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),
@@ -20024,35 +20105,45 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
             return;
         (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
     }, [activeIndex]);
+    const handleSessionExpire = useCallback(debounce(() => {
+        var _a;
+        (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
+    }, 1000), []);
     useEffect(() => {
-        var _a, _b;
-        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+        if (disabledListener)
             return;
-        (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
-    }, [loopPlay]);
+        const events = ['touchstart', 'touchcancel'];
+        events.forEach((event) => {
+            window.addEventListener(event, handleSessionExpire);
+        });
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, handleSessionExpire);
+            });
+        };
+    }, [handleSessionExpire, disabledListener]);
     return (React.createElement("div", { id: 'sxp-render', 
         // className={style['clc-sxp-container']}
         style: { height: containerHeight, position: 'relative', pointerEvents } },
         React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
-                setLooPlaySwiper(false);
                 swiperRef.current.swiper.allowTouchMove = false;
                 setTimeout(() => {
                     swiperRef.current.swiper.allowTouchMove = true;
                 }, 500);
             }, onActiveIndexChange: (swiper) => {
-                // setActiveIndex(swiper.activeIndex);
+                setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
                 onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
             }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
             return renderView(rec, index);
         }))));
-};
+});
 var DiyStoryPreview$1 = memo(DiyStoryPreview);
 
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2023-10-31 10:56:01
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-23 15:07:29
+ * @LastEditTime: 2025-03-28 17:15:47
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
  *
  */
@@ -20146,7 +20237,7 @@ const Popup = () => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2025-03-27 17:17:56
+ * @LastEditTime: 2025-03-28 16:55:21
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
  *
  */
@@ -20155,19 +20246,19 @@ Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
 const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
-    var _a, _b, _c, _d, _e, _f;
+    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$1, { 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$1, { 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(DiyStoryPreview$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents })),
+                    React.createElement(DiyStoryPreview$1, 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)));
             } })));
 };