Add Play Next Video & Autoplay Next Video feature

code100x · Apr 15, 2024 · 6173fd4 · 6173fd4
1 parent e996f87
commit 6173fd4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/app/courses/[...courseId]/page.tsx b/src/app/courses/[...courseId]/page.tsx
@@ -1,4 +1,4 @@
-import { Folder, Video, getCourse, getFullCourseContent } from '@/db/course';
+import { Folder, Video, getCourse, getFullCourseContent, getNextVideo } from '@/db/course';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/auth';
 import { getPurchases } from '@/utiles/appx';
@@ -130,7 +130,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 (
     <>

diff --git a/src/components/admin/ContentRendererClient.tsx b/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 gap-2 items-start flex-col lg:flex-row">
       <div className="flex-1 w-full">
@@ -116,6 +127,7 @@ export const ContentRendererClient = ({
           }}
           onVideoEnd={() => {
             setContentCompleted(true);
+            playNextVideo();
           }}
         />
         <br />
@@ -169,14 +181,7 @@ export const ContentRendererClient = ({
           <div className="flex flex-row-reverse">
             <button
               className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4"
-              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>{' '}