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.
- package/dist/index.cjs +61 -23
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +61 -23
- 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 +61 -23
- 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/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/VideoWidget/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/VideoWidget/index.js +41 -3
- package/es/core/components/SxpPageRender/index.d.ts +8 -1
- package/es/core/components/SxpPageRender/index.js +2 -2
- 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/VideoWidget/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +41 -3
- package/lib/core/components/SxpPageRender/index.d.ts +8 -1
- package/lib/core/components/SxpPageRender/index.js +2 -2
- 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
|
5
|
-
|
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, {
|
1
|
+
import React, { useMemo } from 'react';
|
2
2
|
import FormatImage from '../FormatImage';
|
3
3
|
const Picture = (props) => {
|
4
|
-
const { src, height,
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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
|
-
}
|
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:
|
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:
|
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,
|
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
|
-
|
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
|
5
|
-
|
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,
|
8
|
-
const
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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
|
-
}
|
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:
|
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:
|
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,
|
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
|
-
|
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) => {
|