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/index.cjs CHANGED
@@ -331,6 +331,19 @@ function getScreenReader() {
331
331
  /JAWS/i.test(userAgent) ||
332
332
  /ChromeVox/i.test(userAgent));
333
333
  }
334
+ const getSpliceQueryUrl = (url) => {
335
+ if (!url)
336
+ return '';
337
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('http')) === -1)
338
+ return url;
339
+ let query = 'x-im-piez=on';
340
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
341
+ return url + ('&' + query );
342
+ }
343
+ else {
344
+ return url + ('?' + query );
345
+ }
346
+ };
334
347
 
335
348
  function unzip(b64Data) {
336
349
  const strData = atob(b64Data);
@@ -677,11 +690,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
677
690
  const popupCurTimeRef = React.useRef(null);
678
691
  const [isNoMoreData, setIsNoMoreData] = React.useState(false);
679
692
  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);
680
- const [pageData, setPageData] = React.useState(data);
693
+ const [pageData, setPageData] = React.useState();
681
694
  const [showConsent, setShowConsent] = React.useState(false);
682
695
  const [layoutVariantId, setLayoutVariantId] = React.useState();
683
696
  const [channel, setChannel] = React.useState();
684
697
  const [eventTimeList, setEventTimeList] = React.useState([]);
698
+ const [playbookType, setPlaybookType] = React.useState();
699
+ const finalPageData = React.useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
685
700
  const isShowConsent = React.useMemo(() => {
686
701
  var _a, _b, _c, _d;
687
702
  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) &&
@@ -868,7 +883,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
868
883
  };
869
884
  }
870
885
  const sessionID = storeAndLoadFeSessionId();
871
- 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 }));
886
+ 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 + '' }));
872
887
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
873
888
  const realEventInfo = Object.entries(ef)
874
889
  .map(([k, v]) => v && { name: k, value: v })
@@ -882,7 +897,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
882
897
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
883
898
  type: 'beacon'
884
899
  });
885
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
900
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
886
901
  const bffFbReport = React.useCallback(({ eventName, product }) => {
887
902
  var _a, _b, _c, _d, _e;
888
903
  if (!enableReportEvent ||
@@ -1043,17 +1058,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1043
1058
  return;
1044
1059
  setLoading(true);
1045
1060
  let layId;
1061
+ let pbType;
1046
1062
  getRecommendVideos()
1047
1063
  .then((data) => {
1048
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1064
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
1049
1065
  if (data) {
1050
1066
  const list = getFilterRecList(data);
1051
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
1052
- list.unshift('organic menu');
1053
- }
1054
- setRtcList(list);
1055
- setCacheRtcList(list);
1056
1067
  let curData;
1068
+ let gldata;
1057
1069
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
1058
1070
  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];
1059
1071
  if (id) {
@@ -1063,19 +1075,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1063
1075
  if (curData) {
1064
1076
  setPageData(curData);
1065
1077
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
1066
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
1078
+ 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;
1079
+ setGlobalConfig(gldata);
1067
1080
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
1068
- 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)
1081
+ 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)
1069
1082
  setShowConsent(true);
1070
1083
  }
1084
+ else {
1085
+ setShowConsent(true);
1086
+ }
1071
1087
  }
1072
1088
  }
1073
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
1089
+ else {
1090
+ setShowConsent(true);
1091
+ }
1092
+ if (!channel) {
1093
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
1094
+ setPlaybookType('organicMenu');
1095
+ list.unshift('organic menu');
1096
+ pbType = 'organicMenu';
1097
+ }
1098
+ else {
1099
+ setPlaybookType('paidMedia');
1100
+ pbType = 'paidMedia';
1101
+ }
1102
+ }
1103
+ setRtcList(list);
1104
+ setCacheRtcList(list);
1105
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
1106
+ if (channel) {
1107
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1108
+ eventInfo: {
1109
+ eventSubject: 'multiPostClick',
1110
+ eventDescription: 'multiPostClick',
1111
+ 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 : '',
1112
+ branchfeed: channel
1113
+ }
1114
+ });
1115
+ }
1074
1116
  }
1075
1117
  })
1076
1118
  .finally(() => {
1077
1119
  bffEventReport({
1078
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
1120
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
1079
1121
  });
1080
1122
  setLoading(false);
1081
1123
  });
@@ -1085,7 +1127,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1085
1127
  if (!isPreview)
1086
1128
  return;
1087
1129
  setLoading(true);
1088
- bffGetTagList(pageData);
1130
+ bffGetTagList(data);
1089
1131
  getRecommendVideos()
1090
1132
  .then((data) => {
1091
1133
  if (data) {
@@ -1160,7 +1202,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1160
1202
  mutateUnlike: bffMutateUnlike,
1161
1203
  submitForm: bffSubmitForm,
1162
1204
  tagList,
1163
- pageData
1205
+ pageData: finalPageData
1164
1206
  }))));
1165
1207
  };
1166
1208
  var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -9758,7 +9800,7 @@ SwiperSlide.displayName = 'SwiperSlide';
9758
9800
  * @Author: binruan@chatlabs.com
9759
9801
  * @Date: 2023-11-02 18:34:34
9760
9802
  * @LastEditors: binruan@chatlabs.com
9761
- * @LastEditTime: 2024-11-20 18:37:10
9803
+ * @LastEditTime: 2024-12-04 11:34:20
9762
9804
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
9763
9805
  *
9764
9806
  */
@@ -9942,7 +9984,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
9942
9984
  }
9943
9985
  })), child()),
9944
9986
  React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
9945
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9987
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1), alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9946
9988
  };
9947
9989
  var Modal$1 = React.memo(Modal);
9948
9990
 
@@ -10015,19 +10057,20 @@ var ExpandableText$1 = React.memo(ExpandableText);
10015
10057
 
10016
10058
  const FormatImage = React.forwardRef((props, ref) => {
10017
10059
  const { src, onLoad, style, className, loading, alt = 'image' } = props;
10018
- const [imgSrc, setImgSrc] = React.useState(src);
10060
+ const querySrc = src ? getSpliceQueryUrl(src) : '';
10061
+ const [imgSrc, setImgSrc] = React.useState(querySrc);
10019
10062
  const imgRef = React.useRef(null);
10020
10063
  const [visible, setVisible] = React.useState(false);
10021
10064
  React.useImperativeHandle(ref, () => ({
10022
10065
  setSrc: (v) => {
10023
10066
  if (v)
10024
- setImgSrc(v);
10067
+ setImgSrc(getSpliceQueryUrl(v));
10025
10068
  }
10026
10069
  }));
10027
10070
  React.useEffect(() => {
10028
- if (src)
10029
- setImgSrc(src);
10030
- }, [src]);
10071
+ if (querySrc)
10072
+ setImgSrc(querySrc);
10073
+ }, [querySrc]);
10031
10074
  React.useEffect(() => {
10032
10075
  const onShow = () => {
10033
10076
  if (src && !visible && imgRef.current) {
@@ -10044,8 +10087,8 @@ const FormatImage = React.forwardRef((props, ref) => {
10044
10087
  !visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
10045
10088
  (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
10046
10089
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
10047
- React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
10048
- React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
10090
+ React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}&imageMogr2/format/webp` }),
10091
+ React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}&imageMogr2/format/jpg` }),
10049
10092
  React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
10050
10093
  setVisible(true);
10051
10094
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
@@ -16280,7 +16323,7 @@ const AniLinkPopup$1 = (_a) => {
16280
16323
  paddingLeft: '6px'
16281
16324
  } }, "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 }),
16282
16325
  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 } },
16283
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
16326
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close', className: styles['modal-icon-wrapper-img'] })),
16284
16327
  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 }),
16285
16328
  (!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: {
16286
16329
  __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)
@@ -16591,7 +16634,7 @@ var settingRender$1 = [
16591
16634
  * @Author: binruan@chatlabs.com
16592
16635
  * @Date: 2023-12-26 10:38:53
16593
16636
  * @LastEditors: binruan@chatlabs.com
16594
- * @LastEditTime: 2024-10-29 18:04:27
16637
+ * @LastEditTime: 2024-12-03 16:43:47
16595
16638
  * @FilePath: \pb-sxp-ui\src\core\context\EditorDataProvider.tsx
16596
16639
  *
16597
16640
  */
@@ -16850,7 +16893,7 @@ const MultiPosts$1 = (_a) => {
16850
16893
  const { isActive } = useSwiperSlide() || {};
16851
16894
  const initRef = React.useRef(false);
16852
16895
  const viewTime = React.useRef();
16853
- 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 : '';
16896
+ 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 : '';
16854
16897
  const getPropsVal = React.useCallback((index, str) => {
16855
16898
  try {
16856
16899
  return new Function('props', 'str', `if (str) {
@@ -16866,14 +16909,6 @@ const MultiPosts$1 = (_a) => {
16866
16909
  const value = v === null || v === void 0 ? void 0 : v.value;
16867
16910
  if (!value)
16868
16911
  return;
16869
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16870
- eventInfo: {
16871
- eventSubject: 'multiPostClick',
16872
- eventDescription: 'multiPostClick',
16873
- traceinfo,
16874
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
16875
- }
16876
- });
16877
16912
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
16878
16913
  endMultiPost('multipostClick');
16879
16914
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -16891,18 +16926,19 @@ const MultiPosts$1 = (_a) => {
16891
16926
  eventDescription: 'startMultiPost',
16892
16927
  contentFormat: 'IMAGE',
16893
16928
  position: '0',
16894
- traceinfo
16929
+ traceInfo
16895
16930
  }
16896
16931
  });
16897
16932
  }, []);
16898
16933
  const endMultiPost = React.useCallback((nextStep) => {
16934
+ curTime.current = new Date();
16899
16935
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16900
16936
  eventInfo: {
16901
16937
  eventSubject: 'endMultiPost',
16902
16938
  eventDescription: 'endMultiPost',
16903
16939
  contentFormat: 'IMAGE',
16904
16940
  position: '0',
16905
- traceinfo,
16941
+ traceInfo,
16906
16942
  nextStep: nextStep || 'others',
16907
16943
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
16908
16944
  }
@@ -16918,6 +16954,8 @@ const MultiPosts$1 = (_a) => {
16918
16954
  }
16919
16955
  }, [isActive]);
16920
16956
  React.useEffect(() => {
16957
+ if (!isActive)
16958
+ return;
16921
16959
  const onShow = () => startMultiPost();
16922
16960
  const onHide = () => endMultiPost();
16923
16961
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16928,8 +16966,8 @@ const MultiPosts$1 = (_a) => {
16928
16966
  };
16929
16967
  }, [isActive]);
16930
16968
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
16931
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16932
- React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
16969
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16970
+ React.createElement("img", { className: 'multiposts-btn-img', src: getSpliceQueryUrl(getPropsVal(index, 'Url')), alt: `multiposts-img-${index + 1}` })));
16933
16971
  })));
16934
16972
  };
16935
16973
  var MultiPosts$2 = React.memo(MultiPosts$1);
@@ -17116,7 +17154,7 @@ const LikeButton = (_a) => {
17116
17154
  }
17117
17155
  }), 200);
17118
17156
  return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
17119
- React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
17157
+ React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: getSpliceQueryUrl(state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon), alt: 'icon' })));
17120
17158
  };
17121
17159
  var LikeButton$1 = React.memo(LikeButton);
17122
17160
 
@@ -17330,9 +17368,10 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
17330
17368
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
17331
17369
  if (!isActive)
17332
17370
  return;
17333
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
17371
+ let videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
17334
17372
  if (!videoSrc)
17335
17373
  return;
17374
+ videoSrc = getSpliceQueryUrl(videoSrc);
17336
17375
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
17337
17376
  if (!videoPlayerWrapperNode)
17338
17377
  return;
@@ -17516,7 +17555,7 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
17516
17555
  setIsTure(defaultValue);
17517
17556
  }, [defaultValue]);
17518
17557
  return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
17519
- React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
17558
+ React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: getSpliceQueryUrl(isTrue ? activeIcon : unactiveIcon) })));
17520
17559
  };
17521
17560
  var ToggleButton$1 = React.memo(ToggleButton);
17522
17561
 
@@ -17524,7 +17563,7 @@ var ToggleButton$1 = React.memo(ToggleButton);
17524
17563
  * @Author: binruan@chatlabs.com
17525
17564
  * @Date: 2024-01-15 19:03:09
17526
17565
  * @LastEditors: binruan@chatlabs.com
17527
- * @LastEditTime: 2024-07-11 18:19:29
17566
+ * @LastEditTime: 2024-12-04 11:24:16
17528
17567
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
17529
17568
  *
17530
17569
  */
@@ -17541,7 +17580,7 @@ const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
17541
17580
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
17542
17581
  }, [show]);
17543
17582
  return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
17544
- React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
17583
+ React.createElement("img", { src: getSpliceQueryUrl(imageUrl || FINGER_SWIPE_ICON), alt: 'finger swiper' })));
17545
17584
  };
17546
17585
 
17547
17586
  /*
@@ -17848,7 +17887,7 @@ var RenderCard$1 = React.memo(RenderCard);
17848
17887
  * @Author: binruan@chatlabs.com
17849
17888
  * @Date: 2024-03-26 10:07:41
17850
17889
  * @LastEditors: binruan@chatlabs.com
17851
- * @LastEditTime: 2024-07-03 10:07:29
17890
+ * @LastEditTime: 2024-12-04 11:29:23
17852
17891
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Nudge\index.tsx
17853
17892
  *
17854
17893
  */
@@ -17861,7 +17900,7 @@ const Nudge = ({ nudge }) => {
17861
17900
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
17862
17901
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
17863
17902
  } },
17864
- (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,
17903
+ (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,
17865
17904
  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: {
17866
17905
  __html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
17867
17906
  } })))));
@@ -17954,7 +17993,7 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
17954
17993
  padding: 0,
17955
17994
  background: 'transparent'
17956
17995
  }, role: 'button', "aria-label": 'back button', onClick: onClick },
17957
- React.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || img, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
17996
+ React.createElement("img", { src: getSpliceQueryUrl((data === null || data === void 0 ? void 0 : data.icon) || img), alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
17958
17997
  };
17959
17998
  var NavBack$1 = React.memo(NavBack);
17960
17999
 
@@ -17962,7 +18001,15 @@ var NavBack$1 = React.memo(NavBack);
17962
18001
  * @Author: binruan@chatlabs.com
17963
18002
  * @Date: 2024-03-20 10:27:31
17964
18003
  * @LastEditors: binruan@chatlabs.com
17965
- * @LastEditTime: 2024-11-27 17:08:59
18004
+ * @LastEditTime: 2024-12-04 11:30:35
18005
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
18006
+ *
18007
+ */
18008
+ /*
18009
+ * @Author: binruan@chatlabs.com
18010
+ * @Date: 2024-03-20 10:27:31
18011
+ * @LastEditors: binruan@chatlabs.com
18012
+ * @LastEditTime: 2024-12-03 15:27:20
17966
18013
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17967
18014
  *
17968
18015
  */
@@ -18054,20 +18101,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18054
18101
  else if (item === null || item === void 0 ? void 0 : item.product) {
18055
18102
  fromKName = 'productPage';
18056
18103
  }
18057
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18058
- eventInfo: {
18059
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18060
- eventSubject: 'sessionCompleted',
18061
- eventDescription: 'Session completed',
18062
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18063
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18064
- position: activeIndex + '',
18065
- fromKName,
18066
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
18067
- 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 : '',
18068
- 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 : ''
18069
- }
18070
- });
18104
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
18105
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18106
+ eventInfo: {
18107
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18108
+ eventSubject: 'sessionCompleted',
18109
+ eventDescription: 'Session completed',
18110
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18111
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18112
+ position: activeIndex + '',
18113
+ fromKName,
18114
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
18115
+ 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 : '',
18116
+ 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 : ''
18117
+ }
18118
+ });
18119
+ }
18071
18120
  }
18072
18121
  else if (document.visibilityState === 'visible') {
18073
18122
  if (skipLinkRef.current === true) {
@@ -18151,7 +18200,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18151
18200
  new Function(link)();
18152
18201
  }
18153
18202
  })),
18154
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
18203
+ React.createElement("img", { src: getSpliceQueryUrl(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl), alt: 'logo' })));
18155
18204
  }
18156
18205
  return null;
18157
18206
  }, [globalConfig, activeIndex, visList]);
@@ -18249,9 +18298,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18249
18298
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
18250
18299
  return;
18251
18300
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
18252
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
18301
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18253
18302
  top += 40;
18254
18303
  }
18304
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18305
+ top += minusHeight;
18306
+ }
18255
18307
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
18256
18308
  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: {
18257
18309
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -18423,6 +18475,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18423
18475
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18424
18476
  top += 40;
18425
18477
  }
18478
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18479
+ top += minusHeight;
18480
+ }
18426
18481
  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: {
18427
18482
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
18428
18483
  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',
@@ -18435,7 +18490,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18435
18490
  const renderView = React.useMemo(() => {
18436
18491
  if (loading) {
18437
18492
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
18438
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
18493
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } })));
18439
18494
  }
18440
18495
  return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
18441
18496
  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: {
@@ -18445,7 +18500,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18445
18500
  justifyContent: 'center',
18446
18501
  alignItems: 'center'
18447
18502
  } },
18448
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
18503
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
18449
18504
  renderBottom(rec, index),
18450
18505
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
18451
18506
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
@@ -18482,7 +18537,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18482
18537
  eventInfo: {
18483
18538
  eventSubject: 'backMultiPostClick',
18484
18539
  eventDescription: 'backMultiPostClick',
18485
- 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 : ''
18540
+ 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 : ''
18486
18541
  }
18487
18542
  });
18488
18543
  location === null || location === void 0 ? void 0 : location.reload();