pb-sxp-ui 1.11.0 → 1.12.0

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.
Files changed (23) hide show
  1. package/dist/index.cjs +91 -81
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +91 -81
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +5 -5
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +5 -5
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +91 -81
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +5 -5
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/PictureGroup/index.js +5 -3
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +5 -18
  15. package/es/core/components/SxpPageRender/index.js +59 -37
  16. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  17. package/es/core/context/SxpDataSourceProvider.js +22 -23
  18. package/lib/core/components/SxpPageRender/PictureGroup/index.js +5 -3
  19. package/lib/core/components/SxpPageRender/VideoWidget/index.js +5 -18
  20. package/lib/core/components/SxpPageRender/index.js +58 -36
  21. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  22. package/lib/core/context/SxpDataSourceProvider.js +22 -23
  23. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -9,13 +9,14 @@ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
9
  import { getScreenReader } from '../../../../core/utils/tool';
10
10
  const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
11
11
  var _a, _b;
12
- const swiperRef = useRef();
13
12
  const { isActive } = useSwiperSlide();
14
13
  const { sxpParameter, openHashtag } = useSxpDataSource();
15
14
  const [isLoad, setIsLoad] = useState(false);
16
15
  const [imgInfo, setImgInfo] = useState();
17
- const initTime = new Date();
18
16
  const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
17
+ const swiperRef = useRef();
18
+ const isFirstPlayRef = useRef(true);
19
+ const initTime = new Date();
19
20
  useEffect(() => {
20
21
  if (isLoad && isActive) {
21
22
  (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
@@ -23,7 +24,8 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
23
24
  onViewImageEndEvent(rec);
24
25
  }
25
26
  else {
26
- onViewImageStartEvent(index, imgInfo, true);
27
+ onViewImageStartEvent(index, isFirstPlayRef.current ? imgInfo : undefined, true);
28
+ isFirstPlayRef.current = false;
27
29
  }
28
30
  }
29
31
  else {
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -12,7 +12,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
12
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
13
13
  const videoStartTime = useRef(0);
14
14
  const [isLoadFinish, setIsLoadFinish] = useState(false);
15
- const [isFirstPlay, setIsFirstPlay] = useState(true);
16
15
  const { isActive } = useSwiperSlide();
17
16
  const canvasRef = useRef(null);
18
17
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
@@ -23,6 +22,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
23
22
  const hlsRef = useRef(null);
24
23
  const initTimeRef = useRef();
25
24
  const loadedTimeRef = useRef();
25
+ const isFirstPlayRef = useRef(true);
26
26
  const blur = useMemo(() => {
27
27
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
28
28
  }, [videoPostConfig]);
@@ -78,26 +78,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
78
78
  videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
79
79
  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);
80
80
  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);
81
- const playType = isFirstPlay ? '0' : '1';
81
+ const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
82
82
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
83
- eventInfo: {
84
- eventSubject: 'playVideo',
85
- eventDescription: 'User played the video',
86
- 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 : '',
87
- 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 : '',
88
- playType,
89
- startTime: videoCurrentTime,
90
- videoDuration,
91
- 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 : []),
92
- position: index + '',
93
- contentFormat: 'video',
94
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
95
- loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + ''
96
- }
83
+ 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) + '' }))
97
84
  });
98
- setIsFirstPlay(false);
85
+ isFirstPlayRef.current = false;
99
86
  }
100
- }), [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
87
+ }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
101
88
  const handLoadeddata = useCallback(() => {
102
89
  var _a;
103
90
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -20,7 +20,7 @@ import { useEventReport } from '../../../core/hooks/useEventReport';
20
20
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
21
21
  import Tagbar from './Tagbar';
22
22
  import { getFeUserState, getSlideSkipState } from '../../../core/utils/localStore';
23
- import { isEqual } from 'lodash';
23
+ import { debounce, isEqual } from 'lodash';
24
24
  import ConsentPopup from './ConsentPopup';
25
25
  import MultiPosts from '../../../materials/sxp/MultiPosts';
26
26
  import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
@@ -46,7 +46,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
46
46
  return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
47
47
  }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
48
48
  useEffect(() => {
49
- refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession();
49
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true);
50
50
  }, []);
51
51
  useEffect(() => {
52
52
  if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
@@ -81,50 +81,56 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
81
81
  if (index !== -1)
82
82
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
83
83
  }, [data, ctaType, swiperRef]);
84
+ const handleSessionCompleted = useCallback((fk) => {
85
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
86
+ const item = data === null || data === void 0 ? void 0 : data[activeIndex];
87
+ let fromKName = '';
88
+ 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))) {
89
+ fromKName = 'pdpPage';
90
+ }
91
+ 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') {
92
+ fromKName = 'formPage';
93
+ }
94
+ else if (isFromHashtag) {
95
+ fromKName = 'hashTagPage';
96
+ }
97
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
98
+ fromKName = 'videoPage';
99
+ }
100
+ 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)) {
101
+ fromKName = 'imagePage';
102
+ }
103
+ else if (item === null || item === void 0 ? void 0 : item.product) {
104
+ fromKName = 'productPage';
105
+ }
106
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
107
+ eventInfo: {
108
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
109
+ eventSubject: 'sessionCompleted',
110
+ eventDescription: 'Session completed',
111
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
112
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
113
+ position: activeIndex + '',
114
+ fromKName: fk ? fk : fromKName,
115
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
116
+ 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 : '',
117
+ 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 : ''
118
+ }
119
+ });
120
+ }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
84
121
  useEffect(() => {
85
122
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
86
123
  const visibleChange = () => {
87
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
88
124
  const repCond = !openHashtag && !isShowConsent;
89
125
  if (document.visibilityState === 'hidden') {
90
126
  if (repCond) {
91
127
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
92
128
  handleReportProductView(item);
93
129
  }
94
- let fromKName = '';
95
- 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))) {
96
- fromKName = 'pdpPage';
97
- }
98
- 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') {
99
- fromKName = 'formPage';
100
- }
101
- else if (isFromHashtag) {
102
- fromKName = 'hashTagPage';
103
- }
104
- else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
105
- fromKName = 'videoPage';
106
- }
107
- 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)) {
108
- fromKName = 'imagePage';
109
- }
110
- else if (item === null || item === void 0 ? void 0 : item.product) {
111
- fromKName = 'productPage';
112
- }
113
130
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0 || channel) {
114
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
115
- eventInfo: {
116
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
117
- eventSubject: 'sessionCompleted',
118
- eventDescription: 'Session completed',
119
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
120
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
121
- position: activeIndex + '',
122
- fromKName,
123
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
124
- 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 : '',
125
- 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 : ''
126
- }
127
- });
131
+ const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
132
+ if (!isExpire)
133
+ handleSessionCompleted();
128
134
  }
129
135
  }
130
136
  else if (document.visibilityState === 'visible') {
@@ -156,8 +162,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
156
162
  openHashtag,
157
163
  isShowConsent,
158
164
  selectTag,
159
- channel
165
+ channel,
166
+ handleSessionCompleted,
167
+ refreshFeSession
160
168
  ]);
169
+ const handleSessionExpire = useCallback(debounce(() => {
170
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
171
+ }, 1000), [handleSessionCompleted, refreshFeSession]);
172
+ useEffect(() => {
173
+ const events = ['touchstart', 'touchcancel'];
174
+ events.forEach((event) => {
175
+ window.addEventListener(event, handleSessionExpire);
176
+ });
177
+ return () => {
178
+ events.forEach((event) => {
179
+ window.removeEventListener(event, handleSessionExpire);
180
+ });
181
+ };
182
+ }, [handleSessionExpire]);
161
183
  const tagHeight = useMemo(() => {
162
184
  let h = 0;
163
185
  if (tagList.length > 0) {
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -89,7 +89,7 @@ export interface ISxpDataSourceContext {
89
89
  eventTimeList?: Array<IEventTimeType>;
90
90
  setEventTimeList?: React.Dispatch<React.SetStateAction<Array<IEventTimeType>>>;
91
91
  multiPostTimeRef?: any;
92
- refreshFeSession?: () => void;
92
+ refreshFeSession?: (enableReSid?: boolean, event?: (fk: string) => void) => void;
93
93
  }
94
94
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
95
95
  export interface SxpDataSourceProviderProps {
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -36,7 +36,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
36
36
  const themeTag = useRef();
37
37
  const curTime = useRef();
38
38
  const multiPostTimeRef = useRef();
39
- const sessionTimeRef = useRef();
40
39
  const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
41
40
  const checkCommodityIndexRef = useRef(-1);
42
41
  const popupCurTimeRef = useRef(null);
@@ -209,20 +208,27 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
209
208
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
210
209
  return data;
211
210
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
212
- const refreshFeSession = useCallback(() => {
213
- var _a, _b, _c, _d, _e, _f;
211
+ const refreshFeSession = useCallback((enableReSid, event) => {
212
+ var _a, _b, _c, _d, _e;
213
+ let expire = false;
214
214
  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;
215
215
  if ((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable) {
216
- if (Math.floor((new Date() - ((_d = sessionTimeRef.current) !== null && _d !== void 0 ? _d : new Date())) / (1000 * 60)) >=
217
- ((_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)) {
216
+ const sessionStartTime = localStorage.getItem('sessionStartTime');
217
+ const sst = sessionStartTime ? JSON.parse(sessionStartTime) : new Date().getTime();
218
+ if (Math.floor((new Date().getTime() - sst) / 1000 / 60) >=
219
+ ((_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)) {
220
+ event === null || event === void 0 ? void 0 : event('sessionTimeOut');
218
221
  refreshFeSessionId();
222
+ curTime.current = new Date();
223
+ expire = true;
219
224
  }
225
+ localStorage.setItem('sessionStartTime', JSON.stringify(new Date().getTime()));
220
226
  }
221
- else {
227
+ else if (enableReSid) {
222
228
  refreshFeSessionId();
223
229
  }
224
- sessionTimeRef.current = new Date();
225
- }, [data, sessionTimeRef]);
230
+ return expire;
231
+ }, [data]);
226
232
  const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
227
233
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
228
234
  return;
@@ -230,7 +236,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
230
236
  if (!userInfo) {
231
237
  userInfo = {};
232
238
  }
233
- refreshFeSession();
234
239
  const sessionID = storeAndLoadFeSessionId();
235
240
  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() && { sxpDevice: getDevice() })), (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 + '' }));
236
241
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
@@ -246,16 +251,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
246
251
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
247
252
  type: 'beacon'
248
253
  });
249
- }, [
250
- bffFetch,
251
- curReqInfo,
252
- enableReportEvent,
253
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
254
- layoutVariantId,
255
- globalConfig,
256
- playbookType,
257
- refreshFeSession
258
- ]);
254
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
259
255
  const bffFbReport = useCallback(({ eventName, product }) => {
260
256
  var _a, _b, _c, _d, _e;
261
257
  if (!enableReportEvent ||
@@ -380,7 +376,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
380
376
  });
381
377
  }, [bffEventReport, isFromHashtag]);
382
378
  const h5EnterLink = useCallback(() => {
383
- var _a, _b;
379
+ var _a, _b, _c, _d, _e;
384
380
  const queryString = location.search.slice(1);
385
381
  const params = qs.parse(queryString.replace(/\+/g, '%2B'));
386
382
  for (const key in params) {
@@ -388,7 +384,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
388
384
  }
389
385
  const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
390
386
  const time = new Date();
391
- curTime.current = time;
387
+ 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;
388
+ 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)) {
389
+ curTime.current = time;
390
+ }
392
391
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
393
392
  eventInfo: {
394
393
  eventSubject: 'h5LinkEnterFeed',
@@ -400,12 +399,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
400
399
  utmContent: getVal('utm_content'),
401
400
  enterTime: Math.floor(time / 1000) + '',
402
401
  requestId: null,
403
- 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 : '',
402
+ 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 : '',
404
403
  clSource: getVal('cl_source')
405
404
  },
406
405
  reportLayId: false
407
406
  });
408
- }, [bffEventReport]);
407
+ }, [bffEventReport, data, curTime]);
409
408
  useEffect(() => {
410
409
  if (!isShowConsent)
411
410
  h5EnterLink();
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -11,13 +11,14 @@ const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
12
  const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
13
13
  var _a, _b;
14
- const swiperRef = (0, react_1.useRef)();
15
14
  const { isActive } = (0, react_2.useSwiperSlide)();
16
15
  const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
17
16
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
18
17
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
19
- const initTime = new Date();
20
18
  const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
+ const swiperRef = (0, react_1.useRef)();
20
+ const isFirstPlayRef = (0, react_1.useRef)(true);
21
+ const initTime = new Date();
21
22
  (0, react_1.useEffect)(() => {
22
23
  if (isLoad && isActive) {
23
24
  (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
@@ -25,7 +26,8 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
25
26
  onViewImageEndEvent(rec);
26
27
  }
27
28
  else {
28
- onViewImageStartEvent(index, imgInfo, true);
29
+ onViewImageStartEvent(index, isFirstPlayRef.current ? imgInfo : undefined, true);
30
+ isFirstPlayRef.current = false;
29
31
  }
30
32
  }
31
33
  else {
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -14,7 +14,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14
14
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
15
15
  const videoStartTime = (0, react_1.useRef)(0);
16
16
  const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
17
- const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
18
17
  const { isActive } = (0, react_2.useSwiperSlide)();
19
18
  const canvasRef = (0, react_1.useRef)(null);
20
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
@@ -25,6 +24,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
25
24
  const hlsRef = (0, react_1.useRef)(null);
26
25
  const initTimeRef = (0, react_1.useRef)();
27
26
  const loadedTimeRef = (0, react_1.useRef)();
27
+ const isFirstPlayRef = (0, react_1.useRef)(true);
28
28
  const blur = (0, react_1.useMemo)(() => {
29
29
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
30
30
  }, [videoPostConfig]);
@@ -80,26 +80,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
80
80
  videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
81
81
  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);
82
82
  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);
83
- const playType = isFirstPlay ? '0' : '1';
83
+ const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
84
84
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
85
- eventInfo: {
86
- eventSubject: 'playVideo',
87
- eventDescription: 'User played the video',
88
- 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 : '',
89
- 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 : '',
90
- playType,
91
- startTime: videoCurrentTime,
92
- videoDuration,
93
- 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 : []),
94
- position: index + '',
95
- contentFormat: 'video',
96
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
97
- loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + ''
98
- }
85
+ 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) + '' }))
99
86
  });
100
- setIsFirstPlay(false);
87
+ isFirstPlayRef.current = false;
101
88
  }
102
- }), [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
89
+ }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
103
90
  const handLoadeddata = (0, react_1.useCallback)(() => {
104
91
  var _a;
105
92
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -49,7 +49,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
49
49
  return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
50
50
  }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
51
51
  (0, react_1.useEffect)(() => {
52
- refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession();
52
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true);
53
53
  }, []);
54
54
  (0, react_1.useEffect)(() => {
55
55
  if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
@@ -84,50 +84,56 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
84
84
  if (index !== -1)
85
85
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
86
86
  }, [data, ctaType, swiperRef]);
87
+ const handleSessionCompleted = (0, react_1.useCallback)((fk) => {
88
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
89
+ const item = data === null || data === void 0 ? void 0 : data[activeIndex];
90
+ let fromKName = '';
91
+ 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))) {
92
+ fromKName = 'pdpPage';
93
+ }
94
+ 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') {
95
+ fromKName = 'formPage';
96
+ }
97
+ else if (isFromHashtag) {
98
+ fromKName = 'hashTagPage';
99
+ }
100
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
101
+ fromKName = 'videoPage';
102
+ }
103
+ 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)) {
104
+ fromKName = 'imagePage';
105
+ }
106
+ else if (item === null || item === void 0 ? void 0 : item.product) {
107
+ fromKName = 'productPage';
108
+ }
109
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
110
+ eventInfo: {
111
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
112
+ eventSubject: 'sessionCompleted',
113
+ eventDescription: 'Session completed',
114
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
115
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
116
+ position: activeIndex + '',
117
+ fromKName: fk ? fk : fromKName,
118
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
119
+ 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 : '',
120
+ 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 : ''
121
+ }
122
+ });
123
+ }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
87
124
  (0, react_1.useEffect)(() => {
88
125
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
89
126
  const visibleChange = () => {
90
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
91
127
  const repCond = !openHashtag && !isShowConsent;
92
128
  if (document.visibilityState === 'hidden') {
93
129
  if (repCond) {
94
130
  event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
95
131
  handleReportProductView(item);
96
132
  }
97
- let fromKName = '';
98
- 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))) {
99
- fromKName = 'pdpPage';
100
- }
101
- 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') {
102
- fromKName = 'formPage';
103
- }
104
- else if (isFromHashtag) {
105
- fromKName = 'hashTagPage';
106
- }
107
- else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
108
- fromKName = 'videoPage';
109
- }
110
- 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)) {
111
- fromKName = 'imagePage';
112
- }
113
- else if (item === null || item === void 0 ? void 0 : item.product) {
114
- fromKName = 'productPage';
115
- }
116
133
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0 || channel) {
117
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
118
- eventInfo: {
119
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
120
- eventSubject: 'sessionCompleted',
121
- eventDescription: 'Session completed',
122
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
123
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
124
- position: activeIndex + '',
125
- fromKName,
126
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
127
- 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 : '',
128
- 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 : ''
129
- }
130
- });
134
+ const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
135
+ if (!isExpire)
136
+ handleSessionCompleted();
131
137
  }
132
138
  }
133
139
  else if (document.visibilityState === 'visible') {
@@ -159,8 +165,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
159
165
  openHashtag,
160
166
  isShowConsent,
161
167
  selectTag,
162
- channel
168
+ channel,
169
+ handleSessionCompleted,
170
+ refreshFeSession
163
171
  ]);
172
+ const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
173
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
174
+ }, 1000), [handleSessionCompleted, refreshFeSession]);
175
+ (0, react_1.useEffect)(() => {
176
+ const events = ['touchstart', 'touchcancel'];
177
+ events.forEach((event) => {
178
+ window.addEventListener(event, handleSessionExpire);
179
+ });
180
+ return () => {
181
+ events.forEach((event) => {
182
+ window.removeEventListener(event, handleSessionExpire);
183
+ });
184
+ };
185
+ }, [handleSessionExpire]);
164
186
  const tagHeight = (0, react_1.useMemo)(() => {
165
187
  let h = 0;
166
188
  if (tagList.length > 0) {
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -89,7 +89,7 @@ export interface ISxpDataSourceContext {
89
89
  eventTimeList?: Array<IEventTimeType>;
90
90
  setEventTimeList?: React.Dispatch<React.SetStateAction<Array<IEventTimeType>>>;
91
91
  multiPostTimeRef?: any;
92
- refreshFeSession?: () => void;
92
+ refreshFeSession?: (enableReSid?: boolean, event?: (fk: string) => void) => void;
93
93
  }
94
94
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
95
95
  export interface SxpDataSourceProviderProps {