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">
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Clock } from "lucide-react";
|
||||
|
||||
interface Cue {
|
||||
start: number;
|
||||
end: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface InteractiveTranscriptProps {
|
||||
cues: Cue[];
|
||||
currentTime: number;
|
||||
onSeek: (time: number) => void;
|
||||
}
|
||||
|
||||
export default function InteractiveTranscript({ cues, currentTime, onSeek }: InteractiveTranscriptProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const activeCueRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to active cue
|
||||
useEffect(() => {
|
||||
if (activeCueRef.current && scrollRef.current) {
|
||||
activeCueRef.current.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
}
|
||||
}, [currentTime]);
|
||||
|
||||
const isCueActive = (cue: Cue) => {
|
||||
return currentTime >= cue.start && currentTime < cue.end;
|
||||
};
|
||||
|
||||
const formatTime = (time: number) => {
|
||||
const mins = Math.floor(time / 60);
|
||||
const secs = Math.floor(time % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full glass-card overflow-hidden border-white/5 bg-black/20">
|
||||
<div className="p-6 border-b border-white/5 flex items-center gap-3 bg-white/5">
|
||||
<Clock className="w-4 h-4 text-blue-400" />
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400">Interactive Transcript</h3>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar"
|
||||
>
|
||||
{cues.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center p-8">
|
||||
<span className="text-4xl mb-4">🤐</span>
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-bold">No transcription available for this content</p>
|
||||
</div>
|
||||
) : (
|
||||
cues.map((cue, index) => {
|
||||
const active = isCueActive(cue);
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
ref={active ? activeCueRef : null}
|
||||
onClick={() => onSeek(cue.start)}
|
||||
className={`group cursor-pointer p-4 rounded-2xl transition-all border ${active
|
||||
? 'bg-blue-500/10 border-blue-500/30 text-white translate-x-1'
|
||||
: 'bg-white/5 border-transparent text-gray-400 hover:bg-white/10 hover:border-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className={`text-[10px] font-mono mt-1 ${active ? 'text-blue-400' : 'text-gray-600'}`}>
|
||||
{formatTime(cue.start)}
|
||||
</span>
|
||||
<p className={`text-sm leading-relaxed ${active ? 'font-medium' : ''}`}>
|
||||
{cue.text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-white/5 border-t border-white/5 flex items-center justify-between">
|
||||
<span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest">Click any segment to jump</span>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse"></div>
|
||||
<div className="w-1 h-1 rounded-full bg-blue-500/50"></div>
|
||||
<div className="w-1 h-1 rounded-full bg-blue-500/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,23 +11,40 @@ interface MediaPlayerProps {
|
||||
config?: {
|
||||
maxPlays?: number;
|
||||
};
|
||||
onTimeUpdate?: (time: number) => void;
|
||||
}
|
||||
|
||||
export default function MediaPlayer({ id, title, url, media_type, config }: MediaPlayerProps) {
|
||||
export default function MediaPlayer({ id, title, url, media_type, config, onTimeUpdate }: MediaPlayerProps) {
|
||||
const [playCount, setPlayCount] = useState(0);
|
||||
const [hasStarted, setHasStarted] = useState(false);
|
||||
const [locked, setLocked] = useState(false);
|
||||
|
||||
const maxPlays = config?.maxPlays || 0;
|
||||
|
||||
const CMS_API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || "http://localhost:3001";
|
||||
|
||||
const getFullUrl = (path: string) => {
|
||||
if (path.startsWith('http')) return path;
|
||||
// Map /uploads to /assets for the backend
|
||||
const cleanPath = path.startsWith('/uploads') ? path.replace('/uploads', '/assets') : path;
|
||||
const finalPath = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`;
|
||||
return `${CMS_API_URL}${finalPath}`;
|
||||
};
|
||||
|
||||
const isLocalFile = url.startsWith('/uploads') || url.startsWith('http://localhost:3001/assets') || url.includes('/assets/');
|
||||
|
||||
useEffect(() => {
|
||||
if (maxPlays > 0 && playCount >= maxPlays) {
|
||||
if (maxPlays > 0 && playCount >= maxPlays && !hasStarted) {
|
||||
setLocked(true);
|
||||
}
|
||||
}, [playCount, maxPlays]);
|
||||
}, [playCount, maxPlays, hasStarted]);
|
||||
|
||||
const handlePlay = () => {
|
||||
if (locked) return;
|
||||
setPlayCount(prev => prev + 1);
|
||||
if (!hasStarted) {
|
||||
setPlayCount(prev => prev + 1);
|
||||
setHasStarted(true);
|
||||
}
|
||||
};
|
||||
|
||||
if (locked) {
|
||||
@@ -72,18 +89,28 @@ export default function MediaPlayer({ id, title, url, media_type, config }: Medi
|
||||
</div>
|
||||
|
||||
<div className="glass-card !p-2 overflow-hidden aspect-video relative group">
|
||||
<iframe
|
||||
src={getEmbedUrl(url)}
|
||||
className="w-full h-full rounded-xl"
|
||||
allowFullScreen
|
||||
onLoad={() => {
|
||||
// In a real app, we'd detect play events from the player API
|
||||
// For this demo, we'll increment when the iframe loads or specific interaction
|
||||
}}
|
||||
/>
|
||||
{isLocalFile ? (
|
||||
<video
|
||||
src={getFullUrl(url)}
|
||||
controls
|
||||
className="w-full h-full rounded-xl"
|
||||
onPlay={handlePlay}
|
||||
onTimeUpdate={(e) => {
|
||||
if (onTimeUpdate) {
|
||||
onTimeUpdate(e.currentTarget.currentTime);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<iframe
|
||||
src={getEmbedUrl(url)}
|
||||
className="w-full h-full rounded-xl"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Simulated play tracker overlay (invisible but catches first click) */}
|
||||
{playCount === 0 && (
|
||||
{/* Simulated play tracker overlay for iframes (invisible but catches first click) */}
|
||||
{!isLocalFile && playCount === 0 && (
|
||||
<div
|
||||
onClick={handlePlay}
|
||||
className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer group-hover:bg-black/20 transition-all"
|
||||
|
||||
@@ -96,6 +96,7 @@ export interface User {
|
||||
email: string;
|
||||
full_name: string;
|
||||
role: string;
|
||||
organization_id: string;
|
||||
xp?: number;
|
||||
level?: number;
|
||||
}
|
||||
@@ -127,7 +128,7 @@ export interface Module {
|
||||
lessons: Lesson[];
|
||||
}
|
||||
|
||||
const getToken = () => typeof window !== 'undefined' ? localStorage.getItem('token') : null;
|
||||
const getToken = () => typeof window !== 'undefined' ? localStorage.getItem('experience_token') : null;
|
||||
|
||||
const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean = false) => {
|
||||
const token = getToken();
|
||||
|
||||
@@ -24,6 +24,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
|
||||
// Activity State (Blocks)
|
||||
const [blocks, setBlocks] = useState<Block[]>([]);
|
||||
@@ -39,8 +40,58 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
const [dueDate, setDueDate] = useState<string>("");
|
||||
const [importantDateType, setImportantDateType] = useState<string>("");
|
||||
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
const [transcriptionTimer, setTranscriptionTimer] = useState(0);
|
||||
|
||||
// Polling for AI status
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
|
||||
if (lesson && (lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing')) {
|
||||
interval = setInterval(async () => {
|
||||
try {
|
||||
const updated = await cmsApi.getLesson(params.lessonId);
|
||||
setLesson(updated);
|
||||
|
||||
// If it finished, update local states
|
||||
if (updated.transcription_status === 'completed') {
|
||||
if (updated.transcription) {
|
||||
// Automatically update summary if available? No, wait for manual trigger or auto-trigger?
|
||||
// For now just update lesson
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Polling failed", err);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (interval) clearInterval(interval);
|
||||
};
|
||||
}, [lesson, lesson?.transcription_status, params.lessonId]);
|
||||
|
||||
// Timer logic
|
||||
useEffect(() => {
|
||||
let timerInterval: NodeJS.Timeout;
|
||||
if (lesson && (lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing')) {
|
||||
timerInterval = setInterval(() => {
|
||||
setTranscriptionTimer(prev => prev + 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
setTranscriptionTimer(0);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (timerInterval) clearInterval(timerInterval);
|
||||
};
|
||||
}, [lesson, lesson?.transcription_status]);
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
@@ -95,8 +146,18 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
if (!lesson) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
// Sync content_url for video/audio lessons from the first media block
|
||||
let content_url = lesson.content_url;
|
||||
if (lesson.content_type === 'video' || lesson.content_type === 'audio') {
|
||||
const mediaBlock = blocks.find(b => b.type === 'media');
|
||||
if (mediaBlock && mediaBlock.url) {
|
||||
content_url = mediaBlock.url;
|
||||
}
|
||||
}
|
||||
|
||||
const updated = await cmsApi.updateLesson(lesson.id, {
|
||||
metadata: { ...lesson.metadata, blocks },
|
||||
content_url,
|
||||
summary,
|
||||
is_graded: isGraded,
|
||||
grading_category_id: selectedCategoryId || null,
|
||||
@@ -381,19 +442,35 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
{(lesson.content_type === 'video' || lesson.content_type === 'audio') && (
|
||||
<button
|
||||
onClick={handleTranscribe}
|
||||
disabled={isTranscribing}
|
||||
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 ${lesson.transcription ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-blue-500/10 border-blue-500/30 text-blue-400 hover:border-blue-500/60'}`}
|
||||
disabled={isTranscribing || lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing'}
|
||||
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 relative overflow-hidden ${lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing'
|
||||
? 'bg-blue-500/20 border-blue-500/50 text-blue-300 animate-pulse'
|
||||
: lesson.transcription_status === 'completed' || lesson.transcription
|
||||
? 'bg-green-500/10 border-green-500/30 text-green-400'
|
||||
: 'bg-blue-500/10 border-blue-500/30 text-blue-400 hover:border-blue-500/60'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{isTranscribing ? '⏳' : '🎤'}</span>
|
||||
<span className="text-xl">
|
||||
{lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing' ? '⏳' : '🎤'}
|
||||
</span>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Video/Audio</div>
|
||||
<div className="font-bold">{isTranscribing ? 'Transcribing...' : lesson.transcription ? 'Update Transcript' : 'Transcribe Video'}</div>
|
||||
<div className="font-bold">
|
||||
{lesson.transcription_status === 'queued'
|
||||
? `Queued (${formatTime(transcriptionTimer)})`
|
||||
: lesson.transcription_status === 'processing'
|
||||
? `Transcribing (${formatTime(transcriptionTimer)})`
|
||||
: lesson.transcription ? 'Update Transcript' : 'Transcribe Video'}
|
||||
</div>
|
||||
{(lesson.transcription_status === 'queued' || lesson.transcription_status === 'processing') && (
|
||||
<div className="absolute bottom-0 left-0 h-1 bg-blue-500 animate-[progress_2s_ease-in-out_infinite]" style={{ width: '100%' }}></div>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleSummarize}
|
||||
disabled={isGeneratingSummary || !lesson.transcription}
|
||||
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 ${summary ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400 hover:border-indigo-500/60 disabled:opacity-30 disabled:cursor-not-allowed'}`}
|
||||
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400 hover:border-indigo-500/60 disabled:opacity-30 disabled:cursor-not-allowed'}`}
|
||||
>
|
||||
<span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div>
|
||||
@@ -404,7 +481,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<button
|
||||
onClick={handleGenerateQuiz}
|
||||
disabled={isGeneratingQuiz || !lesson.transcription}
|
||||
className="p-6 bg-purple-500/10 border border-purple-500/30 hover:border-purple-500/60 rounded-2xl transition-all text-left flex flex-col gap-2 text-purple-400 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-400 disabled:opacity-30 disabled:cursor-not-allowed'}`}
|
||||
>
|
||||
<span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div>
|
||||
|
||||
@@ -11,19 +11,26 @@ interface FileUploadProps {
|
||||
|
||||
export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*" }: FileUploadProps) {
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [uploadingFileName, setUploadingFileName] = useState("");
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleUpload = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
setUploadProgress(0);
|
||||
setUploadingFileName(file.name);
|
||||
try {
|
||||
const result = await cmsApi.uploadAsset(file);
|
||||
const result = await cmsApi.uploadAsset(file, (pct) => {
|
||||
setUploadProgress(pct);
|
||||
});
|
||||
onUploadComplete(result.url);
|
||||
} catch (err) {
|
||||
alert("Upload failed. Please try again.");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
setUploadingFileName("");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -54,14 +61,47 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Upload Progress Modal Overlay */}
|
||||
{isUploading && (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="w-full max-w-md bg-gray-900 border border-white/10 p-8 rounded-3xl shadow-2xl space-y-6 text-center">
|
||||
<div className="w-20 h-20 bg-blue-500/10 border border-blue-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse">
|
||||
<span className="text-3xl">📤</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold text-white tracking-tight">Uploading Asset</h3>
|
||||
<p className="text-xs text-gray-400 font-medium truncate px-4">{uploadingFileName}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-300 ease-out shadow-[0_0_15px_rgba(59,130,246,0.5)]"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between items-center px-1">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Processing...</span>
|
||||
<span className="text-lg font-black italic text-white">{uploadProgress}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-widest leading-relaxed">
|
||||
Please do not close this tab or navigate away. <br /> Your file is being securely transferred.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`relative group cursor-pointer border-2 border-dashed rounded-xl p-8 transition-all flex flex-col items-center justify-center gap-4 ${dragActive ? "border-blue-500 bg-blue-500/10 scale-[1.02]" : "border-white/10 hover:border-white/20 bg-white/5"
|
||||
}`}
|
||||
} ${isUploading ? "opacity-30 pointer-events-none" : ""}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onClick={() => !isUploading && fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
@@ -69,24 +109,16 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
|
||||
className="hidden"
|
||||
accept={accept}
|
||||
onChange={handleFileChange}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
|
||||
{isUploading ? (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-blue-400">Uploading Asset...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-bold text-gray-300">Drag & drop or <span className="text-blue-400 underline decoration-blue-500/30">browse</span></p>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Native video, audio files supported</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-bold text-gray-300">Drag & drop or <span className="text-blue-400 underline decoration-blue-500/30">browse</span></p>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Native video, audio files supported</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentUrl && !isUploading && (
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import MediaPlayer from "../MediaPlayer";
|
||||
import FileUpload from "../FileUpload";
|
||||
import { getImageUrl } from "@/lib/api";
|
||||
|
||||
interface MediaBlockProps {
|
||||
id: string;
|
||||
@@ -37,7 +38,7 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
};
|
||||
|
||||
// Full URL for display (handles relative paths from server)
|
||||
const displayUrl = url.startsWith("/") ? `http://localhost:3001${url}` : url;
|
||||
const displayUrl = getImageUrl(url);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
+34
-18
@@ -63,6 +63,7 @@ export interface Lesson {
|
||||
module_id: string;
|
||||
title: string;
|
||||
content_type: string;
|
||||
content_url?: string;
|
||||
metadata?: {
|
||||
blocks: Block[];
|
||||
};
|
||||
@@ -78,6 +79,7 @@ export interface Lesson {
|
||||
es?: string;
|
||||
cues?: { start: number; end: number; text: string }[];
|
||||
} | null;
|
||||
transcription_status?: 'idle' | 'queued' | 'processing' | 'completed' | 'failed';
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -271,26 +273,40 @@ export const cmsApi = {
|
||||
deleteWebhook: (id: string): Promise<void> => apiFetch(`/webhooks/${id}`, { method: 'DELETE' }),
|
||||
|
||||
// Assets
|
||||
uploadAsset: (file: File): Promise<UploadResponse> => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
uploadAsset: (file: File, onProgress?: (pct: number) => void): Promise<UploadResponse> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const token = getToken();
|
||||
const selectedOrgId = getSelectedOrgId();
|
||||
const headers: Record<string, string> = {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
||||
...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
|
||||
};
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', `${API_BASE_URL}/assets/upload`);
|
||||
|
||||
// Note: We don't set 'Content-Type' for multipart/form-data.
|
||||
// The browser will set it automatically with the correct boundary.
|
||||
return fetch(`${API_BASE_URL}/assets/upload`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: formData,
|
||||
}).then(res => {
|
||||
if (!res.ok) return res.json().then(err => Promise.reject(new Error(err.message || 'Upload failed')));
|
||||
return res.json();
|
||||
const token = getToken();
|
||||
if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
|
||||
const selectedOrgId = getSelectedOrgId();
|
||||
if (selectedOrgId) xhr.setRequestHeader('X-Organization-Id', selectedOrgId);
|
||||
|
||||
xhr.upload.onprogress = (event) => {
|
||||
if (event.lengthComputable && onProgress) {
|
||||
const percentComplete = Math.round((event.loaded / event.total) * 100);
|
||||
onProgress(percentComplete);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve(JSON.parse(xhr.responseText));
|
||||
} else {
|
||||
let msg = 'Upload failed';
|
||||
try {
|
||||
msg = JSON.parse(xhr.responseText).message || msg;
|
||||
} catch { }
|
||||
reject(new Error(msg));
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = () => reject(new Error('Network error'));
|
||||
xhr.send(formData);
|
||||
});
|
||||
},
|
||||
// Organizations Branding
|
||||
|
||||
Reference in New Issue
Block a user