@anantagnanam/lms 0.2.0 → 0.3.0

package/astro/study-tools.ts

@@ -0,0 +1,386 @@
+import { API_BASE } from "@anantagnanam/lms";
+import type { Notebook, StudyNote } from "@anantagnanam/lms/types";
+type Call = <T>(route: string, input: Record<string, unknown>, method?: string) => Promise<T>;
+const unsaved = new Map<HTMLElement, () => boolean>();
+const atRisk = () => [...unsaved].some(([root, dirty]) => root.isConnected && dirty());
+const beforeUnload = (event: BeforeUnloadEvent) => {
+  if (atRisk()) event.preventDefault();
+};
+const beforeNavigate = (event: Event) => {
+  if (
+    !event.defaultPrevented &&
+    atRisk() &&
+    !window.confirm("Some notes may not be saved. Leave this page?")
+  )
+    event.preventDefault();
+};
+/** Cover both full navigation and hosts that opt into Astro's client router. */
+export function protectStudyWork(root: HTMLElement, dirty: () => boolean) {
+  unsaved.set(root, dirty);
+  if (unsaved.size !== 1) return;
+  window.addEventListener("beforeunload", beforeUnload);
+  document.addEventListener("astro:before-preparation", beforeNavigate);
+  document.addEventListener(
+    "astro:before-swap",
+    () => {
+      unsaved.clear();
+      window.removeEventListener("beforeunload", beforeUnload);
+      document.removeEventListener("astro:before-preparation", beforeNavigate);
+    },
+    { once: true },
+  );
+}
+const node = <K extends keyof HTMLElementTagNameMap>(tag: K, text = "") => {
+  const element = document.createElement(tag);
+  element.textContent = text;
+  return element;
+};
+const time = (value: number) =>
+  `${Math.floor(value / 60)}:${String(Math.floor(value % 60)).padStart(2, "0")}`;
+const button = (text: string) => {
+  const item = node("button", text);
+  item.type = "button";
+  item.className = "lms-btn lms-btn-outline";
+  return item;
+};
+const tell = (root: Element, message: string, error = false) => {
+  const target = root.querySelector<HTMLElement>("[data-lms-feedback]")!;
+  target.textContent = message;
+  target.setAttribute("role", error ? "alert" : "status");
+};
+function download(value: Blob, filename: string) {
+  const url = URL.createObjectURL(value);
+  const link = node("a");
+  link.href = url;
+  link.download = filename;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export function initializeStudyTools(call: Call) {
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-quick-note]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const form = root.querySelector<HTMLFormElement>("form")!;
+    const body = form.elements.namedItem("body") as HTMLTextAreaElement;
+    const star = form.elements.namedItem("starred") as HTMLInputElement;
+    const capture = root.querySelector<HTMLButtonElement>("[data-lms-capture-time]")!;
+    const clear = root.querySelector<HTMLButtonElement>("[data-lms-clear-time]")!;
+    const stamp = root.querySelector<HTMLElement>("[data-lms-note-time]")!;
+    const media = root.closest("[data-lms-lesson]")?.querySelector<HTMLMediaElement>("audio,video");
+    let position: number | null = null;
+    let id = crypto.randomUUID();
+    let pending: Record<string, unknown> | undefined;
+    let busy = false;
+    protectStudyWork(root, () => busy || !!pending || !!body.value.trim() || position !== null);
+    capture.hidden = !media;
+    capture.addEventListener("click", () => {
+      if (!media || busy || pending) return;
+      position = Math.min(86_400, Math.max(0, Math.floor(media.currentTime)));
+      stamp.textContent = `Bookmark at ${time(position)}`;
+      clear.hidden = false;
+    });
+    clear.addEventListener("click", () => {
+      if (busy || pending) return;
+      position = null;
+      stamp.textContent = "";
+      clear.hidden = true;
+    });
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      if (busy) return;
+      if (!pending && !body.value.trim() && position === null) {
+        tell(root, "Write a note or capture the playback time.", true);
+        return;
+      }
+      pending ??= {
+        courseId: root.dataset.courseId,
+        lessonId: root.dataset.lessonId,
+        id,
+        body: body.value,
+        starred: star.checked,
+        archived: false,
+        positionSeconds: position,
+        expectedRevision: 0,
+      };
+      busy = true;
+      form
+        .querySelectorAll<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>(
+          "input,button,textarea",
+        )
+        .forEach((field) => (field.disabled = true));
+      try {
+        await call("learner/notebook/save", pending);
+        pending = undefined;
+        body.value = "";
+        star.checked = false;
+        position = null;
+        stamp.textContent = "";
+        clear.hidden = true;
+        id = crypto.randomUUID();
+        tell(root, "Note saved in your private course notebook.");
+      } catch (error) {
+        const failure = error as { status?: number };
+        if (failure.status && failure.status < 500 && ![408, 429].includes(failure.status))
+          pending = undefined;
+        tell(
+          root,
+          `${error instanceof Error ? error.message : "Could not save."}${pending ? " Retry to confirm the same note." : " Your work is kept here."}`,
+          true,
+        );
+      } finally {
+        busy = false;
+        form
+          .querySelectorAll<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>(
+            "input,button,textarea",
+          )
+          .forEach((field) => (field.disabled = !!pending && field.type !== "submit"));
+      }
+    });
+  }
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-notebook]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    let notebook = JSON.parse(root.dataset.notebook!) as Notebook;
+    delete root.dataset.notebook;
+    const list = root.querySelector<HTMLElement>("[data-lms-note-list]")!;
+    const search = root.querySelector<HTMLInputElement>("[data-lms-note-search]")!;
+    const filter = root.querySelector<HTMLSelectElement>("[data-lms-note-filter]")!;
+    const refresh = root.querySelector<HTMLButtonElement>("[data-lms-notebook-refresh]")!;
+    let editing = false;
+    let dirty = () => false;
+    protectStudyWork(root, () => dirty());
+    const controls = (value: boolean) => {
+      editing = value;
+      if (!value) dirty = () => false;
+      search.disabled = filter.disabled = refresh.disabled = value;
+    };
+    const lessonLink = (lessonId: string, position: number | null) => {
+      if (!notebook.availableLessonIds.includes(lessonId))
+        return node("span", "Lesson access currently unavailable; your saved notes are retained.");
+      const link = node("a", position === null ? "Open lesson →" : `Jump to ${time(position)} →`);
+      link.href = `${root.dataset.basePath}/courses/${encodeURIComponent(notebook.course.slug)}/lessons/${encodeURIComponent(lessonId)}${position === null ? "" : `#t=${position}`}`;
+      return link;
+    };
+    const render = () => {
+      list.replaceChildren();
+      const query = search.value.trim().toLocaleLowerCase();
+      const match = (body: string, title: string) =>
+        `${title}\n${body}`.toLocaleLowerCase().includes(query);
+      const notes = notebook.notes
+        .filter(
+          (note) =>
+            (filter.value === "archived" ? note.archived : !note.archived) &&
+            (filter.value !== "starred" || note.starred) &&
+            match(note.body, note.lessonTitle),
+        )
+        .toSorted((a, b) => b.updatedAt.localeCompare(a.updatedAt) || a.id.localeCompare(b.id));
+      for (const note of notes) {
+        const article = node("article");
+        article.className = "lms-notebook-entry";
+        const heading = node("h4", `${note.starred ? "★ " : ""}${note.lessonTitle}`);
+        const body = node("p", note.body || "Playback bookmark");
+        body.className = "lms-text";
+        article.append(heading, body, lessonLink(note.lessonId, note.positionSeconds));
+        if (notebook.availableLessonIds.includes(note.lessonId)) {
+          const edit = button(note.archived ? "Edit or restore note" : "Edit note");
+          article.append(edit);
+          edit.addEventListener("click", () => {
+            if (editing) return;
+            controls(true);
+            const form = node("form");
+            form.className = "lms-form";
+            const label = node("label", "Note text");
+            const field = node("textarea");
+            field.value = note.body;
+            field.maxLength = 5000;
+            field.rows = 4;
+            label.append(field);
+            const starred = node("input");
+            starred.type = "checkbox";
+            starred.checked = note.starred;
+            const starLabel = node("label", " Starred ");
+            starLabel.prepend(starred);
+            const archived = node("input");
+            archived.type = "checkbox";
+            archived.checked = note.archived;
+            const archiveLabel = node("label", " Archived (can be restored) ");
+            archiveLabel.prepend(archived);
+            const save = button("Save note");
+            save.type = "submit";
+            const cancel = button("Cancel editing");
+            const feedback = node("p");
+            feedback.setAttribute("aria-live", "polite");
+            form.append(label, starLabel, archiveLabel, save, cancel, feedback);
+            article.replaceChildren(heading, form);
+            field.focus();
+            let request: Record<string, unknown> | undefined;
+            let saving = false;
+            dirty = () =>
+              saving ||
+              !!request ||
+              field.value !== note.body ||
+              starred.checked !== note.starred ||
+              archived.checked !== note.archived;
+            cancel.addEventListener("click", () => {
+              if (saving || request) return;
+              controls(false);
+              render();
+            });
+            form.addEventListener("submit", async (event) => {
+              event.preventDefault();
+              if (saving) return;
+              request ??= {
+                ...note,
+                courseId: notebook.course.id,
+                expectedRevision: note.revision,
+                body: field.value,
+                starred: starred.checked,
+                archived: archived.checked,
+              };
+              saving = true;
+              save.disabled = cancel.disabled = true;
+              field.readOnly = true;
+              starred.disabled = archived.disabled = true;
+              try {
+                const saved = await call<StudyNote>("learner/notebook/save", request);
+                notebook.notes = notebook.notes.map((item) =>
+                  item.id === saved.id ? saved : item,
+                );
+                request = undefined;
+                controls(false);
+                render();
+                tell(root, "Note saved.");
+              } catch (error) {
+                const failure = error as { status?: number; code?: string };
+                if (failure.status && failure.status < 500 && ![408, 429].includes(failure.status))
+                  request = undefined;
+                feedback.textContent = `${error instanceof Error ? error.message : "Save not confirmed."} ${request ? "Retry to confirm this same edit." : "Copy your edits before cancelling and reloading saved notes."}`;
+                feedback.setAttribute("role", "alert");
+              } finally {
+                saving = false;
+                save.disabled = false;
+                cancel.disabled = !!request;
+                field.readOnly = !!request;
+                starred.disabled = archived.disabled = !!request;
+              }
+            });
+          });
+        }
+        list.append(article);
+      }
+      const summaries =
+        filter.value === "active"
+          ? notebook.summaries.filter((item) => match(item.body, item.lessonTitle))
+          : [];
+      for (const summary of summaries) {
+        const article = node("article");
+        article.className = "lms-notebook-entry";
+        const body = node("p", summary.body);
+        body.className = "lms-text";
+        article.append(
+          node("h4", `${summary.lessonTitle} · Lesson summary`),
+          body,
+          lessonLink(summary.lessonId, null),
+        );
+        list.append(article);
+      }
+      if (!notes.length && !summaries.length)
+        list.append(
+          node("p", "No notes match this view. Add a note from a lesson or change your filters."),
+        );
+    };
+    search.addEventListener("input", render);
+    filter.addEventListener("change", render);
+    refresh.addEventListener("click", async () => {
+      if (editing) return;
+      controls(true);
+      try {
+        notebook = await call<Notebook>(
+          "learner/notebook",
+          { courseId: notebook.course.id },
+          "GET",
+        );
+        render();
+        tell(root, "Saved notes loaded.");
+      } catch (error) {
+        tell(root, error instanceof Error ? error.message : "Could not load notes.", true);
+      } finally {
+        controls(false);
+      }
+    });
+    render();
+  }
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-agenda]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const timezone = root.querySelector<HTMLSelectElement>("[data-lms-timezone]");
+    if (!timezone) continue;
+    const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const zones = [
+      ...new Set([
+        "UTC",
+        local,
+        ...(typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : []),
+      ]),
+    ];
+    timezone.replaceChildren(
+      ...zones.map((zone) => {
+        const option = node("option", zone);
+        option.value = zone;
+        return option;
+      }),
+    );
+    timezone.value = local;
+    const dates = () =>
+      root.querySelectorAll<HTMLTimeElement>("[data-lms-date]").forEach(
+        (item) =>
+          (item.textContent =
+            new Intl.DateTimeFormat(undefined, {
+              timeZone: timezone.value,
+              dateStyle: "medium",
+              timeStyle: "short",
+            }).format(new Date(item.dateTime)) + ` (${timezone.value})`),
+      );
+    timezone.addEventListener("change", dates);
+    dates();
+    root
+      .querySelector<HTMLInputElement>("[data-lms-agenda-upcoming]")!
+      .addEventListener("change", (event) => {
+        let visible = 0;
+        root.querySelectorAll<HTMLElement>("[data-lms-agenda-event]").forEach((item) => {
+          item.hidden =
+            (event.target as HTMLInputElement).checked && item.dataset.status !== "upcoming";
+          if (!item.hidden) visible++;
+        });
+        root.querySelector<HTMLElement>("[data-lms-agenda-empty]")!.hidden = visible > 0;
+      });
+    const downloadButton = root.querySelector<HTMLButtonElement>("[data-lms-calendar-download]")!;
+    downloadButton.addEventListener("click", async () => {
+      downloadButton.disabled = true;
+      try {
+        const response = await fetch(
+          `${API_BASE}/learner/agenda/calendar?courseId=${encodeURIComponent(root.dataset.courseId!)}`,
+          {
+            headers: { "X-EmDash-Request": "1" },
+            credentials: "same-origin",
+            signal: AbortSignal.timeout(20_000),
+          },
+        );
+        if (!response.ok)
+          throw new Error("Calendar unavailable. Reload to check your current course access.");
+        download(await response.blob(), "lms-course-agenda.ics");
+        tell(root, "Calendar downloaded. This snapshot does not update automatically.");
+      } catch (error) {
+        tell(root, error instanceof Error ? error.message : "Calendar download failed.", true);
+      } finally {
+        downloadButton.disabled = false;
+      }
+    });
+  }
+}

package/astro/styles.css

@@ -1,3 +1,21 @@
+.lms-notebook-entry,
+.lms-agenda-list > li {
+  padding: 1rem;
+  border-block-end: 1px solid var(--lms-border, #d8e0da);
+  overflow-wrap: anywhere;
+}
+.lms-agenda-list {
+  padding: 0;
+  list-style: none;
+}
+[data-lms-transcript] mark {
+  background: #fff1a8;
+  color: #16261c;
+}
+[data-lms-transcript] mark[data-current] {
+  background: #ffd66b;
+  outline: 2px solid #725600;
+}
 .lms-root {
   --lms-bg: var(--bg, #f7faf8);
   --lms-surface: var(--surface, #fff);

package/astro/transcript-search.ts

@@ -0,0 +1,56 @@
+/** Search plain transcript text; never interpret authored text or queries as HTML. */
+export function initializeTranscripts() {
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-transcript]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const field = root.querySelector<HTMLInputElement>("[data-lms-transcript-search]")!;
+    const content = root.querySelector<HTMLElement>("[data-lms-transcript-text]")!;
+    const status = root.querySelector<HTMLElement>("[data-lms-transcript-status]")!;
+    const previous = root.querySelector<HTMLButtonElement>("[data-lms-transcript-previous]")!;
+    const next = root.querySelector<HTMLButtonElement>("[data-lms-transcript-next]")!;
+    const text = content.textContent ?? "";
+    let marks: HTMLElement[] = [];
+    let selected = -1;
+    let capped = false;
+    const select = (index: number, scroll = true) => {
+      if (!marks.length) return;
+      marks[selected]?.removeAttribute("data-current");
+      selected = (index + marks.length) % marks.length;
+      marks[selected]!.setAttribute("data-current", "true");
+      status.textContent = `Match ${selected + 1} of ${marks.length}${capped ? " (first 200 shown; refine your search)" : ""}.`;
+      if (scroll) marks[selected]!.scrollIntoView({ block: "center", behavior: "smooth" });
+    };
+    field.addEventListener("input", () => {
+      const query = field.value.trim();
+      marks = [];
+      selected = -1;
+      capped = false;
+      content.replaceChildren();
+      // Unicode case-insensitive regex keeps match offsets in the original string.
+      const pattern = query
+        ? new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "giu")
+        : null;
+      let offset = 0;
+      if (pattern)
+        for (const match of text.matchAll(pattern)) {
+          if (marks.length === 200) {
+            capped = true;
+            break;
+          }
+          content.append(document.createTextNode(text.slice(offset, match.index)));
+          const mark = document.createElement("mark");
+          mark.textContent = match[0];
+          marks.push(mark);
+          content.append(mark);
+          offset = match.index! + match[0].length;
+        }
+      content.append(document.createTextNode(text.slice(offset)));
+      previous.disabled = next.disabled = marks.length === 0;
+      status.textContent = query ? "No matches." : "";
+      if (marks.length) select(0, false);
+    });
+    previous.addEventListener("click", () => select(selected - 1));
+    next.addEventListener("click", () => select(selected + 1));
+  }
+}