@gravity-ui/page-constructor 1.8.2 → 1.9.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.9.0](https://github.com/gravity-ui/page-constructor/compare/v1.8.2...v1.9.0) (2022-12-05)
+
+
+### Features
+
+* **Tabs:** change tabs to buttons ([#63](https://github.com/gravity-ui/page-constructor/issues/63)) ([f6195f3](https://github.com/gravity-ui/page-constructor/commit/f6195f3115bb5136c17336edb8a0ff64dcc50de5))
+
 ## [1.8.2](https://github.com/gravity-ui/page-constructor/compare/v1.8.1...v1.8.2) (2022-12-02)
 
 

package/build/cjs/blocks/Tabs/Tabs.css

@@ -1,68 +1,108 @@
-.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-TabsBlock__block-title {
-  margin-bottom: 12px;
+.pc-tabs-block__block-title {
+  margin-bottom: 24px;
 }
-.pc-TabsBlock__tabs.pc-TabsBlock__tabs {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  margin-bottom: 32px;
+.pc-tabs-block__block-title_centered {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
 }
-
-.pc-TabsBlock__image {
+.pc-tabs-block__tabs_centered {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.pc-tabs-block__row_reverse {
+  flex-direction: row-reverse;
+}
+.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
+  margin: 24px 32px 0 0;
+}
+.pc-tabs-block__image {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
-.pc-TabsBlock__image, .pc-TabsBlock__media {
+.pc-tabs-block__image, .pc-tabs-block__media {
   box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
 }
-.pc-TabsBlock__caption {
+.pc-tabs-block__caption {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
   margin: 12px 0 0;
   color: var(--yc-color-text-secondary);
 }
-.pc-TabsBlock__content {
+.pc-tabs-block__content {
   display: flex;
   flex-direction: column;
 }
-.pc-TabsBlock__content-wrapper_margin {
+.pc-tabs-block__content_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block__col_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block__content-wrapper_margin {
   margin: 24px 0 0 32px;
 }
-.pc-TabsBlock__content-title {
+.pc-tabs-block__content-title {
   margin: 0 auto 12px;
 }
-.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
 
-.pc-TabsBlock__tabs, .pc-TabsBlock__link {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-}
 @media (max-width: 769px) {
-  .pc-TabsBlock__content-wrapper_margin {
+  .pc-tabs-block__tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 40px;
+  }
+  .pc-tabs-block__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
+  .pc-tabs-block__row_reverse {
+    flex-direction: column-reverse;
+  }
+  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
+}
+@media (max-width: 577px) {
+  .pc-tabs-block__tabs {
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 16px;
+  }
 }
 @media (min-width: 769px) {
-  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__media {
+  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__media {
+  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -70,12 +110,12 @@ unpredictable css rules order in build */
   }
 }
 @media (min-width: 769px) {
-  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__image {
+  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__image {
+  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

package/build/cjs/blocks/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { TabsBlockProps } from '../../models';
-export declare const TabsBlock: ({ items, title, description, animated }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -3,53 +3,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
-const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
 const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
 const BlockHeader_1 = (0, tslib_1.__importDefault)(require("../../components/BlockHeader/BlockHeader"));
 const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components/FullscreenImage/FullscreenImage"));
 const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
-const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_2 = require("../../components/Media/Image/utils");
-const b = (0, utils_1.block)('TabsBlock');
-const TabsBlock = ({ items, title, description, animated }) => {
+const ButtonTabs_1 = (0, tslib_1.__importDefault)(require("../../components/ButtonTabs/ButtonTabs"));
+const sub_blocks_1 = require("../../sub-blocks");
+const VideoBlock_1 = require("../../components/VideoBlock/VideoBlock");
+const b = (0, utils_1.block)('tabs-block');
+const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+    var _a;
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
+    const isReverse = direction === 'content-media';
+    const ref = (0, react_1.useRef)(null);
+    const mediaWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const mediaHeight = mediaWidth && (0, VideoBlock_1.getHeight)(mediaWidth);
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
         imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
+    const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
+    const textContent = activeTabData && showText && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
+        react_1.default.createElement("div", { className: b('content-wrapper', {
+                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
+            }) },
+            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
+                    ...(activeTabData.link ? [activeTabData.link] : []),
+                    ...(activeTabData.links || []),
+                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
+    const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
+            all: grid_1.GridColumnOrderClasses.Last,
+            md: grid_1.GridColumnOrderClasses.First,
+        }, className: b('col', { centered: centered }) },
+        react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        imageProps && (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
+            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption))))));
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title') }),
-        react_1.default.createElement(uikit_1.Tabs, { className: b('tabs'), items: tabs, activeTab: activeTab, onSelectTab: setActiveTab, size: "l" }),
-        activeTabData && (react_1.default.createElement(grid_1.Row, null,
-            showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
-                    all: grid_1.GridColumnOrderClasses.Last,
-                    md: grid_1.GridColumnOrderClasses.First,
-                } },
-                (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
-                imageProps && (react_1.default.createElement(react_1.Fragment, null,
-                    react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
-                    activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
-            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
-                react_1.default.createElement("div", { className: b('content-wrapper', {
-                        margin: Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps),
-                    }) },
-                    react_1.default.createElement("h4", { className: b('content-title') },
-                        react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.title, modifiers: { constructor: true } })),
-                    react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.text, modifiers: { constructor: true } }),
-                    react_1.default.createElement(Links_1.default, { links: [
-                            ...(activeTabData.link ? [activeTabData.link] : []),
-                            ...(activeTabData.links || []),
-                        ], className: b('link') })))))));
+        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
+                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+        activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
+            mediaContent,
+            textContent))));
 };
 exports.TabsBlock = TabsBlock;
 exports.default = exports.TabsBlock;

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

@@ -6,12 +6,6 @@ export declare const tabsItem: {
         tabName: {
             type: string;
         };
-        title: {
-            type: string;
-        };
-        text: {
-            type: string;
-        };
         caption: {
             type: string;
         };
@@ -184,17 +178,6 @@ export declare const tabsItem: {
                 when: {};
             };
         };
-        links: {
-            type: string;
-            items: {
-                type: string;
-                properties: {
-                    when: {
-                        type: string;
-                    };
-                };
-            };
-        };
         image: {
             oneOf: ({
                 oneOf: ({
@@ -215,6 +198,66 @@ export declare const tabsItem: {
                 properties: {};
             })[];
         };
+        title?: {
+            oneOf: ({
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                    };
+                    textSize: {
+                        type: string;
+                        enum: string[];
+                    };
+                    url: {
+                        type: string;
+                    };
+                    resetMargin: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+            })[];
+        } | undefined;
+        text?: {
+            type: string;
+        } | undefined;
+        additionalInfo?: {
+            type: string;
+        } | undefined;
+        size?: {
+            type: string;
+            enum: string[];
+        } | undefined;
+        links?: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        } | undefined;
+        buttons?: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        } | undefined;
+        theme?: {
+            type: string;
+            enum: string[];
+        } | undefined;
     };
 };
 export declare const TabsBlock: {
@@ -245,6 +288,14 @@ export declare const TabsBlock: {
             description: {
                 type: string;
             };
+            tabsColSizes: {};
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            centered: {
+                type: string;
+            };
             items: {
                 type: string;
                 items: {

package/build/cjs/blocks/Tabs/schema.js

@@ -1,35 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = exports.tabsItem = void 0;
+const tslib_1 = require("tslib");
 const utils_1 = require("../../schema/validators/utils");
 const common_1 = require("../../schema/validators/common");
 const schema_1 = require("../../components/Image/schema");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const schema_2 = require("../../sub-blocks/Content/schema");
+const TabsItemContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size', 'colSizes', 'centered', 'theme']);
 exports.tabsItem = {
     type: 'object',
     additionalProperties: false,
-    required: ['tabName', 'text'],
-    properties: {
-        tabName: {
+    required: ['tabName'],
+    properties: Object.assign(Object.assign({}, TabsItemContentProps), { tabName: {
             type: 'string',
-        },
-        title: {
+        }, caption: {
             type: 'string',
-        },
-        text: {
-            type: 'string',
-        },
-        caption: {
-            type: 'string',
-        },
-        media: (0, common_1.withTheme)({
+        }, media: (0, common_1.withTheme)({
             type: 'object',
             properties: common_1.MediaProps,
-        }),
+        }), 
         //TODO deprecated
-        link: common_1.LinkProps,
-        links: (0, utils_1.filteredArray)(common_1.LinkProps),
-        image: (0, common_1.withTheme)(schema_1.ImageProps),
-    },
+        link: common_1.LinkProps, image: (0, common_1.withTheme)(schema_1.ImageProps) }),
 };
 exports.TabsBlock = {
     'tabs-block': {
@@ -37,6 +29,9 @@ exports.TabsBlock = {
         required: ['title', 'items'],
         properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { title: common_1.TitleProps, description: {
                 type: 'string',
-            }, items: (0, utils_1.filteredArray)(exports.tabsItem) }),
+            }, tabsColSizes: common_1.containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: common_1.sizeNumber })), {}), direction: {
+                type: 'string',
+                enum: common_1.mediaDirection,
+            }, centered: { type: 'boolean' }, items: (0, utils_1.filteredArray)(exports.tabsItem) }),
     },
 };

package/build/cjs/components/ButtonTabs/ButtonTabs.css

@@ -0,0 +1,12 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-button-tabs {
+  margin-bottom: 20px;
+}
+.pc-button-tabs__item {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+.pc-button-tabs__item_active {
+  pointer-events: none;
+}

package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../../models';
+export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
+    id: string;
+    title: string;
+}
+export interface ButtonTabsProps {
+    className?: string;
+    items: ButtonTabsItemProps[];
+    activeTab?: string;
+    onSelectTab?: (tabId: string) => void;
+}
+declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
+export default ButtonTabs;

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const index_1 = require("../index");
+const b = (0, utils_1.block)('button-tabs');
+const ButtonTabs = (props) => {
+    const { className, items, activeTab, onSelectTab } = props;
+    const activeTabId = (0, react_1.useMemo)(() => {
+        if (activeTab) {
+            return activeTab;
+        }
+        return items[0].id;
+    }, [activeTab, items]);
+    const handleClick = (0, react_1.useCallback)((tabId) => {
+        if (onSelectTab) {
+            onSelectTab(tabId);
+        }
+    }, [onSelectTab]);
+    return (react_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
+        const isActive = item.id === activeTabId;
+        return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
+    })));
+};
+exports.default = ButtonTabs;

package/build/cjs/components/Image/Image.css

@@ -0,0 +1,4 @@
+.pc-image {
+  height: 100%;
+  width: 100%;
+}

package/build/cjs/components/Image/Image.js

@@ -4,6 +4,8 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('image');
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -20,7 +22,7 @@ const Image = (props) => {
         disableCompress ||
         imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    return (react_1.default.createElement("picture", null,
+    return (react_1.default.createElement("picture", { className: b() },
         mobile && (react_1.default.createElement(react_1.Fragment, null,
             !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
             react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),

package/build/cjs/components/Media/Media.js

@@ -22,7 +22,7 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });

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

@@ -31,15 +31,16 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { 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, metrika: metrika }));
+        return (react_1.default.createElement(ReactPlayer_1.default, { 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, metrika: metrika, height: height }));
     }, [
         video,
-        metrika,
+        height,
+        videoClassName,
         previewImg,
         playVideo,
-        videoClassName,
         commonPlayButton,
         customBarControlsClassName,
+        metrika,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },

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

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

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -19,7 +19,7 @@ const FPS = 60;
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -28,7 +28,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [playerRef, setPlayerRef] = (0, react_1.useState)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
     const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
-    const [height, setHeight] = (0, react_1.useState)(0);
+    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
     const [width, setWidth] = (0, react_1.useState)(0);
     const [muted, setMuted] = (0, react_1.useState)(mute);
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
@@ -73,7 +73,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setHeight(Math.floor(getHeight(newWidth)));
+                setCurrentHeight(Math.floor(getHeight(newWidth)));
             }
         }, 200);
         updateSize();
@@ -179,8 +179,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (react_1.default.createElement("div", { className: b({ wrapper: !height }, className), ref: ref, onClick: handleClick },
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: height || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, muted: muted, controls: controls === models_1.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: onPause, onProgress: onProgress, onEnded: onEnded }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/build/cjs/components/VideoBlock/VideoBlock.d.ts

@@ -3,6 +3,7 @@ export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
     mute: number;
 };
+export declare function getHeight(width: number): number;
 export interface VideoBlockProps {
     id?: string;
     stream?: string;
@@ -11,6 +12,7 @@ export interface VideoBlockProps {
     className?: string;
     previewImg?: string;
     playButton?: React.ReactNode;
+    height?: number;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AUTOPLAY_ATTRIBUTES = void 0;
+exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
@@ -36,14 +36,15 @@ function getVideoSrc(stream, record) {
 function getHeight(width) {
     return (width / 16) * 9;
 }
+exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height } = props;
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const [hidePreview, setHidePreview] = (0, react_1.useState)(false);
     const norender = (!stream && !record) || !src;
-    const [height, setHeight] = (0, react_1.useState)();
+    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
     const fullId = `${iframeId}-${id || src}`;
     const onPreviewClick = (0, react_1.useCallback)(() => {
         if (iframeRef.current) {
@@ -53,14 +54,14 @@ const VideoBlock = (props) => {
     }, [src, attributes]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
-            setHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
+            setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
         window.addEventListener('resize', updateSize);
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, []);
+    }, [height]);
     (0, react_1.useEffect)(() => {
         if (norender) {
             return;
@@ -89,7 +90,7 @@ const VideoBlock = (props) => {
     if (norender) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height } }, previewImg && !hidePreview && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image') }),
         playButton || (react_1.default.createElement("button", { className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));