import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { Plyr } from 'plyr-react'; import { CheckCircle2, ChevronLeft, Circle, FileText, Play, Video } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Progress } from '@/Components/ui/progress'; interface LessonData { id: string; title: string; slug: string; type: 'video' | 'text' | 'pdf'; is_completed: boolean; } interface ModuleData { id: string; title: string; lessons: LessonData[]; } interface CourseData { id: string; title: string; slug: string; modules: ModuleData[]; } interface CurrentLessonData { id: string; title: string; slug: string; type: 'video' | 'text' | 'pdf'; content: string | null; video_url: string | null; content_pdf: string | null; } interface ProgressData { completed_count: number; total_count: number; percentage: number; } interface PlayerProps { course: CourseData; currentLesson: CurrentLessonData; progress: ProgressData; } // Helper to get YouTube video ID function getYouTubeId(url: string): string | null { const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; const match = url.match(regExp); return (match && match[2].length === 11) ? match[2] : null; } export default function Player({ course, currentLesson, progress }: PlayerProps) { const [sidebarOpen, setSidebarOpen] = useState(true); const handleComplete = () => { router.post(route('lessons.complete', { lesson: currentLesson.id })); }; const videoSource = currentLesson.video_url ? { type: 'video' as const, sources: [{ src: getYouTubeId(currentLesson.video_url) || currentLesson.video_url, provider: currentLesson.video_url.includes('youtube') ? 'youtube' as const : 'html5' as const, }], } : null; return (

{course.title}

{progress.completed_count}/{progress.total_count} Materi Selesai

} >
{/* Main Content Area */}
{/* Lesson Title */}
{currentLesson.type === 'video' &&
{/* Video Player */} {currentLesson.type === 'video' && videoSource && (
)} {/* Text Content */} {currentLesson.type === 'text' && currentLesson.content && (
)} {/* PDF Content */} {currentLesson.type === 'pdf' && currentLesson.content_pdf && (