Feature: Remember Last Watched Timestamp in Videos

src/components/FolderView.tsx

@@ -35,7 +35,6 @@ export const FolderView = ({
     courseContent,
     currentfilter,
   );
-
   if (filteredCourseContent?.length === 0) {
     const filterMessages = {
       watched: "You haven't completed any content in this section yet.",

src/components/VideoPlayer2.tsx

@@ -349,7 +349,8 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   }, [player]);
 
   useEffect(() => {
-    const t = searchParams.get('timestamp');
+    const t = searchParams.get('timestamp'); 
+
     if (contentId && player && !t) {
       fetch(`/api/course/videoProgress?contentId=${contentId}`).then(
         async (res) => {
@@ -573,51 +574,45 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   }, [player]);
 
   useEffect(() => {
-    if (!player) {
-      return;
-    }
-    let interval = 0;
-    const handleVideoProgress = () => {
-      if (!player) {
-        return;
-      }
-      interval = window.setInterval(
-        async () => {
-          if (!player) {
-            return;
-          }
-          //@ts-ignore
-          if (player?.paused()) {
-            return;
-          }
-          const currentTime = player.currentTime();
-          if (currentTime <= 20) {
-            return;
-          }
-          await fetch('/api/course/videoProgress', {
-            body: JSON.stringify({
-              currentTimestamp: currentTime,
-              contentId,
-            }),
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          });
+    if (!player) return;
+    let interval: number | null = null;
+
+    const sendProgress = async () => {
+      if (!player || player.paused()) return;
+      const currentTime = player.currentTime();
+      await fetch('/api/course/videoProgress', {
+        body: JSON.stringify({
+          currentTimestamp: currentTime,
+          contentId,
+        }),
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
         },
-        Math.ceil((100 * 1000) / player.playbackRate()),
-      );
+      });
     };
-    const handleVideoEnded = (interval: number) => {
-      handleMarkAsCompleted(true, contentId);
-      window.clearInterval(interval);
-      onVideoEnd();
+
+    const startInterval = () => {
+      if (interval) return;
+      interval = window.setInterval(sendProgress, 10000);  
     };
-
-    player.on('play', handleVideoProgress);
-    player.on('ended', () => handleVideoEnded(interval));
+
+    const stopInterval = () => {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    };
+
+    player.on('play', startInterval);
+    player.on('pause', stopInterval);
+    player.on('ended', stopInterval);
+
     return () => {
-      window.clearInterval(interval);
+      stopInterval();
+      player.off('play', startInterval);
+      player.off('pause', stopInterval);
+      player.off('ended', stopInterval);
     };
   }, [player, contentId]);
 

src/components/admin/ContentRenderer.tsx

@@ -154,7 +154,6 @@ export const ContentRenderer = async ({
 
   // @ts-ignore
   const appxVideoId: string = metadata?.appxVideoJSON?.[appxCourseId] ?? '';
-
   return (
     <div>
       <ContentRendererClient

src/db/course.ts

@@ -197,7 +197,8 @@ async function getAllContent(): Promise<
     },
   });
   cache.set('getAllContent', [], allContent);
-
+  console.log("allContent ", allContent);
+
   return allContent;
 }
 
@@ -242,6 +243,7 @@ export function getVideoProgressForUser(
   userId: string,
   markAsCompleted?: boolean,
 ) {
+
   return db.videoProgress.findMany({
     where: {
       userId,
@@ -286,8 +288,26 @@ export const getFullCourseContent = async (
   const courseContent = await getRootCourseContent(courseId);
   const videoProgress = await getVideoProgressForUser(session?.user?.id);
   const bookmarkData = await getBookmarkData();
+  const getVideoMetaData = await db.VideoMetadata.findMany({
+    select:{
+      contentId:true,
+      segments:true,
+      duration:true, 
+    }
+  }) 
+
   const contentMap = new Map<string, FullCourseContent>(
-    contents.map((content: any) => [
+    contents.map((content: any) => {
+      const metadata = getVideoMetaData.find(
+        (metadata:any) => metadata.contentId === content.id
+      );
+      // Get the segments array
+      const segments = metadata?.segments || [];
+      // Get the last end value
+      const lastEnd = segments.length > 0 ? segments[segments.length - 1].end : null;
+
+
+      return [
       content.id,
       {
         ...content,
@@ -301,11 +321,11 @@ export const getFullCourseContent = async (
               markAsCompleted: videoProgress.find(
                 (x) => x.contentId === content.id,
               )?.markAsCompleted,
-              videoFullDuration: content.VideoMetadata?.duration,
+              videoFullDuration: lastEnd
             }
             : null,
       },
-    ]),
+    ]}),
   );
 
   const rootContents: FullCourseContent[] = [];