@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const models_1 = require("../../../models");
+const ReactPlayer_1 = (0, tslib_1.__importDefault)(require("../../ReactPlayer/ReactPlayer"));
+const utils_1 = require("./utils");
+const utils_2 = require("../../../utils");
+const b = (0, utils_2.block)('media-component-video');
+const Video = (props) => {
+    const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    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));
+                    }
+                });
+            }
+            if (playVideo) {
+                ref.current.play().catch(() => setHasVideoFallback(true));
+            }
+        }
+    }, [playVideo, video, setHasVideoFallback]);
+    const reactPlayerBlock = (0, react_1.useMemo)(() => {
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
+        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika }));
+    }, [
+        video,
+        metrika,
+        previewImg,
+        playVideo,
+        videoClassName,
+        commonPlayButton,
+        customBarControlsClassName,
+    ]);
+    const defaultVideoBlock = (0, react_1.useMemo)(() => {
+        return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
+            react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, (0, utils_1.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
+    }, [video, videoClassName, hasVideoFallback, height]);
+    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/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,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+//TODO move into cloud components?
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+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);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        const { className, onClick, children } = this.props;
+        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick }, children));
+    }
+}
+exports.default = OutsideClick;

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

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren } from 'react';
+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/cjs/components/OverflowScroller/OverflowScroller.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const utils_1 = require("../../utils");
+const __1 = require("..");
+const b = (0, utils_1.block)('overflow-scroller');
+const TRANSITION_TIME = 300;
+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 = lodash_1.default.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_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("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+    }
+}
+exports.default = OverflowScroller;

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 = (0, 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,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/cjs/components/ReactPlayer/CustomBarControls.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ClassNameProps } from '../../models';
+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/cjs/components/ReactPlayer/CustomBarControls.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const CircleProgress_1 = (0, tslib_1.__importDefault)(require("./CircleProgress"));
+const b = (0, utils_1.block)('CustomBarControls');
+const CustomBarControls = (props) => {
+    const { mute, elapsedTimePercent = 0, className } = props;
+    const renderMute = (0, react_1.useCallback)((elapsedTime, muteConfig) => {
+        if (!muteConfig) {
+            return null;
+        }
+        const { isMuted, changeMute } = muteConfig;
+        return (react_1.default.createElement("div", { className: b('button'), onClick: changeMute },
+            react_1.default.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
+            !isMuted && react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTime, strokeWidth: 5 })));
+    }, []);
+    return react_1.default.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+};
+exports.default = CustomBarControls;

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

@@ -0,0 +1,13 @@
+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;
+    children?: React.ReactNode;
+}
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
+export default ReactPlayerBlock;