From 0ff76e4aa880af2a0af0030cbe912d9a3e58e055 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 10 Aug 2023 12:46:14 +0100
Subject: [PATCH] CLASSROOMIO-T-95: Upload to S3 and Muse AI

---
 package.json                                  |   5 +-
 .../Lesson/Materials/Transcript.svelte        |  25 +++
 .../Lesson/Materials/Video/Index.svelte       |   5 +-
 .../Lesson/Materials/Video/LocalVideo.svelte  | 116 +++++++++----
 .../Materials/Video/YoutubeVideo.svelte       |  63 +++----
 .../components/Lesson/Materials/index.svelte  | 103 ++++++------
 .../Course/components/Lesson/store/lessons.ts |  16 +-
 .../Navigation/NavExpandable.svelte           |   4 +-
 .../components/CourseLandingPage/index.svelte |   9 +-
 src/lib/components/UserCard/index.svelte      |  58 -------
 src/lib/utils/functions/genUniqueId.js        |   1 +
 src/lib/utils/services/courses/clone.ts       |   2 +-
 src/lib/utils/services/courses/index.ts       |   4 +-
 src/lib/utils/types/index.ts                  |  22 ++-
 src/routes/+layout.svelte                     |   4 +-
 src/routes/api/muse/transcript/+server.js     |  42 +++++
 src/routes/courses/[id]/+page.svelte          |   3 +-
 .../[id]/lessons/[...lessonParams]/+page.js   |  13 --
 .../lessons/[...lessonParams]/+page.server.js | 157 ++++++++++++++++++
 .../lessons/[...lessonParams]/+page.svelte    |  12 +-
 .../courses/[id]/submissions/+page.svelte     |   2 +-
 21 files changed, 460 insertions(+), 206 deletions(-)
 create mode 100644 src/lib/components/Course/components/Lesson/Materials/Transcript.svelte
 delete mode 100644 src/lib/components/UserCard/index.svelte
 create mode 100644 src/lib/utils/functions/genUniqueId.js
 create mode 100644 src/routes/api/muse/transcript/+server.js
 delete mode 100644 src/routes/courses/[id]/lessons/[...lessonParams]/+page.js
 create mode 100644 src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js

diff --git a/package.json b/package.json
index a6575662..e8c924a3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "prepare": "svelte-kit sync"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.386.0",
     "@sentry/browser": "^7.61.0",
     "@sentry/integrations": "^7.61.0",
     "@sentry/tracing": "^7.61.0",
@@ -25,10 +26,12 @@
     "@types/pluralize": "0.0.30",
     "ai": "^2.1.31",
     "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
     "body-parser": "^1.20.2",
     "canvas-confetti": "^1.6.0",
     "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.3",
+    "form-data": "^4.0.0",
     "hotkeys-js": "^3.11.2",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
@@ -47,8 +50,6 @@
     "@babel/plugin-transform-runtime": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/runtime": "^7.22.6",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@sveltejs/kit": "^1.22.4",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.14.196",
diff --git a/src/lib/components/Course/components/Lesson/Materials/Transcript.svelte b/src/lib/components/Course/components/Lesson/Materials/Transcript.svelte
new file mode 100644
index 00000000..74746667
--- /dev/null
+++ b/src/lib/components/Course/components/Lesson/Materials/Transcript.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Accordion, AccordionItem } from 'carbon-components-svelte';
+</script>
+
+<Accordion>
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and machine learning
+      techniques to create custom classification models. Users train their data and the service
+      predicts the appropriate category for the inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities, emotion, relations,
+      sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another. Create industry or
+      region-specific translations via the service's customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
diff --git a/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte b/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
index 745b81ed..57cc7798 100644
--- a/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/Video/Index.svelte
@@ -3,6 +3,9 @@
   import LocalVideo from './LocalVideo.svelte';
   import * as CONSTANTS from './constants';
 
+  export let lessonId = '';
+  export let saveLesson = () => {};
+
   let tabs = CONSTANTS.videoTabs;
   let currentTab = tabs[0].value;
 
@@ -34,7 +37,7 @@
     {#if currentTab === 1}
       <YoutubeVideo />
     {:else}
-      <LocalVideo />
+      <LocalVideo {lessonId} {saveLesson} />
     {/if}
   </main>
 </section>
diff --git a/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte b/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
index ce254b0b..43adb296 100644
--- a/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
@@ -1,45 +1,95 @@
 <script>
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { deleteLessonVideo } from '$lib/components/Course/components/Lesson/store/lessons';
+  import {
+    lesson,
+    deleteLessonVideo,
+    uploadCourseVideoStore
+  } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { enhance } from '$app/forms';
+  import { Moon } from 'svelte-loading-spinners';
+
+  export let lessonId = '';
+  export let saveLesson = () => {};
 
   let isWrongFormat = false;
   let isUploaded = false;
   let isLoaded = false;
   let isBig = false;
+  let fileInput;
+  let submit;
+  let uploadedFileUrl = '';
+  let isLoading = false;
 
-  const uploadVideo = () => {
-    // if the file is too big or not the correct format
-    isWrongFormat = true;
+  function isVideoAdded(link) {
+    return $lesson.materials?.videos?.find((v) => v.link === link);
+  }
 
-    // when the upload has been sucessfully completed
-    // here the you set the video_url to something and that would be displayed on the page
-    isUploaded = false;
+  async function isDoneUploading(response) {
+    uploadedFileUrl = response?.success && response?.url;
 
-    //  closes the modal
-    //  $uploadCourseVideo.isModalOpen = false;
-  };
+    if (uploadedFileUrl && !isVideoAdded(uploadedFileUrl)) {
+      $lesson.materials.videos = [
+        ...$lesson.materials.videos,
+        {
+          type: 'muse',
+          link: uploadedFileUrl,
+          metadata: {}
+        }
+      ];
+      saveLesson();
+    }
+  }
 
-  const onUpload = () => {
-    // PROBABLY GET THE SNAPSHOT OR SOMETHING
-    isLoaded = true;
-  };
+  $: isDoneUploading($uploadCourseVideoStore.formRes);
 </script>
 
-{#if isLoaded == false}
+{#if isLoaded === false}
   <button
-    on:click={onUpload}
-    class="h-full w-full flex flex-col items-center justify-center border border-blue-300 border-dashed rounded-xl"
+    type="button"
+    on:click={() => (fileInput && !isLoading ? fileInput.click() : null)}
+    class="w-full h-full"
+    disabled={isLoading}
   >
-    <img src="/upload-video.svg" alt="upload" />
-    <span class="pt-3">
-      <h3 class="text-center text-xl font-normal dark:text-white">Upload video</h3>
-      <p class=" text-center text-sm font-normal">
-        Select file( Mp4, MOV, AVI) to upload or drag and drop video here.<br /> Size must be less than
-        20 MB.
-      </p>
-    </span>
+    <form
+      class="h-full w-full flex flex-col items-center justify-center border border-blue-300 border-dashed rounded-xl"
+      method="POST"
+      action="?/create"
+      enctype="multipart/form-data"
+      use:enhance={() => {
+        isLoading = true;
+
+        return async ({ update }) => {
+          await update();
+          isLoading = false;
+          isLoaded = true;
+        };
+      }}
+    >
+      {#if isLoading}
+        <Moon size="40" color="#1d4ed8" unit="px" duration="1s" />
+        <p class="mt-5">Uploading Video</p>
+      {:else}
+        <img src="/upload-video.svg" alt="upload" />
+        <span class="pt-3">
+          <h3 class="text-center text-xl font-normal dark:text-white">Upload video</h3>
+          <p class=" text-center text-sm font-normal">
+            Select file( Mp4, MOV, AVI) to upload to your lesson.
+          </p>
+        </span>
+      {/if}
+      <input
+        style="display:none;"
+        type="file"
+        accept="video/*"
+        name="file"
+        on:change={() => submit.click()}
+        bind:this={fileInput}
+      />
+      <input type="text" name="lessonId" value={lessonId} style="display: none;" />
+      <input style="display:none;" type="submit" bind:this={submit} />
+    </form>
   </button>
-{:else if isBig && isUploaded == false}
+{:else if isBig && isUploaded === false}
   <div class="h-full w-full flex flex-col items-center justify-center rounded-xl">
     <img src="/video-upload-error.svg" alt="upload error" />
     <span class="pt-3 pb-2">
@@ -52,7 +102,7 @@
     </span>
     <PrimaryButton label="Try again" />
   </div>
-{:else if isWrongFormat && isUploaded == false}
+{:else if isWrongFormat && isUploaded === false}
   <div class="h-full w-full flex flex-col items-center justify-center rounded-xl">
     <img src="/video-upload-error.svg" alt="upload error" />
     <span class="pt-3 pb-2">
@@ -72,17 +122,19 @@
       <div class="flex items-center justify-between">
         <span class="flex items-center gap-2">
           <div class="rounded-sm overflow-hidden">
-            <img src="/course-video.png" alt="coursevideo" class="object-cover" />
+            <video class="w-[200px]">
+              <source src={uploadedFileUrl} type="video/mp4" />
+              <!-- <source src="/path/to/video.webm" type="video/webm" /> -->
+              <!-- Captions are optional -->
+              <track kind="captions" />
+            </video>
           </div>
-          <p>Video.png</p>
+          <p>{fileInput?.files?.[0]?.name || uploadedFileUrl}</p>
         </span>
         <button on:click={deleteLessonVideo}>
           <img src="/delete-video.svg" alt="deletevideo" class="dark:invert" />
         </button>
       </div>
     </div>
-    <div class="ml-auto">
-      <PrimaryButton label="upload" onClick={uploadVideo} />
-    </div>
   </div>
 {/if}
diff --git a/src/lib/components/Course/components/Lesson/Materials/Video/YoutubeVideo.svelte b/src/lib/components/Course/components/Lesson/Materials/Video/YoutubeVideo.svelte
index 587f83e9..c0b528f0 100644
--- a/src/lib/components/Course/components/Lesson/Materials/Video/YoutubeVideo.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/Video/YoutubeVideo.svelte
@@ -1,47 +1,49 @@
 <script>
   import { CopyButton, Tag } from 'carbon-components-svelte';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { lesson, isLessonDirty } from '$lib/components/Course/components/Lesson/store/lessons';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import Chip from '$lib/components/Chip/Text.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
 
   let youtubeLinks = '';
   let error = '';
 
+  function getVideoUrls(urls = '') {
+    return (urls || '').split(',').filter((url) => !!url.trim());
+  }
+
   function addVideo() {
-    const links = youtubeLinks.split(',').map((link) => link.trim());
+    const links = getVideoUrls(youtubeLinks);
     const validLinks = links.filter(isValidYouTubeLink);
 
     if (validLinks.length === 0) {
       error = 'Invalid YouTube link(s)';
     } else {
-      const existingLinks = $lesson.materials.video_url
-        .split(',')
-        .map((link) => link.trim())
-        .filter(Boolean);
-      const updatedLinks = [
+      const existingLinks = $lesson?.materials?.videos || [];
+
+      $lesson.materials.videos = [
         ...existingLinks,
-        ...validLinks.filter((link) => !existingLinks.includes(link))
+        ...validLinks.map((link = '') => ({
+          type: 'youtube',
+          link,
+          metadata: {}
+        }))
       ];
-      $lesson.materials.video_url = updatedLinks.join(',').trim();
       youtubeLinks = '';
       error = '';
     }
   }
 
-  function isValidYouTubeLink(link) {
+  function isValidYouTubeLink(link = '') {
     const youtubeRegex =
       /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
 
     return youtubeRegex.test(link.trim());
   }
 
-  function removeVideo(index) {
-    const links = $lesson.materials.video_url.split(',').map((link) => link.trim());
-    links.splice(index, 1);
-    $lesson.materials.video_url = links.join(',').trim();
+  function removeVideo(index = 0) {
+    $lesson.materials.videos = $lesson.materials.videos.filter((v, i) => i !== index);
   }
 </script>
 
@@ -58,22 +60,23 @@
   <PrimaryButton label="Add Video" className="rounded-md" onClick={addVideo} />
 </div>
 <p class="mt-4 pl-2 text-sm">
-  Added : <strong
-    >{($lesson?.materials?.video_url && $lesson.materials.video_url.trim().split(',').length) || 0} Videos</strong
-  >
+  Videos added: <strong>
+    {$lesson?.materials?.videos.filter((v) => v.type === 'youtube' && isValidYouTubeLink(v.link))
+      .length || 0}
+  </strong>
 </p>
 <div class="">
-  {#each $lesson?.materials?.video_url && $lesson.materials.video_url
-      .trim()
-      .split(',') as videoLink, index}
-    <div class="flex items-center gap-1">
-      <Tag type="blue">
-        {videoLink}
-      </Tag>
-      <CopyButton text={videoLink} feedback="Copied to clipboard" />
-      <IconButton value="delete-video" onClick={() => removeVideo(index)}>
-        <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
-      </IconButton>
-    </div>
+  {#each $lesson?.materials?.videos as video, index}
+    {#if video.type === 'youtube'}
+      <div class="flex items-center gap-1">
+        <Tag type="blue">
+          {video.link}
+        </Tag>
+        <CopyButton text={video.link} feedback="Copied to clipboard" />
+        <IconButton value="delete-video" onClick={() => removeVideo(index)}>
+          <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+        </IconButton>
+      </div>
+    {/if}
   {/each}
 </div>
diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index a9f22bf7..22f0d7b2 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { useCompletion } from 'ai/svelte';
+  import merge from 'lodash/merge';
   import MODES from '$lib/utils/constants/mode.js';
-  import { getEmbedId } from '$lib/utils/functions/formatYoutubeVideo';
+  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import { formatYoutubeVideo } from '$lib/utils/functions/formatYoutubeVideo';
   import Modal from '$lib/components/Modal/index.svelte';
   import { Popover } from 'carbon-components-svelte';
   import AlignBoxTopLeftIcon from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
-  import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import ListIcon from 'carbon-icons-svelte/lib/List.svelte';
   import IbmWatsonKnowledgeStudioIcon from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeStudio.svelte';
   import MachineLearningModel from 'carbon-icons-svelte/lib/MachineLearningModel.svelte';
@@ -27,7 +29,8 @@
   import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
   import { course } from '$lib/components/Course/store';
   import * as CONSTANTS from './constants';
-  import { browser } from '$app/environment';
+  import { fetchLesson } from '$lib/utils/services/courses';
+  import type { LessonPage } from '$lib/utils/types';
 
   export let mode = MODES.view;
   export let prevMode = '';
@@ -36,11 +39,9 @@
   let tabs = CONSTANTS.tabs;
   let currentTab = tabs[0].value;
   let errors = {};
-  let player = {};
   let textareaRef = {};
   let aiButtonRef = {};
   let openPopover = false;
-  let videoUrls: Array<string> = [];
   let aiButtonClass =
     'flex items-center px-5 py-2 border border-gray-300 hover:bg-gray-200 rounded-md w-full mb-2';
 
@@ -49,26 +50,26 @@
     () =>
       (currentTab = tab);
 
-  function initPlyr(_player, videoUrl = '') {
-    if (!browser) return;
+  // problem: after we save an uploaded video,
+  async function saveLesson() {
+    const { data } = await fetchLesson(lessonId);
+    const materials = merge(data, $lesson.materials);
 
-    const players = Array.from(document.querySelectorAll('.plyr-video-trigger')).map((p) => {
-      // @ts-ignore
-      return new Plyr(p);
-    });
-
-    // @ts-ignore
-    window.players = players;
+    lesson.update((l) => ({
+      ...l,
+      materials
+    }));
+    handleUpdateLessonMaterials($lesson, lessonId);
   }
 
-  function handleSave(prevMode) {
+  function handleSave(prevMode: string) {
     if (prevMode === MODES.edit) {
-      handleUpdateLessonMaterials($lesson, lessonId);
+      saveLesson();
     }
   }
 
   function addBadgeValueToTab(materials) {
-    const { slide_url, video_url, note } = materials;
+    const { slide_url, videos, note } = materials;
 
     tabs = tabs.map((tab) => {
       let badgeValue;
@@ -78,7 +79,7 @@
       } else if (tab.value === 2) {
         badgeValue = !!note ? 1 : 0;
       } else {
-        badgeValue = typeof video_url === 'string' && !!video_url ? video_url.split(',').length : 0;
+        badgeValue = Array.isArray(videos) ? videos.length : 0;
       }
 
       tab.badgeValue = badgeValue;
@@ -114,19 +115,16 @@
   }
 
   const onClose = () => {
-    handleUpdateLessonMaterials($lesson, lessonId);
+    saveLesson();
     $uploadCourseVideoStore.isModalOpen = false;
+    $uploadCourseVideoStore.formRes = null;
   };
 
   $: handleSave(prevMode);
 
-  $: initPlyr(player, $lesson.materials.video_url);
-
   $: addBadgeValueToTab($lesson.materials);
 
   $: updateNoteByCompletion($completion);
-
-  $: videoUrls = ($lesson?.materials?.video_url || '').split(',').filter((url) => !!url.trim());
 </script>
 
 <Modal
@@ -135,7 +133,7 @@
   width="w-4/5 h-[566px]"
   modalHeading="Add a Video"
 >
-  <VideoUploader {onClose} />
+  <VideoUploader {lessonId} {saveLesson} />
 </Modal>
 
 <Tabs {tabs} {currentTab} {onChange}>
@@ -236,34 +234,45 @@
     </TabContent>
 
     <TabContent value={tabs[2].value} index={currentTab}>
-      {#if mode === MODES.edit && videoUrls.length}
-        <PrimaryButton label="Add/Edit Video" onClick={openAddVideoModal} className="mb-2" />
+      {#if mode === MODES.edit && $lesson.materials.videos.length}
+        <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
       {/if}
-      <!-- Line 230 would run if its in edit mode or the video is truthy but then in line 235 we are mapping for an empty string -->
-      {#if videoUrls.length}
+      {#if $lesson.materials.videos.length}
         <div class="flex flex-col items-start w-full h-full">
-          {#each videoUrls as url, index}
+          {#each $lesson.materials.videos as video, index}
+            {#if mode === MODES.edit}
+              <div class="ml-auto">
+                <IconButton
+                  value="delete-video"
+                  contained={true}
+                  onClick={() => deleteLessonVideo(index)}
+                >
+                  <TrashCanIcon size={20} class="carbon-icon dark:text-white" />
+                </IconButton>
+              </div>
+            {/if}
             <div class="w-full h-full flex flex-col gap-2 overflow-hidden">
-              {#if url.includes('youtube')}
+              {#key video.link}
                 <div class="mb-5">
-                  <div
-                    bind:this={player}
-                    class="plyr-video-trigger"
-                    data-plyr-provider="youtube"
-                    data-plyr-embed-id={getEmbedId(url)}
-                  />
+                  {#if video.type === 'youtube'}
+                    <iframe
+                      width="100%"
+                      height="569"
+                      class="iframe"
+                      src={formatYoutubeVideo(video.link, errors)}
+                      title="YouTube video player"
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowfullscreen
+                    />
+                  {:else}
+                    <video class="plyr-video-trigger" playsinline controls>
+                      <source src={video.link} type="video/mp4" />
+                      <track kind="captions" />
+                    </video>
+                  {/if}
                 </div>
-              {:else}
-                <video bind:this={player} class="plyr-video-trigger" playsinline controls>
-                  <source
-                    src="https://pub-bd38ff7251aa402a93762181a947f7ea.r2.dev/generate-lesson-draft.mp4"
-                    type="video/mp4"
-                  />
-                  <!-- <source src="/path/to/video.webm" type="video/webm" /> -->
-                  <!-- Captions are optional -->
-                  <track kind="captions" />
-                </video>
-              {/if}
+              {/key}
             </div>
           {/each}
         </div>
diff --git a/src/lib/components/Course/components/Lesson/store/lessons.ts b/src/lib/components/Course/components/Lesson/store/lessons.ts
index 92a94ccd..385c8006 100644
--- a/src/lib/components/Course/components/Lesson/store/lessons.ts
+++ b/src/lib/components/Course/components/Lesson/store/lessons.ts
@@ -1,21 +1,23 @@
 import { writable } from 'svelte/store';
 import type { Writable, Updater } from 'svelte/store';
 import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
-import type { Lesson, Course } from '$lib/utils/types';
+import type { Lesson, Course, LessonPage } from '$lib/utils/types';
 
 export const uploadCourseVideoStore = writable({
-  isModalOpen: false
+  isModalOpen: false,
+  formRes: null
 });
 
 export const lessons: Writable<Lesson[]> = writable([]);
-export const lesson = writable({
+
+export const lesson = writable<LessonPage>({
   id: null,
   totalExercises: 0,
   is_complete: false,
   materials: {
     note: '',
     slide_url: '',
-    video_url: ''
+    videos: []
   },
   exercises: []
 });
@@ -103,14 +105,12 @@ export async function handleUpdateLessonMaterials(lesson: any, lessonId: Lesson[
 
 export const deleteLessonVideo = (index: any) => {
   lesson.update((currentLesson) => {
-    const links = currentLesson.materials.video_url.split(',').map((link) => link.trim());
-    links.splice(index, 1);
-    const updatedVideoUrl = links.join(',').trim();
+    const videos = currentLesson.materials.videos || [];
     return {
       ...currentLesson,
       materials: {
         ...currentLesson.materials,
-        video_url: updatedVideoUrl
+        videos: videos?.filter((video, i) => i !== index)
       }
     };
   });
diff --git a/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/src/lib/components/Course/components/Navigation/NavExpandable.svelte
index 2ff46564..6f86f643 100644
--- a/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+++ b/src/lib/components/Course/components/Navigation/NavExpandable.svelte
@@ -1,5 +1,5 @@
 <script>
-  import CaretSortDownIcon from 'carbon-icons-svelte/lib/CaretSortDown.svelte';
+  import { slide } from 'svelte/transition';
   import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
@@ -48,7 +48,7 @@
     {/if}
   </button>
   {#if isExpanded}
-    <div class="flex flex-col">
+    <div in:slide out:slide class="flex flex-col">
       <slot />
     </div>
   {/if}
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index 5df924ad..6a160d61 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -249,10 +249,13 @@
                   {/if}
                 </div>
                 <div class="flex items-center">
-                  {#if lesson.video_url}
+                  {#if lesson.videos}
                     <span class="text-sm font-light flex w-2/4"
-                      ><Video size={16} class="mr-1" />1 video</span
-                    >
+                      ><Video size={16} class="mr-1" />{lesson.videos.length} video{lesson.videos
+                        .length > 1
+                        ? 's'
+                        : ''}
+                    </span>
                   {/if}
                   {#if get(lesson, 'totalExercises[0].count')}
                     <span class="text-sm font-light flex w-2/4"
diff --git a/src/lib/components/UserCard/index.svelte b/src/lib/components/UserCard/index.svelte
deleted file mode 100644
index c5c870de..00000000
--- a/src/lib/components/UserCard/index.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-  import Icon from 'svelte-awesome/components/Icon.svelte';
-  import { faTelegram } from '@fortawesome/free-brands-svg-icons';
-  import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
-
-  export let avatarUrl =
-    'https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg';
-  export let name = 'Sarah Dayan';
-  export let title = 'Staff Engineer, Algolia';
-  export let mailLink;
-  export let telegramLink;
-</script>
-
-<figure class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4">
-  <img
-    class="w-32 h-32 rounded-full mx-auto"
-    src={avatarUrl}
-    alt=""
-    width="384"
-    height="512"
-  />
-  <div class="pt-6 text-center space-y-4">
-    <div class="description font-medium flex flex-col justify-around">
-      <div class="text-cyan-600">{name}</div>
-      <div class="text-gray-500 dark:text-white">{title}</div>
-    </div>
-  </div>
-  {#if telegramLink && mailLink}
-    <div class="flex justify-center">
-      <a href={telegramLink} target="_blank">
-        <Icon
-          data={faTelegram}
-          scale="1"
-          class="social-icon"
-          style="color:#4dabf7;margin:0 5px;"
-        />
-      </a>
-      <a href={mailLink} target="_blank">
-        <Icon
-          data={faEnvelope}
-          scale="1"
-          class="social-icon"
-          style="color:#d44c3d;margin:0 5px;"
-        />
-      </a>
-    </div>
-  {/if}
-</figure>
-
-<style>
-  img {
-    width: 104px;
-    height: 104px;
-  }
-  .description {
-    min-height: 70px;
-  }
-</style>
diff --git a/src/lib/utils/functions/genUniqueId.js b/src/lib/utils/functions/genUniqueId.js
new file mode 100644
index 00000000..dd65d622
--- /dev/null
+++ b/src/lib/utils/functions/genUniqueId.js
@@ -0,0 +1 @@
+export default () => Date.now().toString(36) + Math.random().toString(36).substr(2);
diff --git a/src/lib/utils/services/courses/clone.ts b/src/lib/utils/services/courses/clone.ts
index 984323a5..d1c1b6a9 100644
--- a/src/lib/utils/services/courses/clone.ts
+++ b/src/lib/utils/services/courses/clone.ts
@@ -108,7 +108,7 @@ async function cloneLessons(lessons: Lesson[], courseId: Course['id']) {
       public: lesson.public,
       slide_url: lesson.slide_url,
       title: lesson.title,
-      video_url: lesson.video_url
+      videos: lesson.videos
     }));
 
   const { data } = await supabase.from('lesson').insert(clonedLessons).select();
diff --git a/src/lib/utils/services/courses/index.ts b/src/lib/utils/services/courses/index.ts
index f966473b..9277358a 100644
--- a/src/lib/utils/services/courses/index.ts
+++ b/src/lib/utils/services/courses/index.ts
@@ -34,7 +34,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
       certificate_theme,
       lessons:lesson(
         id, title,public, lesson_at, call_url, is_unlocked, is_complete, order, created_at,
-        note, video_url, slide_url, call_url, totalExercises:exercise(count),
+        note, videos, slide_url, call_url, totalExercises:exercise(count),
         profile:teacher_id(id, avatar_url, fullname)
       ),
       attendance:group_attendance(*)
@@ -150,7 +150,7 @@ export function deleteGroupMember(groupMemberId: Groupmember['id']) {
 export function fetchLesson(lessonId: Lesson['id']) {
   return supabase
     .from('lesson')
-    .select(`id, note, video_url, slide_url, call_url, totalExercises:exercise(count)`)
+    .select(`id, note, videos, slide_url, call_url, totalExercises:exercise(count)`)
     .eq('id', lessonId)
     .single();
 }
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index bc6a1a19..2b7ce93d 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -136,9 +136,29 @@ export interface Group_attendance {
   groupmember?: Groupmember;
 }
 
+enum VideoType {
+  youtube,
+  muse
+}
+export interface LessonPage {
+  id?: string | null;
+  totalExercises: Number;
+  is_complete: Boolean;
+  materials: {
+    note: string;
+    slide_url: string;
+    videos: Array<{
+      type: string;
+      link: string;
+      metadata?: {};
+    }>;
+  };
+  exercises: [];
+}
+
 export interface Lesson {
   note?: any; // type unknown;
-  video_url?: any; // type unknown;
+  videos?: []; // type unknown;
   slide_url?: any; // type unknown;
   course_id: string /* foreign key to course.id */;
   id?: string /* primary key */;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e2fe4c3..5396aeb7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,7 +39,7 @@
   import '../app.postcss';
 
   let supabase = getSupabase();
-  let path = $page.url.pathname.replace('/', '');
+  let path = $page.url?.pathname?.replace('/', '');
   let theme = 'white';
   let skipAuth = false;
 
@@ -261,7 +261,7 @@
     };
   });
 
-  $: path = $page.url.pathname.replace('/', '');
+  $: path = $page.url?.pathname?.replace('/', '');
   $: theme = $appStore.isDark ? 'g100' : 'white';
   $: setOrgBasedOnUrl($page.url.host);
 </script>
diff --git a/src/routes/api/muse/transcript/+server.js b/src/routes/api/muse/transcript/+server.js
new file mode 100644
index 00000000..dd1714fa
--- /dev/null
+++ b/src/routes/api/muse/transcript/+server.js
@@ -0,0 +1,42 @@
+import { json } from '@sveltejs/kit';
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+
+import {
+  CLOUDFLARE_ACCESS_KEY,
+  CLOUDFLARE_SECRET_ACCESS_KEY,
+  CLOUDFLARE_ACCOUNT_ID,
+  CLOUDFLARE_PUBLIC_ACCOUNT_ID,
+  MUSE_API_KEY
+} from '$env/static/private';
+
+const S3 = new S3Client({
+  region: 'auto',
+  endpoint: `https://${CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: CLOUDFLARE_ACCESS_KEY,
+    secretAccessKey: CLOUDFLARE_SECRET_ACCESS_KEY
+  }
+});
+
+const downloadTranscript = async () => {};
+
+const uploadTranscriptToS3 = async () => {};
+
+export async function GET({ url }) {
+  const museFid = url.searchParams.get('museFid');
+
+  console.log('museFid');
+
+  // check the transcript table and see if we find a record
+  // if we find one
+  // check if downloaded = true
+  // if true
+  // return the transcript
+  // if false
+  // download the transcript from muse
+  // upload it to S3
+  // return the transcript
+  // if we dont
+
+  return json({ success: true, museFid });
+}
diff --git a/src/routes/courses/[id]/+page.svelte b/src/routes/courses/[id]/+page.svelte
index bd29bb97..6904b4de 100644
--- a/src/routes/courses/[id]/+page.svelte
+++ b/src/routes/courses/[id]/+page.svelte
@@ -3,6 +3,7 @@
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { setCourse } from '$lib/components/Course/store';
   import { fetchCourse } from '$lib/utils/services/courses';
+  import { browser } from '$app/environment';
 
   export let data;
   const { courseId } = data;
@@ -10,7 +11,7 @@
   let prevCourseId = '';
 
   async function onCourseIdChange(courseId = '') {
-    if (!courseId || prevCourseId === courseId) return;
+    if (!courseId || prevCourseId === courseId || !browser) return;
 
     const { data: _data } = await fetchCourse(courseId);
 
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.js b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.js
deleted file mode 100644
index e2bbe9fc..00000000
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const load = ({ params = { id: '' } }) => {
-  const { id: courseId, lessonParams = [] } = params;
-  const splitparams = lessonParams.split('/');
-  const [lessonId, exerciseRouteName, exerciseId] = splitparams;
-
-  return {
-    courseId,
-    lessonId,
-    exerciseRouteName,
-    exerciseId,
-    isMaterialsTabActive: !exerciseRouteName
-  };
-};
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js
new file mode 100644
index 00000000..4e54c691
--- /dev/null
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js
@@ -0,0 +1,157 @@
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+import FormData from 'form-data';
+import axios from 'axios';
+import { fail } from '@sveltejs/kit';
+import genUniqueId from '$lib/utils/functions/genUniqueId.js';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+import {
+  CLOUDFLARE_ACCESS_KEY,
+  CLOUDFLARE_SECRET_ACCESS_KEY,
+  CLOUDFLARE_ACCOUNT_ID,
+  CLOUDFLARE_PUBLIC_ACCOUNT_ID,
+  MUSE_API_KEY
+} from '$env/static/private';
+
+// Set the runtime to edge for best performance
+export const config = {
+  runtime: 'edge'
+};
+
+const S3 = new S3Client({
+  region: 'auto',
+  endpoint: `https://${CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: CLOUDFLARE_ACCESS_KEY,
+    secretAccessKey: CLOUDFLARE_SECRET_ACCESS_KEY
+  }
+});
+
+const supabase = getSupabase();
+
+const uploadToMuse = (s3Data, fileName, lessonId, fileUrl) => {
+  const form = new FormData();
+  form.append('file', s3Data, fileName);
+
+  axios({
+    method: 'POST',
+    url: 'https://api.muse.ai/api/files/upload',
+    data: form,
+    maxContentLength: Infinity,
+    maxBodyLength: Infinity,
+    headers: {
+      ...form.getHeaders(),
+      Key: MUSE_API_KEY
+    }
+  })
+    .then(async function (response) {
+      console.log('Upload to muse complete', response.data);
+
+      const { data: lesson } = await supabase
+        .from('lesson')
+        .select(`*`)
+        .eq('id', lessonId)
+        .single();
+
+      if (lesson) {
+        // Add Muse response to metadata
+        const videos = lesson.videos.map((v) => {
+          if (v.link === fileUrl) {
+            console.log('matches');
+            v.metadata = JSON.parse(JSON.stringify(response.data));
+          }
+          return v;
+        });
+
+        const { error, data } = await supabase
+          .from('lesson')
+          .update({ videos })
+          .eq('id', lessonId)
+          .select();
+        if (error) {
+          console.log('Error updating supabase configs');
+        }
+        console.log('update error', error);
+        console.log('update data', data, data[0].videos);
+      }
+    })
+    .catch(function (error) {
+      console.log('Upload error', error);
+    });
+};
+
+export const load = ({ params = { id: '' } }) => {
+  const { id: courseId, lessonParams = [] } = params;
+  const splitparams = lessonParams.split('/');
+  const [lessonId, exerciseRouteName, exerciseId] = splitparams;
+
+  return {
+    courseId,
+    lessonId,
+    exerciseRouteName,
+    exerciseId,
+    isMaterialsTabActive: !exerciseRouteName
+  };
+};
+
+export const actions = {
+  create: async ({ request }) => {
+    const formData = Object.fromEntries(await request.formData());
+    console.log('formData', formData);
+
+    if (!formData.file?.name || formData.file?.name === 'undefined') {
+      return fail(400, {
+        success: false,
+        message: 'You must provide a file to upload'
+      });
+    }
+
+    const { file, lessonId } = formData;
+    console.log('file', file);
+    console.log('lessonId', lessonId);
+
+    const stream = await file.arrayBuffer();
+    const fileName = `${genUniqueId()}-${file.name}`;
+    const params = {
+      Bucket: 'videos',
+      Key: fileName,
+      Body: stream,
+      ContentLength: stream.length
+    };
+    console.log('params', params);
+
+    let upload;
+
+    const fileUrl = `https://pub-${CLOUDFLARE_PUBLIC_ACCOUNT_ID}.r2.dev/${fileName}`;
+
+    try {
+      upload = await S3.send(new PutObjectCommand(params));
+      // process data.
+    } catch (error) {
+      // error handling.
+      const { requestId, cfId, extendedRequestId } = error.$$metadata;
+      console.error('Error uploading file');
+      console.log({ requestId, cfId, extendedRequestId });
+    } finally {
+      // finally.
+      console.log('File upload complete', upload);
+
+      console.log('\n\nInitilizing Muse Request');
+
+      const data = await S3.send(
+        new GetObjectCommand({
+          Bucket: 'videos',
+          Key: fileName
+        })
+      );
+      // console.log('GetObjectCommand', data);
+      uploadToMuse(data.Body, file.name, lessonId, fileUrl);
+    }
+
+    return {
+      success: true,
+      url: fileUrl,
+      message: 'Uploaded successfully'
+    };
+  }
+};
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index 6af211cb..3458eb9b 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -12,11 +12,17 @@
   import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import { setCourse, course } from '$lib/components/Course/store';
-  import { lesson, handleSaveLesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import {
+    lesson,
+    handleSaveLesson,
+    uploadCourseVideoStore
+  } from '$lib/components/Course/components/Lesson/store/lessons';
   import { browser } from '$app/environment';
 
   export let data;
 
+  export let form;
+
   let path = '';
   let mode = MODES.view;
   let prevMode = '';
@@ -68,12 +74,14 @@
     mode = mode === MODES.edit ? MODES.view : MODES.edit;
   }
 
-  $: path = $page.url.pathname.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
+  $: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
   $: if (data.courseId && browser) {
     mode = MODES.view;
     fetchReqData(data.lessonId);
   }
+
+  $: $uploadCourseVideoStore.formRes = form;
 </script>
 
 <CourseContainer {isFetching} {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index e8f0354f..e68bb1ca 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -293,7 +293,7 @@
                   </a>
                   <a
                     class="flex items-center no-underline hover:underline text-black my-2"
-                    href="{$page.url.pathname.replace('submissions', 'lessons')}/{item.lesson
+                    href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
                       .id}/exercises/{item.exercise.id}"
                   >
                     <p class="dark:text-white text-grey text-sm">