From f96a7fa86a18ad2fe2823286008e2ca8f0361eb2 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Tue, 19 Jul 2022 18:11:42 +0530
Subject: [PATCH 1/2] chapters: highlight current playing chapter

---
 src/components/ChaptersBar.vue | 47 ++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 1b0f74c2..6630196c 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -9,6 +9,11 @@
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
             class="chapter-vertical"
+            :class="
+                playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
+                    ? 'chapter-vertical bg-red-500/50'
+                    : 'chapter-vertical'
+            "
         >
             <div class="flex">
                 <span class="mt-5 mr-2 text-current" v-text="index + 1" />
@@ -22,7 +27,16 @@
     </div>
     <!-- mobile view -->
     <div v-else class="flex overflow-x-auto">
-        <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
+        <div
+            :key="chapter.start"
+            v-for="(chapter, index) in chapters"
+            @click="$emit('seek', chapter.start)"
+            :class="
+                playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
+                    ? 'chapter bg-red-500/50'
+                    : 'chapter'
+            "
+        >
             <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
                 <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
@@ -55,17 +69,24 @@
     @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
-
-<script setup>
-import { defineProps, defineEmits } from "vue";
-
-defineProps({
-    chapters: Object,
-    mobileLayout: {
-        type: Boolean,
-        default: () => true,
+<script type="text/javascript">
+export default {
+    emits: ["seek"],
+    props: {
+        chapters: Object,
+        mobileLayout: {
+            type: Boolean,
+            default: () => true,
+        },
     },
-});
-
-defineEmits(["seek"]);
+    data() {
+        return { playerPosition: 0 };
+    },
+    mounted() {
+        // get current video position in regular intervals
+        setInterval(() => {
+            this.playerPosition = document.querySelector("video").currentTime;
+        }, 2000);
+    },
+};
 </script>

From 25d82169b6fe4690cc58f09d435aee016577cf9b Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 19 Jul 2022 21:59:03 +0530
Subject: [PATCH 2/2] Use events and emits for finding currentTime.

---
 src/components/ChaptersBar.vue | 33 +++++++++++++++------------------
 src/components/VideoPlayer.vue |  2 ++
 src/components/WatchVideo.vue  |  6 ++++++
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 6630196c..ca57f195 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -69,24 +69,21 @@
     @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
-<script type="text/javascript">
-export default {
-    emits: ["seek"],
-    props: {
-        chapters: Object,
-        mobileLayout: {
-            type: Boolean,
-            default: () => true,
-        },
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+    chapters: Object,
+    mobileLayout: {
+        type: Boolean,
+        default: () => true,
     },
-    data() {
-        return { playerPosition: 0 };
+    playerPosition: {
+        type: Number,
+        default: () => 0,
     },
-    mounted() {
-        // get current video position in regular intervals
-        setInterval(() => {
-            this.playerPosition = document.querySelector("video").currentTime;
-        }, 2000);
-    },
-};
+});
+
+defineEmits(["seek"]);
 </script>
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index d42b33a1..a1a2c79f 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -42,6 +42,7 @@ export default {
         selectedAutoLoop: Boolean,
         isEmbed: Boolean,
     },
+    emits: ["timeupdate"],
     data() {
         return {
             lastUpdate: new Date().getTime(),
@@ -343,6 +344,7 @@ export default {
             if (noPrevPlayer) {
                 videoEl.addEventListener("timeupdate", () => {
                     const time = videoEl.currentTime;
+                    this.$emit("timeupdate", time);
                     this.updateProgressDatabase(time);
                     if (this.sponsors && this.sponsors.segments) {
                         this.sponsors.segments.map(segment => {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 49fd0a1f..64c4e86d 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -25,11 +25,13 @@
                     :index="index"
                     :selected-auto-play="selectedAutoPlay"
                     :selected-auto-loop="selectedAutoLoop"
+                    @timeupdate="onTimeUpdate"
                 />
                 <ChaptersBar
                     :mobileLayout="isMobile"
                     v-if="video?.chapters?.length > 0"
                     :chapters="video.chapters"
+                    :player-position="currentTime"
                     @seek="navigate"
                 />
             </div>
@@ -242,6 +244,7 @@ export default {
             smallView: smallViewQuery.matches,
             showModal: false,
             isMobile: true,
+            currentTime: 0,
         };
     },
     computed: {
@@ -465,6 +468,9 @@ export default {
         navigate(time) {
             this.$refs.videoPlayer.seek(time);
         },
+        onTimeUpdate(time) {
+            this.currentTime = time;
+        },
     },
 };
 </script>