adds functionality to play next video automatically

code100x · Oct 5, 2024 · 653bdfb · 653bdfb
1 parent 328721b
commit 653bdfb
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 33 deletions.
diff --git a/src/app/courses/[courseId]/[...moduleId]/page.tsx b/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

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -5,6 +5,7 @@ import { formatTime } from '@/lib/utils';
 import VideoThumbnail from './videothumbnail';
 import CardComponent from './CardComponent';
 import { motion } from 'framer-motion';
+import React from 'react';
 
 export const ContentCard = ({
   title,
@@ -33,7 +34,9 @@ export const ContentCard = ({
       onClick={onClick}
       tabIndex={0}
       role="button"
-      onKeyDown={(e:React.KeyboardEvent) => (['Enter', ' '].includes(e.key) && onClick())}
+      onKeyDown={(e: React.KeyboardEvent) =>
+        ['Enter', ' '].includes(e.key) && onClick()
+      }
       className={`group relative flex h-fit w-full max-w-md cursor-pointer flex-col gap-2 rounded-2xl transition-all duration-300 hover:-translate-y-2`}
     >
       {markAsCompleted && (

diff --git a/src/components/CourseView.tsx b/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;

diff --git a/src/components/Sidebar.tsx b/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

diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
@@ -98,7 +98,16 @@ export const ContentRendererClient = ({
             responsive: true,
             sources: [source],
           }}
-          onVideoEnd={() => {}}
+          onVideoEnd={() => {
+            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);
+          }}
         />
         <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 +149,21 @@ 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={() => {
+                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>
         ) : null}
       </div>
     </div>

diff --git a/src/components/comment/CommentVoteForm.tsx b/src/components/comment/CommentVoteForm.tsx
@@ -122,4 +122,4 @@ const CommentVoteForm: React.FC<CommentVoteFormProps> = ({
   );
 };
 
-export default CommentVoteForm;
+export default CommentVoteForm;
diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
@@ -216,10 +216,10 @@ const PostCard: React.FC<IProps> = ({
       </div>
 
       {enableReply && (
-      <form
-        onSubmit={handleSubmit}
-        className="mt-4"
-        onClick={handleEditorClick}
+        <form
+          onSubmit={handleSubmit}
+          className="mt-4"
+          onClick={handleEditorClick}
         >
           <div data-color-mode={theme} className="flex w-full flex-col gap-4">
             <MDEditor
@@ -255,7 +255,8 @@ const PostCard: React.FC<IProps> = ({
                   sessionUser={sessionUser}
                   reply={false}
                   parentAuthorName={post.author.name}
-                  isAnswer={true}                />
+                  isAnswer={true}
+                />
               </div>
             ))}
           </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -122,4 +122,4 @@ const CommentVoteForm: React.FC<CommentVoteFormProps> = ({ @@
       );
     };
-    export default CommentVoteForm;
+    export default CommentVoteForm;