pb-sxp-ui 1.11.1 → 1.12.0

package/dist/pb-ui.js

@@ -847,22 +847,26 @@
             setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
             return data;
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
-        const refreshFeSession = React.useCallback((enableReSid) => {
+        const refreshFeSession = React.useCallback((enableReSid, event) => {
             var _a, _b, _c, _d, _e;
+            let expire = false;
             const defaultGlobalConfig = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig;
             if ((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable) {
                 const sessionStartTime = localStorage.getItem('sessionStartTime');
-                const sst = sessionStartTime ? new Date(sessionStartTime) : new Date();
-                if (Math.floor((new Date() - sst) / (1000 * 60)) >=
+                const sst = sessionStartTime ? JSON.parse(sessionStartTime) : new Date().getTime();
+                if (Math.floor((new Date().getTime() - sst) / 1000 / 60) >=
                     ((_e = (_d = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _d === void 0 ? void 0 : _d.expires) !== null && _e !== void 0 ? _e : 30)) {
+                    event === null || event === void 0 ? void 0 : event('sessionTimeOut');
                     refreshFeSessionId();
                     curTime.current = new Date();
+                    expire = true;
                 }
-                localStorage.setItem('sessionStartTime', new Date().toISOString());
+                localStorage.setItem('sessionStartTime', JSON.stringify(new Date().getTime()));
             }
             else if (enableReSid) {
                 refreshFeSessionId();
             }
+            return expire;
         }, [data]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
             // 关闭 BFF 事件上报
@@ -876,7 +880,6 @@
                 // tpChannelId: 'H5' // 后端处理
                 };
             }
-            refreshFeSession();
             const sessionID = storeAndLoadFeSessionId();
             const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), (layoutVariantId && reportLayId && { layoutVariantId })), eventInfo), (getDevice$1() && { sxpDevice: getDevice$1() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' }));
             const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
@@ -892,16 +895,7 @@
                 body: { userInfo: realUserInfo, eventInfo: realEventInfo },
                 type: 'beacon'
             });
-        }, [
-            bffFetch,
-            curReqInfo,
-            enableReportEvent,
-            globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
-            layoutVariantId,
-            globalConfig,
-            playbookType,
-            refreshFeSession
-        ]);
+        }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
         const bffFbReport = React.useCallback(({ eventName, product }) => {
             var _a, _b, _c, _d, _e;
             if (!enableReportEvent ||
@@ -1059,7 +1053,7 @@
         React.useEffect(() => {
             if (!isShowConsent)
                 h5EnterLink();
-        }, [isShowConsent, h5EnterLink]);
+        }, [isShowConsent]);
         React.useEffect(() => {
             if (isShowConsent || isPreview)
                 return;
@@ -17186,7 +17180,6 @@ Made in Italy` })));
         const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
         const videoStartTime = React.useRef(0);
         const [isLoadFinish, setIsLoadFinish] = React.useState(false);
-        const [isFirstPlay, setIsFirstPlay] = React.useState(true);
         const { isActive } = useSwiperSlide();
         const canvasRef = React.useRef(null);
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
@@ -17197,6 +17190,7 @@ Made in Italy` })));
         const hlsRef = React.useRef(null);
         const initTimeRef = React.useRef();
         const loadedTimeRef = React.useRef();
+        const isFirstPlayRef = React.useRef(true);
         const blur = React.useMemo(() => {
             return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
         }, [videoPostConfig]);
@@ -17252,26 +17246,13 @@ Made in Italy` })));
                 videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
                 const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
                 const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-                const playType = isFirstPlay ? '0' : '1';
+                const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playVideo',
-                        eventDescription: 'User played the video',
-                        contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        playType,
-                        startTime: videoCurrentTime,
-                        videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: index + '',
-                        contentFormat: 'video',
-                        traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
-                        loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + ''
-                    }
+                    eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '', contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []), position: index + '', contentFormat: 'video', traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
                 });
-                setIsFirstPlay(false);
+                isFirstPlayRef.current = false;
             }
-        }), [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
+        }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
         const handLoadeddata = React.useCallback(() => {
             var _a;
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
@@ -17630,13 +17611,14 @@ Made in Italy` })));
 
     const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
         var _a, _b;
-        const swiperRef = React.useRef();
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
         const [isLoad, setIsLoad] = React.useState(false);
         const [imgInfo, setImgInfo] = React.useState();
-        const initTime = new Date();
         const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
+        const swiperRef = React.useRef();
+        const isFirstPlayRef = React.useRef(true);
+        const initTime = new Date();
         React.useEffect(() => {
             if (isLoad && isActive) {
                 (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
@@ -17644,7 +17626,8 @@ Made in Italy` })));
                     onViewImageEndEvent(rec);
                 }
                 else {
-                    onViewImageStartEvent(index, imgInfo, true);
+                    onViewImageStartEvent(index, isFirstPlayRef.current ? imgInfo : undefined, true);
+                    isFirstPlayRef.current = false;
                 }
             }
             else {
@@ -17999,7 +17982,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-12-16 15:03:38
+     * @LastEditTime: 2024-12-17 15:46:14
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -18059,10 +18042,46 @@ Made in Italy` })));
             if (index !== -1)
                 (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
         }, [data, ctaType, swiperRef]);
+        const handleSessionCompleted = React.useCallback((fk) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+            const item = data === null || data === void 0 ? void 0 : data[activeIndex];
+            let fromKName = '';
+            if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
+                fromKName = 'pdpPage';
+            }
+            else if (popupDetailData && ((_g = tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item) === null || _g === void 0 ? void 0 : _g.type) === 'Appoint') {
+                fromKName = 'formPage';
+            }
+            else if (isFromHashtag) {
+                fromKName = 'hashTagPage';
+            }
+            else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
+                fromKName = 'videoPage';
+            }
+            else if (((_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) && ((_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.imgUrls) === null || _l === void 0 ? void 0 : _l.length)) {
+                fromKName = 'imagePage';
+            }
+            else if (item === null || item === void 0 ? void 0 : item.product) {
+                fromKName = 'productPage';
+            }
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
+                    eventSubject: 'sessionCompleted',
+                    eventDescription: 'Session completed',
+                    contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
+                    productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
+                    position: activeIndex + '',
+                    fromKName: fk ? fk : fromKName,
+                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                    ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
+                    traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
+                }
+            });
+        }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
         React.useEffect(() => {
             const item = data === null || data === void 0 ? void 0 : data[activeIndex];
             const visibleChange = () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
                 const repCond = !openHashtag && !isShowConsent;
                 if (document.visibilityState === 'hidden') {
                     // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
@@ -18071,40 +18090,10 @@ Made in Italy` })));
                         SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
                         handleReportProductView(item);
                     }
-                    let fromKName = '';
-                    if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
-                        fromKName = 'pdpPage';
-                    }
-                    else if (popupDetailData && ((_g = tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item) === null || _g === void 0 ? void 0 : _g.type) === 'Appoint') {
-                        fromKName = 'formPage';
-                    }
-                    else if (isFromHashtag) {
-                        fromKName = 'hashTagPage';
-                    }
-                    else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
-                        fromKName = 'videoPage';
-                    }
-                    else if (((_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) && ((_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.imgUrls) === null || _l === void 0 ? void 0 : _l.length)) {
-                        fromKName = 'imagePage';
-                    }
-                    else if (item === null || item === void 0 ? void 0 : item.product) {
-                        fromKName = 'productPage';
-                    }
                     if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0 || channel) {
-                        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                            eventInfo: {
-                                sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
-                                eventSubject: 'sessionCompleted',
-                                eventDescription: 'Session completed',
-                                contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
-                                productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
-                                position: activeIndex + '',
-                                fromKName,
-                                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                                ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
-                                traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
-                            }
-                        });
+                        const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
+                        if (!isExpire)
+                            handleSessionCompleted();
                     }
                 }
                 else if (document.visibilityState === 'visible') {
@@ -18137,8 +18126,24 @@ Made in Italy` })));
             openHashtag,
             isShowConsent,
             selectTag,
-            channel
+            channel,
+            handleSessionCompleted,
+            refreshFeSession
         ]);
+        const handleSessionExpire = React.useCallback(lodash.debounce(() => {
+            refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
+        }, 1000), [handleSessionCompleted, refreshFeSession]);
+        React.useEffect(() => {
+            const events = ['touchstart', 'touchcancel'];
+            events.forEach((event) => {
+                window.addEventListener(event, handleSessionExpire);
+            });
+            return () => {
+                events.forEach((event) => {
+                    window.removeEventListener(event, handleSessionExpire);
+                });
+            };
+        }, [handleSessionExpire]);
         const tagHeight = React.useMemo(() => {
             let h = 0;
             if (tagList.length > 0) {