From 13098b549627eda4c73aadf2f4e1cece1754e76d Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Wed, 5 Mar 2025 22:37:38 +0700
Subject: [PATCH] useLayoutEffect for scrollIntoView

---
 .../src/components/EmbeddableVideoPlayer.tsx    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx
index 3795cbd5..813953dd 100644
--- a/frontend/src/components/EmbeddableVideoPlayer.tsx
+++ b/frontend/src/components/EmbeddableVideoPlayer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { VideoResponseType } from '../pages/Video';
 import VideoPlayer from './VideoPlayer';
 import loadVideoById from '../api/loader/loadVideoById';
@@ -26,6 +26,7 @@ type EmbeddableVideoPlayerProps = {
 
 const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const inlinePlayerRef = useRef<HTMLDivElement>(null);
+  const prevVideoId = useRef<string | null>(null);
   const { appSettingsConfig } = useAppSettingsStore();
 
   const [, setSearchParams] = useSearchParams();
@@ -65,18 +66,20 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
         }
 
         setVideoResponse(videoResponse);
-
-        inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' });
-
         setRefresh(false);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoId, refresh]);
 
-  useEffect(() => {
-    inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' });
-  }, []);
+  useLayoutEffect(() => {
+    if (videoId !== prevVideoId.current) {
+      setTimeout(() => {
+        inlinePlayerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 0);
+    }
+    prevVideoId.current = videoId; // Update the previous video ID
+  }, [videoId]);
 
   if (videoResponse === undefined) {
     return <div ref={inlinePlayerRef} className="player-wrapper" />;