Feature: Play & Autoplay Next Video

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({
@@ -22,7 +22,7 @@ export default async function Course({
   );
   const contentType =
     courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
-  const nextContent = null; //await getNextVideo(Number(rest[rest.length - 1]))
+  const nextContent = await getNextVideo(Number(rest[rest.length - 1]));
 
   return (
     <CourseView

src/components/admin/ContentRendererClient.tsx

@@ -87,6 +87,17 @@ export const ContentRendererClient = ({
     setLoadingMarkAs(false);
   };
 
+  const playNextVideo = () => {
+    if (nextContent && nextContent.type === 'video') {
+      const originalPath = window.location.pathname;
+      const parts = originalPath.split('/');
+      parts.pop();
+      parts.push(nextContent.id.toString());
+      const newPath = parts.join('/');
+      router.push(newPath);
+    }
+  };
+
   return (
     <div className="flex flex-col items-start gap-2 semi:flex-row">
       <div className="w-full flex-1">
@@ -116,6 +127,7 @@ export const ContentRendererClient = ({
           }}
           onVideoEnd={() => {
             setContentCompleted(true);
+            playNextVideo();
           }}
         />
         <div className="mb-2 flex justify-between">
@@ -167,14 +179,7 @@ export const ContentRendererClient = ({
           <div className="flex flex-row-reverse">
             <button
               className="ml-4 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-              onClick={() => {
-                const originalPath = window.location.pathname;
-                const parts = originalPath.split('/');
-                parts.pop();
-                parts.push(nextContent.id.toString());
-                const newPath = parts.join('/');
-                router.push(newPath);
-              }}
+              onClick={playNextVideo}
             >
               {nextContent.title}
             </button>{' '}

tsconfig.json

@@ -16,14 +16,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"],
-    },
+      "@public/*": ["./public/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }