Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce multi-tenancy support with organization-specific data, add interactive transcript functionality, and enhance lesson/course schemas.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-01-15 18:02:04 -03:00
parent daeda7e905
commit 663950aa0e
26 changed files with 933 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/FileUpload.tsx
+51 -19
View File
@@ -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 && (
web/studio/src/components/blocks/MediaBlock.tsx
+2 -1
View File
@@ -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">