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.
Files changed (35) hide show
  1. package/dist/index.cjs +104 -96
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +104 -96
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +104 -96
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  14. package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts +3 -2
  15. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +13 -13
  16. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
  17. package/es/core/components/SxpPageRender/PictureGroup/index.js +4 -3
  18. package/es/core/components/SxpPageRender/RenderCard.js +1 -1
  19. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
  20. package/es/core/components/SxpPageRender/VideoWidget/index.js +77 -67
  21. package/es/core/components/SxpPageRender/index.d.ts +8 -1
  22. package/es/core/components/SxpPageRender/index.js +3 -3
  23. package/es/materials/sxp/template/components/Img.js +1 -1
  24. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  25. package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts +3 -2
  26. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +12 -12
  27. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
  28. package/lib/core/components/SxpPageRender/PictureGroup/index.js +4 -3
  29. package/lib/core/components/SxpPageRender/RenderCard.js +1 -1
  30. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
  31. package/lib/core/components/SxpPageRender/VideoWidget/index.js +77 -67
  32. package/lib/core/components/SxpPageRender/index.d.ts +8 -1
  33. package/lib/core/components/SxpPageRender/index.js +3 -3
  34. package/lib/materials/sxp/template/components/Img.js +1 -1
  35. 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-17 13:49:29
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-17 19:03:01
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 [isLoad, setIsLoad] = React.useState(false);
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 && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
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
- if (!isLoad) {
12035
- setIsLoad(true);
12036
- }
12037
- }, [bffEventReport, data, index, isLoad]);
12036
+ }, [bffEventReport, data, index, isFirstPlay]);
12038
12037
  const handleLoadedMetadata = React.useCallback(() => {
12039
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
12040
- const item = data[index];
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, _f, _g, _h, _j;
12069
- if (!isLoad)
12041
+ var _a, _b, _c, _d, _e;
12042
+ if (!isLoadFinish)
12070
12043
  return;
12071
- data[index];
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
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
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
- (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
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
- (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
12060
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
12091
12061
  }
12092
12062
  else {
12093
- (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
12063
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
12094
12064
  }
12095
12065
  setIsPauseVideo(!isPause);
12096
12066
  break;
12097
12067
  }
12098
- }, [data, index, isLoad]);
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, _c;
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
- else {
12154
- videoRef.current.play();
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
- }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
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
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
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", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
12196
- }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
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 10:30:17
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, width } = props;
12278
- const [blur, setBlur] = React.useState(false);
12279
- const onLoad = (img) => {
12280
- const aspectRatio = img.naturalHeight / img.naturalWidth;
12281
- const targetAspectRatio = 16 / 9;
12282
- const tolerance = 0.05; // 允许的宽高比误差范围
12283
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
12284
- setBlur(true);
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
- }, onLoad: onLoad }),
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: 'translateY(-50%)',
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-17 18:52:45
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: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
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, width: width, height: height })));
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-11 18:14:05
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 09:43:19
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;