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 } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Progress } from '@/Components/ui/progress'; import { Sheet, SheetContent } from '@/Components/ui/sheet'; interface Lesson { id: number; title: string; slug: string; content: string | null; video_url: string | null; duration: number | null; } interface Module { id: number; title: string; lessons: Lesson[]; } interface Course { id: number; name: string; slug: string; modules: Module[]; } interface ProgressItem { course_lesson_id: number; } interface Props { course: Course; currentLesson?: Lesson; progress: ProgressItem[]; } export default function Player({ course, currentLesson, progress }: 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 = currentLesson || course.modules[0]?.lessons[0]; const currentModule = 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] ); }; // Find the first lesson if none is selected const activeLesson = currentLesson || course.modules[0]?.lessons[0]; const isCompleted = (lessonId: number) => { return progress.some(p => p.course_lesson_id === lessonId); }; const totalLessons = course.modules.reduce((acc, m) => acc + m.lessons.length, 0); const completedLessons = progress.length; const progressPercentage = Math.round((completedLessons / totalLessons) * 100); // Helper to find next lesson const allLessons = course.modules.flatMap(m => m.lessons); const currentIndex = allLessons.findIndex(l => l.id === activeLesson?.id); const nextLesson = allLessons[currentIndex + 1]; // Embed Video Helper const getEmbedUrl = (url: string) => { if (url.includes('youtube.com') || url.includes('youtu.be')) { const id = url.includes('youtu.be') ? url.split('/').pop() : new URL(url).searchParams.get('v'); return `https://www.youtube.com/embed/${id}?modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&controls=1&autohide=1&disablekb=1`; } if (url.includes('vimeo.com')) { const id = url.split('/').pop(); return `https://player.vimeo.com/video/${id}`; } return url; }; return (
{/* Top Header */}

{course.name}

{progressPercentage}% Complete
{/* Main Content Area */}
{activeLesson ? (
{/* Video Player */} {activeLesson.video_url && (