{isImageType(f.file_type)
? (url ? 
: 🖼️)
: {MIME_ICONS[f.file_type] || "📄"}}
);
};
const MediaLibrary = ({ session, go }) => {
const route = window.location.hash.slice(1);
const { data: initFiles, loading } = useApi("/library-assets");
const { data: allCourses } = useApi("/courses/list");
const [filesLocal, setFilesLocal] = React.useState(null);
const files = filesLocal ?? initFiles;
const refresh = () => apiFetch("/library-assets").then(r=>r.json()).then(setFilesLocal).catch(()=>{});
const [query, setQuery] = React.useState("");
const [kind, setKind] = React.useState("all"); // all | images | docs
const [courseF, setCourseF] = React.useState(""); // "" = all courses
const [sort, setSort] = React.useState("new"); // new | name | size
// Distinct courses present, for the course filter.
const courses = [];
(files || []).forEach(f => { if (f.course_id != null && !courses.some(c=>c.id===f.course_id)) courses.push({ id:f.course_id, name:f.course_name||`Course ${f.course_id}` }); });
let list = (files || []).filter(f => {
if (kind === "images" && !isImageType(f.file_type)) return false;
if (kind === "docs" && isImageType(f.file_type)) return false;
if (courseF && String(f.course_id) !== String(courseF)) return false;
if (!query) return true;
const s = query.toLowerCase();
return (f.title||"").toLowerCase().includes(s) || (f.public_uid||"").toLowerCase().includes(s) || (f.course_name||"").toLowerCase().includes(s);
});
list = [...list].sort((a,b) =>
sort === "name" ? String(a.title||"").localeCompare(String(b.title||""))
: sort === "size" ? (Number(b.size_bytes)||0) - (Number(a.size_bytes)||0)
: new Date(b.created_at) - new Date(a.created_at));
const openFile = async (f) => {
if (f.course_id == null) return;
const r = await apiFetch(`/library-assets/${f.course_id}/${encodeURIComponent(f.id)}/data`);
if (!r.ok) return;
const d = await r.json();
const bin = atob(d.file_data || ""), bytes = new Uint8Array(bin.length);
for (let i=0;i
{assignFile && (
setAssignFile(null)}>
)}
{showUpload && (
setShowUpload(false)}>
)}
setQuery(e.target.value)} placeholder="Search…"
style={{ width:200, padding:"8px 12px", border:"var(--border-thin)", borderRadius:8, background:"var(--paper-deep)", fontSize:13, color:"var(--ink)", fontFamily:"var(--font-ui)", outline:"none" }}/>
);
};
// ── Text Library ──────────────────────────────────────────────────────────────
// The text counterpart of the Media Library: write a document once, then assign
// it into any course's module. Assigned lessons reference the document rather
// than copying it, so editing here updates every module using it.
//
// Master-detail rather than a modal — the shared Modal is a fixed 420px, which
// is too cramped to actually write in.
const TextLibrary = ({ session, go }) => {
const route = window.location.hash.slice(1);
const { data: initDocs, loading } = useApi("/text-docs");
const { data: allCourses } = useApi("/courses/list");
const [docsLocal, setDocsLocal] = React.useState(null);
const docs = docsLocal ?? initDocs;
const refresh = () => apiFetch("/text-docs").then(r => r.json()).then(setDocsLocal).catch(() => {});
const [query, setQuery] = React.useState("");
const [courseF, setCourseF] = React.useState("");
const [sort, setSort] = React.useState("new");
const [flash, setFlash] = React.useState(null);
const say = (text, type = "ok") => { setFlash({ text, type }); setTimeout(() => setFlash(null), 2600); };
// Courses present among the documents, for the filter.
const courses = [];
(docs || []).forEach(d => { if (d.course_id != null && !courses.some(c => c.id === d.course_id)) courses.push({ id: d.course_id, name: d.course_name || `Course ${d.course_id}` }); });
let list = (docs || []).filter(d => {
if (courseF && String(d.course_id) !== String(courseF)) return false;
if (!query) return true;
const s = query.toLowerCase();
return (d.title || "").toLowerCase().includes(s) || (d.excerpt || "").toLowerCase().includes(s) || (d.course_name || "").toLowerCase().includes(s);
});
list = [...list].sort((a, b) =>
sort === "name" ? String(a.title || "").localeCompare(String(b.title || ""))
: sort === "used" ? (Number(b.usage_count) || 0) - (Number(a.usage_count) || 0)
: new Date(b.updated_at) - new Date(a.updated_at));
// ── Editor (new / edit) ─────────────────────────────────────────────────────
const [editor, setEditor] = React.useState(null); // {mode, id, key}
const [form, setForm] = React.useState({ title: "", course_id: "", body: "" });
const [saving, setSaving] = React.useState(false);
const [editMsg, setEditMsg] = React.useState(null);
const openNew = () => {
setForm({ title: "", course_id: "", body: "" });
setEditMsg(null);
setEditor({ mode: "new", key: `new-${Date.now()}` });
};
const openEdit = async (d) => {
setEditMsg(null);
setEditor({ mode: "edit", id: d.id, key: `doc-${d.id}`, loading: true });
const r = await apiFetch(`/text-docs/${d.id}`);
if (!r.ok) { setEditor(null); say("Could not open that document.", "err"); return; }
const full = await r.json();
setForm({ title: full.title || "", course_id: full.course_id != null ? String(full.course_id) : "", body: full.body || "" });
setEditor({ mode: "edit", id: d.id, key: `doc-${d.id}`, usedBy: full.used_by || [] });
};
const saveDoc = async () => {
if (!form.title.trim()) { setEditMsg({ type: "err", text: "Give the document a title" }); return; }
if (!stripHtml(form.body)) { setEditMsg({ type: "err", text: "Add some content" }); return; }
setSaving(true);
const payload = { title: form.title.trim(), body: form.body, course_id: form.course_id ? parseInt(form.course_id) : null };
const r = editor.mode === "new"
? await apiFetch("/text-docs", { method: "POST", body: JSON.stringify(payload) })
: await apiFetch(`/text-docs/${editor.id}`, { method: "PATCH", body: JSON.stringify(payload) });
setSaving(false);
if (!r.ok) { const d = await r.json().catch(() => ({})); setEditMsg({ type: "err", text: d.error || "Could not save" }); return; }
const usedCount = editor.mode === "edit" ? (editor.usedBy || []).length : 0;
setEditor(null);
refresh();
say(usedCount
? `Saved ✓ — updated in ${usedCount} lesson${usedCount === 1 ? "" : "s"}`
: editor.mode === "new" ? "Document created ✓" : "Saved ✓");
};
// ── Assign to a module ──────────────────────────────────────────────────────
const [assignDoc, setAssignDoc] = React.useState(null);
const [assignUnits, setAssignUnits] = React.useState([]);
const [assignForm, setAssignForm] = React.useState({ course_id: "", unit_id: "", title: "" });
const [assignSaving, setAssignSaving] = React.useState(false);
const [assignMsg, setAssignMsg] = React.useState(null);
const loadUnitsFor = async (courseId) => {
if (!courseId) { setAssignUnits([]); return; }
const units = await apiFetch(`/content/${courseId}`).then(r => r.ok ? r.json() : []).catch(() => []);
setAssignUnits(Array.isArray(units) ? units : []);
};
const openAssign = async (d) => {
setAssignDoc(d); setAssignMsg(null);
setAssignForm({ course_id: d.course_id != null ? String(d.course_id) : "", unit_id: "", title: d.title });
await loadUnitsFor(d.course_id);
};
const onAssignCourse = async (cid) => {
setAssignForm(f => ({ ...f, course_id: cid, unit_id: "" }));
setAssignMsg(null);
await loadUnitsFor(cid);
};
const doAssign = async () => {
if (!assignForm.course_id) { setAssignMsg({ type: "err", text: "Pick a course" }); return; }
if (!assignForm.unit_id) { setAssignMsg({ type: "err", text: "Pick a module" }); return; }
if (!assignForm.title.trim()) { setAssignMsg({ type: "err", text: "Lesson title required" }); return; }
setAssignSaving(true);
const r = await apiFetch(`/units/${assignForm.unit_id}/lessons`, {
method: "POST",
body: JSON.stringify({ title: assignForm.title.trim(), type: "text", text_doc_id: assignDoc.id }),
});
setAssignSaving(false);
if (!r.ok) { const d = await r.json().catch(() => ({})); setAssignMsg({ type: "err", text: d.error || "Failed to assign" }); return; }
setAssignMsg({ type: "ok", text: "Added as a lesson ✓ (starts as a draft)" });
refresh();
setTimeout(() => setAssignDoc(null), 1100);
};
// ── Delete ──────────────────────────────────────────────────────────────────
// The API refuses to delete a document that's still assigned, so on a 409 we
// re-read the document to show exactly which lessons are holding it.
const [blocked, setBlocked] = React.useState(null);
const deleteDoc = async (d) => {
if (!confirm(`Delete "${d.title}"?\n\nThis cannot be undone.`)) return;
const r = await apiFetch(`/text-docs/${d.id}`, { method: "DELETE" });
if (r.ok) { refresh(); say("Document deleted ✓"); return; }
const err = await r.json().catch(() => ({}));
if (r.status === 409) {
const full = await apiFetch(`/text-docs/${d.id}`).then(x => x.ok ? x.json() : null).catch(() => null);
setBlocked({ doc: d, message: err.error, usedBy: (full && full.used_by) || [] });
return;
}
say(err.error || "Could not delete", "err");
};
const selStyle = { padding: "8px 10px", border: "var(--border-thin)", borderRadius: 8, background: "var(--paper-deep)", fontSize: 12.5, color: "var(--ink)", fontFamily: "var(--font-ui)" };
const inputStyle = { width: "100%", padding: "9px 12px", border: "var(--border-thin)", borderRadius: 8, background: "var(--paper-deep)", fontSize: 13, color: "var(--ink)", fontFamily: "var(--font-ui)", boxSizing: "border-box", outline: "none" };
// ── Editor view ─────────────────────────────────────────────────────────────
if (editor) {
const usedBy = editor.usedBy || [];
return (
setAssignForm(f=>({...f,title:e.target.value}))} placeholder="Lesson title"
style={{ width:"100%", padding:"9px 12px", border:"var(--border-thin)", borderRadius:8, background:"var(--paper-deep)", fontSize:13, color:"var(--ink)", fontFamily:"var(--font-ui)", boxSizing:"border-box", outline:"none" }}/>
{assignForm.course_id && assignUnits.length===0 &&
This course has no modules yet — add one under Courses → Units & Lessons.
}
{assignMsg && {assignMsg.text}
}
Choose the course to store the file under. You can assign it to any course's module afterward.
"."+t).join(",")}
onChange={e=>handleUpload(e.target.files)}
style={{ fontSize:12.5, color:"var(--ink)" }}/>
Allowed: {ALLOWED_TYPES.join(", ")} · max 35 MB each
{uploading && Uploading…
}
{uploadMsg && {uploadMsg.text}
}
Media Library
{loading ? "Loading…" : `${list.length} file${list.length===1?"":"s"}`}
{loading ?
No files yet — upload some under Courses.
) : (
{list.map(f => (
)}
openFile(f)} title={`Open ${f.title}`} className="card-flat" style={{ padding:10, cursor:"pointer", display:"flex", flexDirection:"column", gap:8 }}>
))}
{f.title}
{f.course_name || "—"}
{f.file_type}
{f.public_uid && { e.stopPropagation(); navigator.clipboard?.writeText(f.public_uid); }} style={{ fontSize:9, color:"var(--ink-mute)", cursor:"pointer" }}>{f.public_uid}}
{fmtBytes(f.size_bytes)}
{editor.mode === "new" ? "New document" : "Edit document"}
{usedBy.length
? `Used by ${usedBy.length} lesson${usedBy.length === 1 ? "" : "s"} — saving updates all of them`
: "Not assigned to any module yet"}
{editMsg.text}
}
{editor.loading ?
setForm(f => ({ ...f, title: e.target.value }))}
placeholder="Document title" style={{ ...inputStyle, fontSize: 16, fontWeight: 700, padding: "12px 14px" }}/>
setForm(f => ({ ...f, body: html }))}/>
{usedBy.length > 0 && (
)}
)}
FILE UNDER
Organisation only — you can assign it to any course's module.
USED BY
{usedBy.map(u => (
{u.title}
{u.course_name || "—"} · {u.unit}
{u.status}
))}
{assignDoc && (
setAssignDoc(null)}>
)}
{blocked && (
setBlocked(null)}>
)}
{flash &&
);
};
// Renders a quiz question's media-library image (fetched via the question id so
// learners can see it without library permissions). Shared with the student player.
const QuizQImage = ({ qid, style }) => {
const [url, setUrl] = React.useState(null);
React.useEffect(() => {
let dead = false, made = null;
apiFetch(`/quiz-questions/${qid}/image`).then(r => r.ok ? r.json() : null).then(d => {
if (!d || dead) return;
const bin = atob(d.file_data || ""), by = new Uint8Array(bin.length);
for (let i=0;iThe lesson stays linked to this document, so future edits reach it automatically.
setAssignForm(f => ({ ...f, title: e.target.value }))} placeholder="Lesson title" style={inputStyle}/>
{assignForm.course_id && assignUnits.length === 0 && This course has no modules yet — add one under Courses → Units & Lessons.
}
{assignMsg && {assignMsg.text}
}
{blocked.message}
{blocked.usedBy.map(u => (
))}
{u.title}
{u.course_name || "—"} · {u.unit}
Delete those lessons under Courses → Units & Lessons first, then remove the document.
Text Library
{loading ? "Loading…" : `${list.length} document${list.length === 1 ? "" : "s"}`}
{flash.text}
}
setQuery(e.target.value)} placeholder="Search…"
style={{ width: 200, padding: "8px 12px", border: "var(--border-thin)", borderRadius: 8, background: "var(--paper-deep)", fontSize: 13, color: "var(--ink)", fontFamily: "var(--font-ui)", outline: "none" }}/>
{loading ?
{(docs || []).length === 0
? "No documents yet — write one with “+ New document”, then assign it to any course's module."
: "No documents match that search."}
) : (
{list.map(d => (
)}
openEdit(d)} title={`Edit ${d.title}`} className="card-flat" style={{ padding: 14, cursor: "pointer", display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }}>
))}
📝
{d.title}
{d.course_name || "Unfiled"}
{d.excerpt || "—"}
{Number(d.usage_count) ? `in ${d.usage_count} lesson${Number(d.usage_count) === 1 ? "" : "s"}` : "unused"}
{d.updated_at ? new Date(d.updated_at).toLocaleDateString() : ""}
{showPicker && (
setShowPicker(false)}>
{courseImages.length===0 ? (
)}
{showCreate && (
);
};
const ContentManagerHome = ({ go, session }) => {
const route = window.location.hash.slice(1);
// Use /courses/list — it returns id/name/level (what the sidebar renders).
// /courses returns a combined `title` instead, which left the labels blank.
const { data: courses, loading: cLoading } = useApi("/courses/list");
const [coursesLocal, setCoursesLocal] = React.useState(null);
const courseItems = coursesLocal ?? courses;
const refreshCourses = async () => setCoursesLocal(asArray(await apiList("/courses/list")));
const [showNewCourse, setShowNewCourse] = React.useState(false);
const [newCourse, setNewCourse] = React.useState({ name:"", level:"Beginner" });
const [courseSaving, setCourseSaving] = React.useState(false);
const [courseError, setCourseError] = React.useState("");
const createCourse = async () => {
if (!newCourse.name.trim()) { setCourseError("Course name required"); return; }
setCourseError(""); setCourseSaving(true);
const res = await apiFetch("/courses/list", { method:"POST", body: JSON.stringify({ name:newCourse.name.trim(), level:newCourse.level.trim()||"Beginner" }) });
if (!res.ok) { const d=await res.json().catch(()=>({})); setCourseError(d.error||"Failed to create course"); setCourseSaving(false); return; }
setNewCourse({ name:"", level:"Beginner" }); setShowNewCourse(false); setCourseSaving(false);
await refreshCourses();
};
const [selectedCourse, setSelectedCourse] = React.useState(null);
const [cmTab, setCmTab] = React.useState("files");
const { data: initFiles, loading: fLoading } = useApi(selectedCourse ? `/library-assets/${selectedCourse.id}` : null);
const [files, setFiles] = React.useState(null);
const fileList = files ?? initFiles;
const lessonFiles = (fileList || []).filter(f => !!f.lesson_file_id);
// Units state
const { data: initUnits } = useApi(selectedCourse ? `/content/${selectedCourse.id}` : null);
const [units, setUnits] = React.useState(null);
const unitList = units ?? initUnits ?? [];
const refreshUnits = () => selectedCourse && apiFetch(`/content/${selectedCourse.id}`).then(r=>r.json()).then(setUnits);
const [unitTitle, setUnitTitle] = React.useState("");
const [unitSaving, setUnitSaving] = React.useState(false);
const [unitError, setUnitError] = React.useState("");
const [lessonForm, setLessonForm] = React.useState({ title:"", unit_id:"", type:"video", youtube_url:"", duration:"", file_id:"", body:"" });
// Bumped after each save so the (uncontrolled) rich text editor re-seeds itself.
const [lessonDocKey, setLessonDocKey] = React.useState(0);
const [lessonSaving, setLessonSaving] = React.useState(false);
const [lessonError, setLessonError] = React.useState("");
const [showLessonForm, setShowLessonForm] = React.useState(false);
const [uploading, setUploading] = React.useState(false);
const [uploadError, setUploadError] = React.useState("");
const [dragOver, setDragOver] = React.useState(false);
const fileInputRef = React.useRef();
React.useEffect(() => { setFiles(null); setUnits(null); }, [selectedCourse?.id]);
const refreshFiles = () => {
if (!selectedCourse) return;
apiFetch(`/library-assets/${selectedCourse.id}`).then(r=>r.json()).then(setFiles);
};
const cmSaveUnit = async () => {
if (!unitTitle.trim()) { setUnitError("Title required"); return; }
setUnitError(""); setUnitSaving(true);
const res = await apiFetch(`/courses/${selectedCourse.id}/units`, { method:"POST", body: JSON.stringify({ title: unitTitle.trim() }) });
if (!res.ok) { const d=await res.json(); setUnitError(d.error||"Failed"); setUnitSaving(false); return; }
setUnitTitle(""); setUnitSaving(false); refreshUnits();
};
const cmSaveLesson = async () => {
if (!lessonForm.title.trim()) { setLessonError("Title required"); return; }
if (!lessonForm.unit_id) { setLessonError("Select a unit"); return; }
if (lessonForm.type==="file" && !lessonForm.file_id) { setLessonError("Pick an uploaded file (or upload one in the Files tab first)"); return; }
if (lessonForm.type==="text" && !stripHtml(lessonForm.body)) { setLessonError("Write some content for this text lesson"); return; }
setLessonError(""); setLessonSaving(true);
const res = await apiFetch(`/units/${lessonForm.unit_id}/lessons`, { method:"POST", body: JSON.stringify({ title:lessonForm.title, type:lessonForm.type, youtube_url:lessonForm.youtube_url, duration:lessonForm.duration, file_id: lessonForm.file_id||null, body: lessonForm.type==="text" ? lessonForm.body : null }) });
if (!res.ok) { const d=await res.json(); setLessonError(d.error||"Failed"); setLessonSaving(false); return; }
setLessonForm({ title:"", unit_id:lessonForm.unit_id, type:"video", youtube_url:"", duration:"", file_id:"", body:"" });
setLessonDocKey(k => k + 1);
setShowLessonForm(false); setLessonSaving(false); refreshUnits();
};
// ── Edit / delete / reorder / publish ───────────────────────────────────────
const [editLesson, setEditLesson] = React.useState(null);
const [editLForm, setEditLForm] = React.useState({});
const [editLSaving, setEditLSaving] = React.useState(false);
// Lightweight in-app text editor (txt files only)
const [editTextFile, setEditTextFile] = React.useState(null);
const [editTextValue, setEditTextValue] = React.useState("");
const [editTextLoading, setEditTextLoading] = React.useState(false);
const [editTextSaving, setEditTextSaving] = React.useState(false);
const renameCourse = async (c) => {
const t = prompt("Rename course", c.name);
if (t == null || !t.trim() || t.trim() === c.name) return;
const res = await apiFetch(`/courses/${c.id}`, { method:"PATCH", body: JSON.stringify({ name: t.trim() }) });
if (!res.ok) { const d = await res.json().catch(()=>({})); alert(d.error || "Could not rename course"); return; }
const updated = await res.json();
setSelectedCourse(s => (s && s.id === c.id ? { ...s, name: updated.name } : s));
await refreshCourses();
};
const renameUnit = async (u) => {
const t = prompt("Rename module", u.unit);
if (t == null || !t.trim()) return;
await apiFetch(`/units/${u.id}`, { method:"PATCH", body: JSON.stringify({ title: t.trim() }) });
refreshUnits();
};
const moveUnit = async (u, direction) => { await apiFetch(`/units/${u.id}/move`, { method:"POST", body: JSON.stringify({ direction }) }); refreshUnits(); };
const deleteUnit = async (u) => {
const n = (u.lessons||[]).length;
if (!confirm(`Delete module "${u.unit}"${n ? ` and its ${n} lesson${n>1?"s":""}` : ""}? This cannot be undone.`)) return;
await apiFetch(`/units/${u.id}`, { method:"DELETE" }); refreshUnits();
};
const moveLesson = async (l, direction) => { await apiFetch(`/lessons/${l.id}/move`, { method:"POST", body: JSON.stringify({ direction }) }); refreshUnits(); };
const deleteLesson = async (l) => { if (!confirm(`Delete lesson "${l.title}"?`)) return; await apiFetch(`/lessons/${l.id}`, { method:"DELETE" }); refreshUnits(); };
const togglePublish = async (l) => { await apiFetch(`/lessons/${l.id}`, { method:"PATCH", body: JSON.stringify({ status: l.status==="published" ? "draft" : "published" }) }); refreshUnits(); };
const openEditLesson = (l) => { setEditLesson(l); setEditLForm({ title:l.title, type:l.type, youtube_url: l.youtube ? `https://youtu.be/${l.youtube}` : "", duration: l.duration||"", file_id: l.file_id||"", status: l.status, body: l.body||"" }); };
const saveEditLesson = async () => {
if (!editLForm.title.trim()) return;
if (editLForm.type === "text" && !stripHtml(editLForm.body)) { alert("Write some content for this text lesson."); return; }
setEditLSaving(true);
const body = { title: editLForm.title, type: editLForm.type, duration: editLForm.duration, status: editLForm.status };
if (editLForm.type === "video") body.youtube_url = editLForm.youtube_url;
if (editLForm.type === "file") body.file_id = editLForm.file_id || null;
if (editLForm.type === "text") body.body = editLForm.body;
const res = await apiFetch(`/lessons/${editLesson.id}`, { method:"PATCH", body: JSON.stringify(body) });
setEditLSaving(false);
if (!res.ok) { const d = await res.json().catch(()=>({})); alert(d.error || "Could not save lesson"); return; }
setEditLesson(null); refreshUnits();
};
const handleFiles = async (rawFiles) => {
if (!selectedCourse) { setUploadError("Select a course first"); return; }
setUploadError("");
setUploading(true);
for (const file of Array.from(rawFiles)) {
const ext = file.name.split(".").pop().toLowerCase();
if (!ALLOWED_TYPES.includes(ext)) { setUploadError(`${file.name}: unsupported type. Allowed: ${ALLOWED_TYPES.join(", ")}`); continue; }
if (file.size > 35 * 1024 * 1024) { setUploadError(`${file.name}: ${(file.size/1048576).toFixed(1)} MB — max is 35 MB`); continue; }
const reader = new FileReader();
await new Promise(resolve => {
reader.onload = async (e) => {
// Strip the "data:...;base64," prefix — store raw base64 so the viewer
// (which re-adds the prefix) doesn't double it up and corrupt the file.
const base64 = String(e.target.result).split(",")[1];
const res = await apiFetch("/library-assets", { method:"POST", body: JSON.stringify({ course_id: selectedCourse.id, title: file.name, file_type: ext, file_data: base64 }) });
if (!res.ok) {
const d = await res.json().catch(() => ({}));
setUploadError(`${file.name}: ${d.error || (res.status === 413 ? "too large for the server" : "upload failed ("+res.status+")")}`);
}
resolve();
};
reader.onerror = () => { setUploadError(`${file.name}: could not read file`); resolve(); };
reader.readAsDataURL(file);
});
}
setUploading(false);
refreshFiles();
};
const deleteFile = async (id) => {
if (!confirm("Delete this file?")) return;
await apiFetch(`/library-assets/${encodeURIComponent(id)}`, { method:"DELETE" });
refreshFiles();
};
const cmFileBlobUrl = async (fileId) => {
const r = await apiFetch(`/library-assets/${selectedCourse.id}/${encodeURIComponent(fileId)}/data`);
if (!r.ok) return null;
const { file_data, file_type } = await r.json();
const bin = atob(file_data), bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
return URL.createObjectURL(new Blob([bytes], { type: fileMimeType(file_type) }));
};
const previewFile = async (id) => {
const url = await cmFileBlobUrl(id);
if (!url) { setUploadError("Could not open file."); return; }
window.open(url, "_blank"); setTimeout(() => URL.revokeObjectURL(url), 60000);
};
const downloadFile = async (id, title) => {
const url = await cmFileBlobUrl(id);
if (!url) { setUploadError("Could not download file."); return; }
const a = document.createElement("a"); a.href = url; a.download = title; a.click();
setTimeout(() => URL.revokeObjectURL(url), 60000);
};
// ── In-app text editor (txt only) ───────────────────────────────────────────
const b64ToText = (b64) => { try { return decodeURIComponent(escape(atob(b64))); } catch { return atob(b64); } };
const textToB64 = (text) => btoa(unescape(encodeURIComponent(text)));
const openTextEditor = async (f) => {
setEditTextFile(f); setEditTextValue(""); setEditTextLoading(true);
const r = await apiFetch(`/library-assets/${selectedCourse.id}/${encodeURIComponent(f.id)}/data`);
if (!r.ok) { setEditTextLoading(false); setEditTextFile(null); setUploadError("Could not open file."); return; }
const { file_data } = await r.json();
setEditTextValue(b64ToText(file_data || "")); setEditTextLoading(false);
};
const saveTextEditor = async () => {
setEditTextSaving(true);
const r = await apiFetch(`/library-assets/${selectedCourse.id}/${encodeURIComponent(editTextFile.id)}/data`, { method:"PUT", body: JSON.stringify({ file_data: textToB64(editTextValue) }) });
setEditTextSaving(false);
if (!r.ok) { const d = await r.json().catch(()=>({})); alert(d.error || "Could not save file"); return; }
setEditTextFile(null); refreshFiles();
};
const fmtSize = b => b > 1048576 ? `${(b/1048576).toFixed(1)} MB` : `${(b/1024).toFixed(0)} KB`;
const editInput = { width:"100%", padding:"8px 12px", border:"var(--border-thin)", borderRadius:8, background:"var(--paper-deep)", fontSize:13, color:"var(--ink)", fontFamily:"var(--font-ui)", boxSizing:"border-box", outline:"none" };
if (route === "/app/content/all-files") {
return No images in this course yet. Upload images under Courses → Files.
) : (
{courseImages.map(f => (
))}
)}
Quizzes
Assigned to every student in the selected course
setForm(f=>({...f,title:e.target.value}))} placeholder="Quiz title" style={{ ...inS, width:280 }}/>
setForm(f=>({...f,time_limit:e.target.value}))} placeholder="Time limit (e.g. 20 minutes)" style={{ ...inS, width:200 }}/>
{createErr && {createErr}}
)}
{/* Quiz list */}
{qzLoading ?
{/* Quiz detail / questions */}
No quizzes yet — create one above.
) : quizList.map(qz=>{
const on = activeQuiz?.id===qz.id;
return (
openQuiz(qz)} style={{ flex:1, minWidth:0, cursor:"pointer", textAlign:"left" }}>
{qz.title}
{qz.questions} question{qz.questions===1?"":"s"} · {qz.assigned}
{!activeQuiz ? (
) : (
))}
{/* Add question */}
)}
📝
Select or create a quiz
Add multiple-choice questions; students of this course get the quiz automatically.
{activeQuiz.title}
{/* Existing questions */}
{questions.length===0 ? (
No questions yet — add the first below.
) : questions.map((qq,i)=>(
{i+1}.
{qq.q}
{qq.image_ref &&
{oi===qq.ans ? "✓ " : "• "}{o}
))}
ADD QUESTION (MCQ)
setQForm(f=>({...f,question:e.target.value}))} placeholder="Question text" style={inS}/>
{qForm.options.map((o,i)=>(
setQForm(f=>({...f,correct:i}))} title="Mark correct"/>
setOpt(i,e.target.value)} placeholder={`Option ${i+1}`} style={{ ...inS, flex:1 }}/>
{qForm.options.length>2 && }
))}
Select the radio next to the correct answer.
setQForm(f=>({...f,video_url:e.target.value}))} placeholder="Video link (optional — YouTube watch / youtu.be / embed)" style={inS}/>
{qForm.image_ref ? (
<>
{qForm.image_preview
? 
: Image attached}
) : (
)}
{qErr && {qErr}
}
{editLesson && (
setEditLesson(null)}>
)}
{editTextFile && (
setEditTextFile(null)}>
setEditLForm(f=>({...f,title:e.target.value}))} placeholder="Lesson title" style={editInput}/>
{editLForm.type==="video" && setEditLForm(f=>({...f,youtube_url:e.target.value}))} placeholder="YouTube link (watch, youtu.be, embed or shorts)" style={editInput}/>}
{/* A library-backed lesson has no body of its own — the document is
the single source of truth, so send the author there instead of
showing an editor that would look empty. */}
{editLForm.type==="text" && (editLesson.text_doc_id ? (
) : (
setEditLForm(f=>({...f,body:v}))} minHeight={220}/>
))}
{editLForm.type==="file" && ((lessonFiles&&lessonFiles.length) ? (
) :
📝 Linked to the Text Library document {editLesson.text_doc_title || "—"}.
Editing it there updates this lesson and every other module using it.
No files uploaded — add one in the Files tab.
)}
setEditLForm(f=>({...f,duration:e.target.value}))} placeholder="Duration (optional, e.g. 8:22)" style={editInput}/>
{editTextLoading ?