import { useState, useEffect } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { ChevronLeft, CheckCircle2, Circle, Play, FileText, ChevronRight, Menu, X, Lock, ArrowLeft, CheckCircle, ChevronDown, Layers } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Progress } from '@/Components/ui/progress'; import { Sheet, SheetContent } from '@/Components/ui/sheet'; import QuizPlayer from '@/Components/Learning/QuizPlayer'; import StudyDeck from '@/Components/Learning/StudyDeck'; interface Question { id: number; type: 'multiple_choice' | 'flashcard'; question_text: string; options: string[] | null; correct_answer: string; explanation: string | null; } interface Lesson { id: number; title: string; slug: string; content: string | null; video_url: string | null; duration: number | null; quiz_pass_mark?: number; questions?: Question[]; materials?: { id: number; title: string; file_path: string; file_type: string; file_size: string; }[]; } interface Module { id: number; title: string; lessons: Lesson[]; quiz_pass_mark?: number; questions?: Question[]; } interface Course { id: number; name: string; slug: string; modules: Module[]; } interface ProgressItem { course_lesson_id: number; } interface Attempt { id: number; score: number; total_questions: number; passed: boolean; answers: Record; course_module_id: number; } interface Props { course: Course; currentLesson?: Lesson; currentModuleQuiz?: Module; currentStudyDeck?: Module; progress: ProgressItem[]; quizAttempts: Attempt[]; } export default function Player({ course, currentLesson, currentModuleQuiz, currentStudyDeck, progress, quizAttempts }: Props) { const [sidebarOpen, setSidebarOpen] = useState(false); const [openModules, setOpenModules] = useState([]); const [isDesktop, setIsDesktop] = useState(true); useEffect(() => { const handleResize = () => { setIsDesktop(window.innerWidth >= 1024); }; // Set initial value handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { // Only set default sidebar state once on mount if (window.innerWidth >= 1024) { setSidebarOpen(true); } else { setSidebarOpen(false); } // Open current module by default once on mount const activeLesson = (!currentModuleQuiz && !currentStudyDeck) ? (currentLesson || course.modules[0]?.lessons[0]) : undefined; const currentModule = currentModuleQuiz || currentStudyDeck || course.modules.find(m => m.lessons.some(l => l.id === activeLesson?.id)); if (currentModule) { setOpenModules([currentModule.id]); } }, [course.id]); // Only run when switching courses, not lessons const toggleModule = (moduleId: number) => { setOpenModules(prev => prev.includes(moduleId) ? prev.filter(id => id !== moduleId) : [...prev, moduleId] ); }; const activeLesson = (currentModuleQuiz || currentStudyDeck) ? undefined : (currentLesson || course.modules[0]?.lessons[0]); const moduleAttempts = currentModuleQuiz ? (quizAttempts?.filter(a => a.course_module_id === currentModuleQuiz.id) || []) : []; const lastAttempt = moduleAttempts.length > 0 ? moduleAttempts[moduleAttempts.length - 1] : null; const isCompleted = (lessonId: number) => { return progress.some(p => p.course_lesson_id === lessonId); }; const totalLessons = course.modules.reduce((acc, m) => { const hasMCQs = m.questions && m.questions.some(q => q.type === 'multiple_choice'); return acc + m.lessons.length + (hasMCQs ? 1 : 0); }, 0); const completedLessons = progress.length + course.modules.reduce((acc, m) => { const hasMCQs = m.questions && m.questions.some(q => q.type === 'multiple_choice'); if (!hasMCQs) return acc; const passed = moduleAttempts.some(a => a.course_module_id === m.id && a.passed); return acc + (passed ? 1 : 0); }, 0); const progressPercentage = Math.round((completedLessons / totalLessons) * 100); // Helper to find next lesson or quiz type CurriculumStep = | { type: 'lesson'; lesson: Lesson; module_id: number; slug: string; title: string; id: number } | { type: 'study_deck'; module: Module; module_id: number; slug: string; title: string; id: number } | { type: 'quiz'; module: Module; module_id: number; slug: string; title: string; id: number }; const curriculumSteps: CurriculumStep[] = course.modules.flatMap(m => { const steps: CurriculumStep[] = []; m.lessons.forEach(l => steps.push({ type: 'lesson', lesson: l, module_id: m.id, slug: l.slug, title: l.title, id: l.id })); const hasFlashcards = m.questions && m.questions.some(q => q.type === 'flashcard'); const hasMCQs = m.questions && m.questions.some(q => q.type === 'multiple_choice'); if (hasFlashcards) { steps.push({ type: 'study_deck', module: m, module_id: m.id, slug: `study-deck-${m.id}`, title: 'Study Deck', id: m.id }); } if (hasMCQs) { steps.push({ type: 'quiz', module: m, module_id: m.id, slug: `quiz-${m.id}`, title: 'Module Quiz', id: m.id }); } return steps; }); const currentStepIndex = curriculumSteps.findIndex(s => (activeLesson && s.type === 'lesson' && s.id === activeLesson.id) || (currentModuleQuiz && s.type === 'quiz' && s.id === currentModuleQuiz.id) || (currentStudyDeck && s.type === 'study_deck' && s.id === currentStudyDeck.id) ); const prevStep = currentStepIndex > 0 ? curriculumSteps[currentStepIndex - 1] : null; const nextStep = currentStepIndex !== -1 && currentStepIndex < curriculumSteps.length - 1 ? curriculumSteps[currentStepIndex + 1] : null; const getStepUrl = (step: CurriculumStep) => { if (step.type === 'lesson') { return route('learning.lesson', [course.slug, step.slug]); } if (step.type === 'study_deck') { return route('learning.module.study-deck', [course.slug, step.module_id]); } return route('learning.module.quiz', [course.slug, step.module_id]); }; // Scroll to top when active lesson or module changes useEffect(() => { const mainEl = document.querySelector('main'); if (mainEl) { mainEl.scrollTo({ top: 0, behavior: 'smooth' }); } }, [activeLesson?.id, currentModuleQuiz?.id]); // Embed Video Helper const getEmbedUrl = (url: string) => { if (!url) return ''; // YouTube Regex to match: watch?v=ID, embed/ID, shorts/ID, youtu.be/ID const ytRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|shorts\/)([^#\&\?]*).*/; const ytMatch = url.match(ytRegex); if (ytMatch && ytMatch[2].length === 11) { const id = ytMatch[2]; return `https://www.youtube.com/embed/${id}?modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&controls=1&autohide=1&disablekb=1&autoplay=1`; } if (url.includes('vimeo.com')) { const vimeoRegex = /(?:vimeo\.com\/|video\/)(\d+)/; const vimeoMatch = url.match(vimeoRegex); if (vimeoMatch) { return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`; } } return url; }; return (
{/* Top Header */}

{course.name}

{progressPercentage}% Complete
{/* Main Content Area */}
{currentStudyDeck ? (

{currentStudyDeck.title} - Study Deck

Review key concepts before taking the quiz.

{ if (nextStep) { router.visit(getStepUrl(nextStep)); } else { router.visit(route('learning.index')); } }} />
) : currentModuleQuiz ? (

{currentModuleQuiz.title} - Module Quiz

Test your knowledge on the module contents.

{ if (nextStep) { router.visit(getStepUrl(nextStep)); } else { router.visit(route('learning.index')); } }} />
) : activeLesson ? (
{/* Video Player */} {activeLesson.video_url && (