pb-sxp-ui 1.10.3 → 1.10.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.
@@ -112,20 +112,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
112
112
  else if (item === null || item === void 0 ? void 0 : item.product) {
113
113
  fromKName = 'productPage';
114
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,
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
- });
115
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
116
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
117
+ eventInfo: {
118
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
119
+ eventSubject: 'sessionCompleted',
120
+ eventDescription: 'Session completed',
121
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
122
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
123
+ position: activeIndex + '',
124
+ fromKName,
125
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
126
+ 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 : '',
127
+ 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 : ''
128
+ }
129
+ });
130
+ }
129
131
  }
130
132
  else if (document.visibilityState === 'visible') {
131
133
  if (skipLinkRef.current === true) {
@@ -306,9 +308,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
306
308
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
307
309
  return;
308
310
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
309
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
311
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
310
312
  top += 40;
311
313
  }
314
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
315
+ top += minusHeight;
316
+ }
312
317
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
313
318
  return (React.createElement(LikeButton, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
314
319
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -476,6 +481,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
476
481
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
477
482
  top += 40;
478
483
  }
484
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
485
+ top += minusHeight;
486
+ }
479
487
  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: {
480
488
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
481
489
  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',
@@ -535,7 +543,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
535
543
  eventInfo: {
536
544
  eventSubject: 'backMultiPostClick',
537
545
  eventDescription: 'backMultiPostClick',
538
- traceinfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
546
+ traceInfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
539
547
  }
540
548
  });
541
549
  location === null || location === void 0 ? void 0 : location.reload();
@@ -40,11 +40,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
40
40
  const popupCurTimeRef = useRef(null);
41
41
  const [isNoMoreData, setIsNoMoreData] = useState(false);
42
42
  const [globalConfig, setGlobalConfig] = useState((_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);
43
- const [pageData, setPageData] = useState(data);
43
+ const [pageData, setPageData] = useState();
44
44
  const [showConsent, setShowConsent] = useState(false);
45
45
  const [layoutVariantId, setLayoutVariantId] = useState();
46
46
  const [channel, setChannel] = useState();
47
47
  const [eventTimeList, setEventTimeList] = useState([]);
48
+ const [playbookType, setPlaybookType] = useState();
49
+ const finalPageData = useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
48
50
  const isShowConsent = useMemo(() => {
49
51
  var _a, _b, _c, _d;
50
52
  return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === 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.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
@@ -217,7 +219,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
217
219
  userInfo = {};
218
220
  }
219
221
  const sessionID = storeAndLoadFeSessionId();
220
- const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
222
+ const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), (layoutVariantId && reportLayId && { layoutVariantId })), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' }));
221
223
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
222
224
  const realEventInfo = Object.entries(ef)
223
225
  .map(([k, v]) => v && { name: k, value: v })
@@ -231,7 +233,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
231
233
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
232
234
  type: 'beacon'
233
235
  });
234
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
236
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
235
237
  const bffFbReport = useCallback(({ eventName, product }) => {
236
238
  var _a, _b, _c, _d, _e;
237
239
  if (!enableReportEvent ||
@@ -391,17 +393,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
391
393
  return;
392
394
  setLoading(true);
393
395
  let layId;
396
+ let pbType;
394
397
  getRecommendVideos()
395
398
  .then((data) => {
396
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
399
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
397
400
  if (data) {
398
401
  const list = getFilterRecList(data);
399
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
400
- list.unshift('organic menu');
401
- }
402
- setRtcList(list);
403
- setCacheRtcList(list);
404
402
  let curData;
403
+ let gldata;
405
404
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
406
405
  const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
407
406
  if (id) {
@@ -411,19 +410,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
411
410
  if (curData) {
412
411
  setPageData(curData);
413
412
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
414
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
413
+ gldata = (_e = (_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.sxpPageConf) === null || _e === void 0 ? void 0 : _e.globalConfig;
414
+ setGlobalConfig(gldata);
415
415
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
416
- if ((_k = (_j = (_h = (_g = (_f = (_e = curData === null || curData === void 0 ? void 0 : curData.data) === null || _e === void 0 ? void 0 : _e.globalConfig) === null || _f === void 0 ? void 0 : _f.consent) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.privacy_necessity)
416
+ if ((_j = (_h = (_g = (_f = gldata === null || gldata === void 0 ? void 0 : gldata.consent) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.item) === null || _h === void 0 ? void 0 : _h.props) === null || _j === void 0 ? void 0 : _j.privacy_necessity)
417
417
  setShowConsent(true);
418
418
  }
419
+ else {
420
+ setShowConsent(true);
421
+ }
422
+ }
423
+ }
424
+ else {
425
+ setShowConsent(true);
426
+ }
427
+ if (!channel) {
428
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
429
+ setPlaybookType('organicMenu');
430
+ list.unshift('organic menu');
431
+ pbType = 'organicMenu';
419
432
  }
433
+ else {
434
+ setPlaybookType('paidMedia');
435
+ pbType = 'paidMedia';
436
+ }
437
+ }
438
+ setRtcList(list);
439
+ setCacheRtcList(list);
440
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
441
+ if (channel) {
442
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
443
+ eventInfo: {
444
+ eventSubject: 'multiPostClick',
445
+ eventDescription: 'multiPostClick',
446
+ traceInfo: (_m = (_l = (_k = list === null || list === void 0 ? void 0 : list[0]) === null || _k === void 0 ? void 0 : _k.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : '',
447
+ branchfeed: channel
448
+ }
449
+ });
420
450
  }
421
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
422
451
  }
423
452
  })
424
453
  .finally(() => {
425
454
  bffEventReport({
426
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
455
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
427
456
  });
428
457
  setLoading(false);
429
458
  });
@@ -432,7 +461,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
432
461
  if (!isPreview)
433
462
  return;
434
463
  setLoading(true);
435
- bffGetTagList(pageData);
464
+ bffGetTagList(data);
436
465
  getRecommendVideos()
437
466
  .then((data) => {
438
467
  if (data) {
@@ -507,7 +536,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
507
536
  mutateUnlike: bffMutateUnlike,
508
537
  submitForm: bffSubmitForm,
509
538
  tagList,
510
- pageData
539
+ pageData: finalPageData
511
540
  }))));
512
541
  };
513
542
  export default memo(SxpDataSourceProvider);
@@ -12,7 +12,7 @@ const MultiPosts = (_a) => {
12
12
  const { isActive } = useSwiperSlide() || {};
13
13
  const initRef = useRef(false);
14
14
  const viewTime = useRef();
15
- const traceinfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
15
+ const traceInfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
16
16
  const getPropsVal = useCallback((index, str) => {
17
17
  try {
18
18
  return new Function('props', 'str', `if (str) {
@@ -28,14 +28,6 @@ const MultiPosts = (_a) => {
28
28
  const value = v === null || v === void 0 ? void 0 : v.value;
29
29
  if (!value)
30
30
  return;
31
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
32
- eventInfo: {
33
- eventSubject: 'multiPostClick',
34
- eventDescription: 'multiPostClick',
35
- traceinfo,
36
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
37
- }
38
- });
39
31
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
40
32
  endMultiPost('multipostClick');
41
33
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -53,7 +45,7 @@ const MultiPosts = (_a) => {
53
45
  eventDescription: 'startMultiPost',
54
46
  contentFormat: 'IMAGE',
55
47
  position: '0',
56
- traceinfo
48
+ traceInfo
57
49
  }
58
50
  });
59
51
  }, []);
@@ -64,7 +56,7 @@ const MultiPosts = (_a) => {
64
56
  eventDescription: 'endMultiPost',
65
57
  contentFormat: 'IMAGE',
66
58
  position: '0',
67
- traceinfo,
59
+ traceInfo,
68
60
  nextStep: nextStep || 'others',
69
61
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
70
62
  }
@@ -80,6 +72,8 @@ const MultiPosts = (_a) => {
80
72
  }
81
73
  }, [isActive]);
82
74
  useEffect(() => {
75
+ if (!isActive)
76
+ return;
83
77
  const onShow = () => startMultiPost();
84
78
  const onHide = () => endMultiPost();
85
79
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -90,7 +84,7 @@ const MultiPosts = (_a) => {
90
84
  };
91
85
  }, [isActive]);
92
86
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
93
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
87
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
94
88
  React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
95
89
  })));
96
90
  };
@@ -115,20 +115,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
115
115
  else if (item === null || item === void 0 ? void 0 : item.product) {
116
116
  fromKName = 'productPage';
117
117
  }
118
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
119
- eventInfo: {
120
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
121
- eventSubject: 'sessionCompleted',
122
- eventDescription: 'Session completed',
123
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
124
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
125
- position: activeIndex + '',
126
- fromKName,
127
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- 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 : '',
129
- 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 : ''
130
- }
131
- });
118
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
119
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
120
+ eventInfo: {
121
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
122
+ eventSubject: 'sessionCompleted',
123
+ eventDescription: 'Session completed',
124
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
125
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
126
+ position: activeIndex + '',
127
+ fromKName,
128
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
129
+ 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 : '',
130
+ 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 : ''
131
+ }
132
+ });
133
+ }
132
134
  }
133
135
  else if (document.visibilityState === 'visible') {
134
136
  if (skipLinkRef.current === true) {
@@ -309,9 +311,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
309
311
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
310
312
  return;
311
313
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
312
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
314
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
313
315
  top += 40;
314
316
  }
317
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
318
+ top += minusHeight;
319
+ }
315
320
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
316
321
  return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
317
322
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -479,6 +484,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
479
484
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
480
485
  top += 40;
481
486
  }
487
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
488
+ top += minusHeight;
489
+ }
482
490
  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: {
483
491
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
484
492
  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',
@@ -538,7 +546,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
538
546
  eventInfo: {
539
547
  eventSubject: 'backMultiPostClick',
540
548
  eventDescription: 'backMultiPostClick',
541
- traceinfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
549
+ traceInfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
542
550
  }
543
551
  });
544
552
  location === null || location === void 0 ? void 0 : location.reload();
@@ -43,11 +43,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
43
43
  const popupCurTimeRef = (0, react_1.useRef)(null);
44
44
  const [isNoMoreData, setIsNoMoreData] = (0, react_1.useState)(false);
45
45
  const [globalConfig, setGlobalConfig] = (0, react_1.useState)((_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);
46
- const [pageData, setPageData] = (0, react_1.useState)(data);
46
+ const [pageData, setPageData] = (0, react_1.useState)();
47
47
  const [showConsent, setShowConsent] = (0, react_1.useState)(false);
48
48
  const [layoutVariantId, setLayoutVariantId] = (0, react_1.useState)();
49
49
  const [channel, setChannel] = (0, react_1.useState)();
50
50
  const [eventTimeList, setEventTimeList] = (0, react_1.useState)([]);
51
+ const [playbookType, setPlaybookType] = (0, react_1.useState)();
52
+ const finalPageData = (0, react_1.useMemo)(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
51
53
  const isShowConsent = (0, react_1.useMemo)(() => {
52
54
  var _a, _b, _c, _d;
53
55
  return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === 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.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
@@ -220,7 +222,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
220
222
  userInfo = {};
221
223
  }
222
224
  const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
223
- const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
225
+ const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), eventInfo), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() })), (layoutVariantId && reportLayId && { layoutVariantId })), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' }));
224
226
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
225
227
  const realEventInfo = Object.entries(ef)
226
228
  .map(([k, v]) => v && { name: k, value: v })
@@ -234,7 +236,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
234
236
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
235
237
  type: 'beacon'
236
238
  });
237
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
239
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
238
240
  const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
239
241
  var _a, _b, _c, _d, _e;
240
242
  if (!enableReportEvent ||
@@ -394,17 +396,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
394
396
  return;
395
397
  setLoading(true);
396
398
  let layId;
399
+ let pbType;
397
400
  getRecommendVideos()
398
401
  .then((data) => {
399
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
402
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
400
403
  if (data) {
401
404
  const list = getFilterRecList(data);
402
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
403
- list.unshift('organic menu');
404
- }
405
- setRtcList(list);
406
- setCacheRtcList(list);
407
405
  let curData;
406
+ let gldata;
408
407
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
409
408
  const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
410
409
  if (id) {
@@ -414,19 +413,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
414
413
  if (curData) {
415
414
  setPageData(curData);
416
415
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
417
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
416
+ gldata = (_e = (_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.sxpPageConf) === null || _e === void 0 ? void 0 : _e.globalConfig;
417
+ setGlobalConfig(gldata);
418
418
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
419
- if ((_k = (_j = (_h = (_g = (_f = (_e = curData === null || curData === void 0 ? void 0 : curData.data) === null || _e === void 0 ? void 0 : _e.globalConfig) === null || _f === void 0 ? void 0 : _f.consent) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.privacy_necessity)
419
+ if ((_j = (_h = (_g = (_f = gldata === null || gldata === void 0 ? void 0 : gldata.consent) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.item) === null || _h === void 0 ? void 0 : _h.props) === null || _j === void 0 ? void 0 : _j.privacy_necessity)
420
420
  setShowConsent(true);
421
421
  }
422
+ else {
423
+ setShowConsent(true);
424
+ }
425
+ }
426
+ }
427
+ else {
428
+ setShowConsent(true);
429
+ }
430
+ if (!channel) {
431
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
432
+ setPlaybookType('organicMenu');
433
+ list.unshift('organic menu');
434
+ pbType = 'organicMenu';
422
435
  }
436
+ else {
437
+ setPlaybookType('paidMedia');
438
+ pbType = 'paidMedia';
439
+ }
440
+ }
441
+ setRtcList(list);
442
+ setCacheRtcList(list);
443
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
444
+ if (channel) {
445
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
446
+ eventInfo: {
447
+ eventSubject: 'multiPostClick',
448
+ eventDescription: 'multiPostClick',
449
+ traceInfo: (_m = (_l = (_k = list === null || list === void 0 ? void 0 : list[0]) === null || _k === void 0 ? void 0 : _k.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : '',
450
+ branchfeed: channel
451
+ }
452
+ });
423
453
  }
424
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
425
454
  }
426
455
  })
427
456
  .finally(() => {
428
457
  bffEventReport({
429
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
458
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
430
459
  });
431
460
  setLoading(false);
432
461
  });
@@ -435,7 +464,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
435
464
  if (!isPreview)
436
465
  return;
437
466
  setLoading(true);
438
- bffGetTagList(pageData);
467
+ bffGetTagList(data);
439
468
  getRecommendVideos()
440
469
  .then((data) => {
441
470
  if (data) {
@@ -510,7 +539,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
510
539
  mutateUnlike: bffMutateUnlike,
511
540
  submitForm: bffSubmitForm,
512
541
  tagList,
513
- pageData
542
+ pageData: finalPageData
514
543
  }))));
515
544
  };
516
545
  exports.default = (0, react_1.memo)(SxpDataSourceProvider);
@@ -14,7 +14,7 @@ const MultiPosts = (_a) => {
14
14
  const { isActive } = (0, react_2.useSwiperSlide)() || {};
15
15
  const initRef = (0, react_1.useRef)(false);
16
16
  const viewTime = (0, react_1.useRef)();
17
- const traceinfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
17
+ const traceInfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
18
18
  const getPropsVal = (0, react_1.useCallback)((index, str) => {
19
19
  try {
20
20
  return new Function('props', 'str', `if (str) {
@@ -30,14 +30,6 @@ const MultiPosts = (_a) => {
30
30
  const value = v === null || v === void 0 ? void 0 : v.value;
31
31
  if (!value)
32
32
  return;
33
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
34
- eventInfo: {
35
- eventSubject: 'multiPostClick',
36
- eventDescription: 'multiPostClick',
37
- traceinfo,
38
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
39
- }
40
- });
41
33
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
42
34
  endMultiPost('multipostClick');
43
35
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -55,7 +47,7 @@ const MultiPosts = (_a) => {
55
47
  eventDescription: 'startMultiPost',
56
48
  contentFormat: 'IMAGE',
57
49
  position: '0',
58
- traceinfo
50
+ traceInfo
59
51
  }
60
52
  });
61
53
  }, []);
@@ -66,7 +58,7 @@ const MultiPosts = (_a) => {
66
58
  eventDescription: 'endMultiPost',
67
59
  contentFormat: 'IMAGE',
68
60
  position: '0',
69
- traceinfo,
61
+ traceInfo,
70
62
  nextStep: nextStep || 'others',
71
63
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
72
64
  }
@@ -82,6 +74,8 @@ const MultiPosts = (_a) => {
82
74
  }
83
75
  }, [isActive]);
84
76
  (0, react_1.useEffect)(() => {
77
+ if (!isActive)
78
+ return;
85
79
  const onShow = () => startMultiPost();
86
80
  const onHide = () => endMultiPost();
87
81
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -92,7 +86,7 @@ const MultiPosts = (_a) => {
92
86
  };
93
87
  }, [isActive]);
94
88
  return (react_1.default.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), (0, materials_1.getBgStyle)(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
95
- return (react_1.default.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
89
+ return (react_1.default.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
96
90
  react_1.default.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
97
91
  })));
98
92
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.10.3",
3
+ "version": "1.10.4",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",