feat: HLS streaming, transcripts, agent course generation & landing-page course previews (#663)

New features: - HLS video encoding/streaming (hls routes, hls-encoder) and a media transcripts pipeline (transcripts route + media-transcript queries) - AI assistant chat vs. run model: agent-course-generation worker/queue, run-monitor pane, chat-changes card, content ask-ai bar - Per-theme course-page previews across org landing-page themes (bold, classic, corporate, editorial, etc.) with a shared course token/component set - View-as-student mode and login-link / link-invite invite flows Refactor: - Extract packages/core consolidating config (env, storage, dashboard-url), services and utils previously duplicated under apps/api/src/config - Remove legacy agent service modules (chat-tools, chat-context, context-window, document, fetch-url, lesson-content) - Relax Cross-Origin-Resource-Policy to allow cross-origin media embedding - Add format script to tenant-router so turbo run format covers it
2026-06-07 18:43:05 +01:00
parent a2e70779a0
commit d5b07d356e
496 changed files with 19050 additions and 8312 deletions
@@ -3,8 +3,8 @@
  import { currentOrg } from '$lib/utils/store/org';
  import { onMount } from 'svelte';
  import { afterNavigate } from '$app/navigation';
-  import { env } from '$env/dynamic/public';
  import { analytics } from '@cio/analytics/client';
+  import { getRequestBaseUrl } from '$lib/utils/services/api';
  import type { Snippet } from 'svelte';
  import type { AccountOrg } from '$features/app/types';

@@ -19,10 +19,11 @@
  let { children, data }: Props = $props();

  onMount(() => {
-    if (!env.PUBLIC_SERVER_URL) return;
+    const apiBaseUrl = getRequestBaseUrl();
+    if (!apiBaseUrl) return;

    analytics.init({
-      endpoint: `${env.PUBLIC_SERVER_URL.replace(/\/$/, '')}/dash/track`,
+      endpoint: `${apiBaseUrl.replace(/\/$/, '')}/dash/track`,
      orgId: data.org?.id ?? undefined
    });
    analytics.pageView({ kind: 'landing' });
@@ -3,7 +3,7 @@ import type { CourseBySlugWithOrg, GetCourseBySlugRequest } from '$features/cour
 import type { GetOrganizationRequest } from '$features/org/utils/types';
 import { classroomio, type InferResponseType } from '$lib/utils/services/api';
 import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
-import { redirect } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';

 type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
 type GetOrganizationSuccess = Extract<InferResponseType<GetOrganizationRequest>, { success: true }>;
@@ -37,12 +37,7 @@ export const load = async ({ params = { slug: '' }, parent, url }) => {
  if (!courseResult.ok || !courseResult.body.data) {
    console.error('Failed to fetch course:', courseResult);

-    return {
-      slug: params.slug,
-      course: null,
-      org: parentOrg ?? null,
-      pageMetaTags: null
-    };
+    throw error(404, 'Course not found');
  }

  const course = courseResult.body.data as CourseBySlugWithOrg;
@@ -1,66 +1,12 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
  import { page } from '$app/state';
-  import { onMount } from 'svelte';

-  import { basePath } from '$lib/utils/store/app';
-  import { t } from '$lib/utils/functions/translations';
-  import { user } from '$lib/utils/store/user';
  import { CourseLandingPage } from '$features/ui';
  import { PoweredBy } from '$features/ui';
-  import {
-    importThemeNavHero,
-    normalizeLandingPageSettings,
-    themeHeaderShellClass,
-    themeStyle,
-    themeRendersNavInsideHero
-  } from '$features/org/utils/landing-page';
-
-  import { OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
-  import type { Component } from 'svelte';

  let { data } = $props();

-  const landingSettings = $derived(normalizeLandingPageSettings(data.org?.landingpage));
-
-  const authAction = $derived(
-    $user.isLoggedIn
-      ? {
-          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
-          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
-        }
-      : {
-          label: t.get('navigation.login'),
-          href: '/login'
-        }
-  );
-
-  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
-  const shellStyle = $derived(themeStyle(landingSettings.theme));
-  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
-
-  const courseHero = $derived.by(() => {
-    if (!data.course) {
-      return landingSettings.hero;
-    }
-
-    const enrollmentsOpen = data.course.metadata?.allowNewStudent === true;
-
-    return {
-      ...landingSettings.hero,
-      heading: data.course.title,
-      subheading: data.course.description || landingSettings.hero.subheading,
-      primaryAction: {
-        label: t.get('course.navItem.landing_page.start_course'),
-        href: resolve(`/course/${data.course.slug}/enroll`, {}),
-        disabled: !enrollmentsOpen
-      },
-      image: data.course.logo || landingSettings.hero.image
-    };
-  });
-
  const orgName = $derived(data.org?.name ?? data.course?.org?.name ?? 'ClassroomIO');
-  const logoUrl = $derived(data.org?.avatarUrl ?? undefined);

  const courseJsonLd = $derived.by(() => {
    if (!data.course) return null;
@@ -80,17 +26,6 @@

    return JSON.stringify(schema).replace(/</g, '\\u003c');
  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let NavComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let HeroComponent = $state<Component<any> | null>(null);
-
-  onMount(async () => {
-    const { NavComponent: nav, HeroComponent: hero } = await importThemeNavHero(landingSettings.theme);
-    NavComponent = nav;
-    HeroComponent = hero;
-  });
 </script>

 <svelte:head>
@@ -101,23 +36,5 @@

 {#if data.course}
  <PoweredBy />
-
-  <main class={shellClass} style={shellStyle}>
-    {#if NavComponent && HeroComponent}
-      {#if navInsideHero}
-        <HeroComponent hero={courseHero} {orgName}>
-          {#snippet navigation()}
-            <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
-          {/snippet}
-        </HeroComponent>
-      {:else}
-        <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
-        <HeroComponent hero={courseHero} {orgName} />
-      {/if}
-    {/if}
-
-    <CourseLandingPage courseData={data.course} />
-
-    <OrgLandingPageFooter {orgName} {logoUrl} footer={landingSettings.footer} variant={landingSettings.theme} />
-  </main>
+  <CourseLandingPage courseData={data.course} org={data.org} themeComponent={data.themeComponent} />
 {/if}
@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+import { normalizeLandingPageSettings, importCourseLandingPageTheme } from '$features/org/utils/landing-page';
+
+// `data` is the return value of the sibling +page.server.ts — layout data comes via parent().
+export const load = async ({ data }) => {
+  if (!data.course) {
+    return { ...data, themeComponent: null as Component | null };
+  }
+
+  const org = data.org ?? null;
+  const settings = normalizeLandingPageSettings(org?.landingpage);
+  const mod = await importCourseLandingPageTheme(settings.theme);
+
+  return { ...data, themeComponent: mod.default as Component };
+};
@@ -25,10 +25,6 @@
          data.course?.status === 'ACTIVE' &&
          Boolean(data.course?.isPublished)
  );
-  $inspect(data.requiresPaymentOrInvite);
-  $inspect(canJoinCourse);
-  $inspect(data);
-  $inspect('loading', loading);

  function getBlockedMessage(): string {
    if (data.requiresPaymentOrInvite) {
@@ -9,6 +9,30 @@
  } from '@cio/ui/custom/public-course';
  import { getExerciseQuestionLabels } from '$features/course/components/exercise/question-labels';
  import { t } from '$lib/utils/functions/translations';
+  import { classroomio } from '$lib/utils/services/api';
+
+  /** Build a fully-qualified HLS URL from the relative `/hls/{assetId}/...` shape. */
+  function resolveHlsUrl(rawUrl: string): string {
+    if (/^https?:\/\//i.test(rawUrl)) return rawUrl;
+    const match = rawUrl.match(/^\/?hls\/([^/]+)\/(.+)$/);
+    if (!match) return rawUrl;
+
+    const [, assetId, rest] = match;
+    const built = classroomio.hls[':assetId']['*'].$url({ param: { assetId } });
+    return built.toString().replace(/\/\*$/, '') + '/' + rest;
+  }
+
+  /**
+   * Mint the public HLS cookie via the org-site endpoint. The server
+   * derives the actual asset id from the public course tree, so an
+   * anonymous learner can't request a cookie for any asset they don't
+   * already have access to via this lesson URL.
+   */
+  async function mintPublicHlsCookie(courseSlug: string, itemSlug: string): Promise<void> {
+    await classroomio['org-site'].course[':courseSlug'].item[':itemSlug']['hls-cookie'].$post({
+      param: { courseSlug, itemSlug }
+    });
+  }

  const exerciseLabels = $derived(getExerciseQuestionLabels());

@@ -62,6 +86,10 @@
    <PublicCourse.PublicLessonView
      lesson={lessonView}
      videoCaptionsLabel={$t('course.navItem.lessons.materials.tabs.video.transcript.captions_label')}
+      {resolveHlsUrl}
+      onBeforeHlsLoad={lessonView.video?.hls ? () => mintPublicHlsCookie(data.tree.course.slug, itemSlug) : undefined}
+      playbackErrorLabel={$t('course.navItem.lessons.materials.tabs.video.playback_error')}
+      playbackReloadLabel={$t('course.navItem.lessons.materials.tabs.video.playback_reload')}
      {callout}
    />
  {:else if exerciseView}
@@ -32,11 +32,15 @@ export const load = async ({ parent, url }) => {
  const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
  const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;

+  const requestedPage = Number(url.searchParams.get('page'));
+  const currentPage = Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
+
  const [coursesResult, tagsResult] = await Promise.all([
    safeServerApi<GetPublicCoursesSuccess>(() =>
      classroomio.organization.courses.public.$get({
        query: {
          siteName,
+          page: String(currentPage),
          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
        }
      })
@@ -49,7 +53,9 @@ export const load = async ({ parent, url }) => {
      })
    )
  ]);
-  const courseData = coursesResult.ok ? coursesResult.body.data : { courses: [], hasMoreCourses: false };
+  const courseData = coursesResult.ok
+    ? coursesResult.body.data
+    : { courses: [], hasMoreCourses: false, total: 0, page: currentPage, limit: 0, totalPages: 0 };
  const canonicalUrl = new URL(url.pathname, url.origin).href;
  const orgTitle = `${org.name} – All Courses`;
  const orgDescription = `Browse all courses offered by ${org.name}`;
@@ -81,9 +87,14 @@ export const load = async ({ parent, url }) => {
  return {
    org,
    courses: courseData.courses,
-    hasMoreCourses: courseData.hasMoreCourses,
    tagGroups: tagsResult.ok ? tagsResult.body.data : [],
    activeTags: normalizedTags,
+    pagination: {
+      page: courseData.page,
+      perPage: courseData.limit,
+      total: courseData.total,
+      totalPages: courseData.totalPages
+    },
    pageMetaTags
  };
 };
@@ -2,8 +2,6 @@
  import { goto } from '$app/navigation';
  import { page } from '$app/state';
  import { resolve } from '$app/paths';
-  import { onMount } from 'svelte';
-  import type { Component } from 'svelte';
  import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';

  import { t } from '$lib/utils/functions/translations';
@@ -13,10 +11,7 @@
  import { PoweredBy } from '$features/ui';
  import LibraryBigIcon from '@lucide/svelte/icons/library-big';
  import {
-    importThemeCourseCard,
-    importThemeNavHero,
    normalizeLandingPageSettings,
-    themeCourseGridClass,
    themeHeaderShellClass,
    themeStyle,
    themeRendersNavInsideHero
@@ -27,6 +22,7 @@
  import { Checkbox } from '@cio/ui/base/checkbox';
  import { Empty } from '@cio/ui/custom/empty';
  import { Separator } from '@cio/ui/base/separator';
+  import * as Pagination from '@cio/ui/base/pagination';

  let { data } = $props();

@@ -49,24 +45,11 @@
  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
  const shellStyle = $derived(themeStyle(landingSettings.theme));
  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
-  const courseGridClass = $derived(themeCourseGridClass(landingSettings.theme));

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let NavComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let HeroComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let CourseCardComponent = $state<Component<any> | null>(null);
-
-  onMount(async () => {
-    const [navHero, cardComponent] = await Promise.all([
-      importThemeNavHero(landingSettings.theme),
-      importThemeCourseCard(landingSettings.theme)
-    ]);
-    NavComponent = navHero.NavComponent;
-    HeroComponent = navHero.HeroComponent;
-    CourseCardComponent = cardComponent;
-  });
+  const NavComponent = $derived(data.theme.Nav);
+  const HeroComponent = $derived(data.theme.Hero);
+  const CourseCardComponent = $derived(data.theme.CourseCard);
+  const courseGridClass = $derived(data.theme.coursesGridClass);

  const heroProps = $derived({
    ...landingSettings.hero,
@@ -83,6 +66,8 @@
      params.delete('tags');
    }

+    params.delete('page');
+
    const query = params.toString();
    const suffix = query ? `?${query}` : '';

@@ -93,6 +78,25 @@
    });
  }

+  async function goToPage(nextPage: number) {
+    if (nextPage === data.pagination.page) {
+      return;
+    }
+
+    const params = new SvelteURLSearchParams(page.url.searchParams);
+
+    if (nextPage > 1) {
+      params.set('page', String(nextPage));
+    } else {
+      params.delete('page');
+    }
+
+    const query = params.toString();
+    const suffix = query ? `?${query}` : '';
+
+    await goto(resolve(`/courses${suffix}`, {}), { invalidateAll: true });
+  }
+
  function toggleTag(tagSlug: string, checked: boolean) {
    const next = new SvelteSet(selectedTags);
    if (checked) {
@@ -142,27 +146,25 @@
 <PoweredBy />

 <main class={shellClass} style={shellStyle}>
-  {#if NavComponent && HeroComponent}
-    {#if navInsideHero}
-      <HeroComponent hero={heroProps} orgName={data.org.name}>
-        {#snippet navigation()}
-          <NavComponent
-            orgName={data.org.name}
-            logoUrl={data.org.avatarUrl ?? undefined}
-            navItems={landingSettings.navItems}
-            {authAction}
-          />
-        {/snippet}
-      </HeroComponent>
-    {:else}
-      <NavComponent
-        orgName={data.org.name}
-        logoUrl={data.org.avatarUrl ?? undefined}
-        navItems={landingSettings.navItems}
-        {authAction}
-      />
-      <HeroComponent hero={heroProps} orgName={data.org.name} />
-    {/if}
+  {#if navInsideHero}
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
+      {#snippet navigation()}
+        <NavComponent
+          orgName={data.org.name}
+          logoUrl={data.org.avatarUrl ?? undefined}
+          navItems={landingSettings.navItems}
+          {authAction}
+        />
+      {/snippet}
+    </HeroComponent>
+  {:else}
+    <NavComponent
+      orgName={data.org.name}
+      logoUrl={data.org.avatarUrl ?? undefined}
+      navItems={landingSettings.navItems}
+      {authAction}
+    />
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
  {/if}

  <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
@@ -172,58 +174,60 @@
      </LandingButton>
    </div>

-    <div class="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
+    <div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
      <aside
-        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] space-y-4 rounded-lg border p-4"
+        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 flex max-h-[calc(100dvh-2rem)] flex-col self-start rounded-lg border"
      >
-        <div>
+        <div class="p-4 pb-3">
          <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
          <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
        </div>

        <Separator class="ui:bg-[var(--landing-border)]" />

-        {#if displayTagGroups.length === 0}
-          <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
-        {:else}
-          <div class="space-y-5">
-            {#each displayTagGroups as group (group.id)}
-              <div class="space-y-2">
-                <div class="space-y-1">
-                  <h3 class="text-sm font-semibold">{group.name}</h3>
-                  {#if group.description}
-                    <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
-                  {/if}
-                </div>
-
+        <div class="flex-1 overflow-y-auto p-4">
+          {#if displayTagGroups.length === 0}
+            <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
+          {:else}
+            <div class="space-y-5">
+              {#each displayTagGroups as group (group.id)}
                <div class="space-y-2">
-                  {#each group.tags as tag (tag.id)}
-                    <label
-                      class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
-                    >
-                      <div class="flex items-center gap-2">
-                        <Checkbox
-                          checked={isTagSelected(tag.slug)}
-                          onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
-                        />
-                        <span
-                          class="inline-block h-2.5 w-2.5 rounded-full border"
-                          style={`background-color: ${tag.color}`}
-                          aria-hidden="true"
-                        ></span>
-                        <span class="text-sm">{tag.name}</span>
-                      </div>
-                      <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
-                    </label>
-                  {/each}
+                  <div class="space-y-1">
+                    <h3 class="text-sm font-semibold">{group.name}</h3>
+                    {#if group.description}
+                      <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
+                    {/if}
+                  </div>
+
+                  <div class="space-y-2">
+                    {#each group.tags as tag (tag.id)}
+                      <label
+                        class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
+                      >
+                        <div class="flex items-center gap-2">
+                          <Checkbox
+                            checked={isTagSelected(tag.slug)}
+                            onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
+                          />
+                          <span
+                            class="inline-block h-2.5 w-2.5 rounded-full border"
+                            style={`background-color: ${tag.color}`}
+                            aria-hidden="true"
+                          ></span>
+                          <span class="text-sm">{tag.name}</span>
+                        </div>
+                        <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                      </label>
+                    {/each}
+                  </div>
                </div>
-              </div>
-            {/each}
-          </div>
-        {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
      </aside>

-      <div class="space-y-4">
+      <div class="ui:@container space-y-4">
        {#if data.courses.length === 0}
          <Empty
            icon={LibraryBigIcon}
@@ -231,12 +235,46 @@
            description={$t('public_courses.empty.description')}
            variant="page"
          />
-        {:else if CourseCardComponent}
+        {:else}
          <div class={courseGridClass}>
            {#each data.courses as course, index (course.id)}
              <CourseCardComponent {course} {index} />
            {/each}
          </div>
+
+          {#if data.pagination.totalPages > 1}
+            <Pagination.Root
+              count={data.pagination.total}
+              perPage={data.pagination.perPage}
+              page={data.pagination.page}
+              onPageChange={goToPage}
+              class="mt-8"
+            >
+              {#snippet children({ pages, currentPage })}
+                <Pagination.Content>
+                  <Pagination.Item>
+                    <Pagination.PrevButton />
+                  </Pagination.Item>
+                  {#each pages as pageItem (pageItem.key)}
+                    {#if pageItem.type === 'ellipsis'}
+                      <Pagination.Item>
+                        <Pagination.Ellipsis />
+                      </Pagination.Item>
+                    {:else}
+                      <Pagination.Item>
+                        <Pagination.Link page={pageItem} isActive={currentPage === pageItem.value}>
+                          {pageItem.value}
+                        </Pagination.Link>
+                      </Pagination.Item>
+                    {/if}
+                  {/each}
+                  <Pagination.Item>
+                    <Pagination.NextButton />
+                  </Pagination.Item>
+                </Pagination.Content>
+              {/snippet}
+            </Pagination.Root>
+          {/if}
        {/if}
      </div>
    </div>
@@ -0,0 +1,16 @@
+import { normalizeLandingPageSettings, importThemeBundle } from '$features/org/utils/landing-page';
+
+export const load = async ({ data }) => {
+  const settings = normalizeLandingPageSettings(data.org?.landingpage);
+  const bundle = await importThemeBundle(settings.theme);
+
+  return {
+    ...data,
+    theme: {
+      Nav: bundle.nav,
+      Hero: bundle.hero,
+      CourseCard: bundle.courseCard,
+      coursesGridClass: bundle.coursesGridClass
+    }
+  };
+};