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();
|
||||
|
||||
Reference in New Issue
Block a user