import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import { ChevronLeft, ChevronRight, CheckCircle, FileText, Download, Maximize2 } from 'lucide-react'; import { Plyr } from 'plyr-react'; import 'plyr-react/plyr.css'; import CourseLayout from '@/Layouts/CourseLayout'; import { Button } from '@/Components/ui/button'; import { Separator } from '@/Components/ui/separator'; import { Badge } from '@/Components/ui/badge'; // Interfaces (Should ideally be shared/exported) interface Lesson { id: string; title: string; slug: string; type: 'video' | 'text' | 'quiz' | 'pdf'; content?: string; video_url?: string; content_pdf?: string; // URL to PDF is_completed: boolean; duration_seconds: number; next_lesson_slug?: string; prev_lesson_slug?: string; attachments?: Array<{ id: string, name: string, url: string, size: string }>; } interface PageProps { course: any; modules: any[]; lesson: Lesson; } // Helper to get YouTube video ID (Robust) function getYouTubeId(url: string | null): string | null { if (!url) return null; try { const urlObj = new URL(url.trim()); let id = null; if (urlObj.hostname.includes('youtube.com')) { id = urlObj.searchParams.get('v'); } else if (urlObj.hostname.includes('youtu.be')) { id = urlObj.pathname.slice(1); } return id; } catch (e) { return null; } } export default function Learn({ course, modules, lesson }: PageProps) { const [isCompleted, setIsCompleted] = useState(lesson.is_completed); const handleComplete = () => { // Optimistic UI update setIsCompleted(true); // In real app: router.post(route('lessons.complete', lesson.id)) }; return ( {/* Header Content */}
{lesson.type} • {Math.ceil(lesson.duration_seconds / 60)} min read

{lesson.title}

{/* Main Content Render */}
{lesson.type === 'video' && lesson.video_url && (
)} {lesson.type === 'pdf' && lesson.content_pdf && (
{lesson.title}.pdf