@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WithChildren } from '../../models';
+export interface HTMLProps {
+    children?: string;
+    block?: boolean;
+    className?: string;
+}
+declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+    dangerouslySetInnerHTML: {
+        __html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
+    };
+    className: string | undefined;
+}, HTMLElement> | null;
+export default HTML;

package/build/esm/components/HTML/HTML.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const HTML = ({ children, block = false, className }) => {
+    if (!children) {
+        return null;
+    }
+    return React.createElement(block ? 'div' : 'span', {
+        dangerouslySetInnerHTML: { __html: children },
+        className,
+    });
+};
+export default HTML;

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-header-breadcrumbs {
+  z-index: 11;
+}
+.pc-header-breadcrumbs__item {
+  display: inline-block;
+}
+.pc-header-breadcrumbs__text {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--yc-color-text-secondary);
+}
+.utilityfocus .pc-header-breadcrumbs__text:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header-breadcrumbs__text:hover, .pc-header-breadcrumbs__text:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-header-breadcrumbs__text:after {
+  content: " / ";
+  margin: 0 8px 0 6px;
+  color: var(--yc-color-text-secondary);
+}
+.pc-header-breadcrumbs__text:hover {
+  color: var(--yc-color-text-primary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
+  color: var(--yc-color-text-light-primary);
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderBreadCrumbsProps } from '../../models';
+import './HeaderBreadcrumbs.css';
+export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps): JSX.Element;

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { block } from '../../utils';
+import { useMetrika } from '../../hooks/useMetrika';
+import './HeaderBreadcrumbs.css';
+const b = block('header-breadcrumbs');
+export default function HeaderBreadcrumbs(props) {
+    const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
+    const handleMetrika = useMetrika();
+    const onClick = () => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+    };
+    return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
+        React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
+}

package/build/esm/components/HeightCalculator/HeightCalculator.css

@@ -0,0 +1,9 @@
+.pc-height-calculator {
+  position: relative;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.pc-height-calculator__item-wrapper {
+  position: absolute;
+}

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

@@ -0,0 +1,7 @@
+import { WithChildren } from '../../models';
+import './HeightCalculator.css';
+export interface HeightCalculatorProps {
+    onCalculate: (height: number) => void;
+}
+declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
+export default HeightCalculator;

package/build/esm/components/HeightCalculator/HeightCalculator.js

@@ -0,0 +1,38 @@
+import React, { Children, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import _ from 'lodash';
+import { block } from '../../utils';
+import './HeightCalculator.css';
+const b = block('height-calculator');
+const HeightCalculator = ({ onCalculate, children }) => {
+    const [isCalculating, setIsCalculating] = useState(true);
+    const container = useRef(null);
+    const itemRefs = useMemo(() => {
+        var _a;
+        return (_a = Children.map(children, () => React.createRef())) !== null && _a !== void 0 ? _a : [];
+    }, [children]);
+    const calculateContainerHeight = useCallback(() => {
+        if (container && container.current && itemRefs.length) {
+            const maxHeight = Math.max(...itemRefs.map((tabRef) => {
+                if (tabRef && tabRef.current) {
+                    return tabRef.current.offsetHeight;
+                }
+                return 0;
+            }));
+            onCalculate(maxHeight);
+            setIsCalculating(false);
+        }
+    }, [itemRefs, onCalculate]);
+    useEffect(() => {
+        const handleResize = _.debounce(() => {
+            setIsCalculating(true);
+            calculateContainerHeight();
+        }, 1000);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [calculateContainerHeight]);
+    return isCalculating ? (React.createElement("div", { className: b(), ref: container }, Children.map(children, (child, index) => {
+        return (React.createElement("div", { className: b('item-wrapper'), ref: itemRefs[index], key: index }, child));
+    }))) : null;
+};
+export default HeightCalculator;

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

@@ -0,0 +1,11 @@
+import { CSSProperties, MouseEventHandler } from 'react';
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    disableCompress?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+}
+declare const Image: (props: ImageProps) => JSX.Element | null;
+export default Image;

package/build/esm/components/Image/Image.js

@@ -0,0 +1,20 @@
+import React, { useContext, useState } from 'react';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
+const Image = (props) => {
+    const projectSettings = useContext(ProjectSettingsContext);
+    const { src, alt, disableCompress, style, className, onClick } = props;
+    const [imgLoadingError, setImgLoadingError] = useState(false);
+    if (!src) {
+        return null;
+    }
+    // TODO: Temporary solution for .svg images
+    const disableWebp = projectSettings.disableCompress ||
+        disableCompress ||
+        src.endsWith('.svg') ||
+        imgLoadingError;
+    const webp = src.endsWith('.webp') ? src : src + '.webp';
+    return (React.createElement("picture", null,
+        disableWebp ? null : React.createElement("source", { srcSet: webp, type: "image/webp" }),
+        React.createElement("img", { className: className, src: src, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+};
+export default Image;

package/build/esm/components/Link/Link.css

@@ -0,0 +1,54 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-link-block {
+  margin-top: 16px;
+}
+.pc-link-block__link {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.utilityfocus .pc-link-block__link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-link-block__link:hover, .pc-link-block__link:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-link-block__link_theme_dark {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-link-block__link_theme_dark:hover {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
+  --pc-text-header-color: inherit;
+  color: var(--yc-color-text-link);
+}
+.pc-link-block__link:hover .pc-link-block__arrow {
+  transform: translateX(5px) rotate(-90deg);
+}
+.pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-link-block__arrow {
+  position: relative;
+  margin-left: 2px;
+  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transform: rotate(-90deg);
+}
+.pc-link-block_size_l {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.pc-link-block_size_m {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-link-block_size_s {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}

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

@@ -0,0 +1,5 @@
+import { LinkProps, ClassNameProps, WithChildren } from '../../models';
+import './Link.css';
+export declare type LinkFullProps = LinkProps & ClassNameProps;
+declare const LinkBlock: (props: WithChildren<LinkFullProps>) => JSX.Element;
+export default LinkBlock;

package/build/esm/components/Link/Link.js

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { block, getLinkProps, setUrlTld } from '../../utils';
+import { Chevron } from '../../icons';
+import FileLink from '../FileLink/FileLink';
+import BackLink from '../BackLink/BackLink';
+import { LocaleContext } from '../../context/localeContext/localeContext';
+import { LocationContext } from '../../context/locationContext/locationContext';
+import { useMetrika } from '../../hooks/useMetrika';
+import './Link.css';
+const b = block('link-block');
+function getArrowSize(size) {
+    switch (size) {
+        case 'l':
+            return 14;
+        case 'm':
+            return 12;
+        case 's':
+            return 12;
+        default:
+            return 12;
+    }
+}
+const LinkBlock = (props) => {
+    const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const handleMetrika = useMetrika();
+    const { hostname } = useContext(LocationContext);
+    const { tld } = useContext(LocaleContext);
+    const href = setUrlTld(props.url, tld);
+    const defaultTextSize = theme === 'back' ? 'l' : 'm';
+    const onClick = () => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+    };
+    const getLinkByType = () => {
+        switch (theme) {
+            case 'back':
+                return React.createElement(BackLink, { title: children || text, url: href, onClick: onClick });
+            case 'file-link':
+            case 'underline':
+                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));
+            case 'normal': {
+                const linkProps = getLinkProps(url, hostname, target);
+                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps),
+                    children || text,
+                    arrow && (React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))));
+            }
+            default:
+                return null;
+        }
+    };
+    return (React.createElement("div", { className: b({ size: textSize || defaultTextSize }, className) }, getLinkByType()));
+};
+export default LinkBlock;

package/build/esm/components/Link/Links.d.ts

@@ -0,0 +1,6 @@
+import { LinkProps, ClassNameProps } from '../../models';
+interface LinksProps extends ClassNameProps {
+    links?: LinkProps[];
+}
+declare const Links: (props: LinksProps) => JSX.Element | null;
+export default Links;

package/build/esm/components/Link/Links.js

@@ -0,0 +1,10 @@
+import React, { Fragment } from 'react';
+import Link from './Link';
+const Links = (props) => {
+    const { links, className } = props;
+    if (!links) {
+        return null;
+    }
+    return (React.createElement(Fragment, null, links.map((link) => (React.createElement(Link, Object.assign({ key: link.url }, link, { className: className }))))));
+};
+export default Links;

package/build/esm/components/Media/DataLens/DataLens.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-data-lens__wrap {
+  height: 400px;
+  overflow: hidden;
+  margin: 24px;
+}
+.pc-media-component-data-lens__wrap .pc-media-component-data-lens__iframe {
+  border-radius: 0;
+}
+.pc-media-component-data-lens__iframe {
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  margin: -1px -2px 0;
+}
+@media (max-width: 577px) {
+  .pc-media-component-data-lens__wrap {
+    margin: 24px 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+import { MediaComponentDataLensProps } from '../../../models';
+import './DataLens.css';
+declare const DataLens: (props: MediaComponentDataLensProps) => JSX.Element | null;
+export default DataLens;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../../utils';
+import { unifyDataLensToObject } from './utils';
+import './DataLens.css';
+const b = block('media-component-data-lens');
+const DataLens = (props) => {
+    const { dataLens } = props;
+    const dataLensData = unifyDataLensToObject(dataLens);
+    return dataLens ? (React.createElement("div", { className: b('wrap') },
+        React.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), frameBorder: 0 }))) : null;
+};
+export default DataLens;

package/build/esm/components/Media/DataLens/utils.d.ts

@@ -0,0 +1,2 @@
+import { DataLensObjectProps, DataLensProps } from '../../../models';
+export declare function unifyDataLensToObject(dataLens: DataLensProps): DataLensObjectProps;

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

@@ -0,0 +1,3 @@
+export function unifyDataLensToObject(dataLens) {
+    return typeof dataLens === 'string' ? { id: dataLens, theme: 'light' } : dataLens;
+}

package/build/esm/components/Media/Image/Image.css

@@ -0,0 +1,10 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-image__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.pc-media-component-image__item_withVideo {
+  display: none;
+}

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

@@ -0,0 +1,12 @@
+import { MediaComponentImageProps } from '../../../models';
+import './Image.css';
+export interface ImageAdditionProps {
+    imageClassName?: string;
+    isBackground?: boolean;
+}
+interface InnerImageProps {
+    hasVideoFallback: boolean;
+}
+declare type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+declare const Image: (props: ImageAllProps) => JSX.Element;
+export default Image;

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

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { animated, config, useSpring } from 'react-spring';
+import _ from 'lodash';
+import SliderBlock from '../../../blocks/Slider/Slider';
+import { SliderType } from '../../../models';
+import { getMediaImage } from './utils';
+import FullScreenImage from '../../FullscreenImage/FullscreenImage';
+import BackgroundImage from '../../BackgroundImage/BackgroundImage';
+import { block } from '../../../utils';
+import ImageView from '../../Image/Image';
+import './Image.css';
+const b = block('media-component-image');
+const Image = (props) => {
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video } = props;
+    const [scrollY, setScrollY] = useState(0);
+    const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
+        springScrollY: 0,
+        config: config.molasses,
+    }));
+    let parallaxInterpolate = '';
+    useEffect(() => {
+        if (parallax) {
+            const handleScroll = () => setScrollY(window.scrollY);
+            window.addEventListener('scroll', _.debounce(handleScroll, 5));
+            return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
+        }
+        return () => { };
+    });
+    if (parallax) {
+        const parallaxLevel = 2;
+        springSetScrollY({ springScrollY: height && scrollY > height ? height : scrollY });
+        parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
+    }
+    const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
+    const imageSlider = (imageArray) => (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => {
+        const itemData = getMediaImage(item);
+        return (React.createElement(FullScreenImage, { key: itemData.src, src: itemData.src, alt: itemData.alt, imageClassName: imageClass, imageStyle: { height } }));
+    })));
+    const imageBackground = (oneImage) => {
+        const imageData = getMediaImage(oneImage);
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate } },
+            React.createElement(BackgroundImage, { className: imageClass, src: imageData.src, style: { height }, disableCompress: imageData.disableCompress })));
+    };
+    const imageOnly = (oneImage) => {
+        const imageData = getMediaImage(oneImage);
+        return (React.createElement(ImageView, { className: imageClass, src: imageData.src, alt: imageData.alt, style: { height }, disableCompress: imageData.disableCompress }));
+    };
+    if (Array.isArray(image)) {
+        return imageSlider(image);
+    }
+    return isBackground ? imageBackground(image) : imageOnly(image);
+};
+export default Image;

package/build/esm/components/Media/Image/utils.d.ts

@@ -0,0 +1,2 @@
+import { ImageObjectProps, ImageProps } from '../../../models';
+export declare function getMediaImage(image: ImageProps): ImageObjectProps;

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

@@ -0,0 +1,3 @@
+export function getMediaImage(image) {
+    return typeof image === 'string' ? { src: image } : image;
+}

package/build/esm/components/Media/Media.css

@@ -0,0 +1,11 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-Media {
+  overflow: hidden;
+}
+.pc-Media__youtube {
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,10 @@
+import { MediaProps } from '../../models';
+import { ImageAdditionProps } from './Image/Image';
+import { VideoAdditionProps } from './Video/Video';
+import './Media.css';
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+    className?: string;
+    youtubeClassName?: string;
+}
+export declare const Media: (props: MediaAllProps) => JSX.Element;
+export default Media;

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

@@ -0,0 +1,48 @@
+import React, { useMemo, useState } from 'react';
+import { block } from '../../utils';
+import Image from './Image/Image';
+import DataLens from './DataLens/DataLens';
+import Video from './Video/Video';
+import YoutubeBlock from '../VideoBlock/VideoBlock';
+import './Media.css';
+const b = block('Media');
+export const Media = (props) => {
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
+    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const content = useMemo(() => {
+        let result = [];
+        if (image) {
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
+        }
+        if (video) {
+            result.push(React.createElement(Video, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+        }
+        if (youtube) {
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg }));
+        }
+        if (dataLens) {
+            result = React.createElement(DataLens, { dataLens: dataLens });
+        }
+        return result;
+    }, [
+        image,
+        video,
+        youtube,
+        dataLens,
+        parallax,
+        height,
+        imageClassName,
+        isBackground,
+        hasVideoFallback,
+        videoClassName,
+        metrika,
+        playVideo,
+        previewImg,
+        playButton,
+        customBarControlsClassName,
+        youtubeClassName,
+    ]);
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+};
+export default Media;

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

@@ -0,0 +1,17 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-video__wrap {
+  position: relative;
+  overflow: hidden;
+}
+.pc-media-component-video__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.pc-media-component-video__react-player {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MediaComponentVideoProps, PlayButtonProps } from '../../../models';
+import './Video.css';
+export interface VideoAdditionProps {
+    playButton?: PlayButtonProps;
+    customBarControlsClassName?: string;
+    videoClassName?: string;
+    playVideo?: boolean;
+}
+interface InnerVideoProps {
+    setHasVideoFallback: React.Dispatch<boolean>;
+    hasVideoFallback: boolean;
+}
+declare type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+declare const Video: (props: VideoAllProps) => JSX.Element | null;
+export default Video;

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { MediaVideoType } from '../../../models';
+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) => {
+    const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref && ref.current) {
+            const { loop } = video;
+            if (loop && typeof loop !== 'boolean') {
+                const { start = 0, end } = loop;
+                ref.current.addEventListener('timeupdate', () => {
+                    const videoRef = ref.current;
+                    const endTime = end || (videoRef && videoRef.duration);
+                    if (videoRef && videoRef.currentTime === endTime) {
+                        videoRef.currentTime = start;
+                        videoRef.play().catch(() => setHasVideoFallback(true));
+                    }
+                });
+            }
+            if (playVideo) {
+                ref.current.play().catch(() => setHasVideoFallback(true));
+            }
+        }
+    }, [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 }));
+    }, [
+        video,
+        metrika,
+        previewImg,
+        playVideo,
+        videoClassName,
+        commonPlayButton,
+        customBarControlsClassName,
+    ]);
+    const defaultVideoBlock = useMemo(() => {
+        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;
+    }, [video, videoClassName, hasVideoFallback, height]);
+    switch (video.type) {
+        case MediaVideoType.Player:
+            return reactPlayerBlock;
+        case MediaVideoType.Default:
+        default:
+            return defaultVideoBlock;
+    }
+};
+export default Video;

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

@@ -0,0 +1,16 @@
+export declare enum VideoExt {
+    Mp4 = "mp4",
+    Webm = "webm",
+    Ogg = "ogg",
+    Ogv = "ogv"
+}
+export declare enum VideoType {
+    Mp4 = "video/mp4",
+    Webm = "video/webm",
+    Ogg = "video/ogg"
+}
+export interface ParsedVideo {
+    src: string;
+    type: VideoType | undefined;
+}
+export declare const getVideoTypesWithPriority: (sources: string[]) => ParsedVideo[];