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" />
-        </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" />
+          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}
     </TabContent>