pb-sxp-ui 1.11.0 → 1.12.0

package/dist/index.js

@@ -651,7 +651,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const themeTag = useRef();
     const curTime = useRef();
     const multiPostTimeRef = useRef();
-    const sessionTimeRef = useRef();
     const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
     const checkCommodityIndexRef = useRef(-1);
     const popupCurTimeRef = useRef(null);
@@ -833,20 +832,27 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
         return data;
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
-    const refreshFeSession = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f;
+    const refreshFeSession = 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) {
-            if (Math.floor((new Date() - ((_d = sessionTimeRef.current) !== null && _d !== void 0 ? _d : new Date())) / (1000 * 60)) >=
-                ((_f = (_e = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _e === void 0 ? void 0 : _e.expires) !== null && _f !== void 0 ? _f : 30)) {
+            const sessionStartTime = localStorage.getItem('sessionStartTime');
+            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', JSON.stringify(new Date().getTime()));
         }
-        else {
+        else if (enableReSid) {
             refreshFeSessionId();
         }
-        sessionTimeRef.current = new Date();
-    }, [data, sessionTimeRef]);
+        return expire;
+    }, [data]);
     const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
         // 关闭 BFF 事件上报
         if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -859,7 +865,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             // 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 }));
@@ -875,16 +880,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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 = useCallback(({ eventName, product }) => {
         var _a, _b, _c, _d, _e;
         if (!enableReportEvent ||
@@ -1010,7 +1006,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport, isFromHashtag]);
     const h5EnterLink = useCallback(() => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const queryString = location.search.slice(1);
         const params = qs.parse(queryString.replace(/\+/g, '%2B'));
         for (const key in params) {
@@ -1018,7 +1014,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         }
         const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
         const time = new Date();
-        curTime.current = time;
+        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) || !(curTime === null || curTime === void 0 ? void 0 : curTime.current)) {
+            curTime.current = time;
+        }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'h5LinkEnterFeed',
@@ -1030,12 +1029,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 utmContent: getVal('utm_content'),
                 enterTime: Math.floor(time / 1000) + '',
                 requestId: null,
-                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
+                enterUrl: (_e = (_d = window === null || window === void 0 ? void 0 : window.location) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '',
                 clSource: getVal('cl_source')
             },
             reportLayId: false
         });
-    }, [bffEventReport]);
+    }, [bffEventReport, data, curTime]);
     useEffect(() => {
         if (!isShowConsent)
             h5EnterLink();
@@ -17166,7 +17165,6 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
     const videoStartTime = useRef(0);
     const [isLoadFinish, setIsLoadFinish] = useState(false);
-    const [isFirstPlay, setIsFirstPlay] = useState(true);
     const { isActive } = useSwiperSlide();
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
@@ -17177,6 +17175,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     const hlsRef = useRef(null);
     const initTimeRef = useRef();
     const loadedTimeRef = useRef();
+    const isFirstPlayRef = useRef(true);
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -17232,26 +17231,13 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             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 = useCallback(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
@@ -17610,13 +17596,14 @@ const Picture = (props) => {
 
 const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
     var _a, _b;
-    const swiperRef = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
     const [isLoad, setIsLoad] = useState(false);
     const [imgInfo, setImgInfo] = useState();
-    const initTime = new Date();
     const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
+    const swiperRef = useRef();
+    const isFirstPlayRef = useRef(true);
+    const initTime = new Date();
     useEffect(() => {
         if (isLoad && isActive) {
             (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
@@ -17624,7 +17611,8 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
                 onViewImageEndEvent(rec);
             }
             else {
-                onViewImageStartEvent(index, imgInfo, true);
+                onViewImageStartEvent(index, isFirstPlayRef.current ? imgInfo : undefined, true);
+                isFirstPlayRef.current = false;
             }
         }
         else {
@@ -17979,7 +17967,7 @@ var NavBack$1 = memo(NavBack);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-12-13 17:20:22
+ * @LastEditTime: 2024-12-17 15:46:14
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -18004,7 +17992,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
     useEffect(() => {
-        refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession();
+        refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true);
     }, []);
     useEffect(() => {
         if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
@@ -18039,10 +18027,46 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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 = 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]);
     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') {
                 // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
@@ -18051,40 +18075,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     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') {
@@ -18117,8 +18111,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         openHashtag,
         isShowConsent,
         selectTag,
-        channel
+        channel,
+        handleSessionCompleted,
+        refreshFeSession
     ]);
+    const handleSessionExpire = useCallback(debounce(() => {
+        refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
+    }, 1000), [handleSessionCompleted, refreshFeSession]);
+    useEffect(() => {
+        const events = ['touchstart', 'touchcancel'];
+        events.forEach((event) => {
+            window.addEventListener(event, handleSessionExpire);
+        });
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, handleSessionExpire);
+            });
+        };
+    }, [handleSessionExpire]);
     const tagHeight = useMemo(() => {
         let h = 0;
         if (tagList.length > 0) {