@gravity-ui/page-constructor 6.0.0-beta.11 → 6.0.0-beta.13

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

@@ -1,5 +1,10 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
-import en from './en.json';
-import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}OverflowScroller`);
+"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.js");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}OverflowScroller`);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/OverflowScroller/i18n/index.ts"],"names":[],"mappings":";;;;AAAA,iDAA2D;AAE3D,6CAA4C;AAE5C,gEAA2B;AAC3B,gEAA2B;AAEd,QAAA,IAAI,GAAG,IAAA,0BAAmB,EAAC,EAAC,EAAE,EAAF,iBAAE,EAAE,EAAE,EAAF,iBAAE,EAAC,EAAE,GAAG,cAAS,kBAAkB,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}OverflowScroller`);\n"]}

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../models';
+import { ClassNameProps } from "../../models/index.js";
 export interface CircleProgressProps extends ClassNameProps {
     elapsedTime: number;
     baseColor?: string;

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

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { block } from '../../utils';
-const b = block('CircleProgress');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils/index.js");
+const b = (0, utils_1.block)('CircleProgress');
 const CircleProgress = (props) => {
     const { baseColor, elapsedTime, circleColor = '#262626', strokeWidth = 10, radius = 50, className, } = props;
     const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
@@ -9,8 +12,9 @@ const CircleProgress = (props) => {
         if (!baseColor) {
             return null;
         }
-        return (_jsx("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
+        return ((0, jsx_runtime_1.jsx)("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
     }, [baseColor, radius, strokeWidth]);
-    return (_jsxs("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", children: [baseCircle, _jsx("circle", { cx: "60", cy: "60", r: radius, transform: "rotate(-90 60 60)", fill: "none", strokeDashoffset: circumference - elapsedTime * circumference, strokeDasharray: circumference, stroke: circleColor, strokeWidth: strokeWidth })] }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", children: [baseCircle, (0, jsx_runtime_1.jsx)("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;
+exports.default = CircleProgress;
+//# sourceMappingURL=CircleProgress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircleProgress.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/CircleProgress.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAG/B,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,gBAAgB,CAAC,CAAC;AAUlC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IAClD,MAAM,EACF,SAAS,EACT,WAAW,EACX,WAAW,GAAG,SAAS,EACvB,WAAW,GAAG,EAAE,EAChB,MAAM,GAAG,EAAE,EACX,SAAS,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,mCACI,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,WAAW,GAC1B,CACL,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAErC,OAAO,CACH,iCACI,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,aAEpB,UAAU,EACX,mCACI,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAE,MAAM,EACT,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,MAAM,EACX,gBAAgB,EAAE,aAAa,GAAG,WAAW,GAAG,aAAa,EAC7D,eAAe,EAAE,aAAa,EAC9B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,WAAW,GAClB,IACR,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ClassNameProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './CircleProgress.scss';\n\nconst b = block('CircleProgress');\n\nexport interface CircleProgressProps extends ClassNameProps {\n    elapsedTime: number;\n    baseColor?: string;\n    circleColor?: string;\n    strokeWidth?: number;\n    radius?: number;\n}\n\nconst CircleProgress = (props: CircleProgressProps) => {\n    const {\n        baseColor,\n        elapsedTime,\n        circleColor = '#262626',\n        strokeWidth = 10,\n        radius = 50,\n        className,\n    } = props;\n\n    const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);\n\n    const baseCircle = React.useMemo(() => {\n        if (!baseColor) {\n            return null;\n        }\n\n        return (\n            <circle\n                cx=\"60\"\n                cy=\"60\"\n                r={radius}\n                fill=\"none\"\n                stroke={baseColor}\n                strokeWidth={strokeWidth}\n            />\n        );\n    }, [baseColor, radius, strokeWidth]);\n\n    return (\n        <svg\n            className={b(null, className)}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 120 120\"\n        >\n            {baseCircle}\n            <circle\n                cx=\"60\"\n                cy=\"60\"\n                r={radius}\n                transform=\"rotate(-90 60 60)\"\n                fill=\"none\"\n                strokeDashoffset={circumference - elapsedTime * circumference}\n                strokeDasharray={circumference}\n                stroke={circleColor}\n                strokeWidth={strokeWidth}\n            ></circle>\n        </svg>\n    );\n};\n\nexport default CircleProgress;\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClassNameProps, CustomControlsOptions, CustomControlsType } from '../../models';
+import { ClassNameProps, CustomControlsOptions, CustomControlsType } from "../../models/index.js";
 interface MuteConfigProps {
     isMuted: boolean;
     changeMute: (event: React.MouseEvent) => void;

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

@@ -1,30 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Pause, Play, VolumeFill, VolumeLow, VolumeXmark } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
-import { CustomControlsType } from '../../models';
-import { block } from '../../utils';
-import CircleProgress from './CircleProgress';
-import { i18n } from './i18n';
-const b = block('CustomBarControls');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const models_1 = require("../../models/index.js");
+const utils_1 = require("../../utils/index.js");
+const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress.js"));
+const i18n_1 = require("./i18n/index.js");
+const b = (0, utils_1.block)('CustomBarControls');
 const playIconsMap = {
-    [CustomControlsType.WithMuteButton]: null,
-    [CustomControlsType.WithPlayPauseButton]: Play,
+    [models_1.CustomControlsType.WithMuteButton]: null,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.Play,
 };
 const pauseIconsMap = {
-    [CustomControlsType.WithMuteButton]: null,
-    [CustomControlsType.WithPlayPauseButton]: Pause,
+    [models_1.CustomControlsType.WithMuteButton]: null,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.Pause,
 };
 const muteIconsMap = {
-    [CustomControlsType.WithMuteButton]: VolumeFill,
-    [CustomControlsType.WithPlayPauseButton]: VolumeLow,
+    [models_1.CustomControlsType.WithMuteButton]: icons_1.VolumeFill,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeLow,
 };
 const unmuteIconsMap = {
-    [CustomControlsType.WithMuteButton]: VolumeXmark,
-    [CustomControlsType.WithPlayPauseButton]: VolumeXmark,
+    [models_1.CustomControlsType.WithMuteButton]: icons_1.VolumeXmark,
+    [models_1.CustomControlsType.WithPlayPauseButton]: icons_1.VolumeXmark,
 };
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, muteButtonShown: isMuteButtonShown = true, shown, positioning, } = props;
+    const { mute, elapsedTimePercent = 0, className, type = models_1.CustomControlsType.WithMuteButton, isPaused, onPlayClick, muteButtonShown: isMuteButtonShown = true, shown, positioning, } = props;
     const muteIcon = muteIconsMap[type];
     const unmuteIcon = unmuteIconsMap[type];
     const playIcon = playIconsMap[type];
@@ -34,15 +37,16 @@ const CustomBarControls = (props) => {
             return null;
         }
         const { isMuted, changeMute } = mute;
-        return (_jsxs("button", { className: b('button', { type }), onClick: changeMute, "aria-label": i18n(isMuted ? 'unmute' : 'mute'), children: [_jsx(Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }), type === CustomControlsType.WithMuteButton && !isMuted && (_jsx(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))] }));
+        return ((0, jsx_runtime_1.jsxs)("button", { className: b('button', { type }), onClick: changeMute, "aria-label": (0, i18n_1.i18n)(isMuted ? 'unmute' : 'mute'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }), type === models_1.CustomControlsType.WithMuteButton && !isMuted && ((0, jsx_runtime_1.jsx)(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))] }));
     }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
     const playPauseButton = React.useMemo(() => {
         const icon = isPaused ? playIcon : pauseIcon;
-        if (type === CustomControlsType.WithMuteButton || !icon) {
+        if (type === models_1.CustomControlsType.WithMuteButton || !icon) {
             return null;
         }
-        return (_jsx("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": i18n(isPaused ? 'play' : 'pause'), children: _jsx(Icon, { data: icon, className: b('play-icon', { type }) }) }));
+        return ((0, jsx_runtime_1.jsx)("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": (0, i18n_1.i18n)(isPaused ? 'play' : 'pause'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon, className: b('play-icon', { type }) }) }));
     }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
-    return (_jsxs("div", { className: b('wrapper', { type, shown, positioning }, className), children: [playPauseButton, muteButton] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('wrapper', { type, shown, positioning }, className), children: [playPauseButton, muteButton] }));
 };
-export default CustomBarControls;
+exports.default = CustomBarControls;
+//# sourceMappingURL=CustomBarControls.js.map

package/build/cjs/components/ReactPlayer/CustomBarControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBarControls.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/CustomBarControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Pause, Play, VolumeFill, VolumeLow, VolumeXmark} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {ClassNameProps, CustomControlsOptions, CustomControlsType} from '../../models';\nimport {block} from '../../utils';\n\nimport CircleProgress from './CircleProgress';\nimport {i18n} from './i18n';\n\nimport './CustomBarControls.scss';\n\nconst b = block('CustomBarControls');\n\nconst playIconsMap = {\n    [CustomControlsType.WithMuteButton]: null,\n    [CustomControlsType.WithPlayPauseButton]: Play,\n};\nconst pauseIconsMap = {\n    [CustomControlsType.WithMuteButton]: null,\n    [CustomControlsType.WithPlayPauseButton]: Pause,\n};\nconst muteIconsMap = {\n    [CustomControlsType.WithMuteButton]: VolumeFill,\n    [CustomControlsType.WithPlayPauseButton]: VolumeLow,\n};\nconst unmuteIconsMap = {\n    [CustomControlsType.WithMuteButton]: VolumeXmark,\n    [CustomControlsType.WithPlayPauseButton]: VolumeXmark,\n};\n\ninterface MuteConfigProps {\n    isMuted: boolean;\n    changeMute: (event: React.MouseEvent) => void;\n}\n\nexport interface CustomBarControlsProps extends ClassNameProps, CustomControlsOptions {\n    mute?: MuteConfigProps;\n    elapsedTimePercent?: number;\n    type?: CustomControlsType;\n    isPaused?: boolean;\n    onPlayClick?: () => void;\n    shown?: boolean;\n}\n\nconst CustomBarControls = (props: CustomBarControlsProps) => {\n    const {\n        mute,\n        elapsedTimePercent = 0,\n        className,\n        type = CustomControlsType.WithMuteButton,\n        isPaused,\n        onPlayClick,\n        muteButtonShown: isMuteButtonShown = true,\n        shown,\n        positioning,\n    } = props;\n\n    const muteIcon = muteIconsMap[type];\n    const unmuteIcon = unmuteIconsMap[type];\n    const playIcon = playIconsMap[type];\n    const pauseIcon = pauseIconsMap[type];\n\n    const muteButton = React.useMemo(() => {\n        if (!mute || !isMuteButtonShown) {\n            return null;\n        }\n\n        const {isMuted, changeMute} = mute;\n\n        return (\n            <button\n                className={b('button', {type})}\n                onClick={changeMute}\n                aria-label={i18n(isMuted ? 'unmute' : 'mute')}\n            >\n                <Icon data={isMuted ? unmuteIcon : muteIcon} className={b('mute-icon', {type})} />\n                {type === CustomControlsType.WithMuteButton && !isMuted && (\n                    <CircleProgress elapsedTime={elapsedTimePercent} strokeWidth={5} />\n                )}\n            </button>\n        );\n    }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);\n\n    const playPauseButton = React.useMemo(() => {\n        const icon = isPaused ? playIcon : pauseIcon;\n\n        if (type === CustomControlsType.WithMuteButton || !icon) {\n            return null;\n        }\n\n        return (\n            <button\n                onClick={onPlayClick}\n                className={b('button', {type})}\n                aria-label={i18n(isPaused ? 'play' : 'pause')}\n            >\n                <Icon data={icon} className={b('play-icon', {type})} />\n            </button>\n        );\n    }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);\n\n    return (\n        <div className={b('wrapper', {type, shown, positioning}, className)}>\n            {playPauseButton}\n            {muteButton}\n        </div>\n    );\n};\n\nexport default CustomBarControls;\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from '../../models';
+import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from "../../models/index.js";
 export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src'>, ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;

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

@@ -1,29 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlayFill } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
-import debounce from 'lodash/debounce';
-import ReactPlayer from 'react-player';
-import { MobileContext } from '../../context/mobileContext';
-import { VideoContext } from '../../context/videoContext';
-import { useAnalytics, useMount } from '../../hooks';
-import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
-import { block } from '../../utils';
-import CustomBarControls from './CustomBarControls';
-import { i18n } from './i18n';
-import { checkYoutubeVideos } from './utils';
-import { isYoutubePlayerInstance } from './utils/youtube';
-const b = block('ReactPlayer');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPlayerBlock = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
+const react_player_1 = tslib_1.__importDefault(require("react-player"));
+const mobileContext_1 = require("../../context/mobileContext/index.js");
+const videoContext_1 = require("../../context/videoContext/index.js");
+const hooks_1 = require("../../hooks/index.js");
+const models_1 = require("../../models/index.js");
+const utils_1 = require("../../utils/index.js");
+const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls.js"));
+const i18n_1 = require("./i18n/index.js");
+const utils_2 = require("./utils.js");
+const youtube_1 = require("./utils/youtube.js");
+const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
-export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
-    const isMobile = React.useContext(MobileContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
-    const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
-    const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
+exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
+    const isMobile = React.useContext(mobileContext_1.MobileContext);
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
+    const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
-    const { playingVideoRef, setProps } = React.useContext(VideoContext);
+    const { playingVideoRef, setProps } = React.useContext(videoContext_1.VideoContext);
     const ref = React.useRef(null);
     const buttonRef = React.useRef(null);
     const [playerRef, setPlayerRef] = React.useState();
@@ -37,22 +41,22 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [ended, setEnded] = React.useState(false);
     const [isMounted, setIsMounted] = React.useState(false);
     const [hovered, setHovered] = React.useState(isMobile);
-    useMount(() => setIsMounted(true));
-    const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);
+    (0, hooks_1.useMount)(() => setIsMounted(true));
+    const videoSrc = React.useMemo(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
     const eventsArray = React.useMemo(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
         }
         return [];
     }, [analyticsEvents]);
-    const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
+    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
     React.useImperativeHandle(originRef, () => {
         if (!playerRef) {
             return;
         }
         let play, pause, addEventListener;
         const videoInstance = playerRef.getInternalPlayer();
-        if (isYoutubePlayerInstance(videoInstance)) {
+        if ((0, youtube_1.isYoutubePlayerInstance)(videoInstance)) {
             ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
         }
         else {
@@ -93,7 +97,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [elapsedTime, playerRef, started]);
     React.useEffect(() => {
-        const updateSize = debounce(() => {
+        const updateSize = (0, debounce_1.default)(() => {
             if (ref.current) {
                 // We need to get parent's width does not equal 0
                 const parentElement = getParentElement(ref.current);
@@ -111,26 +115,26 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [actualRatio, autoRatio, ratio]);
-    const playEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
+    const playEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = React.useMemo(() => {
         let playButtonContent;
         switch (type) {
-            case PlayButtonType.Text:
+            case models_1.PlayButtonType.Text:
                 playButtonContent = text;
                 break;
-            case PlayButtonType.Default:
+            case models_1.PlayButtonType.Default:
             default:
-                playButtonContent = _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 });
+                playButtonContent = (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
                 break;
         }
-        return (_jsx("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef, children: playButtonContent }));
+        return ((0, jsx_runtime_1.jsx)("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef, children: playButtonContent }));
     }, [type, theme, text, buttonClassName]);
     const changeMute = React.useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&
-            controls === MediaVideoControlsType.Custom &&
-            customControlsType === CustomControlsType.WithMuteButton) {
+            controls === models_1.MediaVideoControlsType.Custom &&
+            customControlsType === models_1.CustomControlsType.WithMuteButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -157,8 +161,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [onClickPreview, handleAnalytics, playEvents]);
     const onPause = React.useCallback(() => {
         // For support correct state for youtube
-        if (controls !== MediaVideoControlsType.Custom ||
-            customControlsType !== CustomControlsType.WithMuteButton) {
+        if (controls !== models_1.MediaVideoControlsType.Custom ||
+            customControlsType !== models_1.CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
@@ -169,8 +173,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [autoPlay, initiallyMuted]);
     const onPlay = React.useCallback(() => {
         setIsPlaying(true);
-        if (controls === MediaVideoControlsType.Custom &&
-            customControlsType === CustomControlsType.WithMuteButton) {
+        if (controls === models_1.MediaVideoControlsType.Custom &&
+            customControlsType === models_1.CustomControlsType.WithMuteButton) {
             if (ended) {
                 changeMute(false);
             }
@@ -217,8 +221,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const handleClick = React.useCallback(() => {
         var _a;
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        if (controls === MediaVideoControlsType.Custom) {
-            if (customControlsType === CustomControlsType.WithMuteButton) {
+        if (controls === models_1.MediaVideoControlsType.Custom) {
+            if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
                 changeMute(muted);
             }
             else {
@@ -235,12 +239,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, []);
     const onFocusIn = React.useCallback(() => setHovered(true), []);
     const onFocusOut = React.useCallback(() => setHovered(false), []);
-    return (_jsx("div", { className: b({
+    return ((0, jsx_runtime_1.jsx)("div", { className: b({
             wrapper: !currentHeight,
             controls,
             contain,
             'auto-ratio': autoRatio,
-        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, children: isMounted ? (_jsxs(React.Fragment, { children: [_jsx(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, children: isMounted ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                         ? undefined
                         : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                         file: {
@@ -250,7 +254,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                                 disablepictureinpicture: isMobile ? '' : undefined,
                             },
                         },
-                    } }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, mute: {
+                    } }), controls === models_1.MediaVideoControlsType.Custom && ((0, jsx_runtime_1.jsx)(CustomBarControls_1.default, { className: customBarControlsClassName, mute: {
                         isMuted: muted,
                         changeMute: (event) => {
                             event.stopPropagation();
@@ -268,4 +272,5 @@ function getParentElement(element) {
     }
     return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
 }
-export default ReactPlayerBlock;
+exports.default = exports.ReactPlayerBlock;
+//# sourceMappingURL=ReactPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPlayer.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/ReactPlayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport ReactPlayer from 'react-player';\n\nimport {MobileContext} from '../../context/mobileContext';\nimport {VideoContext} from '../../context/videoContext';\nimport {useAnalytics, useMount} from '../../hooks';\nimport {\n    AnalyticsEvent,\n    ClassNameProps,\n    CustomControlsButtonPositioning,\n    CustomControlsType,\n    DefaultEventNames,\n    MediaVideoControlsType,\n    MediaVideoProps,\n    PlayButtonProps,\n    PlayButtonThemes,\n    PlayButtonType,\n    PredefinedEventTypes,\n    ReactPlayerBlockHandler,\n} from '../../models';\nimport {block} from '../../utils';\n\nimport CustomBarControls from './CustomBarControls';\nimport {i18n} from './i18n';\nimport {checkYoutubeVideos} from './utils';\nimport {isYoutubePlayerInstance} from './utils/youtube';\n\nimport './ReactPlayer.scss';\n\nconst b = block('ReactPlayer');\n\nconst FPS = 60;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'loop' | 'src'>,\n        ClassNameProps {\n    src: string | string[];\n    previewImgUrl?: string;\n    loop?: boolean;\n    customBarControlsClassName?: string;\n    showPreview?: boolean;\n    onClickPreview?: () => void;\n    height?: number;\n    ratio?: number;\n    autoRatio?: boolean;\n    children?: React.ReactNode;\n}\n\ninterface PlayerPropgress {\n    played: number;\n}\n\n// eslint-disable-next-line react/display-name\nexport const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactPlayerBlockProps>(\n    (props, originRef) => {\n        const isMobile = React.useContext(MobileContext);\n        const {\n            src,\n            previewImgUrl,\n            loop = false,\n            controls = MediaVideoControlsType.Default,\n            customControlsOptions = {},\n            muted: initiallyMuted = false,\n            elapsedTime,\n            playButton,\n            className,\n            customBarControlsClassName,\n            showPreview,\n            onClickPreview,\n            analyticsEvents,\n            height,\n            ariaLabel,\n            ratio,\n            autoRatio,\n            contain = true,\n        } = props;\n\n        const {\n            type = PlayButtonType.Default,\n            theme = PlayButtonThemes.Blue,\n            text,\n            className: buttonClassName,\n        } = playButton || ({} as PlayButtonProps);\n        const {\n            type: customControlsType = CustomControlsType.WithMuteButton,\n            muteButtonShown,\n            positioning = CustomControlsButtonPositioning.Center,\n        } = customControlsOptions;\n\n        const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);\n        const mute = initiallyMuted || autoPlay;\n\n        const {playingVideoRef, setProps} = React.useContext(VideoContext);\n\n        const ref = React.useRef<HTMLDivElement>(null);\n        const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n        const [playerRef, setPlayerRef] = React.useState<ReactPlayer>();\n        const [isPlaying, setIsPlaying] = React.useState(autoPlay);\n        const [playedPercent, setPlayedPercent] = React.useState<number>(0);\n        const [currentHeight, setCurrentHeight] = React.useState(height);\n        const [width, setWidth] = React.useState<number>(0);\n        const [actualRatio, setActualRatio] = React.useState<number>();\n        const [muted, setMuted] = React.useState<boolean>(mute);\n        const [started, setStarted] = React.useState(autoPlay);\n        const [ended, setEnded] = React.useState<boolean>(false);\n        const [isMounted, setIsMounted] = React.useState(false);\n        const [hovered, setHovered] = React.useState(isMobile);\n\n        useMount(() => setIsMounted(true));\n\n        const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);\n\n        const eventsArray = React.useMemo(() => {\n            if (analyticsEvents) {\n                return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];\n            }\n\n            return [];\n        }, [analyticsEvents]);\n        const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);\n\n        React.useImperativeHandle(originRef, () => {\n            if (!playerRef) {\n                return;\n            }\n\n            let play, pause, addEventListener;\n            const videoInstance = playerRef.getInternalPlayer();\n            if (isYoutubePlayerInstance(videoInstance)) {\n                ({pauseVideo: pause, playVideo: play, addEventListener} = videoInstance);\n            } else {\n                // it is assumed that `videoInstance` is HTMLVideoElement by default\n                ({play, pause, addEventListener} = videoInstance);\n            }\n\n            // eslint-disable-next-line consistent-return\n            return {\n                play: play.bind(videoInstance),\n                pause: pause.bind(videoInstance),\n                addEventListener: addEventListener.bind(videoInstance),\n            };\n        }, [playerRef]);\n\n        React.useEffect(() => {\n            if (ref.current && !playingVideoRef?.contains(ref.current)) {\n                setMuted(true);\n            }\n        }, [playingVideoRef]);\n\n        React.useEffect(() => {\n            if (showPreview) {\n                playerRef?.showPreview();\n            }\n        }, [showPreview, playerRef]);\n\n        React.useEffect(() => {\n            if (playerRef && !started) {\n                setIsPlaying(autoPlay);\n            }\n        }, [autoPlay, playerRef, started]);\n\n        React.useEffect(() => setMuted(mute), [mute]);\n\n        React.useEffect(() => {\n            if (!started && isPlaying) {\n                setStarted(true);\n            }\n        }, [isPlaying, started]);\n\n        React.useEffect(() => {\n            if (started && !Number.isNaN(Number(elapsedTime))) {\n                playerRef?.seekTo(elapsedTime ?? 0, 'seconds');\n            }\n        }, [elapsedTime, playerRef, started]);\n\n        React.useEffect(() => {\n            const updateSize = debounce(() => {\n                if (ref.current) {\n                    // We need to get parent's width does not equal 0\n                    const parentElement = getParentElement(ref.current);\n                    const {paddingLeft, paddingRight} = getComputedStyle(parentElement);\n                    const newWidth =\n                        parentElement.offsetWidth -\n                        parseFloat(paddingLeft) -\n                        parseFloat(paddingRight);\n\n                    setWidth(newWidth);\n                    setCurrentHeight(\n                        Math.floor(\n                            getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined)),\n                        ),\n                    );\n                }\n            }, 200);\n\n            updateSize();\n            window.addEventListener('resize', updateSize, {passive: true});\n            return () => {\n                window.removeEventListener('resize', updateSize);\n            };\n        }, [actualRatio, autoRatio, ratio]);\n\n        const playEvents = React.useMemo(\n            () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play),\n            [eventsArray],\n        );\n        const stopEvents = React.useMemo(\n            () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Stop),\n            [eventsArray],\n        );\n\n        const playIcon = React.useMemo(() => {\n            let playButtonContent;\n\n            switch (type) {\n                case PlayButtonType.Text:\n                    playButtonContent = text;\n                    break;\n                case PlayButtonType.Default:\n                default:\n                    playButtonContent = <Icon className={b('icon')} data={PlayFill} size={24} />;\n                    break;\n            }\n\n            return (\n                <button\n                    className={b('button', {theme, text: Boolean(text)}, buttonClassName)}\n                    aria-label={i18n('play')}\n                    ref={buttonRef}\n                >\n                    {playButtonContent}\n                </button>\n            );\n        }, [type, theme, text, buttonClassName]);\n\n        const changeMute = React.useCallback(\n            (isMuted: boolean) => {\n                if (\n                    isMuted &&\n                    playerRef &&\n                    controls === MediaVideoControlsType.Custom &&\n                    customControlsType === CustomControlsType.WithMuteButton\n                ) {\n                    playerRef.seekTo(0);\n                    setPlayedPercent(0);\n                }\n\n                const events = isMuted ? playEvents : stopEvents;\n                handleAnalytics(events);\n\n                if (isMuted) {\n                    setProps({playingVideoRef: ref.current});\n                }\n\n                // In order to the progress bar to update (equals 0) before displaying\n                setTimeout(() => setMuted(!isMuted), 0);\n            },\n            [\n                playerRef,\n                customControlsType,\n                playEvents,\n                stopEvents,\n                handleAnalytics,\n                setProps,\n                controls,\n            ],\n        );\n\n        const handleClickPreview = React.useCallback(() => {\n            setIsPlaying(true);\n            onClickPreview?.();\n\n            handleAnalytics(playEvents);\n        }, [onClickPreview, handleAnalytics, playEvents]);\n\n        const onPause = React.useCallback(() => {\n            // For support correct state for youtube\n            if (\n                controls !== MediaVideoControlsType.Custom ||\n                customControlsType !== CustomControlsType.WithMuteButton\n            ) {\n                setIsPlaying(false);\n            }\n        }, [controls, customControlsType]);\n\n        const onStart = React.useCallback(() => {\n            if (!autoPlay && !initiallyMuted) {\n                setMuted(false);\n            }\n        }, [autoPlay, initiallyMuted]);\n\n        const onPlay = React.useCallback(() => {\n            setIsPlaying(true);\n\n            if (\n                controls === MediaVideoControlsType.Custom &&\n                customControlsType === CustomControlsType.WithMuteButton\n            ) {\n                if (ended) {\n                    changeMute(false);\n                } else if (!isPlaying) {\n                    changeMute(muted);\n                }\n                setEnded(false);\n            }\n        }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);\n\n        const onReady = React.useCallback((player: ReactPlayer) => {\n            setPlayerRef(player);\n            const videoElement = player.getInternalPlayer();\n            const videoWidth = videoElement.videoWidth as number | undefined;\n            const videoHeight = videoElement.videoHeight as number | undefined;\n            if (videoWidth && videoHeight) {\n                setActualRatio(videoHeight / videoWidth);\n            }\n        }, []);\n\n        const onProgress = React.useCallback((progress: PlayerPropgress) => {\n            setPlayedPercent(progress.played);\n\n            if (progress.played === 1) {\n                setMuted(true);\n            }\n        }, []);\n\n        const onEnded = React.useCallback(() => {\n            // Youtube videos not muted after finishing playing and start again.\n            // 'onEnded' does not fire when 'loop' is set to true.\n            // It is custom loop with muted sound after finishing playing and start again.\n            if (loop) {\n                setPlayedPercent(0);\n                setIsPlaying(true);\n                playerRef?.seekTo(0);\n            }\n\n            setEnded(true);\n        }, [loop, playerRef]);\n\n        const onPlayClick = React.useCallback(() => {\n            if (isPlaying) {\n                onPause();\n            } else {\n                onPlay();\n            }\n        }, [isPlaying, onPlay, onPause]);\n\n        const handleClick = React.useCallback(() => {\n            buttonRef.current?.click();\n\n            if (controls === MediaVideoControlsType.Custom) {\n                if (customControlsType === CustomControlsType.WithMuteButton) {\n                    changeMute(muted);\n                } else {\n                    onPlayClick();\n                }\n            }\n        }, [controls, customControlsType, changeMute, muted, onPlayClick]);\n\n        const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n            const key = e.key.toLowerCase();\n\n            if (key === 'enter') {\n                buttonRef.current?.click();\n            }\n        }, []);\n\n        const onFocusIn = React.useCallback(() => setHovered(true), []);\n        const onFocusOut = React.useCallback(() => setHovered(false), []);\n\n        return (\n            <div\n                className={b(\n                    {\n                        wrapper: !currentHeight,\n                        controls,\n                        contain,\n                        'auto-ratio': autoRatio,\n                    },\n                    className,\n                )}\n                ref={ref}\n                onClick={handleClick}\n                onMouseEnter={onFocusIn}\n                onMouseLeave={onFocusOut}\n                onFocus={onFocusIn}\n                onBlur={onFocusOut}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                {isMounted ? (\n                    <React.Fragment>\n                        <ReactPlayer\n                            className={b('player')}\n                            url={videoSrc}\n                            muted={muted}\n                            controls={controls === MediaVideoControlsType.Default}\n                            height={currentHeight || '100%'}\n                            width={width || '100%'}\n                            light={previewImgUrl}\n                            playing={isPlaying}\n                            playIcon={playIcon}\n                            progressInterval={FPS}\n                            onClickPreview={handleClickPreview}\n                            onStart={onStart}\n                            onReady={onReady}\n                            onPlay={onPlay}\n                            onPause={\n                                autoPlay && customControlsType !== CustomControlsType.WithMuteButton\n                                    ? undefined\n                                    : onPause\n                            } // to prevent pause icon flickering when autoplayed video ends\n                            onProgress={onProgress}\n                            onEnded={onEnded}\n                            aria-label={ariaLabel}\n                            previewTabIndex={-1}\n                            config={{\n                                file: {\n                                    attributes: {\n                                        pip: isMobile ? 'false' : undefined,\n                                        playsinline: isMobile ? '' : undefined,\n                                        disablepictureinpicture: isMobile ? '' : undefined,\n                                    },\n                                },\n                            }}\n                        />\n                        {controls === MediaVideoControlsType.Custom && (\n                            <CustomBarControls\n                                className={customBarControlsClassName}\n                                mute={{\n                                    isMuted: muted,\n                                    changeMute: (event: React.MouseEvent) => {\n                                        event.stopPropagation();\n                                        changeMute(muted);\n                                    },\n                                }}\n                                elapsedTimePercent={playedPercent}\n                                type={customControlsType}\n                                isPaused={!isPlaying}\n                                onPlayClick={onPlayClick}\n                                muteButtonShown={muteButtonShown}\n                                shown={hovered && ((!started && !previewImgUrl) || started)}\n                                positioning={positioning}\n                            />\n                        )}\n                    </React.Fragment>\n                ) : null}\n            </div>\n        );\n    },\n);\n\nfunction getHeight(width: number, ratio: number = 9 / 16): number {\n    return width * ratio;\n}\n\nfunction getParentElement(element: HTMLElement): HTMLElement {\n    const parentElement = element.parentElement;\n\n    if (!parentElement) {\n        return element;\n    }\n\n    return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);\n}\n\nexport default ReactPlayerBlock;\n"]}

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

@@ -1,5 +1,10 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
-import en from './en.json';
-import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ReactPlayer`);
+"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.js");
+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}ReactPlayer`);
+//# sourceMappingURL=index.js.map

package/build/cjs/components/ReactPlayer/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/ReactPlayer/i18n/index.ts"],"names":[],"mappings":";;;;AAAA,iDAA2D;AAE3D,6CAA4C;AAE5C,gEAA2B;AAC3B,gEAA2B;AAEd,QAAA,IAAI,GAAG,IAAA,0BAAmB,EAAC,EAAC,EAAE,EAAF,iBAAE,EAAE,EAAE,EAAF,iBAAE,EAAC,EAAE,GAAG,cAAS,aAAa,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}ReactPlayer`);\n"]}

package/build/cjs/components/ReactPlayer/utils/youtube.js

@@ -1,3 +1,8 @@
-export const isYoutubePlayerInstance = (playerInstance) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isYoutubePlayerInstance = void 0;
+const isYoutubePlayerInstance = (playerInstance) => {
     return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
 };
+exports.isYoutubePlayerInstance = isYoutubePlayerInstance;
+//# sourceMappingURL=youtube.js.map

package/build/cjs/components/ReactPlayer/utils/youtube.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.js","sourceRoot":"../../../../../src","sources":["components/ReactPlayer/utils/youtube.ts"],"names":[],"mappings":";;;AAEO,MAAM,uBAAuB,GAAG,CACnC,cAAuD,EACxB,EAAE;IACjC,OAAO,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC;AAJW,QAAA,uBAAuB,2BAIlC","sourcesContent":["import type {YouTubePlayer} from 'youtube-player/dist/types';\n\nexport const isYoutubePlayerInstance = (\n    playerInstance: Record<string, unknown> | YouTubePlayer,\n): playerInstance is YouTubePlayer => {\n    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);\n};\n"]}

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

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkYoutubeVideos = void 0;
 // the file serves to support live video with react-player@2.9
 const LIVE_YUOTUBE_VIDEO_REGEX = /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
 const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
@@ -12,9 +15,11 @@ const transformYoutubeUrl = (src) => {
     }
     return src;
 };
-export const checkYoutubeVideos = (src) => {
+const checkYoutubeVideos = (src) => {
     if (Array.isArray(src)) {
         return src.map((videoUrl) => transformYoutubeUrl(videoUrl));
     }
     return transformYoutubeUrl(src);
 };
+exports.checkYoutubeVideos = checkYoutubeVideos;
+//# sourceMappingURL=utils.js.map

package/build/cjs/components/ReactPlayer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/utils.ts"],"names":[],"mappings":";;;AAAA,8DAA8D;AAC9D,MAAM,wBAAwB,GAC1B,0EAA0E,CAAC;AAC/E,MAAM,sBAAsB,GAAG,kCAAkC,CAAC;AAElE,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;;IACxC,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACrC,MAAM,aAAa,GAAG,MAAA,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,aAAa,EAAE,CAAC;YACjB,OAAO,GAAG,CAAC;QACf,CAAC;QAED,OAAO,GAAG,sBAAsB,GAAG,aAAa,EAAE,CAAC;IACvD,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AAEK,MAAM,kBAAkB,GAAG,CAAC,GAAsB,EAAE,EAAE;IACzD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACrB,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACpC,CAAC,CAAC;AANW,QAAA,kBAAkB,sBAM7B","sourcesContent":["// the file serves to support live video with react-player@2.9\nconst LIVE_YUOTUBE_VIDEO_REGEX =\n    /(?:youtu\\.be\\/live\\/|youtube(?:-nocookie)?\\.com\\/(?:live\\/))((\\w|-){11})/;\nconst YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';\n\nconst transformYoutubeUrl = (src: string) => {\n    if (LIVE_YUOTUBE_VIDEO_REGEX.test(src)) {\n        const youtubeLiveId = src.match(LIVE_YUOTUBE_VIDEO_REGEX)?.[1];\n        if (!youtubeLiveId) {\n            return src;\n        }\n\n        return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;\n    }\n\n    return src;\n};\n\nexport const checkYoutubeVideos = (src: string | string[]) => {\n    if (Array.isArray(src)) {\n        return src.map((videoUrl) => transformYoutubeUrl(videoUrl));\n    }\n\n    return transformYoutubeUrl(src);\n};\n"]}

package/build/cjs/components/RootCn/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps } from "../../models/index.js";
 declare const RootCn: ({ className, children }: React.PropsWithChildren<ClassNameProps>) => import("react/jsx-runtime").JSX.Element;
 export default RootCn;

package/build/cjs/components/RootCn/index.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '../../context/theme';
-import { rootCn } from '../../utils';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("../../context/theme/index.js");
+const utils_1 = require("../../utils/index.js");
 const RootCn = ({ className, children }) => {
-    const theme = useTheme();
-    return _jsx("div", { className: rootCn({ theme }, className), children: children });
+    const theme = (0, theme_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.rootCn)({ theme }, className), children: children });
 };
-export default RootCn;
+exports.default = RootCn;
+//# sourceMappingURL=index.js.map

package/build/cjs/components/RootCn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RootCn/index.tsx"],"names":[],"mappings":";;;AAEA,wDAA6C;AAE7C,gDAAmC;AAEnC,MAAM,MAAM,GAAG,CAAC,EAAC,SAAS,EAAE,QAAQ,EAA0C,EAAE,EAAE;IAC9E,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,OAAO,gCAAK,SAAS,EAAE,IAAA,cAAM,EAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;AACxE,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useTheme} from '../../context/theme';\nimport {ClassNameProps} from '../../models';\nimport {rootCn} from '../../utils';\n\nconst RootCn = ({className, children}: React.PropsWithChildren<ClassNameProps>) => {\n    const theme = useTheme();\n\n    return <div className={rootCn({theme}, className)}>{children}</div>;\n};\n\nexport default RootCn;\n"]}

package/build/cjs/components/RouterLink/RouterLink.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { LocationContext } from '../../context/locationContext';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const locationContext_1 = require("../../context/locationContext/index.js");
 const RouterLink = ({ href, children }) => {
-    const { Link } = React.useContext(LocationContext);
-    return Link ? _jsx(Link, { href: href, children: children }) : _jsx(React.Fragment, { children: children });
+    const { Link } = React.useContext(locationContext_1.LocationContext);
+    return Link ? (0, jsx_runtime_1.jsx)(Link, { href: href, children: children }) : (0, jsx_runtime_1.jsx)(React.Fragment, { children: children });
 };
-export default RouterLink;
+exports.default = RouterLink;
+//# sourceMappingURL=RouterLink.js.map

package/build/cjs/components/RouterLink/RouterLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterLink.js","sourceRoot":"../../../../src","sources":["components/RouterLink/RouterLink.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,4EAA8D;AAO9D,MAAM,UAAU,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAA2C,EAAE,EAAE;IAC9E,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAe,CAAC,CAAC;IAEjD,OAAO,IAAI,CAAC,CAAC,CAAC,uBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,uBAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;AACpG,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {LocationContext} from '../../context/locationContext';\n\nexport interface RouterLinkProps {\n    href: string;\n    [key: string]: unknown;\n}\n\nconst RouterLink = ({href, children}: React.PropsWithChildren<RouterLinkProps>) => {\n    const {Link} = React.useContext(LocationContext);\n\n    return Link ? <Link href={href}>{children}</Link> : <React.Fragment>{children}</React.Fragment>;\n};\n\nexport default RouterLink;\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClassNameProps, TableProps } from '../../models';
+import { ClassNameProps, TableProps } from "../../models/index.js";
 export default class Table extends React.Component<TableProps & ClassNameProps> {
     render(): import("react/jsx-runtime").JSX.Element | null;
     private renderTable;