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

2026-01-15 18:02:04 -03:00
parent daeda7e905
commit 663950aa0e
26 changed files with 933 additions and 302 deletions
@@ -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"