feat: Introduce multi-tenancy support with organization-specific data, add interactive transcript functionality, and enhance lesson/course schemas.
This commit is contained in:
@@ -13,12 +13,16 @@ import FillInTheBlanksPlayer from "@/components/blocks/FillInTheBlanksPlayer";
|
||||
import MatchingPlayer from "@/components/blocks/MatchingPlayer";
|
||||
import OrderingPlayer from "@/components/blocks/OrderingPlayer";
|
||||
import ShortAnswerPlayer from "@/components/blocks/ShortAnswerPlayer";
|
||||
import InteractiveTranscript from "@/components/InteractiveTranscript";
|
||||
import { ListMusic } from "lucide-react";
|
||||
|
||||
export default function LessonPlayerPage({ params }: { params: { id: string, lessonId: string } }) {
|
||||
const [lesson, setLesson] = useState<Lesson | null>(null);
|
||||
const [course, setCourse] = useState<(Course & { modules: Module[] }) | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [transcriptOpen, setTranscriptOpen] = useState(true);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [userGrade, setUserGrade] = useState<UserGrade | null>(null);
|
||||
const { user } = useAuth();
|
||||
|
||||
@@ -44,7 +48,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
}
|
||||
};
|
||||
fetchAll();
|
||||
}, [params.id, params.lessonId]);
|
||||
}, [params.id, params.lessonId, user]);
|
||||
|
||||
if (loading) return <div className="p-20 text-center animate-pulse text-gray-500 font-bold uppercase tracking-widest">Loading Experience...</div>;
|
||||
if (!lesson || !course) return <div className="p-20 text-center text-red-400">Content not found.</div>;
|
||||
@@ -54,6 +58,16 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
const prevLesson = allLessons[currentIndex - 1];
|
||||
const nextLesson = allLessons[currentIndex + 1];
|
||||
|
||||
const hasTranscription = lesson.transcription && lesson.transcription.cues && lesson.transcription.cues.length > 0;
|
||||
|
||||
const handleSeek = (time: number) => {
|
||||
const videoElement = document.querySelector('video');
|
||||
if (videoElement) {
|
||||
videoElement.currentTime = time;
|
||||
videoElement.play();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-64px)] overflow-hidden">
|
||||
{/* Navigation Sidebar */}
|
||||
@@ -88,128 +102,152 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 flex flex-col relative">
|
||||
<div className="absolute top-4 left-4 z-10">
|
||||
<main className="flex-1 flex flex-col relative overflow-hidden">
|
||||
<div className="absolute top-4 left-4 z-10 flex gap-2">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-3 rounded-xl glass border-white/10 text-gray-400 hover:text-white transition-all bg-black/40"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
{hasTranscription && (
|
||||
<button
|
||||
onClick={() => setTranscriptOpen(!transcriptOpen)}
|
||||
className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${transcriptOpen ? 'text-blue-400' : 'text-gray-400 hover:text-white'}`}
|
||||
title="Toggle Transcript"
|
||||
>
|
||||
<ListMusic size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-12">
|
||||
<div className="max-w-4xl mx-auto space-y-20 pb-40">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-400">
|
||||
<span>{lesson.content_type === 'activity' ? 'Interactive Activity' : 'Video Lesson'}</span>
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<div className="flex-1 overflow-y-auto px-6 py-12">
|
||||
<div className="max-w-4xl mx-auto space-y-20 pb-40">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-400">
|
||||
<span>{lesson.content_type === 'activity' ? 'Interactive Activity' : 'Video Lesson'}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl font-black tracking-tighter text-white">{lesson.title}</h1>
|
||||
</div>
|
||||
<h1 className="text-4xl font-black tracking-tighter text-white">{lesson.title}</h1>
|
||||
</div>
|
||||
|
||||
{lesson.summary && (
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-500/20 animate-in fade-in slide-in-from-top-4 duration-1000">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-4 flex items-center gap-2">
|
||||
<span className="text-base">✨</span> Summary
|
||||
</h3>
|
||||
<p className="text-lg text-gray-300 leading-relaxed font-medium italic">
|
||||
"{lesson.summary}"
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{lesson.summary && (
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-500/20 animate-in fade-in slide-in-from-top-4 duration-1000">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-4 flex items-center gap-2">
|
||||
<span className="text-base">✨</span> Summary
|
||||
</h3>
|
||||
<p className="text-lg text-gray-300 leading-relaxed font-medium italic">
|
||||
"{lesson.summary}"
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Render Blocks */}
|
||||
{(lesson.metadata?.blocks || []).length > 0 ? (
|
||||
<div className="space-y-24">
|
||||
{lesson.metadata?.blocks?.map((block) => (
|
||||
<div key={block.id} className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||||
{block.type === 'description' && (
|
||||
<DescriptionPlayer id={block.id} title={block.title} content={block.content || ""} />
|
||||
)}
|
||||
{block.type === 'media' && (
|
||||
<MediaPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
media_type={block.media_type || 'video'}
|
||||
config={block.config}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'quiz' && (
|
||||
<QuizPlayer id={block.id} title={block.title} quizData={block.quiz_data || { questions: [] }} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'fill-in-the-blanks' && (
|
||||
<FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'matching' && (
|
||||
<MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'ordering' && (
|
||||
<OrderingPlayer id={block.id} title={block.title} items={block.items || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'short-answer' && (
|
||||
<ShortAnswerPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
prompt={block.prompt || ""}
|
||||
correctAnswers={block.correctAnswers || []}
|
||||
allowRetry={lesson.allow_retry}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-20 text-center glass-card border-dashed border-white/10">
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest">This lesson currently has no content.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lesson.is_graded && (
|
||||
<div className="pt-20 border-t border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
{userGrade && lesson.max_attempts && userGrade.attempts_count >= lesson.max_attempts ? (
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-6 py-2 bg-amber-500/10 border border-amber-500/30 text-amber-400 rounded-full text-xs font-black uppercase tracking-widest">
|
||||
Locked: Maximum attempts reached ({lesson.max_attempts})
|
||||
{/* Render Blocks */}
|
||||
{(lesson.metadata?.blocks || []).length > 0 ? (
|
||||
<div className="space-y-24">
|
||||
{lesson.metadata?.blocks?.map((block) => (
|
||||
<div key={block.id} className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||||
{block.type === 'description' && (
|
||||
<DescriptionPlayer id={block.id} title={block.title} content={block.content || ""} />
|
||||
)}
|
||||
{block.type === 'media' && (
|
||||
<MediaPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
media_type={block.media_type || 'video'}
|
||||
config={block.config}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'quiz' && (
|
||||
<QuizPlayer id={block.id} title={block.title} quizData={block.quiz_data || { questions: [] }} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'fill-in-the-blanks' && (
|
||||
<FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'matching' && (
|
||||
<MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'ordering' && (
|
||||
<OrderingPlayer id={block.id} title={block.title} items={block.items || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'short-answer' && (
|
||||
<ShortAnswerPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
prompt={block.prompt || ""}
|
||||
correctAnswers={block.correctAnswers || []}
|
||||
allowRetry={lesson.allow_retry}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-4xl font-black text-white">
|
||||
Score: <span className="text-blue-500">{userGrade.score * 100}%</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-20 text-center glass-card border-dashed border-white/10">
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest">This lesson currently has no content.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lesson.is_graded && (
|
||||
<div className="pt-20 border-t border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
{userGrade && lesson.max_attempts && userGrade.attempts_count >= lesson.max_attempts ? (
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-6 py-2 bg-amber-500/10 border border-amber-500/30 text-amber-400 rounded-full text-xs font-black uppercase tracking-widest">
|
||||
Locked: Maximum attempts reached ({lesson.max_attempts})
|
||||
</div>
|
||||
<div className="text-4xl font-black text-white">
|
||||
Score: <span className="text-blue-500">{userGrade.score * 100}%</span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-xs italic">This assessment is now closed for further submissions.</p>
|
||||
</div>
|
||||
<p className="text-gray-500 text-xs italic">This assessment is now closed for further submissions.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (user) {
|
||||
try {
|
||||
// In a real scenario, we'd calculate the actual score from blocks
|
||||
const res = await lmsApi.submitScore(user.id, params.id, params.lessonId, 1.0);
|
||||
setUserGrade(res);
|
||||
alert("Score submitted successfully!");
|
||||
} catch (err) {
|
||||
console.error("Submission failed", err);
|
||||
alert("Failed to submit score. Please try again.");
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (user) {
|
||||
try {
|
||||
// In a real scenario, we'd calculate the actual score from blocks
|
||||
const res = await lmsApi.submitScore(user.id, params.id, params.lessonId, 1.0);
|
||||
setUserGrade(res);
|
||||
alert("Score submitted successfully!");
|
||||
} catch (err) {
|
||||
console.error("Submission failed", err);
|
||||
alert("Failed to submit score. Please try again.");
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="btn-premium px-12 py-4 rounded-2xl shadow-blue-500/40 shadow-xl group/btn"
|
||||
>
|
||||
<span className="flex items-center gap-2 font-black italic">
|
||||
{userGrade ? `SUBMIT ATTEMPT ${userGrade.attempts_count + 1}` : 'SUBMIT FOR GRADING'}
|
||||
<CheckCircle2 className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
|
||||
</span>
|
||||
</button>
|
||||
{lesson.max_attempts && (
|
||||
<p className="mt-4 text-[10px] text-gray-500 font-bold uppercase tracking-widest">
|
||||
Attempt {userGrade ? userGrade.attempts_count : 0} of {lesson.max_attempts} used
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
}}
|
||||
className="btn-premium px-12 py-4 rounded-2xl shadow-blue-500/40 shadow-xl group/btn"
|
||||
>
|
||||
<span className="flex items-center gap-2 font-black italic">
|
||||
{userGrade ? `SUBMIT ATTEMPT ${userGrade.attempts_count + 1}` : 'SUBMIT FOR GRADING'}
|
||||
<CheckCircle2 className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
|
||||
</span>
|
||||
</button>
|
||||
{lesson.max_attempts && (
|
||||
<p className="mt-4 text-[10px] text-gray-500 font-bold uppercase tracking-widest">
|
||||
Attempt {userGrade ? userGrade.attempts_count : 0} of {lesson.max_attempts} used
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Transcript Panel */}
|
||||
{hasTranscription && transcriptOpen && (
|
||||
<aside className="w-[400px] border-l border-white/5 bg-black/20 animate-in slide-in-from-right duration-500">
|
||||
<InteractiveTranscript
|
||||
cues={lesson.transcription!.cues!}
|
||||
currentTime={currentTime}
|
||||
onSeek={handleSeek}
|
||||
/>
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Controls */}
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function CatalogPage() {
|
||||
const [enrollments, setEnrollments] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [gamification, setGamification] = useState<{ points: number, level: number, badges: any[] } | null>(null);
|
||||
const [upcomingDeadlines, setUpcomingDeadlines] = useState<{ lesson: Lesson, courseTitle: string }[]>([]);
|
||||
const [upcomingDeadlines, setUpcomingDeadlines] = useState<{ lesson: Lesson, courseTitle: string, courseId: string }[]>([]);
|
||||
|
||||
const { user } = useAuth();
|
||||
const router = useRouter();
|
||||
@@ -21,7 +21,7 @@ export default function CatalogPage() {
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const coursesData = await lmsApi.getCatalog();
|
||||
const coursesData = await lmsApi.getCatalog(user?.organization_id);
|
||||
setCourses(coursesData);
|
||||
|
||||
if (user) {
|
||||
@@ -32,19 +32,19 @@ export default function CatalogPage() {
|
||||
setGamification(gamificationData);
|
||||
|
||||
// Fetch deadlines for enrolled courses
|
||||
const deadlines: { lesson: Lesson, courseTitle: string }[] = [];
|
||||
const deadlines: { lesson: Lesson, courseTitle: string, courseId: string }[] = [];
|
||||
for (const enrollment of enrollmentData) {
|
||||
try {
|
||||
const outline = await lmsApi.getCourseOutline(enrollment.course_id);
|
||||
outline.modules.forEach(mod => {
|
||||
mod.lessons.forEach(l => {
|
||||
if (l.due_date && new Date(l.due_date) >= new Date()) {
|
||||
deadlines.push({ lesson: l, courseTitle: outline.title });
|
||||
deadlines.push({ lesson: l, courseTitle: outline.title, courseId: enrollment.course_id });
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch outline for course ${enrollment.course_id}`, err);
|
||||
console.error(`Failed to load outline for course ${enrollment.course_id}`, err);
|
||||
}
|
||||
}
|
||||
setUpcomingDeadlines(deadlines.sort((a, b) => new Date(a.lesson.due_date!).getTime() - new Date(b.lesson.due_date!).getTime()).slice(0, 3));
|
||||
@@ -182,8 +182,8 @@ export default function CatalogPage() {
|
||||
<Calendar size={14} /> Upcoming Deadlines
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{upcomingDeadlines.map(({ lesson, courseTitle }) => (
|
||||
<Link key={lesson.id} href={`/courses/${lesson.module_id}/lessons/${lesson.id}`} className="group">
|
||||
{upcomingDeadlines.map(({ lesson, courseTitle, courseId }) => (
|
||||
<Link key={lesson.id} href={`/courses/${courseId}/lessons/${lesson.id}`} className="block group">
|
||||
<div className="glass-card p-6 border-blue-500/10 bg-blue-500/2 rounded-3xl hover:border-blue-500/30 transition-all">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-blue-400 group-hover:text-blue-300 transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user