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

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 } = 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 }));
+        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 }, (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

@@ -14,6 +14,7 @@ const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
@@ -21,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, } = 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);
@@ -34,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) {
@@ -105,10 +109,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 });
                 break;
         }
-        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
+        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);
         }
@@ -126,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();
@@ -141,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);
@@ -154,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) {
@@ -182,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;
-        }
-        return (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+    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);
+        }
+        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 }),
-        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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'ReactPlayer';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

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

@@ -0,0 +1,6 @@
+{
+  "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');

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -4,7 +4,7 @@ exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const uuid_1 = require("uuid");
 const useAnalytics_1 = require("../../hooks/useAnalytics");
 const icons_1 = require("../../icons");
@@ -58,7 +58,7 @@ const VideoBlock = (props) => {
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
     }, [handleAnalytics, analyticsEvents, src, attributes]);
     (0, react_1.useEffect)(() => {
-        const updateSize = lodash_1.default.debounce(() => {
+        const updateSize = (0, debounce_1.default)(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
@@ -71,11 +71,12 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const fullSrc = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
         if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
-            iframe.src = fullSrc;
+            if (!previewImg) {
+                iframe.src = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
+            }
             iframe.width = '100%';
             iframe.height = '100%';
             iframe.title = (0, i18n_1.default)('iframe-title');
@@ -86,7 +87,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullscreen]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
@@ -95,7 +96,7 @@ const VideoBlock = (props) => {
     }
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
-        playButton || (react_1.default.createElement("button", { className: b('button') },
+        playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));
 };
 exports.default = VideoBlock;

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

@@ -1,9 +1,10 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+import { QAProps } from '../../models/common';
+export interface YFMWrapperProps extends ClassNameProps, QAProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -4,9 +4,9 @@ const tslib_1 = require("tslib");
 /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
 in your project via global 'yfm' class */
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
-const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
+const utils_1 = require("../../utils");
+const yfm = (0, utils_1.cn)('yfm');
+const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 exports.default = YFMWrapper;

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

@@ -1,8 +1,4 @@
 import { Theme } from '../models';
 export declare const DEFAULT_THEME = Theme.Light;
 export declare const UIKIT_ROOT_CLASS = "g-root";
-export declare const KEY: {
-    ENTER: string;
-    TAB: string;
-};
 export declare const HEADER_HEIGHT = 64;

package/build/cjs/components/constants.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADER_HEIGHT = exports.KEY = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
+exports.HEADER_HEIGHT = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
 const models_1 = require("../models");
 exports.DEFAULT_THEME = models_1.Theme.Light;
 exports.UIKIT_ROOT_CLASS = 'g-root';
-exports.KEY = {
-    ENTER: 'Enter',
-    TAB: 'Tab',
-};
 exports.HEADER_HEIGHT = 64;

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

@@ -21,11 +21,18 @@ export declare const blockMap: {
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
-    "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
-    content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
+    content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
+export declare const navItemMap: {
+    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+};

package/build/cjs/constructor-items.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.subBlockMap = exports.blockMap = void 0;
+exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
+const tslib_1 = require("tslib");
 const blocks_1 = require("./blocks");
 const models_1 = require("./models");
+const NavigationItem_1 = require("./navigation/components/NavigationItem");
+const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
 const sub_blocks_1 = require("./sub-blocks");
 exports.blockMap = {
     [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
@@ -35,3 +38,10 @@ exports.subBlockMap = {
     [models_1.SubBlockType.Content]: sub_blocks_1.Content,
     [models_1.SubBlockType.Quote]: sub_blocks_1.Quote,
 };
+exports.navItemMap = {
+    [models_1.NavigationItemType.Button]: NavigationItem_1.NavigationButton,
+    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
+    [models_1.NavigationItemType.Dropdown]: NavigationItem_1.NavigationDropdown,
+    [models_1.NavigationItemType.Link]: NavigationItem_1.NavigationLink,
+    [models_1.NavigationItemType.GithubButton]: NavigationItem_1.GithubButton,
+};

package/build/cjs/containers/Loadable/Loadable.js

@@ -3,10 +3,10 @@ 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 bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const ErrorWrapper_1 = tslib_1.__importDefault(require("../../components/ErrorWrapper/ErrorWrapper"));
+const cn_1 = require("../../utils/cn");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
-const b = (0, bem_cn_lite_1.default)('loadable-block');
+const b = (0, cn_1.block)('loadable-block');
 const initData = {
     loading: false,
     error: false,