pb-sxp-ui 1.11.1 → 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 +78 -73
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +78 -73
  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 +78 -73
  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 +58 -36
  16. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  17. package/es/core/context/SxpDataSourceProvider.js +10 -16
  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 +57 -35
  21. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  22. package/lib/core/context/SxpDataSourceProvider.js +10 -16
  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';
@@ -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?: (enableReSid?: boolean) => 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
@@ -208,22 +208,26 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
208
208
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
209
209
  return data;
210
210
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
211
- const refreshFeSession = useCallback((enableReSid) => {
211
+ const refreshFeSession = useCallback((enableReSid, event) => {
212
212
  var _a, _b, _c, _d, _e;
213
+ let expire = false;
213
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;
214
215
  if ((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable) {
215
216
  const sessionStartTime = localStorage.getItem('sessionStartTime');
216
- const sst = sessionStartTime ? new Date(sessionStartTime) : new Date();
217
- if (Math.floor((new Date() - sst) / (1000 * 60)) >=
217
+ const sst = sessionStartTime ? JSON.parse(sessionStartTime) : new Date().getTime();
218
+ if (Math.floor((new Date().getTime() - sst) / 1000 / 60) >=
218
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');
219
221
  refreshFeSessionId();
220
222
  curTime.current = new Date();
223
+ expire = true;
221
224
  }
222
- localStorage.setItem('sessionStartTime', new Date().toISOString());
225
+ localStorage.setItem('sessionStartTime', JSON.stringify(new Date().getTime()));
223
226
  }
224
227
  else if (enableReSid) {
225
228
  refreshFeSessionId();
226
229
  }
230
+ return expire;
227
231
  }, [data]);
228
232
  const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
229
233
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -232,7 +236,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
232
236
  if (!userInfo) {
233
237
  userInfo = {};
234
238
  }
235
- refreshFeSession();
236
239
  const sessionID = storeAndLoadFeSessionId();
237
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 + '' }));
238
241
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
@@ -248,16 +251,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
248
251
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
249
252
  type: 'beacon'
250
253
  });
251
- }, [
252
- bffFetch,
253
- curReqInfo,
254
- enableReportEvent,
255
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
256
- layoutVariantId,
257
- globalConfig,
258
- playbookType,
259
- refreshFeSession
260
- ]);
254
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
261
255
  const bffFbReport = useCallback(({ eventName, product }) => {
262
256
  var _a, _b, _c, _d, _e;
263
257
  if (!enableReportEvent ||
@@ -414,7 +408,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
414
408
  useEffect(() => {
415
409
  if (!isShowConsent)
416
410
  h5EnterLink();
417
- }, [isShowConsent, h5EnterLink]);
411
+ }, [isShowConsent]);
418
412
  useEffect(() => {
419
413
  if (isShowConsent || isPreview)
420
414
  return;
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
@@ -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?: (enableReSid?: boolean) => 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/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -211,22 +211,26 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
211
211
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
212
212
  return data;
213
213
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
214
- const refreshFeSession = (0, react_1.useCallback)((enableReSid) => {
214
+ const refreshFeSession = (0, react_1.useCallback)((enableReSid, event) => {
215
215
  var _a, _b, _c, _d, _e;
216
+ let expire = false;
216
217
  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;
217
218
  if ((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable) {
218
219
  const sessionStartTime = localStorage.getItem('sessionStartTime');
219
- const sst = sessionStartTime ? new Date(sessionStartTime) : new Date();
220
- if (Math.floor((new Date() - sst) / (1000 * 60)) >=
220
+ const sst = sessionStartTime ? JSON.parse(sessionStartTime) : new Date().getTime();
221
+ if (Math.floor((new Date().getTime() - sst) / 1000 / 60) >=
221
222
  ((_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)) {
223
+ event === null || event === void 0 ? void 0 : event('sessionTimeOut');
222
224
  (0, sessionStore_1.refreshFeSessionId)();
223
225
  curTime.current = new Date();
226
+ expire = true;
224
227
  }
225
- localStorage.setItem('sessionStartTime', new Date().toISOString());
228
+ localStorage.setItem('sessionStartTime', JSON.stringify(new Date().getTime()));
226
229
  }
227
230
  else if (enableReSid) {
228
231
  (0, sessionStore_1.refreshFeSessionId)();
229
232
  }
233
+ return expire;
230
234
  }, [data]);
231
235
  const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
232
236
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -235,7 +239,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
235
239
  if (!userInfo) {
236
240
  userInfo = {};
237
241
  }
238
- refreshFeSession();
239
242
  const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
240
243
  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), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() })), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' }));
241
244
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
@@ -251,16 +254,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
251
254
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
252
255
  type: 'beacon'
253
256
  });
254
- }, [
255
- bffFetch,
256
- curReqInfo,
257
- enableReportEvent,
258
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
259
- layoutVariantId,
260
- globalConfig,
261
- playbookType,
262
- refreshFeSession
263
- ]);
257
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
264
258
  const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
265
259
  var _a, _b, _c, _d, _e;
266
260
  if (!enableReportEvent ||
@@ -417,7 +411,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
417
411
  (0, react_1.useEffect)(() => {
418
412
  if (!isShowConsent)
419
413
  h5EnterLink();
420
- }, [isShowConsent, h5EnterLink]);
414
+ }, [isShowConsent]);
421
415
  (0, react_1.useEffect)(() => {
422
416
  if (isShowConsent || isPreview)
423
417
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.11.1",
3
+ "version": "1.12.0",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",