add functionality to play next video automatically

src/app/courses/[courseId]/[...moduleId]/page.tsx

@@ -1,6 +1,6 @@
 import { QueryParams } from '@/actions/types';
 import { CourseView } from '@/components/CourseView';
-import { getCourse, getFullCourseContent } from '@/db/course';
+import { getCourse, getFullCourseContent, getNextVideo } from '@/db/course';
 import findContentById from '@/lib/find-content-by-id';
 
 export default async function Course({
@@ -20,7 +20,7 @@ export default async function Course({
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
   );
-  const nextContent = null; //await getNextVideo(Number(rest[rest.length - 1]))
+  const nextContent = await getNextVideo(Number(rest[rest.length - 1]));
 
   return (
     <CourseView

src/components/CourseView.tsx

@@ -21,15 +21,15 @@ export const CourseView = ({
   rest: string[];
   course: any;
   courseContent:
-  | {
-    folder: true;
-    value: ChildCourseContent[];
-  }
-  | {
-    folder: false;
-    value: ChildCourseContent;
-  }
-  | null;
+    | {
+        folder: true;
+        value: ChildCourseContent[];
+      }
+    | {
+        folder: false;
+        value: ChildCourseContent;
+      }
+    | null;
   nextContent: any;
   searchParams: QueryParams;
   possiblePath: string;

src/components/Sidebar.tsx

@@ -206,7 +206,9 @@ export function Sidebar({
             variants={sidebarVariants}
             className="fixed right-0 top-0 z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[30vw]"
           >
-            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 bg-neutral-50 p-5 dark:bg-neutral-900">              <h4 className="text-xl font-bold tracking-tighter text-primary lg:text-2xl">
+            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 bg-neutral-50 p-5 dark:bg-neutral-900">
+              {' '}
+              <h4 className="text-xl font-bold tracking-tighter text-primary lg:text-2xl">
                 Course Content
               </h4>
               <Button

src/components/admin/ContentRendererClient.tsx

@@ -71,6 +71,17 @@ export const ContentRendererClient = ({
     setShowChapters((prev) => !prev);
   };
 
+  const triggerNextContent = () => {
+    const originalPath = window.location.pathname;
+    const parts = originalPath.split('/');
+    parts.pop();
+    if (nextContent) {
+      parts.push(nextContent.id.toString());
+    }
+    const newPath = parts.join('/');
+    router.push(newPath);
+  };
+
   return (
     <div className="flex w-full flex-col gap-2">
       <div className="flex w-full flex-col">
@@ -98,7 +109,7 @@ export const ContentRendererClient = ({
             responsive: true,
             sources: [source],
           }}
-          onVideoEnd={() => {}}
+          onVideoEnd={() => triggerNextContent()}
         />
         <div className="flex flex-col gap-4 rounded-xl bg-primary/5 p-4">
           <div className="flex w-full flex-col justify-between gap-2 md:flex-row">
@@ -140,19 +151,11 @@ export const ContentRendererClient = ({
           )}
         </div>
         {nextContent ? (
-          <Button
-            size={'lg'}
-            onClick={() => {
-              const originalPath = window.location.pathname;
-              const parts = originalPath.split('/');
-              parts.pop();
-              parts.push(nextContent.id.toString());
-              const newPath = parts.join('/');
-              router.push(newPath);
-            }}
-          >
-            {nextContent.title}
-          </Button>
+          <div className="ml-auto mt-2">
+            <Button size={'lg'} onClick={() => triggerNextContent()}>
+              {nextContent.title}
+            </Button>
+          </div>
         ) : null}
       </div>
     </div>

src/components/comment/CommentVoteForm.tsx

@@ -122,4 +122,4 @@ const CommentVoteForm: React.FC<CommentVoteFormProps> = ({
   );
 };
 
-export default CommentVoteForm;
+export default CommentVoteForm;