@doyourjob/gravity-ui-page-constructor 5.31.257 → 5.31.259
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/build/cjs/blocks/Header/schema.d.ts +9 -0
- package/build/cjs/blocks/HeaderMinify/HeaderMinify.css +88 -0
- package/build/cjs/blocks/HeaderMinify/HeaderMinify.js +9 -2
- package/build/cjs/blocks/HeaderMinify/schema.d.ts +30 -0
- package/build/cjs/blocks/HeaderMinify/schema.js +15 -0
- package/build/cjs/blocks/HeaderSlider/schema.d.ts +3 -0
- package/build/cjs/blocks/Media/schema.d.ts +6 -0
- package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +3 -0
- package/build/cjs/blocks/Tabs/schema.d.ts +3 -0
- package/build/cjs/components/Media/Media.d.ts +1 -0
- package/build/cjs/components/Media/Media.js +3 -2
- package/build/cjs/components/VideoBlock/VideoBlock.css +2 -2
- package/build/cjs/components/VideoBlock/VideoBlock.d.ts +1 -0
- package/build/cjs/components/VideoBlock/VideoBlock.js +10 -3
- package/build/cjs/models/constructor-items/blocks.d.ts +4 -0
- package/build/cjs/models/constructor-items/common.d.ts +1 -0
- package/build/cjs/schema/constants.d.ts +3 -0
- package/build/cjs/schema/validators/common.d.ts +3 -0
- package/build/cjs/schema/validators/common.js +3 -0
- package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +3 -0
- package/build/cjs/sub-blocks/MediaCard/schema.d.ts +3 -0
- package/build/esm/blocks/Header/schema.d.ts +9 -0
- package/build/esm/blocks/HeaderMinify/HeaderMinify.css +88 -0
- package/build/esm/blocks/HeaderMinify/HeaderMinify.js +10 -3
- package/build/esm/blocks/HeaderMinify/schema.d.ts +30 -0
- package/build/esm/blocks/HeaderMinify/schema.js +15 -0
- package/build/esm/blocks/HeaderSlider/schema.d.ts +3 -0
- package/build/esm/blocks/Media/schema.d.ts +6 -0
- package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +3 -0
- package/build/esm/blocks/Tabs/schema.d.ts +3 -0
- package/build/esm/components/Media/Media.d.ts +1 -0
- package/build/esm/components/Media/Media.js +3 -2
- package/build/esm/components/VideoBlock/VideoBlock.css +2 -2
- package/build/esm/components/VideoBlock/VideoBlock.d.ts +1 -0
- package/build/esm/components/VideoBlock/VideoBlock.js +10 -3
- package/build/esm/models/constructor-items/blocks.d.ts +4 -0
- package/build/esm/models/constructor-items/common.d.ts +1 -0
- package/build/esm/schema/constants.d.ts +3 -0
- package/build/esm/schema/validators/common.d.ts +3 -0
- package/build/esm/schema/validators/common.js +3 -0
- package/build/esm/sub-blocks/LayoutItem/schema.d.ts +3 -0
- package/build/esm/sub-blocks/MediaCard/schema.d.ts +3 -0
- package/package.json +1 -1
- package/schema/index.js +1 -1
- package/server/models/constructor-items/blocks.d.ts +4 -0
- package/server/models/constructor-items/common.d.ts +1 -0
- package/widget/index.js +1 -1
|
@@ -183,6 +183,9 @@ export declare const HeaderBackgroundProps: {
|
|
|
183
183
|
previewImg: {
|
|
184
184
|
type: string;
|
|
185
185
|
};
|
|
186
|
+
previewVideo: {
|
|
187
|
+
type: string;
|
|
188
|
+
};
|
|
186
189
|
dataLens: {
|
|
187
190
|
oneOf: ({
|
|
188
191
|
type: string;
|
|
@@ -769,6 +772,9 @@ export declare const HeaderProperties: {
|
|
|
769
772
|
previewImg: {
|
|
770
773
|
type: string;
|
|
771
774
|
};
|
|
775
|
+
previewVideo: {
|
|
776
|
+
type: string;
|
|
777
|
+
};
|
|
772
778
|
dataLens: {
|
|
773
779
|
oneOf: ({
|
|
774
780
|
type: string;
|
|
@@ -1478,6 +1484,9 @@ export declare const HeaderBlock: {
|
|
|
1478
1484
|
previewImg: {
|
|
1479
1485
|
type: string;
|
|
1480
1486
|
};
|
|
1487
|
+
previewVideo: {
|
|
1488
|
+
type: string;
|
|
1489
|
+
};
|
|
1481
1490
|
dataLens: {
|
|
1482
1491
|
oneOf: ({
|
|
1483
1492
|
type: string;
|
|
@@ -16,11 +16,99 @@ unpredictable css rules order in build */
|
|
|
16
16
|
object-fit: cover;
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: 100%;
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
@media (min-width: 769px) {
|
|
22
|
+
.pc-header-minify-block__video {
|
|
23
|
+
display: block;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.pc-header-minify-block__image-container {
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset: 0;
|
|
29
|
+
z-index: -1;
|
|
30
|
+
}
|
|
31
|
+
.pc-header-minify-block__image-container > div {
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 100%;
|
|
34
|
+
}
|
|
35
|
+
@media (min-width: 769px) {
|
|
36
|
+
.pc-header-minify-block_has-video .pc-header-minify-block__image-container {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
.pc-header-minify-block__image {
|
|
41
|
+
object-fit: cover;
|
|
42
|
+
width: 100%;
|
|
43
|
+
height: 100%;
|
|
44
|
+
display: block;
|
|
19
45
|
}
|
|
20
46
|
.pc-header-minify-block__container {
|
|
21
47
|
padding-top: 150px;
|
|
22
48
|
padding-bottom: 168px;
|
|
23
49
|
}
|
|
50
|
+
.pc-header-minify-block_vertical-offset_0 .pc-header-minify-block__container {
|
|
51
|
+
padding-top: 0;
|
|
52
|
+
padding-bottom: 0;
|
|
53
|
+
}
|
|
54
|
+
.pc-header-minify-block_vertical-offset_s .pc-header-minify-block__container {
|
|
55
|
+
padding-top: 64px;
|
|
56
|
+
padding-bottom: 64px;
|
|
57
|
+
}
|
|
58
|
+
.pc-header-minify-block_vertical-offset_m .pc-header-minify-block__container {
|
|
59
|
+
padding-top: 96px;
|
|
60
|
+
padding-bottom: 96px;
|
|
61
|
+
}
|
|
62
|
+
.pc-header-minify-block_vertical-offset_l .pc-header-minify-block__container {
|
|
63
|
+
padding-top: 128px;
|
|
64
|
+
padding-bottom: 128px;
|
|
65
|
+
}
|
|
66
|
+
.pc-header-minify-block_vertical-offset_xl .pc-header-minify-block__container {
|
|
67
|
+
padding-top: 160px;
|
|
68
|
+
padding-bottom: 160px;
|
|
69
|
+
}
|
|
70
|
+
.pc-header-minify-block_vertical-offset-top_0 .pc-header-minify-block__container {
|
|
71
|
+
padding-top: 0;
|
|
72
|
+
}
|
|
73
|
+
.pc-header-minify-block_vertical-offset-top_s .pc-header-minify-block__container {
|
|
74
|
+
padding-top: 64px;
|
|
75
|
+
}
|
|
76
|
+
.pc-header-minify-block_vertical-offset-top_m .pc-header-minify-block__container {
|
|
77
|
+
padding-top: 96px;
|
|
78
|
+
}
|
|
79
|
+
.pc-header-minify-block_vertical-offset-top_l .pc-header-minify-block__container {
|
|
80
|
+
padding-top: 128px;
|
|
81
|
+
}
|
|
82
|
+
.pc-header-minify-block_vertical-offset-top_xl .pc-header-minify-block__container {
|
|
83
|
+
padding-top: 160px;
|
|
84
|
+
}
|
|
85
|
+
.pc-header-minify-block_vertical-offset-bottom_0 .pc-header-minify-block__container {
|
|
86
|
+
padding-bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
.pc-header-minify-block_vertical-offset-bottom_s .pc-header-minify-block__container {
|
|
89
|
+
padding-bottom: 64px;
|
|
90
|
+
}
|
|
91
|
+
.pc-header-minify-block_vertical-offset-bottom_m .pc-header-minify-block__container {
|
|
92
|
+
padding-bottom: 96px;
|
|
93
|
+
}
|
|
94
|
+
.pc-header-minify-block_vertical-offset-bottom_l .pc-header-minify-block__container {
|
|
95
|
+
padding-bottom: 128px;
|
|
96
|
+
}
|
|
97
|
+
.pc-header-minify-block_vertical-offset-bottom_xl .pc-header-minify-block__container {
|
|
98
|
+
padding-bottom: 160px;
|
|
99
|
+
}
|
|
100
|
+
@media (max-width: 769px) {
|
|
101
|
+
.pc-header-minify-block_vertical-offset_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_xl .pc-header-minify-block__container {
|
|
102
|
+
padding-top: 96px;
|
|
103
|
+
padding-bottom: 96px;
|
|
104
|
+
}
|
|
105
|
+
.pc-header-minify-block_vertical-offset-top_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_xl .pc-header-minify-block__container {
|
|
106
|
+
padding-top: 96px;
|
|
107
|
+
}
|
|
108
|
+
.pc-header-minify-block_vertical-offset-bottom_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_xl .pc-header-minify-block__container {
|
|
109
|
+
padding-bottom: 96px;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
24
112
|
.pc-header-minify-block__title {
|
|
25
113
|
font-size: 94px;
|
|
26
114
|
line-height: 80%;
|
|
@@ -11,13 +11,20 @@ const Button_1 = tslib_1.__importDefault(require("./Button/Button"));
|
|
|
11
11
|
const b = (0, utils_2.block)('header-minify-block');
|
|
12
12
|
const colSizes = { all: 12, md: 9 };
|
|
13
13
|
const HeaderMinifyBlock = (props) => {
|
|
14
|
-
const { title, description, buttons, video, headerSpace } = props;
|
|
15
|
-
return (react_1.default.createElement("header", { className: b({
|
|
14
|
+
const { title, description, buttons, image, video, headerSpace, verticalOffset, verticalOffsetTop, verticalOffsetBottom, } = props;
|
|
15
|
+
return (react_1.default.createElement("header", { className: b({
|
|
16
|
+
['header-space']: headerSpace,
|
|
17
|
+
'vertical-offset': verticalOffset,
|
|
18
|
+
'vertical-offset-top': verticalOffsetTop,
|
|
19
|
+
'vertical-offset-bottom': verticalOffsetBottom,
|
|
20
|
+
'has-video': Boolean(video),
|
|
21
|
+
}) },
|
|
16
22
|
video && (react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true,
|
|
17
23
|
// @ts-ignore
|
|
18
24
|
// eslint-disable-next-line react/no-unknown-property
|
|
19
25
|
pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
|
|
20
26
|
react_1.default.createElement("source", { src: video, type: (0, utils_1.parseVideoType)(video) }))),
|
|
27
|
+
image && (react_1.default.createElement(components_1.Image, { containerClassName: b('image-container'), className: b('image'), src: image })),
|
|
21
28
|
react_1.default.createElement(grid_1.Grid, null,
|
|
22
29
|
react_1.default.createElement(grid_1.Row, { className: b('container') },
|
|
23
30
|
react_1.default.createElement(grid_1.Col, { sizes: colSizes },
|
|
@@ -27,12 +27,27 @@ export declare const HeaderMinifyProperties: {
|
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
|
+
image: {
|
|
31
|
+
type: string;
|
|
32
|
+
};
|
|
30
33
|
video: {
|
|
31
34
|
type: string;
|
|
32
35
|
};
|
|
33
36
|
headerSpace: {
|
|
34
37
|
type: string;
|
|
35
38
|
};
|
|
39
|
+
verticalOffset: {
|
|
40
|
+
type: string;
|
|
41
|
+
enum: string[];
|
|
42
|
+
};
|
|
43
|
+
verticalOffsetTop: {
|
|
44
|
+
type: string;
|
|
45
|
+
enum: string[];
|
|
46
|
+
};
|
|
47
|
+
verticalOffsetBottom: {
|
|
48
|
+
type: string;
|
|
49
|
+
enum: string[];
|
|
50
|
+
};
|
|
36
51
|
};
|
|
37
52
|
export declare const HeaderMinifyBlock: {
|
|
38
53
|
'header-minify-block': {
|
|
@@ -67,12 +82,27 @@ export declare const HeaderMinifyBlock: {
|
|
|
67
82
|
};
|
|
68
83
|
};
|
|
69
84
|
};
|
|
85
|
+
image: {
|
|
86
|
+
type: string;
|
|
87
|
+
};
|
|
70
88
|
video: {
|
|
71
89
|
type: string;
|
|
72
90
|
};
|
|
73
91
|
headerSpace: {
|
|
74
92
|
type: string;
|
|
75
93
|
};
|
|
94
|
+
verticalOffset: {
|
|
95
|
+
type: string;
|
|
96
|
+
enum: string[];
|
|
97
|
+
};
|
|
98
|
+
verticalOffsetTop: {
|
|
99
|
+
type: string;
|
|
100
|
+
enum: string[];
|
|
101
|
+
};
|
|
102
|
+
verticalOffsetBottom: {
|
|
103
|
+
type: string;
|
|
104
|
+
enum: string[];
|
|
105
|
+
};
|
|
76
106
|
anchor: {
|
|
77
107
|
type: string;
|
|
78
108
|
additionalProperties: boolean;
|
|
@@ -25,12 +25,27 @@ exports.HeaderMinifyProperties = {
|
|
|
25
25
|
},
|
|
26
26
|
},
|
|
27
27
|
},
|
|
28
|
+
image: {
|
|
29
|
+
type: 'string',
|
|
30
|
+
},
|
|
28
31
|
video: {
|
|
29
32
|
type: 'string',
|
|
30
33
|
},
|
|
31
34
|
headerSpace: {
|
|
32
35
|
type: 'boolean',
|
|
33
36
|
},
|
|
37
|
+
verticalOffset: {
|
|
38
|
+
type: 'string',
|
|
39
|
+
enum: ['0', 's', 'm', 'l', 'xl'],
|
|
40
|
+
},
|
|
41
|
+
verticalOffsetTop: {
|
|
42
|
+
type: 'string',
|
|
43
|
+
enum: ['0', 's', 'm', 'l', 'xl'],
|
|
44
|
+
},
|
|
45
|
+
verticalOffsetBottom: {
|
|
46
|
+
type: 'string',
|
|
47
|
+
enum: ['0', 's', 'm', 'l', 'xl'],
|
|
48
|
+
},
|
|
34
49
|
};
|
|
35
50
|
exports.HeaderMinifyBlock = {
|
|
36
51
|
'header-minify-block': {
|
|
@@ -176,6 +176,9 @@ export declare const Media: {
|
|
|
176
176
|
previewImg: {
|
|
177
177
|
type: string;
|
|
178
178
|
};
|
|
179
|
+
previewVideo: {
|
|
180
|
+
type: string;
|
|
181
|
+
};
|
|
179
182
|
dataLens: {
|
|
180
183
|
oneOf: ({
|
|
181
184
|
type: string;
|
|
@@ -1052,6 +1055,9 @@ export declare const MediaBlock: {
|
|
|
1052
1055
|
previewImg: {
|
|
1053
1056
|
type: string;
|
|
1054
1057
|
};
|
|
1058
|
+
previewVideo: {
|
|
1059
|
+
type: string;
|
|
1060
|
+
};
|
|
1055
1061
|
dataLens: {
|
|
1056
1062
|
oneOf: ({
|
|
1057
1063
|
type: string;
|
|
@@ -6,6 +6,7 @@ export interface MediaAllProps extends Animatable, MediaProps, VideoAdditionProp
|
|
|
6
6
|
youtubeClassName?: string;
|
|
7
7
|
autoplay?: boolean;
|
|
8
8
|
onImageLoad?: () => void;
|
|
9
|
+
previewVideo?: string;
|
|
9
10
|
}
|
|
10
11
|
export declare const Media: (props: MediaAllProps) => JSX.Element;
|
|
11
12
|
export default Media;
|
|
@@ -14,7 +14,7 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
|
|
|
14
14
|
const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
|
|
15
15
|
const b = (0, utils_1.block)('Media');
|
|
16
16
|
const Media = (props) => {
|
|
17
|
-
const { animated, image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, playButtonCorner, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
|
|
17
|
+
const { animated, image, video, youtube, videoIframe, dataLens, color, height, previewImg, previewVideo, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, playButtonCorner, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
|
|
18
18
|
const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
|
|
19
19
|
const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
|
|
20
20
|
const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
|
|
@@ -46,7 +46,7 @@ const Media = (props) => {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
if (youtube || videoIframe) {
|
|
49
|
-
result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, playButtonCorner: playButtonCorner, height: height, ratio: ratio, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
|
|
49
|
+
result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, previewVideo: previewVideo, playButtonCorner: playButtonCorner, height: height, ratio: ratio, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
|
|
50
50
|
}
|
|
51
51
|
if (dataLens) {
|
|
52
52
|
result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
|
|
@@ -77,6 +77,7 @@ const Media = (props) => {
|
|
|
77
77
|
analyticsEvents,
|
|
78
78
|
playVideo,
|
|
79
79
|
previewImg,
|
|
80
|
+
previewVideo,
|
|
80
81
|
playButton,
|
|
81
82
|
customBarControlsClassName,
|
|
82
83
|
ratio,
|
|
@@ -13,13 +13,13 @@ unpredictable css rules order in build */
|
|
|
13
13
|
width: 100%;
|
|
14
14
|
height: 100%;
|
|
15
15
|
}
|
|
16
|
-
.pc-VideoBlock__image {
|
|
16
|
+
.pc-VideoBlock__image, .pc-VideoBlock__video {
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: 100%;
|
|
19
19
|
object-fit: cover;
|
|
20
20
|
display: block;
|
|
21
21
|
}
|
|
22
|
-
.pc-VideoBlock__image-wrapper {
|
|
22
|
+
.pc-VideoBlock__image-wrapper, .pc-VideoBlock__video-wrapper {
|
|
23
23
|
height: 100%;
|
|
24
24
|
width: 100%;
|
|
25
25
|
}
|
|
@@ -13,6 +13,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
|
|
|
13
13
|
attributes?: Record<string, string>;
|
|
14
14
|
className?: string;
|
|
15
15
|
previewImg?: string;
|
|
16
|
+
previewVideo?: string;
|
|
16
17
|
playButton?: React.ReactNode;
|
|
17
18
|
playButtonCorner?: boolean;
|
|
18
19
|
playButtonId?: string;
|
|
@@ -49,7 +49,7 @@ function getHeight(width, ratio) {
|
|
|
49
49
|
}
|
|
50
50
|
exports.getHeight = getHeight;
|
|
51
51
|
const VideoBlock = (props) => {
|
|
52
|
-
const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
|
|
52
|
+
const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
|
|
53
53
|
const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
|
|
54
54
|
const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
|
|
55
55
|
const ref = (0, react_1.useRef)(null);
|
|
@@ -58,6 +58,7 @@ const VideoBlock = (props) => {
|
|
|
58
58
|
const fullId = (0, uikit_1.useUniqId)();
|
|
59
59
|
const buttonId = (0, uikit_1.useUniqId)();
|
|
60
60
|
const [isPlaying, setIsPlaying] = (0, react_1.useState)(!previewImg);
|
|
61
|
+
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
61
62
|
const iframeSrc = (0, react_1.useMemo)(() => {
|
|
62
63
|
if (src && isPlaying) {
|
|
63
64
|
try {
|
|
@@ -79,6 +80,12 @@ const VideoBlock = (props) => {
|
|
|
79
80
|
setIsPlaying(true);
|
|
80
81
|
setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
|
|
81
82
|
}, [handleAnalytics, analyticsEvents]);
|
|
83
|
+
const onMouseEnter = (0, react_1.useCallback)(() => {
|
|
84
|
+
setIsHovered(true);
|
|
85
|
+
}, []);
|
|
86
|
+
const onMouseLeave = (0, react_1.useCallback)(() => {
|
|
87
|
+
setIsHovered(false);
|
|
88
|
+
}, []);
|
|
82
89
|
const { onKeyDown: onPreviewKeyDown } = (0, uikit_1.useActionHandlers)(onPreviewClick);
|
|
83
90
|
(0, react_1.useEffect)(() => {
|
|
84
91
|
const updateSize = (0, debounce_1.default)(() => {
|
|
@@ -101,8 +108,8 @@ const VideoBlock = (props) => {
|
|
|
101
108
|
}
|
|
102
109
|
return (react_1.default.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
|
|
103
110
|
iframeContent,
|
|
104
|
-
previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
|
|
105
|
-
react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
|
|
111
|
+
previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
|
|
112
|
+
isHovered && previewVideo ? (react_1.default.createElement("video", { src: previewVideo, className: b('video'), autoPlay: true, muted: true, loop: true, playsInline: true })) : (react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad })),
|
|
106
113
|
playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button', { corner: playButtonCorner }) },
|
|
107
114
|
react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: playButtonCorner ? 16 : 24 })))))));
|
|
108
115
|
};
|
|
@@ -251,8 +251,12 @@ export interface HeaderMinifyBlockProps {
|
|
|
251
251
|
title: string;
|
|
252
252
|
description?: string;
|
|
253
253
|
buttons?: HeaderMinifyButtonProps[];
|
|
254
|
+
image?: string;
|
|
254
255
|
video?: string;
|
|
255
256
|
headerSpace?: boolean;
|
|
257
|
+
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
258
|
+
verticalOffsetTop?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
259
|
+
verticalOffsetBottom?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
256
260
|
}
|
|
257
261
|
export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
|
|
258
262
|
title: Pick<TitleItemProps, 'text' | 'textSize'> | string;
|
|
@@ -183,6 +183,9 @@ export declare const HeaderBackgroundProps: {
|
|
|
183
183
|
previewImg: {
|
|
184
184
|
type: string;
|
|
185
185
|
};
|
|
186
|
+
previewVideo: {
|
|
187
|
+
type: string;
|
|
188
|
+
};
|
|
186
189
|
dataLens: {
|
|
187
190
|
oneOf: ({
|
|
188
191
|
type: string;
|
|
@@ -769,6 +772,9 @@ export declare const HeaderProperties: {
|
|
|
769
772
|
previewImg: {
|
|
770
773
|
type: string;
|
|
771
774
|
};
|
|
775
|
+
previewVideo: {
|
|
776
|
+
type: string;
|
|
777
|
+
};
|
|
772
778
|
dataLens: {
|
|
773
779
|
oneOf: ({
|
|
774
780
|
type: string;
|
|
@@ -1478,6 +1484,9 @@ export declare const HeaderBlock: {
|
|
|
1478
1484
|
previewImg: {
|
|
1479
1485
|
type: string;
|
|
1480
1486
|
};
|
|
1487
|
+
previewVideo: {
|
|
1488
|
+
type: string;
|
|
1489
|
+
};
|
|
1481
1490
|
dataLens: {
|
|
1482
1491
|
oneOf: ({
|
|
1483
1492
|
type: string;
|
|
@@ -16,11 +16,99 @@ unpredictable css rules order in build */
|
|
|
16
16
|
object-fit: cover;
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: 100%;
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
@media (min-width: 769px) {
|
|
22
|
+
.pc-header-minify-block__video {
|
|
23
|
+
display: block;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.pc-header-minify-block__image-container {
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset: 0;
|
|
29
|
+
z-index: -1;
|
|
30
|
+
}
|
|
31
|
+
.pc-header-minify-block__image-container > div {
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 100%;
|
|
34
|
+
}
|
|
35
|
+
@media (min-width: 769px) {
|
|
36
|
+
.pc-header-minify-block_has-video .pc-header-minify-block__image-container {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
.pc-header-minify-block__image {
|
|
41
|
+
object-fit: cover;
|
|
42
|
+
width: 100%;
|
|
43
|
+
height: 100%;
|
|
44
|
+
display: block;
|
|
19
45
|
}
|
|
20
46
|
.pc-header-minify-block__container {
|
|
21
47
|
padding-top: 150px;
|
|
22
48
|
padding-bottom: 168px;
|
|
23
49
|
}
|
|
50
|
+
.pc-header-minify-block_vertical-offset_0 .pc-header-minify-block__container {
|
|
51
|
+
padding-top: 0;
|
|
52
|
+
padding-bottom: 0;
|
|
53
|
+
}
|
|
54
|
+
.pc-header-minify-block_vertical-offset_s .pc-header-minify-block__container {
|
|
55
|
+
padding-top: 64px;
|
|
56
|
+
padding-bottom: 64px;
|
|
57
|
+
}
|
|
58
|
+
.pc-header-minify-block_vertical-offset_m .pc-header-minify-block__container {
|
|
59
|
+
padding-top: 96px;
|
|
60
|
+
padding-bottom: 96px;
|
|
61
|
+
}
|
|
62
|
+
.pc-header-minify-block_vertical-offset_l .pc-header-minify-block__container {
|
|
63
|
+
padding-top: 128px;
|
|
64
|
+
padding-bottom: 128px;
|
|
65
|
+
}
|
|
66
|
+
.pc-header-minify-block_vertical-offset_xl .pc-header-minify-block__container {
|
|
67
|
+
padding-top: 160px;
|
|
68
|
+
padding-bottom: 160px;
|
|
69
|
+
}
|
|
70
|
+
.pc-header-minify-block_vertical-offset-top_0 .pc-header-minify-block__container {
|
|
71
|
+
padding-top: 0;
|
|
72
|
+
}
|
|
73
|
+
.pc-header-minify-block_vertical-offset-top_s .pc-header-minify-block__container {
|
|
74
|
+
padding-top: 64px;
|
|
75
|
+
}
|
|
76
|
+
.pc-header-minify-block_vertical-offset-top_m .pc-header-minify-block__container {
|
|
77
|
+
padding-top: 96px;
|
|
78
|
+
}
|
|
79
|
+
.pc-header-minify-block_vertical-offset-top_l .pc-header-minify-block__container {
|
|
80
|
+
padding-top: 128px;
|
|
81
|
+
}
|
|
82
|
+
.pc-header-minify-block_vertical-offset-top_xl .pc-header-minify-block__container {
|
|
83
|
+
padding-top: 160px;
|
|
84
|
+
}
|
|
85
|
+
.pc-header-minify-block_vertical-offset-bottom_0 .pc-header-minify-block__container {
|
|
86
|
+
padding-bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
.pc-header-minify-block_vertical-offset-bottom_s .pc-header-minify-block__container {
|
|
89
|
+
padding-bottom: 64px;
|
|
90
|
+
}
|
|
91
|
+
.pc-header-minify-block_vertical-offset-bottom_m .pc-header-minify-block__container {
|
|
92
|
+
padding-bottom: 96px;
|
|
93
|
+
}
|
|
94
|
+
.pc-header-minify-block_vertical-offset-bottom_l .pc-header-minify-block__container {
|
|
95
|
+
padding-bottom: 128px;
|
|
96
|
+
}
|
|
97
|
+
.pc-header-minify-block_vertical-offset-bottom_xl .pc-header-minify-block__container {
|
|
98
|
+
padding-bottom: 160px;
|
|
99
|
+
}
|
|
100
|
+
@media (max-width: 769px) {
|
|
101
|
+
.pc-header-minify-block_vertical-offset_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset_xl .pc-header-minify-block__container {
|
|
102
|
+
padding-top: 96px;
|
|
103
|
+
padding-bottom: 96px;
|
|
104
|
+
}
|
|
105
|
+
.pc-header-minify-block_vertical-offset-top_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-top_xl .pc-header-minify-block__container {
|
|
106
|
+
padding-top: 96px;
|
|
107
|
+
}
|
|
108
|
+
.pc-header-minify-block_vertical-offset-bottom_s .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_m .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_l .pc-header-minify-block__container, .pc-header-minify-block_vertical-offset-bottom_xl .pc-header-minify-block__container {
|
|
109
|
+
padding-bottom: 96px;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
24
112
|
.pc-header-minify-block__title {
|
|
25
113
|
font-size: 94px;
|
|
26
114
|
line-height: 80%;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { HTML } from '../../components';
|
|
2
|
+
import { HTML, Image } from '../../components';
|
|
3
3
|
import { parseVideoType } from '../../components/Media/Video/utils';
|
|
4
4
|
import { Col, Grid, Row } from '../../grid';
|
|
5
5
|
import { block } from '../../utils';
|
|
@@ -8,13 +8,20 @@ import './HeaderMinify.css';
|
|
|
8
8
|
const b = block('header-minify-block');
|
|
9
9
|
const colSizes = { all: 12, md: 9 };
|
|
10
10
|
export const HeaderMinifyBlock = (props) => {
|
|
11
|
-
const { title, description, buttons, video, headerSpace } = props;
|
|
12
|
-
return (React.createElement("header", { className: b({
|
|
11
|
+
const { title, description, buttons, image, video, headerSpace, verticalOffset, verticalOffsetTop, verticalOffsetBottom, } = props;
|
|
12
|
+
return (React.createElement("header", { className: b({
|
|
13
|
+
['header-space']: headerSpace,
|
|
14
|
+
'vertical-offset': verticalOffset,
|
|
15
|
+
'vertical-offset-top': verticalOffsetTop,
|
|
16
|
+
'vertical-offset-bottom': verticalOffsetBottom,
|
|
17
|
+
'has-video': Boolean(video),
|
|
18
|
+
}) },
|
|
13
19
|
video && (React.createElement("video", { disablePictureInPicture: true, playsInline: true,
|
|
14
20
|
// @ts-ignore
|
|
15
21
|
// eslint-disable-next-line react/no-unknown-property
|
|
16
22
|
pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
|
|
17
23
|
React.createElement("source", { src: video, type: parseVideoType(video) }))),
|
|
24
|
+
image && (React.createElement(Image, { containerClassName: b('image-container'), className: b('image'), src: image })),
|
|
18
25
|
React.createElement(Grid, null,
|
|
19
26
|
React.createElement(Row, { className: b('container') },
|
|
20
27
|
React.createElement(Col, { sizes: colSizes },
|