pb-sxp-ui 1.10.6 → 1.10.7
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 +53 -69
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +53 -69
- 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 +53 -69
- 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 +1 -2
- package/es/core/components/SxpPageRender/FormatImage.js +7 -9
- package/es/core/components/SxpPageRender/LikeButton/index.js +1 -2
- package/es/core/components/SxpPageRender/Modal/index.js +1 -2
- package/es/core/components/SxpPageRender/NavBack.js +1 -2
- package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
- package/es/core/components/SxpPageRender/ToggleButton/index.js +1 -2
- package/es/core/components/SxpPageRender/VideoWidget/index.js +1 -3
- package/es/core/components/SxpPageRender/index.js +9 -8
- package/es/core/context/EditorDataProvider.d.ts +3 -2
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/es/core/context/SxpDataSourceProvider.js +18 -3
- package/es/core/utils/tool.d.ts +1 -2
- package/es/core/utils/tool.js +1 -14
- package/es/materials/sxp/MultiPosts/index.js +7 -10
- package/es/materials/sxp/cta/AniLinkPopup/index.js +2 -2
- package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +1 -2
- package/lib/core/components/SxpPageRender/FormatImage.js +7 -9
- package/lib/core/components/SxpPageRender/LikeButton/index.js +1 -2
- package/lib/core/components/SxpPageRender/Modal/index.js +1 -2
- package/lib/core/components/SxpPageRender/NavBack.js +1 -2
- package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/lib/core/components/SxpPageRender/ToggleButton/index.js +1 -2
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +1 -3
- package/lib/core/components/SxpPageRender/index.js +9 -8
- package/lib/core/context/EditorDataProvider.d.ts +3 -2
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/lib/core/context/SxpDataSourceProvider.js +18 -3
- package/lib/core/utils/tool.d.ts +1 -2
- package/lib/core/utils/tool.js +1 -15
- package/lib/materials/sxp/MultiPosts/index.js +7 -10
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- package/package.json +1 -1
@@ -1,7 +1,6 @@
|
|
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';
|
5
4
|
const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
|
6
5
|
const [show, setShow] = useState(true);
|
7
6
|
const { schema: { sxpPageConf } } = useEditor();
|
@@ -15,6 +14,6 @@ const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
|
|
15
14
|
return show ? 'pb-fadeIn' : 'pb-fadeOut';
|
16
15
|
}, [show]);
|
17
16
|
return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
|
18
|
-
React.createElement("img", { src:
|
17
|
+
React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
|
19
18
|
};
|
20
19
|
export default FingerSwipeTip;
|
@@ -1,22 +1,20 @@
|
|
1
1
|
import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
|
2
|
-
import { getSpliceQueryUrl } from '../../../core/utils/tool';
|
3
2
|
import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
4
3
|
const FormatImage = forwardRef((props, ref) => {
|
5
4
|
const { src, onLoad, style, className, loading, alt = 'image' } = props;
|
6
|
-
const
|
7
|
-
const [imgSrc, setImgSrc] = useState(querySrc);
|
5
|
+
const [imgSrc, setImgSrc] = useState(src);
|
8
6
|
const imgRef = useRef(null);
|
9
7
|
const [visible, setVisible] = useState(false);
|
10
8
|
useImperativeHandle(ref, () => ({
|
11
9
|
setSrc: (v) => {
|
12
10
|
if (v)
|
13
|
-
setImgSrc(
|
11
|
+
setImgSrc(v);
|
14
12
|
}
|
15
13
|
}));
|
16
14
|
useEffect(() => {
|
17
|
-
if (
|
18
|
-
setImgSrc(
|
19
|
-
}, [
|
15
|
+
if (src)
|
16
|
+
setImgSrc(src);
|
17
|
+
}, [src]);
|
20
18
|
useEffect(() => {
|
21
19
|
const onShow = () => {
|
22
20
|
if (src && !visible && imgRef.current) {
|
@@ -33,8 +31,8 @@ const FormatImage = forwardRef((props, ref) => {
|
|
33
31
|
!visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
|
34
32
|
(imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
|
35
33
|
React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
|
36
|
-
React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}
|
37
|
-
React.createElement("source", { type: 'image/jpeg', 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` }),
|
38
36
|
React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
|
39
37
|
setVisible(true);
|
40
38
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
|
@@ -3,7 +3,6 @@ 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';
|
7
6
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
8
7
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
9
8
|
const LikeButton = (_a) => {
|
@@ -73,6 +72,6 @@ const LikeButton = (_a) => {
|
|
73
72
|
}
|
74
73
|
}), 200);
|
75
74
|
return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
|
76
|
-
React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src:
|
75
|
+
React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
|
77
76
|
};
|
78
77
|
export default memo(LikeButton);
|
@@ -2,7 +2,6 @@ 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';
|
6
5
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
7
6
|
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
|
8
7
|
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;
|
@@ -177,6 +176,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
177
176
|
}
|
178
177
|
})), child()),
|
179
178
|
React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
|
180
|
-
React.createElement("img", { src:
|
179
|
+
React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
|
181
180
|
};
|
182
181
|
export default memo(Modal);
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { memo } from 'react';
|
2
2
|
import left from './left.png';
|
3
|
-
import { getSpliceQueryUrl } from '../../../core/utils/tool';
|
4
3
|
const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
|
5
4
|
var _a, _b, _c, _d, _e;
|
6
5
|
return (React.createElement("button", { style: {
|
@@ -12,6 +11,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
|
|
12
11
|
padding: 0,
|
13
12
|
background: 'transparent'
|
14
13
|
}, role: 'button', "aria-label": 'back button', onClick: onClick },
|
15
|
-
React.createElement("img", { src:
|
14
|
+
React.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || left, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
|
16
15
|
};
|
17
16
|
export default memo(NavBack);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { 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:
|
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,
|
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,4 +1,3 @@
|
|
1
|
-
import { getSpliceQueryUrl } from '../../../../core/utils/tool';
|
2
1
|
import React, { memo, useEffect, useState } from 'react';
|
3
2
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
4
3
|
const [isTrue, setIsTure] = useState(defaultValue);
|
@@ -12,6 +11,6 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
|
|
12
11
|
setIsTure(defaultValue);
|
13
12
|
}, [defaultValue]);
|
14
13
|
return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
|
15
|
-
React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src:
|
14
|
+
React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
|
16
15
|
};
|
17
16
|
export default memo(ToggleButton);
|
@@ -7,7 +7,6 @@ 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';
|
11
10
|
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
12
11
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
13
12
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
@@ -194,10 +193,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
194
193
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
195
194
|
if (!isActive)
|
196
195
|
return;
|
197
|
-
|
196
|
+
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
|
198
197
|
if (!videoSrc)
|
199
198
|
return;
|
200
|
-
videoSrc = getSpliceQueryUrl(videoSrc);
|
201
199
|
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
202
200
|
if (!videoPlayerWrapperNode)
|
203
201
|
return;
|
@@ -26,7 +26,6 @@ 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';
|
30
29
|
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
|
31
30
|
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;
|
32
31
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
@@ -113,7 +112,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
113
112
|
else if (item === null || item === void 0 ? void 0 : item.product) {
|
114
113
|
fromKName = 'productPage';
|
115
114
|
}
|
116
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
|
115
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0 || channel) {
|
117
116
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
118
117
|
eventInfo: {
|
119
118
|
sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
|
@@ -158,7 +157,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
158
157
|
backMainFeed,
|
159
158
|
openHashtag,
|
160
159
|
isShowConsent,
|
161
|
-
selectTag
|
160
|
+
selectTag,
|
161
|
+
channel
|
162
162
|
]);
|
163
163
|
const tagHeight = useMemo(() => {
|
164
164
|
let h = 0;
|
@@ -211,7 +211,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
211
211
|
new Function(link)();
|
212
212
|
}
|
213
213
|
})),
|
214
|
-
React.createElement("img", { src:
|
214
|
+
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
215
215
|
}
|
216
216
|
return null;
|
217
217
|
}, [globalConfig, activeIndex, visList]);
|
@@ -497,7 +497,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
497
497
|
const renderView = useMemo(() => {
|
498
498
|
if (loading) {
|
499
499
|
return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
500
|
-
React.createElement("img", { width: 64, height: 64, src:
|
500
|
+
React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
|
501
501
|
}
|
502
502
|
return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
|
503
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: {
|
@@ -507,7 +507,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
507
507
|
justifyContent: 'center',
|
508
508
|
alignItems: 'center'
|
509
509
|
} },
|
510
|
-
React.createElement("img", { width: 64, height: 64, src:
|
510
|
+
React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
|
511
511
|
renderBottom(rec, index),
|
512
512
|
renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
|
513
513
|
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
@@ -540,12 +540,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
540
540
|
((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _f === void 0 ? void 0 : _f.enable) && !channel && !openMultiPosts && !waterFallData && (React.createElement(NavBack, { data: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton, minusHeight: minusHeight, tagHeight: tagHeight, onClick: () => history === null || history === void 0 ? void 0 : history.back() })),
|
541
541
|
((((_l = (_k = (_j = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === 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.backButton) === null || _l === void 0 ? void 0 : _l.enable) && channel) || openMultiPosts) &&
|
542
542
|
!waterFallData && (React.createElement(NavBack, { data: (_q = (_p = (_o = (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.item) === null || _p === void 0 ? void 0 : _p.props) === null || _q === void 0 ? void 0 : _q.backButton, minusHeight: minusHeight, tagHeight: tagHeight, onClick: () => {
|
543
|
-
var _a, _b
|
543
|
+
var _a, _b;
|
544
|
+
const item = visList === null || visList === void 0 ? void 0 : visList[activeIndex];
|
544
545
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
545
546
|
eventInfo: {
|
546
547
|
eventSubject: 'backMultiPostClick',
|
547
548
|
eventDescription: 'backMultiPostClick',
|
548
|
-
traceInfo: (
|
549
|
+
traceInfo: ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.traceInfo) || ((_b = item === null || item === void 0 ? void 0 : item.product) === null || _b === void 0 ? void 0 : _b.traceInfo) || ''
|
549
550
|
}
|
550
551
|
});
|
551
552
|
location === null || location === void 0 ? void 0 : location.reload();
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import React, { FC, PropsWithChildren } from 'react';
|
2
|
-
import { PageData } from '../Pagebuilder/type';
|
3
2
|
interface IEditorDataContext {
|
4
3
|
sxpPrameter?: {
|
5
4
|
bottomImage: string;
|
@@ -22,7 +21,9 @@ interface IEditorDataContext {
|
|
22
21
|
openConsent?: boolean;
|
23
22
|
setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
|
24
23
|
sxpFontLinks?: any[];
|
25
|
-
utmParameter?:
|
24
|
+
utmParameter?: {
|
25
|
+
channels: string[];
|
26
|
+
};
|
26
27
|
consentPopupCate?: string;
|
27
28
|
setConsentPopupCate?: React.Dispatch<React.SetStateAction<string>>;
|
28
29
|
openMultiPosts?: boolean;
|
@@ -88,6 +88,7 @@ export interface ISxpDataSourceContext {
|
|
88
88
|
channel?: string;
|
89
89
|
eventTimeList?: Array<IEventTimeType>;
|
90
90
|
setEventTimeList?: React.Dispatch<React.SetStateAction<Array<IEventTimeType>>>;
|
91
|
+
multiPostTimeRef?: any;
|
91
92
|
}
|
92
93
|
export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
|
93
94
|
export interface SxpDataSourceProviderProps {
|
@@ -35,6 +35,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
35
35
|
const [videoRef, setVideoRef] = useState(null);
|
36
36
|
const themeTag = useRef();
|
37
37
|
const curTime = useRef();
|
38
|
+
const multiPostTimeRef = useRef();
|
38
39
|
const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
|
39
40
|
const checkCommodityIndexRef = useRef(-1);
|
40
41
|
const popupCurTimeRef = useRef(null);
|
@@ -396,7 +397,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
396
397
|
let pbType;
|
397
398
|
getRecommendVideos()
|
398
399
|
.then((data) => {
|
399
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l
|
400
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
400
401
|
if (data) {
|
401
402
|
const list = getFilterRecList(data);
|
402
403
|
let curData;
|
@@ -439,14 +440,27 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
439
440
|
setCacheRtcList(list);
|
440
441
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
441
442
|
if (channel) {
|
443
|
+
const item = list === null || list === void 0 ? void 0 : list[0];
|
444
|
+
const traceInfo = ((_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.traceInfo) || ((_l = item === null || item === void 0 ? void 0 : item.product) === null || _l === void 0 ? void 0 : _l.traceInfo) || '';
|
442
445
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
443
446
|
eventInfo: {
|
444
447
|
eventSubject: 'multiPostClick',
|
445
448
|
eventDescription: 'multiPostClick',
|
446
|
-
traceInfo
|
449
|
+
traceInfo,
|
447
450
|
branchfeed: channel
|
448
451
|
}
|
449
452
|
});
|
453
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
454
|
+
eventInfo: {
|
455
|
+
eventSubject: 'endMultiPost',
|
456
|
+
eventDescription: 'endMultiPost',
|
457
|
+
contentFormat: 'image',
|
458
|
+
position: '0',
|
459
|
+
traceInfo,
|
460
|
+
nextStep: 'multipostClick',
|
461
|
+
timeOnSite: Math.floor((new Date() - (multiPostTimeRef === null || multiPostTimeRef === void 0 ? void 0 : multiPostTimeRef.current)) / 1000) + ''
|
462
|
+
}
|
463
|
+
});
|
450
464
|
}
|
451
465
|
}
|
452
466
|
})
|
@@ -529,7 +543,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
529
543
|
updateChannel,
|
530
544
|
channel,
|
531
545
|
eventTimeList,
|
532
|
-
setEventTimeList
|
546
|
+
setEventTimeList,
|
547
|
+
multiPostTimeRef
|
533
548
|
} }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
|
534
549
|
rtcList,
|
535
550
|
mutateLike: bffMutateLike,
|
package/es/core/utils/tool.d.ts
CHANGED
@@ -12,5 +12,4 @@ 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
|
-
|
16
|
-
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, getSpliceQueryUrl };
|
15
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
|
package/es/core/utils/tool.js
CHANGED
@@ -167,17 +167,4 @@ function getScreenReader() {
|
|
167
167
|
/JAWS/i.test(userAgent) ||
|
168
168
|
/ChromeVox/i.test(userAgent));
|
169
169
|
}
|
170
|
-
|
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 };
|
170
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
|
@@ -5,15 +5,13 @@ 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';
|
9
8
|
const MultiPosts = (_a) => {
|
10
9
|
var _b, _c;
|
11
10
|
var { bgImgUrl, style, recData } = _a, props = __rest(_a, ["bgImgUrl", "style", "recData"]);
|
12
|
-
const { bffEventReport, curTime, updateChannel } = useSxpDataSource();
|
11
|
+
const { bffEventReport, curTime, updateChannel, multiPostTimeRef } = useSxpDataSource();
|
13
12
|
const { isActive } = useSwiperSlide() || {};
|
14
13
|
const initRef = useRef(false);
|
15
|
-
const
|
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 : '';
|
14
|
+
const traceInfo = ((_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) || ((_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.traceInfo) || '';
|
17
15
|
const getPropsVal = useCallback((index, str) => {
|
18
16
|
try {
|
19
17
|
return new Function('props', 'str', `if (str) {
|
@@ -30,7 +28,6 @@ const MultiPosts = (_a) => {
|
|
30
28
|
if (!value)
|
31
29
|
return;
|
32
30
|
if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
|
33
|
-
endMultiPost('multipostClick');
|
34
31
|
updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
|
35
32
|
curTime.current = new Date();
|
36
33
|
}
|
@@ -39,12 +36,12 @@ const MultiPosts = (_a) => {
|
|
39
36
|
}
|
40
37
|
}, [props]);
|
41
38
|
const startMultiPost = useCallback(() => {
|
42
|
-
|
39
|
+
multiPostTimeRef.current = new Date();
|
43
40
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
44
41
|
eventInfo: {
|
45
42
|
eventSubject: 'startMultiPost',
|
46
43
|
eventDescription: 'startMultiPost',
|
47
|
-
contentFormat: '
|
44
|
+
contentFormat: 'image',
|
48
45
|
position: '0',
|
49
46
|
traceInfo
|
50
47
|
}
|
@@ -56,11 +53,11 @@ const MultiPosts = (_a) => {
|
|
56
53
|
eventInfo: {
|
57
54
|
eventSubject: 'endMultiPost',
|
58
55
|
eventDescription: 'endMultiPost',
|
59
|
-
contentFormat: '
|
56
|
+
contentFormat: 'image',
|
60
57
|
position: '0',
|
61
58
|
traceInfo,
|
62
59
|
nextStep: nextStep || 'others',
|
63
|
-
timeOnSite: Math.floor((new Date() - (
|
60
|
+
timeOnSite: Math.floor((new Date() - (multiPostTimeRef === null || multiPostTimeRef === void 0 ? void 0 : multiPostTimeRef.current)) / 1000) + ''
|
64
61
|
}
|
65
62
|
});
|
66
63
|
}, []);
|
@@ -87,7 +84,7 @@ const MultiPosts = (_a) => {
|
|
87
84
|
}, [isActive]);
|
88
85
|
return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
|
89
86
|
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:
|
87
|
+
React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
|
91
88
|
})));
|
92
89
|
};
|
93
90
|
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 {
|
7
|
+
import { 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:
|
68
|
+
React.createElement("img", { src: (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,7 +4,6 @@ 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");
|
8
7
|
const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
|
9
8
|
const [show, setShow] = (0, react_1.useState)(true);
|
10
9
|
const { schema: { sxpPageConf } } = (0, hooks_1.useEditor)();
|
@@ -18,6 +17,6 @@ const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
|
|
18
17
|
return show ? 'pb-fadeIn' : 'pb-fadeOut';
|
19
18
|
}, [show]);
|
20
19
|
return (react_1.default.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
|
21
|
-
react_1.default.createElement("img", { src:
|
20
|
+
react_1.default.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
|
22
21
|
};
|
23
22
|
exports.default = FingerSwipeTip;
|
@@ -2,24 +2,22 @@
|
|
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");
|
6
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
7
6
|
const FormatImage = (0, react_1.forwardRef)((props, ref) => {
|
8
7
|
const { src, onLoad, style, className, loading, alt = 'image' } = props;
|
9
|
-
const
|
10
|
-
const [imgSrc, setImgSrc] = (0, react_1.useState)(querySrc);
|
8
|
+
const [imgSrc, setImgSrc] = (0, react_1.useState)(src);
|
11
9
|
const imgRef = (0, react_1.useRef)(null);
|
12
10
|
const [visible, setVisible] = (0, react_1.useState)(false);
|
13
11
|
(0, react_1.useImperativeHandle)(ref, () => ({
|
14
12
|
setSrc: (v) => {
|
15
13
|
if (v)
|
16
|
-
setImgSrc(
|
14
|
+
setImgSrc(v);
|
17
15
|
}
|
18
16
|
}));
|
19
17
|
(0, react_1.useEffect)(() => {
|
20
|
-
if (
|
21
|
-
setImgSrc(
|
22
|
-
}, [
|
18
|
+
if (src)
|
19
|
+
setImgSrc(src);
|
20
|
+
}, [src]);
|
23
21
|
(0, react_1.useEffect)(() => {
|
24
22
|
const onShow = () => {
|
25
23
|
if (src && !visible && imgRef.current) {
|
@@ -36,8 +34,8 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
|
|
36
34
|
!visible && !imgSrc && react_1.default.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
|
37
35
|
(imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
|
38
36
|
react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
|
39
|
-
react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}
|
40
|
-
react_1.default.createElement("source", { type: 'image/jpeg', 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` }),
|
41
39
|
react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
|
42
40
|
setVisible(true);
|
43
41
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
|
@@ -5,7 +5,6 @@ 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");
|
9
8
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
10
9
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
11
10
|
const LikeButton = (_a) => {
|
@@ -75,6 +74,6 @@ const LikeButton = (_a) => {
|
|
75
74
|
}
|
76
75
|
}), 200);
|
77
76
|
return (react_1.default.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
|
78
|
-
react_1.default.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src:
|
77
|
+
react_1.default.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
|
79
78
|
};
|
80
79
|
exports.default = (0, react_1.memo)(LikeButton);
|
@@ -5,7 +5,6 @@ const lodash_1 = require("lodash");
|
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
6
6
|
const ReactDOM = tslib_1.__importStar(require("react-dom"));
|
7
7
|
const hooks_1 = require("../../../../core/hooks");
|
8
|
-
const tool_1 = require("../../../../core/utils/tool");
|
9
8
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
10
9
|
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
|
11
10
|
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;
|
@@ -180,6 +179,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
180
179
|
}
|
181
180
|
})), child()),
|
182
181
|
react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
|
183
|
-
react_1.default.createElement("img", { src: (
|
182
|
+
react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
|
184
183
|
};
|
185
184
|
exports.default = (0, react_1.memo)(Modal);
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
5
|
const left_png_1 = tslib_1.__importDefault(require("./left.png"));
|
6
|
-
const tool_1 = require("../../../core/utils/tool");
|
7
6
|
const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
|
8
7
|
var _a, _b, _c, _d, _e;
|
9
8
|
return (react_1.default.createElement("button", { style: {
|
@@ -15,6 +14,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
|
|
15
14
|
padding: 0,
|
16
15
|
background: 'transparent'
|
17
16
|
}, role: 'button', "aria-label": 'back button', onClick: onClick },
|
18
|
-
react_1.default.createElement("img", { src: (
|
17
|
+
react_1.default.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || left_png_1.default, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
|
19
18
|
};
|
20
19
|
exports.default = (0, react_1.memo)(NavBack);
|
@@ -12,7 +12,7 @@ const Nudge = ({ nudge }) => {
|
|
12
12
|
backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
|
13
13
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
14
14
|
} },
|
15
|
-
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (react_1.default.createElement("img", { src:
|
15
|
+
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (react_1.default.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
|
16
16
|
react_1.default.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: {
|
17
17
|
__html: (0, tool_1.setFontForText)(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
|
18
18
|
} })))));
|
@@ -1,7 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
const tslib_1 = require("tslib");
|
4
|
-
const tool_1 = require("../../../../core/utils/tool");
|
5
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
6
5
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
7
6
|
const [isTrue, setIsTure] = (0, react_1.useState)(defaultValue);
|
@@ -15,6 +14,6 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
|
|
15
14
|
setIsTure(defaultValue);
|
16
15
|
}, [defaultValue]);
|
17
16
|
return (react_1.default.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
|
18
|
-
react_1.default.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src:
|
17
|
+
react_1.default.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
|
19
18
|
};
|
20
19
|
exports.default = (0, react_1.memo)(ToggleButton);
|
@@ -9,7 +9,6 @@ const hooks_1 = require("../../../../core/hooks");
|
|
9
9
|
const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
|
10
10
|
const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
|
11
11
|
const VideoPlayer_1 = require("./VideoPlayer");
|
12
|
-
const tool_1 = require("../../../../core/utils/tool");
|
13
12
|
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
14
13
|
const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
|
15
14
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
|
@@ -196,10 +195,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
196
195
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
197
196
|
if (!isActive)
|
198
197
|
return;
|
199
|
-
|
198
|
+
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
|
200
199
|
if (!videoSrc)
|
201
200
|
return;
|
202
|
-
videoSrc = (0, tool_1.getSpliceQueryUrl)(videoSrc);
|
203
201
|
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
204
202
|
if (!videoPlayerWrapperNode)
|
205
203
|
return;
|