pb-sxp-ui 1.10.4 → 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.
- package/dist/index.cjs +49 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +49 -25
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +49 -25
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
- package/es/core/components/SxpPageRender/FormatImage.js +9 -7
- package/es/core/components/SxpPageRender/LikeButton/index.js +2 -1
- package/es/core/components/SxpPageRender/Modal/index.js +2 -1
- package/es/core/components/SxpPageRender/NavBack.js +2 -1
- package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
- package/es/core/components/SxpPageRender/ToggleButton/index.js +2 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -1
- package/es/core/components/SxpPageRender/index.js +5 -4
- package/es/core/context/EditorDataProvider.d.ts +2 -3
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +14 -1
- package/es/materials/sxp/MultiPosts/index.js +3 -1
- package/es/materials/sxp/cta/AniLinkPopup/index.js +2 -2
- package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
- package/lib/core/components/SxpPageRender/FormatImage.js +9 -7
- package/lib/core/components/SxpPageRender/LikeButton/index.js +2 -1
- package/lib/core/components/SxpPageRender/Modal/index.js +2 -1
- package/lib/core/components/SxpPageRender/NavBack.js +2 -1
- package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/lib/core/components/SxpPageRender/ToggleButton/index.js +2 -1
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -1
- package/lib/core/components/SxpPageRender/index.js +5 -4
- package/lib/core/context/EditorDataProvider.d.ts +2 -3
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +15 -1
- package/lib/materials/sxp/MultiPosts/index.js +3 -1
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- 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);
|
@@ -9780,7 +9793,7 @@
|
|
9780
9793
|
* @Author: binruan@chatlabs.com
|
9781
9794
|
* @Date: 2023-11-02 18:34:34
|
9782
9795
|
* @LastEditors: binruan@chatlabs.com
|
9783
|
-
* @LastEditTime: 2024-
|
9796
|
+
* @LastEditTime: 2024-12-04 11:34:20
|
9784
9797
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
|
9785
9798
|
*
|
9786
9799
|
*/
|
@@ -9964,7 +9977,7 @@
|
|
9964
9977
|
}
|
9965
9978
|
})), child()),
|
9966
9979
|
React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
|
9967
|
-
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);
|
9968
9981
|
};
|
9969
9982
|
var Modal$1 = React.memo(Modal);
|
9970
9983
|
|
@@ -10037,19 +10050,20 @@
|
|
10037
10050
|
|
10038
10051
|
const FormatImage = React.forwardRef((props, ref) => {
|
10039
10052
|
const { src, onLoad, style, className, loading, alt = 'image' } = props;
|
10040
|
-
const
|
10053
|
+
const querySrc = src ? getSpliceQueryUrl(src) : '';
|
10054
|
+
const [imgSrc, setImgSrc] = React.useState(querySrc);
|
10041
10055
|
const imgRef = React.useRef(null);
|
10042
10056
|
const [visible, setVisible] = React.useState(false);
|
10043
10057
|
React.useImperativeHandle(ref, () => ({
|
10044
10058
|
setSrc: (v) => {
|
10045
10059
|
if (v)
|
10046
|
-
setImgSrc(v);
|
10060
|
+
setImgSrc(getSpliceQueryUrl(v));
|
10047
10061
|
}
|
10048
10062
|
}));
|
10049
10063
|
React.useEffect(() => {
|
10050
|
-
if (
|
10051
|
-
setImgSrc(
|
10052
|
-
}, [
|
10064
|
+
if (querySrc)
|
10065
|
+
setImgSrc(querySrc);
|
10066
|
+
}, [querySrc]);
|
10053
10067
|
React.useEffect(() => {
|
10054
10068
|
const onShow = () => {
|
10055
10069
|
if (src && !visible && imgRef.current) {
|
@@ -10066,8 +10080,8 @@
|
|
10066
10080
|
!visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
|
10067
10081
|
(imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
|
10068
10082
|
React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
|
10069
|
-
React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}
|
10070
|
-
React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}
|
10083
|
+
React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}&imageMogr2/format/webp` }),
|
10084
|
+
React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}&imageMogr2/format/jpg` }),
|
10071
10085
|
React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
|
10072
10086
|
setVisible(true);
|
10073
10087
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
|
@@ -16302,7 +16316,7 @@ Made in Italy` })));
|
|
16302
16316
|
paddingLeft: '6px'
|
16303
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 }),
|
16304
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 } },
|
16305
|
-
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'] })),
|
16306
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 }),
|
16307
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: {
|
16308
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)
|
@@ -16613,7 +16627,7 @@ Made in Italy` })));
|
|
16613
16627
|
* @Author: binruan@chatlabs.com
|
16614
16628
|
* @Date: 2023-12-26 10:38:53
|
16615
16629
|
* @LastEditors: binruan@chatlabs.com
|
16616
|
-
* @LastEditTime: 2024-
|
16630
|
+
* @LastEditTime: 2024-12-03 16:43:47
|
16617
16631
|
* @FilePath: \pb-sxp-ui\src\core\context\EditorDataProvider.tsx
|
16618
16632
|
*
|
16619
16633
|
*/
|
@@ -16910,6 +16924,7 @@ Made in Italy` })));
|
|
16910
16924
|
});
|
16911
16925
|
}, []);
|
16912
16926
|
const endMultiPost = React.useCallback((nextStep) => {
|
16927
|
+
curTime.current = new Date();
|
16913
16928
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
16914
16929
|
eventInfo: {
|
16915
16930
|
eventSubject: 'endMultiPost',
|
@@ -16945,7 +16960,7 @@ Made in Italy` })));
|
|
16945
16960
|
}, [isActive]);
|
16946
16961
|
return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
|
16947
16962
|
return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
|
16948
|
-
React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
|
16963
|
+
React.createElement("img", { className: 'multiposts-btn-img', src: getSpliceQueryUrl(getPropsVal(index, 'Url')), alt: `multiposts-img-${index + 1}` })));
|
16949
16964
|
})));
|
16950
16965
|
};
|
16951
16966
|
var MultiPosts$2 = React.memo(MultiPosts$1);
|
@@ -17132,7 +17147,7 @@ Made in Italy` })));
|
|
17132
17147
|
}
|
17133
17148
|
}), 200);
|
17134
17149
|
return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
|
17135
|
-
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' })));
|
17136
17151
|
};
|
17137
17152
|
var LikeButton$1 = React.memo(LikeButton);
|
17138
17153
|
|
@@ -17346,9 +17361,10 @@ Made in Italy` })));
|
|
17346
17361
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
17347
17362
|
if (!isActive)
|
17348
17363
|
return;
|
17349
|
-
|
17364
|
+
let videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
|
17350
17365
|
if (!videoSrc)
|
17351
17366
|
return;
|
17367
|
+
videoSrc = getSpliceQueryUrl(videoSrc);
|
17352
17368
|
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
17353
17369
|
if (!videoPlayerWrapperNode)
|
17354
17370
|
return;
|
@@ -17532,7 +17548,7 @@ Made in Italy` })));
|
|
17532
17548
|
setIsTure(defaultValue);
|
17533
17549
|
}, [defaultValue]);
|
17534
17550
|
return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
|
17535
|
-
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) })));
|
17536
17552
|
};
|
17537
17553
|
var ToggleButton$1 = React.memo(ToggleButton);
|
17538
17554
|
|
@@ -17540,7 +17556,7 @@ Made in Italy` })));
|
|
17540
17556
|
* @Author: binruan@chatlabs.com
|
17541
17557
|
* @Date: 2024-01-15 19:03:09
|
17542
17558
|
* @LastEditors: binruan@chatlabs.com
|
17543
|
-
* @LastEditTime: 2024-
|
17559
|
+
* @LastEditTime: 2024-12-04 11:24:16
|
17544
17560
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
|
17545
17561
|
*
|
17546
17562
|
*/
|
@@ -17557,7 +17573,7 @@ Made in Italy` })));
|
|
17557
17573
|
return show ? 'pb-fadeIn' : 'pb-fadeOut';
|
17558
17574
|
}, [show]);
|
17559
17575
|
return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
|
17560
|
-
React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
|
17576
|
+
React.createElement("img", { src: getSpliceQueryUrl(imageUrl || FINGER_SWIPE_ICON), alt: 'finger swiper' })));
|
17561
17577
|
};
|
17562
17578
|
|
17563
17579
|
/*
|
@@ -17864,7 +17880,7 @@ Made in Italy` })));
|
|
17864
17880
|
* @Author: binruan@chatlabs.com
|
17865
17881
|
* @Date: 2024-03-26 10:07:41
|
17866
17882
|
* @LastEditors: binruan@chatlabs.com
|
17867
|
-
* @LastEditTime: 2024-
|
17883
|
+
* @LastEditTime: 2024-12-04 11:29:23
|
17868
17884
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Nudge\index.tsx
|
17869
17885
|
*
|
17870
17886
|
*/
|
@@ -17877,7 +17893,7 @@ Made in Italy` })));
|
|
17877
17893
|
backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
|
17878
17894
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
17879
17895
|
} },
|
17880
|
-
(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,
|
17881
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: {
|
17882
17898
|
__html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
|
17883
17899
|
} })))));
|
@@ -17970,7 +17986,7 @@ Made in Italy` })));
|
|
17970
17986
|
padding: 0,
|
17971
17987
|
background: 'transparent'
|
17972
17988
|
}, role: 'button', "aria-label": 'back button', onClick: onClick },
|
17973
|
-
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' } })));
|
17974
17990
|
};
|
17975
17991
|
var NavBack$1 = React.memo(NavBack);
|
17976
17992
|
|
@@ -17978,7 +17994,15 @@ Made in Italy` })));
|
|
17978
17994
|
* @Author: binruan@chatlabs.com
|
17979
17995
|
* @Date: 2024-03-20 10:27:31
|
17980
17996
|
* @LastEditors: binruan@chatlabs.com
|
17981
|
-
* @LastEditTime: 2024-12-
|
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
|
17982
18006
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
17983
18007
|
*
|
17984
18008
|
*/
|
@@ -18169,7 +18193,7 @@ Made in Italy` })));
|
|
18169
18193
|
new Function(link)();
|
18170
18194
|
}
|
18171
18195
|
})),
|
18172
|
-
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' })));
|
18173
18197
|
}
|
18174
18198
|
return null;
|
18175
18199
|
}, [globalConfig, activeIndex, visList]);
|
@@ -18459,7 +18483,7 @@ Made in Italy` })));
|
|
18459
18483
|
const renderView = React.useMemo(() => {
|
18460
18484
|
if (loading) {
|
18461
18485
|
return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
18462
|
-
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' } })));
|
18463
18487
|
}
|
18464
18488
|
return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
|
18465
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: {
|
@@ -18469,7 +18493,7 @@ Made in Italy` })));
|
|
18469
18493
|
justifyContent: 'center',
|
18470
18494
|
alignItems: 'center'
|
18471
18495
|
} },
|
18472
|
-
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,
|
18473
18497
|
renderBottom(rec, index),
|
18474
18498
|
renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
|
18475
18499
|
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
@@ -18506,7 +18530,7 @@ Made in Italy` })));
|
|
18506
18530
|
eventInfo: {
|
18507
18531
|
eventSubject: 'backMultiPostClick',
|
18508
18532
|
eventDescription: 'backMultiPostClick',
|
18509
|
-
traceInfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[
|
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 : ''
|
18510
18534
|
}
|
18511
18535
|
});
|
18512
18536
|
location === null || location === void 0 ? void 0 : location.reload();
|