feat: add collaborative document functionality for lessons
- Create migration scripts for lesson_collaborative_docs table in both cms-service and lms-service. - Implement CollaborativeDocEditor component for real-time editing of collaborative documents. - Add LessonCollaborativeDocPage for instructors to view and manage collaborative documents. - Include conflict resolution handling in the editor. - Enhance UI with status indicators and formatting options for the document editor. Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+11
-3
@@ -128,7 +128,15 @@
|
||||
- [x] **Studio**: página `/courses/[id]/study-rooms` — crear sala, lista con estado, botones Iniciar/Unirse (BBB en nueva pestaña)/Finalizar/Eliminar, instrucciones de configuración integradas. Tab "Salas de Estudio" en `CourseEditorLayout`.
|
||||
- [x] **Experience**: página `/courses/[id]/study-rooms` con lista de salas activas/programadas y botón "Unirse". Acceso directo desde la página del curso como tarjeta de navegación.
|
||||
|
||||
### Fase 39: Grabaciones BBB + OAuth2 AGS ✅
|
||||
- [x] **Grabaciones BBB**: `GET /courses/{id}/study-rooms/{room_id}/recordings` — llama a `getRecordings` de la API BBB y parsea XML de respuesta. Struct `BbbRecording` con `record_id`, `name`, `state`, `start_time`, `end_time`, `participants`, `playback_url`, `duration_minutes`.
|
||||
- [x] **Studio study-rooms**: botón "Grabaciones" en salas finalizadas — panel expandible con lista de grabaciones + links de reproducción.
|
||||
- [x] **Experience study-rooms**: sección de grabaciones en salas finalizadas con botón toggle y lista de grabaciones con links.
|
||||
- [x] **OAuth2 AGS** (`handlers_lti_consumer.rs`): `POST /lti/tools/{tool_id}/ags-score` — token caching en tabla `lti_ags_tokens`, client_credentials grant, POST de scores al `ags_lineitem_url` del LMS externo. Modo dual: HMAC legacy sigue funcionando.
|
||||
- [x] **Migración AGS**: ALTER TABLE `lti_external_tools` agrega campos `ags_client_id`, `ags_client_secret`, `ags_token_url`, `ags_lineitem_url`. CREATE TABLE `lti_ags_tokens`.
|
||||
- [x] **Studio lti-tools**: sección AGS colapsable en el formulario de creación — 4 campos opcionales (client_id, client_secret, token_url, lineitem_url).
|
||||
- [x] **api.ts**: Interface `BbbRecording`, `getStudyRoomRecordings()` en Studio y Experience. Campos AGS en `LtiExternalTool`, `CreateLtiExternalToolPayload`, `UpdateLtiExternalToolPayload`.
|
||||
|
||||
**Próximas Prioridades**:
|
||||
1. **OAuth2 AGS** — estándar IMS para passback de calificaciones (reemplaza HMAC custom).
|
||||
2. **Edición Multiusuario** — documentos compartidos tipo Google Docs en lecciones.
|
||||
3. **Grabaciones BBB** — listar grabaciones de salas finalizadas desde la API de BBB.
|
||||
1. **Edición Multiusuario** — documentos compartidos tipo Google Docs en lecciones.
|
||||
2. **Notificaciones en tiempo real** — WebSocket o SSE para alertas de actividad del curso.
|
||||
@@ -0,0 +1,15 @@
|
||||
-- Fase 40: Documentos Colaborativos (cms-service mirror)
|
||||
CREATE TABLE IF NOT EXISTS lesson_collaborative_docs (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
lesson_id UUID NOT NULL,
|
||||
organization_id UUID NOT NULL,
|
||||
course_id UUID NOT NULL,
|
||||
content TEXT NOT NULL DEFAULT '',
|
||||
revision BIGINT NOT NULL DEFAULT 0,
|
||||
last_modified_by UUID,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE UNIQUE INDEX IF NOT EXISTS idx_collab_docs_lesson
|
||||
ON lesson_collaborative_docs (lesson_id, organization_id);
|
||||
@@ -0,0 +1,18 @@
|
||||
-- Fase 40: Documentos Colaborativos en Tiempo Real
|
||||
CREATE TABLE IF NOT EXISTS lesson_collaborative_docs (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
lesson_id UUID NOT NULL,
|
||||
organization_id UUID NOT NULL,
|
||||
course_id UUID NOT NULL,
|
||||
content TEXT NOT NULL DEFAULT '',
|
||||
revision BIGINT NOT NULL DEFAULT 0,
|
||||
last_modified_by UUID,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE UNIQUE INDEX IF NOT EXISTS idx_collab_docs_lesson
|
||||
ON lesson_collaborative_docs (lesson_id, organization_id);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_collab_docs_org
|
||||
ON lesson_collaborative_docs (organization_id);
|
||||
@@ -4782,3 +4782,276 @@ pub async fn stream_lesson_collaborative_canvas(
|
||||
Ok(Sse::new(ReceiverStream::new(rx))
|
||||
.keep_alive(KeepAlive::default()))
|
||||
}
|
||||
|
||||
// ─── Documentos Colaborativos en Tiempo Real (Fase 40) ───────────────────────
|
||||
|
||||
#[derive(Debug, Serialize)]
|
||||
pub struct CollaborativeDocResponse {
|
||||
pub lesson_id: Uuid,
|
||||
pub organization_id: Uuid,
|
||||
pub content: String,
|
||||
pub revision: i64,
|
||||
pub last_modified_by: Option<Uuid>,
|
||||
pub updated_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
pub struct UpdateCollaborativeDocPayload {
|
||||
pub content: String,
|
||||
pub base_revision: i64,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize)]
|
||||
pub struct UpdateCollaborativeDocResponse {
|
||||
pub lesson_id: Uuid,
|
||||
pub revision: i64,
|
||||
pub conflict: bool,
|
||||
pub server_content: Option<String>,
|
||||
pub server_revision: Option<i64>,
|
||||
}
|
||||
|
||||
/// GET /lessons/{id}/collaborative-doc
|
||||
pub async fn get_lesson_collaborative_doc(
|
||||
Org(org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
) -> Result<Json<CollaborativeDocResponse>, StatusCode> {
|
||||
let lesson_exists = sqlx::query_scalar::<_, bool>(
|
||||
"SELECT EXISTS(SELECT 1 FROM lessons WHERE id = $1 AND organization_id = $2)",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
if !lesson_exists {
|
||||
return Err(StatusCode::NOT_FOUND);
|
||||
}
|
||||
|
||||
#[derive(sqlx::FromRow)]
|
||||
struct DocRow {
|
||||
content: String,
|
||||
revision: i64,
|
||||
last_modified_by: Option<Uuid>,
|
||||
updated_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
let row = sqlx::query_as::<_, DocRow>(
|
||||
"SELECT content, revision, last_modified_by, updated_at FROM lesson_collaborative_docs WHERE lesson_id = $1 AND organization_id = $2",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_optional(&pool)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
let doc = row.unwrap_or(DocRow {
|
||||
content: String::new(),
|
||||
revision: 0,
|
||||
last_modified_by: None,
|
||||
updated_at: Utc::now(),
|
||||
});
|
||||
|
||||
Ok(Json(CollaborativeDocResponse {
|
||||
lesson_id: id,
|
||||
organization_id: org_ctx.id,
|
||||
content: doc.content,
|
||||
revision: doc.revision,
|
||||
last_modified_by: doc.last_modified_by,
|
||||
updated_at: doc.updated_at,
|
||||
}))
|
||||
}
|
||||
|
||||
/// PUT /lessons/{id}/collaborative-doc
|
||||
pub async fn update_lesson_collaborative_doc(
|
||||
Org(org_ctx): Org,
|
||||
claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
Json(payload): Json<UpdateCollaborativeDocPayload>,
|
||||
) -> Result<Json<UpdateCollaborativeDocResponse>, (StatusCode, String)> {
|
||||
let lesson_exists = sqlx::query_scalar::<_, bool>(
|
||||
"SELECT EXISTS(SELECT 1 FROM lessons WHERE id = $1 AND organization_id = $2)",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
if !lesson_exists {
|
||||
return Err((StatusCode::NOT_FOUND, "Lección no encontrada".into()));
|
||||
}
|
||||
|
||||
let user_id: Uuid = claims.sub.parse().map_err(|_| (StatusCode::UNAUTHORIZED, "Token inválido".into()))?;
|
||||
|
||||
// Intento de actualización optimista
|
||||
let rows_updated = sqlx::query(
|
||||
r#"
|
||||
UPDATE lesson_collaborative_docs
|
||||
SET content = $1, revision = revision + 1, last_modified_by = $2, updated_at = NOW()
|
||||
WHERE lesson_id = $3 AND organization_id = $4 AND revision = $5
|
||||
"#,
|
||||
)
|
||||
.bind(&payload.content)
|
||||
.bind(user_id)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.bind(payload.base_revision)
|
||||
.execute(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
|
||||
.rows_affected();
|
||||
|
||||
if rows_updated == 1 {
|
||||
return Ok(Json(UpdateCollaborativeDocResponse {
|
||||
lesson_id: id,
|
||||
revision: payload.base_revision + 1,
|
||||
conflict: false,
|
||||
server_content: None,
|
||||
server_revision: None,
|
||||
}));
|
||||
}
|
||||
|
||||
// Verificar si existe (puede ser primer guardado con revision=0)
|
||||
let existing = sqlx::query_scalar::<_, i64>(
|
||||
"SELECT revision FROM lesson_collaborative_docs WHERE lesson_id = $1 AND organization_id = $2",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_optional(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
if existing.is_none() && payload.base_revision == 0 {
|
||||
// Primer guardado
|
||||
let course_id = sqlx::query_scalar::<_, Uuid>(
|
||||
"SELECT course_id FROM lessons WHERE id = $1",
|
||||
)
|
||||
.bind(id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
sqlx::query(
|
||||
r#"
|
||||
INSERT INTO lesson_collaborative_docs (lesson_id, organization_id, course_id, content, revision, last_modified_by)
|
||||
VALUES ($1, $2, $3, $4, 1, $5)
|
||||
"#,
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.bind(course_id)
|
||||
.bind(&payload.content)
|
||||
.bind(user_id)
|
||||
.execute(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
return Ok(Json(UpdateCollaborativeDocResponse {
|
||||
lesson_id: id,
|
||||
revision: 1,
|
||||
conflict: false,
|
||||
server_content: None,
|
||||
server_revision: None,
|
||||
}));
|
||||
}
|
||||
|
||||
// Conflicto — devolver versión del servidor
|
||||
#[derive(sqlx::FromRow)]
|
||||
struct ConflictRow { content: String, revision: i64 }
|
||||
let server = sqlx::query_as::<_, ConflictRow>(
|
||||
"SELECT content, revision FROM lesson_collaborative_docs WHERE lesson_id = $1 AND organization_id = $2",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_optional(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
let (sc, sr) = server.map(|r| (r.content, r.revision)).unwrap_or_default();
|
||||
|
||||
Err((
|
||||
StatusCode::CONFLICT,
|
||||
serde_json::json!({
|
||||
"conflict": true,
|
||||
"lesson_id": id,
|
||||
"server_content": sc,
|
||||
"server_revision": sr,
|
||||
}).to_string(),
|
||||
))
|
||||
}
|
||||
|
||||
/// GET /lessons/{id}/collaborative-doc/stream (SSE)
|
||||
pub async fn stream_lesson_collaborative_doc(
|
||||
Org(org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
) -> Result<impl IntoResponse, StatusCode> {
|
||||
use std::convert::Infallible;
|
||||
use tokio_stream::wrappers::ReceiverStream;
|
||||
|
||||
let lesson_exists = sqlx::query_scalar::<_, bool>(
|
||||
"SELECT EXISTS(SELECT 1 FROM lessons WHERE id = $1 AND organization_id = $2)",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
if !lesson_exists {
|
||||
return Err(StatusCode::NOT_FOUND);
|
||||
}
|
||||
|
||||
let (tx, rx) = tokio::sync::mpsc::channel::<Result<Event, Infallible>>(16);
|
||||
|
||||
tokio::spawn(async move {
|
||||
#[derive(sqlx::FromRow)]
|
||||
struct DocRow {
|
||||
content: String,
|
||||
revision: i64,
|
||||
last_modified_by: Option<Uuid>,
|
||||
updated_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
let mut last_revision: i64 = -1;
|
||||
|
||||
loop {
|
||||
tokio::time::sleep(std::time::Duration::from_secs(2)).await;
|
||||
|
||||
let result = sqlx::query_as::<_, DocRow>(
|
||||
"SELECT content, revision, last_modified_by, updated_at FROM lesson_collaborative_docs WHERE lesson_id = $1 AND organization_id = $2",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_optional(&pool)
|
||||
.await;
|
||||
|
||||
match result {
|
||||
Ok(Some(row)) if row.revision != last_revision => {
|
||||
last_revision = row.revision;
|
||||
let payload = serde_json::json!({
|
||||
"lesson_id": id,
|
||||
"content": row.content,
|
||||
"revision": row.revision,
|
||||
"last_modified_by": row.last_modified_by,
|
||||
"updated_at": row.updated_at.to_rfc3339(),
|
||||
});
|
||||
if tx.send(Ok(Event::default().data(payload.to_string()))).await.is_err() {
|
||||
break;
|
||||
}
|
||||
}
|
||||
Ok(_) => {}
|
||||
Err(e) => {
|
||||
tracing::error!("stream_lesson_collaborative_doc: poll error: {}", e);
|
||||
let _ = tx.send(Ok(Event::default().event("error").data("poll_error"))).await;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Ok(Sse::new(ReceiverStream::new(rx))
|
||||
.keep_alive(KeepAlive::default()))
|
||||
}
|
||||
|
||||
@@ -173,6 +173,15 @@ async fn main() {
|
||||
"/lessons/{id}/collaborative-canvas/stream",
|
||||
get(handlers::stream_lesson_collaborative_canvas),
|
||||
)
|
||||
.route(
|
||||
"/lessons/{id}/collaborative-doc",
|
||||
get(handlers::get_lesson_collaborative_doc)
|
||||
.put(handlers::update_lesson_collaborative_doc),
|
||||
)
|
||||
.route(
|
||||
"/lessons/{id}/collaborative-doc/stream",
|
||||
get(handlers::stream_lesson_collaborative_doc),
|
||||
)
|
||||
.route("/lessons/{id}/bookmark", post(handlers::toggle_bookmark))
|
||||
.route("/bookmarks", get(handlers::get_user_bookmarks))
|
||||
.route("/grades", post(handlers::submit_lesson_score))
|
||||
|
||||
@@ -29,6 +29,7 @@ import AITutor from "@/components/AITutor";
|
||||
import LessonLockedView from "@/components/LessonLockedView";
|
||||
import StudentNotes from "@/components/StudentNotes";
|
||||
import CollaborativeWhiteboard from "@/components/CollaborativeWhiteboard";
|
||||
import CollaborativeDocEditor from "@/components/CollaborativeDocEditor";
|
||||
import { ListMusic, StickyNote } from "lucide-react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
export default function LessonPlayerPage({ params }: { params: { id: string, lessonId: string } }) {
|
||||
@@ -631,6 +632,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
<div className="pt-12 border-t border-black/5 dark:border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<CollaborativeWhiteboard lessonId={params.lessonId} />
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-black/5 dark:border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-black/40 dark:text-white/40">Documento Colaborativo</h3>
|
||||
<p className="text-[11px] text-black/40 dark:text-white/40 mt-0.5">Edición compartida en tiempo real con tu grupo</p>
|
||||
</div>
|
||||
<CollaborativeDocEditor lessonId={params.lessonId} />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { lmsApi, StudyRoom } from "@/lib/api";
|
||||
import { Video, Users, Clock, ExternalLink, ArrowLeft, RefreshCw } from "lucide-react";
|
||||
import { lmsApi, StudyRoom, BbbRecording } from "@/lib/api";
|
||||
import { Video, Users, Clock, ExternalLink, ArrowLeft, RefreshCw, Film, ChevronDown, ChevronRight } from "lucide-react";
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
pending: "Programada",
|
||||
@@ -23,6 +23,9 @@ export default function StudyRoomsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [joiningId, setJoiningId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [recordings, setRecordings] = useState<Record<string, BbbRecording[]>>({});
|
||||
const [loadingRec, setLoadingRec] = useState<Record<string, boolean>>({});
|
||||
const [expandedRec, setExpandedRec] = useState<Record<string, boolean>>({});
|
||||
|
||||
const loadRooms = useCallback(async () => {
|
||||
setLoading(true);
|
||||
@@ -58,6 +61,22 @@ export default function StudyRoomsPage() {
|
||||
const activeRooms = rooms.filter((r) => r.status !== "ended");
|
||||
const endedRooms = rooms.filter((r) => r.status === "ended");
|
||||
|
||||
const toggleRecordings = async (room: StudyRoom) => {
|
||||
const isExpanded = expandedRec[room.id];
|
||||
setExpandedRec((prev) => ({ ...prev, [room.id]: !isExpanded }));
|
||||
if (!isExpanded && !recordings[room.id]) {
|
||||
setLoadingRec((prev) => ({ ...prev, [room.id]: true }));
|
||||
try {
|
||||
const recs = await lmsApi.getStudyRoomRecordings(id, room.id);
|
||||
setRecordings((prev) => ({ ...prev, [room.id]: recs }));
|
||||
} catch {
|
||||
setRecordings((prev) => ({ ...prev, [room.id]: [] }));
|
||||
} finally {
|
||||
setLoadingRec((prev) => ({ ...prev, [room.id]: false }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50 dark:bg-zinc-950 px-4 py-8 max-w-3xl mx-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
@@ -156,21 +175,57 @@ export default function StudyRoomsPage() {
|
||||
Salas finalizadas
|
||||
</h2>
|
||||
{endedRooms.map((room) => (
|
||||
<div
|
||||
key={room.id}
|
||||
className="rounded-xl border border-black/5 dark:border-white/5 bg-white/50 dark:bg-white/5 px-4 py-3 flex items-center justify-between gap-3 opacity-60"
|
||||
>
|
||||
<div>
|
||||
<span className="text-sm font-medium">{room.title}</span>
|
||||
{room.ended_at && (
|
||||
<span className="ml-2 text-[11px] text-black/40 dark:text-white/40">
|
||||
Finalizada {new Date(room.ended_at).toLocaleDateString()}
|
||||
<div key={room.id} className="rounded-xl border border-black/5 dark:border-white/5 bg-white/50 dark:bg-white/5">
|
||||
<div className="px-4 py-3 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<span className="text-sm font-medium">{room.title}</span>
|
||||
{room.ended_at && (
|
||||
<span className="ml-2 text-[11px] text-black/40 dark:text-white/40">
|
||||
Finalizada {new Date(room.ended_at).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => void toggleRecordings(room)}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 rounded-lg border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-xs font-semibold hover:bg-blue-100"
|
||||
>
|
||||
{expandedRec[room.id] ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
<Film className="w-3 h-3" /> Grabaciones
|
||||
</button>
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${STATUS_COLOR.ended}`}>
|
||||
{STATUS_LABEL.ended}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${STATUS_COLOR.ended}`}>
|
||||
{STATUS_LABEL.ended}
|
||||
</span>
|
||||
{expandedRec[room.id] && (
|
||||
<div className="px-4 pb-3">
|
||||
{loadingRec[room.id] ? (
|
||||
<p className="text-xs text-black/50 dark:text-white/50">Cargando grabaciones…</p>
|
||||
) : recordings[room.id]?.length ? (
|
||||
<div className="space-y-2">
|
||||
{recordings[room.id].map((rec) => (
|
||||
<div key={rec.record_id} className="flex items-center justify-between gap-3 text-xs bg-gray-50 dark:bg-white/5 rounded-lg px-3 py-2">
|
||||
<div>
|
||||
<span className="font-semibold">{rec.name}</span>
|
||||
<span className="ml-2 text-black/40 dark:text-white/40">{rec.duration_minutes} min</span>
|
||||
</div>
|
||||
<a
|
||||
href={rec.playback_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline shrink-0"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" /> Ver grabación
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-black/40 dark:text-white/40">No hay grabaciones disponibles.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,266 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { lmsApi, getLmsApiUrl, CollaborativeDoc, UpdateCollaborativeDocResponse } from "@/lib/api";
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
Save,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
|
||||
type ConflictInfo = {
|
||||
localContent: string;
|
||||
serverContent: string;
|
||||
serverRevision: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
lessonId: string;
|
||||
};
|
||||
|
||||
export default function CollaborativeDocEditor({ lessonId }: Props) {
|
||||
const [content, setContent] = useState("");
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [status, setStatus] = useState<"idle" | "saved" | "conflict" | "error">("idle");
|
||||
const [conflict, setConflict] = useState<ConflictInfo | null>(null);
|
||||
const [activeEditors, setActiveEditors] = useState(0);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const sseRef = useRef<EventSource | null>(null);
|
||||
const localDirtyRef = useRef(false);
|
||||
const revisionRef = useRef(0);
|
||||
const contentRef = useRef("");
|
||||
|
||||
// Cargar documento inicial
|
||||
useEffect(() => {
|
||||
void (async () => {
|
||||
try {
|
||||
const doc: CollaborativeDoc = await lmsApi.getLessonCollaborativeDoc(lessonId);
|
||||
setContent(doc.content);
|
||||
setRevision(doc.revision);
|
||||
revisionRef.current = doc.revision;
|
||||
contentRef.current = doc.content;
|
||||
} catch {
|
||||
setStatus("error");
|
||||
}
|
||||
})();
|
||||
}, [lessonId]);
|
||||
|
||||
// SSE: escuchar cambios remotos
|
||||
useEffect(() => {
|
||||
const token = typeof window !== "undefined"
|
||||
? localStorage.getItem("lms_token") ?? sessionStorage.getItem("lms_token") ?? ""
|
||||
: "";
|
||||
const baseUrl = getLmsApiUrl();
|
||||
const url = `${baseUrl}/lessons/${lessonId}/collaborative-doc/stream?preview_token=${encodeURIComponent(token)}`;
|
||||
|
||||
const es = new EventSource(url);
|
||||
sseRef.current = es;
|
||||
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data as string) as {
|
||||
content: string;
|
||||
revision: number;
|
||||
};
|
||||
// Solo actualizar si no tenemos cambios locales pendientes
|
||||
if (!localDirtyRef.current && data.revision !== revisionRef.current) {
|
||||
setContent(data.content);
|
||||
setRevision(data.revision);
|
||||
revisionRef.current = data.revision;
|
||||
contentRef.current = data.content;
|
||||
}
|
||||
// Contar "editores activos" como señal de conexión SSE viva
|
||||
setActiveEditors((n) => Math.max(1, n));
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
|
||||
es.onerror = () => {
|
||||
setActiveEditors(0);
|
||||
};
|
||||
|
||||
return () => {
|
||||
es.close();
|
||||
sseRef.current = null;
|
||||
};
|
||||
}, [lessonId]);
|
||||
|
||||
// Guardar con debounce 1.5s
|
||||
const save = useCallback(async (text: string, baseRevision: number) => {
|
||||
setSaving(true);
|
||||
setStatus("idle");
|
||||
try {
|
||||
const res: UpdateCollaborativeDocResponse = await lmsApi.updateLessonCollaborativeDoc(lessonId, {
|
||||
content: text,
|
||||
base_revision: baseRevision,
|
||||
});
|
||||
|
||||
if (res.conflict) {
|
||||
setConflict({
|
||||
localContent: text,
|
||||
serverContent: res.server_content ?? "",
|
||||
serverRevision: res.server_revision ?? baseRevision,
|
||||
});
|
||||
setStatus("conflict");
|
||||
} else {
|
||||
setRevision(res.revision);
|
||||
revisionRef.current = res.revision;
|
||||
contentRef.current = text;
|
||||
localDirtyRef.current = false;
|
||||
setStatus("saved");
|
||||
setTimeout(() => setStatus("idle"), 2000);
|
||||
}
|
||||
} catch {
|
||||
setStatus("error");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [lessonId]);
|
||||
|
||||
const handleChange = (value: string) => {
|
||||
setContent(value);
|
||||
contentRef.current = value;
|
||||
localDirtyRef.current = true;
|
||||
setStatus("idle");
|
||||
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
void save(contentRef.current, revisionRef.current);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
// Resolución de conflictos
|
||||
const resolveKeepMine = () => {
|
||||
if (!conflict) return;
|
||||
setConflict(null);
|
||||
setStatus("idle");
|
||||
// Forzar guardado con la revisión del servidor (sobreescribir)
|
||||
void save(conflict.localContent, conflict.serverRevision);
|
||||
};
|
||||
|
||||
const resolveKeepServer = () => {
|
||||
if (!conflict) return;
|
||||
setContent(conflict.serverContent);
|
||||
setRevision(conflict.serverRevision);
|
||||
revisionRef.current = conflict.serverRevision;
|
||||
contentRef.current = conflict.serverContent;
|
||||
localDirtyRef.current = false;
|
||||
setConflict(null);
|
||||
setStatus("idle");
|
||||
};
|
||||
|
||||
// Toolbar: aplicar formato HTML básico via execCommand (compatible con contenteditable)
|
||||
// Para mantener simpleza y no depender de librerías externas usamos un <textarea>
|
||||
// con soporte de Markdown ligero renderizado al vuelo.
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
{/* Barra de estado */}
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<div className="flex items-center gap-2 text-xs text-black/50 dark:text-white/40">
|
||||
<Users className="w-3 h-3" />
|
||||
<span>{activeEditors > 0 ? "Conexión en vivo" : "Sin conexión SSE"}</span>
|
||||
<span className="opacity-50">· Rev. {revision}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{saving && <Loader2 className="w-3 h-3 animate-spin text-blue-500" />}
|
||||
{status === "saved" && <CheckCircle className="w-3 h-3 text-green-500" />}
|
||||
{status === "conflict" && <AlertTriangle className="w-3 h-3 text-amber-500" />}
|
||||
{status === "error" && <AlertTriangle className="w-3 h-3 text-red-500" />}
|
||||
{saving && <span className="text-blue-500">Guardando…</span>}
|
||||
{status === "saved" && <span className="text-green-500">Guardado</span>}
|
||||
{status === "conflict" && <span className="text-amber-500">Conflicto detectado</span>}
|
||||
{status === "error" && <span className="text-red-500">Error al guardar</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toolbar de formato */}
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 text-xs font-mono">
|
||||
{[
|
||||
{ label: "B", title: "Negrita: **texto**", insert: "**texto**" },
|
||||
{ label: "I", title: "Cursiva: _texto_", insert: "_texto_" },
|
||||
{ label: "H1", title: "Título: # Título", insert: "\n# Título\n" },
|
||||
{ label: "H2", title: "Subtítulo: ## Subtítulo", insert: "\n## Subtítulo\n" },
|
||||
{ label: "• Lista", title: "Lista: - ítem", insert: "\n- ítem\n" },
|
||||
{ label: "1. Lista", title: "Lista ordenada: 1. ítem", insert: "\n1. ítem\n" },
|
||||
{ label: "---", title: "Separador", insert: "\n---\n" },
|
||||
].map((btn) => (
|
||||
<button
|
||||
key={btn.label}
|
||||
title={btn.title}
|
||||
className="px-2 py-0.5 rounded hover:bg-black/10 dark:hover:bg-white/10"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
const newContent = contentRef.current + btn.insert;
|
||||
setContent(newContent);
|
||||
handleChange(newContent);
|
||||
}}
|
||||
>
|
||||
{btn.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="ml-auto">
|
||||
<button
|
||||
title="Guardar ahora"
|
||||
className="px-2 py-0.5 rounded hover:bg-black/10 dark:hover:bg-white/10 flex items-center gap-1"
|
||||
onClick={() => void save(contentRef.current, revisionRef.current)}
|
||||
>
|
||||
<Save className="w-3 h-3" /> Guardar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Área de edición */}
|
||||
<textarea
|
||||
className="w-full min-h-[320px] rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-4 py-3 text-sm font-mono leading-relaxed resize-y focus:outline-none focus:ring-2 focus:ring-blue-500/40"
|
||||
value={content}
|
||||
onChange={(e) => handleChange(e.target.value)}
|
||||
placeholder="Empieza a escribir… Los cambios se sincronizan automáticamente con el grupo."
|
||||
spellCheck
|
||||
/>
|
||||
|
||||
{/* Panel de conflicto */}
|
||||
{conflict && (
|
||||
<div className="rounded-xl border border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-black text-amber-800 dark:text-amber-300">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Conflicto de edición
|
||||
</div>
|
||||
<p className="text-xs text-amber-700 dark:text-amber-400">
|
||||
Otro usuario guardó cambios mientras editabas. ¿Qué versión deseas conservar?
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-3 text-xs">
|
||||
<div>
|
||||
<div className="font-semibold mb-1 text-amber-700 dark:text-amber-300">Tu versión</div>
|
||||
<pre className="rounded-lg bg-white dark:bg-black/30 p-2 overflow-auto max-h-32 whitespace-pre-wrap text-[11px]">
|
||||
{conflict.localContent.slice(0, 300)}{conflict.localContent.length > 300 ? "…" : ""}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold mb-1 text-amber-700 dark:text-amber-300">Versión del servidor (Rev. {conflict.serverRevision})</div>
|
||||
<pre className="rounded-lg bg-white dark:bg-black/30 p-2 overflow-auto max-h-32 whitespace-pre-wrap text-[11px]">
|
||||
{conflict.serverContent.slice(0, 300)}{conflict.serverContent.length > 300 ? "…" : ""}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={resolveKeepMine}
|
||||
className="px-3 py-1.5 rounded-lg bg-amber-600 text-white text-xs font-semibold hover:bg-amber-700"
|
||||
>
|
||||
Conservar la mía
|
||||
</button>
|
||||
<button
|
||||
onClick={resolveKeepServer}
|
||||
className="px-3 py-1.5 rounded-lg border border-black/10 dark:border-white/10 text-xs font-semibold hover:bg-black/5 dark:hover:bg-white/10"
|
||||
>
|
||||
Usar la del servidor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1347,6 +1347,24 @@ export const lmsApi = {
|
||||
joinStudyRoom(courseId: string, roomId: string): Promise<{ room_id: string; join_url: string }> {
|
||||
return apiFetch(`/courses/${courseId}/study-rooms/${roomId}/join`, { method: 'POST' });
|
||||
},
|
||||
|
||||
getStudyRoomRecordings(courseId: string, roomId: string): Promise<BbbRecording[]> {
|
||||
return apiFetch(`/courses/${courseId}/study-rooms/${roomId}/recordings`);
|
||||
},
|
||||
|
||||
getLessonCollaborativeDoc(lessonId: string): Promise<CollaborativeDoc> {
|
||||
return apiFetch(`/lessons/${lessonId}/collaborative-doc`);
|
||||
},
|
||||
|
||||
updateLessonCollaborativeDoc(
|
||||
lessonId: string,
|
||||
payload: { content: string; base_revision: number }
|
||||
): Promise<UpdateCollaborativeDocResponse> {
|
||||
return apiFetch(`/lessons/${lessonId}/collaborative-doc`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export interface StudyRoom {
|
||||
@@ -1366,3 +1384,34 @@ export interface StudyRoom {
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface BbbRecording {
|
||||
record_id: string;
|
||||
meeting_id: string;
|
||||
name: string;
|
||||
state: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
participants: number;
|
||||
playback_url: string;
|
||||
duration_minutes: number;
|
||||
}
|
||||
|
||||
// ─── Documentos Colaborativos (Fase 40) ──────────────────────────────────────
|
||||
|
||||
export interface CollaborativeDoc {
|
||||
lesson_id: string;
|
||||
organization_id: string;
|
||||
content: string;
|
||||
revision: number;
|
||||
last_modified_by: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface UpdateCollaborativeDocResponse {
|
||||
lesson_id: string;
|
||||
revision: number;
|
||||
conflict: boolean;
|
||||
server_content?: string;
|
||||
server_revision?: number;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { lmsApi, getLessonCollaborativeDoc, CollaborativeDoc } from "@/lib/api";
|
||||
import {
|
||||
ArrowLeft,
|
||||
FileText,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
Eye,
|
||||
Clock,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LessonCollaborativeDocPage() {
|
||||
const { id: courseId, lessonId } = useParams() as { id: string; lessonId: string };
|
||||
const router = useRouter();
|
||||
const [doc, setDoc] = useState<CollaborativeDoc | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [clearing, setClearing] = useState(false);
|
||||
const [cleared, setCleared] = useState(false);
|
||||
|
||||
const loadDoc = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await getLessonCollaborativeDoc(lessonId);
|
||||
setDoc(data);
|
||||
} catch (e) {
|
||||
// El doc puede no existir aún (revision 0)
|
||||
setDoc({ lesson_id: lessonId, organization_id: "", content: "", revision: 0, last_modified_by: null, updated_at: new Date().toISOString() });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [lessonId]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadDoc();
|
||||
}, [loadDoc]);
|
||||
|
||||
const clearDoc = async () => {
|
||||
const ok = confirm("¿Borrar el contenido del documento colaborativo? Los estudiantes perderán todo el texto.");
|
||||
if (!ok) return;
|
||||
setClearing(true);
|
||||
try {
|
||||
await lmsApi.updateLessonCollaborativeDoc(lessonId, {
|
||||
content: "",
|
||||
base_revision: doc?.revision ?? 0,
|
||||
});
|
||||
setCleared(true);
|
||||
setDoc((prev) => prev ? { ...prev, content: "", revision: (prev.revision || 0) + 1 } : prev);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "No se pudo borrar el documento");
|
||||
} finally {
|
||||
setClearing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const wordCount = (doc?.content ?? "").trim().split(/\s+/).filter(Boolean).length;
|
||||
const charCount = (doc?.content ?? "").length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-zinc-950 px-4 py-8 max-w-3xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-lg font-black flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" /> Documento Colaborativo
|
||||
</h1>
|
||||
<p className="text-xs text-black/50 dark:text-white/50">
|
||||
Vista de instructor — lección <span className="font-mono">{lessonId.slice(0, 8)}…</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => void loadDoc()}
|
||||
className="ml-auto p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
|
||||
title="Recargar"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{cleared && (
|
||||
<div className="mb-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 px-4 py-3 text-sm text-green-700 dark:text-green-300">
|
||||
Documento borrado correctamente.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadatos */}
|
||||
<section className="rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 p-5 mb-4 space-y-3">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
|
||||
<div>
|
||||
<div className="text-black/40 dark:text-white/40 mb-0.5">Revisión</div>
|
||||
<div className="font-black text-lg">{doc?.revision ?? 0}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-black/40 dark:text-white/40 mb-0.5">Palabras</div>
|
||||
<div className="font-black text-lg">{wordCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-black/40 dark:text-white/40 mb-0.5">Caracteres</div>
|
||||
<div className="font-black text-lg">{charCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-black/40 dark:text-white/40 mb-0.5">Última edición</div>
|
||||
<div className="font-semibold">
|
||||
{doc?.updated_at ? new Date(doc.updated_at).toLocaleString() : "—"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{doc?.last_modified_by && (
|
||||
<div className="flex items-center gap-1 text-xs text-black/50 dark:text-white/40">
|
||||
<User className="w-3 h-3" />
|
||||
Último editor: <span className="font-mono">{doc.last_modified_by}</span>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Vista previa del contenido */}
|
||||
<section className="rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 p-5 mb-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-xs font-black uppercase tracking-wider text-black/40 dark:text-white/40 flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" /> Contenido actual
|
||||
</h2>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-black/20 border-t-black dark:border-white/20 dark:border-t-white" />
|
||||
</div>
|
||||
) : doc?.content ? (
|
||||
<pre className="whitespace-pre-wrap text-sm font-mono leading-relaxed max-h-96 overflow-auto text-black/80 dark:text-white/80">
|
||||
{doc.content}
|
||||
</pre>
|
||||
) : (
|
||||
<p className="text-sm text-black/40 dark:text-white/40 text-center py-8">
|
||||
El documento está vacío — los estudiantes aún no han escrito nada.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Acciones */}
|
||||
<section className="rounded-2xl border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 p-5 flex items-center justify-between gap-4">
|
||||
<div className="text-xs text-black/50 dark:text-white/50">
|
||||
El documento es editable por todos los estudiantes matriculados en el curso en tiempo real via SSE.
|
||||
</div>
|
||||
<button
|
||||
onClick={() => void clearDoc()}
|
||||
disabled={clearing || !doc?.content}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm font-semibold hover:bg-red-100 disabled:opacity-40"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
{clearing ? "Borrando…" : "Borrar documento"}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -19,6 +19,8 @@ import {
|
||||
KeyRound,
|
||||
Copy,
|
||||
CheckCheck,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function CourseLtiToolsPage() {
|
||||
@@ -33,6 +35,7 @@ export default function CourseLtiToolsPage() {
|
||||
shared_secret: "",
|
||||
enabled: true,
|
||||
});
|
||||
const [showAgs, setShowAgs] = useState(false);
|
||||
|
||||
// Rotación de secreto
|
||||
const [rotateModal, setRotateModal] = useState<{ toolId: string; toolName: string } | null>(null);
|
||||
@@ -68,6 +71,7 @@ export default function CourseLtiToolsPage() {
|
||||
const created = await lmsApi.createCourseLtiTool(id, form);
|
||||
setTools((prev) => [...prev, created]);
|
||||
setForm({ name: "", launch_url: "", shared_secret: "", enabled: true });
|
||||
setShowAgs(false);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "No se pudo crear la herramienta");
|
||||
} finally {
|
||||
@@ -221,6 +225,49 @@ export default function CourseLtiToolsPage() {
|
||||
onChange={(e) => setForm((f) => ({ ...f, shared_secret: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
{/* Configuración AGS (OAuth2) — colapsable */}
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAgs((v) => !v)}
|
||||
className="flex items-center gap-1 text-xs text-black/60 dark:text-white/60 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
{showAgs ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
Configuración AGS / OAuth2 (opcional)
|
||||
</button>
|
||||
{showAgs && (
|
||||
<div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
|
||||
<p className="md:col-span-2 text-xs text-blue-700 dark:text-blue-300">
|
||||
LTI AGS (Assignment and Grade Services) — permite passback de notas sin HMAC, usando OAuth2 client_credentials. Endpoint: <span className="font-mono">/lti/tools/{'{tool_id}'}/ags-score</span>
|
||||
</p>
|
||||
<input
|
||||
className="rounded-lg border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-3 py-2 text-sm"
|
||||
placeholder="AGS Client ID"
|
||||
value={form.ags_client_id ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, ags_client_id: e.target.value || undefined }))}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
className="rounded-lg border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-3 py-2 text-sm"
|
||||
placeholder="AGS Client Secret"
|
||||
value={form.ags_client_secret ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, ags_client_secret: e.target.value || undefined }))}
|
||||
/>
|
||||
<input
|
||||
className="rounded-lg border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-3 py-2 text-sm"
|
||||
placeholder="Token URL (https://lms.example/oauth/token)"
|
||||
value={form.ags_token_url ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, ags_token_url: e.target.value || undefined }))}
|
||||
/>
|
||||
<input
|
||||
className="rounded-lg border border-black/10 dark:border-white/10 bg-white dark:bg-zinc-900 px-3 py-2 text-sm"
|
||||
placeholder="LineItem URL (https://lms.example/lineitems/123)"
|
||||
value={form.ags_lineitem_url ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, ags_lineitem_url: e.target.value || undefined }))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => void createTool()}
|
||||
@@ -230,7 +277,7 @@ export default function CourseLtiToolsPage() {
|
||||
{saving ? "Guardando..." : "Crear herramienta"}
|
||||
</button>
|
||||
<p className="text-xs text-black/50 dark:text-white/50">
|
||||
Passback endpoint: <span className="font-mono">/lti/tools/{'{tool_id}'}/grade-passback</span>. Headers requeridos: <span className="font-mono">x-openccb-lti-timestamp</span> y <span className="font-mono">x-openccb-lti-signature</span> (HMAC-SHA256).
|
||||
Passback HMAC: <span className="font-mono">/lti/tools/{'{tool_id}'}/grade-passback</span>. Passback AGS: <span className="font-mono">/lti/tools/{'{tool_id}'}/ags-score</span>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
import { lmsApi, StudyRoom, CreateStudyRoomPayload } from "@/lib/api";
|
||||
import { lmsApi, StudyRoom, BbbRecording, CreateStudyRoomPayload } from "@/lib/api";
|
||||
import {
|
||||
Video,
|
||||
Plus,
|
||||
@@ -14,6 +14,9 @@ import {
|
||||
Clock,
|
||||
Users,
|
||||
ExternalLink,
|
||||
Film,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
@@ -38,6 +41,9 @@ export default function CourseStudyRoomsPage() {
|
||||
description: "",
|
||||
max_participants: 50,
|
||||
});
|
||||
const [recordings, setRecordings] = useState<Record<string, BbbRecording[]>>({});
|
||||
const [loadingRec, setLoadingRec] = useState<Record<string, boolean>>({});
|
||||
const [expandedRec, setExpandedRec] = useState<Record<string, boolean>>({});
|
||||
|
||||
const loadRooms = useCallback(async () => {
|
||||
setLoading(true);
|
||||
@@ -107,6 +113,22 @@ export default function CourseStudyRoomsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRecordings = async (room: StudyRoom) => {
|
||||
const isExpanded = expandedRec[room.id];
|
||||
setExpandedRec((prev) => ({ ...prev, [room.id]: !isExpanded }));
|
||||
if (!isExpanded && !recordings[room.id]) {
|
||||
setLoadingRec((prev) => ({ ...prev, [room.id]: true }));
|
||||
try {
|
||||
const recs = await lmsApi.getStudyRoomRecordings(id, room.id);
|
||||
setRecordings((prev) => ({ ...prev, [room.id]: recs }));
|
||||
} catch {
|
||||
setRecordings((prev) => ({ ...prev, [room.id]: [] }));
|
||||
} finally {
|
||||
setLoadingRec((prev) => ({ ...prev, [room.id]: false }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<CourseEditorLayout
|
||||
activeTab="study-rooms"
|
||||
@@ -175,10 +197,8 @@ export default function CourseStudyRoomsPage() {
|
||||
|
||||
<div className="space-y-3">
|
||||
{rooms.map((room) => (
|
||||
<div
|
||||
key={room.id}
|
||||
className="rounded-xl border border-black/10 dark:border-white/10 px-4 py-3 flex flex-wrap items-center justify-between gap-3"
|
||||
>
|
||||
<div key={room.id} className="rounded-xl border border-black/10 dark:border-white/10">
|
||||
<div className="px-4 py-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-semibold truncate">{room.title}</span>
|
||||
@@ -229,6 +249,14 @@ export default function CourseStudyRoomsPage() {
|
||||
</button>
|
||||
)}
|
||||
{room.status === "ended" && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => void toggleRecordings(room)}
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-xs font-semibold hover:bg-blue-100"
|
||||
>
|
||||
{expandedRec[room.id] ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
<Film className="w-3 h-3" /> Grabaciones
|
||||
</button>
|
||||
<button
|
||||
onClick={() => void deleteRoom(room)}
|
||||
className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
@@ -236,9 +264,41 @@ export default function CourseStudyRoomsPage() {
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-600" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grabaciones BBB dentro del wrapper */}
|
||||
{room.status === "ended" && expandedRec[room.id] && (
|
||||
<div className="px-4 pb-3 rounded-b-xl bg-gray-50 dark:bg-white/5 border-t border-black/5 dark:border-white/5">
|
||||
{loadingRec[room.id] ? (
|
||||
<p className="text-xs text-black/50 dark:text-white/50 pt-3">Cargando grabaciones…</p>
|
||||
) : recordings[room.id]?.length ? (
|
||||
<div className="space-y-2 pt-3">
|
||||
{recordings[room.id].map((rec) => (
|
||||
<div key={rec.record_id} className="flex items-center justify-between gap-3 text-xs">
|
||||
<div>
|
||||
<span className="font-semibold">{rec.name}</span>
|
||||
<span className="ml-2 text-black/40 dark:text-white/40">{rec.duration_minutes} min · {rec.participants} participantes</span>
|
||||
</div>
|
||||
<a
|
||||
href={rec.playback_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline shrink-0"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" /> Ver
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-black/50 dark:text-white/50">No hay grabaciones disponibles para esta sala.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{!loading && rooms.length === 0 && (
|
||||
<p className="text-sm text-black/50 dark:text-white/50">No hay salas creadas para este curso.</p>
|
||||
|
||||
@@ -1853,6 +1853,8 @@ export const lmsApi = {
|
||||
apiFetch(`/courses/${courseId}/study-rooms/${roomId}/end`, { method: 'POST' }, true),
|
||||
deleteStudyRoom: (courseId: string, roomId: string): Promise<void> =>
|
||||
apiFetch(`/courses/${courseId}/study-rooms/${roomId}`, { method: 'DELETE' }, true),
|
||||
getStudyRoomRecordings: (courseId: string, roomId: string): Promise<BbbRecording[]> =>
|
||||
apiFetch(`/courses/${courseId}/study-rooms/${roomId}/recordings`, {}, true),
|
||||
};
|
||||
|
||||
export interface StudyRoom {
|
||||
@@ -1873,6 +1875,18 @@ export interface StudyRoom {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface BbbRecording {
|
||||
record_id: string;
|
||||
meeting_id: string;
|
||||
name: string;
|
||||
state: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
participants: number;
|
||||
playback_url: string;
|
||||
duration_minutes: number;
|
||||
}
|
||||
|
||||
export interface CreateStudyRoomPayload {
|
||||
title: string;
|
||||
description?: string;
|
||||
@@ -2063,6 +2077,10 @@ export interface LtiExternalTool {
|
||||
launch_url: string;
|
||||
enabled: boolean;
|
||||
config: Record<string, unknown>;
|
||||
ags_client_id?: string;
|
||||
ags_client_secret?: string;
|
||||
ags_token_url?: string;
|
||||
ags_lineitem_url?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
@@ -2072,6 +2090,10 @@ export interface CreateLtiExternalToolPayload {
|
||||
shared_secret: string;
|
||||
enabled?: boolean;
|
||||
config?: Record<string, unknown>;
|
||||
ags_client_id?: string;
|
||||
ags_client_secret?: string;
|
||||
ags_token_url?: string;
|
||||
ags_lineitem_url?: string;
|
||||
}
|
||||
export interface UpdateLtiExternalToolPayload {
|
||||
name?: string;
|
||||
@@ -2079,6 +2101,10 @@ export interface UpdateLtiExternalToolPayload {
|
||||
shared_secret?: string;
|
||||
enabled?: boolean;
|
||||
config?: Record<string, unknown>;
|
||||
ags_client_id?: string;
|
||||
ags_client_secret?: string;
|
||||
ags_token_url?: string;
|
||||
ags_lineitem_url?: string;
|
||||
}
|
||||
|
||||
export interface LtiDeepLinkingContentItem {
|
||||
@@ -2326,4 +2352,42 @@ export async function evaluateAudioResponse(
|
||||
|
||||
export async function getCourseAudioResponseStats(courseId: string): Promise<AudioResponseStats> {
|
||||
return apiFetch(`/courses/${courseId}/audio-responses/stats`, { method: 'GET' }, true);
|
||||
}
|
||||
|
||||
// ─── Documentos Colaborativos (Fase 40) ──────────────────────────────────────
|
||||
|
||||
export interface CollaborativeDoc {
|
||||
lesson_id: string;
|
||||
organization_id: string;
|
||||
content: string;
|
||||
revision: number;
|
||||
last_modified_by: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface UpdateCollaborativeDocPayload {
|
||||
content: string;
|
||||
base_revision: number;
|
||||
}
|
||||
|
||||
export interface UpdateCollaborativeDocResponse {
|
||||
lesson_id: string;
|
||||
revision: number;
|
||||
conflict: boolean;
|
||||
server_content?: string;
|
||||
server_revision?: number;
|
||||
}
|
||||
|
||||
export async function getLessonCollaborativeDoc(lessonId: string): Promise<CollaborativeDoc> {
|
||||
return apiFetch(`/lessons/${lessonId}/collaborative-doc`, {}, true);
|
||||
}
|
||||
|
||||
export async function updateLessonCollaborativeDoc(
|
||||
lessonId: string,
|
||||
payload: UpdateCollaborativeDocPayload
|
||||
): Promise<UpdateCollaborativeDocResponse> {
|
||||
return apiFetch(`/lessons/${lessonId}/collaborative-doc`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
}, true);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user