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.
- package/dist/index.cjs +122 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +122 -67
- 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 +122 -67
- 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 +28 -19
- package/es/core/context/EditorDataProvider.d.ts +2 -3
- package/es/core/context/SxpDataSourceProvider.js +44 -15
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +14 -1
- package/es/materials/sxp/MultiPosts/index.js +9 -13
- 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 +28 -19
- package/lib/core/context/EditorDataProvider.d.ts +2 -3
- package/lib/core/context/SxpDataSourceProvider.js +44 -15
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +15 -1
- package/lib/materials/sxp/MultiPosts/index.js +9 -13
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- 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(
|
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() })), {
|
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
|
-
|
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 ((
|
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
|
-
|
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(
|
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-
|
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
|
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 (
|
10029
|
-
setImgSrc(
|
10030
|
-
}, [
|
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}
|
10048
|
-
React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}
|
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-
|
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
|
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
|
-
|
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
|
-
|
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
|
-
|
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-
|
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-
|
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-
|
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
|
-
|
18058
|
-
|
18059
|
-
|
18060
|
-
|
18061
|
-
|
18062
|
-
|
18063
|
-
|
18064
|
-
|
18065
|
-
|
18066
|
-
|
18067
|
-
|
18068
|
-
|
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
|
-
|
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();
|