added scroll restoration on forward/backward navigation

src/components/FolderView.tsx

@@ -4,6 +4,7 @@ import { ContentCard } from './ContentCard';
 import { courseContent, getFilteredContent } from '@/lib/utils';
 import { useRecoilValue } from 'recoil';
 import { selectFilter } from '@/store/atoms/filterContent';
+import { useEffect, useRef } from 'react';
 
 export const FolderView = ({
   courseContent,
@@ -29,15 +30,16 @@ export const FolderView = ({
   }
   // why? because we have to reset the segments or they will be visible always after a video
 
-  const currentfilter = useRecoilValue(selectFilter);
+  const currentfilter:string = useRecoilValue(selectFilter);
 
   const filteredCourseContent = getFilteredContent(
     courseContent,
     currentfilter,
   );
 
   if (filteredCourseContent?.length === 0) {
-    const filterMessages = {
+    const filterMessages: Record<string, string> = {
+
       watched: "You haven't completed any content in this section yet.",
       watching: "No content currently in progress.",
       unwatched: "No new content available to watch.",
@@ -52,7 +54,35 @@ export const FolderView = ({
       </div>
     );
   }
-
+  const lastScrollPosition = useRef(0);
+
+  useEffect(() => {    
+    const savedPosition = sessionStorage.getItem('scrollPosition');
+
+    if (savedPosition) {
+      // Add a small delay to ensure content is rendered
+      setTimeout(() => {
+        window.scrollTo(0, parseInt(savedPosition, 10),);
+      console.log("Restoring scroll position to:", savedPosition);
+      }, 100);
+    }
+    const handleScroll = () => {
+      // const currentPosition = windowRef.current ? windowRef.current.scrollTop : 0;
+      const currentPosition = window.scrollY;
+      lastScrollPosition.current = currentPosition;
+
+      sessionStorage.setItem('scrollPosition', currentPosition.toString());
+
+      if (currentPosition > lastScrollPosition.current) {
+        console.log("Scrolling down");
+      } else {
+        console.log("Scrolling up");
+      }
+    };
+    // if (windowRef.current)
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []); 
   return (
     <div>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -72,7 +102,7 @@ export const FolderView = ({
               title={content.title}
               image={content.image || ''}
               onClick={() => {
-                router.push(`${updatedRoute}/${content.id}`);
+                router.push(`${updatedRoute}/${content.id}`,{scroll: false});
               }}
               markAsCompleted={content.markAsCompleted}
               percentComplete={content.percentComplete}

src/components/VideoPlayer2.tsx

@@ -18,6 +18,7 @@ import { toast } from 'sonner';
 import { createRoot } from 'react-dom/client';
 import { PictureInPicture2 } from 'lucide-react';
 import { AppxVideoPlayer } from './AppxVideoPlayer';
+import HammerInput from 'hammerjs';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -111,7 +112,6 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   };
 
   const setupZoomFeatures = (player: any) => {
-
     if (typeof window === 'undefined' || typeof document === 'undefined') return;
 
     const videoEl = player.el().querySelector('video');

src/components/posts/form/form-vote.tsx

@@ -54,7 +54,6 @@ const VoteForm: React.FC<IVoteFormProps> = ({
     );
   };
 
-
   const userVoted = Boolean(votesArr.length);
   const userVoteVal = votesArr[0];