@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/cjs/components/MediaBase/MediaBaseContent.css

@@ -0,0 +1,12 @@
+.pc-media-base-content {
+  margin-right: 64px;
+  height: 100%;
+  align-items: center;
+  display: flex;
+}
+@media (max-width: 769px) {
+  .pc-media-base-content {
+    margin-right: 0;
+    padding-bottom: 32px;
+  }
+}

package/build/cjs/components/MediaBase/MediaBaseContent.d.ts

@@ -0,0 +1,3 @@
+import { MediaContentProps } from '../../models';
+declare const MediaContent: (props: MediaContentProps) => JSX.Element;
+export default MediaContent;

package/build/cjs/components/MediaBase/MediaBaseContent.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const sub_blocks_1 = require("../../sub-blocks");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('media-base-content');
+const MediaContent = (props) => {
+    const { title, description, subtitle, subtitleLinks, button, links, buttons = [], additionalInfo, size = 'l', list, } = props;
+    const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(sub_blocks_1.Content, { title: title, text: description, subtitle: subtitle, subtitleLinks: subtitleLinks, links: links, theme: "default", buttons: allButtons, list: list, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
+};
+exports.default = MediaContent;

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -0,0 +1,11 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-meta-info {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  display: flex;
+  align-items: center;
+}
+.pc-meta-info__item:not(:first-child) {
+  margin-left: 16px;
+}

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

@@ -0,0 +1,6 @@
+import { ClassNameProps } from '../../models';
+export interface MetaInfpoProps extends ClassNameProps {
+    items: string[];
+}
+declare const MetaInfo: ({ items, className }: MetaInfpoProps) => JSX.Element;
+export default MetaInfo;

package/build/cjs/components/MetaInfo/MetaInfo.js

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

package/build/cjs/components/MetaInfo/schema.d.ts

@@ -0,0 +1,8 @@
+declare const metaInfo: {
+    type: string;
+    items: {
+        type: string;
+        contentType: string;
+    };
+};
+export default metaInfo;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const metaInfo = {
+    type: 'array',
+    items: {
+        type: 'string',
+        contentType: 'text',
+    },
+};
+exports.default = metaInfo;

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

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+export interface OutsideClickProps {
+    onOutsideClick: () => void;
+    className?: string;
+    onClick?: () => void;
+}
+export default class OutsideClick extends React.Component<PropsWithChildren<OutsideClickProps>> {
+    ref: React.RefObject<HTMLDivElement>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    handleOutsideClick: (e: MouseEvent) => void;
+}

package/build/cjs/components/OutsideClick/OutsideClick.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+//TODO move into cloud components?
+const react_1 = tslib_1.__importStar(require("react"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+class OutsideClick extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = (0, react_1.createRef)();
+        this.handleOutsideClick = (e) => {
+            if (e.target &&
+                this.ref &&
+                this.ref.current &&
+                !this.ref.current.contains(e.target)) {
+                this.props.onOutsideClick();
+            }
+        };
+    }
+    componentDidMount() {
+        document.addEventListener('click', this.handleOutsideClick, { passive: true });
+    }
+    componentWillUnmount() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        const { children, className, onClick } = this.props;
+        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick, onKeyDown: noop_1.default, role: onClick ? 'button' : 'group', tabIndex: onClick ? 0 : -1 }, children));
+    }
+}
+exports.default = OutsideClick;

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -0,0 +1,58 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-overflow-scroller {
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow-x: hidden;
+}
+.pc-overflow-scroller__container {
+  width: 100%;
+  position: relative;
+}
+.pc-overflow-scroller__container_padding-left {
+  padding-left: 24px;
+}
+.pc-overflow-scroller__container_padding-right {
+  padding-right: 24px;
+}
+.pc-overflow-scroller__wrapper {
+  position: relative;
+  transition: left 0.6s;
+}
+.pc-overflow-scroller__arrow {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 32px;
+  height: calc(100% - 1px);
+  cursor: pointer;
+  color: var(--g-color-text-secondary);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-overflow-scroller__arrow:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-overflow-scroller__arrow:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-overflow-scroller__arrow_type_left {
+  left: 0;
+  transform: rotate(180deg);
+}
+.pc-overflow-scroller__arrow_type_right {
+  right: 0;
+}

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

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+type Arrow = 'left' | 'right';
+export interface OverflowScrollerProps {
+    className?: string;
+    onScrollStart?: () => void;
+    onScrollEnd?: () => void;
+    arrowSize?: number;
+    arrowClassName?: string;
+}
+export interface OverflowScrollerState {
+    arrows: Arrow[];
+    scrollValue: number;
+}
+export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
+    state: {
+        arrows: Arrow[];
+        scrollValue: number;
+    };
+    containerRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    componentDidMount(): void;
+    componentDidUpdate(_prepvProps: OverflowScrollerProps, { scrollValue: prevScrollValue }: OverflowScrollerState): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private checkOverflow;
+    private handleScrollClick;
+}
+export {};

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const __1 = require("..");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
+const b = (0, utils_1.block)('overflow-scroller');
+const TRANSITION_TIME = 300;
+const PADDING_SIZE = 24;
+const DEFAULT_ARROW_SIZE = 18;
+class OverflowScroller extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            arrows: [],
+            scrollValue: 0,
+        };
+        this.containerRef = (0, react_1.createRef)();
+        this.wrapperRef = (0, react_1.createRef)();
+        // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
+        this.checkOverflow = (0, debounce_1.default)(() => {
+            if (this.containerRef &&
+                this.containerRef.current &&
+                this.wrapperRef &&
+                this.wrapperRef.current) {
+                const containerWidth = this.containerRef.current.offsetWidth;
+                const wrapperWidth = this.wrapperRef.current.offsetWidth;
+                const scrollValue = 0;
+                const arrows = wrapperWidth < containerWidth ? [] : ['right'];
+                this.setState({ scrollValue, arrows });
+            }
+        }, 100);
+        this.handleScrollClick = (e, arrow) => {
+            const { scrollValue, arrows } = this.state;
+            const { onScrollStart } = this.props;
+            if (this.containerRef &&
+                this.containerRef.current &&
+                this.wrapperRef &&
+                this.wrapperRef.current) {
+                const containerWidth = this.containerRef.current.offsetWidth;
+                const wrapperWidth = this.wrapperRef.current.offsetWidth;
+                const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
+                const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
+                const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
+                const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
+                let newArrows = ['left', 'right'];
+                if (newScrollValue + containerWidth >= wrapperWidth) {
+                    newArrows = ['left'];
+                }
+                else if (!newScrollValue) {
+                    newArrows = ['right'];
+                }
+                this.setState({ arrows: newArrows, scrollValue: newScrollValue });
+                if (onScrollStart) {
+                    onScrollStart();
+                }
+                e.stopPropagation();
+            }
+        };
+    }
+    componentDidMount() {
+        this.checkOverflow();
+        window.addEventListener('resize', this.checkOverflow, { passive: true });
+    }
+    componentDidUpdate(_prepvProps, { scrollValue: prevScrollValue }) {
+        const { onScrollEnd } = this.props;
+        if (prevScrollValue !== this.state.scrollValue && onScrollEnd) {
+            setTimeout(onScrollEnd, TRANSITION_TIME + 100);
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.checkOverflow);
+    }
+    render() {
+        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
+        const { arrows, scrollValue } = this.state;
+        const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
+        const paddingLeft = arrows.includes('left');
+        const paddingRight = arrows.includes('right');
+        return (react_1.default.createElement("div", { className: b('container', {
+                'padding-left': paddingLeft,
+                'padding-right': paddingRight,
+            }) },
+            react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
+                react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
+            arrows.map((direction) => (react_1.default.createElement("button", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": (0, i18n_1.i18n)(direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
+    }
+}
+exports.default = OverflowScroller;

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

@@ -0,0 +1,4 @@
+{
+  "left": "Previous",
+  "right": "Next"
+}

package/build/cjs/components/OverflowScroller/i18n/index.d.ts

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

package/build/cjs/components/OverflowScroller/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}OverflowScroller`);

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

@@ -0,0 +1,4 @@
+{
+  "left": "Предыдущий",
+  "right": "Следующий"
+}

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

@@ -0,0 +1,3 @@
+.pc-CircleProgress {
+  position: absolute;
+}

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

@@ -0,0 +1,10 @@
+import { ClassNameProps } from '../../models';
+export interface CircleProgressProps extends ClassNameProps {
+    elapsedTime: number;
+    baseColor?: string;
+    circleColor?: string;
+    strokeWidth?: number;
+    radius?: number;
+}
+declare const CircleProgress: (props: CircleProgressProps) => JSX.Element;
+export default CircleProgress;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('CircleProgress');
+const CircleProgress = (props) => {
+    const { baseColor, elapsedTime, circleColor = '#262626', strokeWidth = 10, radius = 50, className, } = props;
+    const circumference = (0, react_1.useMemo)(() => 2 * Math.PI * radius, [radius]);
+    const baseCircle = (0, react_1.useMemo)(() => {
+        if (!baseColor) {
+            return null;
+        }
+        return (react_1.default.createElement("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
+    }, [baseColor, radius, strokeWidth]);
+    return (react_1.default.createElement("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120" },
+        baseCircle,
+        react_1.default.createElement("circle", { cx: "60", cy: "60", r: radius, transform: "rotate(-90 60 60)", fill: "none", strokeDashoffset: circumference - elapsedTime * circumference, strokeDasharray: circumference, stroke: circleColor, strokeWidth: strokeWidth })));
+};
+exports.default = CircleProgress;

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

@@ -0,0 +1,91 @@
+.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;
+  z-index: 1;
+}
+.pc-CustomBarControls__wrapper_shown {
+  opacity: 1;
+  transition: opacity 0s ease 0s;
+}
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  gap: 8px;
+  padding: 8px;
+}
+.pc-CustomBarControls__wrapper_positioning_left, .pc-CustomBarControls__wrapper_positioning_right, .pc-CustomBarControls__wrapper_positioning_center {
+  display: flex;
+  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-mute-button {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  width: 64px;
+  height: 64px;
+  background: var(--g-color-base-background);
+  transition: background-color 300ms;
+  margin: 12px;
+}
+.pc-CustomBarControls__button_type_with-mute-button:hover, .pc-CustomBarControls__button_type_with-mute-button:focus {
+  background: #eff2f8;
+}
+.pc-CustomBarControls__button_type_with-mute-button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.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-focus);
+  outline-offset: 0;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.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: 16px;
+  width: 16px;
+  color: var(--g-color-base-neutral-heavy);
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps, CustomControlsOptions, CustomControlsType } from '../../models';
+interface MuteConfigProps {
+    isMuted: boolean;
+    changeMute: (event: React.MouseEvent) => void;
+}
+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

@@ -0,0 +1,55 @@
+"use strict";
+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 models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress"));
+const i18n_1 = 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]: icons_1.VolumeFill,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeLow,
+};
+const unmuteIconsMap = {
+    [models_1.CustomControlsType.WithMuteButton]: icons_1.VolumeXmark,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeXmark,
+};
+const CustomBarControls = (props) => {
+    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 || !isMuteButtonShown) {
+            return null;
+        }
+        const { isMuted, changeMute } = mute;
+        return (react_1.default.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": (0, i18n_1.i18n)(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, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
+    const playPauseButton = (0, react_1.useMemo)(() => {
+        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.i18n)(isPaused ? 'play' : 'pause') },
+            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));
+};
+exports.default = CustomBarControls;

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

@@ -0,0 +1,81 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-ReactPlayer video {
+  background-color: var(--pc-color-video-player-bg, #000);
+  object-fit: cover;
+}
+.pc-ReactPlayer__wrapper {
+  position: relative;
+  padding-top: 56.25%;
+}
+.pc-ReactPlayer__wrapper .pc-ReactPlayer__player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.pc-ReactPlayer__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  border-radius: 166px;
+}
+.pc-ReactPlayer__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-ReactPlayer__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-ReactPlayer__button_theme_blue {
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
+}
+.pc-ReactPlayer__button_theme_grey {
+  color: var(--pc-text-header-color);
+  background-color: #eff2f8;
+}
+.pc-ReactPlayer__button_text {
+  padding: 16px 32px;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  width: auto;
+  height: auto;
+}
+.pc-ReactPlayer__icon {
+  margin-left: 1px;
+}
+.pc-ReactPlayer_controls_custom::before {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.36%, rgba(0, 0, 0, 0.2) 100%);
+  opacity: 0;
+  transition: opacity 300ms;
+}
+.pc-ReactPlayer_contain video {
+  object-fit: contain;
+}
+.pc-ReactPlayer_auto-ratio video {
+  object-fit: cover;
+}
+@media only screen and (max-width: 577px) {
+  .pc-ReactPlayer__button_text {
+    font-size: 20px;
+    line-height: 24px;
+  }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from '../../models';
+export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src'>, ClassNameProps {
+    src: string | string[];
+    previewImgUrl?: string;
+    loop?: boolean;
+    customBarControlsClassName?: string;
+    showPreview?: boolean;
+    onClickPreview?: () => void;
+    height?: number;
+    ratio?: number;
+    autoRatio?: boolean;
+    children?: React.ReactNode;
+}
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
+export default ReactPlayerBlock;