From adead97b23f754b7357b68cdceac477af71f2cf1 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 22 Jul 2022 20:50:21 +0200
Subject: [PATCH 1/5] fix crash on chapters

---
 src/components/ChaptersBar.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index ca57f195..ab8b9dd5 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -10,7 +10,7 @@
             @click="$emit('seek', chapter.start)"
             class="chapter-vertical"
             :class="
-                playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
+                isCurrentChapter(chapters, index, playerPosition)
                     ? 'chapter-vertical bg-red-500/50'
                     : 'chapter-vertical'
             "
@@ -29,13 +29,9 @@
     <div v-else class="flex overflow-x-auto">
         <div
             :key="chapter.start"
-            v-for="(chapter, index) in chapters"
+            v-for="chapter in chapters"
             @click="$emit('seek', chapter.start)"
-            :class="
-                playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
-                    ? 'chapter bg-red-500/50'
-                    : 'chapter'
-            "
+            :class="isCurrentChapter(chapters, index, playerPosition) ? 'chapter bg-red-500/50' : 'chapter'"
         >
             <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
@@ -70,6 +66,19 @@
 }
 </style>
 
+<script>
+export default {
+    methods: {
+        isCurrentChapter(chapters, index, playerPosition) {
+            if (index + 1 === chapters.length && playerPosition >= chapters[index].start) return true;
+            else if (index + 1 === chapters.length) return false;
+            else if (playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start) return true;
+            return false;
+        },
+    },
+};
+</script>
+
 <script setup>
 import { defineProps, defineEmits } from "vue";
 

From ded13b14c9dac1684b95342dc1f796d251cfa00c Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 22 Jul 2022 20:52:35 +0200
Subject: [PATCH 2/5] fix syntax

---
 src/components/ChaptersBar.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index ab8b9dd5..19bdbacd 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -70,9 +70,11 @@
 export default {
     methods: {
         isCurrentChapter(chapters, index, playerPosition) {
-            if (index + 1 === chapters.length && playerPosition >= chapters[index].start) return true;
-            else if (index + 1 === chapters.length) return false;
-            else if (playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start) return true;
+            if (index + 1 == chapters.length) {
+                if (playerPosition >= chapters[index].start) return true;
+                else return false;
+            } else if (playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start)
+                return true;
             return false;
         },
     },

From 6f0897a263c70857c402d603c96470e5336b301c Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 22 Jul 2022 20:54:52 +0200
Subject: [PATCH 3/5] fix mobile

---
 src/components/ChaptersBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 19bdbacd..5679813d 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -29,7 +29,7 @@
     <div v-else class="flex overflow-x-auto">
         <div
             :key="chapter.start"
-            v-for="chapter in chapters"
+            v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
             :class="isCurrentChapter(chapters, index, playerPosition) ? 'chapter bg-red-500/50' : 'chapter'"
         >

From e68e73794e3f1f68572040ed2c352f4f23ed25bb Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 23 Jul 2022 14:40:16 +0200
Subject: [PATCH 4/5] fix bad syntax

---
 src/components/ChaptersBar.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 5679813d..d777c74e 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -71,11 +71,10 @@ export default {
     methods: {
         isCurrentChapter(chapters, index, playerPosition) {
             if (index + 1 == chapters.length) {
-                if (playerPosition >= chapters[index].start) return true;
-                else return false;
-            } else if (playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start)
-                return true;
-            return false;
+                return playerPosition >= chapters[index].start;
+            } else {
+                return playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start;
+            }
         },
     },
 };

From e2fd9f6c6850d6ede0f174acf8548d40b4ded17c Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 25 Jul 2022 17:50:42 +0530
Subject: [PATCH 5/5] Cleanup code slightly.

---
 src/components/ChaptersBar.vue | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index d777c74e..30feb56a 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -9,11 +9,7 @@
             v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
             class="chapter-vertical"
-            :class="
-                isCurrentChapter(chapters, index, playerPosition)
-                    ? 'chapter-vertical bg-red-500/50'
-                    : 'chapter-vertical'
-            "
+            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
         >
             <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>