@doyourjob/gravity-ui-page-constructor 5.31.283 → 5.31.284
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/components/Media/Media.js +3 -2
- package/build/cjs/components/VideoBlock/VideoBlock.css +8 -0
- package/build/cjs/components/VideoBlock/VideoBlock.d.ts +1 -0
- package/build/cjs/components/VideoBlock/VideoBlock.js +5 -3
- package/build/cjs/models/constructor-items/common.d.ts +1 -0
- package/build/esm/components/Media/Media.js +3 -2
- package/build/esm/components/VideoBlock/VideoBlock.css +8 -0
- package/build/esm/components/VideoBlock/VideoBlock.d.ts +1 -0
- package/build/esm/components/VideoBlock/VideoBlock.js +5 -3
- package/build/esm/models/constructor-items/common.d.ts +1 -0
- package/package.json +1 -1
- package/server/models/constructor-items/common.d.ts +1 -0
- package/widget/index.js +1 -1
|
@@ -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, previewVideo, 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, playButtonText, 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, previewVideo: previewVideo, 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, playButtonText: playButtonText, 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 });
|
|
@@ -83,6 +83,7 @@ const Media = (props) => {
|
|
|
83
83
|
ratio,
|
|
84
84
|
youtubeClassName,
|
|
85
85
|
playButtonCorner,
|
|
86
|
+
playButtonText,
|
|
86
87
|
autoplay,
|
|
87
88
|
margins,
|
|
88
89
|
]);
|
|
@@ -57,6 +57,14 @@ unpredictable css rules order in build */
|
|
|
57
57
|
width: 44px;
|
|
58
58
|
height: 44px;
|
|
59
59
|
}
|
|
60
|
+
.pc-VideoBlock__button_text {
|
|
61
|
+
height: 61px;
|
|
62
|
+
width: auto;
|
|
63
|
+
border-radius: 16px;
|
|
64
|
+
font-size: 24px;
|
|
65
|
+
line-height: 35px;
|
|
66
|
+
padding: 0 28px;
|
|
67
|
+
}
|
|
60
68
|
.pc-VideoBlock__icon {
|
|
61
69
|
margin-left: 1px;
|
|
62
70
|
}
|
|
@@ -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, previewVideo, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
|
|
52
|
+
const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonText, 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);
|
|
@@ -110,7 +110,9 @@ const VideoBlock = (props) => {
|
|
|
110
110
|
iframeContent,
|
|
111
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
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 })),
|
|
113
|
-
playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button', {
|
|
114
|
-
|
|
113
|
+
playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button', {
|
|
114
|
+
corner: playButtonCorner,
|
|
115
|
+
text: Boolean(playButtonText),
|
|
116
|
+
}) }, playButtonText ? (react_1.default.createElement("div", { className: b('button-text') }, playButtonText)) : (react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: playButtonCorner ? 16 : 24 }))))))));
|
|
115
117
|
};
|
|
116
118
|
exports.default = VideoBlock;
|
|
@@ -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, previewVideo, 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, playButtonText, 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, previewVideo: previewVideo, 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, playButtonText: playButtonText, 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 });
|
|
@@ -80,6 +80,7 @@ export const Media = (props) => {
|
|
|
80
80
|
ratio,
|
|
81
81
|
youtubeClassName,
|
|
82
82
|
playButtonCorner,
|
|
83
|
+
playButtonText,
|
|
83
84
|
autoplay,
|
|
84
85
|
margins,
|
|
85
86
|
]);
|
|
@@ -57,6 +57,14 @@ unpredictable css rules order in build */
|
|
|
57
57
|
width: 44px;
|
|
58
58
|
height: 44px;
|
|
59
59
|
}
|
|
60
|
+
.pc-VideoBlock__button_text {
|
|
61
|
+
height: 61px;
|
|
62
|
+
width: auto;
|
|
63
|
+
border-radius: 16px;
|
|
64
|
+
font-size: 24px;
|
|
65
|
+
line-height: 35px;
|
|
66
|
+
padding: 0 28px;
|
|
67
|
+
}
|
|
60
68
|
.pc-VideoBlock__icon {
|
|
61
69
|
margin-left: 1px;
|
|
62
70
|
}
|
|
@@ -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, previewVideo, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
|
|
48
|
+
const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonText, 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);
|
|
@@ -106,7 +106,9 @@ const VideoBlock = (props) => {
|
|
|
106
106
|
iframeContent,
|
|
107
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
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 })),
|
|
109
|
-
playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button', {
|
|
110
|
-
|
|
109
|
+
playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button', {
|
|
110
|
+
corner: playButtonCorner,
|
|
111
|
+
text: Boolean(playButtonText),
|
|
112
|
+
}) }, playButtonText ? (React.createElement("div", { className: b('button-text') }, playButtonText)) : (React.createElement(Icon, { className: b('icon'), data: PlayFill, size: playButtonCorner ? 16 : 24 }))))))));
|
|
111
113
|
};
|
|
112
114
|
export default VideoBlock;
|
package/package.json
CHANGED