pb-sxp-ui 1.11.1 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +90 -83
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +90 -83
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +5 -5
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +5 -5
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +90 -83
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +5 -5
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageCore/index.js +1 -1
- package/es/core/components/SxpPageRender/PictureGroup/index.js +5 -3
- package/es/core/components/SxpPageRender/VideoWidget/index.js +5 -18
- package/es/core/components/SxpPageRender/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/index.js +66 -38
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +14 -23
- package/lib/core/components/SxpPageCore/index.js +1 -1
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +5 -3
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +5 -18
- package/lib/core/components/SxpPageRender/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/index.js +65 -37
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +14 -23
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -854,22 +854,26 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
854
854
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
855
855
|
return data;
|
856
856
|
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
857
|
-
const refreshFeSession = React.useCallback((enableReSid) => {
|
857
|
+
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
858
858
|
var _a, _b, _c, _d, _e;
|
859
|
+
let expire = false;
|
859
860
|
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;
|
860
861
|
if ((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable) {
|
861
862
|
const sessionStartTime = localStorage.getItem('sessionStartTime');
|
862
|
-
const sst = sessionStartTime ?
|
863
|
-
if (Math.floor((new Date() - sst) /
|
863
|
+
const sst = sessionStartTime ? JSON.parse(sessionStartTime) : new Date().getTime();
|
864
|
+
if (Math.floor((new Date().getTime() - sst) / 1000 / 60) >=
|
864
865
|
((_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)) {
|
866
|
+
event === null || event === void 0 ? void 0 : event('sessionTimeOut');
|
865
867
|
refreshFeSessionId();
|
866
868
|
curTime.current = new Date();
|
869
|
+
expire = true;
|
867
870
|
}
|
868
|
-
localStorage.setItem('sessionStartTime', new Date().
|
871
|
+
localStorage.setItem('sessionStartTime', JSON.stringify(new Date().getTime()));
|
869
872
|
}
|
870
873
|
else if (enableReSid) {
|
871
874
|
refreshFeSessionId();
|
872
875
|
}
|
876
|
+
return expire;
|
873
877
|
}, [data]);
|
874
878
|
const bffEventReport = React.useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
|
875
879
|
// 关闭 BFF 事件上报
|
@@ -883,7 +887,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
883
887
|
// tpChannelId: 'H5' // 后端处理
|
884
888
|
};
|
885
889
|
}
|
886
|
-
refreshFeSession();
|
887
890
|
const sessionID = storeAndLoadFeSessionId();
|
888
891
|
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 + '' }));
|
889
892
|
const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
|
@@ -899,16 +902,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
899
902
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
900
903
|
type: 'beacon'
|
901
904
|
});
|
902
|
-
}, [
|
903
|
-
bffFetch,
|
904
|
-
curReqInfo,
|
905
|
-
enableReportEvent,
|
906
|
-
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
907
|
-
layoutVariantId,
|
908
|
-
globalConfig,
|
909
|
-
playbookType,
|
910
|
-
refreshFeSession
|
911
|
-
]);
|
905
|
+
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
|
912
906
|
const bffFbReport = React.useCallback(({ eventName, product }) => {
|
913
907
|
var _a, _b, _c, _d, _e;
|
914
908
|
if (!enableReportEvent ||
|
@@ -1034,7 +1028,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1034
1028
|
});
|
1035
1029
|
}, [bffEventReport, isFromHashtag]);
|
1036
1030
|
const h5EnterLink = React.useCallback(() => {
|
1037
|
-
var _a, _b
|
1031
|
+
var _a, _b;
|
1038
1032
|
const queryString = location.search.slice(1);
|
1039
1033
|
const params = qs.parse(queryString.replace(/\+/g, '%2B'));
|
1040
1034
|
for (const key in params) {
|
@@ -1042,10 +1036,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1042
1036
|
}
|
1043
1037
|
const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
|
1044
1038
|
const time = new Date();
|
1045
|
-
|
1046
|
-
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)) {
|
1047
|
-
curTime.current = time;
|
1048
|
-
}
|
1039
|
+
curTime.current = time;
|
1049
1040
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1050
1041
|
eventInfo: {
|
1051
1042
|
eventSubject: 'h5LinkEnterFeed',
|
@@ -1057,16 +1048,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1057
1048
|
utmContent: getVal('utm_content'),
|
1058
1049
|
enterTime: Math.floor(time / 1000) + '',
|
1059
1050
|
requestId: null,
|
1060
|
-
enterUrl: (
|
1051
|
+
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 : '',
|
1061
1052
|
clSource: getVal('cl_source')
|
1062
1053
|
},
|
1063
1054
|
reportLayId: false
|
1064
1055
|
});
|
1065
|
-
}, [bffEventReport
|
1056
|
+
}, [bffEventReport]);
|
1066
1057
|
React.useEffect(() => {
|
1067
1058
|
if (!isShowConsent)
|
1068
1059
|
h5EnterLink();
|
1069
|
-
}, [isShowConsent
|
1060
|
+
}, [isShowConsent]);
|
1070
1061
|
React.useEffect(() => {
|
1071
1062
|
if (isShowConsent || isPreview)
|
1072
1063
|
return;
|
@@ -17193,7 +17184,6 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
17193
17184
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
17194
17185
|
const videoStartTime = React.useRef(0);
|
17195
17186
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
17196
|
-
const [isFirstPlay, setIsFirstPlay] = React.useState(true);
|
17197
17187
|
const { isActive } = useSwiperSlide();
|
17198
17188
|
const canvasRef = React.useRef(null);
|
17199
17189
|
const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
|
@@ -17204,6 +17194,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
17204
17194
|
const hlsRef = React.useRef(null);
|
17205
17195
|
const initTimeRef = React.useRef();
|
17206
17196
|
const loadedTimeRef = React.useRef();
|
17197
|
+
const isFirstPlayRef = React.useRef(true);
|
17207
17198
|
const blur = React.useMemo(() => {
|
17208
17199
|
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
17209
17200
|
}, [videoPostConfig]);
|
@@ -17259,26 +17250,13 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
17259
17250
|
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
17260
17251
|
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);
|
17261
17252
|
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);
|
17262
|
-
const playType =
|
17253
|
+
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17263
17254
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17264
|
-
eventInfo: {
|
17265
|
-
eventSubject: 'playVideo',
|
17266
|
-
eventDescription: 'User played the video',
|
17267
|
-
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 : '',
|
17268
|
-
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 : '',
|
17269
|
-
playType,
|
17270
|
-
startTime: videoCurrentTime,
|
17271
|
-
videoDuration,
|
17272
|
-
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 : []),
|
17273
|
-
position: index + '',
|
17274
|
-
contentFormat: 'video',
|
17275
|
-
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
|
17276
|
-
loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + ''
|
17277
|
-
}
|
17255
|
+
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) + '' }))
|
17278
17256
|
});
|
17279
|
-
|
17257
|
+
isFirstPlayRef.current = false;
|
17280
17258
|
}
|
17281
|
-
}), [bffEventReport, data, index,
|
17259
|
+
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17282
17260
|
const handLoadeddata = React.useCallback(() => {
|
17283
17261
|
var _a;
|
17284
17262
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
@@ -17637,13 +17615,14 @@ const Picture = (props) => {
|
|
17637
17615
|
|
17638
17616
|
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
17639
17617
|
var _a, _b;
|
17640
|
-
const swiperRef = React.useRef();
|
17641
17618
|
const { isActive } = useSwiperSlide();
|
17642
17619
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
17643
17620
|
const [isLoad, setIsLoad] = React.useState(false);
|
17644
17621
|
const [imgInfo, setImgInfo] = React.useState();
|
17645
|
-
const initTime = new Date();
|
17646
17622
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
17623
|
+
const swiperRef = React.useRef();
|
17624
|
+
const isFirstPlayRef = React.useRef(true);
|
17625
|
+
const initTime = new Date();
|
17647
17626
|
React.useEffect(() => {
|
17648
17627
|
if (isLoad && isActive) {
|
17649
17628
|
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
@@ -17651,7 +17630,8 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
17651
17630
|
onViewImageEndEvent(rec);
|
17652
17631
|
}
|
17653
17632
|
else {
|
17654
|
-
onViewImageStartEvent(index, imgInfo, true);
|
17633
|
+
onViewImageStartEvent(index, isFirstPlayRef.current ? imgInfo : undefined, true);
|
17634
|
+
isFirstPlayRef.current = false;
|
17655
17635
|
}
|
17656
17636
|
}
|
17657
17637
|
else {
|
@@ -18006,11 +17986,11 @@ var NavBack$1 = React.memo(NavBack);
|
|
18006
17986
|
* @Author: binruan@chatlabs.com
|
18007
17987
|
* @Date: 2024-03-20 10:27:31
|
18008
17988
|
* @LastEditors: binruan@chatlabs.com
|
18009
|
-
* @LastEditTime: 2024-12-
|
17989
|
+
* @LastEditTime: 2024-12-17 19:01:02
|
18010
17990
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18011
17991
|
*
|
18012
17992
|
*/
|
18013
|
-
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [],
|
17993
|
+
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
|
18014
17994
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
18015
17995
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
18016
17996
|
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
|
@@ -18040,12 +18020,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18040
18020
|
}
|
18041
18021
|
}, [data === null || data === void 0 ? void 0 : data.length]);
|
18042
18022
|
const handleH5EnterLink = React.useCallback(() => {
|
18023
|
+
var _a, _b, _c;
|
18024
|
+
const defaultGlobalConfig = (_b = (_a = defaultData === null || defaultData === void 0 ? void 0 : defaultData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig;
|
18025
|
+
if (!((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable)) {
|
18026
|
+
refreshFeSessionId();
|
18027
|
+
}
|
18043
18028
|
h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
|
18044
18029
|
if (data.length > 0) {
|
18045
18030
|
const now = new Date();
|
18046
18031
|
viewTime.current = now;
|
18047
18032
|
}
|
18048
|
-
}, [data.length, h5EnterLink]);
|
18033
|
+
}, [data.length, h5EnterLink, defaultData]);
|
18049
18034
|
React.useEffect(() => {
|
18050
18035
|
var _a;
|
18051
18036
|
if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
|
@@ -18066,10 +18051,46 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18066
18051
|
if (index !== -1)
|
18067
18052
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18068
18053
|
}, [data, ctaType, swiperRef]);
|
18054
|
+
const handleSessionCompleted = React.useCallback((fk) => {
|
18055
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18056
|
+
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18057
|
+
let fromKName = '';
|
18058
|
+
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))) {
|
18059
|
+
fromKName = 'pdpPage';
|
18060
|
+
}
|
18061
|
+
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') {
|
18062
|
+
fromKName = 'formPage';
|
18063
|
+
}
|
18064
|
+
else if (isFromHashtag) {
|
18065
|
+
fromKName = 'hashTagPage';
|
18066
|
+
}
|
18067
|
+
else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
|
18068
|
+
fromKName = 'videoPage';
|
18069
|
+
}
|
18070
|
+
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)) {
|
18071
|
+
fromKName = 'imagePage';
|
18072
|
+
}
|
18073
|
+
else if (item === null || item === void 0 ? void 0 : item.product) {
|
18074
|
+
fromKName = 'productPage';
|
18075
|
+
}
|
18076
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18077
|
+
eventInfo: {
|
18078
|
+
sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
|
18079
|
+
eventSubject: 'sessionCompleted',
|
18080
|
+
eventDescription: 'Session completed',
|
18081
|
+
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18082
|
+
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
18083
|
+
position: activeIndex + '',
|
18084
|
+
fromKName: fk ? fk : fromKName,
|
18085
|
+
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18086
|
+
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 : '',
|
18087
|
+
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 : ''
|
18088
|
+
}
|
18089
|
+
});
|
18090
|
+
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
18069
18091
|
React.useEffect(() => {
|
18070
18092
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18071
18093
|
const visibleChange = () => {
|
18072
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18073
18094
|
const repCond = !openHashtag && !isShowConsent;
|
18074
18095
|
if (document.visibilityState === 'hidden') {
|
18075
18096
|
// 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面(即离开原页面时),或者在移动设备上从浏览器切换到不同的应用程序时
|
@@ -18078,40 +18099,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18078
18099
|
SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
|
18079
18100
|
handleReportProductView(item);
|
18080
18101
|
}
|
18081
|
-
let fromKName = '';
|
18082
|
-
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))) {
|
18083
|
-
fromKName = 'pdpPage';
|
18084
|
-
}
|
18085
|
-
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') {
|
18086
|
-
fromKName = 'formPage';
|
18087
|
-
}
|
18088
|
-
else if (isFromHashtag) {
|
18089
|
-
fromKName = 'hashTagPage';
|
18090
|
-
}
|
18091
|
-
else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
|
18092
|
-
fromKName = 'videoPage';
|
18093
|
-
}
|
18094
|
-
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)) {
|
18095
|
-
fromKName = 'imagePage';
|
18096
|
-
}
|
18097
|
-
else if (item === null || item === void 0 ? void 0 : item.product) {
|
18098
|
-
fromKName = 'productPage';
|
18099
|
-
}
|
18100
18102
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0 || channel) {
|
18101
|
-
|
18102
|
-
|
18103
|
-
|
18104
|
-
eventSubject: 'sessionCompleted',
|
18105
|
-
eventDescription: 'Session completed',
|
18106
|
-
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18107
|
-
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
18108
|
-
position: activeIndex + '',
|
18109
|
-
fromKName,
|
18110
|
-
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18111
|
-
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 : '',
|
18112
|
-
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 : ''
|
18113
|
-
}
|
18114
|
-
});
|
18103
|
+
const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
|
18104
|
+
if (!isExpire)
|
18105
|
+
handleSessionCompleted();
|
18115
18106
|
}
|
18116
18107
|
}
|
18117
18108
|
else if (document.visibilityState === 'visible') {
|
@@ -18144,8 +18135,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18144
18135
|
openHashtag,
|
18145
18136
|
isShowConsent,
|
18146
18137
|
selectTag,
|
18147
|
-
channel
|
18138
|
+
channel,
|
18139
|
+
handleSessionCompleted,
|
18140
|
+
refreshFeSession
|
18148
18141
|
]);
|
18142
|
+
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18143
|
+
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18144
|
+
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18145
|
+
React.useEffect(() => {
|
18146
|
+
const events = ['touchstart', 'touchcancel'];
|
18147
|
+
events.forEach((event) => {
|
18148
|
+
window.addEventListener(event, handleSessionExpire);
|
18149
|
+
});
|
18150
|
+
return () => {
|
18151
|
+
events.forEach((event) => {
|
18152
|
+
window.removeEventListener(event, handleSessionExpire);
|
18153
|
+
});
|
18154
|
+
};
|
18155
|
+
}, [handleSessionExpire]);
|
18149
18156
|
const tagHeight = React.useMemo(() => {
|
18150
18157
|
let h = 0;
|
18151
18158
|
if (tagList.length > 0) {
|
@@ -19069,7 +19076,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
|
|
19069
19076
|
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 }) => {
|
19070
19077
|
var _a;
|
19071
19078
|
return (React.createElement(React.Fragment, null,
|
19072
|
-
React.createElement(SxpPageRender, Object.assign({}, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
|
19079
|
+
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 })),
|
19073
19080
|
React.createElement(Popup, null)));
|
19074
19081
|
} })));
|
19075
19082
|
};
|