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" />
@@ -55,17 +69,24 @@
     @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
-
-<script setup>
-import { defineProps, defineEmits } from "vue";
-
-defineProps({
+<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>