@gravity-ui/page-constructor 1.11.0 → 1.12.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.11.1](https://github.com/gravity-ui/page-constructor/compare/v1.11.0...v1.11.1) (2023-01-10)
+
+
+### Bug Fixes
+
+* **Tabs:** add caption to media ([#106](https://github.com/gravity-ui/page-constructor/issues/106)) ([e825a4c](https://github.com/gravity-ui/page-constructor/commit/e825a4cff8fe9157f5444b03d32d4aff6e7dfba1))
+
 ## [1.11.0](https://github.com/gravity-ui/page-constructor/compare/v1.10.8...v1.11.0) (2023-01-09)
 
 ### Features

package/build/cjs/blocks/Tabs/Tabs.js

@@ -47,8 +47,8 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         }, className: b('col', { centered: centered }) },
         react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
-            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption))))));
+            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
+        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)));
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
         react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         react_1.default.createElement(grid_1.Row, null,

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

@@ -10,6 +10,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/cjs/components/Media/Video/Video.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 models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
 const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer"));
-const utils_1 = require("./utils");
-const utils_2 = require("../../../utils");
-const b = (0, utils_2.block)('media-component-video');
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('media-component-video');
 const Video = (props) => {
     const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
     const ref = (0, react_1.useRef)(null);
@@ -22,7 +22,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
@@ -30,8 +30,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, 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, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
     }, [
         video,
         height,
@@ -46,7 +46,8 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, (0, utils_1.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
+                // 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]);
     switch (video.type) {
         case models_1.MediaVideoType.Player:

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

@@ -4,6 +4,10 @@ unpredictable css rules order in build */
   position: absolute;
   bottom: 0;
 }
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  width: 100%;
+  padding: 20px;
+}
 .pc-CustomBarControls__button {
   margin: 12px;
   border-radius: 50%;
@@ -18,6 +22,23 @@ unpredictable css rules order in build */
 .pc-CustomBarControls__button:hover {
   background: #eff2f8;
 }
+.pc-CustomBarControls__play-button {
+  opacity: 0.9;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__play-button:hover, .pc-CustomBarControls__play-button:focus {
+  opacity: 1;
+}
+.pc-CustomBarControls__play-button:focus {
+  outline: 1px solid var(--g-color-line-light);
+  border-radius: 4px;
+}
+.pc-CustomBarControls__play-button:focus:not(:focus-visible) {
+  outline: none;
+}
 .pc-CustomBarControls__icon {
   margin: auto;
 }

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,10 @@ interface MuteConfigProps {
 export interface CustomBarControlsProps extends ClassNameProps {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
+    type?: CustomControlsType;
+    isPaused?: boolean;
+    onPlayClick?: () => void;
+    isStarted?: boolean;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

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

@@ -2,20 +2,35 @@
 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 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 PLAY_PAUSE_ICON_SIZE = 24;
 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, isStarted = false, } = props;
+    const muteButton = (0, react_1.useMemo)(() => {
+        if (!mute || type === models_1.CustomControlsType.WithPlayPauseButton) {
+            // mute button is not provided for with-play-pause-button
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
+        const { isMuted, changeMute } = mute;
         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));
+            !isMuted && react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 })));
+    }, [elapsedTimePercent, mute, type]);
+    const playPauseButton = (0, react_1.useMemo)(() => {
+        if (type !== models_1.CustomControlsType.WithPlayPauseButton || !isStarted) {
+            return null;
+        }
+        return (react_1.default.createElement("button", { onClick: onPlayClick, className: b('play-button'), "aria-label": (0, i18n_1.default)(isPaused ? 'play' : 'pause') }, isPaused ? (react_1.default.createElement(uikit_1.Icon, { data: VideoControlPlay_1.VideoControlPlay, size: PLAY_PAUSE_ICON_SIZE })) : (react_1.default.createElement(uikit_1.Icon, { data: VideoControlPause_1.VideoControlPause, size: PLAY_PAUSE_ICON_SIZE }))));
+    }, [isPaused, isStarted, onPlayClick, type]);
+    return (react_1.default.createElement("div", { className: b('wrapper', { type }, className) },
+        muteButton,
+        playPauseButton));
 };
 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.35) 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

@@ -19,8 +19,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, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = 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);
@@ -32,8 +33,8 @@ 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 [hovered, setHovered] = (0, react_1.useState)(false);
     (0, react_1.useImperativeHandle)(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -41,14 +42,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
-    }, [playingVideoRef]);
+    }, [playingVideoRef, ref]);
     (0, react_1.useEffect)(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
     (0, react_1.useEffect)(() => {
-        if (playerRef) {
+        if (playerRef && autoPlay) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef]);
@@ -96,10 +97,6 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
-        if (isMuted && playerRef) {
-            playerRef.seekTo(0);
-            setPlayedPercent(0);
-        }
         if (metrika && videoMetrika) {
             const { play, stop, counterName } = videoMetrika;
             const goal = isMuted ? play : stop;
@@ -112,8 +109,7 @@ 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, setProps, videoMetrika, metrika]);
-    const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
+    }, [metrika, videoMetrika, setProps]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -125,13 +121,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
     }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
     const onPause = (0, react_1.useCallback)(() => {
-        // For support correct state for youtube
         setIsPlaying(false);
-        if (controls === models_1.MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
-        }
-    }, [controls, setIsPlaying, setPaused]);
+    }, []);
     const onStart = (0, react_1.useCallback)(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -140,21 +131,17 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const onPlay = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         if (controls === models_1.MediaVideoControlsType.Custom) {
-            if (ended) {
-                changeMute(false);
-            }
-            else if (paused) {
-                changeMute(muted);
-            }
-            setEnded(false);
-            setPaused(false);
+            changeMute(true);
         }
-    }, [changeMute, controls, ended, muted, paused]);
+    }, [changeMute, controls]);
     const onProgress = (0, react_1.useCallback)((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
+        else {
+            setEnded(false);
+        }
     }, []);
     const onEnded = (0, react_1.useCallback)(() => {
         // Youtube videos not muted after finishing playing and start again.
@@ -167,21 +154,37 @@ 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, onPause, onPlay]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
+            changeMute(muted);
+        }
+        else {
+            onPlayClick();
         }
-        return (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+        if (ended) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+            onPlay();
+        }
+    }, [changeMute, customControlsType, ended, muted, onPlay, onPlayClick, playerRef]);
+    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 },
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, 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 }),
+        controls === models_1.MediaVideoControlsType.Custom && (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: src, 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, isStarted: started }))));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

@@ -0,0 +1,4 @@
+{
+  "play": "Play",
+  "pause": "Pause"
+}

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,4 @@
+{
+  "play": "Воспроизвести",
+  "pause": "Остановить"
+}

package/build/cjs/icons/VideoControlPause.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPause: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/VideoControlPause.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoControlPause = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const VideoControlPause = (props) => {
+    return (react_1.default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+        react_1.default.createElement("g", { opacity: "0.9" },
+            react_1.default.createElement("mask", { id: "path-1-outside-1_1237_523", maskUnits: "userSpaceOnUse", x: "1", y: "0", width: "22", height: "24", fill: "black" },
+                react_1.default.createElement("rect", { fill: "white", x: "1", width: "22", height: "24" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z" })),
+            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z", fill: "white" }),
+            react_1.default.createElement("path", { d: "M3 3C3 2.44772 3.44771 2 4 2V0C2.34315 0 1 1.34314 1 3H3ZM3 21V3H1V21H3ZM4 22C3.44772 22 3 21.5523 3 21H1C1 22.6569 2.34315 24 4 24V22ZM8 22H4V24H8V22ZM9 21C9 21.5523 8.55229 22 8 22V24C9.65685 24 11 22.6569 11 21H9ZM9 3V21H11V3H9ZM8 2C8.55228 2 9 2.44772 9 3H11C11 1.34315 9.65685 0 8 0V2ZM4 2H8V0H4V2ZM15 3C15 2.44772 15.4477 2 16 2V0C14.3431 0 13 1.34314 13 3H15ZM15 21V3H13V21H15ZM16 22C15.4477 22 15 21.5523 15 21H13C13 22.6569 14.3431 24 16 24V22ZM20 22H16V24H20V22ZM21 21C21 21.5523 20.5523 22 20 22V24C21.6569 24 23 22.6569 23 21H21ZM21 3V21H23V3H21ZM20 2C20.5523 2 21 2.44772 21 3H23C23 1.34315 21.6569 0 20 0V2ZM16 2H20V0H16V2Z", fill: "black", fillOpacity: "0.15", mask: "url(#path-1-outside-1_1237_523)" }))));
+};
+exports.VideoControlPause = VideoControlPause;

package/build/cjs/icons/VideoControlPlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPlay: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/VideoControlPlay.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoControlPlay = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const VideoControlPlay = (props) => {
+    return (react_1.default.createElement("svg", Object.assign({ width: "24", height: "26", viewBox: "0 0 24 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+        react_1.default.createElement("path", { d: "M20.5028 15.6408C22.4991 14.4663 22.4991 11.5337 20.5028 10.3592L6.99778 2.41411C4.99944 1.23846 2.5 2.70595 2.5 5.05488L2.5 20.9451C2.5 23.2941 4.99943 24.7615 6.99777 23.5859L20.5028 15.6408Z", fill: "white" }),
+        react_1.default.createElement("path", { d: "M20.7563 16.0717C23.0812 14.7039 23.0812 11.2961 20.7563 9.92827L7.25131 1.98315C4.90651 0.603685 2 2.33458 2 5.05488L2 20.9451C2 23.6654 4.90651 25.3963 7.25131 24.0168L20.7563 16.0717Z", stroke: "black", strokeOpacity: "0.15" })));
+};
+exports.VideoControlPlay = VideoControlPlay;

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

@@ -29,6 +29,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -109,7 +113,9 @@ export interface MediaVideoProps {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -146,22 +152,14 @@ export interface ButtonImageProps {
     position?: 'left' | 'right';
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps {
     video: MediaVideoProps;
@@ -309,24 +307,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps {
     author: AuthorItem;
     className?: string;

package/build/cjs/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVideoControlsType = exports.MediaVideoType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -35,6 +35,11 @@ var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes = exports.PlayButtonThemes || (exports.PlayButtonThemes = {}));
+var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

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

@@ -44,8 +44,8 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         }, className: b('col', { centered: centered }) },
         React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (React.createElement(Fragment, null,
-            React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })),
-            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption') }, activeTabData.caption))))));
+            React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
+        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
         React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,

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

@@ -11,6 +11,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { MediaVideoType } from '../../../models';
+import { block } from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import { getVideoTypesWithPriority } from './utils';
-import { block } from '../../../utils';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
@@ -20,7 +20,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
@@ -28,8 +28,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, 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, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
     }, [
         video,
         height,
@@ -44,7 +44,8 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
-                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;
+                // eslint-disable-next-line react/no-unknown-property
+                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 })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {
         case MediaVideoType.Player:

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

@@ -4,6 +4,10 @@ unpredictable css rules order in build */
   position: absolute;
   bottom: 0;
 }
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  width: 100%;
+  padding: 20px;
+}
 .pc-CustomBarControls__button {
   margin: 12px;
   border-radius: 50%;
@@ -18,6 +22,23 @@ unpredictable css rules order in build */
 .pc-CustomBarControls__button:hover {
   background: #eff2f8;
 }
+.pc-CustomBarControls__play-button {
+  opacity: 0.9;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__play-button:hover, .pc-CustomBarControls__play-button:focus {
+  opacity: 1;
+}
+.pc-CustomBarControls__play-button:focus {
+  outline: 1px solid var(--g-color-line-light);
+  border-radius: 4px;
+}
+.pc-CustomBarControls__play-button:focus:not(:focus-visible) {
+  outline: none;
+}
 .pc-CustomBarControls__icon {
   margin: auto;
 }

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,10 @@ interface MuteConfigProps {
 export interface CustomBarControlsProps extends ClassNameProps {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
+    type?: CustomControlsType;
+    isPaused?: boolean;
+    onPlayClick?: () => void;
+    isStarted?: boolean;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

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

@@ -1,19 +1,34 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+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 PLAY_PAUSE_ICON_SIZE = 24;
 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, isStarted = false, } = props;
+    const muteButton = useMemo(() => {
+        if (!mute || type === CustomControlsType.WithPlayPauseButton) {
+            // mute button is not provided for with-play-pause-button
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
+        const { isMuted, changeMute } = mute;
         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));
+            !isMuted && React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 })));
+    }, [elapsedTimePercent, mute, type]);
+    const playPauseButton = useMemo(() => {
+        if (type !== CustomControlsType.WithPlayPauseButton || !isStarted) {
+            return null;
+        }
+        return (React.createElement("button", { onClick: onPlayClick, className: b('play-button'), "aria-label": i18n(isPaused ? 'play' : 'pause') }, isPaused ? (React.createElement(Icon, { data: VideoControlPlay, size: PLAY_PAUSE_ICON_SIZE })) : (React.createElement(Icon, { data: VideoControlPause, size: PLAY_PAUSE_ICON_SIZE }))));
+    }, [isPaused, isStarted, onPlayClick, type]);
+    return (React.createElement("div", { className: b('wrapper', { type }, className) },
+        muteButton,
+        playPauseButton));
 };
 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.35) 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

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, } from '../../models';
+import { CustomControlsType, PlayButtonThemes, PlayButtonType, MediaVideoControlsType, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
@@ -16,8 +16,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, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = 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);
@@ -29,8 +30,8 @@ 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 [hovered, setHovered] = useState(false);
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -38,14 +39,14 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
-    }, [playingVideoRef]);
+    }, [playingVideoRef, ref]);
     useEffect(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
     useEffect(() => {
-        if (playerRef) {
+        if (playerRef && autoPlay) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef]);
@@ -93,10 +94,6 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
-        if (isMuted && playerRef) {
-            playerRef.seekTo(0);
-            setPlayedPercent(0);
-        }
         if (metrika && videoMetrika) {
             const { play, stop, counterName } = videoMetrika;
             const goal = isMuted ? play : stop;
@@ -109,8 +106,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, setProps, videoMetrika, metrika]);
-    const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
+    }, [metrika, videoMetrika, setProps]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -122,13 +118,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
     const onPause = useCallback(() => {
-        // For support correct state for youtube
         setIsPlaying(false);
-        if (controls === MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
-        }
-    }, [controls, setIsPlaying, setPaused]);
+    }, []);
     const onStart = useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -137,21 +128,17 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const onPlay = useCallback(() => {
         setIsPlaying(true);
         if (controls === MediaVideoControlsType.Custom) {
-            if (ended) {
-                changeMute(false);
-            }
-            else if (paused) {
-                changeMute(muted);
-            }
-            setEnded(false);
-            setPaused(false);
+            changeMute(true);
         }
-    }, [changeMute, controls, ended, muted, paused]);
+    }, [changeMute, controls]);
     const onProgress = useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
+        else {
+            setEnded(false);
+        }
     }, []);
     const onEnded = useCallback(() => {
         // Youtube videos not muted after finishing playing and start again.
@@ -164,21 +151,37 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = useCallback((isMuted, elapsedTimePercent) => {
-        if (controls !== MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
+    const onPlayClick = useCallback(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
+        }
+    }, [isPlaying, onPause, onPlay]);
+    const handleClick = useCallback(() => {
+        if (customControlsType === CustomControlsType.WithMuteButton) {
+            changeMute(muted);
+        }
+        else {
+            onPlayClick();
         }
-        return (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+        if (ended) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+            onPlay();
+        }
+    }, [changeMute, customControlsType, ended, muted, onPlay, onPlayClick, playerRef]);
+    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 },
+        React.createElement(ReactPlayer, { className: b('player'), url: src, 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 }),
+        controls === MediaVideoControlsType.Custom && (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: src, 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, isStarted: started }))));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

@@ -0,0 +1,4 @@
+{
+  "play": "Play",
+  "pause": "Pause"
+}

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,4 @@
+{
+  "play": "Воспроизвести",
+  "pause": "Остановить"
+}

package/build/esm/icons/VideoControlPause.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPause: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/VideoControlPause.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const VideoControlPause = (props) => {
+    return (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+        React.createElement("g", { opacity: "0.9" },
+            React.createElement("mask", { id: "path-1-outside-1_1237_523", maskUnits: "userSpaceOnUse", x: "1", y: "0", width: "22", height: "24", fill: "black" },
+                React.createElement("rect", { fill: "white", x: "1", width: "22", height: "24" }),
+                React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z" })),
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z", fill: "white" }),
+            React.createElement("path", { d: "M3 3C3 2.44772 3.44771 2 4 2V0C2.34315 0 1 1.34314 1 3H3ZM3 21V3H1V21H3ZM4 22C3.44772 22 3 21.5523 3 21H1C1 22.6569 2.34315 24 4 24V22ZM8 22H4V24H8V22ZM9 21C9 21.5523 8.55229 22 8 22V24C9.65685 24 11 22.6569 11 21H9ZM9 3V21H11V3H9ZM8 2C8.55228 2 9 2.44772 9 3H11C11 1.34315 9.65685 0 8 0V2ZM4 2H8V0H4V2ZM15 3C15 2.44772 15.4477 2 16 2V0C14.3431 0 13 1.34314 13 3H15ZM15 21V3H13V21H15ZM16 22C15.4477 22 15 21.5523 15 21H13C13 22.6569 14.3431 24 16 24V22ZM20 22H16V24H20V22ZM21 21C21 21.5523 20.5523 22 20 22V24C21.6569 24 23 22.6569 23 21H21ZM21 3V21H23V3H21ZM20 2C20.5523 2 21 2.44772 21 3H23C23 1.34315 21.6569 0 20 0V2ZM16 2H20V0H16V2Z", fill: "black", fillOpacity: "0.15", mask: "url(#path-1-outside-1_1237_523)" }))));
+};

package/build/esm/icons/VideoControlPlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPlay: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/VideoControlPlay.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const VideoControlPlay = (props) => {
+    return (React.createElement("svg", Object.assign({ width: "24", height: "26", viewBox: "0 0 24 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+        React.createElement("path", { d: "M20.5028 15.6408C22.4991 14.4663 22.4991 11.5337 20.5028 10.3592L6.99778 2.41411C4.99944 1.23846 2.5 2.70595 2.5 5.05488L2.5 20.9451C2.5 23.2941 4.99943 24.7615 6.99777 23.5859L20.5028 15.6408Z", fill: "white" }),
+        React.createElement("path", { d: "M20.7563 16.0717C23.0812 14.7039 23.0812 11.2961 20.7563 9.92827L7.25131 1.98315C4.90651 0.603685 2 2.33458 2 5.05488L2 20.9451C2 23.6654 4.90651 25.3963 7.25131 24.0168L20.7563 16.0717Z", stroke: "black", strokeOpacity: "0.15" })));
+};

package/build/esm/models/constructor-items/common.d.ts

@@ -29,6 +29,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -109,7 +113,9 @@ export interface MediaVideoProps {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -146,22 +152,14 @@ export interface ButtonImageProps {
     position?: 'left' | 'right';
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps {
     video: MediaVideoProps;
@@ -309,24 +307,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps {
     author: AuthorItem;
     className?: string;

package/build/esm/models/constructor-items/common.js

@@ -32,6 +32,11 @@ export var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes || (PlayButtonThemes = {}));
+export var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType || (CustomControlsType = {}));
 export var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.11.0",
+  "version": "1.12.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -29,6 +29,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -109,7 +113,9 @@ export interface MediaVideoProps {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -146,22 +152,14 @@ export interface ButtonImageProps {
     position?: 'left' | 'right';
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps {
     video: MediaVideoProps;
@@ -309,24 +307,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps {
     author: AuthorItem;
     className?: string;

package/server/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVideoControlsType = exports.MediaVideoType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -35,6 +35,11 @@ var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes = exports.PlayButtonThemes || (exports.PlayButtonThemes = {}));
+var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";