@doyourjob/gravity-ui-page-constructor 5.31.258 → 5.31.260

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 (40) hide show
  1. package/build/cjs/blocks/Header/schema.d.ts +9 -0
  2. package/build/cjs/blocks/HeaderSlider/schema.d.ts +3 -0
  3. package/build/cjs/blocks/Media/schema.d.ts +6 -0
  4. package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +3 -0
  5. package/build/cjs/blocks/Tabs/schema.d.ts +3 -0
  6. package/build/cjs/components/Media/Media.d.ts +1 -0
  7. package/build/cjs/components/Media/Media.js +3 -2
  8. package/build/cjs/components/VideoBlock/VideoBlock.css +2 -2
  9. package/build/cjs/components/VideoBlock/VideoBlock.d.ts +1 -0
  10. package/build/cjs/components/VideoBlock/VideoBlock.js +10 -3
  11. package/build/cjs/models/constructor-items/common.d.ts +1 -0
  12. package/build/cjs/schema/constants.d.ts +3 -0
  13. package/build/cjs/schema/validators/common.d.ts +3 -0
  14. package/build/cjs/schema/validators/common.js +3 -0
  15. package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +3 -0
  16. package/build/cjs/sub-blocks/MediaCard/schema.d.ts +3 -0
  17. package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
  18. package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
  19. package/build/esm/blocks/Header/schema.d.ts +9 -0
  20. package/build/esm/blocks/HeaderSlider/schema.d.ts +3 -0
  21. package/build/esm/blocks/Media/schema.d.ts +6 -0
  22. package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +3 -0
  23. package/build/esm/blocks/Tabs/schema.d.ts +3 -0
  24. package/build/esm/components/Media/Media.d.ts +1 -0
  25. package/build/esm/components/Media/Media.js +3 -2
  26. package/build/esm/components/VideoBlock/VideoBlock.css +2 -2
  27. package/build/esm/components/VideoBlock/VideoBlock.d.ts +1 -0
  28. package/build/esm/components/VideoBlock/VideoBlock.js +10 -3
  29. package/build/esm/models/constructor-items/common.d.ts +1 -0
  30. package/build/esm/schema/constants.d.ts +3 -0
  31. package/build/esm/schema/validators/common.d.ts +3 -0
  32. package/build/esm/schema/validators/common.js +3 -0
  33. package/build/esm/sub-blocks/LayoutItem/schema.d.ts +3 -0
  34. package/build/esm/sub-blocks/MediaCard/schema.d.ts +3 -0
  35. package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
  36. package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
  37. package/package.json +1 -1
  38. package/schema/index.js +1 -1
  39. package/server/models/constructor-items/common.d.ts +1 -0
  40. 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;
@@ -463,6 +463,9 @@ export declare const HeaderSliderBlock: {
463
463
  previewImg: {
464
464
  type: string;
465
465
  };
466
+ previewVideo: {
467
+ type: string;
468
+ };
466
469
  dataLens: {
467
470
  oneOf: ({
468
471
  type: string;
@@ -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;
@@ -192,6 +192,9 @@ export declare const PromoFeaturesItem: {
192
192
  previewImg: {
193
193
  type: string;
194
194
  };
195
+ previewVideo: {
196
+ type: string;
197
+ };
195
198
  dataLens: {
196
199
  oneOf: ({
197
200
  type: string;
@@ -191,6 +191,9 @@ export declare const tabsItem: {
191
191
  previewImg: {
192
192
  type: string;
193
193
  };
194
+ previewVideo: {
195
+ type: string;
196
+ };
194
197
  dataLens: {
195
198
  oneOf: ({
196
199
  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
  };
@@ -194,6 +194,7 @@ export interface MediaComponentYoutubeProps {
194
194
  youtube: string;
195
195
  aspectRatio?: number;
196
196
  previewImg?: string;
197
+ previewVideo?: string;
197
198
  playButtonCorner?: boolean;
198
199
  fullscreen?: boolean;
199
200
  }
@@ -4162,6 +4162,9 @@ export declare const cardSchemas: {
4162
4162
  previewImg: {
4163
4163
  type: string;
4164
4164
  };
4165
+ previewVideo: {
4166
+ type: string;
4167
+ };
4165
4168
  dataLens: {
4166
4169
  oneOf: ({
4167
4170
  type: string;
@@ -1379,6 +1379,9 @@ export declare const MediaProps: {
1379
1379
  previewImg: {
1380
1380
  type: string;
1381
1381
  };
1382
+ previewVideo: {
1383
+ type: string;
1384
+ };
1382
1385
  dataLens: {
1383
1386
  oneOf: ({
1384
1387
  type: string;
@@ -649,6 +649,9 @@ exports.MediaProps = {
649
649
  previewImg: {
650
650
  type: 'string',
651
651
  },
652
+ previewVideo: {
653
+ type: 'string',
654
+ },
652
655
  dataLens: exports.DataLensProps,
653
656
  fullscreen: {
654
657
  type: 'boolean',
@@ -224,6 +224,9 @@ export declare const LayoutItem: {
224
224
  previewImg: {
225
225
  type: string;
226
226
  };
227
+ previewVideo: {
228
+ type: string;
229
+ };
227
230
  dataLens: {
228
231
  oneOf: ({
229
232
  type: string;
@@ -296,6 +296,9 @@ export declare const MediaCardBlock: {
296
296
  previewImg: {
297
297
  type: string;
298
298
  };
299
+ previewVideo: {
300
+ type: string;
301
+ };
299
302
  dataLens: {
300
303
  oneOf: ({
301
304
  type: string;
@@ -72,6 +72,7 @@ unpredictable css rules order in build */
72
72
  .pc-mini-case-card__title {
73
73
  font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
74
74
  line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
75
+ margin: 0;
75
76
  font-weight: var(--g-text-accent-font-weight);
76
77
  }
77
78
  @media (max-width: 769px) {
@@ -110,6 +111,14 @@ unpredictable css rules order in build */
110
111
  min-width: 100%;
111
112
  }
112
113
  }
114
+ .pc-mini-case-card__inner-container {
115
+ min-height: 80px;
116
+ display: flex;
117
+ flex-direction: column;
118
+ justify-content: center;
119
+ align-items: center;
120
+ text-align: center;
121
+ }
113
122
  .pc-mini-case-card__value {
114
123
  font-size: 40px;
115
124
  line-height: 48px;
@@ -33,7 +33,7 @@ const MiniCaseCardHead = ({ title, shouldShowStory, showQuote, text, quote, avat
33
33
  return null;
34
34
  }
35
35
  return (react_1.default.createElement("div", { className: b('head') },
36
- title && (react_1.default.createElement("div", { className: b('title') },
36
+ title && (react_1.default.createElement("h2", { className: `${b('title')} title-font-family` },
37
37
  react_1.default.createElement(components_1.HTML, null, title))),
38
38
  shouldShowStory && react_1.default.createElement(components_1.HTML, { className: b('text') }, text),
39
39
  showQuote && quote && react_1.default.createElement(components_1.HTML, { className: b('quote') }, quote),
@@ -49,7 +49,8 @@ const MiniCaseCard = ({ title, showStory = true, showQuote = true, text, quote,
49
49
  react_1.default.createElement(MiniCaseCardHead, { title: title, shouldShowStory: shouldShowStory, showQuote: showQuote, text: text, quote: quote, avatar: avatar, author: author, position: position })),
50
50
  react_1.default.createElement(MiniCaseCardTags, { tagUsecase: tagUsecase, tagIndustry: tagIndustry })),
51
51
  react_1.default.createElement("div", { className: b('rhs') }, data === null || data === void 0 ? void 0 : data.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('box'), style: backgroundData ? { background: backgroundData } : undefined },
52
- react_1.default.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
53
- react_1.default.createElement("div", { className: b('label') }, item.label)))))));
52
+ react_1.default.createElement("div", { className: b('inner-container') },
53
+ react_1.default.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
54
+ react_1.default.createElement("div", { className: b('label') }, item.label))))))));
54
55
  };
55
56
  exports.default = MiniCaseCard;
@@ -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;
@@ -463,6 +463,9 @@ export declare const HeaderSliderBlock: {
463
463
  previewImg: {
464
464
  type: string;
465
465
  };
466
+ previewVideo: {
467
+ type: string;
468
+ };
466
469
  dataLens: {
467
470
  oneOf: ({
468
471
  type: string;
@@ -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;
@@ -192,6 +192,9 @@ export declare const PromoFeaturesItem: {
192
192
  previewImg: {
193
193
  type: string;
194
194
  };
195
+ previewVideo: {
196
+ type: string;
197
+ };
195
198
  dataLens: {
196
199
  oneOf: ({
197
200
  type: string;
@@ -191,6 +191,9 @@ export declare const tabsItem: {
191
191
  previewImg: {
192
192
  type: string;
193
193
  };
194
+ previewVideo: {
195
+ type: string;
196
+ };
194
197
  dataLens: {
195
198
  oneOf: ({
196
199
  type: string;
@@ -7,6 +7,7 @@ export interface MediaAllProps extends Animatable, MediaProps, VideoAdditionProp
7
7
  youtubeClassName?: string;
8
8
  autoplay?: boolean;
9
9
  onImageLoad?: () => void;
10
+ previewVideo?: string;
10
11
  }
11
12
  export declare const Media: (props: MediaAllProps) => JSX.Element;
12
13
  export default Media;
@@ -11,7 +11,7 @@ import Video from './Video/Video';
11
11
  import './Media.css';
12
12
  const b = block('Media');
13
13
  export const Media = (props) => {
14
- 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;
14
+ 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;
15
15
  const [hasVideoFallback, setHasVideoFallback] = useState(false);
16
16
  const { microdata } = useContext(InnerContext);
17
17
  const qaAttributes = getQaAttrubutes(qa, 'video');
@@ -43,7 +43,7 @@ export const Media = (props) => {
43
43
  }
44
44
  }
45
45
  if (youtube || videoIframe) {
46
- result = (React.createElement(IframeVideoBlock, { 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 }));
46
+ result = (React.createElement(IframeVideoBlock, { 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 }));
47
47
  }
48
48
  if (dataLens) {
49
49
  result = React.createElement(DataLens, { dataLens: dataLens });
@@ -74,6 +74,7 @@ export const Media = (props) => {
74
74
  analyticsEvents,
75
75
  playVideo,
76
76
  previewImg,
77
+ previewVideo,
77
78
  playButton,
78
79
  customBarControlsClassName,
79
80
  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
  }
@@ -14,6 +14,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
14
14
  attributes?: Record<string, string>;
15
15
  className?: string;
16
16
  previewImg?: string;
17
+ previewVideo?: string;
17
18
  playButton?: React.ReactNode;
18
19
  playButtonCorner?: boolean;
19
20
  playButtonId?: string;
@@ -45,7 +45,7 @@ export function getHeight(width, ratio) {
45
45
  return (width / 16) * 9;
46
46
  }
47
47
  const VideoBlock = (props) => {
48
- const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
48
+ const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
49
49
  const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
50
50
  const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
51
51
  const ref = useRef(null);
@@ -54,6 +54,7 @@ const VideoBlock = (props) => {
54
54
  const fullId = useUniqId();
55
55
  const buttonId = useUniqId();
56
56
  const [isPlaying, setIsPlaying] = useState(!previewImg);
57
+ const [isHovered, setIsHovered] = useState(false);
57
58
  const iframeSrc = useMemo(() => {
58
59
  if (src && isPlaying) {
59
60
  try {
@@ -75,6 +76,12 @@ const VideoBlock = (props) => {
75
76
  setIsPlaying(true);
76
77
  setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
77
78
  }, [handleAnalytics, analyticsEvents]);
79
+ const onMouseEnter = useCallback(() => {
80
+ setIsHovered(true);
81
+ }, []);
82
+ const onMouseLeave = useCallback(() => {
83
+ setIsHovered(false);
84
+ }, []);
78
85
  const { onKeyDown: onPreviewKeyDown } = useActionHandlers(onPreviewClick);
79
86
  useEffect(() => {
80
87
  const updateSize = debounce(() => {
@@ -97,8 +104,8 @@ const VideoBlock = (props) => {
97
104
  }
98
105
  return (React.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
99
106
  iframeContent,
100
- previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
101
- React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
107
+ previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
108
+ isHovered && previewVideo ? (React.createElement("video", { src: previewVideo, className: b('video'), autoPlay: true, muted: true, loop: true, playsInline: true })) : (React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad })),
102
109
  playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button', { corner: playButtonCorner }) },
103
110
  React.createElement(Icon, { className: b('icon'), data: PlayFill, size: playButtonCorner ? 16 : 24 })))))));
104
111
  };
@@ -194,6 +194,7 @@ export interface MediaComponentYoutubeProps {
194
194
  youtube: string;
195
195
  aspectRatio?: number;
196
196
  previewImg?: string;
197
+ previewVideo?: string;
197
198
  playButtonCorner?: boolean;
198
199
  fullscreen?: boolean;
199
200
  }
@@ -4162,6 +4162,9 @@ export declare const cardSchemas: {
4162
4162
  previewImg: {
4163
4163
  type: string;
4164
4164
  };
4165
+ previewVideo: {
4166
+ type: string;
4167
+ };
4165
4168
  dataLens: {
4166
4169
  oneOf: ({
4167
4170
  type: string;
@@ -1379,6 +1379,9 @@ export declare const MediaProps: {
1379
1379
  previewImg: {
1380
1380
  type: string;
1381
1381
  };
1382
+ previewVideo: {
1383
+ type: string;
1384
+ };
1382
1385
  dataLens: {
1383
1386
  oneOf: ({
1384
1387
  type: string;
@@ -644,6 +644,9 @@ export const MediaProps = {
644
644
  previewImg: {
645
645
  type: 'string',
646
646
  },
647
+ previewVideo: {
648
+ type: 'string',
649
+ },
647
650
  dataLens: DataLensProps,
648
651
  fullscreen: {
649
652
  type: 'boolean',
@@ -224,6 +224,9 @@ export declare const LayoutItem: {
224
224
  previewImg: {
225
225
  type: string;
226
226
  };
227
+ previewVideo: {
228
+ type: string;
229
+ };
227
230
  dataLens: {
228
231
  oneOf: ({
229
232
  type: string;
@@ -296,6 +296,9 @@ export declare const MediaCardBlock: {
296
296
  previewImg: {
297
297
  type: string;
298
298
  };
299
+ previewVideo: {
300
+ type: string;
301
+ };
299
302
  dataLens: {
300
303
  oneOf: ({
301
304
  type: string;
@@ -72,6 +72,7 @@ unpredictable css rules order in build */
72
72
  .pc-mini-case-card__title {
73
73
  font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
74
74
  line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
75
+ margin: 0;
75
76
  font-weight: var(--g-text-accent-font-weight);
76
77
  }
77
78
  @media (max-width: 769px) {
@@ -110,6 +111,14 @@ unpredictable css rules order in build */
110
111
  min-width: 100%;
111
112
  }
112
113
  }
114
+ .pc-mini-case-card__inner-container {
115
+ min-height: 80px;
116
+ display: flex;
117
+ flex-direction: column;
118
+ justify-content: center;
119
+ align-items: center;
120
+ text-align: center;
121
+ }
113
122
  .pc-mini-case-card__value {
114
123
  font-size: 40px;
115
124
  line-height: 48px;
@@ -31,7 +31,7 @@ const MiniCaseCardHead = ({ title, shouldShowStory, showQuote, text, quote, avat
31
31
  return null;
32
32
  }
33
33
  return (React.createElement("div", { className: b('head') },
34
- title && (React.createElement("div", { className: b('title') },
34
+ title && (React.createElement("h2", { className: `${b('title')} title-font-family` },
35
35
  React.createElement(HTML, null, title))),
36
36
  shouldShowStory && React.createElement(HTML, { className: b('text') }, text),
37
37
  showQuote && quote && React.createElement(HTML, { className: b('quote') }, quote),
@@ -47,7 +47,8 @@ const MiniCaseCard = ({ title, showStory = true, showQuote = true, text, quote,
47
47
  React.createElement(MiniCaseCardHead, { title: title, shouldShowStory: shouldShowStory, showQuote: showQuote, text: text, quote: quote, avatar: avatar, author: author, position: position })),
48
48
  React.createElement(MiniCaseCardTags, { tagUsecase: tagUsecase, tagIndustry: tagIndustry })),
49
49
  React.createElement("div", { className: b('rhs') }, data === null || data === void 0 ? void 0 : data.map((item, index) => (React.createElement("div", { key: index, className: b('box'), style: backgroundData ? { background: backgroundData } : undefined },
50
- React.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
51
- React.createElement("div", { className: b('label') }, item.label)))))));
50
+ React.createElement("div", { className: b('inner-container') },
51
+ React.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
52
+ React.createElement("div", { className: b('label') }, item.label))))))));
52
53
  };
53
54
  export default MiniCaseCard;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.258",
3
+ "version": "5.31.260",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {