@gravity-ui/page-constructor 5.25.0 → 5.26.1

package/build/esm/blocks/Media/schema.d.ts

@@ -156,6 +156,9 @@ export declare const Media: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         youtube: {
@@ -275,7 +278,8 @@ export declare const Media: {
             })[];
         };
         ratio: {
-            type: string;
+            type: string[];
+            pattern: string;
         };
         iframe: {
             type: string;
@@ -782,6 +786,9 @@ export declare const MediaBlock: {
                                 ariaLabel: {
                                     type: string;
                                 };
+                                contain: {
+                                    type: string;
+                                };
                             };
                         };
                         youtube: {
@@ -901,7 +908,8 @@ export declare const MediaBlock: {
                             })[];
                         };
                         ratio: {
-                            type: string;
+                            type: string[];
+                            pattern: string;
                         };
                         iframe: {
                             type: string;

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts

@@ -172,6 +172,9 @@ export declare const PromoFeaturesItem: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 };
                 youtube: {
@@ -291,7 +294,8 @@ export declare const PromoFeaturesItem: {
                     })[];
                 };
                 ratio: {
-                    type: string;
+                    type: string[];
+                    pattern: string;
                 };
                 iframe: {
                     type: string;

package/build/esm/blocks/Tabs/schema.d.ts

@@ -167,6 +167,9 @@ export declare const tabsItem: {
                             ariaLabel: {
                                 type: string;
                             };
+                            contain: {
+                                type: string;
+                            };
                         };
                     };
                     youtube: {
@@ -286,7 +289,8 @@ export declare const tabsItem: {
                         })[];
                     };
                     ratio: {
-                        type: string;
+                        type: string[];
+                        pattern: string;
                     };
                     iframe: {
                         type: string;

package/build/esm/components/Media/Video/Video.js

@@ -29,8 +29,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
+        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -1,5 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-ReactPlayer video {
+  background-color: var(--pc-color-video-player-bg, #000);
+  object-fit: cover;
+}
 .pc-ReactPlayer__wrapper {
   position: relative;
   padding-top: 56.25%;
@@ -63,6 +67,9 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: opacity 300ms;
 }
+.pc-ReactPlayer_contain video {
+  object-fit: contain;
+}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

package/build/esm/components/ReactPlayer/ReactPlayer.d.ts

@@ -10,6 +10,7 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     onClickPreview?: () => void;
     height?: number;
     ratio?: number;
+    autoRatio?: boolean;
     children?: React.ReactNode;
 }
 export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -21,7 +21,7 @@ const FPS = 60;
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
@@ -33,6 +33,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [playedPercent, setPlayedPercent] = useState(0);
     const [currentHeight, setCurrentHeight] = useState(height);
     const [width, setWidth] = useState(0);
+    const [actualRatio, setActualRatio] = useState();
     const [muted, setMuted] = useState(mute);
     const [started, setStarted] = useState(autoPlay);
     const [ended, setEnded] = useState(false);
@@ -103,7 +104,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio !== null && ratio !== void 0 ? ratio : (autoRatio ? actualRatio : undefined))));
             }
         }, 200);
         updateSize();
@@ -111,7 +112,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, [ratio]);
+    }, [actualRatio, autoRatio, ratio]);
     const playEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
     const stopEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = useMemo(() => {
@@ -181,6 +182,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setEnded(false);
         }
     }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
+    const onReady = useCallback((player) => {
+        setPlayerRef(player);
+        const videoElement = player.getInternalPlayer();
+        const videoWidth = videoElement.videoWidth;
+        const videoHeight = videoElement.videoHeight;
+        if (videoWidth && videoHeight) {
+            setActualRatio(videoHeight / videoWidth);
+        }
+    }, []);
     const onProgress = useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
@@ -221,8 +231,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     return (React.createElement("div", { className: b({
             wrapper: !currentHeight,
             controls,
+            contain,
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
-        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
                 ? undefined
                 : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                 file: {

package/build/esm/editor/components/AddBlock/AddBlock.js

@@ -1,22 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 // TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Popup, TextInput } from '@gravity-ui/uikit';
 import { blockMap } from '../../../constructor-items';
 import { block } from '../../../utils';
-import EditorBlocksData from '../../data';
+import { getEditorBlocksData } from '../../data';
 import './AddBlock.css';
 const b = block('add-block');
 const sortedBlockNames = Object.keys(blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = useState(false);
     const [search, setSearch] = useState('');
+    const [editorBlocksData, setEditorBlocksData] = useState(null);
     const ref = useRef(null);
-    const blocks = useMemo(() => sortedBlockNames.filter((blockName) => EditorBlocksData[blockName].meta.title
-        .toLocaleLowerCase()
-        .startsWith(search.toLocaleLowerCase())), [search]);
+    const blocks = useMemo(() => {
+        if (!editorBlocksData) {
+            return [];
+        }
+        return sortedBlockNames.filter((blockName) => {
+            var _a;
+            return (_a = editorBlocksData[blockName]) === null || _a === void 0 ? void 0 : _a.meta.title.toLocaleLowerCase().startsWith(search.toLocaleLowerCase());
+        });
+    }, [editorBlocksData, search]);
+    useEffect(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await getEditorBlocksData();
+            setEditorBlocksData(data);
+        };
+        loadEditorBlocksData();
+    }, []);
     return (React.createElement("div", { className: b(null, className), ref: ref },
         React.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
@@ -28,8 +42,11 @@ const AddBlock = ({ onAdd, className }) => {
                 React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
                 var _a;
-                const blockData = EditorBlocksData[blockName];
-                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
+                if (!blockData) {
+                    return null;
+                }
+                const Preview = blockData.preview;
                 return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);

package/build/esm/editor/data/index.d.ts

@@ -9,5 +9,6 @@ export interface EdiorBlockData {
         description?: string;
     };
 }
-declare const EditorBlocksData: Record<BlockType, EdiorBlockData>;
-export default EditorBlocksData;
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+declare function getEditorBlocksData(): Promise<EditorBlocksData>;
+export { EditorBlocksData, getEditorBlocksData };

package/build/esm/editor/data/index.js

@@ -1,10 +1,14 @@
 import { BlockType } from '../../models';
 import { formatBlockName } from '../utils';
 import DefaultPreview from './previews/default-preview';
-const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+import HeaderBlock from './previews/header-block';
+const getBlockTemplate = (blockType) => import(`./templates/${blockType}.json`).then((data) => data.default);
 const getBlockPreview = (blockType) => {
     try {
-        return require(`./previews/${blockType}.tsx`).default;
+        if (blockType === BlockType.HeaderBlock) {
+            return HeaderBlock;
+        }
+        return DefaultPreview;
     }
     catch (err) {
         /*eslint-disable no-console */
@@ -12,13 +16,15 @@ const getBlockPreview = (blockType) => {
         return DefaultPreview;
     }
 };
-const EditorBlocksData = Object.values(BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || formatBlockName(blockType);
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
-    return previewData;
-}, {});
-export default EditorBlocksData;
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || formatBlockName(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+export { getEditorBlocksData };

package/build/esm/models/constructor-items/common.d.ts

@@ -127,6 +127,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -179,7 +180,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
 export interface MediaComponentVideoIframeProps {

package/build/esm/schema/constants.d.ts

@@ -1549,6 +1549,9 @@ export declare const cardSchemas: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -1590,7 +1593,8 @@ export declare const cardSchemas: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/build/esm/schema/validators/common.d.ts

@@ -203,6 +203,9 @@ export declare const VideoProps: {
         ariaLabel: {
             type: string;
         };
+        contain: {
+            type: string;
+        };
     };
 };
 export declare const ThemeProps: {
@@ -365,6 +368,9 @@ export declare const BackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         height: {
@@ -1129,6 +1135,9 @@ export declare const MediaProps: {
             ariaLabel: {
                 type: string;
             };
+            contain: {
+                type: string;
+            };
         };
     };
     youtube: {
@@ -1248,7 +1257,8 @@ export declare const MediaProps: {
         })[];
     };
     ratio: {
-        type: string;
+        type: string[];
+        pattern: string;
     };
     iframe: {
         type: string;

package/build/esm/schema/validators/common.js

@@ -160,6 +160,9 @@ export const VideoProps = {
         ariaLabel: {
             type: 'string',
         },
+        contain: {
+            type: 'boolean',
+        },
     },
 };
 export const ThemeProps = {
@@ -542,7 +545,8 @@ export const MediaProps = {
         anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
     },
     ratio: {
-        type: 'number',
+        type: ['number', 'string'],
+        pattern: '^auto$',
     },
     iframe: Object.assign({}, IframeProps),
     margins: {

package/build/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -157,6 +157,9 @@ export declare const LayoutItem: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -276,7 +279,8 @@ export declare const LayoutItem: {
                 })[];
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/build/esm/sub-blocks/MediaCard/schema.d.ts

@@ -240,6 +240,9 @@ export declare const MediaCardBlock: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -281,7 +284,8 @@ export declare const MediaCardBlock: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.25.0",
+  "version": "5.26.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -127,6 +127,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -179,7 +180,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
 export interface MediaComponentVideoIframeProps {

package/styles/variables.scss

@@ -37,6 +37,7 @@ $animationDuration: 300ms;
 
 //colors
 $videoPlayButtonGrey: #eff2f8;
+$videoPlayerBg: #000;
 $secondary: var(--g-color-text-secondary);
 $lightSecondary: var(--g-color-text-light-secondary);