feat: add analytics to video block (#376)

* feat: add analytics to video block

Author: niktverd

src/components/Media/Media.tsx

@@ -96,6 +96,7 @@ export const Media = (props: MediaAllProps) => {
                     previewImg={previewImg}
                     height={height}
                     fullscreen={fullscreen}
+                    analyticsEvents={analyticsEvents}
                 />
             );
         }

src/components/VideoBlock/VideoBlock.tsx

@@ -4,7 +4,9 @@ import {Icon} from '@gravity-ui/uikit';
 import _ from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 
+import {useAnalytics} from '../../hooks/useAnalytics';
 import {PlayVideo} from '../../icons';
+import {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';
 import {block, getPageSearchParams} from '../../utils';
 import Image from '../Image/Image';
 
@@ -47,7 +49,7 @@ export function getHeight(width: number): number {
     return (width / 16) * 9;
 }
 
-export interface VideoBlockProps {
+export interface VideoBlockProps extends AnalyticsEventsBase {
     id?: string;
     stream?: string;
     record?: string;
@@ -60,8 +62,20 @@ export interface VideoBlockProps {
 }
 
 const VideoBlock = (props: VideoBlockProps) => {
-    const {stream, record, attributes, className, id, previewImg, playButton, height, fullscreen} =
-        props;
+    const {
+        stream,
+        record,
+        attributes,
+        className,
+        id,
+        previewImg,
+        playButton,
+        height,
+        fullscreen,
+        analyticsEvents,
+    } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
+
     const src = getVideoSrc(stream, record);
     const ref = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>();
@@ -70,6 +84,8 @@ const VideoBlock = (props: VideoBlockProps) => {
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
     const fullId = id || uuidv4();
     const onPreviewClick = useCallback(() => {
+        handleAnalytics(analyticsEvents);
+
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${getPageSearchParams({
                 ...AUTOPLAY_ATTRIBUTES,
@@ -78,7 +94,7 @@ const VideoBlock = (props: VideoBlockProps) => {
         }
 
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
-    }, [src, attributes]);
+    }, [handleAnalytics, analyticsEvents, src, attributes]);
 
     useEffect(() => {
         const updateSize = _.debounce(() => {

src/models/common.ts

@@ -90,6 +90,7 @@ export enum DefaultEventNames {
     QuoteButton = 'quote-button-click',
     BackLink = 'back-link-click',
     Breadcrumb = 'breadcrumb-click',
+    VideoPreview = 'video-preview-click',
 }
 
 export type AnalyticsCounters = {

src/schema/validators/common.ts

@@ -515,6 +515,9 @@ export const MediaProps = {
     fullscreen: {
         type: 'boolean',
     },
+    analyticsEvents: {
+        anyOf: [AnalyticsEventSchema, {type: 'array', items: AnalyticsEventSchema}],
+    },
 };
 
 export const YMapMarkerLabel = {