feat: to navigate through videos by prev and next video button

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, getCourseAllVideos, getFullCourseContent } from '@/db/course';
 import findContentById from '@/lib/find-content-by-id';
 
 export default async function Course({
@@ -20,13 +20,29 @@ export default async function Course({
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
   );
-  const nextContent = null; //await getNextVideo(Number(rest[rest.length - 1]))
+
+  const CurrentCourseAllVideos = await getCourseAllVideos(Number(courseId));
+  const nextContent = CurrentCourseAllVideos.find((video: any) => {
+    return video.id > Number(rest[rest.length - 1]);
+  });
+  const prevContent = (() => {
+    for (let i = CurrentCourseAllVideos.length - 1; i >= 0; i--) {
+      if (CurrentCourseAllVideos[i].id < Number(rest[rest.length - 1])) {
+        return CurrentCourseAllVideos[i];
+      }
+    }
+    return null;
+  })();
+
+  const nextContentUrl = (nextContent ? `/courses/${courseId}/${nextContent.parentId}/${nextContent.id}` : null);
+  const prevContentUrl = (prevContent ? `/courses/${courseId}/${prevContent.parentId}/${prevContent.id}` : null);
 
   return (
     <CourseView
       rest={rest}
       course={course}
-      nextContent={nextContent}
+      nextContent={nextContentUrl}
+      prevContent={prevContentUrl}
       courseContent={courseContent}
       fullCourseContent={fullCourseContent}
       searchParams={searchParams}

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

@@ -17,12 +17,14 @@ export default async function Course({
   const courseContent = findContentById(fullCourseContent, []);
 
   const nextContent = null;
+  const prevContent = null;
 
   return (
     <CourseView
       rest={[]}
       course={course}
       nextContent={nextContent}
+      prevContent={prevContent}
       courseContent={courseContent}
       fullCourseContent={fullCourseContent}
       searchParams={searchParams}

src/components/CourseView.tsx

@@ -14,6 +14,7 @@ export const CourseView = ({
   fullCourseContent,
   courseContent,
   nextContent,
+  prevContent,
   searchParams,
   possiblePath,
 }: {
@@ -31,6 +32,7 @@ export const CourseView = ({
   }
   | null;
   nextContent: any;
+  prevContent: any;
   searchParams: QueryParams;
   possiblePath: string;
 }) => {
@@ -56,6 +58,7 @@ export const CourseView = ({
       {!courseContent?.folder && contentType === 'video' ? (
         <ContentRenderer
           nextContent={nextContent}
+          prevContent={prevContent}
           content={{
             thumbnail: courseContent?.value?.thumbnail || '',
             id: courseContent?.value.id || 0,

src/components/VideoPlayer2.tsx

@@ -15,7 +15,7 @@ import './QualitySelectorControllBar';
 import { YoutubeRenderer } from './YoutubeRenderer';
 import { toast } from 'sonner';
 import { createRoot } from 'react-dom/client';
-import { PictureInPicture2 } from 'lucide-react';
+import { SkipForward, SkipBack, PictureInPicture2 } from 'lucide-react';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -25,6 +25,10 @@ interface VideoPlayerProps {
   subtitles?: string;
   contentId: number;
   onVideoEnd: () => void;
+  onNextVideoClick: () => void;
+  onPrevVideoClick: () => void;
+  isnextContentAvailable: boolean;
+  ispreviousContentAvailable: boolean;
 }
 
 const PLAYBACK_RATES: number[] = [0.5, 1, 1.25, 1.5, 1.75, 2];
@@ -37,6 +41,10 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   onReady,
   subtitles,
   onVideoEnd,
+  onNextVideoClick,
+  onPrevVideoClick,
+  isnextContentAvailable,
+  ispreviousContentAvailable,
 }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player | null>(null);
@@ -64,34 +72,41 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     }
   };
 
-  const PipButton = () => (
-    <button
-      onClick={togglePictureInPicture}
-      className="flex items-center justify-center text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-      type="button"
-      title="Picture-in-Picture"
-    >
-      <span className="absolute inset-0 rounded bg-black bg-opacity-50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></span>
-      <PictureInPicture2 className="relative z-10 h-5 w-5" />
-      <span className="sr-only">Picture-in-Picture</span>
-    </button>
-  );
-
   const createPipButton = (player: Player) => {
-    const pipButtonContainer = (player as any).controlBar.addChild('button', {
-      clickHandler: (event: any) => {
-        event.preventDefault();
-        event.stopPropagation();
-        togglePictureInPicture();
-      },
-    });
+    const pipButtonContainer = (player as any).controlBar.addChild('button');
 
     const root = createRoot(pipButtonContainer.el());
-    root.render(<PipButton />);
+    root.render(
+      <div className='flex justify-center items-center'>
+        <PictureInPicture2 size={16} strokeWidth={3.0}/>
+      </div>
+    );
 
     return pipButtonContainer;
   };
 
+  const createNextVideoButton = (player: Player) => {
+    const NextButtonContainer = (player as any).controlBar.addChild('button');
+    const root = createRoot(NextButtonContainer.el());
+    root.render(
+      <div className='flex items-center justify-center'>
+        <SkipForward size={16} strokeWidth={3.0} />
+      </div>
+    );
+    return NextButtonContainer;
+  };
+
+  const createPrevVideoButton = (player: Player) => {
+    const PrevButtonContainer = (player as any).controlBar.addChild('button');
+    const root = createRoot(PrevButtonContainer.el());
+    root.render(
+      <div className='flex items-center justify-center'>
+        <SkipBack size={16} strokeWidth={3.0}/>
+      </div>
+    );
+    return PrevButtonContainer;
+  };
+
   useEffect(() => {
     const t = searchParams.get('timestamp');
     if (contentId && player && !t) {
@@ -318,6 +333,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
       document.removeEventListener('keydown', handleKeyPress);
     };
   }, [player]);
+
   useEffect(() => {
     if (!player) {
       return;
@@ -396,11 +412,32 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
             back: 15,
           });
 
+          const controlBar = player.getChild('controlBar');
+          if (isnextContentAvailable) {
+            const nextVideoButton = createNextVideoButton(player);
+            const skipBackwardBtn = controlBar.getChild('skipBackward');
+            controlBar.el().insertBefore(nextVideoButton.el(), skipBackwardBtn.el());
+            nextVideoButton.on('click', (e: any) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onNextVideoClick();
+            });
+          }
+          if (ispreviousContentAvailable) {
+            const prevVideoButton = createPrevVideoButton(player);
+            const playButton = controlBar.getChild('playToggle');
+            controlBar.el().insertBefore(prevVideoButton.el(), playButton.el());
+            prevVideoButton.on('click', (e: any) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onPrevVideoClick();
+            });
+          }
+
           player.qualitySelector = setQuality;
           const qualitySelector = player.controlBar.addChild(
             'QualitySelectorControllBar',
           );
-          const controlBar = player.getChild('controlBar');
           const fullscreenToggle = controlBar.getChild('fullscreenToggle');
 
           controlBar
@@ -409,6 +446,17 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
 
           const pipButton = createPipButton(player);
           controlBar.el().insertBefore(pipButton.el(), fullscreenToggle.el());
+          // pipButton.on('click', (e: any) => {
+          //   e.preventDefault();
+          //   e.stopPropagation();
+          //   togglePictureInPicture();
+          // });
+
+          pipButton.on('click', (e:any) => {
+            e.preventDefault();
+            e.stopPropagation();
+            togglePictureInPicture();
+          });
 
           setPlayer(player);
           if (options.isComposite) {

src/components/VideoPlayerSegment.tsx

@@ -25,6 +25,10 @@ interface VideoProps {
   videoJsOptions: any;
   contentId: number;
   onVideoEnd: () => void;
+  onNextVideoClick: () => void;
+  onPrevVideoClick: () => void;
+  isnextContentAvailable: boolean;
+  ispreviousContentAvailable: boolean;
 }
 
 export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
@@ -34,6 +38,10 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   segments,
   videoJsOptions,
   onVideoEnd,
+  onNextVideoClick,
+  onPrevVideoClick,
+  isnextContentAvailable,
+  ispreviousContentAvailable,
 }) => {
   const playerRef = useRef<Player | null>(null);
 
@@ -103,6 +111,10 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
           options={videoJsOptions}
           onVideoEnd={onVideoEnd}
           onReady={handlePlayerReady}
+          onNextVideoClick={onNextVideoClick}
+          onPrevVideoClick={onPrevVideoClick}
+          isnextContentAvailable={isnextContentAvailable}
+          ispreviousContentAvailable={ispreviousContentAvailable}
         />
       </div>
     </div>

src/components/admin/ContentRenderer.tsx

@@ -126,12 +126,10 @@ export const getMetadata = async (contentId: number) => {
 export const ContentRenderer = async ({
   content,
   nextContent,
+  prevContent,
 }: {
-  nextContent: {
-    id: number;
-    type: string;
-    title: string;
-  } | null;
+  nextContent: string | null;
+  prevContent: string | null;
   content: {
     type: 'video';
     id: number;
@@ -148,6 +146,7 @@ export const ContentRenderer = async ({
     <div>
       <ContentRendererClient
         nextContent={nextContent}
+        prevContent={prevContent}
         metadata={metadata}
         content={content}
       />

src/components/admin/ContentRendererClient.tsx

@@ -11,12 +11,10 @@ export const ContentRendererClient = ({
   metadata,
   content,
   nextContent,
+  prevContent,
 }: {
-  nextContent: {
-    id: number;
-    type: string;
-    title: string;
-  } | null;
+  nextContent: string | null;
+  prevContent: string | null;
   metadata: any;
   content: {
     type: 'video';
@@ -71,6 +69,29 @@ export const ContentRendererClient = ({
     setShowChapters((prev) => !prev);
   };
 
+  const handleOnNextVideoClick = () => {
+    if (!nextContent) {
+      router.push('/');
+      return;
+    }
+    router.push(nextContent);
+  };
+
+  const handleOnPrevVideoClick = () => {
+    if (!prevContent) {
+      router.push('/');
+      return;
+    }
+    router.push(prevContent);
+  };
+
+  const handleOnVideoEnd = () => {
+    if (!nextContent) {
+      return null;
+    }
+    router.push(nextContent);
+  };
+
   return (
     <div className="flex w-full flex-col gap-2">
       <div className="flex w-full flex-col">
@@ -98,7 +119,11 @@ export const ContentRendererClient = ({
             responsive: true,
             sources: [source],
           }}
-          onVideoEnd={() => {}}
+          onVideoEnd={handleOnVideoEnd}
+          onNextVideoClick={handleOnNextVideoClick}
+          onPrevVideoClick={handleOnPrevVideoClick}
+          isnextContentAvailable={nextContent?true:false}
+          ispreviousContentAvailable={prevContent?true:false}
         />
         <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">
@@ -139,21 +164,6 @@ 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>
-        ) : null}
       </div>
     </div>
   );