@gravity-ui/page-constructor 7.15.0 → 7.15.1

package/build/cjs/components/DefaultVideo/DefaultVideo.js

@@ -11,7 +11,7 @@ const CustomBarControls_1 = tslib_1.__importDefault(require("../ReactPlayer/Cust
 const b = (0, utils_1.block)('default-video');
 exports.DefaultVideo = React.forwardRef((props, ref) => {
     const { video, qa, customBarControlsClassName } = props;
-    const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd } = video;
+    const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd, loop, } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = React.useState(false);
     const [isMuted, setIsMuted] = React.useState(initiallyMuted);
@@ -28,19 +28,6 @@ exports.DefaultVideo = React.forwardRef((props, ref) => {
         }
         return videoRef.current;
     }, [videoRef]);
-    React.useEffect(() => {
-        const videoElement = videoRef.current;
-        if (!videoElement || !onVideoEnd) {
-            return undefined;
-        }
-        const handleVideoEnd = () => {
-            onVideoEnd?.();
-        };
-        videoElement.addEventListener('ended', handleVideoEnd);
-        return () => {
-            videoElement.removeEventListener('ended', handleVideoEnd);
-        };
-    }, [videoRef, onVideoEnd]);
     // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389
     React.useEffect(() => {
         const videoElement = videoRef.current;
@@ -67,10 +54,24 @@ exports.DefaultVideo = React.forwardRef((props, ref) => {
             onPlayToggle();
         }
     }, [onPlayToggle, customControlsType]);
+    const onEnded = React.useCallback(() => {
+        const videoElement = videoRef.current;
+        if (!videoElement) {
+            return;
+        }
+        if (loop) {
+            const { start = 0, end = videoElement.duration } = typeof loop === 'boolean' ? {} : loop;
+            if (videoElement.currentTime >= end) {
+                videoElement.currentTime = start;
+                videoElement.play();
+            }
+        }
+        onVideoEnd?.();
+    }, [loop, onVideoEnd]);
     return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, children: [(0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => ((0, jsx_runtime_1.jsx)("source", { src: src, type: type, "data-qa": qa }, index))), (0, jsx_runtime_1.jsx)("track", { default: true, kind: "captions" })] }), controls === models_1.MediaVideoControlsType.Custom && ((0, jsx_runtime_1.jsx)(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, onEnded: onEnded, children: [(0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => ((0, jsx_runtime_1.jsx)("source", { src: src, type: type, "data-qa": qa }, index))), (0, jsx_runtime_1.jsx)("track", { default: true, kind: "captions" })] }), controls === models_1.MediaVideoControlsType.Custom && ((0, jsx_runtime_1.jsx)(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                     isMuted: Boolean(isMuted),
                     changeMute: onMuteToggle,
                 } }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,kDAAyF;AACzF,gDAAkC;AAClC,mDAA+D;AAC/D,oGAAiE;AAIjE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,eAAe,CAAC,CAAC;AAWpB,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EAAC,KAAK,EAAE,EAAE,EAAE,0BAA0B,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAC1F,MAAM,EACF,eAAe,EACf,WAAW,EACX,IAAI,EAAE,kBAAkB,GAC3B,GAAG,qBAAqB,IAAI,EAAE,CAAC;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,mEAAmE;IACnE,sEAAsE;IACtE,kCAAkC;IAClC,oEAAoE;IACpE,+DAA+D;IAC/D,gDAAgD;IAChD,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAChC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC;YACrB,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,QAAQ,CAAC,OAAO,CAAC;IAC5B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC;YAC/B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,cAAc,GAAG,GAAG,EAAE;YACxB,UAAU,EAAE,EAAE,CAAC;QACnB,CAAC,CAAC;QAEF,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACR,YAAY,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC9D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,iGAAiG;IACjG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QAEtC,IAAI,YAAY,IAAI,cAAc,EAAE,CAAC;YACjC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,IAAI,KAAK,EAAE,CAAC;gBACR,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAC9B,CAAC;iBAAM,CAAC;gBACJ,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO,CAAC,KAAK,CAAC;QAClB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,kBAAkB,KAAK,2BAAkB,CAAC,mBAAmB,EAAE,CAAC;YAChE,YAAY,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEvC,OAAO,CACH,wBAAC,KAAK,CAAC,QAAQ,eACX,mCACI,uBAAuB,QACvB,WAAW;gBACX,aAAa;gBACb,qDAAqD;gBACrD,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,CAAC,EAAE,EACd,GAAG,EAAE,QAAQ,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,OAAO,gBACF,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,OAAO,aAEf,IAAA,iCAAyB,EAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9D,mCAAoB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,aAAW,EAAE,IAAxC,KAAK,CAAuC,CAC5D,CAAC,EACF,kCAAO,OAAO,QAAC,IAAI,EAAC,UAAU,GAAG,IAC7B,EAEP,QAAQ,KAAK,+BAAsB,CAAC,MAAM,IAAI,CAC3C,uBAAC,2BAAiB,IACd,SAAS,EAAE,0BAA0B,EACrC,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,YAAY,EACzB,eAAe,EAAE,eAAe,EAChC,KAAK,QACL,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;oBACF,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,UAAU,EAAE,YAAY;iBAC3B,GACH,CACL,IACY,CACpB,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement || !onVideoEnd) {\n                return undefined;\n            }\n\n            const handleVideoEnd = () => {\n                onVideoEnd?.();\n            };\n\n            videoElement.addEventListener('ended', handleVideoEnd);\n            return () => {\n                videoElement.removeEventListener('ended', handleVideoEnd);\n            };\n        }, [videoRef, onVideoEnd]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}
+{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {\n            controls,\n            customControlsOptions,\n            muted: initiallyMuted = true,\n            onVideoEnd,\n            loop,\n        } = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        const onEnded = React.useCallback(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement) {\n                return;\n            }\n\n            if (loop) {\n                const {start = 0, end = videoElement.duration} =\n                    typeof loop === 'boolean' ? {} : loop;\n\n                if (videoElement.currentTime >= end) {\n                    videoElement.currentTime = start;\n                    videoElement.play();\n                }\n            }\n\n            onVideoEnd?.();\n        }, [loop, onVideoEnd]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                    onEnded={onEnded}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}

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

@@ -15,18 +15,6 @@ const Video = (props) => {
     React.useImperativeHandle(video.ref, () => ref.current, []);
     React.useEffect(() => {
         if (ref && ref.current) {
-            const { loop } = video;
-            if (loop && typeof loop !== 'boolean') {
-                const { start = 0, end } = loop;
-                ref.current.addEventListener('timeupdate', () => {
-                    const videoRef = ref.current;
-                    const endTime = end || (videoRef && videoRef.duration);
-                    if (videoRef && videoRef.currentTime === endTime) {
-                        videoRef.currentTime = start;
-                        videoRef.play().catch(() => setHasVideoFallback(true));
-                    }
-                }, { passive: true });
-            }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
             }
@@ -34,7 +22,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = React.useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
-        return ((0, jsx_runtime_1.jsx)(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
+        return ((0, jsx_runtime_1.jsx)(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: loop, controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,

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

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useImperativeHandle(video.ref, () => ref.current, []);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            const {loop} = video;\n\n            if (loop && typeof loop !== 'boolean') {\n                const {start = 0, end} = loop;\n\n                ref.current.addEventListener(\n                    'timeupdate',\n                    () => {\n                        const videoRef = ref.current;\n                        const endTime = end || (videoRef && videoRef.duration);\n\n                        if (videoRef && videoRef.currentTime === endTime) {\n                            videoRef.currentTime = start;\n                            videoRef.play().catch(() => setHasVideoFallback(true));\n                        }\n                    },\n                    {passive: true},\n                );\n            }\n\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={Boolean(loop)}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}
+{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useImperativeHandle(video.ref, () => ref.current, []);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={loop}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from "../../models/index.js";
-export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src' | 'ref'>, ClassNameProps {
+export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'src' | 'ref'>, ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;
-    loop?: boolean;
     customBarControlsClassName?: string;
     showPreview?: boolean;
     onClickPreview?: () => void;

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

@@ -37,6 +37,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [isPlaying, setIsPlaying] = React.useState(autoPlay);
     const [playedPercent, setPlayedPercent] = React.useState(0);
     const [currentHeight, setCurrentHeight] = React.useState(height);
+    const [duration, setDuration] = React.useState(null);
     const [width, setWidth] = React.useState(0);
     const [actualRatio, setActualRatio] = React.useState();
     const [muted, setMuted] = React.useState(mute);
@@ -196,23 +197,28 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = React.useCallback((progress) => {
-        setPlayedPercent(progress.played);
-        if (progress.played === 1) {
+    const onProgress = React.useCallback(({ played, playedSeconds }) => {
+        setPlayedPercent(played);
+        if (loop) {
+            const { start = 0, end = duration } = typeof loop === 'boolean' ? {} : loop;
+            // 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.
+            if (end !== null && playedSeconds >= end) {
+                setIsPlaying(true);
+                playerRef?.seekTo(start);
+            }
+        }
+        if (played === 1) {
             setMuted(true);
         }
+    }, [duration, loop, playerRef]);
+    const onDuration = React.useCallback((currentDuration) => {
+        setDuration(currentDuration);
     }, []);
     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.
-        if (loop) {
-            setPlayedPercent(0);
-            setIsPlaying(true);
-            playerRef?.seekTo(0);
-        }
         setEnded(true);
-    }, [loop, playerRef]);
+    }, []);
     const onPlayClick = React.useCallback(() => {
         if (isPlaying) {
             onPause();
@@ -247,7 +253,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             'auto-ratio': autoRatio,
         }, 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)(ReactPlayer, { 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: {
+                        : onPause, onProgress: onProgress, onEnded: onEnded, onDuration: onDuration, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                         file: {
                             attributes: {
                                 pip: isMobile ? 'false' : undefined,

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

@@ -1 +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\nconst ReactPlayer =\n    'default' in _ReactPlayer && _ReactPlayer.default\n        ? (_ReactPlayer.default as typeof _ReactPlayer)\n        : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'loop' | 'src' | 'ref'>,\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"]}
+{"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';\nimport type {ReactPlayerProps} 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\nconst ReactPlayer =\n    'default' in _ReactPlayer && _ReactPlayer.default\n        ? (_ReactPlayer.default as typeof _ReactPlayer)\n        : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'src' | 'ref'>,\n        ClassNameProps {\n    src: string | string[];\n    previewImgUrl?: string;\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    playedSeconds: 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 [duration, setDuration] = React.useState<null | number>(null);\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: ReactPlayerProps['onProgress'] = React.useCallback(\n            ({played, playedSeconds}: PlayerPropgress) => {\n                setPlayedPercent(played);\n\n                if (loop) {\n                    const {start = 0, end = duration} = typeof loop === 'boolean' ? {} : loop;\n\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 (end !== null && playedSeconds >= end) {\n                        setIsPlaying(true);\n                        playerRef?.seekTo(start);\n                    }\n                }\n\n                if (played === 1) {\n                    setMuted(true);\n                }\n            },\n            [duration, loop, playerRef],\n        );\n\n        const onDuration = React.useCallback((currentDuration: number) => {\n            setDuration(currentDuration);\n        }, []);\n\n        const onEnded = React.useCallback(() => {\n            setEnded(true);\n        }, []);\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                            onDuration={onDuration}\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/DefaultVideo/DefaultVideo.js

@@ -8,7 +8,7 @@ import './DefaultVideo.css';
 const b = block('default-video');
 export const DefaultVideo = React.forwardRef((props, ref) => {
     const { video, qa, customBarControlsClassName } = props;
-    const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd } = video;
+    const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd, loop, } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = React.useState(false);
     const [isMuted, setIsMuted] = React.useState(initiallyMuted);
@@ -25,19 +25,6 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
         }
         return videoRef.current;
     }, [videoRef]);
-    React.useEffect(() => {
-        const videoElement = videoRef.current;
-        if (!videoElement || !onVideoEnd) {
-            return undefined;
-        }
-        const handleVideoEnd = () => {
-            onVideoEnd?.();
-        };
-        videoElement.addEventListener('ended', handleVideoEnd);
-        return () => {
-            videoElement.removeEventListener('ended', handleVideoEnd);
-        };
-    }, [videoRef, onVideoEnd]);
     // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389
     React.useEffect(() => {
         const videoElement = videoRef.current;
@@ -64,10 +51,24 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
             onPlayToggle();
         }
     }, [onPlayToggle, customControlsType]);
+    const onEnded = React.useCallback(() => {
+        const videoElement = videoRef.current;
+        if (!videoElement) {
+            return;
+        }
+        if (loop) {
+            const { start = 0, end = videoElement.duration } = typeof loop === 'boolean' ? {} : loop;
+            if (videoElement.currentTime >= end) {
+                videoElement.currentTime = start;
+                videoElement.play();
+            }
+        }
+        onVideoEnd?.();
+    }, [loop, onVideoEnd]);
     return (_jsxs(React.Fragment, { children: [_jsxs("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, onEnded: onEnded, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                     isMuted: Boolean(isMuted),
                     changeMute: onMuteToggle,
                 } }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement || !onVideoEnd) {\n                return undefined;\n            }\n\n            const handleVideoEnd = () => {\n                onVideoEnd?.();\n            };\n\n            videoElement.addEventListener('ended', handleVideoEnd);\n            return () => {\n                videoElement.removeEventListener('ended', handleVideoEnd);\n            };\n        }, [videoRef, onVideoEnd]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}
+{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {\n            controls,\n            customControlsOptions,\n            muted: initiallyMuted = true,\n            onVideoEnd,\n            loop,\n        } = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        const onEnded = React.useCallback(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement) {\n                return;\n            }\n\n            if (loop) {\n                const {start = 0, end = videoElement.duration} =\n                    typeof loop === 'boolean' ? {} : loop;\n\n                if (videoElement.currentTime >= end) {\n                    videoElement.currentTime = start;\n                    videoElement.play();\n                }\n            }\n\n            onVideoEnd?.();\n        }, [loop, onVideoEnd]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                    onEnded={onEnded}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}

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

@@ -13,18 +13,6 @@ const Video = (props) => {
     React.useImperativeHandle(video.ref, () => ref.current, []);
     React.useEffect(() => {
         if (ref && ref.current) {
-            const { loop } = video;
-            if (loop && typeof loop !== 'boolean') {
-                const { start = 0, end } = loop;
-                ref.current.addEventListener('timeupdate', () => {
-                    const videoRef = ref.current;
-                    const endTime = end || (videoRef && videoRef.duration);
-                    if (videoRef && videoRef.currentTime === endTime) {
-                        videoRef.currentTime = start;
-                        videoRef.play().catch(() => setHasVideoFallback(true));
-                    }
-                }, { passive: true });
-            }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
             }
@@ -32,7 +20,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = React.useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
-        return (_jsx(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
+        return (_jsx(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: loop, controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,

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

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useImperativeHandle(video.ref, () => ref.current, []);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            const {loop} = video;\n\n            if (loop && typeof loop !== 'boolean') {\n                const {start = 0, end} = loop;\n\n                ref.current.addEventListener(\n                    'timeupdate',\n                    () => {\n                        const videoRef = ref.current;\n                        const endTime = end || (videoRef && videoRef.duration);\n\n                        if (videoRef && videoRef.currentTime === endTime) {\n                            videoRef.currentTime = start;\n                            videoRef.play().catch(() => setHasVideoFallback(true));\n                        }\n                    },\n                    {passive: true},\n                );\n            }\n\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={Boolean(loop)}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}
+{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useImperativeHandle(video.ref, () => ref.current, []);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={loop}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from "../../models/index.js";
 import './ReactPlayer.css';
-export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src' | 'ref'>, ClassNameProps {
+export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'src' | 'ref'>, ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;
-    loop?: boolean;
     customBarControlsClassName?: string;
     showPreview?: boolean;
     onClickPreview?: () => void;

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

@@ -34,6 +34,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [isPlaying, setIsPlaying] = React.useState(autoPlay);
     const [playedPercent, setPlayedPercent] = React.useState(0);
     const [currentHeight, setCurrentHeight] = React.useState(height);
+    const [duration, setDuration] = React.useState(null);
     const [width, setWidth] = React.useState(0);
     const [actualRatio, setActualRatio] = React.useState();
     const [muted, setMuted] = React.useState(mute);
@@ -193,23 +194,28 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = React.useCallback((progress) => {
-        setPlayedPercent(progress.played);
-        if (progress.played === 1) {
+    const onProgress = React.useCallback(({ played, playedSeconds }) => {
+        setPlayedPercent(played);
+        if (loop) {
+            const { start = 0, end = duration } = typeof loop === 'boolean' ? {} : loop;
+            // 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.
+            if (end !== null && playedSeconds >= end) {
+                setIsPlaying(true);
+                playerRef?.seekTo(start);
+            }
+        }
+        if (played === 1) {
             setMuted(true);
         }
+    }, [duration, loop, playerRef]);
+    const onDuration = React.useCallback((currentDuration) => {
+        setDuration(currentDuration);
     }, []);
     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.
-        if (loop) {
-            setPlayedPercent(0);
-            setIsPlaying(true);
-            playerRef?.seekTo(0);
-        }
         setEnded(true);
-    }, [loop, playerRef]);
+    }, []);
     const onPlayClick = React.useCallback(() => {
         if (isPlaying) {
             onPause();
@@ -244,7 +250,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             '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
                         ? undefined
-                        : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
+                        : onPause, onProgress: onProgress, onEnded: onEnded, onDuration: onDuration, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                         file: {
                             attributes: {
                                 pip: isMobile ? 'false' : undefined,

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

@@ -1 +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\nconst ReactPlayer =\n    'default' in _ReactPlayer && _ReactPlayer.default\n        ? (_ReactPlayer.default as typeof _ReactPlayer)\n        : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'loop' | 'src' | 'ref'>,\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"]}
+{"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';\nimport type {ReactPlayerProps} 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\nconst ReactPlayer =\n    'default' in _ReactPlayer && _ReactPlayer.default\n        ? (_ReactPlayer.default as typeof _ReactPlayer)\n        : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'src' | 'ref'>,\n        ClassNameProps {\n    src: string | string[];\n    previewImgUrl?: string;\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    playedSeconds: 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 [duration, setDuration] = React.useState<null | number>(null);\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: ReactPlayerProps['onProgress'] = React.useCallback(\n            ({played, playedSeconds}: PlayerPropgress) => {\n                setPlayedPercent(played);\n\n                if (loop) {\n                    const {start = 0, end = duration} = typeof loop === 'boolean' ? {} : loop;\n\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 (end !== null && playedSeconds >= end) {\n                        setIsPlaying(true);\n                        playerRef?.seekTo(start);\n                    }\n                }\n\n                if (played === 1) {\n                    setMuted(true);\n                }\n            },\n            [duration, loop, playerRef],\n        );\n\n        const onDuration = React.useCallback((currentDuration: number) => {\n            setDuration(currentDuration);\n        }, []);\n\n        const onEnded = React.useCallback(() => {\n            setEnded(true);\n        }, []);\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                            onDuration={onDuration}\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "7.15.0",
+  "version": "7.15.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "type": "commonjs",

package/widget/index.js

@@ -1 +1 @@
-export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[1349],{31349:function(_,t,Y){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var Y=t(_),e={name:\"zh-tw\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"週日_週一_週二_週三_週四_週五_週六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"週\":_+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日dddd HH:mm\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s內\",past:\"%s前\",s:\"幾秒\",m:\"1 分鐘\",mm:\"%d 分鐘\",h:\"1 小時\",hh:\"%d 小時\",d:\"1 天\",dd:\"%d 天\",M:\"1 個月\",MM:\"%d 個月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var Y=100*_+t;return Y<600?\"凌晨\":Y<900?\"早上\":Y<1100?\"上午\":Y<1300?\"中午\":Y<1800?\"下午\":\"晚上\"}};return Y.default.locale(e,null,!0),e}(Y(74353))}}]);";
+export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[6007],{56007:function(_,t,e){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var e=t(_),Y={name:\"zh\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"周日_周一_周二_周三_周四_周五_周六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"周\":_+\"日\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日Ah点mm分\",LLLL:\"YYYY年M月D日ddddAh点mm分\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s后\",past:\"%s前\",s:\"几秒\",m:\"1 分钟\",mm:\"%d 分钟\",h:\"1 小时\",hh:\"%d 小时\",d:\"1 天\",dd:\"%d 天\",M:\"1 个月\",MM:\"%d 个月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var e=100*_+t;return e<600?\"凌晨\":e<900?\"早上\":e<1100?\"上午\":e<1300?\"中午\":e<1800?\"下午\":\"晚上\"}};return e.default.locale(Y,null,!0),Y}(e(74353))}}]);";