@anantagnanam/lms 0.1.0 → 0.3.0

package/astro/components/AssignmentFeedback.astro

@@ -0,0 +1,32 @@
+---
+import type { AssignmentSubmission } from "@anantagnanam/lms/types";
+import AssignmentRubric from "./AssignmentRubric.astro";
+interface Props {
+  submission: AssignmentSubmission;
+}
+const { submission } = Astro.props;
+---
+
+<div class="lms-notice">
+  <strong>
+    {submission.status === "submitted"
+      ? "Submitted · awaiting feedback"
+      : `Graded · ${submission.points}/${submission.maxPoints} · ${submission.points! >= submission.passingPoints ? "Passed" : "Below passing grade"}`}
+  </strong>
+  <p>Submitted {new Date(submission.submittedAt).toLocaleString("en-IN")}</p>
+  {submission.gradedAt && <p>Graded {new Date(submission.gradedAt).toLocaleString("en-IN")}</p>}
+  {submission.feedback && <p class="lms-text">{submission.feedback}</p>}
+  <AssignmentRubric
+    rubric={submission.rubric}
+    scores={submission.status === "graded" ? submission.rubricScores : undefined}
+  />
+  <details>
+    <summary>Your submitted work</summary>
+    <p class="lms-text">{submission.body}</p>
+    {submission.attachmentUrl && (
+      <a href={submission.attachmentUrl} target="_blank" rel="noopener noreferrer">
+        Open attachment ↗
+      </a>
+    )}
+  </details>
+</div>

package/astro/components/AssignmentRubric.astro

@@ -0,0 +1,27 @@
+---
+import type { RubricCriterion, RubricScore } from "@anantagnanam/lms/types";
+interface Props {
+  rubric?: RubricCriterion[];
+  scores?: RubricScore[];
+}
+const { rubric = [], scores } = Astro.props;
+---
+
+{rubric.length > 0 && (
+  <div class="lms-rubric">
+    <h3>{scores ? "Criterion feedback" : "Grading rubric"}</h3>
+    <ul>
+      {rubric.map((criterion) => {
+        const score = scores?.find((item) => item.criterionId === criterion.id);
+        return (
+          <li>
+            <strong>{criterion.title}</strong> · {score ? `${score.points}/` : ""}
+            {criterion.maxPoints} points
+            {criterion.description && <p class="lms-text">{criterion.description}</p>}
+            {score?.feedback && <p class="lms-text">{score.feedback}</p>}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+)}

package/astro/components/CourseOverview.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from "emdash/ui";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
 import type {
   CourseDetail,
   PublicEnrollment,
@@ -26,12 +27,17 @@ const {
   cohortId,
   cohortMembership = null,
 } = Astro.props;
-const firstLesson = course.modules.flatMap((module) => module.lessons)[0];
 const active =
   enrollment &&
   ["active", "completed"].includes(enrollment.status) &&
   enrollment.effectiveAccess === "granted";
-const next = progress?.nextLessonId ?? firstLesson?.id;
+const next = progress?.nextLessonId;
+const revisit =
+  !next && enrollment?.status === "completed"
+    ? course.modules
+        .flatMap((module) => module.lessons)
+        .find((lesson) => progress?.availability[lesson.id]?.available)
+    : undefined;
 ---
 
 <nav class="lms-breadcrumbs" aria-label="Breadcrumb">
@@ -73,6 +79,14 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
             {enrollment.status === "completed" ? "Revisit lessons" : "Continue learning"} →
           </a>
         )}
+        {revisit && (
+          <a class="lms-btn" href={lessonUrl(basePath, course.slug, revisit.id)}>
+            Revisit lessons →
+          </a>
+        )}
+        {!next && progress.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
         {enrollment.certificate && (
           <a
             class="lms-btn lms-btn-outline"
@@ -97,6 +111,9 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
             : enrollment.decisionReason || "Contact an administrator to manage your access."}
         </p>
         <a href={`${basePath}/my-learning`}>Open My Learning →</a>
+        {progress?.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
       </div>
     ) : !Astro.locals.user ? (
       <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname + Astro.url.search)}>
@@ -222,7 +239,11 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
                     : String(index + 1).padStart(2, "0")}
                 </span>
                 <div>
-                  {active || lesson.preview ? (
+                  {(
+                    enrollment && ["active", "completed"].includes(enrollment.status)
+                      ? progress?.availability[lesson.id]?.available
+                      : lesson.preview
+                  ) ? (
                     <a href={lessonUrl(basePath, course.slug, lesson.id)}>{lesson.title}</a>
                   ) : (
                     <strong>{lesson.title}</strong>
@@ -231,6 +252,7 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
                     {lesson.kind} · {lesson.durationMinutes} min
                     {!lesson.required ? " · optional" : ""}
                   </small>
+                  <LessonAvailabilityNote availability={progress?.availability[lesson.id]} />
                 </div>
                 {lesson.preview && <span class="lms-badge">Preview</span>}
               </li>

package/astro/components/LearnerDashboard.astro

@@ -2,6 +2,7 @@
 import type { CourseCard, PublicEnrollment, ProgressSummary, Page } from "@anantagnanam/lms/types";
 import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
 import { basePath } from "virtual:anantagnanam-lms/config";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
 interface Props {
   page: Page<{ course: CourseCard; enrollment: PublicEnrollment; progress: ProgressSummary }>;
   error?: string;
@@ -66,6 +67,11 @@ next.searchParams.set("cursor", page.cursor ?? "");
           </p>
         )}
         <div class="lms-actions">
+          {!progress.nextLessonId && progress.blockedLessonId && (
+            <LessonAvailabilityNote
+              availability={progress.availability[progress.blockedLessonId]}
+            />
+          )}
           {["active", "completed"].includes(enrollment.status) &&
             enrollment.effectiveAccess === "granted" &&
             progress.nextLessonId && (
@@ -76,6 +82,9 @@ next.searchParams.set("cursor", page.cursor ?? "");
           <a class="lms-btn lms-btn-outline" href={courseUrl(basePath, course.slug)}>
             Course overview
           </a>
+          <a href={`${basePath}/my-learning/study?courseId=${encodeURIComponent(course.id)}`}>
+            Notebook &amp; agenda
+          </a>
           {enrollment.certificate && (
             <a
               class="lms-btn lms-btn-outline"

package/astro/components/LearningShell.astro

@@ -9,15 +9,30 @@ const path = Astro.url.pathname;
     <a href={basePath} aria-current={path === basePath ? "page" : undefined}>
       Explore courses
     </a>
+    <a href={`${basePath}/paths`} aria-current={path === `${basePath}/paths` ? "page" : undefined}>
+      Learning paths
+    </a>
+    <a
+      href={`${basePath}/my-learning/library`}
+      aria-current={path === `${basePath}/my-learning/library` ? "page" : undefined}
+    >
+      My library &amp; preferences
+    </a>
     <a
       href={`${basePath}/my-learning`}
-      aria-current={path.includes("/my-learning") ? "page" : undefined}
+      aria-current={path === `${basePath}/my-learning` ? "page" : undefined}
     >
       My learning
     </a>
     {Astro.locals.user && Astro.locals.user.role >= 20 && (
       <a href={`${basePath}/teach`}>Course studio</a>
     )}
+    <a
+      href={`${basePath}/my-learning/study`}
+      aria-current={path === `${basePath}/my-learning/study` ? "page" : undefined}
+    >
+      Notebook &amp; agenda
+    </a>
   </nav>
   <main id="lms-main" class="lms-container">
     <slot />

package/astro/components/LessonAvailabilityNote.astro

@@ -0,0 +1,26 @@
+---
+import type { LessonAvailability } from "@anantagnanam/lms/types";
+interface Props {
+  availability?: LessonAvailability;
+}
+const { availability } = Astro.props;
+---
+
+{availability && !availability.available && (
+  <small class="lms-lock-note">
+    {availability.reason}
+    {availability.releaseAt && (
+      <span>
+        {" "}
+        Available from{" "}
+        <time datetime={availability.releaseAt}>
+          {new Date(availability.releaseAt).toLocaleString("en-IN", {
+            timeZone: "UTC",
+            timeZoneName: "short",
+          })}
+        </time>
+        .
+      </span>
+    )}
+  </small>
+)}

package/astro/components/LessonContent.astro

@@ -0,0 +1,67 @@
+---
+import { PortableText, type TypedObject } from "emdash/ui";
+import MediaPlayer from "./MediaPlayer.astro";
+import type { PublicLesson } from "@anantagnanam/lms/types";
+interface Props {
+  lesson: PublicLesson;
+}
+const { lesson } = Astro.props;
+---
+
+{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}
+    captions={lesson.captions ?? []}
+  />
+)}
+{lesson.transcript && (
+  <details class="lms-resources" data-lms-transcript>
+    <summary>Read transcript</summary>
+    <div class="lms-actions">
+      <label>
+        Search transcript <input type="search" maxlength={200} data-lms-transcript-search />
+      </label>
+      <button type="button" class="lms-btn lms-btn-outline" data-lms-transcript-previous disabled>
+        Previous match
+      </button>
+      <button type="button" class="lms-btn lms-btn-outline" data-lms-transcript-next disabled>
+        Next match
+      </button>
+    </div>
+    <p data-lms-transcript-status aria-live="polite"></p>
+    <p class="lms-text" data-lms-transcript-text>
+      {lesson.transcript}
+    </p>
+  </details>
+)}
+<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>
+)}

package/astro/components/LessonPlayer.astro

@@ -1,13 +1,15 @@
 ---
-import { PortableText, type TypedObject } from "emdash/ui";
-import MediaPlayer from "./MediaPlayer.astro";
+import LessonContent from "./LessonContent.astro";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
+import AssignmentRubric from "./AssignmentRubric.astro";
+import AssignmentFeedback from "./AssignmentFeedback.astro";
 import type {
   CourseDetail,
   PublicLesson,
   PublicEnrollment,
   ProgressSummary,
 } from "@anantagnanam/lms/types";
-import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
+import { courseUrl, lessonUrl, certificateUrl, assignmentBlock } from "@anantagnanam/lms/server";
 import { basePath } from "virtual:anantagnanam-lms/config";
 interface Props {
   course: CourseDetail;
@@ -19,14 +21,24 @@ 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);
 const assignment = current?.assignments.at(-1);
+const draft = current?.assignmentDraft;
+const assignmentClosed = lesson.assignment
+  ? assignmentBlock(
+      lesson.assignment,
+      current ?? { completedAt: null, assignments: [] },
+      new Date(),
+    )
+  : null;
 ---
 
 <nav class="lms-breadcrumbs" aria-label="Breadcrumb">
@@ -42,6 +54,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 +77,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 +120,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 +139,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"}
@@ -192,45 +178,90 @@ const assignment = current?.assignments.at(-1);
             ? ` · 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>
+        <AssignmentRubric rubric={lesson.assignment.rubric} />
+        {assignment && <AssignmentFeedback submission={assignment} />}
+        {(current?.assignments.length ?? 0) > 1 && (
+          <details>
+            <summary>Earlier submissions and feedback ({current!.assignments.length - 1})</summary>
+            {current!.assignments
+              .slice(0, -1)
+              .toReversed()
+              .map((item) => (
+                <AssignmentFeedback submission={item} />
+              ))}
+          </details>
         )}
-        {!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
+        {assignmentClosed ? (
+          <>
+            <p class="lms-notice">{assignmentClosed.message}</p>
+            {(draft?.body || draft?.attachmentUrl) && (
+              <details open>
+                <summary>Your saved draft (not submitted)</summary>
+                <p class="lms-text">{draft.body}</p>
+                {draft.attachmentUrl && (
+                  <a href={draft.attachmentUrl} target="_blank" rel="noopener noreferrer">
+                    Open draft attachment ↗
+                  </a>
+                )}
+              </details>
+            )}
+          </>
+        ) : (
+          <form
+            class="lms-form"
+            data-lms-assignment
+            data-course-id={course.id}
+            data-lesson-id={lesson.id}
+            data-draft-revision={draft?.revision ?? 0}
+          >
+            <p>Drafts save automatically. Only you can see your draft until you submit it.</p>
+            <label>
+              <span>Your work</span>
+              <textarea
+                name="body"
+                required
+                rows={8}
+                maxlength={20_000}
+              >{draft?.body ?? ""}</textarea>
+            </label>
+            <label>
+              <span>Attachment link (optional)</span>
+              <input
+                name="attachmentUrl"
+                type="url"
+                placeholder="https://…"
+                value={draft?.attachmentUrl ?? ""}
+              />
+            </label>
+            <button class="lms-btn lms-btn-outline" type="button" data-lms-save-draft>
+              Save draft
+            </button>
+            <button class="lms-btn" type="submit">
+              Submit assignment
+            </button>
+            <p data-lms-feedback aria-live="polite">
+              {draft?.updatedAt ? "Saved draft restored." : "Your draft is empty."}
+            </p>
+            <button class="lms-btn lms-btn-outline" type="button" data-lms-review-draft hidden>
+              Review saved work
+            </button>
+            <section
+              class="lms-notice"
+              data-lms-assignment-conflict
+              hidden
+              aria-label="Review saved work"
+            >
+              <h3>Saved work</h3>
+              <p class="lms-text" data-lms-saved-draft></p>
+              <button class="lms-btn lms-btn-outline" type="button" data-lms-use-saved>
+                Use saved draft
               </button>
-              <p data-lms-feedback aria-live="polite"></p>
-            </form>
-          )}
+              <button class="lms-btn lms-btn-outline" type="button" data-lms-keep-local>
+                Keep my local draft
+              </button>
+            </section>
+          </form>
+        )}
       </section>
     )}
     {!preview && !["quiz", "assignment"].includes(lesson.kind) && (
@@ -268,21 +299,25 @@ 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">
           <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="expectedRevision" value={current?.noteRevision ?? 0} />
             <input type="hidden" name="courseId" value={course.id} />
             <input type="hidden" name="lessonId" value={lesson.id} />
             <label>
@@ -294,6 +329,38 @@ const assignment = current?.assignments.at(-1);
             </button>
             <p data-lms-feedback aria-live="polite"></p>
           </form>
+          <p>
+            <a href={`${basePath}/my-learning/study?courseId=${encodeURIComponent(course.id)}`}>
+              Open course notebook &amp; agenda →
+            </a>
+          </p>
+          <section data-lms-quick-note data-course-id={course.id} data-lesson-id={lesson.id}>
+            <h3>Notes &amp; bookmarks</h3>
+            <p>
+              Save a separate thought or bookmark the current moment in native audio/video. Only you
+              can see it.
+            </p>
+            <form class="lms-form">
+              <label>
+                <span>New note</span>
+                <textarea name="body" rows={3} maxlength={5000}></textarea>
+              </label>
+              <label>
+                <input type="checkbox" name="starred" /> Star this note
+              </label>
+              <button type="button" class="lms-btn lms-btn-outline" data-lms-capture-time hidden>
+                Use current playback time
+              </button>
+              <p data-lms-note-time></p>
+              <button type="button" class="lms-text-button" data-lms-clear-time hidden>
+                Remove timestamp
+              </button>
+              <button type="submit" class="lms-btn lms-btn-outline">
+                Add to notebook
+              </button>
+              <p data-lms-feedback aria-live="polite"></p>
+            </form>
+          </section>
         </section>
         <section
           class="lms-content-section"