@anantagnanam/lms 0.1.0 → 0.2.0

package/astro/components/LessonPlayer.astro

@@ -1,6 +1,6 @@
 ---
-import { PortableText, type TypedObject } from "emdash/ui";
-import MediaPlayer from "./MediaPlayer.astro";
+import LessonContent from "./LessonContent.astro";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
 import type {
   CourseDetail,
   PublicLesson,
@@ -19,10 +19,12 @@ interface Props {
 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 nextLesson = all[index + 1];
-const nextUrl = nextLesson
-  ? lessonUrl(basePath, course.slug, nextLesson.id)
-  : `${basePath}/my-learning`;
+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);
@@ -42,6 +44,7 @@ const assignment = current?.assignments.at(-1);
   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">
@@ -64,20 +67,28 @@ const assignment = current?.assignments.at(-1);
         <ol>
           {module.lessons.map((entry) => (
             <li>
-              <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>
+              {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>
@@ -99,42 +110,7 @@ const assignment = current?.assignments.at(-1);
         <a href={courseUrl(basePath, course.slug)}>Enroll to save your progress →</a>
       </p>
     )}
-    {lesson.mediaUrl && ["video", "audio", "live"].includes(lesson.kind) && (
-      <MediaPlayer
-        url={lesson.mediaUrl}
-        kind={lesson.kind as "video" | "audio" | "live"}
-        title={lesson.title}
-        startsAt={lesson.liveStartsAt}
-      />
-    )}
-    <div class="lms-lesson-body">
-      {lesson.portableText.length > 0 ? (
-        <PortableText value={lesson.portableText as TypedObject[]} />
-      ) : (
-        lesson.body
-          .split(/\n\s*\n/)
-          .filter(Boolean)
-          .map((paragraph) => <p class="lms-text">{paragraph}</p>)
-      )}
-    </div>
-    {lesson.resources.length > 0 && (
-      <section class="lms-resources">
-        <h2>Keep exploring</h2>
-        <ul>
-          {lesson.resources.map((resource) => (
-            <li>
-              <a href={resource.url} target="_blank" rel="noopener noreferrer">
-                <span aria-hidden="true">↗</span>
-                <span>
-                  {resource.title}
-                  {resource.description && <small>{resource.description}</small>}
-                </span>
-              </a>
-            </li>
-          ))}
-        </ul>
-      </section>
-    )}
+    <LessonContent lesson={lesson} />
     {!preview && lesson.kind === "quiz" && lesson.quiz && (
       <section class="lms-assessment">
         <p class="lms-eyebrow">CHECK YOUR UNDERSTANDING</p>
@@ -153,7 +129,7 @@ const assignment = current?.assignments.at(-1);
             data-lms-quiz
             data-course-id={course.id}
             data-lesson-id={lesson.id}
-            data-next-url={nextUrl}
+            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"}
@@ -268,15 +244,18 @@ const assignment = current?.assignments.at(-1);
       </div>
     )}
     <nav class="lms-lesson-navigation" aria-label="Lesson navigation">
-      {index > 0 ? (
-        <a href={lessonUrl(basePath, course.slug, all[index - 1]!.id)}>← Previous lesson</a>
+      {previous ? (
+        <a href={lessonUrl(basePath, course.slug, previous.id)}>← Previous available lesson</a>
       ) : (
         <a href={courseUrl(basePath, course.slug)}>← Course overview</a>
       )}
-      {index + 1 < all.length && (
-        <a href={lessonUrl(basePath, course.slug, all[index + 1]!.id)}>Next lesson →</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">

package/astro/components/MediaPlayer.astro

@@ -4,8 +4,9 @@ interface Props {
   kind: "video" | "audio" | "live";
   title: string;
   startsAt?: string | null;
+  captions?: { src: string; language: string; label: string }[];
 }
-const { url, kind, title, startsAt } = Astro.props;
+const { url, kind, title, startsAt, captions = [] } = Astro.props;
 let embed: string | null = null;
 try {
   const parsed = new URL(url, Astro.url.origin);
@@ -24,7 +25,7 @@ try {
 } catch {}
 ---
 
-<div class="lms-media">
+<div class="lms-media" data-lms-media>
   {kind === "live" ? (
     <div class="lms-live-card">
       <p class="lms-eyebrow">LIVE LEARNING SESSION</p>
@@ -40,7 +41,23 @@ try {
       </a>
     </div>
   ) : kind === "audio" ? (
-    <audio src={url} controls preload="metadata" aria-label={title}></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}
@@ -50,7 +67,41 @@ try {
       referrerpolicy="strict-origin-when-cross-origin"
     ></iframe>
   ) : (
-    <video src={url} controls preload="metadata" aria-label={title}></video>
+    <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">

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>

package/astro/pages/course.astro

@@ -60,6 +60,16 @@ try {
   robots={course ? undefined : "noindex, follow"}
 >
   <LearningShell>
+    {course && Astro.locals.user && (
+      <form class="lms-actions" data-lms-route="learner/saved/save">
+        <input type="hidden" name="courseId" value={course.id} />
+        <input type="hidden" name="saved" value="true" />
+        <button class="lms-btn lms-btn-outline" type="submit">
+          Save course to my library
+        </button>
+        <p data-lms-feedback aria-live="polite"></p>
+      </form>
+    )}
     {course ? (
       <CourseOverview
         course={course}

package/astro/pages/lesson.astro

@@ -2,6 +2,7 @@
 import Layout from "virtual:anantagnanam-lms/layout";
 import LearningShell from "../components/LearningShell.astro";
 import LessonPlayer from "../components/LessonPlayer.astro";
+import LessonAvailabilityNote from "../components/LessonAvailabilityNote.astro";
 import { lmsPublic, lmsLearner, courseUrl, loginUrl, LmsError } from "@anantagnanam/lms/server";
 import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
 import type {
@@ -27,6 +28,7 @@ try {
     }>(Astro.locals, "learner/course-by-slug", { slug: Astro.params.slug }, Astro.url.origin);
     course = result.course;
     enrollment = result.enrollment;
+    progress = result.progress;
   } else
     course = await lmsPublic<CourseDetail>(
       Astro.locals,
@@ -84,6 +86,7 @@ try {
         <p class="lms-eyebrow">ONE STEP AT A TIME</p>
         <h1>Continue your learning</h1>
         <p>{error}</p>
+        <LessonAvailabilityNote availability={progress?.availability[Astro.params.lessonId!]} />
         {!Astro.locals.user && (
           <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname)}>
             Sign in →

package/astro/pages/library.astro

@@ -0,0 +1,173 @@
+---
+import Layout from "virtual:anantagnanam-lms/layout";
+import LearningShell from "../components/LearningShell.astro";
+import { lmsLearner, loginUrl, courseUrl, LmsError } from "@anantagnanam/lms/server";
+import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
+import type { Page, CourseCard, LearnerPath, LearnerPreferences } from "@anantagnanam/lms/types";
+export const prerender = false;
+Astro.response.headers.set("Cache-Control", "private, no-store");
+if (!Astro.locals.user)
+  return Astro.redirect(loginUrl(loginPath, Astro.url.pathname + Astro.url.search));
+let saved: Page<{ courseId: string; course: CourseCard | null }> = { items: [], hasMore: false };
+let paths: Page<LearnerPath> = { items: [], hasMore: false };
+let preferences: { value: LearnerPreferences; revision: string | null } | undefined;
+let error = "";
+try {
+  [saved, paths, preferences] = await Promise.all([
+    lmsLearner<typeof saved>(
+      Astro.locals,
+      "learner/saved",
+      { cursor: Astro.url.searchParams.get("saved") ?? undefined },
+      Astro.url.origin,
+    ),
+    lmsLearner<typeof paths>(
+      Astro.locals,
+      "learner/paths",
+      { cursor: Astro.url.searchParams.get("paths") ?? undefined },
+      Astro.url.origin,
+    ),
+    lmsLearner<NonNullable<typeof preferences>>(
+      Astro.locals,
+      "learner/preferences",
+      {},
+      Astro.url.origin,
+    ),
+  ]);
+} catch (cause) {
+  Astro.response.status = cause instanceof LmsError ? cause.status : 503;
+  error = cause instanceof Error ? cause.message : "Your library is unavailable.";
+}
+const more = (key: string, cursor: string) => {
+  const url = new URL(Astro.url);
+  url.searchParams.set(key, cursor);
+  return url.href;
+};
+---
+
+<Layout title="My library and preferences" robots="noindex, follow">
+  <LearningShell>
+    <h1>My library &amp; preferences</h1>
+    {error && <p role="alert">{error}</p>}
+    <section>
+      <h2>Saved courses</h2>
+      {!error && !saved.items.length && (
+        <p>Save a course from its overview to find it here later.</p>
+      )}
+      {saved.items.map(({ courseId, course }) => (
+        <article class="lms-learning-card">
+          <h3>
+            {course ? (
+              <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+            ) : (
+              "Course currently unavailable"
+            )}
+          </h3>
+          <form data-lms-route="learner/saved/save" data-lms-reload>
+            <input type="hidden" name="courseId" value={courseId} />
+            <input type="hidden" name="saved" value="false" />
+            <button class="lms-text-button" type="submit">
+              Remove from saved courses
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        </article>
+      ))}
+      {saved.hasMore && saved.cursor && (
+        <a href={more("saved", saved.cursor)}>More saved courses →</a>
+      )}
+    </section>
+    <section>
+      <h2>My learning paths</h2>
+      <p>
+        Your joined paths keep their original course lists when administrators edit the program.
+      </p>
+      {!error && !paths.items.length && <a href={`${basePath}/paths`}>Explore learning paths</a>}
+      {paths.items.map((path) => (
+        <article class="lms-learning-card">
+          <h3>{path.title}</h3>
+          <p>
+            {path.completed} of {path.total} courses completed
+          </p>
+          <progress value={path.completed} max={path.total} aria-label={`${path.title} progress`}>
+            {path.completed}/{path.total}
+          </progress>
+          <ol>
+            {path.courses.map(({ course, completed }) => (
+              <li>
+                {course ? (
+                  <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+                ) : (
+                  "Course currently unavailable"
+                )}
+                {completed && " · Completed"}
+              </li>
+            ))}
+          </ol>
+        </article>
+      ))}
+      {paths.hasMore && paths.cursor && (
+        <a href={more("paths", paths.cursor)}>More joined paths →</a>
+      )}
+    </section>
+    {preferences && (
+      <section class="lms-learning-card">
+        <h2>Learning preferences</h2>
+        <form class="lms-form" data-lms-route="learner/preferences/save" data-lms-reload>
+          <input type="hidden" name="expectedRevision" value={preferences.revision ?? ""} />
+          <label>
+            <span>Email updates</span>
+            <select name="emailNotifications">
+              <option value="true" selected={preferences.value.emailNotifications}>
+                Enabled when the academy sends email
+              </option>
+              <option value="false" selected={!preferences.value.emailNotifications}>
+                Off
+              </option>
+            </select>
+          </label>
+          <label>
+            <span>Weekly lesson goal</span>
+            <input
+              type="number"
+              name="weeklyGoalLessons"
+              min="0"
+              max="100"
+              value={preferences.value.weeklyGoalLessons}
+            />
+          </label>
+          <p>
+            Set 0 for no goal. Your goal is a personal target; it does not change deadlines or
+            completion requirements.
+          </p>
+          <button class="lms-btn" type="submit">
+            Save preferences
+          </button>
+          <p data-lms-feedback aria-live="polite"></p>
+        </form>
+      </section>
+    )}
+    <section class="lms-learning-card" data-lms-export>
+      <h2>Download my learning data</h2>
+      <p>
+        Download each section as JSON, five records per page. Continue until all pages are
+        downloaded. Exports include only your records and omit quiz answer keys.
+      </p>
+      <label>
+        Data section{" "}
+        <select data-lms-export-section>
+          <option value="enrollments">Learning history, notes and assessments</option>
+          <option value="discussions">Discussion contributions</option>
+          <option value="reviews">Course reviews</option>
+          <option value="notifications">Notifications</option>
+          <option value="saved_courses">Saved courses</option>
+          <option value="path_enrollments">Joined paths</option>
+          <option value="cohort_enrollments">Cohort membership</option>
+        </select>
+      </label>
+      <button type="button" class="lms-btn" data-lms-export-download>
+        Download first page
+      </button>
+      <p data-lms-feedback aria-live="polite"></p>
+    </section>
+  </LearningShell>
+</Layout>