@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/cjs/components/Media/DataLens/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unifyDataLensToObject = void 0;
+function unifyDataLensToObject(dataLens) {
+    return typeof dataLens === 'string' ? { id: dataLens, theme: 'light' } : dataLens;
+}
+exports.unifyDataLensToObject = unifyDataLensToObject;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoAllProps } from '../Video/Video';
+declare const FullscreenVideo: React.FC<VideoAllProps>;
+export default FullscreenVideo;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const FullscreenMedia_1 = tslib_1.__importDefault(require("../../FullscreenMedia/FullscreenMedia"));
+const Video_1 = tslib_1.__importDefault(require("../Video/Video"));
+const FullscreenVideo = (props) => {
+    return (react_1.default.createElement(FullscreenMedia_1.default, null, (classNames) => react_1.default.createElement(Video_1.default, Object.assign({}, props, classNames))));
+};
+exports.default = FullscreenVideo;

package/build/cjs/components/Media/Iframe/Iframe.css

@@ -0,0 +1,18 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-iframe {
+  overflow: hidden;
+}
+.pc-media-component-iframe_margins {
+  margin: 24px;
+}
+.pc-media-component-iframe_margins .pc-media-component-iframe__item {
+  border-radius: 0;
+}
+.pc-media-component-iframe .pc-media-component-iframe__iframe {
+  border-radius: 0;
+}
+.pc-media-component-iframe__item {
+  width: 100%;
+  height: 100%;
+}

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

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

package/build/cjs/components/Media/Iframe/Iframe.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 utils_1 = require("../../../utils");
+const i18n_1 = require("./i18n");
+const b = (0, utils_1.block)('media-component-iframe');
+const Iframe = (props) => {
+    const { iframe, margins = true } = props;
+    const { height = 400, src, width, name, title } = iframe;
+    return iframe ? (react_1.default.createElement("div", { className: b({ margins }), style: { height } },
+        react_1.default.createElement("iframe", { className: b('item'), loading: "lazy", title: title || (0, i18n_1.i18n)('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
+};
+exports.default = Iframe;

package/build/cjs/components/Media/Iframe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}

package/build/cjs/components/Media/Iframe/i18n/index.d.ts

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

package/build/cjs/components/Media/Iframe/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}Iframe`);

package/build/cjs/components/Media/Iframe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

package/build/cjs/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/cjs/components/Media/Image/Image.d.ts

@@ -0,0 +1,14 @@
+import { MediaComponentImageProps, QAProps } from '../../../models';
+export interface ImageAdditionProps {
+    imageClassName?: string;
+    isBackground?: boolean;
+    fullscreen?: boolean;
+    onLoad?: () => void;
+}
+interface InnerImageProps {
+    hasVideoFallback: boolean;
+}
+type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
+export declare const defaultAnimatedDivQa = "animated-div";
+declare const Image: (props: ImageAllProps) => JSX.Element;
+export default Image;

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultAnimatedDivQa = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const web_1 = require("@react-spring/web");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const Slider_1 = tslib_1.__importDefault(require("../../../blocks/Slider/Slider"));
+const models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
+const BackgroundImage_1 = tslib_1.__importDefault(require("../../BackgroundImage/BackgroundImage"));
+const FullscreenImage_1 = tslib_1.__importDefault(require("../../FullscreenImage/FullscreenImage"));
+const Image_1 = tslib_1.__importDefault(require("../../Image/Image"));
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('media-component-image');
+exports.defaultAnimatedDivQa = 'animated-div';
+const Image = (props) => {
+    const { parallax, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const image = Array.isArray(props.image) && disableImageSliderForArrayInput
+        ? props.image[0]
+        : props.image;
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
+    const [scrollY, setScrollY] = (0, react_1.useState)(0);
+    const [{ springScrollY }, springSetScrollY] = (0, web_1.useSpring)(() => ({
+        springScrollY: 0,
+        config: web_1.config.molasses,
+    }));
+    let parallaxInterpolate = '';
+    (0, react_1.useEffect)(() => {
+        if (parallax) {
+            const handleScroll = () => setScrollY(window.scrollY);
+            const debouncedHandler = (0, debounce_1.default)(handleScroll, 5);
+            window.addEventListener('scroll', debouncedHandler, { passive: true });
+            return () => window.removeEventListener('scroll', debouncedHandler);
+        }
+        return () => { };
+    });
+    if (parallax) {
+        const parallaxLevel = 2;
+        springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
+        parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
+    }
+    const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
+    const renderFullscreenImage = (item) => {
+        const itemData = (0, utils_2.getMediaImage)(item);
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
+    };
+    const imageBackground = (oneImage) => {
+        const imageData = (0, utils_2.getMediaImage)(oneImage);
+        return (react_1.default.createElement(web_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate },
+            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }))));
+    };
+    const imageOnly = (oneImage) => {
+        const imageData = (0, utils_2.getMediaImage)(oneImage);
+        return (react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad })));
+    };
+    const imageSlider = (imageArray) => {
+        const fullscreenItem = fullscreen === undefined || fullscreen;
+        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+    };
+    if (Array.isArray(image)) {
+        return imageSlider(image);
+    }
+    if (fullscreen) {
+        return renderFullscreenImage(image);
+    }
+    return isBackground ? imageBackground(image) : imageOnly(image);
+};
+exports.default = Image;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaImage = void 0;
+function getMediaImage(image) {
+    return typeof image === 'string' ? { src: image } : image;
+}
+exports.getMediaImage = getMediaImage;

package/build/cjs/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/cjs/components/Media/Media.d.ts

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

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Media = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const innerContext_1 = require("../../context/innerContext");
+const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
+const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
+const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
+const FullscreenVideo_1 = tslib_1.__importDefault(require("./FullscreenVideo/FullscreenVideo"));
+const Iframe_1 = tslib_1.__importDefault(require("./Iframe/Iframe"));
+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, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
+    const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
+    const content = (0, react_1.useMemo)(() => {
+        let result = [];
+        if (image) {
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
+        }
+        if (video) {
+            const videoProps = {
+                key: 'video',
+                video,
+                videoClassName,
+                height,
+                analyticsEvents,
+                playVideo,
+                previewImg,
+                playButton,
+                customBarControlsClassName,
+                hasVideoFallback,
+                setHasVideoFallback,
+                ratio,
+            };
+            if (fullscreen) {
+                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+            }
+            else {
+                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+            }
+        }
+        if (youtube || videoIframe) {
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
+        }
+        if (dataLens) {
+            result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
+        }
+        if (iframe) {
+            result = react_1.default.createElement(Iframe_1.default, { iframe: iframe, margins: margins });
+        }
+        return result;
+    }, [
+        image,
+        video,
+        videoIframe,
+        youtube,
+        dataLens,
+        iframe,
+        parallax,
+        disableImageSliderForArrayInput,
+        height,
+        imageClassName,
+        isBackground,
+        hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
+        onImageLoad,
+        videoClassName,
+        analyticsEvents,
+        playVideo,
+        previewImg,
+        playButton,
+        customBarControlsClassName,
+        ratio,
+        youtubeClassName,
+        autoplay,
+        margins,
+    ]);
+    const videoMicrodataScript = (0, react_1.useMemo)(() => {
+        var _a;
+        const { name, description } = videoMicrodata || {};
+        const json = JSON.stringify(Object.assign(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, (videoMicrodata || {})), { name: name ? (0, microdata_1.sanitizeMicrodata)(name) : name, description: description ? (0, microdata_1.sanitizeMicrodata)(description) : description }));
+        return video || youtube || videoIframe ? (react_1.default.createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } })) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
+};
+exports.Media = Media;
+exports.default = exports.Media;

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

@@ -0,0 +1,12 @@
+/* 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__react-player {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+}

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

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

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
+const DefaultVideo_1 = require("../../DefaultVideo/DefaultVideo");
+const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer"));
+const b = (0, utils_1.block)('media-component-video');
+const Video = (props) => {
+    const { video, height, 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)(() => {
+        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));
+                        videoRef.play();
+                    }
+                }, { passive: true });
+            }
+            if (playVideo) {
+                // ref.current.play().catch(() => setHasVideoFallback(true));
+                ref.current.play();
+            }
+        }
+    }, [playVideo, video, setHasVideoFallback]);
+    (0, react_1.useEffect)(() => {
+        const handle = (event) => {
+            var _a, _b, _c, _d;
+            if (event.persisted) {
+                (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.load) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (video.autoplay) {
+                    (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.play) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+            }
+        };
+        window.addEventListener('pageshow', handle);
+        return () => {
+            window.removeEventListener('pageshow', handle);
+        };
+    }, [video.autoplay]);
+    const reactPlayerBlock = (0, react_1.useMemo)(() => {
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
+        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, 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, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
+    }, [
+        video,
+        height,
+        videoClassName,
+        previewImg,
+        playVideo,
+        commonPlayButton,
+        customBarControlsClassName,
+        analyticsEvents,
+        ratio,
+    ]);
+    const defaultVideoBlock = (0, react_1.useMemo)(() => {
+        return video.src.length ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height, display: hasVideoFallback ? 'none' : 'block' }, "data-qa": qaAttributes.default },
+            react_1.default.createElement(DefaultVideo_1.DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }))) : null;
+    }, [
+        video,
+        hasVideoFallback,
+        videoClassName,
+        height,
+        qaAttributes.default,
+        qaAttributes.source,
+    ]);
+    switch (video.type) {
+        case models_1.MediaVideoType.Player:
+            return reactPlayerBlock;
+        case models_1.MediaVideoType.Default:
+        default:
+            return defaultVideoBlock;
+    }
+};
+exports.default = Video;

package/build/cjs/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[];

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVideoTypesWithPriority = exports.VideoType = exports.VideoExt = void 0;
+var VideoExt;
+(function (VideoExt) {
+    VideoExt["Mp4"] = "mp4";
+    VideoExt["Webm"] = "webm";
+    VideoExt["Ogg"] = "ogg";
+    VideoExt["Ogv"] = "ogv";
+})(VideoExt = exports.VideoExt || (exports.VideoExt = {}));
+var VideoType;
+(function (VideoType) {
+    VideoType["Mp4"] = "video/mp4";
+    VideoType["Webm"] = "video/webm";
+    VideoType["Ogg"] = "video/ogg";
+})(VideoType = exports.VideoType || (exports.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;
+    }
+}
+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];
+});
+exports.getVideoTypesWithPriority = getVideoTypesWithPriority;

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

@@ -0,0 +1,60 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-base__card img {
+  width: 100%;
+}
+.pc-media-base__card img,
+.pc-media-base__card video,
+.pc-media-base__card iframe,
+.pc-media-base__card .pc-map {
+  border-radius: var(--pc-border-radius);
+}
+.pc-media-base__card_shadow {
+  box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+}
+.pc-media-base__card_specialBorderRadius img,
+.pc-media-base__card_specialBorderRadius video,
+.pc-media-base__card_specialBorderRadius iframe,
+.pc-media-base__card_specialBorderRadius .pc-map {
+  border-radius: calc(var(--pc-border-radius) - 1px);
+}
+.pc-media-base__row_reverse {
+  flex-direction: row-reverse;
+}
+.pc-media-base__row_reverse .pc-media-base__content > * {
+  margin-right: 0;
+  margin-left: 64px;
+}
+.pc-media-base__header {
+  margin-bottom: 24px;
+}
+@media (max-width: 769px) {
+  .pc-media-base__row_reverse {
+    flex-direction: row;
+  }
+  .pc-media-base__row_reverse .pc-media-base__content > * {
+    margin-left: 0;
+  }
+  .pc-media-base__row_mobile-reverse {
+    flex-direction: column-reverse;
+  }
+  .pc-media-base__row_mobile-reverse .pc-media-base__content > * {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
+}
+@media (min-width: 769px) {
+  .pc-media-base.pc-AnimateBlock .pc-media-base__card, .pc-AnimateBlock .pc-media-base .pc-media-base__card {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-media-base.pc-AnimateBlock.animate .pc-media-base__card, .pc-AnimateBlock .pc-media-base.animate .pc-media-base__card {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+import { MediaBaseBlockProps } from '../../models';
+interface MediaBaseProps extends MediaBaseBlockProps {
+    children: ReactElement;
+    onScroll?: () => void;
+}
+export declare const MediaBase: {
+    (props: MediaBaseProps): JSX.Element;
+    Card: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export default MediaBase;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaBase = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const grid_1 = require("../../grid");
+const utils_1 = require("../../utils");
+const Title_1 = tslib_1.__importDefault(require("../Title/Title"));
+const MediaBaseContent_1 = tslib_1.__importDefault(require("./MediaBaseContent"));
+const b = (0, utils_1.block)('media-base');
+const Card = () => null;
+const MediaBase = (props) => {
+    const { children, largeMedia, smallMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, onScroll, mediaOnlyColSizes = { all: 12, md: 8 } } = props, mediaContentProps = tslib_1.__rest(props, ["children", "largeMedia", "smallMedia", "direction", "mobileDirection", "animated", "mediaOnly", "onScroll", "mediaOnlyColSizes"]);
+    const { title, description } = mediaContentProps;
+    const mediaSizes = (0, react_1.useMemo)(() => {
+        let md = 6;
+        if (smallMedia) {
+            md = 4;
+        }
+        if (largeMedia) {
+            md = 8;
+        }
+        return mediaOnly
+            ? { [grid_1.GridColumnSize.All]: 12 }
+            : { [grid_1.GridColumnSize.Md]: md, [grid_1.GridColumnSize.All]: 12 };
+    }, [mediaOnly, largeMedia, smallMedia]);
+    const contentSizes = (0, react_1.useMemo)(() => {
+        let md = 6;
+        if (smallMedia) {
+            md = 8;
+        }
+        if (largeMedia) {
+            md = 4;
+        }
+        return { [grid_1.GridColumnSize.Md]: md, [grid_1.GridColumnSize.All]: 12 };
+    }, [largeMedia, smallMedia]);
+    const mediaContent = !mediaOnly && react_1.default.createElement(MediaBaseContent_1.default, Object.assign({}, mediaContentProps));
+    const card = children.type === Card ? children === null || children === void 0 ? void 0 : children.props.children : null;
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: onScroll, animate: animated },
+        mediaOnly && (react_1.default.createElement(Title_1.default, { className: b('header'), title: title, subtitle: description, colSizes: mediaOnlyColSizes })),
+        react_1.default.createElement(grid_1.Grid, null,
+            react_1.default.createElement(grid_1.Row, { className: b('row', {
+                    reverse: direction === 'media-content',
+                    'mobile-reverse': mobileDirection === 'media-content',
+                }) },
+                react_1.default.createElement(grid_1.Col, { className: b('content'), sizes: contentSizes }, mediaContent),
+                card ? (react_1.default.createElement(grid_1.Col, { sizes: mediaSizes },
+                    react_1.default.createElement("div", { className: b('card') }, card))) : null))));
+};
+exports.MediaBase = MediaBase;
+exports.MediaBase.Card = Card;
+exports.default = exports.MediaBase;