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

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

@@ -12,6 +12,17 @@ const ImageBase = {
         type: 'boolean',
     },
 };
+const StyleBase = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        backgroundColor: { type: 'string' },
+        height: { type: ['string', 'number'] },
+        width: { type: ['string', 'number'] },
+        color: { type: 'string' },
+    },
+};
 exports.ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
@@ -31,7 +42,7 @@ exports.ImageObjectProps = {
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
             pattern: exports.imageUrlPattern,
-        } }),
+        }, style: StyleBase }),
 };
 exports.ImageProps = {
     oneOf: [

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

@@ -1,4 +1,5 @@
 import { ClassNameProps, LinkProps, Tabbable, WithChildren } from '../../models';
-export type LinkFullProps = LinkProps & ClassNameProps & Tabbable;
+import { QAProps } from '../../models/common';
+export type LinkFullProps = LinkProps & ClassNameProps & Tabbable & QAProps;
 declare const LinkBlock: (props: WithChildren<LinkFullProps>) => JSX.Element;
 export default LinkBlock;

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

@@ -10,6 +10,7 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const index_1 = require("../../utils/index");
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const b = (0, utils_1.block)('link-block');
@@ -27,7 +28,8 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
@@ -48,7 +50,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

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

@@ -1,4 +1,4 @@
-import { MediaComponentImageProps } from '../../../models';
+import { MediaComponentImageProps, QAProps } from '../../../models';
 export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
@@ -7,6 +7,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/cjs/components/Media/Image/Image.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultAnimatedDivQa = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
@@ -12,8 +13,10 @@ const FullscreenImage_1 = tslib_1.__importDefault(require("../../FullscreenImage
 const Image_1 = tslib_1.__importDefault(require("../../Image/Image"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
+exports.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 = (0, utils_1.getQaAttrubutes)(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = (0, react_1.useState)(0);
     const [{ springScrollY }, springSetScrollY] = (0, react_spring_1.useSpring)(() => ({
         springScrollY: 0,
@@ -37,16 +40,16 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {
         const itemData = (0, utils_2.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate || 'none' } },
-            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
+        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate },
+            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
+        return (react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

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

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

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

@@ -11,12 +11,13 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, 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] = (0, react_1.useState)(false);
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
         }
         if (video) {
             const videoProps = {
@@ -34,10 +35,10 @@ const Media = (props) => {
                 setHasVideoFallback,
             };
             if (fullscreen) {
-                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps)));
+                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
-                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps)));
+                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
         if (youtube) {
@@ -57,6 +58,9 @@ const Media = (props) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -65,9 +69,8 @@ const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
-    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };
 exports.Media = Media;
 exports.default = exports.Media;

package/build/cjs/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';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
     customBarControlsClassName?: string;
@@ -10,6 +10,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/cjs/components/Media/Video/Video.js

@@ -8,7 +8,8 @@ const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPl
 const utils_2 = require("./utils");
 const b = (0, utils_1.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 = (0, utils_1.getQaAttrubutes)(qa, 'source');
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current) {
@@ -30,8 +31,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
+        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
     }, [
         video,
         height,
@@ -44,12 +45,20 @@ const Video = (props) => {
         analyticsEvents,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
-        return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
+        return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
             react_1.default.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, "aria-label": video.ariaLabel }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.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 }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.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 models_1.MediaVideoType.Player:
             return reactPlayerBlock;

package/build/cjs/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/cjs/components/MetaInfo/MetaInfo.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const index_1 = require("../index");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 exports.default = MetaInfo;

package/build/cjs/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/cjs/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, CustomControlsType } from '../../models';
 interface MuteConfigProps {
     isMuted: boolean;
     changeMute: (event: React.MouseEvent) => void;
@@ -7,6 +7,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/cjs/components/ReactPlayer/CustomBarControls.js

@@ -2,20 +2,44 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const Mute_1 = require("../../icons/Mute");
+const MuteSmall_1 = require("../../icons/MuteSmall");
+const Unmute_1 = require("../../icons/Unmute");
+const UnmuteSmall_1 = require("../../icons/UnmuteSmall");
+const VideoControlPause_1 = require("../../icons/VideoControlPause");
+const VideoControlPlay_1 = require("../../icons/VideoControlPlay");
+const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('CustomBarControls');
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className } = props;
-    const renderMute = (0, react_1.useCallback)((elapsedTime, muteConfig) => {
-        if (!muteConfig) {
+    const { mute, elapsedTimePercent = 0, className, type = models_1.CustomControlsType.WithMuteButton, isPaused, onPlayClick, } = props;
+    const muteIcon = (0, react_1.useMemo)(() => {
+        return type === models_1.CustomControlsType.WithMuteButton ? Mute_1.Mute : MuteSmall_1.MuteSmall;
+    }, [type]);
+    const unmuteIcon = (0, react_1.useMemo)(() => {
+        return type === models_1.CustomControlsType.WithMuteButton ? Unmute_1.Unmute : UnmuteSmall_1.UnmuteSmall;
+    }, [type]);
+    const muteButton = (0, react_1.useMemo)(() => {
+        if (!mute) {
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
-        return (react_1.default.createElement("div", { className: b('button'), onClick: changeMute },
-            react_1.default.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
-            !isMuted && react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTime, strokeWidth: 5 })));
-    }, []);
-    return react_1.default.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+        const { isMuted, changeMute } = mute;
+        return (react_1.default.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": (0, i18n_1.default)(isMuted ? 'unmute' : 'mute') },
+            react_1.default.createElement(uikit_1.Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
+            type === models_1.CustomControlsType.WithMuteButton && !isMuted && (react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
+    }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
+    const playPauseButton = (0, react_1.useMemo)(() => {
+        if (type !== models_1.CustomControlsType.WithPlayPauseButton) {
+            return null;
+        }
+        return (react_1.default.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": (0, i18n_1.default)(isPaused ? 'play' : 'pause') },
+            react_1.default.createElement(uikit_1.Icon, { data: isPaused ? VideoControlPlay_1.VideoControlPlay : VideoControlPause_1.VideoControlPause, className: b('play-icon') })));
+    }, [isPaused, onPlayClick, type]);
+    return (react_1.default.createElement("div", { className: b('wrapper', { type }, className) },
+        playPauseButton,
+        muteButton));
 };
 exports.default = CustomBarControls;

package/build/cjs/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/cjs/components/ReactPlayer/ReactPlayer.js

@@ -22,8 +22,9 @@ const FPS = 60;
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = models_1.CustomControlsType.WithMuteButton } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
@@ -35,8 +36,10 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [width, setWidth] = (0, react_1.useState)(0);
     const [muted, setMuted] = (0, react_1.useState)(mute);
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
-    const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    (0, hooks_1.useMount)(() => setIsMounted(true));
     const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
     const eventsArray = (0, react_1.useMemo)(() => {
         if (analyticsEvents) {
@@ -109,7 +112,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.default)('play') }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
-        if (isMuted && playerRef) {
+        if (isMuted &&
+            playerRef &&
+            customControlsType !== models_1.CustomControlsType.WithPlayPauseButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -127,8 +132,16 @@ exports.ReactPlayerBlock = react_1.default.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 = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
+    }, [
+        playerRef,
+        customControlsType,
+        metrika,
+        videoMetrika,
+        playEvents,
+        stopEvents,
+        handleAnalytics,
+        setProps,
+    ]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -142,12 +155,11 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
-        setIsPlaying(false);
-        if (controls === models_1.MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
+        if (controls !== models_1.MediaVideoControlsType.Custom ||
+            customControlsType === models_1.CustomControlsType.WithPlayPauseButton) {
+            setIsPlaying(false);
         }
-    }, [controls, setIsPlaying, setPaused]);
+    }, [controls, customControlsType]);
     const onStart = (0, react_1.useCallback)(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -155,17 +167,17 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     }, [autoPlay, initiallyMuted]);
     const onPlay = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
-        if (controls === models_1.MediaVideoControlsType.Custom) {
+        if (controls === models_1.MediaVideoControlsType.Custom &&
+            customControlsType === models_1.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 = (0, react_1.useCallback)((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
@@ -183,21 +195,33 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = (0, react_1.useCallback)((isMuted, elapsedTimePercent) => {
-        if (controls !== models_1.MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
+    const onPlayClick = (0, react_1.useCallback)(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
+        }
+    }, [isPlaying, onPlay, onPause]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
+            changeMute(muted);
         }
-        return (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+        else {
+            onPlayClick();
+        }
+    }, [changeMute, customControlsType, muted, onPlayClick]);
+    const onFocusIn = (0, react_1.useCallback)(() => setHovered(true), []);
+    const onFocusOut = (0, react_1.useCallback)(() => setHovered(false), []);
+    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight, controls, started, hovered }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.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 === models_1.MediaVideoControlsType.Custom && started && (react_1.default.createElement(CustomBarControls_1.default, { 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_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.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 }),
-        renderCustomBarControls(muted, playedPercent)));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick })))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

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

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

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

package/build/cjs/components/Table/Table.js

@@ -4,28 +4,34 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = (0, utils_1.block)('table');
 class Table extends react_1.default.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_1.default.createElement("div", { className: b(null, className) },
+        return (react_1.default.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_1.default.createElement("div", { className: b('table') }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
+        return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return react_1.default.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            react_1.default.createElement(__1.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');