From 3ffa381e2d9ef4ba4ef8bb18b86a00daba8eef4f Mon Sep 17 00:00:00 2001
From: Chigozirim Igweamaka <cgzirim@gmail.com>
Date: Sun, 30 Jun 2024 14:25:14 +0100
Subject: [PATCH] Add smooth scrolling to YouTube cards when circle is clicked

---
 client/src/components/CarouselSliders.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/CarouselSliders.js b/client/src/components/CarouselSliders.js
index 3a18c9c..9312473 100644
--- a/client/src/components/CarouselSliders.js
+++ b/client/src/components/CarouselSliders.js
@@ -6,10 +6,14 @@ const CarouselSliders = (props) => {
   const [activeVideoID, setActiveVideoID] = useState(null);
   const players = useRef({});
 
-  const activeVid = props.matches.length ? props.matches[0].YouTubeID : "";
-
   useEffect(() => {
-    setActiveVideoID(activeVid);
+    if (props.matches.length > 0) {
+      const firstVideoID = props.matches[0].YouTubeID;
+      document
+        .getElementById(`slide-${firstVideoID}`)
+        .scrollIntoView({ behavior: "smooth" });
+      setActiveVideoID(firstVideoID);
+    }
   }, [props.matches]);
 
   const onReady = (event, videoId) => {