Add plyr support to materials

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -42,6 +42,7 @@
   let textareaRef = {};
   let aiButtonRef = {};
   let openPopover = false;
+  let player = null;
   let aiButtonClass =
     'flex items-center px-5 py-2 border border-gray-300 hover:bg-gray-200 rounded-md w-full mb-2';
 
@@ -114,6 +115,18 @@
     }, 500);
   }
 
+  function initPlyr(_player: any, _video: string | undefined) {
+    if (!_player) return;
+
+    const players = Array.from(document.querySelectorAll('.plyr-video-trigger')).map((p) => {
+      // @ts-ignore
+      return new Plyr(p);
+    });
+
+    // @ts-ignore
+    window.players = players;
+  }
+
   const onClose = () => {
     saveLesson();
     $uploadCourseVideoStore.isModalOpen = false;
@@ -125,6 +138,8 @@
   $: addBadgeValueToTab($lesson.materials);
 
   $: updateNoteByCompletion($completion);
+
+  $: initPlyr(player, $lesson.materials.videos);
 </script>
 
 <Modal
@@ -277,7 +292,7 @@
                       />
                     </div>
                   {:else}
-                    <video class="plyr-video-trigger" playsinline controls>
+                    <video bind:this={player} class="plyr-video-trigger" playsinline controls>
                       <source src={video.link} type="video/mp4" />
                       <track kind="captions" />
                     </video>

src/routes/+layout.svelte

@@ -384,4 +384,10 @@
   :global(.dark .bx--search-close:hover > svg) {
     fill: #fff;
   }
+
+  :global(.plyr__controls) {
+    background: url(/logo-192.png) 99% 70% no-repeat,
+      linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) !important;
+    background-size: 50px auto, auto !important;
+  }
 </style>

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -120,7 +120,7 @@
     <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
   {:else if !!data.lessonId}
     <PageBody>
-      <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} />
+      <Materials lessonId={data.lessonId} {mode} {prevMode} />
 
       <div class="w-full flex flex-row-reverse">
         <PrimaryButton