@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.
- package/build/cjs/blocks/Header/schema.d.ts +9 -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/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/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
- package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
- package/build/esm/blocks/Header/schema.d.ts +9 -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/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/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
- package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
- package/package.json +1 -1
- package/schema/index.js +1 -1
- 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;
|
|
@@ -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
|
};
|
|
@@ -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("
|
|
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:
|
|
53
|
-
|
|
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;
|
|
@@ -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;
|
|
@@ -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
|
};
|
|
@@ -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("
|
|
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:
|
|
51
|
-
|
|
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;
|