pb-sxp-ui 1.0.24 → 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 (29) hide show
  1. package/dist/index.cjs +61 -23
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +61 -23
  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 +61 -23
  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/PictureGroup/Picture.d.ts +3 -2
  14. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +13 -13
  15. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +4 -3
  17. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
  18. package/es/core/components/SxpPageRender/VideoWidget/index.js +41 -3
  19. package/es/core/components/SxpPageRender/index.d.ts +8 -1
  20. package/es/core/components/SxpPageRender/index.js +2 -2
  21. package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts +3 -2
  22. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +12 -12
  23. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -0
  24. package/lib/core/components/SxpPageRender/PictureGroup/index.js +4 -3
  25. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +2 -0
  26. package/lib/core/components/SxpPageRender/VideoWidget/index.js +41 -3
  27. package/lib/core/components/SxpPageRender/index.d.ts +8 -1
  28. package/lib/core/components/SxpPageRender/index.js +2 -2
  29. package/package.json +1 -1
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
+ import { postConfigType } from '..';
2
3
  interface IPictureProps {
3
4
  src: string;
4
- height: number;
5
- width: number;
5
+ height?: number;
6
+ imgUrlsPostConfig?: postConfigType;
6
7
  }
7
8
  declare const Picture: (props: IPictureProps) => React.JSX.Element;
8
9
  export default Picture;
@@ -1,16 +1,16 @@
1
- import React, { useState } from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import FormatImage from '../FormatImage';
3
3
  const Picture = (props) => {
4
- const { src, height, width } = props;
5
- const [blur, setBlur] = useState(false);
6
- const onLoad = (img) => {
7
- const aspectRatio = img.naturalHeight / img.naturalWidth;
8
- const targetAspectRatio = 16 / 9;
9
- const tolerance = 0.05;
10
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
11
- setBlur(true);
12
- }
13
- };
4
+ const { src, height, imgUrlsPostConfig } = props;
5
+ const blur = useMemo(() => {
6
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
7
+ }, [imgUrlsPostConfig]);
8
+ const translateY = useMemo(() => {
9
+ var _a;
10
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
11
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
12
+ : 'translateY(-50%)';
13
+ }, [imgUrlsPostConfig]);
14
14
  return (React.createElement("div", { style: {
15
15
  overflow: 'hidden',
16
16
  height,
@@ -23,13 +23,13 @@ const Picture = (props) => {
23
23
  objectFit: 'cover',
24
24
  filter: blur ? 'blur(10px)' : 'none',
25
25
  transform: blur ? 'scale(1.2)' : 'none'
26
- }, onLoad: onLoad }),
26
+ } }),
27
27
  blur && (React.createElement(FormatImage, { src: src, style: {
28
28
  width: '100%',
29
29
  objectFit: 'contain',
30
30
  position: 'absolute',
31
31
  top: '50%',
32
- transform: 'translateY(-50%)',
32
+ transform: translateY,
33
33
  left: 0,
34
34
  right: 0
35
35
  } }))));
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { RecItemType } from '../typing';
3
+ import { postConfigType } from '..';
3
4
  interface IPictureGroupProps {
4
5
  imgUrls?: string[];
5
6
  width: number;
@@ -8,6 +9,7 @@ interface IPictureGroupProps {
8
9
  index: number;
9
10
  onReportViewImageEnd: (rec: RecItemType) => void;
10
11
  onViewImageStartEvent: (index: number) => void;
12
+ imgUrlsPostConfig?: postConfigType;
11
13
  }
12
14
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
13
15
  export default _default;
@@ -3,7 +3,8 @@ import { Autoplay, Pagination } from 'swiper/modules';
3
3
  import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
4
4
  import Picture from './Picture';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
6
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
7
+ var _a;
7
8
  const ref = useRef();
8
9
  const { isActive } = useSwiperSlide();
9
10
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -23,9 +24,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
23
24
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
24
25
  }
25
26
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
26
- 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) => {
27
+ 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) => {
27
28
  return (React.createElement(SwiperSlide, { key: url },
28
- React.createElement(Picture, { src: url, width: width, height: height })));
29
+ React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
29
30
  })));
30
31
  };
31
32
  export default memo(PictureGroup);
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { RecItemType } from '../typing';
3
+ import { postConfigType } from '..';
3
4
  interface IVideoWidgetProps {
4
5
  rec: RecItemType;
5
6
  index: number;
@@ -7,6 +8,7 @@ interface IVideoWidgetProps {
7
8
  data: RecItemType[];
8
9
  muted: boolean;
9
10
  activeIndex?: number;
11
+ videoPostConfig?: postConfigType;
10
12
  }
11
13
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
12
14
  export default _default;
@@ -1,9 +1,10 @@
1
1
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { useSwiperSlide } from 'swiper/react';
3
3
  import { useIconLink } from '../useIconLink';
4
+ import FormatImage from '../FormatImage';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
6
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
7
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
7
8
  const [isPauseVideo, setIsPauseVideo] = useState(false);
8
9
  const videoRef = useRef(null);
9
10
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -176,16 +177,53 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
176
177
  window.removeEventListener('beforeunload', handleBeforeUnload);
177
178
  };
178
179
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
180
+ const blur = useMemo(() => {
181
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
182
+ }, [videoPostConfig]);
183
+ const translateY = useMemo(() => {
184
+ var _a;
185
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
186
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
187
+ : 'translateY(-50%)';
188
+ }, [videoPostConfig]);
179
189
  if (!rec.video) {
180
190
  return null;
181
191
  }
182
- return (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
192
+ return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
193
+ position: 'relative',
194
+ width: '100%',
195
+ height
196
+ } },
197
+ React.createElement(FormatImage, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
198
+ height: '100%',
199
+ width: '100%',
200
+ objectFit: 'cover',
201
+ filter: blur ? 'blur(10px)' : 'none',
202
+ transform: blur ? 'scale(1.2)' : 'none'
203
+ } }),
204
+ React.createElement("div", { style: {
205
+ position: 'absolute',
206
+ width: '100%',
207
+ height: 'auto',
208
+ top: '50%',
209
+ transform: translateY,
210
+ left: 0,
211
+ right: 0
212
+ } },
213
+ React.createElement("div", { style: { position: 'relative' } },
214
+ 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: {
215
+ width: '100%',
216
+ height: 'auto',
217
+ objectFit: 'contain'
218
+ } }),
219
+ renderPoster,
220
+ 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: {
183
221
  position: 'relative',
184
222
  width: '100%',
185
223
  height
186
224
  } },
187
225
  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 }),
188
226
  renderPoster,
189
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
227
+ React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
190
228
  };
191
229
  export default memo(VideoWidget);
@@ -1,7 +1,12 @@
1
1
  import { CSSProperties, FC } from 'react';
2
2
  import { RecItemType } from './typing';
3
3
  import './index.less';
4
- interface ISxpPageRenderProps {
4
+ export type postConfigType = {
5
+ mode?: '1' | '2';
6
+ offsetTop?: number;
7
+ delay?: number;
8
+ };
9
+ export interface ISxpPageRenderProps {
5
10
  globalConfig?: {
6
11
  isShowLogo?: boolean;
7
12
  logoUrl?: string;
@@ -19,6 +24,8 @@ interface ISxpPageRenderProps {
19
24
  swipeTipIcon?: string;
20
25
  hashTag?: any[];
21
26
  isOpenTextShadow?: boolean;
27
+ videoPost?: postConfigType;
28
+ imgUrlsPost?: postConfigType;
22
29
  };
23
30
  descStyle?: CSSProperties;
24
31
  tipText?: {
@@ -153,10 +153,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
153
153
  const renderContent = useCallback((rec, index) => {
154
154
  var _a, _b, _c, _d;
155
155
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
156
- return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
156
+ return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
157
157
  }
158
158
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
159
- return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
159
+ return (React.createElement(PictureGroup, { 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 }));
160
160
  }
161
161
  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) {
162
162
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
+ import { postConfigType } from '..';
2
3
  interface IPictureProps {
3
4
  src: string;
4
- height: number;
5
- width: number;
5
+ height?: number;
6
+ imgUrlsPostConfig?: postConfigType;
6
7
  }
7
8
  declare const Picture: (props: IPictureProps) => React.JSX.Element;
8
9
  export default Picture;
@@ -4,16 +4,16 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
6
6
  const Picture = (props) => {
7
- const { src, height, width } = props;
8
- const [blur, setBlur] = (0, react_1.useState)(false);
9
- const onLoad = (img) => {
10
- const aspectRatio = img.naturalHeight / img.naturalWidth;
11
- const targetAspectRatio = 16 / 9;
12
- const tolerance = 0.05;
13
- if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
14
- setBlur(true);
15
- }
16
- };
7
+ const { src, height, imgUrlsPostConfig } = props;
8
+ const blur = (0, react_1.useMemo)(() => {
9
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
10
+ }, [imgUrlsPostConfig]);
11
+ const translateY = (0, react_1.useMemo)(() => {
12
+ var _a;
13
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
14
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
15
+ : 'translateY(-50%)';
16
+ }, [imgUrlsPostConfig]);
17
17
  return (react_1.default.createElement("div", { style: {
18
18
  overflow: 'hidden',
19
19
  height,
@@ -26,13 +26,13 @@ const Picture = (props) => {
26
26
  objectFit: 'cover',
27
27
  filter: blur ? 'blur(10px)' : 'none',
28
28
  transform: blur ? 'scale(1.2)' : 'none'
29
- }, onLoad: onLoad }),
29
+ } }),
30
30
  blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
31
31
  width: '100%',
32
32
  objectFit: 'contain',
33
33
  position: 'absolute',
34
34
  top: '50%',
35
- transform: 'translateY(-50%)',
35
+ transform: translateY,
36
36
  left: 0,
37
37
  right: 0
38
38
  } }))));
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { RecItemType } from '../typing';
3
+ import { postConfigType } from '..';
3
4
  interface IPictureGroupProps {
4
5
  imgUrls?: string[];
5
6
  width: number;
@@ -8,6 +9,7 @@ interface IPictureGroupProps {
8
9
  index: number;
9
10
  onReportViewImageEnd: (rec: RecItemType) => void;
10
11
  onViewImageStartEvent: (index: number) => void;
12
+ imgUrlsPostConfig?: postConfigType;
11
13
  }
12
14
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
13
15
  export default _default;
@@ -6,7 +6,8 @@ const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
7
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
9
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
10
+ var _a;
10
11
  const ref = (0, react_1.useRef)();
11
12
  const { isActive } = (0, react_2.useSwiperSlide)();
12
13
  const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -26,9 +27,9 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
26
27
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
27
28
  }
28
29
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
29
- return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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) => {
30
+ return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.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) => {
30
31
  return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
31
- react_1.default.createElement(Picture_1.default, { src: url, width: width, height: height })));
32
+ react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
32
33
  })));
33
34
  };
34
35
  exports.default = (0, react_1.memo)(PictureGroup);
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { RecItemType } from '../typing';
3
+ import { postConfigType } from '..';
3
4
  interface IVideoWidgetProps {
4
5
  rec: RecItemType;
5
6
  index: number;
@@ -7,6 +8,7 @@ interface IVideoWidgetProps {
7
8
  data: RecItemType[];
8
9
  muted: boolean;
9
10
  activeIndex?: number;
11
+ videoPostConfig?: postConfigType;
10
12
  }
11
13
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
12
14
  export default _default;
@@ -4,9 +4,10 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const react_2 = require("swiper/react");
6
6
  const useIconLink_1 = require("../useIconLink");
7
+ const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
7
8
  const hooks_1 = require("../../../../core/hooks");
8
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
9
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
10
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
10
11
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
11
12
  const videoRef = (0, react_1.useRef)(null);
12
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -179,16 +180,53 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
179
180
  window.removeEventListener('beforeunload', handleBeforeUnload);
180
181
  };
181
182
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
183
+ const blur = (0, react_1.useMemo)(() => {
184
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
185
+ }, [videoPostConfig]);
186
+ const translateY = (0, react_1.useMemo)(() => {
187
+ var _a;
188
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
189
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
190
+ : 'translateY(-50%)';
191
+ }, [videoPostConfig]);
182
192
  if (!rec.video) {
183
193
  return null;
184
194
  }
185
- return (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
195
+ return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
196
+ position: 'relative',
197
+ width: '100%',
198
+ height
199
+ } },
200
+ react_1.default.createElement(FormatImage_1.default, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
201
+ height: '100%',
202
+ width: '100%',
203
+ objectFit: 'cover',
204
+ filter: blur ? 'blur(10px)' : 'none',
205
+ transform: blur ? 'scale(1.2)' : 'none'
206
+ } }),
207
+ react_1.default.createElement("div", { style: {
208
+ position: 'absolute',
209
+ width: '100%',
210
+ height: 'auto',
211
+ top: '50%',
212
+ transform: translateY,
213
+ left: 0,
214
+ right: 0
215
+ } },
216
+ react_1.default.createElement("div", { style: { position: 'relative' } },
217
+ react_1.default.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: {
218
+ width: '100%',
219
+ height: 'auto',
220
+ objectFit: 'contain'
221
+ } }),
222
+ renderPoster,
223
+ react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
186
224
  position: 'relative',
187
225
  width: '100%',
188
226
  height
189
227
  } },
190
228
  react_1.default.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 }),
191
229
  renderPoster,
192
- react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
230
+ react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
193
231
  };
194
232
  exports.default = (0, react_1.memo)(VideoWidget);
@@ -1,7 +1,12 @@
1
1
  import { CSSProperties, FC } from 'react';
2
2
  import { RecItemType } from './typing';
3
3
  import './index.less';
4
- interface ISxpPageRenderProps {
4
+ export type postConfigType = {
5
+ mode?: '1' | '2';
6
+ offsetTop?: number;
7
+ delay?: number;
8
+ };
9
+ export interface ISxpPageRenderProps {
5
10
  globalConfig?: {
6
11
  isShowLogo?: boolean;
7
12
  logoUrl?: string;
@@ -19,6 +24,8 @@ interface ISxpPageRenderProps {
19
24
  swipeTipIcon?: string;
20
25
  hashTag?: any[];
21
26
  isOpenTextShadow?: boolean;
27
+ videoPost?: postConfigType;
28
+ imgUrlsPost?: postConfigType;
22
29
  };
23
30
  descStyle?: CSSProperties;
24
31
  tipText?: {
@@ -156,10 +156,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
156
156
  const renderContent = (0, react_1.useCallback)((rec, index) => {
157
157
  var _a, _b, _c, _d;
158
158
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
159
- return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
159
+ return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
160
160
  }
161
161
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
162
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
162
+ return (react_1.default.createElement(PictureGroup_1.default, { 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 }));
163
163
  }
164
164
  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) {
165
165
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.24",
3
+ "version": "1.0.25",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",