feat: Introduce multi-tenancy support with organization-specific data, add interactive transcript functionality, and enhance lesson/course schemas.
This commit is contained in:
@@ -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