Scroll to the video index using the index query parameter

src/pages/videos/VideoReels.tsx

@@ -17,6 +17,7 @@ import SunbirdPlayer from "../../components/players/SunbirdPlayer";
 import * as content from "../../services/content";
 import IconByName from "../../components/common/icons/Icon";
 import { handleEvent } from "./utils";
+import Loading from "../../components/common/Loading";
 const VITE_PLAYER_URL = import.meta.env.VITE_PLAYER_URL;
 const VITE_APP_ID = import.meta.env.VITE_APP_ID;
 const VITE_APP_VER = import.meta.env.VITE_APP_VER;
@@ -211,10 +212,14 @@ const VideoItem: React.FC<{
   );
 });
 
-const VideoReel: React.FC<{ videos: any[] }> = ({ videos }) => {
-  const listRef = useRef<HTMLDivElement>(null);
+const VideoReel: React.FC<{
+  videos: any[];
+  programID?: string;
+  activeIndex?: string | number | undefined | null;
+}> = ({ videos, programID, activeIndex }) => {
+  const listRef = useRef<any>(null);
   const qmlRef = useRef<HTMLDivElement>(null);
-  const [visibleIndex, setVisibleIndex] = useState(0);
+  const [visibleIndex, setVisibleIndex] = useState<number>(0);
   const { height: itemSize, width } = useDeviceSize();
   const navigate = useNavigate();
   // const trackDataRef = useRef<any[]>([]);
@@ -234,6 +239,17 @@ const VideoReel: React.FC<{ videos: any[] }> = ({ videos }) => {
     [videos, itemSize]
   );
 
+  React.useEffect(() => {
+    if (activeIndex || activeIndex === 0) {
+      setVisibleIndex(
+        typeof activeIndex === "string" ? Number(activeIndex) : activeIndex
+      );
+      if (listRef?.current && listRef?.current?.scrollToItem) {
+        listRef.current.scrollToItem(activeIndex); // Adjust index as needed
+      }
+    }
+  }, [activeIndex, listRef?.current?.scrollToItem]);
+
   React.useEffect(() => {
     const handleEventNew = (event: any) => {
       newHandleEvent(event);
@@ -284,6 +300,19 @@ const VideoReel: React.FC<{ videos: any[] }> = ({ videos }) => {
     }
   };
 
+  if (activeIndex) {
+    if (typeof activeIndex === "string") {
+      activeIndex = Number(activeIndex);
+    }
+    if (isNaN(activeIndex) || activeIndex > videos?.length) {
+      return (
+        <Loading
+          message={`Video not found at index ${activeIndex}.`}
+          showSpinner={false}
+        />
+      );
+    }
+  }
   return (
     <Layout isFooterVisible={false} isHeaderVisible={false}>
       <Box position={"relative"}>

src/pages/videos/index.tsx

@@ -27,6 +27,9 @@ const App = () => {
   const navigate = useNavigate();
   const [videos, setVideos] = useState<Array<any>>([]);
   const [error, setError] = useState<string | null>(null);
+  const [programID, setProgramID] = useState<string>("");
+  const query = new URLSearchParams(window.location.search);
+  const index = query.get("index");
 
   useEffect(() => {
     const init = async () => {
@@ -64,7 +67,7 @@ const App = () => {
   return error ? (
     <Loading showSpinner={false} message={error} onBackClick={onBackClick} />
   ) : (
-    <VideoReel videos={videos} />
+    <VideoReel videos={videos} programID={programID} activeIndex={index} />
   );
 };