From 2250f45b89deaec0adea577184e5b20f7caaaf1b Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Tue, 23 Sep 2025 15:20:16 +0300
Subject: [PATCH 1/3] fix(Media): support boolean loop for default video

---
 src/blocks/Media/__stories__/data.json       |  4 +-
 src/components/DefaultVideo/DefaultVideo.tsx | 40 +++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json
index 89db01b63..6efb5f49b 100644
--- a/src/blocks/Media/__stories__/data.json
+++ b/src/blocks/Media/__stories__/data.json
@@ -93,9 +93,7 @@
               "/story-assets/video_8-12_white.mp4",
               "/story-assets/video_8-12_white.png"
             ],
-            "loop": {
-              "start": 0
-            },
+            "loop": true,
             "ariaLabel": "Video accessible name example"
           }
         },
diff --git a/src/components/DefaultVideo/DefaultVideo.tsx b/src/components/DefaultVideo/DefaultVideo.tsx
index 7145045ee..8fe8e4565 100644
--- a/src/components/DefaultVideo/DefaultVideo.tsx
+++ b/src/components/DefaultVideo/DefaultVideo.tsx
@@ -21,7 +21,13 @@ interface DefaultVideoProps {
 export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(
     (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,
@@ -45,22 +51,6 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
             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;
@@ -81,6 +71,7 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
                 return !value;
             });
         }, [videoRef]);
+
         const onMuteToggle = React.useCallback(() => {
             setIsMuted((value) => !value);
         }, []);
@@ -91,6 +82,20 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
             }
         }, [onPlayToggle, customControlsType]);
 
+        const onEnded = React.useCallback(() => {
+            const videoElement = videoRef.current;
+            if (!videoElement) {
+                return;
+            }
+
+            if (loop) {
+                videoElement.currentTime = 0;
+                videoElement.play();
+            }
+
+            onVideoEnd?.();
+        }, [loop, onVideoEnd]);
+
         return (
             <React.Fragment>
                 <video
@@ -105,6 +110,7 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
                     muted={isMuted}
                     aria-label={video.ariaLabel}
                     onClick={onClick}
+                    onEnded={onEnded}
                 >
                     {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (
                         <source key={index} src={src} type={type} data-qa={qa} />

From a3f9edc8be92b114c6c17a9c58a80df182858ff3 Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Mon, 29 Sep 2025 12:34:23 +0300
Subject: [PATCH 2/3] fix: separate loop logic for different elements

---
 src/blocks/Media/__stories__/data.json       |  4 +-
 src/components/DefaultVideo/DefaultVideo.tsx |  9 +++-
 src/components/Media/Video/Video.tsx         | 22 +--------
 src/components/ReactPlayer/ReactPlayer.tsx   | 47 +++++++++++++-------
 4 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json
index 6efb5f49b..89db01b63 100644
--- a/src/blocks/Media/__stories__/data.json
+++ b/src/blocks/Media/__stories__/data.json
@@ -93,7 +93,9 @@
               "/story-assets/video_8-12_white.mp4",
               "/story-assets/video_8-12_white.png"
             ],
-            "loop": true,
+            "loop": {
+              "start": 0
+            },
             "ariaLabel": "Video accessible name example"
           }
         },
diff --git a/src/components/DefaultVideo/DefaultVideo.tsx b/src/components/DefaultVideo/DefaultVideo.tsx
index 8fe8e4565..b4a86bc94 100644
--- a/src/components/DefaultVideo/DefaultVideo.tsx
+++ b/src/components/DefaultVideo/DefaultVideo.tsx
@@ -89,8 +89,13 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
             }
 
             if (loop) {
-                videoElement.currentTime = 0;
-                videoElement.play();
+                const {start = 0, end = videoElement.duration} =
+                    typeof loop === 'boolean' ? {} : loop;
+
+                if (videoElement.currentTime >= end) {
+                    videoElement.currentTime = start;
+                    videoElement.play();
+                }
             }
 
             onVideoEnd?.();
diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx
index 01ca2082e..2b4c85d92 100644
--- a/src/components/Media/Video/Video.tsx
+++ b/src/components/Media/Video/Video.tsx
@@ -50,26 +50,6 @@ const Video = (props: VideoAllProps) => {
 
     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));
             }
@@ -96,7 +76,7 @@ const Video = (props: VideoAllProps) => {
                 className={b('react-player', videoClassName)}
                 src={src}
                 previewImgUrl={previewImg}
-                loop={Boolean(loop)}
+                loop={loop}
                 controls={controls}
                 muted={muted}
                 autoplay={autoplay && playVideo}
diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
index 97f03c40b..f52a75485 100644
--- a/src/components/ReactPlayer/ReactPlayer.tsx
+++ b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -4,6 +4,7 @@ import {PlayFill} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import _ReactPlayer from 'react-player';
+import type {ReactPlayerProps} from 'react-player';
 
 import {MobileContext} from '../../context/mobileContext';
 import {VideoContext} from '../../context/videoContext';
@@ -41,11 +42,10 @@ const ReactPlayer =
         : _ReactPlayer;
 
 export interface ReactPlayerBlockProps
-    extends Omit<MediaVideoProps, 'loop' | 'src' | 'ref'>,
+    extends Omit<MediaVideoProps, 'src' | 'ref'>,
         ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;
-    loop?: boolean;
     customBarControlsClassName?: string;
     showPreview?: boolean;
     onClickPreview?: () => void;
@@ -57,6 +57,7 @@ export interface ReactPlayerBlockProps
 
 interface PlayerPropgress {
     played: number;
+    playedSeconds: number;
 }
 
 // eslint-disable-next-line react/display-name
@@ -108,6 +109,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const [isPlaying, setIsPlaying] = React.useState(autoPlay);
         const [playedPercent, setPlayedPercent] = React.useState<number>(0);
         const [currentHeight, setCurrentHeight] = React.useState(height);
+        const [duration, setDuration] = React.useState<null | number>(null);
         const [width, setWidth] = React.useState<number>(0);
         const [actualRatio, setActualRatio] = React.useState<number>();
         const [muted, setMuted] = React.useState<boolean>(mute);
@@ -325,26 +327,36 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             }
         }, []);
 
-        const onProgress = React.useCallback((progress: PlayerPropgress) => {
-            setPlayedPercent(progress.played);
+        const onProgress: ReactPlayerProps['onProgress'] = React.useCallback(
+            ({played, playedSeconds}: PlayerPropgress) => {
+                setPlayedPercent(played);
 
-            if (progress.played === 1) {
-                setMuted(true);
-            }
+                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((duration: number) => {
+            setDuration(duration);
         }, []);
 
         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) {
@@ -422,6 +434,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                             } // to prevent pause icon flickering when autoplayed video ends
                             onProgress={onProgress}
                             onEnded={onEnded}
+                            onDuration={onDuration}
                             aria-label={ariaLabel}
                             previewTabIndex={-1}
                             config={{

From c274fe8ca514e3d1967114ca9de5aa70278820a1 Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Wed, 1 Oct 2025 12:02:11 +0300
Subject: [PATCH 3/3] fix: lint

---
 src/components/ReactPlayer/ReactPlayer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
index f52a75485..ea6382885 100644
--- a/src/components/ReactPlayer/ReactPlayer.tsx
+++ b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -350,8 +350,8 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             [duration, loop, playerRef],
         );
 
-        const onDuration = React.useCallback((duration: number) => {
-            setDuration(duration);
+        const onDuration = React.useCallback((currentDuration: number) => {
+            setDuration(currentDuration);
         }, []);
 
         const onEnded = React.useCallback(() => {