Cleanup code slightly.

src/components/ChaptersBar.vue

@@ -9,11 +9,7 @@
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
             class="chapter-vertical"
-            :class="
+            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
-                isCurrentChapter(chapters, index, playerPosition)
-                    ? 'chapter-vertical bg-red-500/50'
-                    : 'chapter-vertical'
-            "
         >
             <div class="flex">
                 <span class="mt-5 mr-2 text-current" v-text="index + 1" />
@@ -31,7 +27,8 @@
             :key="chapter.start"
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
-            :class="isCurrentChapter(chapters, index, playerPosition) ? 'chapter bg-red-500/50' : 'chapter'"
+            class="chapter"
+            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
         >
             <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
@@ -66,24 +63,10 @@
 }
 </style>
 
-<script>
-export default {
-    methods: {
-        isCurrentChapter(chapters, index, playerPosition) {
-            if (index + 1 == chapters.length) {
-                return playerPosition >= chapters[index].start;
-            } else {
-                return playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start;
-            }
-        },
-    },
-};
-</script>
-
 <script setup>
 import { defineProps, defineEmits } from "vue";
 
-defineProps({
+const props = defineProps({
     chapters: Object,
     mobileLayout: {
         type: Boolean,
@@ -95,5 +78,12 @@ defineProps({
     },
 });
 
+const isCurrentChapter = index => {
+    return (
+        props.playerPosition >= props.chapters[index].start &&
+        props.playerPosition < (props.chapters[index + 1]?.start ?? Infinity)
+    );
+};
+
 defineEmits(["seek"]);
 </script>