Merge pull request #1214 from kskarthik/master

chapters: highlight current playing chapter

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" />
@@ -65,6 +79,10 @@ defineProps({
         type: Boolean,
         default: () => true,
     },
+    playerPosition: {
+        type: Number,
+        default: () => 0,
+    },
 });
 
 defineEmits(["seek"]);

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 => {

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>