mirror of
https://github.com/nihonbuzz/nihonbuzz-academy.git
synced 2026-01-26 21:41:54 +07:00
184 lines
8.4 KiB
TypeScript
184 lines
8.4 KiB
TypeScript
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 (
|
|
<AuthenticatedLayout
|
|
header={
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href={route('dashboard')} className="p-2 rounded-xl bg-gray-100 hover:bg-gray-200 transition-colors">
|
|
<ChevronLeft className="w-5 h-5 text-gray-600" />
|
|
</Link>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-gray-900 line-clamp-1">{course.title}</h2>
|
|
<p className="text-xs text-gray-500">{progress.completed_count}/{progress.total_count} Materi Selesai</p>
|
|
</div>
|
|
</div>
|
|
<Progress value={progress.percentage} className="w-32 h-2" />
|
|
</div>
|
|
}
|
|
>
|
|
<Head title={`${currentLesson.title} - ${course.title}`} />
|
|
|
|
<div className="flex h-[calc(100vh-80px)]">
|
|
{/* Main Content Area */}
|
|
<div className={`flex-1 overflow-y-auto p-6 lg:p-10 transition-all ${sidebarOpen ? 'lg:mr-80' : ''}`}>
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
{/* Lesson Title */}
|
|
<div className="flex items-center gap-3">
|
|
{currentLesson.type === 'video' && <Video className="w-6 h-6 text-nihonbuzz-red" />}
|
|
{currentLesson.type === 'text' && <FileText className="w-6 h-6 text-blue-500" />}
|
|
{currentLesson.type === 'pdf' && <FileText className="w-6 h-6 text-orange-500" />}
|
|
<h1 className="text-2xl font-black text-gray-900">{currentLesson.title}</h1>
|
|
</div>
|
|
|
|
{/* Video Player */}
|
|
{currentLesson.type === 'video' && videoSource && (
|
|
<div className="aspect-video rounded-2xl overflow-hidden shadow-2xl bg-black">
|
|
<Plyr source={videoSource} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Text Content */}
|
|
{currentLesson.type === 'text' && currentLesson.content && (
|
|
<div
|
|
className="prose prose-lg max-w-none bg-white p-8 rounded-2xl shadow-sm border border-gray-100"
|
|
dangerouslySetInnerHTML={{ __html: currentLesson.content }}
|
|
/>
|
|
)}
|
|
|
|
{/* PDF Content */}
|
|
{currentLesson.type === 'pdf' && currentLesson.content_pdf && (
|
|
<div className="aspect-[3/4] w-full">
|
|
<iframe
|
|
src={currentLesson.content_pdf}
|
|
className="w-full h-full rounded-2xl shadow-lg border border-gray-200"
|
|
title={currentLesson.title}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mark as Complete Button */}
|
|
<div className="flex justify-center pt-6">
|
|
<Button
|
|
onClick={handleComplete}
|
|
size="lg"
|
|
className="bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold rounded-full px-10 py-6 text-base shadow-xl shadow-nihonbuzz-red/30"
|
|
>
|
|
<CheckCircle2 className="w-5 h-5 mr-2" />
|
|
Tandai Selesai & Lanjutkan
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar - Module & Lesson Navigation */}
|
|
<aside className={`fixed right-0 top-16 bottom-0 w-80 bg-white border-l border-gray-100 overflow-y-auto transition-transform ${sidebarOpen ? 'translate-x-0' : 'translate-x-full'} hidden lg:block`}>
|
|
<div className="p-6 space-y-6">
|
|
<h3 className="text-sm font-black text-gray-400 uppercase tracking-widest">Daftar Materi</h3>
|
|
|
|
{course.modules.map((module) => (
|
|
<div key={module.id} className="space-y-2">
|
|
<h4 className="font-bold text-gray-700 text-sm">{module.title}</h4>
|
|
<ul className="space-y-1">
|
|
{module.lessons.map((lesson) => (
|
|
<li key={lesson.id}>
|
|
<Link
|
|
href={route('courses.learn', { course: course.slug, lesson: lesson.slug })}
|
|
className={`flex items-center gap-3 p-3 rounded-xl transition-all text-sm ${
|
|
lesson.id === currentLesson.id
|
|
? 'bg-nihonbuzz-red/10 text-nihonbuzz-red font-bold'
|
|
: 'hover:bg-gray-50 text-gray-600'
|
|
}`}
|
|
>
|
|
{lesson.is_completed ? (
|
|
<CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
|
|
) : lesson.id === currentLesson.id ? (
|
|
<Play className="w-5 h-5 text-nihonbuzz-red shrink-0 fill-current" />
|
|
) : (
|
|
<Circle className="w-5 h-5 text-gray-300 shrink-0" />
|
|
)}
|
|
<span className="line-clamp-1">{lesson.title}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|