dyzulk/nihonbuzz-academy
1
0
Fork 0
mirror of https://github.com/nihonbuzz/nihonbuzz-academy.git synced 2026-01-26 05:25:37 +07:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve build errors in Player.tsx with robust types and null checks

Browse Source
This commit is contained in:
nihonbuzz
2026-01-23 18:23:23 +07:00
parent 7aa4eb89df
commit 0b4d28ae65
1 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
resources/js/Pages/Courses/Player.tsx
View File

@@ -1,6 +1,6 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { Plyr } from 'plyr-react';
import 'plyr-react/plyr.css';
import {
@@ -68,6 +68,7 @@ interface CurrentLessonData {
video_url: string | null;
content_pdf: string | null;
vocabularies: VocabularyData[];
is_completed?: boolean;
}
interface ProgressData {
@@ -83,6 +84,7 @@ interface PlayerProps {
auth: {
user: any;
};
[key: string]: any;
}
// Helper to get YouTube video ID
@@ -93,33 +95,13 @@ function getYouTubeId(url: string | null): string | null {
return (match && match[2].length === 11) ? match[2] : null;
}
export default function Player({ course, currentLesson, progress, auth }: PlayerProps) {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [isPlaying, setIsPlaying] = useState<string | null>(null);
const handleComplete = () => {
router.post(route('lessons.complete', { lesson: currentLesson.id }));
};
const playAudio = (url: string, id: string) => {
const audio = new Audio(url);
setIsPlaying(id);
audio.play();
audio.onended = () => setIsPlaying(null);
};
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;
const NavigationContent = () => (
/**
* Sub-component for Navigation Content
*/
function NavigationContent({ course, currentLesson }: { course: CourseData, currentLesson: CurrentLessonData }) {
return (
<div className="space-y-6">
<h3 className="text-xs font-black text-gray-400 uppercase tracking-widest pl-1">Daftar Materi</h3>
<div className="space-y-4">
{course.modules.map((module) => (
<div key={module.id} className="space-y-2">
@@ -131,6 +113,7 @@ export default function Player({ course, currentLesson, progress, auth }: Player
{module.lessons.map((lesson) => (
<li key={lesson.id}>
<Link
// @ts-ignore
href={route('courses.learn', { course: course.slug, lesson: lesson.slug })}
className={`flex items-center gap-3 p-3 rounded-xl transition-all text-sm group ${
lesson.id === currentLesson.id
@@ -159,13 +142,42 @@ export default function Player({ course, currentLesson, progress, auth }: Player
</div>
</div>
);
}
export default function Player({ course, currentLesson, progress, auth }: PlayerProps) {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [isPlaying, setIsPlaying] = useState<string | null>(null);
const handleComplete = () => {
// @ts-ignore
router.post(route('lessons.complete', { lesson: currentLesson.id }));
};
const playAudio = (url: string, id: string) => {
const audio = new Audio(url);
setIsPlaying(id);
audio.play();
audio.onended = () => setIsPlaying(null);
};
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 gap-4 px-2 lg:px-0">
<div className="flex items-center gap-2 lg:gap-4 overflow-hidden">
<Link href={route('courses.index')} className="p-2.5 rounded-xl bg-gray-50 hover:bg-white hover:shadow-md border border-gray-100 transition-all text-gray-500 hover:text-nihonbuzz-red shrink-0">
<Link
// @ts-ignore
href={route('courses.index')}
className="p-2.5 rounded-xl bg-gray-50 hover:bg-white hover:shadow-md border border-gray-100 transition-all text-gray-500 hover:text-nihonbuzz-red shrink-0"
>
<ChevronLeft className="w-5 h-5" />
</Link>
<div className="overflow-hidden">
@@ -193,7 +205,7 @@ export default function Player({ course, currentLesson, progress, auth }: Player
<p className="text-xs text-nihonbuzz-red font-bold uppercase tracking-widest">Kurikulum Kursus</p>
</SheetHeader>
<div className="p-6 overflow-y-auto h-[calc(100vh-120px)]">
<NavigationContent />
<NavigationContent course={course} currentLesson={currentLesson} />
</div>
</SheetContent>
</Sheet>
@@ -229,7 +241,7 @@ export default function Player({ course, currentLesson, progress, auth }: Player
{currentLesson.is_completed && <span className="px-2 py-0.5 bg-green-100 text-green-600 rounded-full">Completed</span>}
</div>
<h1 className="text-2xl lg:text-3xl font-black text-gray-900 leading-tight">
<FuriganaText text={currentLesson.title} />
<FuriganaText text={currentLesson.title || ''} />
</h1>
</div>
</div>
@@ -237,10 +249,8 @@ export default function Player({ course, currentLesson, progress, auth }: Player
{/* Text Content */}
{currentLesson.type === 'text' && currentLesson.content && (
<div className="bg-white p-8 lg:p-12 rounded-[40px] shadow-sm border border-gray-100">
<article className="prose prose-nihonbuzz prose-lg lg:prose-xl max-w-none">
{/* Ideally we'd have a parser for the whole content HTML too,
but for now we trust the seeder gives us plain text with furigana markers or HTML */}
<FuriganaText text={currentLesson.content} />
<article className="prose prose-nihonbuzz prose-lg lg:prose-xl max-w-none font-medium text-gray-700 leading-relaxed">
<FuriganaText text={currentLesson.content || ''} />
</article>
</div>
)}
@@ -250,14 +260,14 @@ export default function Player({ course, currentLesson, progress, auth }: Player
<div className="aspect-[3/4] w-full rounded-[40px] overflow-hidden shadow-2xl ring-1 ring-black/5">
<iframe
src={currentLesson.content_pdf}
className="w-full h-full"
className="w-full h-full border-none"
title={currentLesson.title}
/>
</div>
)}
{/* Vocabulary Section */}
{currentLesson.vocabularies?.length > 0 && (
{currentLesson.vocabularies && currentLesson.vocabularies.length > 0 && (
<div className="space-y-6">
<div className="flex items-center gap-3">
<div className="bg-nihonbuzz-red/10 p-2 rounded-2xl">
@@ -279,16 +289,16 @@ export default function Player({ course, currentLesson, progress, auth }: Player
{isPlaying === vocab.id ? <Volume2 className="w-5 h-5 animate-pulse" /> : <Volume2 className="w-5 h-5" />}
</div>
<div>
<FuriganaText text={vocab.word} className="text-lg font-black text-gray-900" />
<FuriganaText text={vocab.word || ''} className="text-lg font-black text-gray-900" />
<div className="flex items-center gap-2 mt-0.5">
<span className="text-xs font-bold text-nihonbuzz-red">{vocab.reading}</span>
<span className="text-[10px] text-gray-400 uppercase font-black">{vocab.type}</span>
<span className="text-xs font-bold text-nihonbuzz-red">{vocab.reading || ''}</span>
<span className="text-[10px] text-gray-400 uppercase font-black">{vocab.type || ''}</span>
</div>
</div>
</div>
<div className="text-right pr-2">
<p className="font-bold text-gray-700">{vocab.meaning_id}</p>
<p className="text-[11px] text-gray-400">{vocab.romaji}</p>
<p className="font-bold text-gray-700">{vocab.meaning_id || ''}</p>
<p className="text-[11px] text-gray-400">{vocab.romaji || ''}</p>
</div>
</div>
))}
@@ -331,7 +341,7 @@ export default function Player({ course, currentLesson, progress, auth }: Player
{/* Sidebar - Desktop Navigation */}
<aside className={`fixed right-0 top-16 bottom-0 w-80 bg-white border-l border-gray-50 overflow-y-auto transition-all shadow-[-10px_0_30px_rgba(0,0,0,0.02)] ${sidebarOpen ? 'translate-x-0' : 'translate-x-full'} hidden lg:block z-10`}>
<div className="p-8 h-full flex flex-col">
<NavigationContent />
<NavigationContent course={course} currentLesson={currentLesson} />
<div className="mt-auto pt-10">
<div className="bg-nihonbuzz-red/5 p-6 rounded-[32px] border border-nihonbuzz-red/10 text-center space-y-3 relative overflow-hidden group">
@@ -351,4 +361,3 @@ export default function Player({ course, currentLesson, progress, auth }: Player
</AuthenticatedLayout>
);
}