pb-sxp-ui 1.6.5 → 1.7.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 (35) hide show
  1. package/dist/index.cjs +114 -51
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +114 -51
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +114 -51
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +3 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +25 -21
  15. package/es/core/components/SxpPageRender/WaterFall/index.js +6 -1
  16. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/index.js +7 -11
  18. package/es/core/context/SxpDataSourceProvider.d.ts +2 -4
  19. package/es/core/context/SxpDataSourceProvider.js +52 -11
  20. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -1
  21. package/es/materials/sxp/popup/CommodityDetailDiro/index.js +6 -1
  22. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -1
  23. package/es/materials/sxp/popup/CommodityList/index.js +7 -2
  24. package/lib/core/components/SxpPageRender/ExpandableText.js +3 -1
  25. package/lib/core/components/SxpPageRender/VideoWidget/index.js +25 -21
  26. package/lib/core/components/SxpPageRender/WaterFall/index.js +6 -1
  27. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  28. package/lib/core/components/SxpPageRender/index.js +7 -11
  29. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -4
  30. package/lib/core/context/SxpDataSourceProvider.js +52 -11
  31. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -1
  32. package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +6 -1
  33. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -1
  34. package/lib/materials/sxp/popup/CommodityList/index.js +6 -1
  35. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -30,6 +30,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
30
30
  }, [text, maxStr, isShowMore]);
31
31
  useEffect(() => {
32
32
  var _a, _b;
33
+ if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
34
+ multiRowCopy.current.style.display = 'block';
33
35
  if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
34
36
  setIsShow(true);
35
37
  }
@@ -37,7 +39,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
37
39
  setIsShow(false);
38
40
  }
39
41
  multiRowCopy.current.style.display = 'none';
40
- }, [isPost]);
42
+ }, [isPost, text]);
41
43
  return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
42
44
  React.createElement("div", { ref: multiRow, style: {
43
45
  overflow: 'hidden',
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -19,6 +19,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
19
19
  const videoRef = useRef();
20
20
  const videoId = `pb-cache-video-${index}`;
21
21
  const videoEleRef = useRef(null);
22
+ const hlsRef = useRef(null);
22
23
  const blur = useMemo(() => {
23
24
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
24
25
  }, [videoPostConfig]);
@@ -197,12 +198,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
197
198
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
198
199
  return;
199
200
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
200
- let hls = null;
201
+ let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
201
202
  if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
202
203
  hls = new Hls();
203
- hls.loadSource(videoSrc);
204
- hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
205
- hls.on(Hls.Events.MANIFEST_PARSED, function () {
204
+ hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
205
+ hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
206
+ hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
206
207
  var _a;
207
208
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
208
209
  });
@@ -221,35 +222,36 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
221
222
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
222
223
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
223
224
  return () => {
224
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
225
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
225
226
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
226
227
  if (!isPause)
227
228
  handlePause();
228
- if (hls)
229
- hls === null || hls === void 0 ? void 0 : hls.destroy();
229
+ if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
230
+ (_b = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _b === void 0 ? void 0 : _b.destroy();
230
231
  setIsLoadFinish(false);
231
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
232
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
233
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
234
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
235
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
236
- (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
237
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
238
- (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
232
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadedmetadata', handleLoadedmetadata);
233
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
234
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
235
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
236
+ (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
237
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
238
+ (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
239
+ (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
239
240
  };
240
- }, [isActive, videoId, rec, handlePause]);
241
+ }, [isActive]);
241
242
  useEffect(() => {
242
- var _a, _b;
243
+ var _a, _b, _c, _d;
243
244
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
244
245
  return;
245
246
  if (isActive) {
246
247
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
247
- eventName: 'ViewContent'
248
+ eventName: 'ViewContent',
249
+ product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
248
250
  });
249
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
251
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
250
252
  }
251
253
  else {
252
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
254
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
253
255
  }
254
256
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
255
257
  useEffect(() => {
@@ -268,9 +270,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
268
270
  if (!isActive)
269
271
  return;
270
272
  const onShow = () => {
273
+ var _a, _b;
271
274
  handleClickVideo('start')();
272
275
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
273
- eventName: 'ViewContent'
276
+ eventName: 'ViewContent',
277
+ product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
274
278
  });
275
279
  };
276
280
  const onHide = handleClickVideo('pause');
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -9,11 +9,16 @@ import { useSxpDataSource } from '../../../../core/hooks';
9
9
  import { useEventReport } from '../../../../core/hooks/useEventReport';
10
10
  const WaterFall = (props) => {
11
11
  var _a;
12
- const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
12
+ const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag, bffFbReport } = useSxpDataSource();
13
13
  const { backMainFeed } = useEventReport();
14
14
  const ref = useRef(null);
15
15
  const modalEleRef = useRef(null);
16
16
  const [viewTime, setViewTime] = useState();
17
+ useEffect(() => {
18
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
19
+ eventName: 'PageView'
20
+ });
21
+ }, []);
17
22
  useEffect(() => {
18
23
  const parentNode = document.getElementById('sxp-render');
19
24
  const node = document.getElementById('water-fall');
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
+ converApi?: any;
68
69
  };
69
70
  descStyle?: CSSProperties;
70
71
  tipText?: {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -48,9 +48,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
48
48
  if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
49
49
  const now = new Date();
50
50
  viewTime.current = now;
51
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
52
- eventName: 'PageView'
53
- });
54
51
  }
55
52
  }, [data === null || data === void 0 ? void 0 : data.length]);
56
53
  const handleH5EnterLink = useCallback(() => {
@@ -59,11 +56,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
59
56
  if (data.length > 0) {
60
57
  const now = new Date();
61
58
  viewTime.current = now;
62
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
63
- eventName: 'PageView'
64
- });
65
59
  }
66
- }, [data.length, bffFbReport, h5EnterLink]);
60
+ }, [data.length, h5EnterLink]);
67
61
  useEffect(() => {
68
62
  var _a;
69
63
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -365,7 +359,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
365
359
  }
366
360
  };
367
361
  const handleScrollEvent = (swiper) => {
368
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
362
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
369
363
  const item = data[swiper.previousIndex];
370
364
  if (!item)
371
365
  return;
@@ -410,7 +404,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
410
404
  const curItem = data[swiper.activeIndex];
411
405
  if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
412
406
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
413
- eventName: 'ProductView'
407
+ eventName: 'ProductView',
408
+ product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
414
409
  });
415
410
  }
416
411
  viewTime.current = new Date();
@@ -431,7 +426,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
431
426
  }
432
427
  }, [openHashtag, data, activeIndex]);
433
428
  const handleViewImageStartEvent = (activeIndex) => {
434
- var _a, _b, _c, _d, _e, _f;
429
+ var _a, _b, _c, _d, _e, _f, _g;
435
430
  const item = data[activeIndex];
436
431
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
437
432
  const startTime = Date.now();
@@ -450,7 +445,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
450
445
  }
451
446
  });
452
447
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
453
- eventName: 'ViewContent'
448
+ eventName: 'ViewContent',
449
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
454
450
  });
455
451
  }
456
452
  };
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -67,10 +67,8 @@ export interface ISxpDataSourceContext {
67
67
  videoRef?: any;
68
68
  setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
69
69
  bffFbReport?: (body: {
70
- eventName: string;
71
- actionSource?: string;
72
- eventSourceUrl?: string;
73
- externalId?: string;
70
+ eventName: 'PageView' | 'ProductView' | 'ViewContent';
71
+ product?: any;
74
72
  }) => Promise<any> | undefined | boolean;
75
73
  curTime?: any;
76
74
  h5EnterLink?: () => void;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -189,23 +189,64 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
189
189
  type: 'beacon'
190
190
  });
191
191
  }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
192
- const bffFbReport = useCallback((_a) => {
193
- var _b, _c, _d;
194
- var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
192
+ const bffFbReport = useCallback(({ eventName, product }) => {
193
+ var _a, _b, _c, _d;
195
194
  if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
196
195
  return;
197
196
  }
198
- const fakeUserId = storeAndLoadFeUserId();
197
+ let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
199
198
  const urlParams = new URLSearchParams(window.location.search);
200
- const fbclid = urlParams.get('fbclid');
199
+ const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
200
+ const fix_par = {
201
+ event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
202
+ external_id: storeAndLoadFeUserId(),
203
+ client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
204
+ fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
205
+ fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
206
+ time: new Date().getTime()
207
+ };
208
+ const regex = /\{\{(.*?)\}\}/g;
209
+ const getEventParams = (obj) => {
210
+ if (!obj)
211
+ return;
212
+ if (obj instanceof Array) {
213
+ obj === null || obj === void 0 ? void 0 : obj.map((item) => getEventParams(item));
214
+ }
215
+ else {
216
+ for (const key in obj) {
217
+ if (obj.hasOwnProperty(key)) {
218
+ const value = obj === null || obj === void 0 ? void 0 : obj[key];
219
+ if (typeof value === 'object') {
220
+ getEventParams(value);
221
+ }
222
+ else if (typeof value === 'string') {
223
+ const matches = value === null || value === void 0 ? void 0 : value.match(regex);
224
+ if (matches) {
225
+ matches.forEach((match) => {
226
+ const prop = match.substring(2, match.length - 2);
227
+ try {
228
+ const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
229
+ if (replaceValue) {
230
+ obj[key] = replaceValue;
231
+ }
232
+ else {
233
+ delete obj[key];
234
+ }
235
+ }
236
+ catch (error) {
237
+ console.error('An error occurred:', error === null || error === void 0 ? void 0 : error.message);
238
+ }
239
+ });
240
+ }
241
+ }
242
+ }
243
+ }
244
+ }
245
+ };
246
+ getEventParams(jsonParams);
201
247
  return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
202
248
  method: 'POST',
203
- body: {
204
- eventName,
205
- actionSource,
206
- eventSourceUrl,
207
- userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
208
- },
249
+ body: jsonParams,
209
250
  type: 'beacon'
210
251
  });
211
252
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -46,9 +46,14 @@ const CommodityDetail = (_a) => {
46
46
  useEffect(() => {
47
47
  if (!isPost) {
48
48
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
49
- eventName: 'ProductView'
49
+ eventName: 'ProductView',
50
+ product
50
51
  });
51
52
  }
53
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
54
+ eventName: 'PageView',
55
+ product
56
+ });
52
57
  }, [isPost, bffFbReport]);
53
58
  useEffect(() => {
54
59
  const initTime = () => {
package/es/materials/sxp/popup/CommodityDetailDiro/index.js CHANGED
@@ -38,7 +38,12 @@ const CommodityDetailDiro = (_a) => {
38
38
  useEffect(() => {
39
39
  if (!isPost) {
40
40
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
41
- eventName: 'ProductView'
41
+ eventName: 'ProductView',
42
+ product
43
+ });
44
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
45
+ eventName: 'PageView',
46
+ product
42
47
  });
43
48
  }
44
49
  }, [isPost, bffFbReport]);
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -50,7 +50,12 @@ const CommodityDetailDiroNew = (_a) => {
50
50
  useEffect(() => {
51
51
  if (!isPost) {
52
52
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
53
- eventName: 'ProductView'
53
+ eventName: 'ProductView',
54
+ product
55
+ });
56
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
57
+ eventName: 'PageView',
58
+ product
54
59
  });
55
60
  }
56
61
  }, [isPost, bffFbReport]);
package/es/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
- import React, { memo, useCallback } from 'react';
3
+ import React, { memo, useCallback, useEffect } from 'react';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
5
  import './index.less';
6
6
  import { useEventReport } from '../../../../core/hooks/useEventReport';
@@ -11,7 +11,7 @@ import { getPriceText } from '../../../../core/utils/materials';
11
11
  const CommodityList = (_a) => {
12
12
  var _b, _c, _d;
13
13
  var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
14
- const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig } = useSxpDataSource();
14
+ const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig, bffFbReport } = useSxpDataSource();
15
15
  const { jumpToWeb } = useEventReport();
16
16
  const { popup } = useEditor();
17
17
  const recData = isPost ? rec : popupDetailData;
@@ -41,6 +41,11 @@ const CommodityList = (_a) => {
41
41
  onClick === null || onClick === void 0 ? void 0 : onClick();
42
42
  }
43
43
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
44
+ useEffect(() => {
45
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
46
+ eventName: 'PageView'
47
+ });
48
+ }, []);
44
49
  return (React.createElement("div", { className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
45
50
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
46
51
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", Object.assign({ key: index }, props, { className: css({
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -33,6 +33,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
33
33
  }, [text, maxStr, isShowMore]);
34
34
  (0, react_1.useEffect)(() => {
35
35
  var _a, _b;
36
+ if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
37
+ multiRowCopy.current.style.display = 'block';
36
38
  if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
37
39
  setIsShow(true);
38
40
  }
@@ -40,7 +42,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
40
42
  setIsShow(false);
41
43
  }
42
44
  multiRowCopy.current.style.display = 'none';
43
- }, [isPost]);
45
+ }, [isPost, text]);
44
46
  return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
45
47
  react_1.default.createElement("div", { ref: multiRow, style: {
46
48
  overflow: 'hidden',
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -22,6 +22,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
22
22
  const videoRef = (0, react_1.useRef)();
23
23
  const videoId = `pb-cache-video-${index}`;
24
24
  const videoEleRef = (0, react_1.useRef)(null);
25
+ const hlsRef = (0, react_1.useRef)(null);
25
26
  const blur = (0, react_1.useMemo)(() => {
26
27
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
27
28
  }, [videoPostConfig]);
@@ -200,12 +201,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
200
201
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
201
202
  return;
202
203
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
203
- let hls = null;
204
+ let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
204
205
  if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
205
206
  hls = new Hls();
206
- hls.loadSource(videoSrc);
207
- hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
208
- hls.on(Hls.Events.MANIFEST_PARSED, function () {
207
+ hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
208
+ hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
209
+ hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
209
210
  var _a;
210
211
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
211
212
  });
@@ -224,35 +225,36 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
224
225
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
225
226
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
226
227
  return () => {
227
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
228
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
228
229
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
229
230
  if (!isPause)
230
231
  handlePause();
231
- if (hls)
232
- hls === null || hls === void 0 ? void 0 : hls.destroy();
232
+ if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
233
+ (_b = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _b === void 0 ? void 0 : _b.destroy();
233
234
  setIsLoadFinish(false);
234
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
235
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
236
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
237
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
238
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
239
- (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
240
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
241
- (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
235
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadedmetadata', handleLoadedmetadata);
236
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
237
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
238
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
239
+ (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
240
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
241
+ (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
242
+ (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
242
243
  };
243
- }, [isActive, videoId, rec, handlePause]);
244
+ }, [isActive]);
244
245
  (0, react_1.useEffect)(() => {
245
- var _a, _b;
246
+ var _a, _b, _c, _d;
246
247
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
247
248
  return;
248
249
  if (isActive) {
249
250
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
250
- eventName: 'ViewContent'
251
+ eventName: 'ViewContent',
252
+ product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
251
253
  });
252
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
254
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
253
255
  }
254
256
  else {
255
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
257
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
256
258
  }
257
259
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
258
260
  (0, react_1.useEffect)(() => {
@@ -271,9 +273,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
271
273
  if (!isActive)
272
274
  return;
273
275
  const onShow = () => {
276
+ var _a, _b;
274
277
  handleClickVideo('start')();
275
278
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
276
- eventName: 'ViewContent'
279
+ eventName: 'ViewContent',
280
+ product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
277
281
  });
278
282
  };
279
283
  const onHide = handleClickVideo('pause');
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -12,11 +12,16 @@ const hooks_1 = require("../../../../core/hooks");
12
12
  const useEventReport_1 = require("../../../../core/hooks/useEventReport");
13
13
  const WaterFall = (props) => {
14
14
  var _a;
15
- const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = (0, hooks_1.useSxpDataSource)();
15
+ const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
16
16
  const { backMainFeed } = (0, useEventReport_1.useEventReport)();
17
17
  const ref = (0, react_1.useRef)(null);
18
18
  const modalEleRef = (0, react_1.useRef)(null);
19
19
  const [viewTime, setViewTime] = (0, react_1.useState)();
20
+ (0, react_1.useEffect)(() => {
21
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
22
+ eventName: 'PageView'
23
+ });
24
+ }, []);
20
25
  (0, react_1.useEffect)(() => {
21
26
  const parentNode = document.getElementById('sxp-render');
22
27
  const node = document.getElementById('water-fall');
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
+ converApi?: any;
68
69
  };
69
70
  descStyle?: CSSProperties;
70
71
  tipText?: {
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -51,9 +51,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
51
51
  if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
52
52
  const now = new Date();
53
53
  viewTime.current = now;
54
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
55
- eventName: 'PageView'
56
- });
57
54
  }
58
55
  }, [data === null || data === void 0 ? void 0 : data.length]);
59
56
  const handleH5EnterLink = (0, react_1.useCallback)(() => {
@@ -62,11 +59,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
62
59
  if (data.length > 0) {
63
60
  const now = new Date();
64
61
  viewTime.current = now;
65
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
66
- eventName: 'PageView'
67
- });
68
62
  }
69
- }, [data.length, bffFbReport, h5EnterLink]);
63
+ }, [data.length, h5EnterLink]);
70
64
  (0, react_1.useEffect)(() => {
71
65
  var _a;
72
66
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -368,7 +362,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
368
362
  }
369
363
  };
370
364
  const handleScrollEvent = (swiper) => {
371
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
365
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
372
366
  const item = data[swiper.previousIndex];
373
367
  if (!item)
374
368
  return;
@@ -413,7 +407,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
413
407
  const curItem = data[swiper.activeIndex];
414
408
  if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
415
409
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
416
- eventName: 'ProductView'
410
+ eventName: 'ProductView',
411
+ product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
417
412
  });
418
413
  }
419
414
  viewTime.current = new Date();
@@ -434,7 +429,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
434
429
  }
435
430
  }, [openHashtag, data, activeIndex]);
436
431
  const handleViewImageStartEvent = (activeIndex) => {
437
- var _a, _b, _c, _d, _e, _f;
432
+ var _a, _b, _c, _d, _e, _f, _g;
438
433
  const item = data[activeIndex];
439
434
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
440
435
  const startTime = Date.now();
@@ -453,7 +448,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
453
448
  }
454
449
  });
455
450
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
456
- eventName: 'ViewContent'
451
+ eventName: 'ViewContent',
452
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
457
453
  });
458
454
  }
459
455
  };
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -67,10 +67,8 @@ export interface ISxpDataSourceContext {
67
67
  videoRef?: any;
68
68
  setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
69
69
  bffFbReport?: (body: {
70
- eventName: string;
71
- actionSource?: string;
72
- eventSourceUrl?: string;
73
- externalId?: string;
70
+ eventName: 'PageView' | 'ProductView' | 'ViewContent';
71
+ product?: any;
74
72
  }) => Promise<any> | undefined | boolean;
75
73
  curTime?: any;
76
74
  h5EnterLink?: () => void;