From 7f00a05adf811611d401c5e57e12272facc3f020 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 2 Apr 2024 15:32:55 +0100
Subject: [PATCH] feat: support canva presentation in a lesson (#237)

---
 .../components/ComponentSlide.svelte          | 25 ++++++++++++++++---
 .../components/Lesson/Materials/index.svelte  |  1 +
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentSlide.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentSlide.svelte
index 58df5718..520a10ed 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentSlide.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentSlide.svelte
@@ -1,11 +1,30 @@
-<script>
+<script lang="ts">
   import { lesson } from '../../store/lessons';
+
+  let url = '';
+
+  function canvaHandler(_url): string {
+    if (_url.includes('?embed')) return _url;
+
+    return `${_url}?embed`;
+  }
+
+  function getUrl(_url): string {
+    console.log({ _url });
+    if (_url.includes('www.canva.com')) {
+      return canvaHandler(_url);
+    }
+
+    return _url;
+  }
+
+  $: url = getUrl($lesson.materials.slide_url);
 </script>
 
-{#if $lesson.materials.slide_url}
+{#if url}
   <iframe
     title="Embeded Slides"
-    src={$lesson.materials.slide_url}
+    src={url}
     frameborder="0"
     width="100%"
     height="569"
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
index da44ccfa..86cab8c7 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -309,6 +309,7 @@
             label="Slide link"
             bind:value={$lesson.materials.slide_url}
             onInputChange={handleInputChange}
+            helperMessage="You can embed Google Slides or Canva Presentation"
           />
         {/if}
       </TabContent>