@gravity-ui/page-constructor 1.15.0-alpha.22 → 1.15.0-alpha.24

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -3,8 +3,8 @@ import { block } from '../../../utils';
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import './Arrow.css';
 const b = block('slider-block-arrow');
-const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className), onClick: () => handleClick && handleClick(type) },
-    React.createElement("button", { className: b('button') },
+const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
+    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
         React.createElement("div", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -179,11 +179,7 @@ unpredictable css rules order in build */
 }
 .pc-SliderBlock_type_media-card .slick-arrow {
   display: none;
-  height: 100%;
   width: 64px;
-  top: 0;
-}
-.pc-SliderBlock_type_media-card .slick-arrow button {
   top: 50%;
   transform: translate(0, -50%);
 }

package/build/esm/components/BackLink/BackLink.js

@@ -2,20 +2,13 @@ import React, { useCallback, useContext } from 'react';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { ArrowSidebar } from '../../icons';
 import { LocationContext } from '../../context/locationContext';
-import { BlockPositionContext } from '../../context/blockPositionContext';
-import { useAnalytics } from '../../hooks';
-import { PredefinedEventTypes } from '../../models';
-const COMPONENT_NAME = 'backlink';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
+import { DefaultEventNames } from '../../models';
 export default function BackLink(props) {
     const { history } = useContext(LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
-    const context = useContext(BlockPositionContext);
-    const handleAnalytics = useAnalytics({
-        name: 'back-link-click',
-        type: PredefinedEventTypes.Default,
-        context: context || COMPONENT_NAME,
-        target: url,
-    });
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.ShareButton, url);
+    const handleAnalytics = useAnalytics(defaultEvent);
     const backActionHandler = useCallback(async () => {
         handleAnalytics();
         if (!history) {

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

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

package/build/esm/components/Button/Button.js

@@ -1,29 +1,21 @@
 import { __rest } from "tslib";
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
 import { block, setUrlTld } from '../../utils';
-import { PredefinedEventTypes } from '../../models';
+import { DefaultEventNames } from '../../models';
 import { toCommonSize, toCommonView } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
-import { BlockPositionContext } from '../../context/blockPositionContext';
 import { useMetrika } from '../../hooks/useMetrika';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
 import { Github } from '../../icons';
 import './Button.css';
-const COMPONENT_NAME = 'button';
 const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
-    const context = useContext(BlockPositionContext);
     const defaultImgPosition = 'left';
-    const defaultEvent = useMemo(() => ({
-        name: 'button-click',
-        type: PredefinedEventTypes.Default,
-        context: context || COMPONENT_NAME,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.Button, url);
     const handleAnalytics = useAnalytics(defaultEvent);
     const onClick = useCallback(() => {
         handleMetrika({ metrikaGoals, pixelEvents });

package/build/esm/components/CardBase/CardBase.js

@@ -1,11 +1,10 @@
-import React, { Children, Fragment, useMemo, useContext, } from 'react';
+import React, { Children, Fragment } from 'react';
 import { block } from '../../utils';
-import { BlockPositionContext } from '../../context/blockPositionContext';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 import { useMetrika } from '../../hooks/useMetrika';
-import { PredefinedEventTypes } from '../../models/common';
-import { useAnalytics } from '../../hooks';
+import { DefaultEventNames } from '../../models/common';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
 import './CardBase.css';
 const b = block('card-base-block');
 const Header = () => null;
@@ -14,13 +13,7 @@ const Footer = () => null;
 export const Layout = (props) => {
     const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
     const handleMetrika = useMetrika();
-    const context = useContext(BlockPositionContext);
-    const defaultEvent = useMemo(() => ({
-        name: 'card-base-click',
-        type: PredefinedEventTypes.Default,
-        context,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.CardBase, url);
     const handleAnalytics = useAnalytics(defaultEvent);
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {

package/build/esm/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/esm/components/Foldable/Foldable.js

@@ -1,21 +1,18 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { block } from '../../utils';
-import HeightCalculator from '../../components/HeightCalculator/HeightCalculator';
+import useHeightCalculator from '../../hooks/useHeightCalculator';
 import './Foldable.css';
 const b = block('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = useRef(null);
     const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState();
-    const onHeightCalculation = useCallback((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = useHeightCalculator(contentRef);
     useEffect(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (React.createElement("div", { className: b(null, className) },
-        React.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        React.createElement(HeightCalculator, { onCalculate: onHeightCalculation }, children)));
+    return (React.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        React.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 export default Foldable;

package/build/esm/components/FullscreenImage/FullscreenImage.js

@@ -1,27 +1,29 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { Icon, Modal } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import Image from '../Image/Image';
 import { PreviewClose, FullScreen } from '../../icons';
 import './FullScreenImage.css';
 const b = block('FullScreenImage');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle } = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
-    const openModal = useCallback(() => setIsOpened(true), []);
-    const closeModal = useCallback(() => setIsOpened(false), []);
-    const showFullScreenIcon = useCallback(() => setIsMouseEnter(true), []);
-    const hideFullScreenIcon = useCallback(() => setIsMouseEnter(false), []);
+    const openModal = () => setIsOpened(true);
+    const closeModal = () => setIsOpened(false);
+    const showFullScreenIcon = () => setIsMouseEnter(true);
+    const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
             React.createElement(Image, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             React.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
-                React.createElement(Icon, { data: FullScreen, width: 18, height: 18, className: b('icon') }))),
+                React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },
                 React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
-                    React.createElement(Icon, { data: PreviewClose, width: 30, height: 30, className: b('icon', { hover: true }) })),
+                    React.createElement(Icon, { data: PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 export default FullScreenImage;

package/build/esm/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: min(65vw, 1232px);
+  height: calc(min(65vw, 1232px) * 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/esm/components/FullscreenMedia/FullScreenMedia.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+import './FullScreenMedia.css';
+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/esm/components/FullscreenMedia/FullScreenMedia.js

@@ -0,0 +1,38 @@
+import React, { useContext, useState } from 'react';
+import { Icon, Modal } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import { PreviewClose, FullScreen } from '../../icons';
+import { MobileContext } from '../../context/mobileContext';
+import './FullScreenMedia.css';
+const b = 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] = useState(false);
+    const isMobile = useContext(MobileContext);
+    const openModal = (e) => {
+        e.stopPropagation();
+        setIsOpened(true);
+    };
+    const closeModal = () => setIsOpened(false);
+    if (isMobile) {
+        return children();
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
+            children({ className: b('inline-media') }),
+            showFullScreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+                React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
+        isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
+            React.createElement("div", { className: b('modal-content') },
+                React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                    React.createElement(Icon, { data: 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,
+                }))))));
+};
+export default FullScreenMedia;

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

@@ -3,5 +3,9 @@ import './HeightCalculator.css';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/esm/components/HeightCalculator/HeightCalculator.js

@@ -3,6 +3,10 @@ import _ from 'lodash';
 import { block } from '../../utils';
 import './HeightCalculator.css';
 const b = block('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = useState(true);
     const container = useRef(null);

package/build/esm/components/Link/Link.js

@@ -1,15 +1,14 @@
-import React, { Fragment, useContext, useMemo } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block, getLinkProps, setUrlTld } from '../../utils';
-import { PredefinedEventTypes, } from '../../models';
+import { DefaultEventNames } from '../../models';
 import { Chevron } from '../../icons';
 import FileLink from '../FileLink/FileLink';
 import BackLink from '../BackLink/BackLink';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { LocationContext } from '../../context/locationContext/locationContext';
-import { BlockPositionContext } from '../../context/blockPositionContext';
 import { useMetrika } from '../../hooks/useMetrika';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
@@ -28,13 +27,7 @@ function getArrowSize(size) {
 const LinkBlock = (props) => {
     const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
     const handleMetrika = useMetrika();
-    const context = useContext(BlockPositionContext);
-    const defaultEvent = useMemo(() => ({
-        name: 'link-click',
-        type: PredefinedEventTypes.Default,
-        context,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.Link, url);
     const handleAnalytics = useAnalytics(defaultEvent);
     const { hostname } = useContext(LocationContext);
     const { tld } = useContext(LocaleContext);

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

@@ -7,7 +7,7 @@ import YoutubeBlock from '../VideoBlock/VideoBlock';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const content = useMemo(() => {
@@ -19,7 +19,7 @@ export const Media = (props) => {
             result.push(React.createElement(Video, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -43,6 +43,7 @@ export const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
+        fullScreen,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

package/build/esm/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/esm/components/MetaInfo/MetaInfo.d.ts

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

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { block } from '../../utils';
+import './MetaInfo.css';
+const b = block('meta-info');
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+export default MetaInfo;

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

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

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

@@ -0,0 +1,8 @@
+const metaInfo = {
+    type: 'array',
+    items: {
+        type: 'string',
+        contentType: 'text',
+    },
+};
+export default metaInfo;

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

@@ -3,14 +3,13 @@ import ReactPlayer from 'react-player';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, } from '../../models';
+import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, DefaultEventNames, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
-import { BlockPositionContext } from '../../context/blockPositionContext';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
 import { PlayVideo } from '../../icons';
-import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -39,12 +38,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         return [];
     }, [analyticsEvents]);
-    const context = useContext(BlockPositionContext);
-    const defaultEvent = useMemo(() => ({
-        name: 'react-player-controls-click',
-        type: PredefinedEventTypes.Default,
-        context,
-    }), [context]);
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.ReactPlayerControls);
     const handleAnalytics = useAnalytics(defaultEvent);
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),

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

@@ -14,6 +14,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/esm/components/VideoBlock/VideoBlock.js

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import _ from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
 import { Icon } from '@gravity-ui/uikit';
 import { block, getPageSearchParams } from '../../utils';
 import Image from '../Image/Image';
@@ -15,7 +16,6 @@ export const AUTOPLAY_ATTRIBUTES = {
     mute: 1,
 };
 const b = block('VideoBlock');
-const iframeId = 'video-block';
 function getVideoSrc(stream, record) {
     if (!stream && !record) {
         return null;
@@ -34,14 +34,14 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 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 = useRef(null);
     const iframeRef = useRef();
     const [hidePreview, setHidePreview] = useState(false);
     const norender = (!stream && !record) || !src;
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
-    const fullId = `${iframeId}-${id || src}`;
+    const fullId = id || uuidv4();
     const onPreviewClick = useCallback(() => {
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
@@ -62,12 +62,8 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const prevPageVideo = document.getElementById(fullId);
         const fullSrc = `${src}?${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;
@@ -79,14 +75,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]);
     useEffect(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (React.createElement("button", { className: b('button') },
             React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));

package/build/esm/components/YandexForm/YandexForm.js

@@ -1,12 +1,11 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { HEADER_HEIGHT } from '../constants';
 import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
-import { BlockPositionContext } from '../../context/blockPositionContext';
 import { block } from '../../utils';
-import { PredefinedEventTypes } from '../../models/common';
+import { DefaultEventNames } from '../../models/common';
 import { useMetrika } from '../../hooks/useMetrika';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useAnalyticsEvent } from '../../hooks';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = block('yandex-form');
@@ -16,12 +15,7 @@ const YandexForm = (props) => {
     const iframeRef = useRef();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
     const handleMetrika = useMetrika();
-    const context = useContext(BlockPositionContext);
-    const defaultEvent = useMemo(() => ({
-        name: 'yndex-form-submit',
-        type: PredefinedEventTypes.Default,
-        context: context,
-    }), [context]);
+    const defaultEvent = useAnalyticsEvent(DefaultEventNames.YandexFormSubmit);
     const handleAnalytics = useAnalytics(defaultEvent);
     const isMobile = useContext(MobileContext);
     const locale = useContext(LocaleContext);

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

@@ -33,4 +33,6 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/esm/components/index.js

@@ -33,3 +33,5 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';

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

@@ -34,6 +34,10 @@ export declare const subBlockMap: {
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
     "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    /**
+     * @deprecated Use LayoutItem
+     */
     "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: import("./models").CardWithImageProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;