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.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-17 13:49:29
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-17 19:03:01
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 [isLoad, setIsLoad] = useState(false);
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 && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
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
- if (!isLoad) {
12012
- setIsLoad(true);
12013
- }
12014
- }, [bffEventReport, data, index, isLoad]);
12013
+ }, [bffEventReport, data, index, isFirstPlay]);
12015
12014
  const handleLoadedMetadata = useCallback(() => {
12016
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
12017
- const item = data[index];
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, _f, _g, _h, _j;
12046
- if (!isLoad)
12018
+ var _a, _b, _c, _d, _e;
12019
+ if (!isLoadFinish)
12047
12020
  return;
12048
- data[index];
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
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
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
- (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
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
- (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
12037
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
12068
12038
  }
12069
12039
  else {
12070
- (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
12040
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
12071
12041
  }
12072
12042
  setIsPauseVideo(!isPause);
12073
12043
  break;
12074
12044
  }
12075
- }, [data, index, isLoad]);
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, _c;
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
- else {
12131
- videoRef.current.play();
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
- }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
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
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
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", { 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 }));
12173
- }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
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 10:30:17
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, width } = props;
12255
- const [blur, setBlur] = useState(false);
12256
- const onLoad = (img) => {
12257
- const aspectRatio = img.naturalHeight / img.naturalWidth;
12258
- const targetAspectRatio = 16 / 9;
12259
- const tolerance = 0.05; // 允许的宽高比误差范围
12260
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
12261
- setBlur(true);
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
- }, onLoad: onLoad }),
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: 'translateY(-50%)',
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-17 18:52:45
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: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
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, width: width, height: height })));
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-11 18:14:05
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 09:43:19
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;