@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.
- package/build/cjs/components/Media/Media.js +1 -1
- package/build/cjs/components/VideoBlock/VideoBlock.d.ts +2 -1
- package/build/cjs/components/VideoBlock/VideoBlock.js +10 -4
- package/build/cjs/models/constructor-items/common.d.ts +2 -0
- package/build/esm/components/Media/Media.js +1 -1
- package/build/esm/components/VideoBlock/VideoBlock.d.ts +2 -1
- package/build/esm/components/VideoBlock/VideoBlock.js +10 -4
- package/build/esm/models/constructor-items/common.d.ts +2 -0
- package/package.json +1 -1
- package/server/models/constructor-items/common.d.ts +2 -0
- package/widget/index.js +1 -1
|
@@ -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
|
@@ -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;
|