pb-sxp-ui 1.10.3 → 1.10.5

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 (43) hide show
  1. package/dist/index.cjs +122 -67
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +122 -67
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +4 -4
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +4 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +122 -67
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +4 -4
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
  14. package/es/core/components/SxpPageRender/FormatImage.js +9 -7
  15. package/es/core/components/SxpPageRender/LikeButton/index.js +2 -1
  16. package/es/core/components/SxpPageRender/Modal/index.js +2 -1
  17. package/es/core/components/SxpPageRender/NavBack.js +2 -1
  18. package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
  19. package/es/core/components/SxpPageRender/ToggleButton/index.js +2 -1
  20. package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -1
  21. package/es/core/components/SxpPageRender/index.js +28 -19
  22. package/es/core/context/EditorDataProvider.d.ts +2 -3
  23. package/es/core/context/SxpDataSourceProvider.js +44 -15
  24. package/es/core/utils/tool.d.ts +2 -1
  25. package/es/core/utils/tool.js +14 -1
  26. package/es/materials/sxp/MultiPosts/index.js +9 -13
  27. package/es/materials/sxp/cta/AniLinkPopup/index.js +2 -2
  28. package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
  29. package/lib/core/components/SxpPageRender/FormatImage.js +9 -7
  30. package/lib/core/components/SxpPageRender/LikeButton/index.js +2 -1
  31. package/lib/core/components/SxpPageRender/Modal/index.js +2 -1
  32. package/lib/core/components/SxpPageRender/NavBack.js +2 -1
  33. package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
  34. package/lib/core/components/SxpPageRender/ToggleButton/index.js +2 -1
  35. package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -1
  36. package/lib/core/components/SxpPageRender/index.js +28 -19
  37. package/lib/core/context/EditorDataProvider.d.ts +2 -3
  38. package/lib/core/context/SxpDataSourceProvider.js +44 -15
  39. package/lib/core/utils/tool.d.ts +2 -1
  40. package/lib/core/utils/tool.js +15 -1
  41. package/lib/materials/sxp/MultiPosts/index.js +9 -13
  42. package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  43. package/package.json +1 -1
package/dist/pb-ui.js CHANGED
@@ -324,6 +324,19 @@
324
324
  /JAWS/i.test(userAgent) ||
325
325
  /ChromeVox/i.test(userAgent));
326
326
  }
327
+ const getSpliceQueryUrl = (url) => {
328
+ if (!url)
329
+ return '';
330
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('http')) === -1)
331
+ return url;
332
+ let query = 'x-im-piez=on';
333
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
334
+ return url + ('&' + query );
335
+ }
336
+ else {
337
+ return url + ('?' + query );
338
+ }
339
+ };
327
340
 
328
341
  function unzip(b64Data) {
329
342
  const strData = atob(b64Data);
@@ -670,11 +683,13 @@
670
683
  const popupCurTimeRef = React.useRef(null);
671
684
  const [isNoMoreData, setIsNoMoreData] = React.useState(false);
672
685
  const [globalConfig, setGlobalConfig] = React.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);
673
- const [pageData, setPageData] = React.useState(data);
686
+ const [pageData, setPageData] = React.useState();
674
687
  const [showConsent, setShowConsent] = React.useState(false);
675
688
  const [layoutVariantId, setLayoutVariantId] = React.useState();
676
689
  const [channel, setChannel] = React.useState();
677
690
  const [eventTimeList, setEventTimeList] = React.useState([]);
691
+ const [playbookType, setPlaybookType] = React.useState();
692
+ const finalPageData = React.useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
678
693
  const isShowConsent = React.useMemo(() => {
679
694
  var _a, _b, _c, _d;
680
695
  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) &&
@@ -861,7 +876,7 @@
861
876
  };
862
877
  }
863
878
  const sessionID = storeAndLoadFeSessionId();
864
- const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice$1() && { sxpDevice: getDevice$1() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
879
+ 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$1() && { sxpDevice: getDevice$1() })), (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 + '' }));
865
880
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
866
881
  const realEventInfo = Object.entries(ef)
867
882
  .map(([k, v]) => v && { name: k, value: v })
@@ -875,7 +890,7 @@
875
890
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
876
891
  type: 'beacon'
877
892
  });
878
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
893
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
879
894
  const bffFbReport = React.useCallback(({ eventName, product }) => {
880
895
  var _a, _b, _c, _d, _e;
881
896
  if (!enableReportEvent ||
@@ -1036,17 +1051,14 @@
1036
1051
  return;
1037
1052
  setLoading(true);
1038
1053
  let layId;
1054
+ let pbType;
1039
1055
  getRecommendVideos()
1040
1056
  .then((data) => {
1041
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1057
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
1042
1058
  if (data) {
1043
1059
  const list = getFilterRecList(data);
1044
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
1045
- list.unshift('organic menu');
1046
- }
1047
- setRtcList(list);
1048
- setCacheRtcList(list);
1049
1060
  let curData;
1061
+ let gldata;
1050
1062
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
1051
1063
  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];
1052
1064
  if (id) {
@@ -1056,19 +1068,49 @@
1056
1068
  if (curData) {
1057
1069
  setPageData(curData);
1058
1070
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
1059
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
1071
+ 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;
1072
+ setGlobalConfig(gldata);
1060
1073
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
1061
- 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)
1074
+ 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)
1062
1075
  setShowConsent(true);
1063
1076
  }
1077
+ else {
1078
+ setShowConsent(true);
1079
+ }
1064
1080
  }
1065
1081
  }
1066
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
1082
+ else {
1083
+ setShowConsent(true);
1084
+ }
1085
+ if (!channel) {
1086
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
1087
+ setPlaybookType('organicMenu');
1088
+ list.unshift('organic menu');
1089
+ pbType = 'organicMenu';
1090
+ }
1091
+ else {
1092
+ setPlaybookType('paidMedia');
1093
+ pbType = 'paidMedia';
1094
+ }
1095
+ }
1096
+ setRtcList(list);
1097
+ setCacheRtcList(list);
1098
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
1099
+ if (channel) {
1100
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1101
+ eventInfo: {
1102
+ eventSubject: 'multiPostClick',
1103
+ eventDescription: 'multiPostClick',
1104
+ 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 : '',
1105
+ branchfeed: channel
1106
+ }
1107
+ });
1108
+ }
1067
1109
  }
1068
1110
  })
1069
1111
  .finally(() => {
1070
1112
  bffEventReport({
1071
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
1113
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
1072
1114
  });
1073
1115
  setLoading(false);
1074
1116
  });
@@ -1078,7 +1120,7 @@
1078
1120
  if (!isPreview)
1079
1121
  return;
1080
1122
  setLoading(true);
1081
- bffGetTagList(pageData);
1123
+ bffGetTagList(data);
1082
1124
  getRecommendVideos()
1083
1125
  .then((data) => {
1084
1126
  if (data) {
@@ -1153,7 +1195,7 @@
1153
1195
  mutateUnlike: bffMutateUnlike,
1154
1196
  submitForm: bffSubmitForm,
1155
1197
  tagList,
1156
- pageData
1198
+ pageData: finalPageData
1157
1199
  }))));
1158
1200
  };
1159
1201
  var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -9751,7 +9793,7 @@
9751
9793
  * @Author: binruan@chatlabs.com
9752
9794
  * @Date: 2023-11-02 18:34:34
9753
9795
  * @LastEditors: binruan@chatlabs.com
9754
- * @LastEditTime: 2024-11-20 18:37:10
9796
+ * @LastEditTime: 2024-12-04 11:34:20
9755
9797
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
9756
9798
  *
9757
9799
  */
@@ -9935,7 +9977,7 @@
9935
9977
  }
9936
9978
  })), child()),
9937
9979
  React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
9938
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9980
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1), alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9939
9981
  };
9940
9982
  var Modal$1 = React.memo(Modal);
9941
9983
 
@@ -10008,19 +10050,20 @@
10008
10050
 
10009
10051
  const FormatImage = React.forwardRef((props, ref) => {
10010
10052
  const { src, onLoad, style, className, loading, alt = 'image' } = props;
10011
- const [imgSrc, setImgSrc] = React.useState(src);
10053
+ const querySrc = src ? getSpliceQueryUrl(src) : '';
10054
+ const [imgSrc, setImgSrc] = React.useState(querySrc);
10012
10055
  const imgRef = React.useRef(null);
10013
10056
  const [visible, setVisible] = React.useState(false);
10014
10057
  React.useImperativeHandle(ref, () => ({
10015
10058
  setSrc: (v) => {
10016
10059
  if (v)
10017
- setImgSrc(v);
10060
+ setImgSrc(getSpliceQueryUrl(v));
10018
10061
  }
10019
10062
  }));
10020
10063
  React.useEffect(() => {
10021
- if (src)
10022
- setImgSrc(src);
10023
- }, [src]);
10064
+ if (querySrc)
10065
+ setImgSrc(querySrc);
10066
+ }, [querySrc]);
10024
10067
  React.useEffect(() => {
10025
10068
  const onShow = () => {
10026
10069
  if (src && !visible && imgRef.current) {
@@ -10037,8 +10080,8 @@
10037
10080
  !visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
10038
10081
  (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
10039
10082
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
10040
- React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
10041
- React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
10083
+ React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}&imageMogr2/format/webp` }),
10084
+ React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}&imageMogr2/format/jpg` }),
10042
10085
  React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
10043
10086
  setVisible(true);
10044
10087
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
@@ -16273,7 +16316,7 @@ Made in Italy` })));
16273
16316
  paddingLeft: '6px'
16274
16317
  } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle} ${css.css(aniTimStyle)}`, onClick: handleTo }),
16275
16318
  React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
16276
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
16319
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close', className: styles['modal-icon-wrapper-img'] })),
16277
16320
  React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
16278
16321
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
16279
16322
  __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
@@ -16584,7 +16627,7 @@ Made in Italy` })));
16584
16627
  * @Author: binruan@chatlabs.com
16585
16628
  * @Date: 2023-12-26 10:38:53
16586
16629
  * @LastEditors: binruan@chatlabs.com
16587
- * @LastEditTime: 2024-10-29 18:04:27
16630
+ * @LastEditTime: 2024-12-03 16:43:47
16588
16631
  * @FilePath: \pb-sxp-ui\src\core\context\EditorDataProvider.tsx
16589
16632
  *
16590
16633
  */
@@ -16843,7 +16886,7 @@ Made in Italy` })));
16843
16886
  const { isActive } = useSwiperSlide() || {};
16844
16887
  const initRef = React.useRef(false);
16845
16888
  const viewTime = React.useRef();
16846
- 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 : '';
16889
+ 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 : '';
16847
16890
  const getPropsVal = React.useCallback((index, str) => {
16848
16891
  try {
16849
16892
  return new Function('props', 'str', `if (str) {
@@ -16859,14 +16902,6 @@ Made in Italy` })));
16859
16902
  const value = v === null || v === void 0 ? void 0 : v.value;
16860
16903
  if (!value)
16861
16904
  return;
16862
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16863
- eventInfo: {
16864
- eventSubject: 'multiPostClick',
16865
- eventDescription: 'multiPostClick',
16866
- traceinfo,
16867
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
16868
- }
16869
- });
16870
16905
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
16871
16906
  endMultiPost('multipostClick');
16872
16907
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -16884,18 +16919,19 @@ Made in Italy` })));
16884
16919
  eventDescription: 'startMultiPost',
16885
16920
  contentFormat: 'IMAGE',
16886
16921
  position: '0',
16887
- traceinfo
16922
+ traceInfo
16888
16923
  }
16889
16924
  });
16890
16925
  }, []);
16891
16926
  const endMultiPost = React.useCallback((nextStep) => {
16927
+ curTime.current = new Date();
16892
16928
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16893
16929
  eventInfo: {
16894
16930
  eventSubject: 'endMultiPost',
16895
16931
  eventDescription: 'endMultiPost',
16896
16932
  contentFormat: 'IMAGE',
16897
16933
  position: '0',
16898
- traceinfo,
16934
+ traceInfo,
16899
16935
  nextStep: nextStep || 'others',
16900
16936
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
16901
16937
  }
@@ -16911,6 +16947,8 @@ Made in Italy` })));
16911
16947
  }
16912
16948
  }, [isActive]);
16913
16949
  React.useEffect(() => {
16950
+ if (!isActive)
16951
+ return;
16914
16952
  const onShow = () => startMultiPost();
16915
16953
  const onHide = () => endMultiPost();
16916
16954
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16921,8 +16959,8 @@ Made in Italy` })));
16921
16959
  };
16922
16960
  }, [isActive]);
16923
16961
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
16924
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16925
- React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
16962
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16963
+ React.createElement("img", { className: 'multiposts-btn-img', src: getSpliceQueryUrl(getPropsVal(index, 'Url')), alt: `multiposts-img-${index + 1}` })));
16926
16964
  })));
16927
16965
  };
16928
16966
  var MultiPosts$2 = React.memo(MultiPosts$1);
@@ -17109,7 +17147,7 @@ Made in Italy` })));
17109
17147
  }
17110
17148
  }), 200);
17111
17149
  return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
17112
- React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
17150
+ React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: getSpliceQueryUrl(state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon), alt: 'icon' })));
17113
17151
  };
17114
17152
  var LikeButton$1 = React.memo(LikeButton);
17115
17153
 
@@ -17323,9 +17361,10 @@ Made in Italy` })));
17323
17361
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
17324
17362
  if (!isActive)
17325
17363
  return;
17326
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
17364
+ let videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
17327
17365
  if (!videoSrc)
17328
17366
  return;
17367
+ videoSrc = getSpliceQueryUrl(videoSrc);
17329
17368
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
17330
17369
  if (!videoPlayerWrapperNode)
17331
17370
  return;
@@ -17509,7 +17548,7 @@ Made in Italy` })));
17509
17548
  setIsTure(defaultValue);
17510
17549
  }, [defaultValue]);
17511
17550
  return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
17512
- React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
17551
+ React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: getSpliceQueryUrl(isTrue ? activeIcon : unactiveIcon) })));
17513
17552
  };
17514
17553
  var ToggleButton$1 = React.memo(ToggleButton);
17515
17554
 
@@ -17517,7 +17556,7 @@ Made in Italy` })));
17517
17556
  * @Author: binruan@chatlabs.com
17518
17557
  * @Date: 2024-01-15 19:03:09
17519
17558
  * @LastEditors: binruan@chatlabs.com
17520
- * @LastEditTime: 2024-07-11 18:19:29
17559
+ * @LastEditTime: 2024-12-04 11:24:16
17521
17560
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
17522
17561
  *
17523
17562
  */
@@ -17534,7 +17573,7 @@ Made in Italy` })));
17534
17573
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
17535
17574
  }, [show]);
17536
17575
  return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
17537
- React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
17576
+ React.createElement("img", { src: getSpliceQueryUrl(imageUrl || FINGER_SWIPE_ICON), alt: 'finger swiper' })));
17538
17577
  };
17539
17578
 
17540
17579
  /*
@@ -17841,7 +17880,7 @@ Made in Italy` })));
17841
17880
  * @Author: binruan@chatlabs.com
17842
17881
  * @Date: 2024-03-26 10:07:41
17843
17882
  * @LastEditors: binruan@chatlabs.com
17844
- * @LastEditTime: 2024-07-03 10:07:29
17883
+ * @LastEditTime: 2024-12-04 11:29:23
17845
17884
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Nudge\index.tsx
17846
17885
  *
17847
17886
  */
@@ -17854,7 +17893,7 @@ Made in Italy` })));
17854
17893
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
17855
17894
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
17856
17895
  } },
17857
- (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
17896
+ (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: getSpliceQueryUrl(nudge.icon), alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
17858
17897
  React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0, marginTop: 0 }), dangerouslySetInnerHTML: {
17859
17898
  __html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
17860
17899
  } })))));
@@ -17947,7 +17986,7 @@ Made in Italy` })));
17947
17986
  padding: 0,
17948
17987
  background: 'transparent'
17949
17988
  }, role: 'button', "aria-label": 'back button', onClick: onClick },
17950
- React.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || img, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
17989
+ React.createElement("img", { src: getSpliceQueryUrl((data === null || data === void 0 ? void 0 : data.icon) || img), alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
17951
17990
  };
17952
17991
  var NavBack$1 = React.memo(NavBack);
17953
17992
 
@@ -17955,7 +17994,15 @@ Made in Italy` })));
17955
17994
  * @Author: binruan@chatlabs.com
17956
17995
  * @Date: 2024-03-20 10:27:31
17957
17996
  * @LastEditors: binruan@chatlabs.com
17958
- * @LastEditTime: 2024-11-27 17:08:59
17997
+ * @LastEditTime: 2024-12-04 11:30:35
17998
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17999
+ *
18000
+ */
18001
+ /*
18002
+ * @Author: binruan@chatlabs.com
18003
+ * @Date: 2024-03-20 10:27:31
18004
+ * @LastEditors: binruan@chatlabs.com
18005
+ * @LastEditTime: 2024-12-03 15:27:20
17959
18006
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17960
18007
  *
17961
18008
  */
@@ -18047,20 +18094,22 @@ Made in Italy` })));
18047
18094
  else if (item === null || item === void 0 ? void 0 : item.product) {
18048
18095
  fromKName = 'productPage';
18049
18096
  }
18050
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18051
- eventInfo: {
18052
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18053
- eventSubject: 'sessionCompleted',
18054
- eventDescription: 'Session completed',
18055
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18056
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18057
- position: activeIndex + '',
18058
- fromKName,
18059
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
18060
- 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 : '',
18061
- 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 : ''
18062
- }
18063
- });
18097
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
18098
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18099
+ eventInfo: {
18100
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18101
+ eventSubject: 'sessionCompleted',
18102
+ eventDescription: 'Session completed',
18103
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18104
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18105
+ position: activeIndex + '',
18106
+ fromKName,
18107
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
18108
+ 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 : '',
18109
+ 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 : ''
18110
+ }
18111
+ });
18112
+ }
18064
18113
  }
18065
18114
  else if (document.visibilityState === 'visible') {
18066
18115
  if (skipLinkRef.current === true) {
@@ -18144,7 +18193,7 @@ Made in Italy` })));
18144
18193
  new Function(link)();
18145
18194
  }
18146
18195
  })),
18147
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
18196
+ React.createElement("img", { src: getSpliceQueryUrl(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl), alt: 'logo' })));
18148
18197
  }
18149
18198
  return null;
18150
18199
  }, [globalConfig, activeIndex, visList]);
@@ -18242,9 +18291,12 @@ Made in Italy` })));
18242
18291
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
18243
18292
  return;
18244
18293
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
18245
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
18294
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18246
18295
  top += 40;
18247
18296
  }
18297
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18298
+ top += minusHeight;
18299
+ }
18248
18300
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
18249
18301
  return (React.createElement(LikeButton$1, { 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: {
18250
18302
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -18416,6 +18468,9 @@ Made in Italy` })));
18416
18468
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18417
18469
  top += 40;
18418
18470
  }
18471
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18472
+ top += minusHeight;
18473
+ }
18419
18474
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
18420
18475
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
18421
18476
  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',
@@ -18428,7 +18483,7 @@ Made in Italy` })));
18428
18483
  const renderView = React.useMemo(() => {
18429
18484
  if (loading) {
18430
18485
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
18431
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
18486
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } })));
18432
18487
  }
18433
18488
  return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
18434
18489
  return (React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden' } }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (React.createElement("div", { style: {
@@ -18438,7 +18493,7 @@ Made in Italy` })));
18438
18493
  justifyContent: 'center',
18439
18494
  alignItems: 'center'
18440
18495
  } },
18441
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
18496
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
18442
18497
  renderBottom(rec, index),
18443
18498
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
18444
18499
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
@@ -18475,7 +18530,7 @@ Made in Italy` })));
18475
18530
  eventInfo: {
18476
18531
  eventSubject: 'backMultiPostClick',
18477
18532
  eventDescription: 'backMultiPostClick',
18478
- 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 : ''
18533
+ traceInfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
18479
18534
  }
18480
18535
  });
18481
18536
  location === null || location === void 0 ? void 0 : location.reload();