@gravity-ui/page-constructor 4.18.1 → 4.19.0

package/README.md

@@ -6,7 +6,7 @@
 
 When creating pages, component-based approach is used: a page is built using a set of ready-made blocks that can be placed in any order. Each block has a certain type and set of input data parameters.
 
-For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/story/information--blocks).
+For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/docs/documentation-blocks--docs).
 
 ## Install
 
@@ -14,6 +14,10 @@ For the format of input data and list of available blocks, see the [documentatio
 npm install @gravity-ui/page-constructor
 ```
 
+## Required dependencies
+
+Please note that to start using the package, your project must also have the following installed: `@doc-tools/transform`, `@gravity-ui/uikit`, `react`. Check out the `peerDependencies` section of `package.json` for accurate information.
+
 ### Getting started
 
 The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:

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

@@ -11,7 +11,7 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
@@ -33,6 +33,7 @@ const Media = (props) => {
                 customBarControlsClassName,
                 hasVideoFallback,
                 setHasVideoFallback,
+                ratio,
             };
             if (fullscreen) {
                 result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
@@ -68,6 +69,7 @@ const Media = (props) => {
         previewImg,
         playButton,
         customBarControlsClassName,
+        ratio,
         youtubeClassName,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));

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

@@ -8,7 +8,7 @@ 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, qa, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'source');
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -32,7 +32,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         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 }));
+        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, ratio: ratio }));
     }, [
         video,
         height,
@@ -43,6 +43,7 @@ const Video = (props) => {
         customBarControlsClassName,
         metrika,
         analyticsEvents,
+        ratio,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },

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

@@ -1,36 +1,43 @@
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-CustomBarControls__button_type_with-play-pause-button:hover {
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
+  cursor: pointer;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-CustomBarControls__wrapper {
   position: absolute;
   bottom: 0;
+  opacity: 0;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__wrapper_shown {
+  opacity: 1;
+  transition: opacity 0s ease 0s;
 }
 .pc-CustomBarControls__wrapper_type_with-play-pause-button {
-  width: 100%;
-  padding: 20px;
+  gap: 8px;
+  padding: 8px;
+}
+.pc-CustomBarControls__wrapper_positioning_left, .pc-CustomBarControls__wrapper_positioning_right, .pc-CustomBarControls__wrapper_positioning_center {
   display: flex;
-  gap: 20px;
+  width: 100%;
+}
+.pc-CustomBarControls__wrapper_positioning_right {
+  flex-direction: row-reverse;
+}
+.pc-CustomBarControls__wrapper_positioning_center {
+  justify-content: center;
 }
 .pc-CustomBarControls__button {
   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;
@@ -53,15 +60,29 @@ unpredictable css rules order in build */
 .pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
   outline: none;
 }
-.pc-CustomBarControls__play-icon {
-  height: 24px;
-  width: 24px;
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--g-color-base-background);
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  outline: 2px solid var(--g-color-line-misc);
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__play-icon_type_with-play-pause-button {
+  height: 16px;
+  width: 16px;
+  color: var(--g-color-base-neutral-heavy);
 }
 .pc-CustomBarControls__mute-icon_type_with-mute-button {
   height: 22px;
   width: 32px;
 }
 .pc-CustomBarControls__mute-icon_type_with-play-pause-button {
-  height: 24px;
-  width: 24px;
+  height: 16px;
+  width: 16px;
+  color: var(--g-color-base-neutral-heavy);
 }

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import { ClassNameProps, CustomControlsType } from '../../models';
+import { ClassNameProps, CustomControlsOptions, CustomControlsType } from '../../models';
 interface MuteConfigProps {
     isMuted: boolean;
     changeMute: (event: React.MouseEvent) => void;
 }
-export interface CustomBarControlsProps extends ClassNameProps {
+export interface CustomBarControlsProps extends ClassNameProps, CustomControlsOptions {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
     type?: CustomControlsType;
     isPaused?: boolean;
     onPlayClick?: () => void;
+    shown?: boolean;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

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

@@ -2,43 +2,55 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 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 playIconsMap = {
+    [models_1.CustomControlsType.WithMuteButton]: null,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.Play,
+};
+const pauseIconsMap = {
+    [models_1.CustomControlsType.WithMuteButton]: null,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.Pause,
+};
+const muteIconsMap = {
+    [models_1.CustomControlsType.WithMuteButton]: Mute_1.Mute,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeLow,
+};
+const unmuteIconsMap = {
+    [models_1.CustomControlsType.WithMuteButton]: Unmute_1.Unmute,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeXmark,
+};
 const CustomBarControls = (props) => {
-    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 { mute, elapsedTimePercent = 0, className, type = models_1.CustomControlsType.WithMuteButton, isPaused, onPlayClick, muteButtonShown: isMuteButtonShown = true, shown, positioning, } = props;
+    const muteIcon = muteIconsMap[type];
+    const unmuteIcon = unmuteIconsMap[type];
+    const playIcon = playIconsMap[type];
+    const pauseIcon = pauseIconsMap[type];
     const muteButton = (0, react_1.useMemo)(() => {
-        if (!mute) {
+        if (!mute || !isMuteButtonShown) {
             return null;
         }
         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]);
+    }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
     const playPauseButton = (0, react_1.useMemo)(() => {
-        if (type !== models_1.CustomControlsType.WithPlayPauseButton) {
+        const icon = isPaused ? playIcon : pauseIcon;
+        if (type === models_1.CustomControlsType.WithMuteButton || !icon) {
             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) },
+            react_1.default.createElement(uikit_1.Icon, { data: icon, className: b('play-icon', { type }) })));
+    }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
+    return (react_1.default.createElement("div", { className: b('wrapper', { type, shown, positioning }, className) },
         playPauseButton,
         muteButton));
 };

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

@@ -46,14 +46,8 @@ unpredictable css rules order in build */
 .pc-ReactPlayer__icon {
   margin-left: 6px;
 }
-.pc-ReactPlayer:hover .pc-ReactPlayer__custom-bar-controls {
-  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 {
+.pc-ReactPlayer_controls_custom::before {
+  display: none;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -62,14 +56,6 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: opacity 300ms;
 }
-.pc-ReactPlayer__custom-bar-controls {
-  opacity: 0;
-  transition: opacity 300ms ease 3s;
-}
-.pc-ReactPlayer__custom-bar-controls_muted {
-  opacity: 1;
-  transition: opacity 0s ease 0s;
-}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

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

@@ -8,6 +8,7 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     showPreview?: boolean;
     onClickPreview?: () => void;
     height?: number;
+    ratio?: number;
     children?: React.ReactNode;
 }
 export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;

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

@@ -22,9 +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, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, ratio, } = 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 { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
@@ -62,10 +62,10 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
     }, [showPreview, playerRef]);
     (0, react_1.useEffect)(() => {
-        if (playerRef) {
+        if (playerRef && !started) {
             setIsPlaying(autoPlay);
         }
-    }, [autoPlay, playerRef]);
+    }, [autoPlay, playerRef, started]);
     (0, react_1.useEffect)(() => setMuted(mute), [mute]);
     (0, react_1.useEffect)(() => {
         if (!started && isPlaying) {
@@ -87,7 +87,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setCurrentHeight(Math.floor(getHeight(newWidth)));
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
             }
         }, 200);
         updateSize();
@@ -95,7 +95,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, []);
+    }, [ratio]);
     const playEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
     const stopEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = (0, react_1.useMemo)(() => {
@@ -114,7 +114,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const changeMute = (0, react_1.useCallback)((isMuted) => {
         if (isMuted &&
             playerRef &&
-            customControlsType !== models_1.CustomControlsType.WithPlayPauseButton) {
+            customControlsType === models_1.CustomControlsType.WithMuteButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -156,7 +156,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         if (controls !== models_1.MediaVideoControlsType.Custom ||
-            customControlsType === models_1.CustomControlsType.WithPlayPauseButton) {
+            customControlsType !== models_1.CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
@@ -213,18 +213,23 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     }, [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: {
+    return (react_1.default.createElement("div", { className: b({
+            wrapper: !currentHeight,
+            controls,
+        }, 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: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
+                ? undefined
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
+        controls === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { className: customBarControlsClassName, mute: {
                 isMuted: muted,
                 changeMute: (event) => {
                     event.stopPropagation();
                     changeMute(muted);
                 },
-            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick })))) : null));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, muteButtonShown: muteButtonShown, shown: hovered && ((!started && !previewImgUrl) || started), positioning: positioning })))) : null));
 });
-function getHeight(width) {
-    return (width / 16) * 9;
+function getHeight(width, ratio = 9 / 16) {
+    return width * ratio;
 }
 function getParentElement(element) {
     const parentElement = element.parentElement;

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

@@ -29,6 +29,11 @@ export declare enum CustomControlsType {
     WithMuteButton = "with-mute-button",
     WithPlayPauseButton = "with-play-pause-button"
 }
+export declare enum CustomControlsButtonPositioning {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -158,6 +163,8 @@ export interface ButtonImageProps {
 }
 export interface CustomControlsOptions {
     type?: CustomControlsType;
+    muteButtonShown?: boolean;
+    positioning?: CustomControlsButtonPositioning;
 }
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
@@ -168,6 +175,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
+    ratio?: number;
     metrika?: MetrikaVideo;
     previewImg?: 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.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -35,6 +35,12 @@ var CustomControlsType;
     CustomControlsType["WithMuteButton"] = "with-mute-button";
     CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
 })(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
+var CustomControlsButtonPositioning;
+(function (CustomControlsButtonPositioning) {
+    CustomControlsButtonPositioning["Left"] = "left";
+    CustomControlsButtonPositioning["Right"] = "right";
+    CustomControlsButtonPositioning["Center"] = "center";
+})(CustomControlsButtonPositioning = exports.CustomControlsButtonPositioning || (exports.CustomControlsButtonPositioning = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

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

@@ -8,7 +8,7 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -30,6 +30,7 @@ export const Media = (props) => {
                 customBarControlsClassName,
                 hasVideoFallback,
                 setHasVideoFallback,
+                ratio,
             };
             if (fullscreen) {
                 result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
@@ -65,6 +66,7 @@ export const Media = (props) => {
         previewImg,
         playButton,
         customBarControlsClassName,
+        ratio,
         youtubeClassName,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));

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

@@ -6,7 +6,7 @@ import { getVideoTypesWithPriority } from './utils';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
-    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
     const qaAttributes = getQaAttrubutes(qa, 'source');
     const ref = useRef(null);
     useEffect(() => {
@@ -30,7 +30,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
+        return (React.createElement(ReactPlayerBlock, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
     }, [
         video,
         height,
@@ -41,6 +41,7 @@ const Video = (props) => {
         customBarControlsClassName,
         metrika,
         analyticsEvents,
+        ratio,
     ]);
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },

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

@@ -1,36 +1,43 @@
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-CustomBarControls__button_type_with-play-pause-button:hover {
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
+  cursor: pointer;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-CustomBarControls__wrapper {
   position: absolute;
   bottom: 0;
+  opacity: 0;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__wrapper_shown {
+  opacity: 1;
+  transition: opacity 0s ease 0s;
 }
 .pc-CustomBarControls__wrapper_type_with-play-pause-button {
-  width: 100%;
-  padding: 20px;
+  gap: 8px;
+  padding: 8px;
+}
+.pc-CustomBarControls__wrapper_positioning_left, .pc-CustomBarControls__wrapper_positioning_right, .pc-CustomBarControls__wrapper_positioning_center {
   display: flex;
-  gap: 20px;
+  width: 100%;
+}
+.pc-CustomBarControls__wrapper_positioning_right {
+  flex-direction: row-reverse;
+}
+.pc-CustomBarControls__wrapper_positioning_center {
+  justify-content: center;
 }
 .pc-CustomBarControls__button {
   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;
@@ -53,15 +60,29 @@ unpredictable css rules order in build */
 .pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
   outline: none;
 }
-.pc-CustomBarControls__play-icon {
-  height: 24px;
-  width: 24px;
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--g-color-base-background);
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  outline: 2px solid var(--g-color-line-misc);
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__play-icon_type_with-play-pause-button {
+  height: 16px;
+  width: 16px;
+  color: var(--g-color-base-neutral-heavy);
 }
 .pc-CustomBarControls__mute-icon_type_with-mute-button {
   height: 22px;
   width: 32px;
 }
 .pc-CustomBarControls__mute-icon_type_with-play-pause-button {
-  height: 24px;
-  width: 24px;
+  height: 16px;
+  width: 16px;
+  color: var(--g-color-base-neutral-heavy);
 }

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

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