@gravity-ui/page-constructor 1.15.0-alpha.9 → 1.15.0

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

@@ -3,7 +3,6 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
-    blockName?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -4,31 +4,22 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
-const models_1 = require("../../models");
 const utils_2 = require("./utils");
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
-const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
-const COMPONENT_NAME = 'button';
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, blockName = COMPONENT_NAME } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "blockName"]);
+    const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'button-click',
-        type: models_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
     const onClick = (0, react_1.useCallback)(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
         if (onClickOrigin) {
             onClickOrigin();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    }, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };

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

@@ -8,7 +8,6 @@ export interface ButtonTabsProps {
     items: ButtonTabsItemProps[];
     activeTab?: string;
     onSelectTab?: (tabId: string) => void;
-    blockName?: string;
 }
 declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
 export default ButtonTabs;

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

@@ -3,18 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const models_1 = require("../../models");
 const index_1 = require("../index");
-const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('button-tabs');
-const COMPONENT_NAME = 'button-tabs';
 const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab, blockName = COMPONENT_NAME } = props;
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'button-tabs-click',
-        type: models_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
+    const { className, items, activeTab, onSelectTab } = props;
     const activeTabId = (0, react_1.useMemo)(() => {
         if (activeTab) {
             return activeTab;
@@ -22,11 +14,10 @@ const ButtonTabs = (props) => {
         return items[0].id;
     }, [activeTab, items]);
     const handleClick = (0, react_1.useCallback)((tabId) => {
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics();
         if (onSelectTab) {
             onSelectTab(tabId);
         }
-    }, [handleAnalytics, onSelectTab]);
+    }, [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' }));

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

@@ -1,6 +1,5 @@
 import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
 import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
-import { AnalyticsEvent } from '../../models/common';
 export interface CardBaseProps extends CardBaseParams {
     className?: string;
     bodyClassName?: string;
@@ -10,8 +9,6 @@ export interface CardBaseProps extends CardBaseParams {
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
-    blockName?: string;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/cjs/components/CardBase/CardBase.js

@@ -7,21 +7,13 @@ const utils_1 = require("../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const useMetrika_1 = require("../../hooks/useMetrika");
-const common_1 = require("../../models/common");
-const hooks_1 = require("../../hooks");
-const COMPONENT_NAME = 'card-base';
 const b = (0, utils_1.block)('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', blockName = COMPONENT_NAME, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'card-base-click',
-        type: common_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
         switch (child.type) {
@@ -54,7 +46,6 @@ const Layout = (props) => {
     const fullClassName = b({ border }, className);
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
         react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName }, cardContent));

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -7,23 +7,25 @@ const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const icons_1 = require("../../icons");
 const b = (0, utils_1.block)('FullScreenImage');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
-    const openModal = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const closeModal = (0, react_1.useCallback)(() => setIsOpened(false), []);
-    const showFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(true), []);
-    const hideFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(false), []);
+    const openModal = () => setIsOpened(true);
+    const closeModal = () => setIsOpened(false);
+    const showFullScreenIcon = () => setIsMouseEnter(true);
+    const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: 18, height: 18, className: b('icon') }))),
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
                 react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
-                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: 30, height: 30, className: b('icon', { hover: true }) })),
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 exports.default = FullScreenImage;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.css

@@ -0,0 +1,70 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-full-screen-media__modal-media_type_youtube, .pc-full-screen-media__modal-media_type_video video, .pc-full-screen-media__modal-media_type_image {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-width: 1232px;
+  max-height: 70vh;
+}
+
+.pc-full-screen-media__media {
+  cursor: pointer;
+}
+.pc-full-screen-media__media-wrapper {
+  cursor: pointer;
+  position: relative;
+}
+.pc-full-screen-media__modal-content {
+  position: relative;
+}
+.pc-full-screen-media__inline-media {
+  transform: translateZ(0);
+}
+.pc-full-screen-media__modal-media {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__modal-media_type_youtube {
+  width: 70vw;
+  height: calc(70vw * 9 / 16);
+}
+.pc-full-screen-media__modal .yc-modal__content, .pc-full-screen-media__modal-image {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--yc-color-base-simple-hover-solid);
+  cursor: pointer;
+  z-index: 10;
+}
+.pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.pc-full-screen-media__modal-content:hover .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper:hover .pc-full-screen-media__icon-wrapper {
+  opacity: 1;
+  pointer-events: inherit;
+}
+.pc-full-screen-media__icon {
+  color: var(--yc-color-text-hint);
+}
+.pc-full-screen-media__icon_hover:hover {
+  color: var(--yc-color-text-secondary);
+}
+@media (max-width: 577px) {
+  .pc-full-screen-media__icon-wrapper {
+    display: none;
+  }
+  .pc-full-screen-media__modal {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/build/cjs/components/FullscreenMedia/FullScreenMedia.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export interface FullScreenMediaProps {
+    showFullScreenIcon?: boolean;
+    children: (props?: ChildMediaRenderProps) => JSX.Element;
+}
+declare const FullScreenMedia: ({ children, showFullScreenIcon }: FullScreenMediaProps) => JSX.Element;
+export default FullScreenMedia;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const mobileContext_1 = require("../../context/mobileContext");
+const b = (0, utils_1.block)('full-screen-media');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
+const getMediaClass = (type) => b('modal-media', { type });
+const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const openModal = (e) => {
+        e.stopPropagation();
+        setIsOpened(true);
+    };
+    const closeModal = () => setIsOpened(false);
+    if (isMobile) {
+        return children();
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
+            children({ className: b('inline-media') }),
+            showFullScreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
+            react_1.default.createElement("div", { className: b('modal-content') },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
+                children({
+                    imageClassName: getMediaClass('image'),
+                    videoClassName: getMediaClass('video'),
+                    youtubeClassName: getMediaClass('youtube'),
+                    fullScreen: true,
+                }))))));
+};
+exports.default = FullScreenMedia;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -3,22 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const models_1 = require("../../models");
 const useMetrika_1 = require("../../hooks/useMetrika");
-const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('header-breadcrumbs');
-const COMPONENT_NAME = 'header-breadcrumbs';
 function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', blockName = COMPONENT_NAME, className, } = props;
+    const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'header-breadcrumbs-click',
-        type: models_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     return (react_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
         react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));

package/build/cjs/components/Link/Link.js

@@ -4,17 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
-const models_1 = require("../../models");
 const icons_1 = require("../../icons");
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const locationContext_1 = require("../../context/locationContext/locationContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
-const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('link-block');
 const WORD_JOINER_SYM = '\u200b';
-const COMPONENT_NAME = 'link';
 function getArrowSize(size) {
     switch (size) {
         case 'l':
@@ -28,25 +25,19 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, blockName = COMPONENT_NAME, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'link-click',
-        type: models_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const href = (0, utils_1.setUrlTld)(props.url, tld);
     const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, blockName: blockName }));
+                return react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick });
             case 'file-link':
             case 'underline':
                 return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));

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

@@ -9,10 +9,9 @@ const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const b = (0, utils_1.block)('Media');
-const COMPONENT_NAME = 'media-component';
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
-    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, blockName = COMPONENT_NAME, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, } = props;
+    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
         let result = [];
@@ -20,10 +19,10 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback, blockName: blockName }));
+            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, height: height }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -41,13 +40,12 @@ const Media = (props) => {
         hasVideoFallback,
         videoClassName,
         metrika,
-        analyticsEvents,
         playVideo,
         previewImg,
         playButton,
         customBarControlsClassName,
-        blockName,
         youtubeClassName,
+        fullScreen,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

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

@@ -7,9 +7,8 @@ const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPl
 const utils_1 = require("./utils");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('media-component-video');
-const COMPONENT_NAME = 'media-video';
 const Video = (props) => {
-    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, blockName = COMPONENT_NAME, } = props;
+    const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current) {
@@ -32,18 +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, analyticsEvents: analyticsEvents, height: height, blockName: blockName }));
+        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,
+        height,
         videoClassName,
         previewImg,
         playVideo,
         commonPlayButton,
         customBarControlsClassName,
         metrika,
-        analyticsEvents,
-        height,
-        blockName,
     ]);
     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/MetaInfo/MetaInfo.css

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-meta-info {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: var(--pc-media-card-meta-info-color);
+}
+.pc-meta-info__item:not(:first-child) {
+  margin-left: 16px;
+}

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

@@ -0,0 +1,6 @@
+import { ClassNameProps } from 'src/models';
+export interface MetaInfpoProps extends ClassNameProps {
+    items: string[];
+}
+declare const MetaInfo: ({ items, className }: MetaInfpoProps) => JSX.Element;
+export default MetaInfo;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('meta-info');
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("div", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+exports.default = MetaInfo;

package/build/cjs/components/MetaInfo/schema.d.ts

@@ -0,0 +1,8 @@
+declare const metaInfo: {
+    type: string;
+    items: {
+        type: string;
+        contentType: string;
+    };
+};
+export default metaInfo;

package/build/cjs/components/MetaInfo/schema.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const metaInfo = {
+    type: 'array',
+    items: {
+        type: 'string',
+        contentType: 'text',
+    },
+};
+exports.default = metaInfo;

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

@@ -13,15 +13,13 @@ const videoContext_1 = require("../../context/videoContext");
 const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const icons_1 = require("../../icons");
-const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
-const COMPONENT_NAME = 'react-player';
 // eslint-disable-next-line react/display-name
 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, analyticsEvents, height, blockName = COMPONENT_NAME, } = 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;
@@ -36,11 +34,6 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'react-player-controls-click',
-        type: models_1.PredefinedEventTypes.Default,
-        blockName: blockName,
-    });
     (0, react_1.useImperativeHandle)(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -89,8 +82,6 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [analyticsEvents]);
-    const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {
@@ -116,14 +107,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        const events = isMuted ? playEvents : stopEvents;
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(events);
         if (isMuted) {
             setProps({ playingVideoRef: ref.current });
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
+    }, [playerRef, setProps, videoMetrika, metrika]);
     const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
@@ -134,8 +123,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(playEvents);
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
+    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
     const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         setIsPlaying(false);

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

@@ -13,6 +13,7 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
+    fullScreen?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

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

@@ -4,6 +4,7 @@ exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const uuid_1 = require("uuid");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
@@ -18,7 +19,6 @@ exports.AUTOPLAY_ATTRIBUTES = {
     mute: 1,
 };
 const b = (0, utils_1.block)('VideoBlock');
-const iframeId = 'video-block';
 function getVideoSrc(stream, record) {
     if (!stream && !record) {
         return null;
@@ -38,14 +38,14 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = 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 [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
-    const fullId = `${iframeId}-${id || src}`;
+    const fullId = id || (0, uuid_1.v4)();
     const onPreviewClick = (0, react_1.useCallback)(() => {
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, exports.AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
@@ -66,12 +66,8 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const prevPageVideo = document.getElementById(fullId);
         const fullSrc = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
-        if (prevPageVideo) {
-            prevPageVideo.src = fullSrc;
-        }
-        else if (ref.current) {
+        if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             iframe.src = fullSrc;
@@ -83,14 +79,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    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 },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         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 })))))));