107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
/**
|
|
* CourseLearningView — orchestration: hook + Header, Player, Tabs, Sidebar, modals.
|
|
*/
|
|
import React from 'react';
|
|
import { useToast } from '@/components/feedback/ToastProvider';
|
|
import { QuizModal } from '../modals/QuizModal';
|
|
import { CertificateModal } from '../modals/CertificateModal';
|
|
import { useCourseLearningView } from './useCourseLearningView';
|
|
import { CourseLearningViewHeader } from './CourseLearningViewHeader';
|
|
import { CourseLearningViewPlayer } from './CourseLearningViewPlayer';
|
|
import { CourseLearningViewTabs } from './CourseLearningViewTabs';
|
|
import { CourseLearningViewSidebar } from './CourseLearningViewSidebar';
|
|
import { CourseLearningViewSkeleton } from './CourseLearningViewSkeleton';
|
|
import type { CourseLearningViewProps } from './types';
|
|
|
|
export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
|
|
course,
|
|
onBack,
|
|
isLoading = false,
|
|
}) => {
|
|
const { addToast } = useToast();
|
|
const {
|
|
allLessons,
|
|
currentLesson,
|
|
currentLessonIndex,
|
|
activeLessonId,
|
|
setActiveLessonId,
|
|
completedLessons,
|
|
sidebarOpen,
|
|
setSidebarOpen,
|
|
activeTab,
|
|
setActiveTab,
|
|
progress,
|
|
showQuiz,
|
|
setShowQuiz,
|
|
activeQuiz,
|
|
showCertificate,
|
|
setShowCertificate,
|
|
markComplete,
|
|
handleNext,
|
|
handlePrev,
|
|
startQuiz,
|
|
} = useCourseLearningView(course);
|
|
|
|
if (isLoading) {
|
|
return <CourseLearningViewSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-layout-main -m-6 md:-m-12 bg-background">
|
|
<CourseLearningViewHeader
|
|
course={course}
|
|
progress={progress}
|
|
sidebarOpen={sidebarOpen}
|
|
onBack={onBack}
|
|
onToggleSidebar={() => setSidebarOpen((o) => !o)}
|
|
/>
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<div className="flex-1 flex flex-col min-w-0 overflow-y-auto custom-scrollbar">
|
|
<CourseLearningViewPlayer
|
|
lesson={currentLesson}
|
|
onStartQuiz={startQuiz}
|
|
/>
|
|
<CourseLearningViewTabs
|
|
lesson={currentLesson}
|
|
currentIndex={currentLessonIndex}
|
|
totalLessons={allLessons.length}
|
|
onPrev={handlePrev}
|
|
onNext={handleNext}
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
/>
|
|
</div>
|
|
|
|
{sidebarOpen && (
|
|
<CourseLearningViewSidebar
|
|
course={course}
|
|
activeLessonId={activeLessonId}
|
|
completedLessons={completedLessons}
|
|
onSelectLesson={setActiveLessonId}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{showQuiz && activeQuiz && (
|
|
<QuizModal
|
|
quiz={activeQuiz}
|
|
onClose={() => setShowQuiz(false)}
|
|
onComplete={(score) => {
|
|
addToast(`Quiz Completed. Score: ${score}%`, 'info');
|
|
if (currentLesson) markComplete(currentLesson.id);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showCertificate && (
|
|
<CertificateModal
|
|
studentName="Cyber Producer"
|
|
courseName={course.title}
|
|
completionDate={new Date().toLocaleDateString()}
|
|
onClose={() => setShowCertificate(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|