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.js
CHANGED
@@ -8225,7 +8225,7 @@ var Modal$1 = memo(Modal);
|
|
8225
8225
|
* @Author: binruan@chatlabs.com
|
8226
8226
|
* @Date: 2023-12-26 16:11:34
|
8227
8227
|
* @LastEditors: binruan@chatlabs.com
|
8228
|
-
* @LastEditTime: 2024-04-
|
8228
|
+
* @LastEditTime: 2024-04-18 14:33:15
|
8229
8229
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
|
8230
8230
|
*
|
8231
8231
|
*/
|
@@ -8270,7 +8270,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
8270
8270
|
}
|
8271
8271
|
multiRowCopy.current.style.display = 'none';
|
8272
8272
|
}, [isPost]);
|
8273
|
-
return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
|
8273
|
+
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
8274
8274
|
React.createElement("div", { ref: multiRow, style: {
|
8275
8275
|
overflow: 'hidden',
|
8276
8276
|
WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
|
@@ -9679,7 +9679,7 @@ var Scroll$1 = memo(Scroll);
|
|
9679
9679
|
* @Author: binruan@chatlabs.com
|
9680
9680
|
* @Date: 2024-01-16 14:50:13
|
9681
9681
|
* @LastEditors: binruan@chatlabs.com
|
9682
|
-
* @LastEditTime: 2024-04-
|
9682
|
+
* @LastEditTime: 2024-04-18 12:32:49
|
9683
9683
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
|
9684
9684
|
*
|
9685
9685
|
*/
|
@@ -9695,7 +9695,7 @@ const Img = ({ src, rec, item, index }) => {
|
|
9695
9695
|
}, rec, item, index);
|
9696
9696
|
}
|
9697
9697
|
}, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
|
9698
|
-
return (React.createElement("div", { ref: ref, hidden: !src },
|
9698
|
+
return (React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
|
9699
9699
|
React.createElement(FormatImage$1, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
|
9700
9700
|
};
|
9701
9701
|
var Img$1 = memo(Img);
|
@@ -11966,12 +11966,13 @@ var SXP_EVENT_TYPE;
|
|
11966
11966
|
SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
|
11967
11967
|
})(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
|
11968
11968
|
|
11969
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
11969
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
|
11970
11970
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
11971
11971
|
const videoRef = useRef(null);
|
11972
11972
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
11973
11973
|
const videoStartTime = useRef(0);
|
11974
|
-
const [
|
11974
|
+
const [isLoadFinish, setIsLoadFinish] = useState(false);
|
11975
|
+
const [isFirstPlay, setIsFirstPlay] = useState(true);
|
11975
11976
|
const { isActive } = useSwiperSlide();
|
11976
11977
|
useEffect(() => {
|
11977
11978
|
if (!videoRef.current)
|
@@ -11987,11 +11988,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
11987
11988
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
11988
11989
|
setIsPauseVideo(false);
|
11989
11990
|
const item = data[index];
|
11990
|
-
if (item &&
|
11991
|
+
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
11991
11992
|
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
11992
11993
|
const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
11993
11994
|
const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
11994
|
-
const playType = '1';
|
11995
|
+
const playType = isFirstPlay ? '0' : '1';
|
11995
11996
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
11996
11997
|
eventInfo: {
|
11997
11998
|
eventSubject: 'playVideo',
|
@@ -12007,72 +12008,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12007
12008
|
traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
12008
12009
|
}
|
12009
12010
|
});
|
12011
|
+
setIsFirstPlay(false);
|
12010
12012
|
}
|
12011
|
-
|
12012
|
-
setIsLoad(true);
|
12013
|
-
}
|
12014
|
-
}, [bffEventReport, data, index, isLoad]);
|
12013
|
+
}, [bffEventReport, data, index, isFirstPlay]);
|
12015
12014
|
const handleLoadedMetadata = useCallback(() => {
|
12016
|
-
|
12017
|
-
|
12018
|
-
if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
12019
|
-
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
12020
|
-
const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
12021
|
-
const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
12022
|
-
const playType = '0';
|
12023
|
-
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
12024
|
-
eventInfo: {
|
12025
|
-
eventSubject: 'playVideo',
|
12026
|
-
eventDescription: 'User played the video',
|
12027
|
-
contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
12028
|
-
contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
12029
|
-
playType,
|
12030
|
-
startTime: videoCurrentTime,
|
12031
|
-
videoDuration,
|
12032
|
-
contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
12033
|
-
position: index + '',
|
12034
|
-
contentFormat: 'video',
|
12035
|
-
traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
12036
|
-
}
|
12037
|
-
});
|
12038
|
-
}
|
12039
|
-
setTimeout(() => {
|
12040
|
-
var _a;
|
12041
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
12042
|
-
}, 0);
|
12043
|
-
}, [index, bffEventReport, data, isLoad]);
|
12015
|
+
setIsLoadFinish(true);
|
12016
|
+
}, []);
|
12044
12017
|
const handleClickVideo = useCallback((type) => () => {
|
12045
|
-
var _a, _b, _c, _d, _e
|
12046
|
-
if (!
|
12018
|
+
var _a, _b, _c, _d, _e;
|
12019
|
+
if (!isLoadFinish)
|
12047
12020
|
return;
|
12048
|
-
|
12049
|
-
((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
12050
|
-
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
12051
|
-
const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
|
12021
|
+
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
12052
12022
|
switch (type) {
|
12053
12023
|
case 'start':
|
12054
12024
|
if (!isPause)
|
12055
12025
|
return;
|
12056
|
-
(
|
12026
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
12057
12027
|
setIsPauseVideo(false);
|
12058
12028
|
break;
|
12059
12029
|
case 'pause':
|
12060
12030
|
if (isPause)
|
12061
12031
|
return;
|
12062
|
-
(
|
12032
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
12063
12033
|
setIsPauseVideo(true);
|
12064
12034
|
break;
|
12065
12035
|
default:
|
12066
12036
|
if (isPause) {
|
12067
|
-
(
|
12037
|
+
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
12068
12038
|
}
|
12069
12039
|
else {
|
12070
|
-
(
|
12040
|
+
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
12071
12041
|
}
|
12072
12042
|
setIsPauseVideo(!isPause);
|
12073
12043
|
break;
|
12074
12044
|
}
|
12075
|
-
}, [
|
12045
|
+
}, [isLoadFinish]);
|
12076
12046
|
const onPause = useCallback(() => {
|
12077
12047
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
12078
12048
|
const item = data[index];
|
@@ -12098,16 +12068,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12098
12068
|
}
|
12099
12069
|
}, [data, index, bffEventReport]);
|
12100
12070
|
useEffect(() => {
|
12101
|
-
var _a, _b
|
12102
|
-
if (data.length <= 0)
|
12103
|
-
return;
|
12071
|
+
var _a, _b;
|
12104
12072
|
if (!videoRef.current)
|
12105
12073
|
return;
|
12106
12074
|
setIsPauseVideo(false);
|
12107
|
-
if (!isActive) {
|
12108
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
12109
|
-
return;
|
12110
|
-
}
|
12111
12075
|
if (!videoRef.current.src) {
|
12112
12076
|
const videoSrc = rec.video.url;
|
12113
12077
|
// if (videoSrc.includes('.m3u8')) {
|
@@ -12127,25 +12091,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12127
12091
|
videoRef.current.setAttribute('x5-playsinline', 'true');
|
12128
12092
|
videoRef.current.setAttribute('webkit-playsinline', 'true');
|
12129
12093
|
}
|
12130
|
-
|
12131
|
-
|
12132
|
-
}
|
12133
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
|
12134
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
|
12094
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
|
12095
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
|
12135
12096
|
return () => {
|
12136
12097
|
var _a, _b;
|
12137
12098
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
|
12138
12099
|
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
|
12139
12100
|
};
|
12140
|
-
}, [
|
12101
|
+
}, [handleLoadedMetadata, handlePlaying, rec.video]);
|
12102
|
+
useEffect(() => {
|
12103
|
+
var _a;
|
12104
|
+
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
12105
|
+
return;
|
12106
|
+
if (isActive) {
|
12107
|
+
videoRef.current.play();
|
12108
|
+
}
|
12109
|
+
else {
|
12110
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
12111
|
+
}
|
12112
|
+
}, [isActive, isLoadFinish]);
|
12141
12113
|
/*
|
12142
12114
|
打开/关闭hashtag暂停/播放视频
|
12143
12115
|
*/
|
12144
12116
|
useEffect(() => {
|
12145
12117
|
var _a, _b, _c;
|
12146
|
-
|
12147
|
-
if (!isActive)
|
12118
|
+
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
12148
12119
|
return;
|
12120
|
+
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
12149
12121
|
if (!isPause && openHashtag) {
|
12150
12122
|
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
|
12151
12123
|
}
|
@@ -12166,11 +12138,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12166
12138
|
};
|
12167
12139
|
}, [handleClickVideo, isActive]);
|
12168
12140
|
const renderPoster = useMemo(() => {
|
12169
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
|
12141
|
+
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
12170
12142
|
return null;
|
12171
12143
|
}
|
12172
|
-
return (React.createElement("img", {
|
12173
|
-
}, [
|
12144
|
+
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 }));
|
12145
|
+
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
12174
12146
|
useEffect(() => {
|
12175
12147
|
const handleBeforeUnload = () => {
|
12176
12148
|
var _a, _b;
|
@@ -12183,17 +12155,54 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
|
|
12183
12155
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
12184
12156
|
};
|
12185
12157
|
}, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
|
12158
|
+
const blur = useMemo(() => {
|
12159
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
12160
|
+
}, [videoPostConfig]);
|
12161
|
+
const translateY = useMemo(() => {
|
12162
|
+
var _a;
|
12163
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
12164
|
+
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
|
12165
|
+
: 'translateY(-50%)';
|
12166
|
+
}, [videoPostConfig]);
|
12186
12167
|
if (!rec.video) {
|
12187
12168
|
return null;
|
12188
12169
|
}
|
12189
|
-
return (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
|
12170
|
+
return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
|
12171
|
+
position: 'relative',
|
12172
|
+
width: '100%',
|
12173
|
+
height
|
12174
|
+
} },
|
12175
|
+
React.createElement(FormatImage$1, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
|
12176
|
+
height: '100%',
|
12177
|
+
width: '100%',
|
12178
|
+
objectFit: 'cover',
|
12179
|
+
filter: blur ? 'blur(10px)' : 'none',
|
12180
|
+
transform: blur ? 'scale(1.2)' : 'none'
|
12181
|
+
} }),
|
12182
|
+
React.createElement("div", { style: {
|
12183
|
+
position: 'absolute',
|
12184
|
+
width: '100%',
|
12185
|
+
height: 'auto',
|
12186
|
+
top: '50%',
|
12187
|
+
transform: translateY,
|
12188
|
+
left: 0,
|
12189
|
+
right: 0
|
12190
|
+
} },
|
12191
|
+
React.createElement("div", { style: { position: 'relative' } },
|
12192
|
+
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: {
|
12193
|
+
width: '100%',
|
12194
|
+
height: 'auto',
|
12195
|
+
objectFit: 'contain'
|
12196
|
+
} }),
|
12197
|
+
renderPoster,
|
12198
|
+
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: {
|
12190
12199
|
position: 'relative',
|
12191
12200
|
width: '100%',
|
12192
12201
|
height
|
12193
12202
|
} },
|
12194
12203
|
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 }),
|
12195
12204
|
renderPoster,
|
12196
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
|
12205
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
|
12197
12206
|
};
|
12198
12207
|
var VideoWidget$1 = memo(VideoWidget);
|
12199
12208
|
|
@@ -12246,21 +12255,21 @@ const FingerSwipeTip = ({ imageUrl }) => {
|
|
12246
12255
|
* @Author: binruan@chatlabs.com
|
12247
12256
|
* @Date: 2024-03-20 10:27:31
|
12248
12257
|
* @LastEditors: binruan@chatlabs.com
|
12249
|
-
* @LastEditTime: 2024-04-18
|
12258
|
+
* @LastEditTime: 2024-04-18 19:27:35
|
12250
12259
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
|
12251
12260
|
*
|
12252
12261
|
*/
|
12253
12262
|
const Picture = (props) => {
|
12254
|
-
const { src, height,
|
12255
|
-
const
|
12256
|
-
|
12257
|
-
|
12258
|
-
|
12259
|
-
|
12260
|
-
|
12261
|
-
|
12262
|
-
|
12263
|
-
};
|
12263
|
+
const { src, height, imgUrlsPostConfig } = props;
|
12264
|
+
const blur = useMemo(() => {
|
12265
|
+
return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
|
12266
|
+
}, [imgUrlsPostConfig]);
|
12267
|
+
const translateY = useMemo(() => {
|
12268
|
+
var _a;
|
12269
|
+
return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
|
12270
|
+
? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
|
12271
|
+
: 'translateY(-50%)';
|
12272
|
+
}, [imgUrlsPostConfig]);
|
12264
12273
|
return (React.createElement("div", { style: {
|
12265
12274
|
overflow: 'hidden',
|
12266
12275
|
height,
|
@@ -12273,13 +12282,13 @@ const Picture = (props) => {
|
|
12273
12282
|
objectFit: 'cover',
|
12274
12283
|
filter: blur ? 'blur(10px)' : 'none',
|
12275
12284
|
transform: blur ? 'scale(1.2)' : 'none'
|
12276
|
-
}
|
12285
|
+
} }),
|
12277
12286
|
blur && (React.createElement(FormatImage$1, { src: src, style: {
|
12278
12287
|
width: '100%',
|
12279
12288
|
objectFit: 'contain',
|
12280
12289
|
position: 'absolute',
|
12281
12290
|
top: '50%',
|
12282
|
-
transform:
|
12291
|
+
transform: translateY,
|
12283
12292
|
left: 0,
|
12284
12293
|
right: 0
|
12285
12294
|
} }))));
|
@@ -12289,10 +12298,11 @@ const Picture = (props) => {
|
|
12289
12298
|
* @Author: lewinlu@chatlabs.com
|
12290
12299
|
* @Date: 2024-01-03 14:39:09
|
12291
12300
|
* @LastEditors: binruan@chatlabs.com
|
12292
|
-
* @LastEditTime: 2024-04-
|
12301
|
+
* @LastEditTime: 2024-04-18 19:56:22
|
12293
12302
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
|
12294
12303
|
*/
|
12295
|
-
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
|
12304
|
+
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
12305
|
+
var _a;
|
12296
12306
|
const ref = useRef();
|
12297
12307
|
const { isActive } = useSwiperSlide();
|
12298
12308
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -12315,9 +12325,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
|
|
12315
12325
|
// if (!isActive) {
|
12316
12326
|
// return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
|
12317
12327
|
// }
|
12318
|
-
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:
|
12328
|
+
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) => {
|
12319
12329
|
return (React.createElement(SwiperSlide, { key: url },
|
12320
|
-
React.createElement(Picture, { src: url,
|
12330
|
+
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
12321
12331
|
})));
|
12322
12332
|
};
|
12323
12333
|
var PictureGroup$1 = memo(PictureGroup);
|
@@ -12431,7 +12441,7 @@ function withBindDataSource(Component) {
|
|
12431
12441
|
* @Author: binruan@chatlabs.com
|
12432
12442
|
* @Date: 2023-12-26 16:11:34
|
12433
12443
|
* @LastEditors: binruan@chatlabs.com
|
12434
|
-
* @LastEditTime: 2024-04-
|
12444
|
+
* @LastEditTime: 2024-04-18 14:36:53
|
12435
12445
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
12436
12446
|
*
|
12437
12447
|
*/
|
@@ -12465,7 +12475,7 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
|
|
12465
12475
|
const Component = withBindDataSource(t);
|
12466
12476
|
const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
|
12467
12477
|
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';
|
12468
|
-
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 })));
|
12478
|
+
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 })));
|
12469
12479
|
}
|
12470
12480
|
else {
|
12471
12481
|
return null;
|
@@ -12499,7 +12509,7 @@ const Nudge = ({ nudge }) => {
|
|
12499
12509
|
* @Author: binruan@chatlabs.com
|
12500
12510
|
* @Date: 2024-01-15 19:03:09
|
12501
12511
|
* @LastEditors: binruan@chatlabs.com
|
12502
|
-
* @LastEditTime: 2024-04-18
|
12512
|
+
* @LastEditTime: 2024-04-18 19:27:03
|
12503
12513
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
12504
12514
|
*
|
12505
12515
|
*/
|
@@ -12660,10 +12670,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
12660
12670
|
const renderContent = useCallback((rec, index) => {
|
12661
12671
|
var _a, _b, _c, _d;
|
12662
12672
|
if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
12663
|
-
return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
|
12673
|
+
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 }));
|
12664
12674
|
}
|
12665
12675
|
if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
12666
|
-
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 }));
|
12676
|
+
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 }));
|
12667
12677
|
}
|
12668
12678
|
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) {
|
12669
12679
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
@@ -12700,9 +12710,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
12700
12710
|
React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
12701
12711
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
|
12702
12712
|
React.createElement("div", null,
|
12703
|
-
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
|
12704
|
-
// textShadow: globalConfig?.isOpenTextShadow ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none'
|
12705
|
-
), onChange: onExpandableChange }),
|
12713
|
+
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 }),
|
12706
12714
|
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 })))));
|
12707
12715
|
}
|
12708
12716
|
return null;
|