pb-sxp-ui 1.0.23 → 1.0.25
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 +104 -96
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +104 -96
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +104 -96
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
- package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts +3 -2
- package/es/core/components/SxpPageRender/PictureGroup/Picture.js +13 -13
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +4 -3
- package/es/core/components/SxpPageRender/RenderCard.js +1 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/VideoWidget/index.js +77 -67
- package/es/core/components/SxpPageRender/index.d.ts +8 -1
- package/es/core/components/SxpPageRender/index.js +3 -3
- package/es/materials/sxp/template/components/Img.js +1 -1
- package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
- package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts +3 -2
- package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +12 -12
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +4 -3
- package/lib/core/components/SxpPageRender/RenderCard.js +1 -1
- package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +77 -67
- package/lib/core/components/SxpPageRender/index.d.ts +8 -1
- package/lib/core/components/SxpPageRender/index.js +3 -3
- package/lib/materials/sxp/template/components/Img.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -8248,7 +8248,7 @@ var Modal$1 = React.memo(Modal);
|
|
8248
8248
|
* @Author: binruan@chatlabs.com
|
8249
8249
|
* @Date: 2023-12-26 16:11:34
|
8250
8250
|
* @LastEditors: binruan@chatlabs.com
|
8251
|
-
* @LastEditTime: 2024-04-
|
8251
|
+
* @LastEditTime: 2024-04-18 14:33:15
|
8252
8252
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
|
8253
8253
|
*
|
8254
8254
|
*/
|
@@ -8293,7 +8293,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
8293
8293
|
}
|
8294
8294
|
multiRowCopy.current.style.display = 'none';
|
8295
8295
|
}, [isPost]);
|
8296
|
-
return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
|
8296
|
+
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
8297
8297
|
React.createElement("div", { ref: multiRow, style: {
|
8298
8298
|
overflow: 'hidden',
|
8299
8299
|
WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
|
@@ -9702,7 +9702,7 @@ var Scroll$1 = React.memo(Scroll);
|
|
9702
9702
|
* @Author: binruan@chatlabs.com
|
9703
9703
|
* @Date: 2024-01-16 14:50:13
|
9704
9704
|
* @LastEditors: binruan@chatlabs.com
|
9705
|
-
* @LastEditTime: 2024-04-
|
9705
|
+
* @LastEditTime: 2024-04-18 12:32:49
|
9706
9706
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
|
9707
9707
|
*
|
9708
9708
|
*/
|
@@ -9718,7 +9718,7 @@ const Img = ({ src, rec, item, index }) => {
|
|
9718
9718
|
}, rec, item, index);
|
9719
9719
|
}
|
9720
9720
|
}, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
|
9721
|
-
return (React.createElement("div", { ref: ref, hidden: !src },
|
9721
|
+
return (React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
|
9722
9722
|
React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
|
9723
9723
|
};
|
9724
9724
|
var Img$1 = React.memo(Img);
|
@@ -11989,12 +11989,13 @@ var SXP_EVENT_TYPE;
|
|
11989
11989
|
SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
|
11990
11990
|
})(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
|
11991
11991
|
|
11992
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
11992
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
|
11993
11993
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
11994
11994
|
const videoRef = React.useRef(null);
|
11995
11995
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
11996
11996
|
const videoStartTime = React.useRef(0);
|
11997
|
-
const [
|
11997
|
+
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
11998
|
+
const [isFirstPlay, setIsFirstPlay] = React.useState(true);
|
11998
11999
|
const { isActive } = useSwiperSlide();
|
11999
12000
|
React.useEffect(() => {
|
12000
12001
|
if (!videoRef.current)
|
@@ -12010,11 +12011,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12010
12011
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
12011
12012
|
setIsPauseVideo(false);
|
12012
12013
|
const item = data[index];
|
12013
|
-
if (item &&
|
12014
|
+
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
12014
12015
|
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
12015
12016
|
const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
12016
12017
|
const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
12017
|
-
const playType = '1';
|
12018
|
+
const playType = isFirstPlay ? '0' : '1';
|
12018
12019
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
12019
12020
|
eventInfo: {
|
12020
12021
|
eventSubject: 'playVideo',
|
@@ -12030,72 +12031,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12030
12031
|
traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
12031
12032
|
}
|
12032
12033
|
});
|
12034
|
+
setIsFirstPlay(false);
|
12033
12035
|
}
|
12034
|
-
|
12035
|
-
setIsLoad(true);
|
12036
|
-
}
|
12037
|
-
}, [bffEventReport, data, index, isLoad]);
|
12036
|
+
}, [bffEventReport, data, index, isFirstPlay]);
|
12038
12037
|
const handleLoadedMetadata = React.useCallback(() => {
|
12039
|
-
|
12040
|
-
|
12041
|
-
if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
12042
|
-
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
12043
|
-
const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
12044
|
-
const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
12045
|
-
const playType = '0';
|
12046
|
-
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
12047
|
-
eventInfo: {
|
12048
|
-
eventSubject: 'playVideo',
|
12049
|
-
eventDescription: 'User played the video',
|
12050
|
-
contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
12051
|
-
contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
12052
|
-
playType,
|
12053
|
-
startTime: videoCurrentTime,
|
12054
|
-
videoDuration,
|
12055
|
-
contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
12056
|
-
position: index + '',
|
12057
|
-
contentFormat: 'video',
|
12058
|
-
traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
12059
|
-
}
|
12060
|
-
});
|
12061
|
-
}
|
12062
|
-
setTimeout(() => {
|
12063
|
-
var _a;
|
12064
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
12065
|
-
}, 0);
|
12066
|
-
}, [index, bffEventReport, data, isLoad]);
|
12038
|
+
setIsLoadFinish(true);
|
12039
|
+
}, []);
|
12067
12040
|
const handleClickVideo = React.useCallback((type) => () => {
|
12068
|
-
var _a, _b, _c, _d, _e
|
12069
|
-
if (!
|
12041
|
+
var _a, _b, _c, _d, _e;
|
12042
|
+
if (!isLoadFinish)
|
12070
12043
|
return;
|
12071
|
-
|
12072
|
-
((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
12073
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
12074
|
-
const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
|
12044
|
+
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
12075
12045
|
switch (type) {
|
12076
12046
|
case 'start':
|
12077
12047
|
if (!isPause)
|
12078
12048
|
return;
|
12079
|
-
(
|
12049
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
12080
12050
|
setIsPauseVideo(false);
|
12081
12051
|
break;
|
12082
12052
|
case 'pause':
|
12083
12053
|
if (isPause)
|
12084
12054
|
return;
|
12085
|
-
(
|
12055
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
12086
12056
|
setIsPauseVideo(true);
|
12087
12057
|
break;
|
12088
12058
|
default:
|
12089
12059
|
if (isPause) {
|
12090
|
-
(
|
12060
|
+
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
12091
12061
|
}
|
12092
12062
|
else {
|
12093
|
-
(
|
12063
|
+
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
12094
12064
|
}
|
12095
12065
|
setIsPauseVideo(!isPause);
|
12096
12066
|
break;
|
12097
12067
|
}
|
12098
|
-
}, [
|
12068
|
+
}, [isLoadFinish]);
|
12099
12069
|
const onPause = React.useCallback(() => {
|
12100
12070
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
12101
12071
|
const item = data[index];
|
@@ -12121,16 +12091,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12121
12091
|
}
|
12122
12092
|
}, [data, index, bffEventReport]);
|
12123
12093
|
React.useEffect(() => {
|
12124
|
-
var _a, _b
|
12125
|
-
if (data.length <= 0)
|
12126
|
-
return;
|
12094
|
+
var _a, _b;
|
12127
12095
|
if (!videoRef.current)
|
12128
12096
|
return;
|
12129
12097
|
setIsPauseVideo(false);
|
12130
|
-
if (!isActive) {
|
12131
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
12132
|
-
return;
|
12133
|
-
}
|
12134
12098
|
if (!videoRef.current.src) {
|
12135
12099
|
const videoSrc = rec.video.url;
|
12136
12100
|
// if (videoSrc.includes('.m3u8')) {
|
@@ -12150,25 +12114,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12150
12114
|
videoRef.current.setAttribute('x5-playsinline', 'true');
|
12151
12115
|
videoRef.current.setAttribute('webkit-playsinline', 'true');
|
12152
12116
|
}
|
12153
|
-
|
12154
|
-
|
12155
|
-
}
|
12156
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
|
12157
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
|
12117
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
|
12118
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
|
12158
12119
|
return () => {
|
12159
12120
|
var _a, _b;
|
12160
12121
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
|
12161
12122
|
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
|
12162
12123
|
};
|
12163
|
-
}, [
|
12124
|
+
}, [handleLoadedMetadata, handlePlaying, rec.video]);
|
12125
|
+
React.useEffect(() => {
|
12126
|
+
var _a;
|
12127
|
+
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
12128
|
+
return;
|
12129
|
+
if (isActive) {
|
12130
|
+
videoRef.current.play();
|
12131
|
+
}
|
12132
|
+
else {
|
12133
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
12134
|
+
}
|
12135
|
+
}, [isActive, isLoadFinish]);
|
12164
12136
|
/*
|
12165
12137
|
打开/关闭hashtag暂停/播放视频
|
12166
12138
|
*/
|
12167
12139
|
React.useEffect(() => {
|
12168
12140
|
var _a, _b, _c;
|
12169
|
-
|
12170
|
-
if (!isActive)
|
12141
|
+
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
12171
12142
|
return;
|
12143
|
+
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
12172
12144
|
if (!isPause && openHashtag) {
|
12173
12145
|
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
|
12174
12146
|
}
|
@@ -12189,11 +12161,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12189
12161
|
};
|
12190
12162
|
}, [handleClickVideo, isActive]);
|
12191
12163
|
const renderPoster = React.useMemo(() => {
|
12192
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
|
12164
|
+
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
12193
12165
|
return null;
|
12194
12166
|
}
|
12195
|
-
return (React.createElement("img", {
|
12196
|
-
}, [
|
12167
|
+
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
|
12168
|
+
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
12197
12169
|
React.useEffect(() => {
|
12198
12170
|
const handleBeforeUnload = () => {
|
12199
12171
|
var _a, _b;
|
@@ -12206,17 +12178,54 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12206
12178
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
12207
12179
|
};
|
12208
12180
|
}, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
|
12181
|
+
const blur = React.useMemo(() => {
|
12182
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
12183
|
+
}, [videoPostConfig]);
|
12184
|
+
const translateY = React.useMemo(() => {
|
12185
|
+
var _a;
|
12186
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
12187
|
+
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
|
12188
|
+
: 'translateY(-50%)';
|
12189
|
+
}, [videoPostConfig]);
|
12209
12190
|
if (!rec.video) {
|
12210
12191
|
return null;
|
12211
12192
|
}
|
12212
|
-
return (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
|
12193
|
+
return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
|
12194
|
+
position: 'relative',
|
12195
|
+
width: '100%',
|
12196
|
+
height
|
12197
|
+
} },
|
12198
|
+
React.createElement(FormatImage$1, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
|
12199
|
+
height: '100%',
|
12200
|
+
width: '100%',
|
12201
|
+
objectFit: 'cover',
|
12202
|
+
filter: blur ? 'blur(10px)' : 'none',
|
12203
|
+
transform: blur ? 'scale(1.2)' : 'none'
|
12204
|
+
} }),
|
12205
|
+
React.createElement("div", { style: {
|
12206
|
+
position: 'absolute',
|
12207
|
+
width: '100%',
|
12208
|
+
height: 'auto',
|
12209
|
+
top: '50%',
|
12210
|
+
transform: translateY,
|
12211
|
+
left: 0,
|
12212
|
+
right: 0
|
12213
|
+
} },
|
12214
|
+
React.createElement("div", { style: { position: 'relative' } },
|
12215
|
+
React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
|
12216
|
+
width: '100%',
|
12217
|
+
height: 'auto',
|
12218
|
+
objectFit: 'contain'
|
12219
|
+
} }),
|
12220
|
+
renderPoster,
|
12221
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
|
12213
12222
|
position: 'relative',
|
12214
12223
|
width: '100%',
|
12215
12224
|
height
|
12216
12225
|
} },
|
12217
12226
|
React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
|
12218
12227
|
renderPoster,
|
12219
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
|
12228
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
|
12220
12229
|
};
|
12221
12230
|
var VideoWidget$1 = React.memo(VideoWidget);
|
12222
12231
|
|
@@ -12269,21 +12278,21 @@ const FingerSwipeTip = ({ imageUrl }) => {
|
|
12269
12278
|
* @Author: binruan@chatlabs.com
|
12270
12279
|
* @Date: 2024-03-20 10:27:31
|
12271
12280
|
* @LastEditors: binruan@chatlabs.com
|
12272
|
-
* @LastEditTime: 2024-04-18
|
12281
|
+
* @LastEditTime: 2024-04-18 19:27:35
|
12273
12282
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
|
12274
12283
|
*
|
12275
12284
|
*/
|
12276
12285
|
const Picture = (props) => {
|
12277
|
-
const { src, height,
|
12278
|
-
const
|
12279
|
-
|
12280
|
-
|
12281
|
-
|
12282
|
-
|
12283
|
-
|
12284
|
-
|
12285
|
-
|
12286
|
-
};
|
12286
|
+
const { src, height, imgUrlsPostConfig } = props;
|
12287
|
+
const blur = React.useMemo(() => {
|
12288
|
+
return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
|
12289
|
+
}, [imgUrlsPostConfig]);
|
12290
|
+
const translateY = React.useMemo(() => {
|
12291
|
+
var _a;
|
12292
|
+
return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
|
12293
|
+
? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
|
12294
|
+
: 'translateY(-50%)';
|
12295
|
+
}, [imgUrlsPostConfig]);
|
12287
12296
|
return (React.createElement("div", { style: {
|
12288
12297
|
overflow: 'hidden',
|
12289
12298
|
height,
|
@@ -12296,13 +12305,13 @@ const Picture = (props) => {
|
|
12296
12305
|
objectFit: 'cover',
|
12297
12306
|
filter: blur ? 'blur(10px)' : 'none',
|
12298
12307
|
transform: blur ? 'scale(1.2)' : 'none'
|
12299
|
-
}
|
12308
|
+
} }),
|
12300
12309
|
blur && (React.createElement(FormatImage$1, { src: src, style: {
|
12301
12310
|
width: '100%',
|
12302
12311
|
objectFit: 'contain',
|
12303
12312
|
position: 'absolute',
|
12304
12313
|
top: '50%',
|
12305
|
-
transform:
|
12314
|
+
transform: translateY,
|
12306
12315
|
left: 0,
|
12307
12316
|
right: 0
|
12308
12317
|
} }))));
|
@@ -12312,10 +12321,11 @@ const Picture = (props) => {
|
|
12312
12321
|
* @Author: lewinlu@chatlabs.com
|
12313
12322
|
* @Date: 2024-01-03 14:39:09
|
12314
12323
|
* @LastEditors: binruan@chatlabs.com
|
12315
|
-
* @LastEditTime: 2024-04-
|
12324
|
+
* @LastEditTime: 2024-04-18 19:56:22
|
12316
12325
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
|
12317
12326
|
*/
|
12318
|
-
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
|
12327
|
+
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
12328
|
+
var _a;
|
12319
12329
|
const ref = React.useRef();
|
12320
12330
|
const { isActive } = useSwiperSlide();
|
12321
12331
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -12338,9 +12348,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
|
|
12338
12348
|
// if (!isActive) {
|
12339
12349
|
// return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
|
12340
12350
|
// }
|
12341
|
-
return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay:
|
12351
|
+
return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
|
12342
12352
|
return (React.createElement(SwiperSlide, { key: url },
|
12343
|
-
React.createElement(Picture, { src: url,
|
12353
|
+
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
12344
12354
|
})));
|
12345
12355
|
};
|
12346
12356
|
var PictureGroup$1 = React.memo(PictureGroup);
|
@@ -12454,7 +12464,7 @@ function withBindDataSource(Component) {
|
|
12454
12464
|
* @Author: binruan@chatlabs.com
|
12455
12465
|
* @Date: 2023-12-26 16:11:34
|
12456
12466
|
* @LastEditors: binruan@chatlabs.com
|
12457
|
-
* @LastEditTime: 2024-04-
|
12467
|
+
* @LastEditTime: 2024-04-18 14:36:53
|
12458
12468
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
12459
12469
|
*
|
12460
12470
|
*/
|
@@ -12488,7 +12498,7 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
|
|
12488
12498
|
const Component = withBindDataSource(t);
|
12489
12499
|
const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
|
12490
12500
|
const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
|
12491
|
-
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
|
12501
|
+
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
|
12492
12502
|
}
|
12493
12503
|
else {
|
12494
12504
|
return null;
|
@@ -12522,7 +12532,7 @@ const Nudge = ({ nudge }) => {
|
|
12522
12532
|
* @Author: binruan@chatlabs.com
|
12523
12533
|
* @Date: 2024-01-15 19:03:09
|
12524
12534
|
* @LastEditors: binruan@chatlabs.com
|
12525
|
-
* @LastEditTime: 2024-04-18
|
12535
|
+
* @LastEditTime: 2024-04-18 19:27:03
|
12526
12536
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
12527
12537
|
*
|
12528
12538
|
*/
|
@@ -12683,10 +12693,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
12683
12693
|
const renderContent = React.useCallback((rec, index) => {
|
12684
12694
|
var _a, _b, _c, _d;
|
12685
12695
|
if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
12686
|
-
return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
|
12696
|
+
return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
|
12687
12697
|
}
|
12688
12698
|
if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
12689
|
-
return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
|
12699
|
+
return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
12690
12700
|
}
|
12691
12701
|
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
12692
12702
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
@@ -12723,9 +12733,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
12723
12733
|
React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
12724
12734
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
|
12725
12735
|
React.createElement("div", null,
|
12726
|
-
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign({}, descStyle
|
12727
|
-
// textShadow: globalConfig?.isOpenTextShadow ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none'
|
12728
|
-
), onChange: onExpandableChange }),
|
12736
|
+
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
12729
12737
|
React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
|
12730
12738
|
}
|
12731
12739
|
return null;
|