@anantagnanam/lms 0.0.0-stage → 0.2.0

package/astro/components/LessonPlayer.astro

@@ -0,0 +1,302 @@
+---
+import LessonContent from "./LessonContent.astro";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
+import type {
+  CourseDetail,
+  PublicLesson,
+  PublicEnrollment,
+  ProgressSummary,
+} from "@anantagnanam/lms/types";
+import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
+import { basePath } from "virtual:anantagnanam-lms/config";
+interface Props {
+  course: CourseDetail;
+  lesson: PublicLesson;
+  enrollment?: PublicEnrollment | null;
+  progress?: ProgressSummary;
+  preview?: boolean;
+}
+const { course, lesson, enrollment = null, progress, preview = false } = Astro.props;
+const all = course.modules.flatMap((module) => module.lessons);
+const index = all.findIndex((item) => item.id === lesson.id);
+const available = (id: string) =>
+  preview
+    ? Boolean(all.find((item) => item.id === id)?.preview)
+    : progress?.availability[id]?.available === true;
+const previous = all.slice(0, index).findLast((item) => available(item.id));
+const nextLesson = all.slice(index + 1).find((item) => available(item.id));
+const current = enrollment?.progress[lesson.id];
+const complete = Boolean(current?.completedAt);
+const attempt = current?.quizAttempts.at(-1);
+const assignment = current?.assignments.at(-1);
+---
+
+<nav class="lms-breadcrumbs" aria-label="Breadcrumb">
+  <a href={basePath}>Courses</a>
+  <span>/</span>
+  <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+  <span>/</span>
+  <span>{lesson.title}</span>
+</nav>
+<div
+  class="lms-reader-grid"
+  data-lms-lesson
+  data-course-id={course.id}
+  data-lesson-id={lesson.id}
+  data-preview={preview ? "true" : "false"}
+  data-playback={current?.playback ? JSON.stringify(current.playback) : undefined}
+>
+  <aside class="lms-course-sidebar">
+    <a href={courseUrl(basePath, course.slug)} class="lms-sidebar-course">
+      {course.title}
+    </a>
+    {progress && (
+      <>
+        <p>{progress.percent}% complete</p>
+        <progress max="100" value={progress.percent}>
+          {progress.percent}%
+        </progress>
+      </>
+    )}
+    {course.modules.map((module, moduleIndex) => (
+      <details open={module.lessons.some((entry) => entry.id === lesson.id)}>
+        <summary>
+          <small>MODULE {moduleIndex + 1}</small>
+          {module.title}
+        </summary>
+        <ol>
+          {module.lessons.map((entry) => (
+            <li>
+              {available(entry.id) ? (
+                <a
+                  href={lessonUrl(basePath, course.slug, entry.id)}
+                  aria-current={entry.id === lesson.id ? "page" : undefined}
+                >
+                  <span aria-hidden="true">
+                    {enrollment?.progress[entry.id]?.completedAt ? "✓" : "○"}
+                  </span>
+                  <span>
+                    {entry.title}
+                    <small>
+                      {entry.kind} · {entry.durationMinutes} min
+                    </small>
+                  </span>
+                </a>
+              ) : (
+                <div class="lms-locked-lesson">
+                  <span>{entry.title}</span>
+                  <LessonAvailabilityNote availability={progress?.availability[entry.id]} />
+                  {preview && <small>Enroll to access this lesson.</small>}
+                </div>
+              )}
+            </li>
+          ))}
+        </ol>
+      </details>
+    ))}
+  </aside>
+  <article class="lms-lesson">
+    <header>
+      <p class="lms-eyebrow">
+        LESSON {index + 1} OF {all.length} · {lesson.kind.toUpperCase()}
+        {preview ? " · FREE PREVIEW" : ""}
+      </p>
+      <h1>{lesson.title}</h1>
+      {lesson.summary && <p class="lms-lead">{lesson.summary}</p>}
+    </header>
+    {preview && (
+      <p class="lms-notice">
+        You're viewing a free preview.{" "}
+        <a href={courseUrl(basePath, course.slug)}>Enroll to save your progress →</a>
+      </p>
+    )}
+    <LessonContent lesson={lesson} />
+    {!preview && lesson.kind === "quiz" && lesson.quiz && (
+      <section class="lms-assessment">
+        <p class="lms-eyebrow">CHECK YOUR UNDERSTANDING</p>
+        <h2>Lesson quiz</h2>
+        <p>
+          {lesson.quiz.questionCount} questions · Pass with {lesson.quiz.passingPercent}% ·{" "}
+          {lesson.quiz.maxAttempts} attempts
+          {lesson.quiz.timeLimitMinutes
+            ? ` · ${lesson.quiz.timeLimitMinutes} minutes per attempt`
+            : ""}
+        </p>
+        {complete ? (
+          <p class="lms-notice">✓ Quiz passed. {attempt?.percent}%</p>
+        ) : (
+          <div
+            data-lms-quiz
+            data-course-id={course.id}
+            data-lesson-id={lesson.id}
+            data-course-url={courseUrl(basePath, course.slug)}
+          >
+            <button class="lms-btn" type="button" data-lms-quiz-start>
+              {attempt?.status === "in_progress" ? "Resume quiz" : "Start quiz"}
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+            <div data-lms-quiz-content></div>
+          </div>
+        )}
+        {current?.quizAttempts.length ? (
+          <details>
+            <summary>Your quiz attempts</summary>
+            <ol>
+              {current.quizAttempts.map((item) => (
+                <li>
+                  {new Date(item.startedAt).toLocaleString("en-IN")} ·{" "}
+                  {item.status === "expired"
+                    ? "Time expired"
+                    : item.status === "in_progress"
+                      ? "In progress"
+                      : `${item.percent}% · ${item.passed ? "Passed" : "Try again"}`}
+                </li>
+              ))}
+            </ol>
+          </details>
+        ) : null}
+      </section>
+    )}
+    {!preview && lesson.kind === "assignment" && lesson.assignment && (
+      <section class="lms-assessment">
+        <p class="lms-eyebrow">PUT LEARNING INTO PRACTICE</p>
+        <h2>Your assignment</h2>
+        <p class="lms-text">{lesson.assignment.instructions}</p>
+        <p>
+          {lesson.assignment.passingPoints}/{lesson.assignment.maxPoints} points to pass
+          {lesson.assignment.dueAt
+            ? ` · Due ${new Date(lesson.assignment.dueAt).toLocaleString("en-IN")}`
+            : ""}
+        </p>
+        {assignment && (
+          <div class="lms-notice">
+            <strong>
+              {assignment.status === "submitted"
+                ? "Submitted · awaiting feedback"
+                : `Graded · ${assignment.points}/${assignment.maxPoints}`}
+            </strong>
+            <p class="lms-text">{assignment.feedback}</p>
+            <details>
+              <summary>Your submission</summary>
+              <p class="lms-text">{assignment.body}</p>
+              {assignment.attachmentUrl && (
+                <a href={assignment.attachmentUrl} target="_blank" rel="noopener noreferrer">
+                  Open attachment ↗
+                </a>
+              )}
+            </details>
+          </div>
+        )}
+        {!complete &&
+          (!assignment ||
+            (assignment.status === "graded" && lesson.assignment.allowResubmission)) && (
+            <form class="lms-form" data-lms-route="learner/assignment" data-lms-reload>
+              <input type="hidden" name="courseId" value={course.id} />
+              <input type="hidden" name="lessonId" value={lesson.id} />
+              <label>
+                <span>Your work</span>
+                <textarea name="body" required rows={8} maxlength={20_000}></textarea>
+              </label>
+              <label>
+                <span>Attachment link (optional)</span>
+                <input name="attachmentUrl" type="url" placeholder="https://…" />
+              </label>
+              <button class="lms-btn" type="submit">
+                Submit assignment
+              </button>
+              <p data-lms-feedback aria-live="polite"></p>
+            </form>
+          )}
+      </section>
+    )}
+    {!preview && !["quiz", "assignment"].includes(lesson.kind) && (
+      <section class="lms-lesson-completion">
+        {complete ? (
+          <p class="lms-notice">✓ You've completed this lesson.</p>
+        ) : (
+          <form data-lms-route="learner/complete" data-lms-reload>
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <button class="lms-btn" type="submit" data-lms-complete>
+              Mark lesson complete ✓
+            </button>
+            {lesson.minStudySeconds > 0 && (
+              <p class="lms-muted">
+                Study this lesson for at least {lesson.minStudySeconds} seconds before marking it
+                complete.
+              </p>
+            )}
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        )}
+      </section>
+    )}
+    {enrollment?.certificate && (
+      <div class="lms-achievement">
+        <span aria-hidden="true">✧</span>
+        <div>
+          <h2>Look how far you've come</h2>
+          <p>You've completed this learning path.</p>
+          <a class="lms-btn" href={certificateUrl(basePath, enrollment.certificate.id)}>
+            View your certificate →
+          </a>
+        </div>
+      </div>
+    )}
+    <nav class="lms-lesson-navigation" aria-label="Lesson navigation">
+      {previous ? (
+        <a href={lessonUrl(basePath, course.slug, previous.id)}>← Previous available lesson</a>
+      ) : (
+        <a href={courseUrl(basePath, course.slug)}>← Course overview</a>
+      )}
+      {nextLesson && (
+        <a href={lessonUrl(basePath, course.slug, nextLesson.id)}>Next available lesson →</a>
+      )}
+    </nav>
+    {!nextLesson && progress?.blockedLessonId && (
+      <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+    )}
+    {!preview && (
+      <>
+        <section class="lms-content-section">
+          <h2>A note to your future self</h2>
+          <p class="lms-muted">Only you can see these notes.</p>
+          <form class="lms-form" data-lms-route="learner/note">
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <label>
+              <span>Your lesson notes</span>
+              <textarea name="note" rows={5} maxlength={10_000}>{current?.note ?? ""}</textarea>
+            </label>
+            <button class="lms-btn lms-btn-outline" type="submit">
+              Save notes
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        </section>
+        <section
+          class="lms-content-section"
+          data-lms-discussions
+          data-course-id={course.id}
+          data-lesson-id={lesson.id}
+        >
+          <h2>Learn together</h2>
+          <p class="lms-muted">Ask a question, share an insight, or help another learner.</p>
+          <div data-lms-discussion-list></div>
+          <form class="lms-form" data-lms-route="learner/discussion">
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <label>
+              <span>Your contribution</span>
+              <textarea name="body" rows={4} required maxlength={5000}></textarea>
+            </label>
+            <button class="lms-btn lms-btn-outline" type="submit">
+              Post to discussion
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        </section>
+      </>
+    )}
+  </article>
+</div>

package/astro/components/MediaPlayer.astro

@@ -0,0 +1,111 @@
+---
+interface Props {
+  url: string;
+  kind: "video" | "audio" | "live";
+  title: string;
+  startsAt?: string | null;
+  captions?: { src: string; language: string; label: string }[];
+}
+const { url, kind, title, startsAt, captions = [] } = Astro.props;
+let embed: string | null = null;
+try {
+  const parsed = new URL(url, Astro.url.origin);
+  if (["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"].includes(parsed.hostname)) {
+    const id =
+      parsed.hostname === "youtu.be"
+        ? parsed.pathname.slice(1)
+        : (parsed.searchParams.get("v") ??
+          parsed.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]);
+    if (id && /^[a-zA-Z0-9_-]{11}$/.test(id))
+      embed = `https://www.youtube-nocookie.com/embed/${id}`;
+  } else if (["vimeo.com", "www.vimeo.com", "player.vimeo.com"].includes(parsed.hostname)) {
+    const id = parsed.pathname.match(/\/(?:video\/)?(\d+)$/)?.[1];
+    if (id) embed = `https://player.vimeo.com/video/${id}`;
+  }
+} catch {}
+---
+
+<div class="lms-media" data-lms-media>
+  {kind === "live" ? (
+    <div class="lms-live-card">
+      <p class="lms-eyebrow">LIVE LEARNING SESSION</p>
+      <h2>{title}</h2>
+      {startsAt && (
+        <p>
+          Starts{" "}
+          {new Date(startsAt).toLocaleString("en-IN", { dateStyle: "long", timeStyle: "short" })}
+        </p>
+      )}
+      <a class="lms-btn" href={url} target="_blank" rel="noopener noreferrer">
+        Open meeting ↗
+      </a>
+    </div>
+  ) : kind === "audio" ? (
+    <audio
+      src={url}
+      controls
+      preload="metadata"
+      aria-label={title}
+      crossorigin={captions.length ? "anonymous" : undefined}
+    >
+      {captions.map((track, index) => (
+        <track
+          kind="captions"
+          src={track.src}
+          srclang={track.language}
+          label={track.label}
+          default={index === 0}
+        />
+      ))}
+    </audio>
+  ) : embed ? (
+    <iframe
+      src={embed}
+      title={title}
+      allow="fullscreen; picture-in-picture; encrypted-media"
+      allowfullscreen
+      referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>
+  ) : (
+    <video
+      src={url}
+      controls
+      preload="metadata"
+      aria-label={title}
+      crossorigin={captions.length ? "anonymous" : undefined}
+    >
+      {captions.map((track, index) => (
+        <track
+          kind="captions"
+          src={track.src}
+          srclang={track.language}
+          label={track.label}
+          default={index === 0}
+        />
+      ))}
+    </video>
+  )}
+  {kind !== "live" && !embed && (
+    <div class="lms-actions">
+      <label>
+        Playback speed{" "}
+        <select data-lms-speed aria-label="Playback speed">
+          {[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map((rate) => (
+            <option value={rate} selected={rate === 1}>
+              {rate}×
+            </option>
+          ))}
+        </select>
+      </label>
+      <button type="button" class="lms-btn lms-btn-outline" data-lms-playback-save hidden>
+        Save position
+      </button>
+      <span data-lms-feedback aria-live="polite"></span>
+    </div>
+  )}
+  {kind !== "live" && (
+    <a class="lms-media-link" href={url} target="_blank" rel="noopener noreferrer">
+      Open media separately ↗
+    </a>
+  )}
+</div>

package/astro/components/index.ts

@@ -0,0 +1,7 @@
+export { default as LearningShell } from "./LearningShell.astro";
+export { default as CourseCatalog } from "./CourseCatalog.astro";
+export { default as CourseOverview } from "./CourseOverview.astro";
+export { default as LessonPlayer } from "./LessonPlayer.astro";
+export { default as LearnerDashboard } from "./LearnerDashboard.astro";
+export { default as CertificateCard } from "./CertificateCard.astro";
+export { default as CourseCard } from "./CourseCard.astro";

package/astro/layouts/AcademyLayout.astro

@@ -0,0 +1,84 @@
+---
+import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
+import { loginUrl } from "@anantagnanam/lms/server";
+import "../styles.css";
+interface Props {
+  title: string;
+  description?: string;
+  robots?: string;
+}
+const {
+  title,
+  description = "Courses and guided learning from Ananta Gnanam.",
+  robots,
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} · Ananta Gnanam</title>
+    <meta name="description" content={description} />
+    {robots && <meta name="robots" content={robots} />}
+    <style is:global>
+      body {
+        margin: 0;
+        background: #f7faf8;
+        color: #18271e;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      a {
+        color: inherit;
+      }
+      html {
+        scroll-behavior: smooth;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        html {
+          scroll-behavior: auto;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="lms-root">
+      <a class="lms-skip" href="#lms-main">
+        Skip to learning content
+      </a>
+      <header class="lms-site-header">
+        <a class="lms-brand" href={basePath}>
+          <span class="lms-brand-mark" aria-hidden="true">
+            ∞
+          </span>
+          <span>
+            Ananta Gnanam<small>ACADEMY</small>
+          </span>
+        </a>
+        <nav aria-label="Academy navigation">
+          <a href={basePath}>Explore courses</a>
+          <a href={`${basePath}/my-learning`}>My learning</a>
+          <a href="/">Main site ↗</a>
+          {!Astro.locals.user && (
+            <a class="lms-btn lms-btn-small" href={loginUrl(loginPath, Astro.url.pathname)}>
+              Sign in
+            </a>
+          )}
+        </nav>
+      </header>
+      <slot />
+      <footer class="lms-site-footer">
+        <a href="/">Ananta Gnanam</a>
+        <p>Infinite knowledge. Lifelong learning.</p>
+        <a href={basePath}>Keep exploring →</a>
+      </footer>
+    </div>
+  </body>
+</html>

package/astro/media-player.ts

@@ -0,0 +1,99 @@
+import type { Playback } from "@anantagnanam/lms/types";
+
+type Call = <T>(route: string, input: Record<string, unknown>, method?: string) => Promise<T>;
+
+/** Provider iframes own their controls. Only native media participates in resume. */
+export function initializeMedia(call: Call) {
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-media]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const media = root.querySelector<HTMLMediaElement>("video, audio");
+    if (!media) continue;
+    const lesson = root.closest<HTMLElement>("[data-lms-lesson]");
+    const speed = root.querySelector<HTMLSelectElement>("[data-lms-speed]")!;
+    const button = root.querySelector<HTMLButtonElement>("[data-lms-playback-save]")!;
+    const status = root.querySelector<HTMLElement>("[data-lms-feedback]")!;
+    const saved: Playback | undefined = lesson?.dataset.playback
+      ? JSON.parse(lesson.dataset.playback)
+      : undefined;
+    let revision = saved?.revision ?? 0;
+    let ready = false;
+    let busy = false;
+    let pending = false;
+    let failed = false;
+    let lastSave = Date.now();
+    const enabled = Boolean(lesson && lesson.dataset.preview !== "true");
+    button.hidden = !enabled;
+    const restore = () => {
+      if (ready) return;
+      ready = true;
+      if (saved) {
+        const position = Number.isFinite(media.duration)
+          ? Math.min(saved.positionSeconds, Math.max(0, media.duration - 0.1))
+          : saved.positionSeconds;
+        try {
+          media.currentTime = position;
+          media.playbackRate = saved.playbackRate;
+        } catch {
+          /* The browser may not have a seekable range yet. */
+        }
+        speed.value = String(media.playbackRate);
+        status.textContent = `Resumed at ${Math.floor(position / 60)}:${String(Math.floor(position % 60)).padStart(2, "0")}.`;
+      }
+    };
+    const save = async () => {
+      if (!enabled || !ready || failed || !Number.isFinite(media.currentTime)) return;
+      if (busy) {
+        pending = true;
+        return;
+      }
+      busy = true;
+      button.disabled = true;
+      pending = false;
+      status.textContent = "Saving playback position…";
+      try {
+        const result = await call<Playback>("learner/playback", {
+          courseId: lesson!.dataset.courseId,
+          lessonId: lesson!.dataset.lessonId,
+          positionSeconds: Math.min(media.currentTime, 86_400),
+          playbackRate: media.playbackRate,
+          expectedRevision: revision,
+        });
+        revision = result.revision;
+        lastSave = Date.now();
+        status.textContent = "Playback position saved.";
+      } catch (error) {
+        // A lost response can follow a successful write. Stop instead of overwriting another tab.
+        failed = true;
+        status.textContent = `${error instanceof Error ? error.message : "Could not save playback."} Reload this lesson before saving again.`;
+        status.setAttribute("role", "alert");
+      } finally {
+        busy = false;
+        button.disabled = failed;
+        if (pending && !failed) void save();
+      }
+    };
+    media.addEventListener("loadedmetadata", restore);
+    if (media.readyState >= 1) restore();
+    speed.addEventListener("change", () => {
+      media.playbackRate = Number(speed.value);
+    });
+    media.addEventListener("ratechange", () => {
+      speed.value = String(media.playbackRate);
+      void save();
+    });
+    media.addEventListener("timeupdate", () => {
+      if (!busy && Date.now() - lastSave >= 15_000) void save();
+    });
+    media.addEventListener("pause", () => {
+      void save();
+    });
+    media.addEventListener("ended", () => {
+      void save();
+    });
+    button.addEventListener("click", () => {
+      void save();
+    });
+  }
+}

package/astro/pages/author-preview.astro

@@ -0,0 +1,71 @@
+---
+import Layout from "virtual:anantagnanam-lms/layout";
+import LearningShell from "../components/LearningShell.astro";
+import LessonContent from "../components/LessonContent.astro";
+import { lmsAuthorLessonPreview, loginUrl, LmsError } from "@anantagnanam/lms/server";
+import { loginPath } from "virtual:anantagnanam-lms/config";
+export const prerender = false;
+Astro.response.headers.set("Cache-Control", "private, no-store");
+Astro.response.headers.set("X-Robots-Tag", "noindex, nofollow");
+let result: Awaited<ReturnType<typeof lmsAuthorLessonPreview>> | undefined;
+let error = "";
+try {
+  result = await lmsAuthorLessonPreview(
+    Astro.locals,
+    { courseId: Astro.params.courseId!, lessonId: Astro.params.lessonId! },
+    Astro.url.origin,
+  );
+} catch (cause) {
+  Astro.response.status = cause instanceof LmsError ? cause.status : 503;
+  error = cause instanceof Error ? cause.message : "Preview is unavailable.";
+}
+---
+
+<Layout
+  title={result ? `Preview: ${result.lesson.title}` : "Lesson preview"}
+  robots="noindex, nofollow"
+>
+  <LearningShell>
+    {result ? (
+      <article class="lms-lesson">
+        <p class="lms-notice">
+          Saved author preview · {result.course.title}. Save changes in the course editor, then
+          refresh this page. Linked content uses its published version.
+        </p>
+        <h1>{result.lesson.title}</h1>
+        {result.lesson.summary && <p class="lms-lead">{result.lesson.summary}</p>}
+        <LessonContent lesson={result.lesson} />
+        {result.lesson.quiz && (
+          <section class="lms-assessment">
+            <h2>Lesson quiz</h2>
+            <p>
+              {result.lesson.quiz.questionCount} questions · Pass with{" "}
+              {result.lesson.quiz.passingPercent}% · {result.lesson.quiz.maxAttempts} attempts
+            </p>
+            <p>Assessment summary only. This preview does not create an attempt.</p>
+          </section>
+        )}
+        {result.lesson.assignment && (
+          <section class="lms-assessment">
+            <h2>Your assignment</h2>
+            <p class="lms-text">{result.lesson.assignment.instructions}</p>
+            <p>
+              {result.lesson.assignment.passingPoints}/{result.lesson.assignment.maxPoints} points
+              to pass
+            </p>
+          </section>
+        )}
+      </article>
+    ) : (
+      <section class="lms-gate">
+        <h1>Lesson preview</h1>
+        <p>{error}</p>
+        {!Astro.locals.user && (
+          <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname)}>
+            Sign in →
+          </a>
+        )}
+      </section>
+    )}
+  </LearningShell>
+</Layout>