@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,44 @@
+export var VideoExt;
+(function (VideoExt) {
+    VideoExt["Mp4"] = "mp4";
+    VideoExt["Webm"] = "webm";
+    VideoExt["Ogg"] = "ogg";
+    VideoExt["Ogv"] = "ogv";
+})(VideoExt || (VideoExt = {}));
+export var VideoType;
+(function (VideoType) {
+    VideoType["Mp4"] = "video/mp4";
+    VideoType["Webm"] = "video/webm";
+    VideoType["Ogg"] = "video/ogg";
+})(VideoType || (VideoType = {}));
+const VideoTypePriority = {
+    [VideoType.Webm]: 1,
+    [VideoType.Ogg]: 2,
+    [VideoType.Mp4]: 3,
+};
+function parseVideoType(src) {
+    const [path] = src.split('?');
+    const fileExt = path.split('.').pop();
+    switch (fileExt) {
+        case VideoExt.Mp4:
+            return VideoType.Mp4;
+        case VideoExt.Webm:
+            return VideoType.Webm;
+        case VideoExt.Ogg:
+        case VideoExt.Ogv:
+            return VideoType.Ogg;
+        default:
+            return undefined;
+    }
+}
+export const getVideoTypesWithPriority = (sources) => sources
+    .map((src) => ({ src, type: parseVideoType(src) }))
+    .sort(({ type: typeA }, { type: typeB }) => {
+    if (typeA === undefined) {
+        return 1;
+    }
+    if (typeB === undefined) {
+        return -1;
+    }
+    return VideoTypePriority[typeA] - VideoTypePriority[typeB];
+});

package/build/esm/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/esm/components/OutsideClick/OutsideClick.js

@@ -0,0 +1,26 @@
+//TODO move into cloud components?
+import React, { createRef } from 'react';
+export default class OutsideClick extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = 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);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        const { className, onClick, children } = this.props;
+        return (React.createElement("div", { className: className, ref: this.ref, onClick: onClick }, children));
+    }
+}

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -0,0 +1,26 @@
+.pc-overflow-scroller {
+  position: relative;
+  overflow-x: hidden;
+}
+.pc-overflow-scroller__wrapper {
+  position: relative;
+  transition: left 0.3s;
+}
+.pc-overflow-scroller__scroller {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 32px;
+  cursor: pointer;
+  color: var(--yc-color-text-secondary);
+  background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;
+}
+.pc-overflow-scroller__scroller_type_left {
+  left: 0;
+  transform: rotate(180deg);
+}
+.pc-overflow-scroller__scroller_type_right {
+  right: 0;
+}

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

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import './OverflowScroller.css';
+declare type Arrow = 'left' | 'right';
+export interface OverflowScrollerProps {
+    className?: string;
+    onScrollStart?: () => void;
+    onScrollEnd?: () => void;
+}
+export interface OverflowScrollerState {
+    arrows: Arrow[];
+    scrollValue: number;
+}
+export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
+    state: {
+        arrows: never[];
+        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/esm/components/OverflowScroller/OverflowScroller.js

@@ -0,0 +1,79 @@
+import React, { createRef } from 'react';
+import _ from 'lodash';
+import { block } from '../../utils';
+import { ToggleArrow } from '..';
+import './OverflowScroller.css';
+const b = block('overflow-scroller');
+const TRANSITION_TIME = 300;
+export default class OverflowScroller extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            arrows: [],
+            scrollValue: 0,
+        };
+        this.containerRef = createRef();
+        this.wrapperRef = createRef();
+        // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
+        this.checkOverflow = _.debounce(() => {
+            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 } = 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 delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
+                const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
+                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);
+    }
+    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, children } = this.props;
+        const { arrows, scrollValue } = this.state;
+        const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
+        return (React.createElement("div", { className: b(null, className), ref: this.containerRef },
+            React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children),
+            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+                React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+    }
+}

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

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

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

@@ -0,0 +1,11 @@
+import { ClassNameProps } from '../../models';
+import './CircleProgress.css';
+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/esm/components/ReactPlayer/CircleProgress.js

@@ -0,0 +1,18 @@
+import React, { useMemo } from 'react';
+import { block } from '../../utils';
+import './CircleProgress.css';
+const b = block('CircleProgress');
+const CircleProgress = (props) => {
+    const { baseColor, elapsedTime, circleColor = '#262626', strokeWidth = 10, radius = 50, className, } = props;
+    const circumference = useMemo(() => 2 * Math.PI * radius, [radius]);
+    const baseCircle = useMemo(() => {
+        if (!baseColor) {
+            return null;
+        }
+        return (React.createElement("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
+    }, [baseColor, radius, strokeWidth]);
+    return (React.createElement("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120" },
+        baseCircle,
+        React.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 })));
+};
+export default CircleProgress;

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

@@ -0,0 +1,35 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-CustomBarControls__wrapper {
+  position: absolute;
+  bottom: 0;
+}
+.pc-CustomBarControls__button {
+  margin: 12px;
+  border-radius: 50%;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  width: 64px;
+  height: 64px;
+  background: var(--yc-color-base-background);
+  transition: background-color 300ms;
+}
+.pc-CustomBarControls__button:hover {
+  background: #eff2f8;
+}
+.pc-CustomBarControls__icon {
+  margin: auto;
+}
+.pc-CustomBarControls__mute-button {
+  width: inherit;
+  height: 22px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin: auto;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMjAgN2E1LjY1NyA1LjY1NyAwIDAgMSAwIDhtMy0xMWMzLjg2NiAzLjg2NiAzLjg2NiAxMC4xMzQgMCAxNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA3IDctN2gydjIyaC0ybC03LTdIMFY3aDd6IiBmaWxsPSIjMjYyNjI2Ii8+Cjwvc3ZnPgo=");
+}
+.pc-CustomBarControls__mute-button_muted {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTcgNyA3LTdoMnYyMmgtMmwtNy03SDBWN2g3eiIgZmlsbD0iIzI2MjYyNiIvPgogICAgPHBhdGggZD0ibTIwIDcgNCA0bTAgMC00IDRtNC00IDQtNG0tNCA0IDQgNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==");
+}

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

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

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

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react';
+import { block } from '../../utils';
+import CircleProgress from './CircleProgress';
+import './CustomBarControls.css';
+const b = block('CustomBarControls');
+const CustomBarControls = (props) => {
+    const { mute, elapsedTimePercent = 0, className } = props;
+    const renderMute = useCallback((elapsedTime, muteConfig) => {
+        if (!muteConfig) {
+            return null;
+        }
+        const { isMuted, changeMute } = muteConfig;
+        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));
+};
+export default CustomBarControls;

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

@@ -0,0 +1,66 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.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_theme_blue {
+  color: var(--yc-color-base-background);
+  background-color: var(--yc-color-base-special);
+}
+.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: 6px;
+}
+.pc-ReactPlayer:hover .pc-ReactPlayer__custom-bar-controls {
+  opacity: 1;
+  transition: opacity 300ms ease 0s;
+}
+.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;
+    line-height: 24px;
+  }
+}

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

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

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

@@ -0,0 +1,193 @@
+import _ from 'lodash';
+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 CustomBarControls from './CustomBarControls';
+import { VideoContext } from '../../context/videoContext';
+import { MetrikaContext } from '../../context/metrikaContext';
+import { MobileContext } from '../../context/mobileContext';
+import { PlayVideo } from '../../icons';
+import './ReactPlayer.css';
+const b = block('ReactPlayer');
+const FPS = 60;
+// eslint-disable-next-line react/display-name
+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, } = props;
+    const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
+    const mute = initiallyMuted || autoPlay;
+    const { playingVideoRef, setProps } = useContext(VideoContext);
+    const ref = useRef(null);
+    const [playerRef, setPlayerRef] = useState();
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [playedPercent, setPlayedPercent] = useState(0);
+    const [height, setHeight] = useState(0);
+    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);
+    useImperativeHandle(originRef, () => ({
+        pause: () => setIsPlaying(false),
+    }));
+    useEffect(() => {
+        if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
+            setMuted(true);
+        }
+    }, [playingVideoRef]);
+    useEffect(() => {
+        if (showPreview) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
+        }
+    }, [showPreview, playerRef]);
+    useEffect(() => {
+        if (playerRef) {
+            setIsPlaying(autoPlay);
+        }
+    }, [autoPlay, playerRef]);
+    useEffect(() => setMuted(mute), [mute]);
+    useEffect(() => {
+        if (!started && isPlaying) {
+            setStarted(true);
+        }
+    }, [isPlaying, started]);
+    useEffect(() => {
+        if (started && !Number.isNaN(Number(elapsedTime))) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(elapsedTime !== null && elapsedTime !== void 0 ? elapsedTime : 0, 'seconds');
+        }
+    }, [elapsedTime, playerRef, started]);
+    useEffect(() => {
+        const updateSize = _.debounce(() => {
+            if (ref.current) {
+                // We need to get parent's width does not equal 0
+                const parentElement = getParentElement(ref.current);
+                const { paddingLeft, paddingRight } = getComputedStyle(parentElement);
+                const newWidth = parentElement.offsetWidth -
+                    parseFloat(paddingLeft) -
+                    parseFloat(paddingRight);
+                setWidth(newWidth);
+                setHeight(Math.floor(getHeight(newWidth)));
+            }
+        }, 200);
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, []);
+    const playIcon = useMemo(() => {
+        let playButtonContent;
+        switch (type) {
+            case PlayButtonType.Text:
+                playButtonContent = text;
+                break;
+            case PlayButtonType.Default:
+            default:
+                playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 });
+                break;
+        }
+        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;
+            if (goal) {
+                metrika.reachGoals(goal, counterName);
+            }
+        }
+        if (isMuted) {
+            setProps({ playingVideoRef: ref.current });
+        }
+        // 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]);
+    const handleClickPreview = useCallback(() => {
+        setIsPlaying(true);
+        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
+        if (metrika && videoMetrika) {
+            const { play, counterName } = videoMetrika;
+            if (play) {
+                metrika.reachGoals(play, counterName);
+            }
+        }
+    }, [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);
+        }
+    }, [autoPlay, initiallyMuted]);
+    const onPlay = useCallback(() => {
+        setIsPlaying(true);
+        if (controls === MediaVideoControlsType.Custom) {
+            if (ended) {
+                changeMute(false);
+            }
+            else if (paused) {
+                changeMute(muted);
+            }
+            setEnded(false);
+            setPaused(false);
+        }
+    }, [changeMute, controls, ended, muted, paused]);
+    const onProgress = useCallback((progress) => {
+        setPlayedPercent(progress.played);
+        if (progress.played === 1) {
+            setMuted(true);
+        }
+    }, []);
+    const onEnded = useCallback(() => {
+        // Youtube videos not muted after finishing playing and start again.
+        // 'onEnded' does not fire when 'loop' is set to true.
+        // It is custom loop with muted sound after finishing playing and start again.
+        if (loop) {
+            setPlayedPercent(0);
+            setIsPlaying(true);
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+        }
+        setEnded(true);
+    }, [loop, playerRef]);
+    const renderCustomBarControls = useCallback((isMuted, elapsedTimePercent) => {
+        if (controls !== MediaVideoControlsType.Custom || !isPlaying) {
+            return null;
+        }
+        return (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
+                isMuted,
+                changeMute: (event) => {
+                    event.stopPropagation();
+                    changeMute(isMuted);
+                },
+            }, elapsedTimePercent: elapsedTimePercent }));
+    }, [controls, isPlaying, customBarControlsClassName, changeMute]);
+    return (React.createElement("div", { className: b({ wrapper: !height }, className), ref: ref, onClick: handleClick },
+        React.createElement(ReactPlayer, { className: b('player'), url: src, muted: muted, controls: controls === MediaVideoControlsType.Default, height: height || '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)));
+});
+function getHeight(width) {
+    return (width / 16) * 9;
+}
+function getParentElement(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+        return element;
+    }
+    return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
+}
+export default ReactPlayerBlock;

package/build/esm/components/RouterLink/RouterLink.d.ts

@@ -0,0 +1,6 @@
+import { WithChildren } from '../../models';
+export interface RouterLinkProps {
+    href: string;
+}
+declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
+export default RouterLink;

package/build/esm/components/RouterLink/RouterLink.js

@@ -0,0 +1,7 @@
+import React, { Fragment, useContext } from 'react';
+import { LocationContext } from '../../context/locationContext';
+const RouterLink = ({ href, children }) => {
+    const { Link } = useContext(LocationContext);
+    return Link ? React.createElement(Link, { href: href }, children) : React.createElement(Fragment, null, children);
+};
+export default RouterLink;

package/build/esm/components/Share/Share.css

@@ -0,0 +1,52 @@
+.pc-share-block__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-share-block__title {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  text-align: center;
+  font-weight: normal;
+}
+.pc-share-block__items {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+.pc-share-block__item {
+  display: flex;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 100%;
+}
+.pc-share-block__item_type_vk {
+  background-color: var(--yc-color-vk);
+}
+.pc-share-block__item_type_facebook {
+  background-color: var(--yc-color-facebook);
+}
+.pc-share-block__item_type_twitter {
+  background-color: var(--yc-color-twitter);
+}
+.pc-share-block__item_type_telegram {
+  background-color: var(--yc-color-telegram);
+}
+.pc-share-block__item:before {
+  border-radius: 100%;
+}
+.pc-share-block__item:hover:before {
+  /* stylelint-disable-next-line declaration-no-important */
+  background-color: var(--yc-color-base-generic) !important;
+  border-radius: 100%;
+}
+.pc-share-block__item + .pc-share-block__item {
+  margin-left: 12px;
+}
+.pc-share-block__item svg {
+  color: var(--yc-color-base-background);
+}