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
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect, useMemo, useState } from 'react';
2
2
  import { useIconLink } from '../useIconLink';
3
3
  import { useEditor } from '../../../../core/hooks';
4
+ import { getSpliceQueryUrl } from '../../../../core/utils/tool';
4
5
  const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
5
6
  const [show, setShow] = useState(true);
6
7
  const { schema: { sxpPageConf } } = useEditor();
@@ -14,6 +15,6 @@ const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
14
15
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
15
16
  }, [show]);
16
17
  return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
17
- React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
18
+ React.createElement("img", { src: getSpliceQueryUrl(imageUrl || FINGER_SWIPE_ICON), alt: 'finger swiper' })));
18
19
  };
19
20
  export default FingerSwipeTip;
@@ -1,20 +1,22 @@
1
1
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
2
+ import { getSpliceQueryUrl } from '../../../core/utils/tool';
2
3
  import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
3
4
  const FormatImage = forwardRef((props, ref) => {
4
5
  const { src, onLoad, style, className, loading, alt = 'image' } = props;
5
- const [imgSrc, setImgSrc] = useState(src);
6
+ const querySrc = src ? getSpliceQueryUrl(src) : '';
7
+ const [imgSrc, setImgSrc] = useState(querySrc);
6
8
  const imgRef = useRef(null);
7
9
  const [visible, setVisible] = useState(false);
8
10
  useImperativeHandle(ref, () => ({
9
11
  setSrc: (v) => {
10
12
  if (v)
11
- setImgSrc(v);
13
+ setImgSrc(getSpliceQueryUrl(v));
12
14
  }
13
15
  }));
14
16
  useEffect(() => {
15
- if (src)
16
- setImgSrc(src);
17
- }, [src]);
17
+ if (querySrc)
18
+ setImgSrc(querySrc);
19
+ }, [querySrc]);
18
20
  useEffect(() => {
19
21
  const onShow = () => {
20
22
  if (src && !visible && imgRef.current) {
@@ -31,8 +33,8 @@ const FormatImage = forwardRef((props, ref) => {
31
33
  !visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
32
34
  (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
33
35
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
34
- React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
35
- React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
36
+ React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}&imageMogr2/format/webp` }),
37
+ React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}&imageMogr2/format/jpg` }),
36
38
  React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
37
39
  setVisible(true);
38
40
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
@@ -3,6 +3,7 @@ import React, { memo, useState } from 'react';
3
3
  import { debounce } from 'lodash';
4
4
  import { useIconLink } from '../useIconLink';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
+ import { getSpliceQueryUrl } from '../../../../core/utils/tool';
6
7
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
7
8
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
8
9
  const LikeButton = (_a) => {
@@ -72,6 +73,6 @@ const LikeButton = (_a) => {
72
73
  }
73
74
  }), 200);
74
75
  return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
75
- React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
76
+ React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: getSpliceQueryUrl(state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon), alt: 'icon' })));
76
77
  };
77
78
  export default memo(LikeButton);
@@ -2,6 +2,7 @@ import { debounce } from 'lodash';
2
2
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import * as ReactDOM from 'react-dom';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
+ import { getSpliceQueryUrl } from '../../../../core/utils/tool';
5
6
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
6
7
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
7
8
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -176,6 +177,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
176
177
  }
177
178
  })), child()),
178
179
  React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
179
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
180
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
180
181
  };
181
182
  export default memo(Modal);
@@ -1,5 +1,6 @@
1
1
  import React, { memo } from 'react';
2
2
  import left from './left.png';
3
+ import { getSpliceQueryUrl } from '../../../core/utils/tool';
3
4
  const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
4
5
  var _a, _b, _c, _d, _e;
5
6
  return (React.createElement("button", { style: {
@@ -11,6 +12,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
11
12
  padding: 0,
12
13
  background: 'transparent'
13
14
  }, role: 'button', "aria-label": 'back button', onClick: onClick },
14
- React.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || left, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
15
+ React.createElement("img", { src: getSpliceQueryUrl((data === null || data === void 0 ? void 0 : data.icon) || left), alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
15
16
  };
16
17
  export default memo(NavBack);
@@ -1,4 +1,4 @@
1
- import { setFontForText } from '../../../../core/utils/tool';
1
+ import { getSpliceQueryUrl, setFontForText } from '../../../../core/utils/tool';
2
2
  import React from 'react';
3
3
  const Nudge = ({ nudge }) => {
4
4
  var _a, _b, _c, _d, _e, _f;
@@ -9,7 +9,7 @@ const Nudge = ({ nudge }) => {
9
9
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
10
10
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
11
11
  } },
12
- (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,
12
+ (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,
13
13
  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: {
14
14
  __html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
15
15
  } })))));
@@ -1,3 +1,4 @@
1
+ import { getSpliceQueryUrl } from '../../../../core/utils/tool';
1
2
  import React, { memo, useEffect, useState } from 'react';
2
3
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
3
4
  const [isTrue, setIsTure] = useState(defaultValue);
@@ -11,6 +12,6 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
11
12
  setIsTure(defaultValue);
12
13
  }, [defaultValue]);
13
14
  return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
14
- React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
15
+ React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: getSpliceQueryUrl(isTrue ? activeIcon : unactiveIcon) })));
15
16
  };
16
17
  export default memo(ToggleButton);
@@ -7,6 +7,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
8
8
  import loading_gif from './loading.gif';
9
9
  import { mountVideoPlayerAtNode } from './VideoPlayer';
10
+ import { getSpliceQueryUrl } from '../../../../core/utils/tool';
10
11
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
11
12
  const [isPauseVideo, setIsPauseVideo] = useState(false);
12
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -193,9 +194,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
193
194
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
194
195
  if (!isActive)
195
196
  return;
196
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
197
+ let videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
197
198
  if (!videoSrc)
198
199
  return;
200
+ videoSrc = getSpliceQueryUrl(videoSrc);
199
201
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
200
202
  if (!videoPlayerWrapperNode)
201
203
  return;
@@ -26,6 +26,7 @@ import ConsentPopup from './ConsentPopup';
26
26
  import MultiPosts from '../../../materials/sxp/MultiPosts';
27
27
  import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
28
28
  import NavBack from './NavBack';
29
+ import { getSpliceQueryUrl } from '../../../core/utils/tool';
29
30
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
30
31
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
31
32
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -112,20 +113,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
112
113
  else if (item === null || item === void 0 ? void 0 : item.product) {
113
114
  fromKName = 'productPage';
114
115
  }
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
- });
116
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
117
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
118
+ eventInfo: {
119
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
120
+ eventSubject: 'sessionCompleted',
121
+ eventDescription: 'Session completed',
122
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
123
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
124
+ position: activeIndex + '',
125
+ fromKName,
126
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
127
+ 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 : '',
128
+ 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 : ''
129
+ }
130
+ });
131
+ }
129
132
  }
130
133
  else if (document.visibilityState === 'visible') {
131
134
  if (skipLinkRef.current === true) {
@@ -208,7 +211,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
208
211
  new Function(link)();
209
212
  }
210
213
  })),
211
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
214
+ React.createElement("img", { src: getSpliceQueryUrl(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl), alt: 'logo' })));
212
215
  }
213
216
  return null;
214
217
  }, [globalConfig, activeIndex, visList]);
@@ -306,9 +309,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
306
309
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
307
310
  return;
308
311
  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') {
312
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
310
313
  top += 40;
311
314
  }
315
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
316
+ top += minusHeight;
317
+ }
312
318
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
313
319
  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
320
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -476,6 +482,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
476
482
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
477
483
  top += 40;
478
484
  }
485
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
486
+ top += minusHeight;
487
+ }
479
488
  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
489
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
481
490
  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',
@@ -488,7 +497,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
488
497
  const renderView = useMemo(() => {
489
498
  if (loading) {
490
499
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
491
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
500
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } })));
492
501
  }
493
502
  return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
494
503
  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: {
@@ -498,7 +507,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
498
507
  justifyContent: 'center',
499
508
  alignItems: 'center'
500
509
  } },
501
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
510
+ React.createElement("img", { width: 64, height: 64, src: getSpliceQueryUrl(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
502
511
  renderBottom(rec, index),
503
512
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
504
513
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
@@ -535,7 +544,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
535
544
  eventInfo: {
536
545
  eventSubject: 'backMultiPostClick',
537
546
  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 : ''
547
+ 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 : ''
539
548
  }
540
549
  });
541
550
  location === null || location === void 0 ? void 0 : location.reload();
@@ -1,4 +1,5 @@
1
1
  import React, { FC, PropsWithChildren } from 'react';
2
+ import { PageData } from '../Pagebuilder/type';
2
3
  interface IEditorDataContext {
3
4
  sxpPrameter?: {
4
5
  bottomImage: string;
@@ -21,9 +22,7 @@ interface IEditorDataContext {
21
22
  openConsent?: boolean;
22
23
  setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
23
24
  sxpFontLinks?: any[];
24
- utmParameter?: {
25
- channels: string[];
26
- };
25
+ utmParameter?: PageData['utm_parameter'];
27
26
  consentPopupCate?: string;
28
27
  setConsentPopupCate?: React.Dispatch<React.SetStateAction<string>>;
29
28
  openMultiPosts?: boolean;
@@ -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,4 +12,5 @@ declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
14
  declare function getScreenReader(): boolean;
15
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
15
+ declare const getSpliceQueryUrl: (url?: string) => string;
16
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, getSpliceQueryUrl };
@@ -167,4 +167,17 @@ function getScreenReader() {
167
167
  /JAWS/i.test(userAgent) ||
168
168
  /ChromeVox/i.test(userAgent));
169
169
  }
170
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
170
+ const getSpliceQueryUrl = (url) => {
171
+ if (!url)
172
+ return '';
173
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('http')) === -1)
174
+ return url;
175
+ let query = 'x-im-piez=on';
176
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
177
+ return url + (query ? '&' + query : '');
178
+ }
179
+ else {
180
+ return url + (query ? '?' + query : '');
181
+ }
182
+ };
183
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, getSpliceQueryUrl };
@@ -5,6 +5,7 @@ import './index.less';
5
5
  import { useSxpDataSource } from '../../../core/hooks';
6
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
7
7
  import { useSwiperSlide } from 'swiper/react';
8
+ import { getSpliceQueryUrl } from '../../../core/utils/tool';
8
9
  const MultiPosts = (_a) => {
9
10
  var _b, _c;
10
11
  var { bgImgUrl, style, recData } = _a, props = __rest(_a, ["bgImgUrl", "style", "recData"]);
@@ -12,7 +13,7 @@ const MultiPosts = (_a) => {
12
13
  const { isActive } = useSwiperSlide() || {};
13
14
  const initRef = useRef(false);
14
15
  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 : '';
16
+ 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
17
  const getPropsVal = useCallback((index, str) => {
17
18
  try {
18
19
  return new Function('props', 'str', `if (str) {
@@ -28,14 +29,6 @@ const MultiPosts = (_a) => {
28
29
  const value = v === null || v === void 0 ? void 0 : v.value;
29
30
  if (!value)
30
31
  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
32
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
40
33
  endMultiPost('multipostClick');
41
34
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -53,18 +46,19 @@ const MultiPosts = (_a) => {
53
46
  eventDescription: 'startMultiPost',
54
47
  contentFormat: 'IMAGE',
55
48
  position: '0',
56
- traceinfo
49
+ traceInfo
57
50
  }
58
51
  });
59
52
  }, []);
60
53
  const endMultiPost = useCallback((nextStep) => {
54
+ curTime.current = new Date();
61
55
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
62
56
  eventInfo: {
63
57
  eventSubject: 'endMultiPost',
64
58
  eventDescription: 'endMultiPost',
65
59
  contentFormat: 'IMAGE',
66
60
  position: '0',
67
- traceinfo,
61
+ traceInfo,
68
62
  nextStep: nextStep || 'others',
69
63
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
70
64
  }
@@ -80,6 +74,8 @@ const MultiPosts = (_a) => {
80
74
  }
81
75
  }, [isActive]);
82
76
  useEffect(() => {
77
+ if (!isActive)
78
+ return;
83
79
  const onShow = () => startMultiPost();
84
80
  const onHide = () => endMultiPost();
85
81
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -90,8 +86,8 @@ const MultiPosts = (_a) => {
90
86
  };
91
87
  }, [isActive]);
92
88
  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) },
94
- React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
89
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
90
+ React.createElement("img", { className: 'multiposts-btn-img', src: getSpliceQueryUrl(getPropsVal(index, 'Url')), alt: `multiposts-img-${index + 1}` })));
95
91
  })));
96
92
  };
97
93
  export default memo(MultiPosts);
@@ -4,7 +4,7 @@ import React, { memo, useEffect, useMemo, useState } from 'react';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import { useEventReport } from '../../../../core/hooks/useEventReport';
6
6
  import Img from '../../template/components/Img';
7
- import { setFontForText } from '../../../../core/utils/tool';
7
+ import { getSpliceQueryUrl, setFontForText } from '../../../../core/utils/tool';
8
8
  import styles from './index.module.less';
9
9
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
10
10
  const AniLinkPopup = (_a) => {
@@ -65,7 +65,7 @@ const AniLinkPopup = (_a) => {
65
65
  paddingLeft: '6px'
66
66
  } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${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(aniTimStyle)}`, onClick: handleTo }),
67
67
  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 } },
68
- React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
68
+ React.createElement("img", { src: getSpliceQueryUrl((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
69
  React.createElement(Img, { 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 }),
70
70
  (!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: {
71
71
  __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)
@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const useIconLink_1 = require("../useIconLink");
6
6
  const hooks_1 = require("../../../../core/hooks");
7
+ const tool_1 = require("../../../../core/utils/tool");
7
8
  const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
8
9
  const [show, setShow] = (0, react_1.useState)(true);
9
10
  const { schema: { sxpPageConf } } = (0, hooks_1.useEditor)();
@@ -17,6 +18,6 @@ const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
17
18
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
18
19
  }, [show]);
19
20
  return (react_1.default.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
20
- react_1.default.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
21
+ react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)(imageUrl || FINGER_SWIPE_ICON), alt: 'finger swiper' })));
21
22
  };
22
23
  exports.default = FingerSwipeTip;
@@ -2,22 +2,24 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
5
+ const tool_1 = require("../../../core/utils/tool");
5
6
  const react_1 = tslib_1.__importStar(require("react"));
6
7
  const FormatImage = (0, react_1.forwardRef)((props, ref) => {
7
8
  const { src, onLoad, style, className, loading, alt = 'image' } = props;
8
- const [imgSrc, setImgSrc] = (0, react_1.useState)(src);
9
+ const querySrc = src ? (0, tool_1.getSpliceQueryUrl)(src) : '';
10
+ const [imgSrc, setImgSrc] = (0, react_1.useState)(querySrc);
9
11
  const imgRef = (0, react_1.useRef)(null);
10
12
  const [visible, setVisible] = (0, react_1.useState)(false);
11
13
  (0, react_1.useImperativeHandle)(ref, () => ({
12
14
  setSrc: (v) => {
13
15
  if (v)
14
- setImgSrc(v);
16
+ setImgSrc((0, tool_1.getSpliceQueryUrl)(v));
15
17
  }
16
18
  }));
17
19
  (0, react_1.useEffect)(() => {
18
- if (src)
19
- setImgSrc(src);
20
- }, [src]);
20
+ if (querySrc)
21
+ setImgSrc(querySrc);
22
+ }, [querySrc]);
21
23
  (0, react_1.useEffect)(() => {
22
24
  const onShow = () => {
23
25
  if (src && !visible && imgRef.current) {
@@ -34,8 +36,8 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
34
36
  !visible && !imgSrc && react_1.default.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
35
37
  (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
36
38
  react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
37
- react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
38
- react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
39
+ react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}&imageMogr2/format/webp` }),
40
+ react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}&imageMogr2/format/jpg` }),
39
41
  react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
40
42
  setVisible(true);
41
43
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  const lodash_1 = require("lodash");
6
6
  const useIconLink_1 = require("../useIconLink");
7
7
  const hooks_1 = require("../../../../core/hooks");
8
+ const tool_1 = require("../../../../core/utils/tool");
8
9
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
9
10
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
10
11
  const LikeButton = (_a) => {
@@ -74,6 +75,6 @@ const LikeButton = (_a) => {
74
75
  }
75
76
  }), 200);
76
77
  return (react_1.default.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
77
- react_1.default.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
78
+ react_1.default.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: (0, tool_1.getSpliceQueryUrl)(state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon), alt: 'icon' })));
78
79
  };
79
80
  exports.default = (0, react_1.memo)(LikeButton);