pb-sxp-ui 1.7.3 → 1.7.4

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 +48 -42
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +48 -42
  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 +48 -42
  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/PictureGroup/index.d.ts +2 -2
  14. package/es/core/components/SxpPageRender/PictureGroup/index.js +5 -5
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +7 -8
  16. package/es/core/components/SxpPageRender/index.js +25 -19
  17. package/es/core/context/SxpDataSourceProvider.js +9 -6
  18. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -2
  19. package/lib/core/components/SxpPageRender/PictureGroup/index.js +5 -5
  20. package/lib/core/components/SxpPageRender/VideoWidget/index.js +7 -8
  21. package/lib/core/components/SxpPageRender/index.js +25 -19
  22. package/lib/core/context/SxpDataSourceProvider.js +9 -6
  23. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -7,11 +7,11 @@ interface IPictureGroupProps {
7
7
  height: number;
8
8
  rec: RecItemType;
9
9
  index: number;
10
- onReportViewImageEnd: (rec: RecItemType) => void;
10
+ onViewImageEndEvent: (rec: RecItemType) => void;
11
11
  onViewImageStartEvent: (index: number, imgInfo?: {
12
12
  contentSize: string;
13
13
  loadTime: string;
14
- }) => void;
14
+ }, enableCapi?: boolean) => void;
15
15
  imgUrlsPostConfig?: postConfigType;
16
16
  }
17
17
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -7,7 +7,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import { css } from '@emotion/css';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
9
  import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
10
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
10
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
11
11
  var _a, _b;
12
12
  const ref = useRef();
13
13
  const { isActive } = useSwiperSlide();
@@ -19,16 +19,16 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
19
19
  if (isLoad && isActive) {
20
20
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
21
21
  if (openHashtag) {
22
- onReportViewImageEnd(rec);
22
+ onViewImageEndEvent(rec);
23
23
  }
24
24
  else {
25
- onViewImageStartEvent(index, imgInfo);
25
+ onViewImageStartEvent(index, imgInfo, true);
26
26
  }
27
27
  }
28
28
  else {
29
29
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
30
30
  }
31
- }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
31
+ }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
32
32
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
33
33
  if (!isLoad) {
34
34
  const contentSize = yield getResFileSizeFromSrc(e.src);
@@ -41,7 +41,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
41
41
  }), [isLoad]);
42
42
  useEffect(() => {
43
43
  const onShow = () => onViewImageStartEvent(index, imgInfo);
44
- const onHide = () => onReportViewImageEnd(rec);
44
+ const onHide = () => onViewImageEndEvent(rec);
45
45
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
46
46
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
47
47
  return () => {
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -247,7 +247,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
247
247
  };
248
248
  }, [isActive]);
249
249
  useEffect(() => {
250
- var _a, _b, _c, _d;
250
+ var _a, _b, _c, _d, _e, _f;
251
251
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
252
252
  return;
253
253
  if (isActive) {
@@ -255,10 +255,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
255
255
  eventName: 'ViewContent',
256
256
  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
257
257
  });
258
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
258
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
259
+ eventName: 'PageView',
260
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
261
+ });
262
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
259
263
  }
260
264
  else {
261
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
265
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
262
266
  }
263
267
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
264
268
  useEffect(() => {
@@ -277,12 +281,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
277
281
  if (!isActive)
278
282
  return;
279
283
  const onShow = () => {
280
- var _a, _b;
281
284
  handleClickVideo('start')();
282
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
283
- eventName: 'ViewContent',
284
- 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
285
- });
286
285
  };
287
286
  const onHide = handleClickVideo('pause');
288
287
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -213,7 +213,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
213
213
  return (React.createElement(VideoWidget, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
214
214
  }
215
215
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
216
- return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
216
+ return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
217
217
  }
218
218
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
219
219
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -287,7 +287,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
287
287
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
288
288
  return;
289
289
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
290
- if (waterFallData && top < 40) {
290
+ if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
291
291
  top += 40;
292
292
  }
293
293
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -299,7 +299,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
299
299
  }
300
300
  return null;
301
301
  }, [globalConfig, waterFallData]);
302
- const handleReportViewImageEnd = (item) => {
302
+ const handleViewImageStartEnd = (item) => {
303
303
  var _a, _b, _c, _d, _e, _f;
304
304
  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)) {
305
305
  const endTime = Date.now();
@@ -382,7 +382,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
382
382
  position: ((_k = swiper.previousIndex) !== null && _k !== void 0 ? _k : 0) + ''
383
383
  }
384
384
  });
385
- handleReportViewImageEnd(item);
385
+ handleViewImageStartEnd(item);
386
386
  handleSlideSkip(item, swiper.previousIndex);
387
387
  }
388
388
  else {
@@ -398,7 +398,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
398
398
  position: ((_s = swiper.previousIndex) !== null && _s !== void 0 ? _s : 0) + ''
399
399
  }
400
400
  });
401
- handleReportViewImageEnd(item);
401
+ handleViewImageStartEnd(item);
402
402
  }
403
403
  handleReportProductView(item);
404
404
  viewTime.current = new Date();
@@ -418,7 +418,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
418
418
  viewTime.current = new Date();
419
419
  }
420
420
  }, [openHashtag, data, activeIndex]);
421
- const handleViewImageStartEvent = (activeIndex, imgInfo) => {
421
+ const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
422
422
  var _a, _b, _c, _d, _e, _f, _g, _h;
423
423
  const item = data[activeIndex];
424
424
  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)) {
@@ -439,29 +439,35 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
439
439
  loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
440
440
  }
441
441
  });
442
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
443
- eventName: 'ViewContent',
444
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
445
- });
446
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
447
- eventName: 'PageView',
448
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
449
- });
442
+ if (enableCapi) {
443
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
444
+ eventName: 'ViewContent',
445
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
446
+ });
447
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
448
+ eventName: 'PageView',
449
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
450
+ });
451
+ }
450
452
  }
451
453
  };
452
454
  const renderToggleButton = useCallback((visible) => {
453
455
  var _a, _b, _c, _d, _e, _f;
454
456
  if (!visible)
455
457
  return;
458
+ let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
459
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
460
+ top += 40;
461
+ }
456
462
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
457
463
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
458
- visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
464
+ visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
459
465
  zIndex: 999,
460
466
  transform: 'translate3d(0px,0px,0px)',
461
- [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
462
- [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
467
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
468
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
463
469
  }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })));
464
- }, [globalConfig, visList, activeIndex, isMuted]);
470
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
465
471
  const renderView = useMemo(() => {
466
472
  if (loading) {
467
473
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -494,7 +500,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
494
500
  renderToggleButton
495
501
  ]);
496
502
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
497
- waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
503
+ waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
498
504
  const isEq = isEqual(rtcList, cacheRtcList);
499
505
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
500
506
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -190,17 +190,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
190
190
  });
191
191
  }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
192
192
  const bffFbReport = useCallback(({ eventName, product }) => {
193
- var _a, _b, _c, _d;
194
- if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
193
+ var _a, _b, _c, _d, _e;
194
+ if (!enableReportEvent ||
195
+ !enabledMetaConversionApi ||
196
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
197
+ !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
195
198
  return;
196
199
  }
197
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
200
+ let jsonParams = JSON.parse(JSON.stringify((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]));
198
201
  const urlParams = new URLSearchParams(window.location.search);
199
202
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
200
203
  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,
204
+ event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
202
205
  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 : '',
206
+ client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
204
207
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
205
208
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
206
209
  time: new Date().getTime()
@@ -225,7 +228,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
225
228
  matches.forEach((match) => {
226
229
  const prop = match.substring(2, match.length - 2);
227
230
  try {
228
- const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
231
+ let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
229
232
  if (replaceValue) {
230
233
  obj[key] = replaceValue;
231
234
  }
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -7,11 +7,11 @@ interface IPictureGroupProps {
7
7
  height: number;
8
8
  rec: RecItemType;
9
9
  index: number;
10
- onReportViewImageEnd: (rec: RecItemType) => void;
10
+ onViewImageEndEvent: (rec: RecItemType) => void;
11
11
  onViewImageStartEvent: (index: number, imgInfo?: {
12
12
  contentSize: string;
13
13
  loadTime: string;
14
- }) => void;
14
+ }, enableCapi?: boolean) => void;
15
15
  imgUrlsPostConfig?: postConfigType;
16
16
  }
17
17
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -9,7 +9,7 @@ const hooks_1 = require("../../../../core/hooks");
9
9
  const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
13
13
  var _a, _b;
14
14
  const ref = (0, react_1.useRef)();
15
15
  const { isActive } = (0, react_2.useSwiperSlide)();
@@ -21,16 +21,16 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
21
21
  if (isLoad && isActive) {
22
22
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
23
23
  if (openHashtag) {
24
- onReportViewImageEnd(rec);
24
+ onViewImageEndEvent(rec);
25
25
  }
26
26
  else {
27
- onViewImageStartEvent(index, imgInfo);
27
+ onViewImageStartEvent(index, imgInfo, true);
28
28
  }
29
29
  }
30
30
  else {
31
31
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
32
32
  }
33
- }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
33
+ }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
34
34
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
35
35
  if (!isLoad) {
36
36
  const contentSize = yield (0, tool_1.getResFileSizeFromSrc)(e.src);
@@ -43,7 +43,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
43
43
  }), [isLoad]);
44
44
  (0, react_1.useEffect)(() => {
45
45
  const onShow = () => onViewImageStartEvent(index, imgInfo);
46
- const onHide = () => onReportViewImageEnd(rec);
46
+ const onHide = () => onViewImageEndEvent(rec);
47
47
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
48
48
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
49
49
  return () => {
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -249,7 +249,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
249
249
  };
250
250
  }, [isActive]);
251
251
  (0, react_1.useEffect)(() => {
252
- var _a, _b, _c, _d;
252
+ var _a, _b, _c, _d, _e, _f;
253
253
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
254
254
  return;
255
255
  if (isActive) {
@@ -257,10 +257,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
257
257
  eventName: 'ViewContent',
258
258
  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
259
259
  });
260
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
260
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
261
+ eventName: 'PageView',
262
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
263
+ });
264
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
261
265
  }
262
266
  else {
263
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
267
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
264
268
  }
265
269
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
266
270
  (0, react_1.useEffect)(() => {
@@ -279,12 +283,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
279
283
  if (!isActive)
280
284
  return;
281
285
  const onShow = () => {
282
- var _a, _b;
283
286
  handleClickVideo('start')();
284
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
285
- eventName: 'ViewContent',
286
- 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
287
- });
288
287
  };
289
288
  const onHide = handleClickVideo('pause');
290
289
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -216,7 +216,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
216
216
  return (react_1.default.createElement(VideoWidget_1.default, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
217
217
  }
218
218
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
219
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
219
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
220
220
  }
221
221
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
222
222
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -290,7 +290,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
290
290
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
291
291
  return;
292
292
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
293
- if (waterFallData && top < 40) {
293
+ if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
294
294
  top += 40;
295
295
  }
296
296
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -302,7 +302,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
302
302
  }
303
303
  return null;
304
304
  }, [globalConfig, waterFallData]);
305
- const handleReportViewImageEnd = (item) => {
305
+ const handleViewImageStartEnd = (item) => {
306
306
  var _a, _b, _c, _d, _e, _f;
307
307
  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)) {
308
308
  const endTime = Date.now();
@@ -385,7 +385,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
385
385
  position: ((_k = swiper.previousIndex) !== null && _k !== void 0 ? _k : 0) + ''
386
386
  }
387
387
  });
388
- handleReportViewImageEnd(item);
388
+ handleViewImageStartEnd(item);
389
389
  handleSlideSkip(item, swiper.previousIndex);
390
390
  }
391
391
  else {
@@ -401,7 +401,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
401
401
  position: ((_s = swiper.previousIndex) !== null && _s !== void 0 ? _s : 0) + ''
402
402
  }
403
403
  });
404
- handleReportViewImageEnd(item);
404
+ handleViewImageStartEnd(item);
405
405
  }
406
406
  handleReportProductView(item);
407
407
  viewTime.current = new Date();
@@ -421,7 +421,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
421
421
  viewTime.current = new Date();
422
422
  }
423
423
  }, [openHashtag, data, activeIndex]);
424
- const handleViewImageStartEvent = (activeIndex, imgInfo) => {
424
+ const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
425
425
  var _a, _b, _c, _d, _e, _f, _g, _h;
426
426
  const item = data[activeIndex];
427
427
  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)) {
@@ -442,29 +442,35 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
442
442
  loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
443
443
  }
444
444
  });
445
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
446
- eventName: 'ViewContent',
447
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
448
- });
449
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
450
- eventName: 'PageView',
451
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
452
- });
445
+ if (enableCapi) {
446
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
447
+ eventName: 'ViewContent',
448
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
449
+ });
450
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
451
+ eventName: 'PageView',
452
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
453
+ });
454
+ }
453
455
  }
454
456
  };
455
457
  const renderToggleButton = (0, react_1.useCallback)((visible) => {
456
458
  var _a, _b, _c, _d, _e, _f;
457
459
  if (!visible)
458
460
  return;
461
+ let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
462
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
463
+ top += 40;
464
+ }
459
465
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
460
466
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
461
- visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
467
+ visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
462
468
  zIndex: 999,
463
469
  transform: 'translate3d(0px,0px,0px)',
464
- [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
465
- [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
470
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
471
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
466
472
  }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })));
467
- }, [globalConfig, visList, activeIndex, isMuted]);
473
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
468
474
  const renderView = (0, react_1.useMemo)(() => {
469
475
  if (loading) {
470
476
  return (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -497,7 +503,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
497
503
  renderToggleButton
498
504
  ]);
499
505
  return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
500
- waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
506
+ waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
501
507
  const isEq = (0, lodash_1.isEqual)(rtcList, cacheRtcList);
502
508
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
503
509
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -193,17 +193,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
193
193
  });
194
194
  }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
195
195
  const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
196
- var _a, _b, _c, _d;
197
- if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
196
+ var _a, _b, _c, _d, _e;
197
+ if (!enableReportEvent ||
198
+ !enabledMetaConversionApi ||
199
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
200
+ !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
198
201
  return;
199
202
  }
200
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
203
+ let jsonParams = JSON.parse(JSON.stringify((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]));
201
204
  const urlParams = new URLSearchParams(window.location.search);
202
205
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
203
206
  const fix_par = {
204
- event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
207
+ event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
205
208
  external_id: (0, localStore_1.storeAndLoadFeUserId)(),
206
- 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 : '',
209
+ client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
207
210
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
208
211
  fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
209
212
  time: new Date().getTime()
@@ -228,7 +231,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
228
231
  matches.forEach((match) => {
229
232
  const prop = match.substring(2, match.length - 2);
230
233
  try {
231
- const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
234
+ let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
232
235
  if (replaceValue) {
233
236
  obj[key] = replaceValue;
234
237
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.7.3",
3
+ "version": "1.7.4",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",