@doyourjob/gravity-ui-page-constructor 5.31.243 → 5.31.244

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.
@@ -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, 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, 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 });
@@ -4,7 +4,7 @@ export declare const AUTOPLAY_ATTRIBUTES: {
4
4
  autoplay: number;
5
5
  mute: number;
6
6
  };
7
- export declare function getHeight(width: number): number;
7
+ export declare function getHeight(width: number, ratio?: number | 'auto'): number;
8
8
  export interface VideoBlockProps extends AnalyticsEventsBase {
9
9
  id?: string;
10
10
  stream?: string;
@@ -17,6 +17,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
17
17
  playButtonCorner?: boolean;
18
18
  playButtonId?: string;
19
19
  height?: number;
20
+ ratio?: number | 'auto';
20
21
  fullscreen?: boolean;
21
22
  autoplay?: boolean;
22
23
  onImageLoad?: () => void;
@@ -38,12 +38,18 @@ function getYoutubeVideoSrc(stream, record) {
38
38
  }
39
39
  return src;
40
40
  }
41
- function getHeight(width) {
41
+ function getHeight(width, ratio) {
42
+ if (ratio === 'auto') {
43
+ return (width / 16) * 9;
44
+ }
45
+ if (ratio) {
46
+ return width / ratio;
47
+ }
42
48
  return (width / 16) * 9;
43
49
  }
44
50
  exports.getHeight = getHeight;
45
51
  const VideoBlock = (props) => {
46
- const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
52
+ const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
47
53
  const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
48
54
  const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
49
55
  const ref = (0, react_1.useRef)(null);
@@ -76,14 +82,14 @@ const VideoBlock = (props) => {
76
82
  const { onKeyDown: onPreviewKeyDown } = (0, uikit_1.useActionHandlers)(onPreviewClick);
77
83
  (0, react_1.useEffect)(() => {
78
84
  const updateSize = (0, debounce_1.default)(() => {
79
- setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
85
+ setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth, ratio)) : undefined);
80
86
  }, 100);
81
87
  updateSize();
82
88
  window.addEventListener('resize', updateSize, { passive: true });
83
89
  return () => {
84
90
  window.removeEventListener('resize', updateSize);
85
91
  };
86
- }, [height]);
92
+ }, [height, ratio]);
87
93
  const iframeContent = (0, react_1.useMemo)(() => {
88
94
  return (react_1.default.createElement("iframe", { id: id || fullId, src: iframeSrc, width: "100%", height: "100%", title: (0, i18n_1.i18n)('iframe-title'), frameBorder: "0", allow: "autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock", loading: "lazy" }));
89
95
  }, [fullId, id, iframeSrc]);
@@ -188,9 +188,11 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
188
188
  }
189
189
  export interface MediaComponentVideoIframeProps {
190
190
  videoIframe: string;
191
+ aspectRatio?: number;
191
192
  }
192
193
  export interface MediaComponentYoutubeProps {
193
194
  youtube: string;
195
+ aspectRatio?: number;
194
196
  previewImg?: string;
195
197
  playButtonCorner?: boolean;
196
198
  fullscreen?: boolean;
@@ -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, 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, 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 });
@@ -5,7 +5,7 @@ export declare const AUTOPLAY_ATTRIBUTES: {
5
5
  autoplay: number;
6
6
  mute: number;
7
7
  };
8
- export declare function getHeight(width: number): number;
8
+ export declare function getHeight(width: number, ratio?: number | 'auto'): number;
9
9
  export interface VideoBlockProps extends AnalyticsEventsBase {
10
10
  id?: string;
11
11
  stream?: string;
@@ -18,6 +18,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
18
18
  playButtonCorner?: boolean;
19
19
  playButtonId?: string;
20
20
  height?: number;
21
+ ratio?: number | 'auto';
21
22
  fullscreen?: boolean;
22
23
  autoplay?: boolean;
23
24
  onImageLoad?: () => void;
@@ -35,11 +35,17 @@ function getYoutubeVideoSrc(stream, record) {
35
35
  }
36
36
  return src;
37
37
  }
38
- export function getHeight(width) {
38
+ export function getHeight(width, ratio) {
39
+ if (ratio === 'auto') {
40
+ return (width / 16) * 9;
41
+ }
42
+ if (ratio) {
43
+ return width / ratio;
44
+ }
39
45
  return (width / 16) * 9;
40
46
  }
41
47
  const VideoBlock = (props) => {
42
- const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
48
+ const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
43
49
  const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
44
50
  const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
45
51
  const ref = useRef(null);
@@ -72,14 +78,14 @@ const VideoBlock = (props) => {
72
78
  const { onKeyDown: onPreviewKeyDown } = useActionHandlers(onPreviewClick);
73
79
  useEffect(() => {
74
80
  const updateSize = debounce(() => {
75
- setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
81
+ setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth, ratio)) : undefined);
76
82
  }, 100);
77
83
  updateSize();
78
84
  window.addEventListener('resize', updateSize, { passive: true });
79
85
  return () => {
80
86
  window.removeEventListener('resize', updateSize);
81
87
  };
82
- }, [height]);
88
+ }, [height, ratio]);
83
89
  const iframeContent = useMemo(() => {
84
90
  return (React.createElement("iframe", { id: id || fullId, src: iframeSrc, width: "100%", height: "100%", title: i18n('iframe-title'), frameBorder: "0", allow: "autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock", loading: "lazy" }));
85
91
  }, [fullId, id, iframeSrc]);
@@ -188,9 +188,11 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
188
188
  }
189
189
  export interface MediaComponentVideoIframeProps {
190
190
  videoIframe: string;
191
+ aspectRatio?: number;
191
192
  }
192
193
  export interface MediaComponentYoutubeProps {
193
194
  youtube: string;
195
+ aspectRatio?: number;
194
196
  previewImg?: string;
195
197
  playButtonCorner?: boolean;
196
198
  fullscreen?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.243",
3
+ "version": "5.31.244",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -188,9 +188,11 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
188
188
  }
189
189
  export interface MediaComponentVideoIframeProps {
190
190
  videoIframe: string;
191
+ aspectRatio?: number;
191
192
  }
192
193
  export interface MediaComponentYoutubeProps {
193
194
  youtube: string;
195
+ aspectRatio?: number;
194
196
  previewImg?: string;
195
197
  playButtonCorner?: boolean;
196
198
  fullscreen?: boolean;