@gravity-ui/page-constructor 6.0.0-alpha.5 → 6.0.0-beta.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircleProgress.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/CircleProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAElC,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,GAAG,KAAK,CAAC,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,iBACI,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,eACI,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,aAEpB,UAAU,EACX,iBACI,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,eAAe,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/esm/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ClassNameProps, CustomControlsOptions, CustomControlsType } from '../../models';
+import * as React from 'react';
+import { ClassNameProps, CustomControlsOptions, CustomControlsType } from "../../models/index.js";
 import './CustomBarControls.css';
 interface MuteConfigProps {
     isMuted: boolean;
@@ -13,5 +13,5 @@ export interface CustomBarControlsProps extends ClassNameProps, CustomControlsOp
     onPlayClick?: () => void;
     shown?: boolean;
 }
-declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
+declare const CustomBarControls: (props: CustomBarControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomBarControls;

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

@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
+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';
+import { CustomControlsType } from "../../models/index.js";
+import { block } from "../../utils/index.js";
+import CircleProgress from "./CircleProgress.js";
+import { i18n } from "./i18n/index.js";
 import './CustomBarControls.css';
 const b = block('CustomBarControls');
 const playIconsMap = {
@@ -29,25 +30,21 @@ const CustomBarControls = (props) => {
     const unmuteIcon = unmuteIconsMap[type];
     const playIcon = playIconsMap[type];
     const pauseIcon = pauseIconsMap[type];
-    const muteButton = useMemo(() => {
+    const muteButton = React.useMemo(() => {
         if (!mute || !isMuteButtonShown) {
             return null;
         }
         const { isMuted, changeMute } = mute;
-        return (React.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": i18n(isMuted ? 'unmute' : 'mute') },
-            React.createElement(Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
-            type === CustomControlsType.WithMuteButton && !isMuted && (React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
+        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 }))] }));
     }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
-    const playPauseButton = useMemo(() => {
+    const playPauseButton = React.useMemo(() => {
         const icon = isPaused ? playIcon : pauseIcon;
         if (type === CustomControlsType.WithMuteButton || !icon) {
             return null;
         }
-        return (React.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": i18n(isPaused ? 'play' : 'pause') },
-            React.createElement(Icon, { data: icon, className: b('play-icon', { type }) })));
+        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 }) }) }));
     }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
-    return (React.createElement("div", { className: b('wrapper', { type, shown, positioning }, className) },
-        playPauseButton,
-        muteButton));
+    return (_jsxs("div", { className: b('wrapper', { type, shown, positioning }, className), children: [playPauseButton, muteButton] }));
 };
 export default CustomBarControls;
+//# sourceMappingURL=CustomBarControls.js.map

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

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

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

@@ -1,52 +1,53 @@
-import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+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';
+import { MobileContext } from "../../context/mobileContext/index.js";
+import { VideoContext } from "../../context/videoContext/index.js";
+import { useAnalytics, useMount } from "../../hooks/index.js";
+import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from "../../models/index.js";
+import { block } from "../../utils/index.js";
+import CustomBarControls from "./CustomBarControls.js";
+import { i18n } from "./i18n/index.js";
+import { checkYoutubeVideos } from "./utils.js";
+import { isYoutubePlayerInstance } from "./utils/youtube.js";
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
-    const isMobile = useContext(MobileContext);
+    const 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;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
-    const { playingVideoRef, setProps } = useContext(VideoContext);
-    const ref = useRef(null);
-    const buttonRef = useRef(null);
-    const [playerRef, setPlayerRef] = useState();
-    const [isPlaying, setIsPlaying] = useState(autoPlay);
-    const [playedPercent, setPlayedPercent] = useState(0);
-    const [currentHeight, setCurrentHeight] = useState(height);
-    const [width, setWidth] = useState(0);
-    const [actualRatio, setActualRatio] = useState();
-    const [muted, setMuted] = useState(mute);
-    const [started, setStarted] = useState(autoPlay);
-    const [ended, setEnded] = useState(false);
-    const [isMounted, setIsMounted] = useState(false);
-    const [hovered, setHovered] = useState(isMobile);
+    const { playingVideoRef, setProps } = React.useContext(VideoContext);
+    const ref = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const [playerRef, setPlayerRef] = React.useState();
+    const [isPlaying, setIsPlaying] = React.useState(autoPlay);
+    const [playedPercent, setPlayedPercent] = React.useState(0);
+    const [currentHeight, setCurrentHeight] = React.useState(height);
+    const [width, setWidth] = React.useState(0);
+    const [actualRatio, setActualRatio] = React.useState();
+    const [muted, setMuted] = React.useState(mute);
+    const [started, setStarted] = React.useState(autoPlay);
+    const [ended, setEnded] = React.useState(false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [hovered, setHovered] = React.useState(isMobile);
     useMount(() => setIsMounted(true));
-    const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
-    const eventsArray = useMemo(() => {
+    const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);
+    const eventsArray = React.useMemo(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
         }
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
-    useImperativeHandle(originRef, () => {
+    React.useImperativeHandle(originRef, () => {
         if (!playerRef) {
             return;
         }
@@ -66,33 +67,33 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             addEventListener: addEventListener.bind(videoInstance),
         };
     }, [playerRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
     }, [playingVideoRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (playerRef && !started) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef, started]);
-    useEffect(() => setMuted(mute), [mute]);
-    useEffect(() => {
+    React.useEffect(() => setMuted(mute), [mute]);
+    React.useEffect(() => {
         if (!started && isPlaying) {
             setStarted(true);
         }
     }, [isPlaying, started]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (started && !Number.isNaN(Number(elapsedTime))) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(elapsedTime !== null && elapsedTime !== void 0 ? elapsedTime : 0, 'seconds');
         }
     }, [elapsedTime, playerRef, started]);
-    useEffect(() => {
+    React.useEffect(() => {
         const updateSize = debounce(() => {
             if (ref.current) {
                 // We need to get parent's width does not equal 0
@@ -111,9 +112,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [actualRatio, autoRatio, ratio]);
-    const playEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
-    const playIcon = useMemo(() => {
+    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 playIcon = React.useMemo(() => {
         let playButtonContent;
         switch (type) {
             case PlayButtonType.Text:
@@ -121,12 +122,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 break;
             case PlayButtonType.Default:
             default:
-                playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 });
+                playButtonContent = _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 });
                 break;
         }
-        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef }, playButtonContent));
+        return (_jsx("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef, children: playButtonContent }));
     }, [type, theme, text, buttonClassName]);
-    const changeMute = useCallback((isMuted) => {
+    const changeMute = React.useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&
             controls === MediaVideoControlsType.Custom &&
@@ -150,24 +151,24 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         setProps,
         controls,
     ]);
-    const handleClickPreview = useCallback(() => {
+    const handleClickPreview = React.useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
         handleAnalytics(playEvents);
     }, [onClickPreview, handleAnalytics, playEvents]);
-    const onPause = useCallback(() => {
+    const onPause = React.useCallback(() => {
         // For support correct state for youtube
         if (controls !== MediaVideoControlsType.Custom ||
             customControlsType !== CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
-    const onStart = useCallback(() => {
+    const onStart = React.useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
         }
     }, [autoPlay, initiallyMuted]);
-    const onPlay = useCallback(() => {
+    const onPlay = React.useCallback(() => {
         setIsPlaying(true);
         if (controls === MediaVideoControlsType.Custom &&
             customControlsType === CustomControlsType.WithMuteButton) {
@@ -180,7 +181,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setEnded(false);
         }
     }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
-    const onReady = useCallback((player) => {
+    const onReady = React.useCallback((player) => {
         setPlayerRef(player);
         const videoElement = player.getInternalPlayer();
         const videoWidth = videoElement.videoWidth;
@@ -189,13 +190,13 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = useCallback((progress) => {
+    const onProgress = React.useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
     }, []);
-    const onEnded = useCallback(() => {
+    const onEnded = React.useCallback(() => {
         // Youtube videos not muted after finishing playing and start again.
         // 'onEnded' does not fire when 'loop' is set to true.
         // It is custom loop with muted sound after finishing playing and start again.
@@ -206,7 +207,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const onPlayClick = useCallback(() => {
+    const onPlayClick = React.useCallback(() => {
         if (isPlaying) {
             onPause();
         }
@@ -214,7 +215,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             onPlay();
         }
     }, [isPlaying, onPlay, onPause]);
-    const handleClick = useCallback(() => {
+    const handleClick = React.useCallback(() => {
         var _a;
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === MediaVideoControlsType.Custom) {
@@ -226,39 +227,37 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }
         }
     }, [controls, customControlsType, changeMute, muted, onPlayClick]);
-    const handleKeyDown = useCallback((e) => {
+    const handleKeyDown = React.useCallback((e) => {
         var _a;
         const key = e.key.toLowerCase();
         if (key === 'enter') {
             (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }, []);
-    const onFocusIn = useCallback(() => setHovered(true), []);
-    const onFocusOut = useCallback(() => setHovered(false), []);
-    return (React.createElement("div", { className: b({
+    const onFocusIn = React.useCallback(() => setHovered(true), []);
+    const onFocusOut = React.useCallback(() => setHovered(false), []);
+    return (_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 }, isMounted ? (React.createElement(Fragment, null,
-        React.createElement(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
-                ? undefined
-                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
-                file: {
-                    attributes: {
-                        pip: isMobile ? 'false' : undefined,
-                        playsinline: isMobile ? '' : undefined,
-                        disablepictureinpicture: isMobile ? '' : undefined,
-                    },
-                },
-            } }),
-        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, mute: {
-                isMuted: muted,
-                changeMute: (event) => {
-                    event.stopPropagation();
-                    changeMute(muted);
-                },
-            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, muteButtonShown: muteButtonShown, shown: hovered && ((!started && !previewImgUrl) || started), positioning: positioning })))) : null));
+        }, 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
+                        ? undefined
+                        : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
+                        file: {
+                            attributes: {
+                                pip: isMobile ? 'false' : undefined,
+                                playsinline: isMobile ? '' : undefined,
+                                disablepictureinpicture: isMobile ? '' : undefined,
+                            },
+                        },
+                    } }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, mute: {
+                        isMuted: muted,
+                        changeMute: (event) => {
+                            event.stopPropagation();
+                            changeMute(muted);
+                        },
+                    }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, muteButtonShown: muteButtonShown, shown: hovered && ((!started && !previewImgUrl) || started), positioning: positioning }))] })) : null }));
 });
 function getHeight(width, ratio = 9 / 16) {
     return width * ratio;
@@ -271,3 +270,4 @@ function getParentElement(element) {
     return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
 }
 export default ReactPlayerBlock;
+//# sourceMappingURL=ReactPlayer.js.map

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "play" | "pause" | "mute" | "unmute", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "play" | "pause" | "mute" | "unmute", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "pc-ReactPlayer": Record<"play" | "pause" | "mute" | "unmute", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

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

package/build/esm/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,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAC,SAAS,EAAC,6BAA0B;AAE5C,OAAO,EAAE,kBAAkB;AAC3B,OAAO,EAAE,kBAAkB;AAE3B,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,GAAG,SAAS,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/esm/components/ReactPlayer/utils/youtube.js

@@ -1,3 +1,4 @@
 export const isYoutubePlayerInstance = (playerInstance) => {
     return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
 };
+//# sourceMappingURL=youtube.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.js","sourceRoot":"../../../../../src","sources":["components/ReactPlayer/utils/youtube.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,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","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/esm/components/ReactPlayer/utils.js

@@ -18,3 +18,4 @@ export const checkYoutubeVideos = (src) => {
     }
     return transformYoutubeUrl(src);
 };
+//# sourceMappingURL=utils.js.map

package/build/esm/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;AAEF,MAAM,CAAC,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","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/esm/components/RootCn/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
-import { ClassNameProps } from '../../models';
-declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+import * as React from 'react';
+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/esm/components/RootCn/index.js

@@ -1,8 +1,9 @@
-import React from 'react';
-import { useTheme } from '../../context/theme';
-import { rootCn } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../context/theme/index.js";
+import { rootCn } from "../../utils/index.js";
 const RootCn = ({ className, children }) => {
     const theme = useTheme();
-    return React.createElement("div", { className: rootCn({ theme }, className) }, children);
+    return _jsx("div", { className: rootCn({ theme }, className), children: children });
 };
 export default RootCn;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RootCn/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAC,MAAM,EAAC,6BAAoB;AAEnC,MAAM,MAAM,GAAG,CAAC,EAAC,SAAS,EAAE,QAAQ,EAA0C,EAAE,EAAE;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,cAAK,SAAS,EAAE,MAAM,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;AACxE,CAAC,CAAC;AAEF,eAAe,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/esm/components/RouterLink/RouterLink.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 export interface RouterLinkProps {
     href: string;
     [key: string]: unknown;
 }
-declare const RouterLink: ({ href, children }: React.PropsWithChildren<RouterLinkProps>) => JSX.Element;
+declare const RouterLink: ({ href, children }: React.PropsWithChildren<RouterLinkProps>) => import("react/jsx-runtime").JSX.Element;
 export default RouterLink;

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

@@ -1,7 +1,9 @@
-import React, { Fragment, useContext } from 'react';
-import { LocationContext } from '../../context/locationContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { LocationContext } from "../../context/locationContext/index.js";
 const RouterLink = ({ href, children }) => {
-    const { Link } = useContext(LocationContext);
-    return Link ? React.createElement(Link, { href: href }, children) : React.createElement(Fragment, null, children);
+    const { Link } = React.useContext(LocationContext);
+    return Link ? _jsx(Link, { href: href, children: children }) : _jsx(React.Fragment, { children: children });
 };
 export default RouterLink;
+//# sourceMappingURL=RouterLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouterLink.js","sourceRoot":"../../../../src","sources":["components/RouterLink/RouterLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAO9D,MAAM,UAAU,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAA2C,EAAE,EAAE;IAC9E,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;AACpG,CAAC,CAAC;AAEF,eAAe,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"]}