@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.
@@ -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
  }
@@ -16,6 +16,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
16
16
  previewVideo?: string;
17
17
  playButton?: React.ReactNode;
18
18
  playButtonCorner?: boolean;
19
+ playButtonText?: string;
19
20
  playButtonId?: string;
20
21
  height?: number;
21
22
  ratio?: number | 'auto';
@@ -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', { corner: playButtonCorner }) },
114
- react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: playButtonCorner ? 16 : 24 })))))));
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;
@@ -196,6 +196,7 @@ export interface MediaComponentYoutubeProps {
196
196
  previewImg?: string;
197
197
  previewVideo?: string;
198
198
  playButtonCorner?: boolean;
199
+ playButtonText?: string;
199
200
  fullscreen?: boolean;
200
201
  }
201
202
  export interface MediaComponentImageProps {
@@ -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
  }
@@ -17,6 +17,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
17
17
  previewVideo?: string;
18
18
  playButton?: React.ReactNode;
19
19
  playButtonCorner?: boolean;
20
+ playButtonText?: string;
20
21
  playButtonId?: string;
21
22
  height?: number;
22
23
  ratio?: number | 'auto';
@@ -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', { corner: playButtonCorner }) },
110
- React.createElement(Icon, { className: b('icon'), data: PlayFill, size: playButtonCorner ? 16 : 24 })))))));
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;
@@ -196,6 +196,7 @@ export interface MediaComponentYoutubeProps {
196
196
  previewImg?: string;
197
197
  previewVideo?: string;
198
198
  playButtonCorner?: boolean;
199
+ playButtonText?: string;
199
200
  fullscreen?: boolean;
200
201
  }
201
202
  export interface MediaComponentImageProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.283",
3
+ "version": "5.31.284",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -196,6 +196,7 @@ export interface MediaComponentYoutubeProps {
196
196
  previewImg?: string;
197
197
  previewVideo?: string;
198
198
  playButtonCorner?: boolean;
199
+ playButtonText?: string;
199
200
  fullscreen?: boolean;
200
201
  }
201
202
  export interface MediaComponentImageProps {