Allow youtube link

src/components/Course/components/Lesson/Materials/EditMode.svelte

@@ -16,11 +16,11 @@
       value: 1,
     },
     {
-      label: 'Slide',
+      label: 'Video',
       value: 2,
     },
     {
-      label: 'Video',
+      label: 'Slide',
       value: 3,
     },
   ];
@@ -57,18 +57,18 @@
       />
     </TabContent>
     <TabContent value={tabs[1].value} index={currentTab}>
-      <TextField
-        label="Slide link"
-        bind:value={$lesson.materials.slide_url}
-        onChange={() => ($isLessonDirty = true)}
-      />
-    </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
       <TextField
         label="Youtube link"
         bind:value={$lesson.materials.video_url}
         onChange={() => ($isLessonDirty = true)}
       />
     </TabContent>
+    <TabContent value={tabs[2].value} index={currentTab}>
+      <TextField
+        label="Slide link"
+        bind:value={$lesson.materials.slide_url}
+        onChange={() => ($isLessonDirty = true)}
+      />
+    </TabContent>
   </slot:fragment>
 </Tabs>

src/components/Course/components/Lesson/Materials/ViewMode.svelte

@@ -11,21 +11,42 @@
       value: 1,
     },
     {
-      label: 'Slide',
+      label: 'Video',
       value: 2,
     },
     {
-      label: 'Video',
+      label: 'Slide',
       value: 3,
     },
   ];
+
   let currentTab = tabs[0].value;
+  let errors = {};
 
   function onChange(tabValue) {
     return () => {
       currentTab = tabValue;
     };
   }
+
+  function formatYoutubeVideo(url) {
+    console.log(`url`, url);
+    if (url.includes('embed')) {
+      return url;
+    }
+
+    const splitedUrl = url.split('watch');
+
+    if (splitedUrl.length !== 2) {
+      errors.video = 'Wrong url format';
+
+      return;
+    }
+
+    const query = new URLSearchParams(splitedUrl[1]);
+
+    return `https://www.youtube.com/embed/${query.get('v')}`;
+  }
 </script>
 
 <Tabs {tabs} {currentTab} {onChange}>
@@ -36,11 +57,33 @@
       {:else}
         <Box>
           <h3 class="text-3xl text-gray-500">No note added</h3>
-          <img alt="Video not found" src="/notfound.webp" class="w-80" />
+          <img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}
     </TabContent>
     <TabContent value={tabs[1].value} index={currentTab}>
+      {#if $lesson.materials.video_url && $lesson.materials.video_url.includes('youtube')}
+        {#each $lesson.materials.video_url.split(',') as url}
+          <div class="mb-5">
+            <iframe
+              width="100%"
+              height="569"
+              src={formatYoutubeVideo(url)}
+              title="YouTube video player"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            />
+          </div>
+        {/each}
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No youtube video added</h3>
+          <img alt="Video not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+    <TabContent value={tabs[2].value} index={currentTab}>
       {#if $lesson.materials.slide_url}
         <iframe
           title="Embeded Slides"
@@ -55,25 +98,7 @@
       {:else}
         <Box>
           <h3 class="text-3xl text-gray-500">No slide added</h3>
-          <img alt="Video not found" src="/notfound.webp" class="w-80" />
+          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
-      {#if $lesson.materials.video_url}
-        <iframe
-          width="100%"
-          height="569"
-          src={$lesson.materials.video_url}
-          title="YouTube video player"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen
-        />
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No youtube video added</h3>
-          <img alt="Video not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}
     </TabContent>

src/components/MarkdownEditor/index.svelte

@@ -1,7 +1,7 @@
 <script>
   export let value;
   export let placeholder = ``;
-  const activeClassName = "border-b-2 border-blue-700";
+  const activeClassName = 'border-b-2 border-blue-700';
   let isWriteMode = true;
 
   const handleTabClick = (tab) => (event) => {
@@ -9,6 +9,37 @@
   };
 </script>
 
+<div class="root">
+  <div class="flex justify-center">
+    <button
+      on:click={handleTabClick(1)}
+      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
+    >
+      Write
+    </button>
+    <button
+      on:click={handleTabClick(2)}
+      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
+    >
+      Preview
+    </button>
+  </div>
+
+  <div class="m-2 mb-0 p-0">
+    {#if isWriteMode}
+      <textarea
+        bind:value
+        {placeholder}
+        class="border border-gray rounded-md p-2"
+      />
+    {:else}
+      <article class="m-auto preview prose prose-sm sm:prose p-2">
+        <slot name="preview" />
+      </article>
+    {/if}
+  </div>
+</div>
+
 <style>
   .root {
     width: 100%;
@@ -30,31 +61,3 @@
     fill: currentColor;
   }
 </style>
-
-<div class="root">
-  <div class="flex justify-center">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}">
-      Write
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}">
-      Preview
-    </button>
-  </div>
-
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        {placeholder}
-        class="border border-gray rounded-md p-2" />
-    {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
-        <slot name="preview" />
-      </article>
-    {/if}
-  </div>
-</div>

src/components/MarkdownRender/index.svelte

@@ -1,9 +1,11 @@
 <script>
   import marked from 'marked';
 
-  export let content;
+  export let content = '';
 </script>
 
-<article class="prose prose-sm sm:prose p-2">
+<article class="m-auto prose prose-sm sm:prose p-2">
-  {@html marked(content, { breaks: true, gfm: true })}
+  {#if !!content}
+    {@html marked(content, { breaks: true, gfm: true })}
+  {/if}
 </article>

src/components/TextEditor/index.svelte

@@ -1,11 +1,11 @@
 <script>
-  import marked from "marked";
+  import marked from 'marked';
-  import PrimaryButton from "../PrimaryButton/index.svelte";
+  import PrimaryButton from '../PrimaryButton/index.svelte';
 
   let isWriteMode = true;
   export let value = ``;
   export let placeholder = ``;
-  const activeClassName = "border-b-2 border-blue-700";
+  const activeClassName = 'border-b-2 border-blue-700';
 
   const handleTabClick = (tab) => (event) => {
     isWriteMode = tab === 1;
@@ -36,7 +36,7 @@
         class="border border-gray rounded-md p-2"
       />
     {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
+      <article class="m-auto preview prose prose-sm sm:prose p-2">
         {@html marked(value)}
       </article>
     {/if}

src/routes/_layout.svelte

@@ -12,7 +12,7 @@
   import Navigation from '../components/Navigation/index.svelte';
   // import SideBar from "../components/SideBar/index.svelte";
   // import Footer from '../components/Footer/index.svelte';
-  import Apps from '../components/Apps/index.svelte';
+  // import Apps from '../components/Apps/index.svelte';
   import { handleAuthChange } from '../utils/functions/api';
   import { user, profile } from '../utils/store/user';
   import { getSupabase } from '../utils/functions/supabase';