From 780772a8fb9370d3bf2fe6c8506834e38ad73670 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 11 Aug 2023 09:44:50 +0100
Subject: [PATCH] Add plyr support to materials

---
 .../components/Lesson/Materials/index.svelte    | 17 ++++++++++++++++-
 src/routes/+layout.svelte                       |  6 ++++++
 .../[id]/lessons/[...lessonParams]/+page.svelte |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index a295929a..35ae7677 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5396aeb7..5c8f7c14 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index 3458eb9b..1c1e26ad 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/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