From 202fd304452a66cb0b01e7516d9ed032bba1c536 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 28 Jun 2026 21:41:53 +0100
Subject: [PATCH] fix: enable adding video from library to another lesson

---
 .../lesson/lesson-settings-tab.svelte         |  5 +-
 .../lesson/video/library-video.svelte         | 68 +++++++++++++------
 .../media/api/media-manager.svelte.ts         |  6 +-
 .../media/utils/media-manager-utils.ts        | 18 ++++-
 .../src/lib/utils/translations/da.json        |  3 +-
 .../src/lib/utils/translations/de.json        |  3 +-
 .../src/lib/utils/translations/en.json        |  1 +
 .../src/lib/utils/translations/es.json        |  3 +-
 .../src/lib/utils/translations/fr.json        |  3 +-
 .../src/lib/utils/translations/hi.json        |  3 +-
 .../src/lib/utils/translations/pl.json        |  3 +-
 .../src/lib/utils/translations/pt.json        |  3 +-
 .../src/lib/utils/translations/ru.json        |  3 +-
 .../src/lib/utils/translations/vi.json        |  3 +-
 14 files changed, 87 insertions(+), 38 deletions(-)

diff --git a/apps/dashboard/src/lib/features/course/components/lesson/lesson-settings-tab.svelte b/apps/dashboard/src/lib/features/course/components/lesson/lesson-settings-tab.svelte
index 8ee8f596..4308b9a3 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/lesson-settings-tab.svelte
+++ b/apps/dashboard/src/lib/features/course/components/lesson/lesson-settings-tab.svelte
@@ -12,7 +12,7 @@
   import { classroomio } from '$lib/utils/services/api';
   import { t } from '$lib/utils/functions/translations';
   import { getBrowserTimezone, instantToZonedWallClock, zonedWallClockToInstant } from '$lib/utils/functions/date';
-  import { getVideoTitle, isHlsUploadVideo, type LessonVideo } from './video/video-card-utils';
+  import { getVideoTitle, type LessonVideo } from './video/video-card-utils';
 
   type LessonCompletionPolicy = 'manual' | 'video_watch' | 'none';
 
@@ -328,9 +328,6 @@
                     />
                     <Field.Label for={`watch-enforced-${video.assetId}`} class="font-normal">
                       {getVideoTitle(video, index)}
-                      {#if isHlsUploadVideo(video)}
-                        <span class="ui:text-muted-foreground ml-1 text-xs">(HLS)</span>
-                      {/if}
                     </Field.Label>
                   </Field.Field>
                 {/each}
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/video/library-video.svelte b/apps/dashboard/src/lib/features/course/components/lesson/video/library-video.svelte
index 827fdd75..253629c0 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/video/library-video.svelte
+++ b/apps/dashboard/src/lib/features/course/components/lesson/video/library-video.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
   import { Button } from '@cio/ui/base/button';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { Empty } from '@cio/ui/custom/empty';
   import { InputField } from '@cio/ui/custom/input-field';
   import { lessonApi } from '$features/course/api';
   import { mediaApi } from '$features/media/api';
   import type { OrganizationAsset } from '$features/media/utils';
   import { onMount } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import { fly } from 'svelte/transition';
+  import { snackbar } from '$features/ui/snackbar/store';
   import { t } from '$lib/utils/functions/translations';
 
   interface Props {
@@ -15,10 +20,10 @@
 
   let search = $state('');
   let isLoading = $state(false);
-
-  const assets = $derived(
-    mediaApi.assets.filter((asset) => asset.kind === 'video' && (asset.status ?? 'active') !== 'archived')
-  );
+  let addingAssetId = $state<string | null>(null);
+  // Local copy so adding a video swipes it out of this list without mutating the
+  // shared mediaApi.assets store (which also backs the media manager page).
+  let assets = $state<OrganizationAsset[]>([]);
 
   async function loadLibrary() {
     isLoading = true;
@@ -27,24 +32,32 @@
       limit: 100,
       search: search.trim() || undefined
     });
+    assets = mediaApi.assets.filter((asset) => asset.kind === 'video' && (asset.status ?? 'active') !== 'archived');
     isLoading = false;
   }
 
   async function addFromLibrary(asset: OrganizationAsset) {
     if (!lessonApi.lesson) return;
 
-    const position = Array.isArray(lessonApi.lesson.videos) ? lessonApi.lesson.videos.length : 0;
-    const lessonVideo = await mediaApi.buildLessonVideoFromAsset(asset, {
-      lessonId: lessonId || undefined,
-      position,
-      slotType: 'lesson_video'
-    });
+    addingAssetId = asset.id;
+    try {
+      const position = Array.isArray(lessonApi.lesson.videos) ? lessonApi.lesson.videos.length : 0;
+      const lessonVideo = await mediaApi.buildLessonVideoFromAsset(asset, {
+        lessonId: lessonId || undefined,
+        position,
+        slotType: 'lesson_video'
+      });
 
-    if (!lessonVideo) {
-      return;
+      if (!lessonVideo) {
+        return;
+      }
+
+      lessonApi.updateLessonState('videos', [lessonVideo], { append: true });
+      assets = assets.filter((item) => item.id !== asset.id);
+      snackbar.success('snackbar.media_manager.added_to_lesson');
+    } finally {
+      addingAssetId = null;
     }
-
-    lessonApi.updateLessonState('videos', [lessonVideo], { append: true });
   }
 
   onMount(async () => {
@@ -66,22 +79,33 @@
   </div>
 
   {#if isLoading}
-    <p class="ui:text-muted-foreground text-sm">
-      {$t('course.navItem.lessons.materials.tabs.video.add_video.loading_library')}
-    </p>
+    <Empty
+      description={$t('course.navItem.lessons.materials.tabs.video.add_video.loading_library')}
+      icon={Spinner}
+      class="ui:max-h-40 py-6"
+    />
   {:else if assets.length === 0}
     <p class="ui:text-muted-foreground text-sm">
       {$t('course.navItem.lessons.materials.tabs.video.add_video.no_library_videos')}
     </p>
   {:else}
-    <div class="max-h-[360px] space-y-2 overflow-auto pr-1">
+    <div class="max-h-[360px] space-y-2 overflow-x-hidden">
       {#each assets as asset (asset.id)}
-        <div class="flex items-center justify-between rounded-md border p-3">
-          <div class="min-w-0">
-            <p class="truncate text-sm font-medium">{asset.title || asset.storageKey || asset.id}</p>
+        <div
+          class="flex items-center justify-between rounded-md border p-3"
+          animate:flip={{ duration: 250 }}
+          out:fly={{ x: -400, duration: 300 }}
+        >
+          <div class="max-w-md">
+            <p class="truncate text-sm font-medium wrap-break-word">{asset.title || asset.storageKey || asset.id}</p>
             <p class="ui:text-muted-foreground text-xs">{asset.provider}</p>
           </div>
-          <Button size="sm" onclick={() => addFromLibrary(asset)}>
+          <Button
+            size="sm"
+            onclick={() => addFromLibrary(asset)}
+            loading={addingAssetId === asset.id}
+            disabled={addingAssetId !== null}
+          >
             {$t('course.navItem.lessons.materials.tabs.video.add_video.add_from_library')}
           </Button>
         </div>
diff --git a/apps/dashboard/src/lib/features/media/api/media-manager.svelte.ts b/apps/dashboard/src/lib/features/media/api/media-manager.svelte.ts
index 6a02dad3..bf315de3 100644
--- a/apps/dashboard/src/lib/features/media/api/media-manager.svelte.ts
+++ b/apps/dashboard/src/lib/features/media/api/media-manager.svelte.ts
@@ -38,7 +38,7 @@ import {
   ZAssetUpdate,
   ZYouTubeMetadataQuery
 } from '@cio/utils/validation/assets';
-import { mapAssetToLessonVideo } from '../utils/media-manager-utils';
+import { getAssetHlsManifestLink, isHlsAsset, mapAssetToLessonVideo } from '../utils/media-manager-utils';
 
 import type { AttachAssetRequest } from '../utils/types';
 import type { DetachAssetRequest } from '../utils/types';
@@ -407,7 +407,9 @@ export class MediaApi extends BaseApiWithErrors {
     asset: OrganizationAsset,
     params: { lessonId?: string; position?: number; slotType?: string } = {}
   ) {
-    const url = await this.getVideoPlaybackUrl(asset);
+    // HLS assets have no presignable storageKey — the manifest is served via the
+    // /hls proxy + signed cookie, so the link is the relative manifest path.
+    const url = isHlsAsset(asset) ? getAssetHlsManifestLink(asset) : await this.getVideoPlaybackUrl(asset);
     if (!url) {
       snackbar.error('snackbar.media_manager.resolve_video_failed');
       return null;
diff --git a/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts b/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
index a7404e74..3aba537d 100644
--- a/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
+++ b/apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts
@@ -62,6 +62,20 @@ export function mapAssetProviderToLessonVideoType(provider: string): LessonVideo
   return 'upload';
 }
 
+/**
+ * An HLS asset has no playable `storageKey` — its renditions live behind the
+ * `/hls/{assetId}/...` proxy and are streamed via a signed cookie, not a
+ * presigned URL. The lesson video stores the relative manifest path + `hls`
+ * flag so the player resolves and mints the cookie itself.
+ */
+export function isHlsAsset(asset: OrganizationAsset): boolean {
+  return Boolean(asset.hlsManifestKey);
+}
+
+export function getAssetHlsManifestLink(asset: OrganizationAsset): string {
+  return `/hls/${asset.id}/master.m3u8`;
+}
+
 export function mapAssetToLessonVideo(
   asset: OrganizationAsset,
   options: { url: string; key?: string | null }
@@ -78,6 +92,7 @@ export function mapAssetToLessonVideo(
     duration?: number;
     aspectRatio?: string;
     createdAt?: string;
+    hls?: boolean;
   };
 } {
   return {
@@ -92,7 +107,8 @@ export function mapAssetToLessonVideo(
       thumbnailUrl: asset.thumbnailUrl ?? undefined,
       duration: asset.durationSeconds ?? undefined,
       aspectRatio: asset.aspectRatio ?? undefined,
-      createdAt: asset.createdAt ?? undefined
+      createdAt: asset.createdAt ?? undefined,
+      ...(isHlsAsset(asset) ? { hls: true } : {})
     }
   };
 }
diff --git a/apps/dashboard/src/lib/utils/translations/da.json b/apps/dashboard/src/lib/utils/translations/da.json
index e5be5253..33118de2 100644
--- a/apps/dashboard/src/lib/utils/translations/da.json
+++ b/apps/dashboard/src/lib/utils/translations/da.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Video tilføjet til lektion",
       "delete_success": "Video slettet",
       "delete_in_use": "Denne video er stadig knyttet til en lektion. Fjern det der først.",
-      "delete_failed": "Videoen kunne ikke slettes"
+      "delete_failed": "Videoen kunne ikke slettes",
+      "added_to_lesson": "Video tilføjet til lektion"
     },
     "tags": {
       "group_created": "Taggruppe oprettet",
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index e40d05a9..ee467145 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Video zur Lektion hinzugefügt",
       "delete_success": "Video gelöscht",
       "delete_in_use": "Dieses Video ist noch einer Lektion beigefügt. Entfernen Sie es zuerst dort.",
-      "delete_failed": "Video konnte nicht gelöscht werden"
+      "delete_failed": "Video konnte nicht gelöscht werden",
+      "added_to_lesson": "Video zur Lektion hinzugefügt"
     },
     "tags": {
       "group_created": "Tag-Gruppe erstellt",
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index 0f09e873..6d596402 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -4144,6 +4144,7 @@
       "delete_success": "Video deleted",
       "delete_in_use": "This video is still attached to a lesson. Remove it there first.",
       "delete_failed": "Failed to delete video",
+      "added_to_lesson": "Video added to lesson",
       "download_failed": "Failed to get asset download URL",
       "thumbnail_uploaded": "Thumbnail uploaded",
       "thumbnail_upload_failed": "Failed to upload thumbnail",
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index 76b722b9..2c83ca4e 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Vídeo añadido a la lección.",
       "delete_success": "Vídeo eliminado",
       "delete_in_use": "Este vídeo todavía está adjunto a una lección. Quítelo allí primero.",
-      "delete_failed": "No se pudo eliminar el video"
+      "delete_failed": "No se pudo eliminar el video",
+      "added_to_lesson": "Vídeo añadido a la lección."
     },
     "tags": {
       "group_created": "Grupo de etiquetas creado",
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 912b1c27..652edc82 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Vidéo ajoutée à la leçon",
       "delete_success": "Vidéo supprimée",
       "delete_in_use": "Cette vidéo est toujours jointe à une leçon. Retirez-le d'abord.",
-      "delete_failed": "Échec de la suppression de la vidéo"
+      "delete_failed": "Échec de la suppression de la vidéo",
+      "added_to_lesson": "Vidéo ajoutée à la leçon"
     },
     "tags": {
       "group_created": "Groupe de balises créé",
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 16d1efd4..75b3675e 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "पाठ में वीडियो जोड़ा गया",
       "delete_success": "वीडियो हटा दिया गया",
       "delete_in_use": "यह वीडियो अभी भी एक पाठ से जुड़ा हुआ है। पहले इसे वहां से हटाएं.",
-      "delete_failed": "वीडियो हटाने में विफल"
+      "delete_failed": "वीडियो हटाने में विफल",
+      "added_to_lesson": "पाठ में वीडियो जोड़ा गया"
     },
     "tags": {
       "group_created": "टैग समूह बनाया गया",
diff --git a/apps/dashboard/src/lib/utils/translations/pl.json b/apps/dashboard/src/lib/utils/translations/pl.json
index 409d286c..6e407f72 100644
--- a/apps/dashboard/src/lib/utils/translations/pl.json
+++ b/apps/dashboard/src/lib/utils/translations/pl.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Film dodany do lekcji",
       "delete_success": "Film usunięty",
       "delete_in_use": "Ten film jest nadal dołączony do lekcji. Najpierw usuń go tam.",
-      "delete_failed": "Nie udało się usunąć filmu"
+      "delete_failed": "Nie udało się usunąć filmu",
+      "added_to_lesson": "Film dodany do lekcji"
     },
     "tags": {
       "group_created": "Utworzono grupę tagów",
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index 4e072472..4a2e3d8e 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Vídeo adicionado à aula",
       "delete_success": "Vídeo excluído",
       "delete_in_use": "Este vídeo ainda está anexado a uma aula. Remova-o primeiro.",
-      "delete_failed": "Falha ao excluir vídeo"
+      "delete_failed": "Falha ao excluir vídeo",
+      "added_to_lesson": "Vídeo adicionado à aula"
     },
     "tags": {
       "group_created": "Grupo de tags criado",
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 2b6f882c..0555f630 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Видео добавлено в урок",
       "delete_success": "Видео удалено",
       "delete_in_use": "Это видео все еще прикреплено к уроку. Сначала уберите его оттуда.",
-      "delete_failed": "Не удалось удалить видео."
+      "delete_failed": "Не удалось удалить видео.",
+      "added_to_lesson": "Видео добавлено в урок"
     },
     "tags": {
       "group_created": "Группа тегов создана.",
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index bf7af053..0f873a22 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -361,7 +361,8 @@
       "video_added_to_lesson": "Video đã được thêm vào bài học",
       "delete_success": "Đã xóa video",
       "delete_in_use": "Video này vẫn được đính kèm với một bài học. Loại bỏ nó ở đó đầu tiên.",
-      "delete_failed": "Không thể xóa video"
+      "delete_failed": "Không thể xóa video",
+      "added_to_lesson": "Video đã được thêm vào bài học"
     },
     "tags": {
       "group_created": "Đã tạo nhóm thẻ",