From dad52d61ed6447d8fbcb881ce78e1e9546c61088 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:24:09 +0300
Subject: [PATCH] use `onTransitionEnded` and remove `setTimeout`

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 11ff4b995..1dcca3b1b 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -78,15 +78,15 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
 
     const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    const jumpToPlayingNow = () => {
         const { current } = currentlyPlayingVideoRef;
         if (current) {
-            setTimeout(() => { current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 300);
+            current.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
-    }, []);
+    };
 
     return (
-        <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
+        <div ref={ref} className={classNames(styles['side-drawer'], className)} onTransitionEnd={jumpToPlayingNow} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>