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.
Files changed (27) hide show
  1. package/dist/index.cjs +90 -83
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +90 -83
  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 +90 -83
  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/SxpPageCore/index.js +1 -1
  14. package/es/core/components/SxpPageRender/PictureGroup/index.js +5 -3
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +5 -18
  16. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/index.js +66 -38
  18. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  19. package/es/core/context/SxpDataSourceProvider.js +14 -23
  20. package/lib/core/components/SxpPageCore/index.js +1 -1
  21. package/lib/core/components/SxpPageRender/PictureGroup/index.js +5 -3
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +5 -18
  23. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  24. package/lib/core/components/SxpPageRender/index.js +65 -37
  25. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  26. package/lib/core/context/SxpDataSourceProvider.js +14 -23
  27. package/package.json +1 -1
package/es/core/components/SxpPageCore/index.js CHANGED
@@ -21,7 +21,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
21
21
  React.createElement(SxpDataSourceProvider, { 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 }) => {
22
22
  var _a;
23
23
  return (React.createElement(React.Fragment, null,
24
- 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 })),
24
+ 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 })),
25
25
  React.createElement(Popup, null)));
26
26
  } })));
27
27
  };
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.d.ts CHANGED
@@ -110,6 +110,7 @@ export interface ISxpPageRenderProps {
110
110
  hashTagStyle?: CSSProperties;
111
111
  licenseUrl?: string;
112
112
  hashTagRightMargin: number;
113
+ defaultData?: any;
113
114
  }
114
115
  declare const SxpPageRender: FC<ISxpPageRenderProps>;
115
116
  export default SxpPageRender;
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -15,17 +15,18 @@ import WaterFall from './WaterFall';
15
15
  import Nudge from './Nudge';
16
16
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
17
17
  import { useEditor, useSxpDataSource } from '../../../core/hooks';
18
+ import { refreshFeSessionId } from '../../../core/utils/sessionStore';
18
19
  import './index.less';
19
20
  import { useEventReport } from '../../../core/hooks/useEventReport';
20
21
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
21
22
  import Tagbar from './Tagbar';
22
23
  import { getFeUserState, getSlideSkipState } from '../../../core/utils/localStore';
23
- import { isEqual } from 'lodash';
24
+ import { debounce, isEqual } from 'lodash';
24
25
  import ConsentPopup from './ConsentPopup';
25
26
  import MultiPosts from '../../../materials/sxp/MultiPosts';
26
27
  import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
27
28
  import NavBack from './NavBack';
28
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
29
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
29
30
  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;
30
31
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
31
32
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -55,12 +56,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
55
56
  }
56
57
  }, [data === null || data === void 0 ? void 0 : data.length]);
57
58
  const handleH5EnterLink = useCallback(() => {
59
+ var _a, _b, _c;
60
+ 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;
61
+ if (!((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable)) {
62
+ refreshFeSessionId();
63
+ }
58
64
  h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
59
65
  if (data.length > 0) {
60
66
  const now = new Date();
61
67
  viewTime.current = now;
62
68
  }
63
- }, [data.length, h5EnterLink]);
69
+ }, [data.length, h5EnterLink, defaultData]);
64
70
  useEffect(() => {
65
71
  var _a;
66
72
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -81,50 +87,56 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
81
87
  if (index !== -1)
82
88
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
83
89
  }, [data, ctaType, swiperRef]);
90
+ const handleSessionCompleted = useCallback((fk) => {
91
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
92
+ const item = data === null || data === void 0 ? void 0 : data[activeIndex];
93
+ let fromKName = '';
94
+ 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))) {
95
+ fromKName = 'pdpPage';
96
+ }
97
+ 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') {
98
+ fromKName = 'formPage';
99
+ }
100
+ else if (isFromHashtag) {
101
+ fromKName = 'hashTagPage';
102
+ }
103
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
104
+ fromKName = 'videoPage';
105
+ }
106
+ 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)) {
107
+ fromKName = 'imagePage';
108
+ }
109
+ else if (item === null || item === void 0 ? void 0 : item.product) {
110
+ fromKName = 'productPage';
111
+ }
112
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
113
+ eventInfo: {
114
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
115
+ eventSubject: 'sessionCompleted',
116
+ eventDescription: 'Session completed',
117
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
118
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
119
+ position: activeIndex + '',
120
+ fromKName: fk ? fk : fromKName,
121
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
122
+ 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 : '',
123
+ 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 : ''
124
+ }
125
+ });
126
+ }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
84
127
  useEffect(() => {
85
128
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
86
129
  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
130
  const repCond = !openHashtag && !isShowConsent;
89
131
  if (document.visibilityState === 'hidden') {
90
132
  if (repCond) {
91
133
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
92
134
  handleReportProductView(item);
93
135
  }
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
136
  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
- });
137
+ const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
138
+ if (!isExpire)
139
+ handleSessionCompleted();
128
140
  }
129
141
  }
130
142
  else if (document.visibilityState === 'visible') {
@@ -156,8 +168,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
156
168
  openHashtag,
157
169
  isShowConsent,
158
170
  selectTag,
159
- channel
171
+ channel,
172
+ handleSessionCompleted,
173
+ refreshFeSession
160
174
  ]);
175
+ const handleSessionExpire = useCallback(debounce(() => {
176
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
177
+ }, 1000), [handleSessionCompleted, refreshFeSession]);
178
+ useEffect(() => {
179
+ const events = ['touchstart', 'touchcancel'];
180
+ events.forEach((event) => {
181
+ window.addEventListener(event, handleSessionExpire);
182
+ });
183
+ return () => {
184
+ events.forEach((event) => {
185
+ window.removeEventListener(event, handleSessionExpire);
186
+ });
187
+ };
188
+ }, [handleSessionExpire]);
161
189
  const tagHeight = useMemo(() => {
162
190
  let h = 0;
163
191
  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 ||
@@ -382,7 +376,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
382
376
  });
383
377
  }, [bffEventReport, isFromHashtag]);
384
378
  const h5EnterLink = useCallback(() => {
385
- var _a, _b, _c, _d, _e;
379
+ var _a, _b;
386
380
  const queryString = location.search.slice(1);
387
381
  const params = qs.parse(queryString.replace(/\+/g, '%2B'));
388
382
  for (const key in params) {
@@ -390,10 +384,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
390
384
  }
391
385
  const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
392
386
  const time = new Date();
393
- 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;
394
- 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)) {
395
- curTime.current = time;
396
- }
387
+ curTime.current = time;
397
388
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
398
389
  eventInfo: {
399
390
  eventSubject: 'h5LinkEnterFeed',
@@ -405,16 +396,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
405
396
  utmContent: getVal('utm_content'),
406
397
  enterTime: Math.floor(time / 1000) + '',
407
398
  requestId: null,
408
- 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 : '',
399
+ 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 : '',
409
400
  clSource: getVal('cl_source')
410
401
  },
411
402
  reportLayId: false
412
403
  });
413
- }, [bffEventReport, data, curTime]);
404
+ }, [bffEventReport]);
414
405
  useEffect(() => {
415
406
  if (!isShowConsent)
416
407
  h5EnterLink();
417
- }, [isShowConsent, h5EnterLink]);
408
+ }, [isShowConsent]);
418
409
  useEffect(() => {
419
410
  if (isShowConsent || isPreview)
420
411
  return;
package/lib/core/components/SxpPageCore/index.js CHANGED
@@ -24,7 +24,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
24
24
  react_1.default.createElement(SxpDataSourceProvider_1.default, { 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 }) => {
25
25
  var _a;
26
26
  return (react_1.default.createElement(react_1.default.Fragment, null,
27
- react_1.default.createElement(SxpPageRender_1.default, 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 })),
27
+ react_1.default.createElement(SxpPageRender_1.default, 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 })),
28
28
  react_1.default.createElement(Popup_1.default, null)));
29
29
  } })));
30
30
  };
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.d.ts CHANGED
@@ -110,6 +110,7 @@ export interface ISxpPageRenderProps {
110
110
  hashTagStyle?: CSSProperties;
111
111
  licenseUrl?: string;
112
112
  hashTagRightMargin: number;
113
+ defaultData?: any;
113
114
  }
114
115
  declare const SxpPageRender: FC<ISxpPageRenderProps>;
115
116
  export default SxpPageRender;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -18,6 +18,7 @@ const WaterFall_1 = tslib_1.__importDefault(require("./WaterFall"));
18
18
  const Nudge_1 = tslib_1.__importDefault(require("./Nudge"));
19
19
  const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
20
20
  const hooks_1 = require("../../../core/hooks");
21
+ const sessionStore_1 = require("../../../core/utils/sessionStore");
21
22
  require("./index.less");
22
23
  const useEventReport_1 = require("../../../core/hooks/useEventReport");
23
24
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
@@ -28,7 +29,7 @@ const ConsentPopup_1 = tslib_1.__importDefault(require("./ConsentPopup"));
28
29
  const MultiPosts_1 = tslib_1.__importDefault(require("../../../materials/sxp/MultiPosts"));
29
30
  const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
30
31
  const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
31
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
32
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
32
33
  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;
33
34
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
34
35
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -58,12 +59,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
58
59
  }
59
60
  }, [data === null || data === void 0 ? void 0 : data.length]);
60
61
  const handleH5EnterLink = (0, react_1.useCallback)(() => {
62
+ var _a, _b, _c;
63
+ 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;
64
+ if (!((_c = defaultGlobalConfig === null || defaultGlobalConfig === void 0 ? void 0 : defaultGlobalConfig.session) === null || _c === void 0 ? void 0 : _c.enable)) {
65
+ (0, sessionStore_1.refreshFeSessionId)();
66
+ }
61
67
  h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
62
68
  if (data.length > 0) {
63
69
  const now = new Date();
64
70
  viewTime.current = now;
65
71
  }
66
- }, [data.length, h5EnterLink]);
72
+ }, [data.length, h5EnterLink, defaultData]);
67
73
  (0, react_1.useEffect)(() => {
68
74
  var _a;
69
75
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -84,50 +90,56 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
84
90
  if (index !== -1)
85
91
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
86
92
  }, [data, ctaType, swiperRef]);
93
+ const handleSessionCompleted = (0, react_1.useCallback)((fk) => {
94
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
95
+ const item = data === null || data === void 0 ? void 0 : data[activeIndex];
96
+ let fromKName = '';
97
+ 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))) {
98
+ fromKName = 'pdpPage';
99
+ }
100
+ 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') {
101
+ fromKName = 'formPage';
102
+ }
103
+ else if (isFromHashtag) {
104
+ fromKName = 'hashTagPage';
105
+ }
106
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
107
+ fromKName = 'videoPage';
108
+ }
109
+ 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)) {
110
+ fromKName = 'imagePage';
111
+ }
112
+ else if (item === null || item === void 0 ? void 0 : item.product) {
113
+ fromKName = 'productPage';
114
+ }
115
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
116
+ eventInfo: {
117
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
118
+ eventSubject: 'sessionCompleted',
119
+ eventDescription: 'Session completed',
120
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
121
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
122
+ position: activeIndex + '',
123
+ fromKName: fk ? fk : fromKName,
124
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
125
+ 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 : '',
126
+ 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 : ''
127
+ }
128
+ });
129
+ }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
87
130
  (0, react_1.useEffect)(() => {
88
131
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
89
132
  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
133
  const repCond = !openHashtag && !isShowConsent;
92
134
  if (document.visibilityState === 'hidden') {
93
135
  if (repCond) {
94
136
  event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
95
137
  handleReportProductView(item);
96
138
  }
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
139
  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
- });
140
+ const isExpire = refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(true, handleSessionCompleted);
141
+ if (!isExpire)
142
+ handleSessionCompleted();
131
143
  }
132
144
  }
133
145
  else if (document.visibilityState === 'visible') {
@@ -159,8 +171,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
159
171
  openHashtag,
160
172
  isShowConsent,
161
173
  selectTag,
162
- channel
174
+ channel,
175
+ handleSessionCompleted,
176
+ refreshFeSession
163
177
  ]);
178
+ const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
179
+ refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
180
+ }, 1000), [handleSessionCompleted, refreshFeSession]);
181
+ (0, react_1.useEffect)(() => {
182
+ const events = ['touchstart', 'touchcancel'];
183
+ events.forEach((event) => {
184
+ window.addEventListener(event, handleSessionExpire);
185
+ });
186
+ return () => {
187
+ events.forEach((event) => {
188
+ window.removeEventListener(event, handleSessionExpire);
189
+ });
190
+ };
191
+ }, [handleSessionExpire]);
164
192
  const tagHeight = (0, react_1.useMemo)(() => {
165
193
  let h = 0;
166
194
  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 {