@gravity-ui/page-constructor 1.15.0-alpha.0 → 1.15.0-alpha.10

package/build/esm/blocks/Questions/Questions.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { block } from '../../utils';
+import { BlockType } from '../../models';
 import Link from '../../components/Link/Link';
 import { YFMWrapper, ToggleArrow, Foldable, HTML } from '../../components';
 import { Row, Col } from '../../grid';
@@ -7,7 +8,7 @@ import { Content } from '../../sub-blocks';
 import './Questions.css';
 const b = block('QuestionsBlock');
 const QuestionsBlock = (props) => {
-    const { title, text, additionalInfo, links, buttons, items } = props;
+    const { title, text, additionalInfo, links, buttons, items, blockName = BlockType.QuestionsBlock, } = props;
     const [opened, setOpened] = useState([0]);
     const toggleItem = (index) => {
         let newState;
@@ -23,7 +24,7 @@ const QuestionsBlock = (props) => {
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
-                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, blockName: blockName }))),
             React.createElement(Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
                 return (React.createElement("div", { key: itemTitle, className: b('item') },

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

@@ -91,6 +91,9 @@ export declare const QuestionsBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/esm/blocks/Security/Security.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { block } from '../../utils';
+import { BlockType } from '../../models';
 import { FullWidthBackground, HTML, Media, Link, AnimateBlock } from '../../components';
 import { Grid, Row, Col } from '../../grid';
 import './Security.css';
 const b = block('SecurityBlock');
 export const SecurityBlock = (props) => {
-    const { backgroundColor, theme = 'dark', title, points, media, animated } = props;
+    const { backgroundColor, theme = 'dark', title, points, media, animated, blockName = BlockType.SecurityBlock, } = props;
     return (React.createElement(AnimateBlock, { className: b({ theme }), offset: 200, animate: animated },
         React.createElement("div", { className: b('content') },
             React.createElement(FullWidthBackground, { className: b('background'), style: { backgroundColor } }),
@@ -19,6 +20,6 @@ export const SecurityBlock = (props) => {
                     link && (React.createElement(Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (React.createElement(Row, { className: b('media') },
                     React.createElement(Col, null,
-                        React.createElement(Media, Object.assign({ className: b('media') }, media)))))))));
+                        React.createElement(Media, Object.assign({ className: b('media') }, media, { blockName: blockName })))))))));
 };
 export default SecurityBlock;

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

@@ -160,6 +160,9 @@ export declare const SecurityBlock: {
                     };
                 };
             };
+            blockName: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Security/schema.js

@@ -23,6 +23,8 @@ export const SecurityBlock = {
                     },
                     link: _.pick(LinkProps, ['text', 'url']),
                 },
-            }) }),
+            }), blockName: {
+                type: 'string',
+            } }),
     },
 };

package/build/esm/blocks/Share/Share.d.ts

@@ -1,4 +1,4 @@
 import { ShareBlockProps } from '../../models';
 import './Share.css';
-declare const Share: ({ items, title }: ShareBlockProps) => JSX.Element;
+declare const Share: ({ items, title, blockName }: ShareBlockProps) => JSX.Element;
 export default Share;

package/build/esm/blocks/Share/Share.js

@@ -1,8 +1,10 @@
-import React, { useContext } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { Icon, Button } from '@gravity-ui/uikit';
 import { block, getAbsolutePath, getShareLink } from '../../utils';
+import { BlockType, PredefinedEventTypes } from '../../models';
 import { LocationContext } from '../../context/locationContext';
 import i18n from './i18n';
+import { useAnalytics } from '../../hooks';
 import { Facebook } from '../../icons/Facebook';
 import { Twitter } from '../../icons/Twitter';
 import { Linkedin } from '../../icons/Linkedin';
@@ -17,15 +19,21 @@ const icons = {
     telegram: Telegram,
 };
 const b = block('share-block');
-const Share = ({ items, title }) => {
+const Share = ({ items, title, blockName = BlockType.ShareBlock }) => {
     const { pathname, hostname } = useContext(LocationContext);
+    const handleAnalytics = useAnalytics({
+        name: 'share-button-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
+    const handleButtonClick = useCallback(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);
     return (React.createElement("div", { className: b() },
         React.createElement("h5", { className: b('title') }, title || i18n('constructor-share')),
         React.createElement("div", { className: b('items') }, items.map((type) => {
             const url = getAbsolutePath(hostname, pathname);
             const socialUrl = getShareLink(url, type);
             const icon = icons[type];
-            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }) }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 export default Share;

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

@@ -33,6 +33,9 @@ export declare const SimpleBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
             title: {

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

@@ -211,6 +211,9 @@ export declare const SliderBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

@@ -64,6 +64,9 @@ export declare const TableBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

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

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext, useRef, useState } from 'react';
 import { block, getThemedValue } from '../../utils';
 import { Row, Col, GridColumnOrderClasses } from '../../grid';
+import { BlockType } from '../../models';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
@@ -12,7 +13,7 @@ import { Content } from '../../sub-blocks';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import './Tabs.css';
 const b = block('tabs-block');
-export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', blockName = BlockType.TabsBlock, }) => {
     var _a;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
@@ -37,12 +38,12 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
             React.createElement(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 } }))));
+                ], buttons: activeTabData.buttons, colSizes: { all: 12 }, blockName: blockName }))));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight, blockName: blockName })))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
@@ -50,7 +51,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
-                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }), blockName: BlockType.TabsBlock }))),
         activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
             mediaContent,
             textContent))));

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

@@ -341,6 +341,9 @@ export declare const TabsBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

@@ -9,5 +9,6 @@ export interface BackLinkProps {
     className?: string;
     shouldHandleBackAction?: boolean;
     onClick?: () => void;
+    blockName?: string;
 }
 export default function BackLink(props: BackLinkProps): JSX.Element;

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

@@ -2,10 +2,19 @@ import React, { useCallback, useContext } from 'react';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { ArrowSidebar } from '../../icons';
 import { LocationContext } from '../../context/locationContext';
+import { useAnalytics } from '../../hooks';
+import { PredefinedEventTypes } from '../../models';
+const COMPONENT_NAME = 'backlink';
 export default function BackLink(props) {
     const { history } = useContext(LocationContext);
-    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, blockName = COMPONENT_NAME, } = props;
+    const handleAnalytics = useAnalytics({
+        name: 'back-link-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const backActionHandler = useCallback(async () => {
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics();
         if (!history) {
             return;
         }
@@ -18,7 +27,7 @@ export default function BackLink(props) {
         else {
             history.push({ pathname: url });
         }
-    }, [history, onClick, url]);
+    }, [handleAnalytics, history, onClick, url]);
     return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
         React.createElement(Icon, { data: ArrowSidebar, size: 24 }),
         React.createElement("span", null, title)));

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -6,11 +6,12 @@ import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import { MobileContext } from '../../context/mobileContext';
 import './BackgroundMedia.css';
 const b = block('BackgroundMedia');
+const COMPONENT_NAME = 'backgound-media-component';
 const BackgroundMedia = (_a) => {
     var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = useContext(MobileContext);
     return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
         React.createElement(Media, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
-            parallax, video: isMobile ? undefined : video }, props)))));
+            parallax, video: isMobile ? undefined : video }, props), { blockName: COMPONENT_NAME }))));
 };
 export default BackgroundMedia;

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

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

@@ -2,19 +2,25 @@ import { __rest } from "tslib";
 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 { toCommonSize, toCommonView } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } 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 handleAnalytics = useAnalytics();
     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 { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, blockName = COMPONENT_NAME } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "blockName"]);
     const defaultImgPosition = 'left';
+    const handleAnalytics = useAnalytics({
+        name: 'button-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const onClick = useCallback(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);

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

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

@@ -1,10 +1,18 @@
 import React, { useCallback, useMemo } from 'react';
 import { block } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { Button } from '../index';
+import { useAnalytics } from '../../hooks';
 import './ButtonTabs.css';
 const b = block('button-tabs');
+const COMPONENT_NAME = 'button-tabs';
 const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+    const { className, items, activeTab, onSelectTab, blockName = COMPONENT_NAME } = props;
+    const handleAnalytics = useAnalytics({
+        name: 'button-tabs-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const activeTabId = useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -12,10 +20,11 @@ const ButtonTabs = (props) => {
         return items[0].id;
     }, [activeTab, items]);
     const handleClick = useCallback((tabId) => {
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics();
         if (onSelectTab) {
             onSelectTab(tabId);
         }
-    }, [onSelectTab]);
+    }, [handleAnalytics, onSelectTab]);
     return (React.createElement("div", { className: b(null, className) }, items.map((item) => {
         const isActive = item.id === activeTabId;
         return (React.createElement(Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));

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

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

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

@@ -3,16 +3,22 @@ import { block } from '../../utils';
 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 './CardBase.css';
+const COMPONENT_NAME = 'card-base';
 const b = block('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', blockName = COMPONENT_NAME, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'card-base-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
         switch (child.type) {

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { block } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
+const COMPONENT_NAME = 'header-breadcrumbs';
 export default function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
+    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', blockName = COMPONENT_NAME, className, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'header-breadcrumbs-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);

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

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block, getLinkProps, setUrlTld } from '../../utils';
+import { PredefinedEventTypes, } from '../../models';
 import { Chevron } from '../../icons';
 import FileLink from '../FileLink/FileLink';
 import BackLink from '../BackLink/BackLink';
@@ -11,6 +12,7 @@ import { useAnalytics } from '../../hooks';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
+const COMPONENT_NAME = 'link';
 function getArrowSize(size) {
     switch (size) {
         case 'l':
@@ -24,9 +26,13 @@ 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 { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, blockName = COMPONENT_NAME, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'link-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const { hostname } = useContext(LocationContext);
     const { tld } = useContext(LocaleContext);
     const href = setUrlTld(props.url, tld);
@@ -38,7 +44,7 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return React.createElement(BackLink, { title: children || text, url: href, onClick: onClick });
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, blockName: blockName }));
             case 'file-link':
             case 'underline':
                 return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));

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

@@ -6,9 +6,10 @@ import Video from './Video/Video';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import './Media.css';
 const b = block('Media');
+const COMPONENT_NAME = 'media-component';
 export 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, } = props;
+    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, blockName = COMPONENT_NAME, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const content = useMemo(() => {
         let result = [];
@@ -16,7 +17,7 @@ export const Media = (props) => {
             result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            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 }));
+            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, blockName: blockName }));
         }
         if (youtube) {
             result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
@@ -42,6 +43,7 @@ export const Media = (props) => {
         previewImg,
         playButton,
         customBarControlsClassName,
+        blockName,
         youtubeClassName,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));

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

@@ -5,8 +5,9 @@ import { getVideoTypesWithPriority } from './utils';
 import { block } from '../../../utils';
 import './Video.css';
 const b = 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, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, blockName = COMPONENT_NAME, } = props;
     const ref = useRef(null);
     useEffect(() => {
         if (ref && ref.current) {
@@ -29,9 +30,10 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (React.createElement(ReactPlayerBlock, { 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 }));
+        return (React.createElement(ReactPlayerBlock, { 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 }));
     }, [
         video,
+        height,
         videoClassName,
         previewImg,
         playVideo,
@@ -39,7 +41,7 @@ const Video = (props) => {
         customBarControlsClassName,
         metrika,
         analyticsEvents,
-        height,
+        blockName,
     ]);
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },

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

@@ -3,7 +3,7 @@ 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, } from '../../models';
+import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
@@ -13,11 +13,12 @@ import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
+const COMPONENT_NAME = 'react-player';
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, blockName = COMPONENT_NAME, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -32,7 +33,11 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'react-player-controls-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -81,8 +86,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
-    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
+    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Play), [analyticsEvents]);
+    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -108,27 +113,14 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            const events = isMuted ? playEvents : stopEvents;
-            if (events) {
-                handleAnalytics(events);
-            }
-        }
+        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,
-        analyticsEvents,
-        playEvents,
-        stopEvents,
-        setProps,
-    ]);
+    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
     const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
@@ -139,12 +131,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            if (playEvents) {
-                handleAnalytics(playEvents);
-            }
-        }
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(playEvents);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
         setIsPlaying(false);