@gravity-ui/page-constructor 4.1.2 → 4.3.12-alpha.3

package/build/esm/components/Media/Image/Image.d.ts

@@ -1,4 +1,4 @@
-import { MediaComponentImageProps } from '../../../models';
+import { MediaComponentImageProps, QAProps } from '../../../models';
 import './Image.css';
 export interface ImageAdditionProps {
     imageClassName?: string;
@@ -8,6 +8,7 @@ export interface ImageAdditionProps {
 interface InnerImageProps {
     hasVideoFallback: boolean;
 }
-type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
+export declare const defaultAnimatedDivQa = "animated-div";
 declare const Image: (props: ImageAllProps) => JSX.Element;
 export default Image;

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

@@ -3,15 +3,17 @@ import _ from 'lodash';
 import { animated, config, useSpring } from 'react-spring';
 import SliderBlock from '../../../blocks/Slider/Slider';
 import { SliderType } from '../../../models';
-import { block } from '../../../utils';
+import { block, getQaAttrubutes } from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
 import FullscreenImage from '../../FullscreenImage/FullscreenImage';
 import ImageView from '../../Image/Image';
 import { getMediaImage } from './utils';
 import './Image.css';
 const b = block('media-component-image');
+export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = useState(0);
     const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
         springScrollY: 0,
@@ -35,16 +37,16 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {
         const itemData = getMediaImage(item);
-        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
+        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate || 'none' } },
-            React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate },
+            React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height } }));
+        return (React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

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

@@ -1,8 +1,8 @@
-import { MediaProps } from '../../models';
+import { MediaProps, QAProps } from '../../models';
 import { ImageAdditionProps } from './Image/Image';
 import { VideoAdditionProps } from './Video/Video';
 import './Media.css';
-export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
 }

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
 import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
@@ -8,13 +8,13 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (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 { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
         }
         if (video) {
             const videoProps = {
@@ -32,10 +32,10 @@ export const Media = (props) => {
                 setHasVideoFallback,
             };
             if (fullscreen) {
-                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
+                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
-                result.push(React.createElement(Video, Object.assign({}, videoProps)));
+                result.push(React.createElement(Video, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
         if (youtube) {
@@ -55,6 +55,9 @@ export const Media = (props) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -63,8 +66,7 @@ export const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
-    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };
 export default Media;

package/build/esm/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps } from '../../../models';
+import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 import './Video.css';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
@@ -11,6 +11,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { MediaVideoType } from '../../../models';
-import { block } from '../../../utils';
+import { block, getQaAttrubutes } from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import { getVideoTypesWithPriority } from './utils';
 import './Video.css';
 const b = block('media-component-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, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, 'source');
     const ref = useRef(null);
     useEffect(() => {
         if (ref && ref.current) {
@@ -28,8 +29,8 @@ 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 }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = 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, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
     }, [
         video,
         height,
@@ -42,12 +43,20 @@ const Video = (props) => {
         analyticsEvents,
     ]);
     const defaultVideoBlock = useMemo(() => {
-        return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
+        return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))) : null;
-    }, [video, videoClassName, hasVideoFallback, height]);
+                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qaAttributes.source })))))) : null;
+    }, [
+        video.src,
+        video.ariaLabel,
+        hasVideoFallback,
+        videoClassName,
+        height,
+        qaAttributes.default,
+        qaAttributes.source,
+    ]);
     switch (video.type) {
         case MediaVideoType.Player:
             return reactPlayerBlock;

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-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.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
+import { YFMWrapper } from '../index';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement(YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 export default MetaInfo;

package/build/esm/components/ReactPlayer/CustomBarControls.css

@@ -4,32 +4,64 @@ unpredictable css rules order in build */
   position: absolute;
   bottom: 0;
 }
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  gap: 20px;
+}
 .pc-CustomBarControls__button {
-  margin: 12px;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  opacity: 0.9;
+  background-color: transparent;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:hover, .pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  opacity: 1;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  outline: 1px solid var(--g-color-line-light);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__button_type_with-mute-button {
   border-radius: 50%;
   display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   position: relative;
   width: 64px;
   height: 64px;
   background: var(--g-color-base-background);
   transition: background-color 300ms;
+  margin: 12px;
 }
-.pc-CustomBarControls__button:hover {
+.pc-CustomBarControls__button_type_with-mute-button:hover, .pc-CustomBarControls__button_type_with-mute-button:focus {
   background: #eff2f8;
 }
-.pc-CustomBarControls__icon {
-  margin: auto;
+.pc-CustomBarControls__button_type_with-mute-button:focus {
+  outline: 2px solid var(--g-color-line-misc);
 }
-.pc-CustomBarControls__mute-button {
-  width: inherit;
+.pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__play-icon {
+  height: 24px;
+  width: 24px;
+}
+.pc-CustomBarControls__mute-icon_type_with-mute-button {
   height: 22px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  margin: auto;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMjAgN2E1LjY1NyA1LjY1NyAwIDAgMSAwIDhtMy0xMWMzLjg2NiAzLjg2NiAzLjg2NiAxMC4xMzQgMCAxNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA3IDctN2gydjIyaC0ybC03LTdIMFY3aDd6IiBmaWxsPSIjMjYyNjI2Ii8+Cjwvc3ZnPgo=");
-}
-.pc-CustomBarControls__mute-button_muted {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTcgNyA3LTdoMnYyMmgtMmwtNy03SDBWN2g3eiIgZmlsbD0iIzI2MjYyNiIvPgogICAgPHBhdGggZD0ibTIwIDcgNCA0bTAgMC00IDRtNC00IDQtNG0tNCA0IDQgNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==");
+  width: 32px;
+}
+.pc-CustomBarControls__mute-icon_type_with-play-pause-button {
+  height: 24px;
+  width: 24px;
 }

package/build/esm/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, CustomControlsType } from '../../models';
 import './CustomBarControls.css';
 interface MuteConfigProps {
     isMuted: boolean;
@@ -8,6 +8,9 @@ interface MuteConfigProps {
 export interface CustomBarControlsProps extends ClassNameProps {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
+    type?: CustomControlsType;
+    isPaused?: boolean;
+    onPlayClick?: () => void;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

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

@@ -1,19 +1,43 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { Mute } from '../../icons/Mute';
+import { MuteSmall } from '../../icons/MuteSmall';
+import { Unmute } from '../../icons/Unmute';
+import { UnmuteSmall } from '../../icons/UnmuteSmall';
+import { VideoControlPause } from '../../icons/VideoControlPause';
+import { VideoControlPlay } from '../../icons/VideoControlPlay';
+import { CustomControlsType } from '../../models';
 import { block } from '../../utils';
 import CircleProgress from './CircleProgress';
+import i18n from './i18n';
 import './CustomBarControls.css';
 const b = block('CustomBarControls');
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className } = props;
-    const renderMute = useCallback((elapsedTime, muteConfig) => {
-        if (!muteConfig) {
+    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, } = props;
+    const muteIcon = useMemo(() => {
+        return type === CustomControlsType.WithMuteButton ? Mute : MuteSmall;
+    }, [type]);
+    const unmuteIcon = useMemo(() => {
+        return type === CustomControlsType.WithMuteButton ? Unmute : UnmuteSmall;
+    }, [type]);
+    const muteButton = useMemo(() => {
+        if (!mute) {
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
-        return (React.createElement("div", { className: b('button'), onClick: changeMute },
-            React.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
-            !isMuted && React.createElement(CircleProgress, { elapsedTime: elapsedTime, strokeWidth: 5 })));
-    }, []);
-    return React.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+        const { isMuted, changeMute } = mute;
+        return (React.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": i18n(isMuted ? 'unmute' : 'mute') },
+            React.createElement(Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
+            type === CustomControlsType.WithMuteButton && !isMuted && (React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
+    }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
+    const playPauseButton = useMemo(() => {
+        if (type !== CustomControlsType.WithPlayPauseButton) {
+            return null;
+        }
+        return (React.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": i18n(isPaused ? 'play' : 'pause') },
+            React.createElement(Icon, { data: isPaused ? VideoControlPlay : VideoControlPause, className: b('play-icon') })));
+    }, [isPaused, onPlayClick, type]);
+    return (React.createElement("div", { className: b('wrapper', { type }, className) },
+        playPauseButton,
+        muteButton));
 };
 export default CustomBarControls;

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -50,6 +50,18 @@ unpredictable css rules order in build */
   opacity: 1;
   transition: opacity 300ms ease 0s;
 }
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom.pc-ReactPlayer_hovered::before {
+  opacity: 1;
+}
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.36%, rgba(0, 0, 0, 0.2) 100%);
+  opacity: 0;
+  transition: opacity 300ms;
+}
 .pc-ReactPlayer__custom-bar-controls {
   opacity: 0;
   transition: opacity 300ms ease 3s;

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

@@ -1,15 +1,16 @@
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import ReactPlayer from 'react-player';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useMount } from '../../hooks';
 import { PlayVideo } from '../../icons';
-import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
+import { CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
+import i18n from './i18n';
 import { checkYoutubeVideos } from './utils';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
@@ -18,8 +19,9 @@ const FPS = 60;
 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, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = CustomControlsType.WithMuteButton } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = useContext(VideoContext);
@@ -31,8 +33,10 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [width, setWidth] = useState(0);
     const [muted, setMuted] = useState(mute);
     const [started, setStarted] = useState(autoPlay);
-    const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    useMount(() => setIsMounted(true));
     const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
     const eventsArray = useMemo(() => {
         if (analyticsEvents) {
@@ -102,10 +106,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 });
                 break;
         }
-        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
+        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play') }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
-        if (isMuted && playerRef) {
+        if (isMuted &&
+            playerRef &&
+            customControlsType !== CustomControlsType.WithPlayPauseButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -123,8 +129,16 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
-    const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
+    }, [
+        playerRef,
+        customControlsType,
+        metrika,
+        videoMetrika,
+        playEvents,
+        stopEvents,
+        handleAnalytics,
+        setProps,
+    ]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -138,12 +152,11 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
-        setIsPlaying(false);
-        if (controls === MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
+        if (controls !== MediaVideoControlsType.Custom ||
+            customControlsType === CustomControlsType.WithPlayPauseButton) {
+            setIsPlaying(false);
         }
-    }, [controls, setIsPlaying, setPaused]);
+    }, [controls, customControlsType]);
     const onStart = useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -151,17 +164,17 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [autoPlay, initiallyMuted]);
     const onPlay = useCallback(() => {
         setIsPlaying(true);
-        if (controls === MediaVideoControlsType.Custom) {
+        if (controls === MediaVideoControlsType.Custom &&
+            customControlsType === CustomControlsType.WithMuteButton) {
             if (ended) {
                 changeMute(false);
             }
-            else if (paused) {
+            else if (!isPlaying) {
                 changeMute(muted);
             }
             setEnded(false);
-            setPaused(false);
         }
-    }, [changeMute, controls, ended, muted, paused]);
+    }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
     const onProgress = useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
@@ -179,21 +192,33 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = useCallback((isMuted, elapsedTimePercent) => {
-        if (controls !== MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
-        }
-        return (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+    const onPlayClick = useCallback(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
+        }
+    }, [isPlaying, onPlay, onPause]);
+    const handleClick = useCallback(() => {
+        if (customControlsType === CustomControlsType.WithMuteButton) {
+            changeMute(muted);
+        }
+        else {
+            onPlayClick();
+        }
+    }, [changeMute, customControlsType, muted, onPlayClick]);
+    const onFocusIn = useCallback(() => setHovered(true), []);
+    const onFocusOut = useCallback(() => setHovered(false), []);
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight, controls, started, hovered }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
+        controls === MediaVideoControlsType.Custom && started && (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted }, customBarControlsClassName), mute: {
+                isMuted: muted,
                 changeMute: (event) => {
                     event.stopPropagation();
-                    changeMute(isMuted);
+                    changeMute(muted);
                 },
-            }, elapsedTimePercent: elapsedTimePercent }));
-    }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
-        renderCustomBarControls(muted, playedPercent)));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick })))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

package/build/esm/components/ReactPlayer/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "play": "Play",
+  "pause": "Pause",
+  "mute": "Mute",
+  "unmute": "Unmute"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ReactPlayer';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/ReactPlayer/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "play": "Воспроизвести",
+  "pause": "Остановить",
+  "mute": "Отключить звук",
+  "unmute": "Включить звук"
+}

package/build/esm/components/Table/Table.js

@@ -2,28 +2,34 @@ import React from 'react';
 import { HTML, YFMWrapper } from '../';
 import { block } from '../../utils';
 import './Table.css';
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = block('table');
 export default class Table extends React.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (React.createElement("div", { className: b(null, className) },
+        return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (React.createElement("div", { className: b('table') }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
+        return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return React.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');