From 4f03c2a35d5f61f6156b84704a7752e7e8000883 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 13 Jun 2023 17:15:28 -0500
Subject: [PATCH] Update:Cleanup chapters modal & increase width

---
 components/modals/ChaptersModal.vue | 20 +++++++++++---------
 components/modals/Modal.vue         |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/modals/ChaptersModal.vue b/components/modals/ChaptersModal.vue
index 89b76f50..9a1c94d3 100644
--- a/components/modals/ChaptersModal.vue
+++ b/components/modals/ChaptersModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <modals-modal v-model="show" :width="350" height="100%">
+  <modals-modal v-model="show" :width="400" height="100%">
     <template #outer>
-      <div v-if="currentChapter" class="absolute top-8 left-4 z-40 pt-0.5" style="max-width: 80%">
-        <p class="text-white text-lg truncate">Current: {{ currentChapterTitle }}</p>
+      <div v-if="currentChapter" class="absolute top-10 left-4 z-40 pt-1" style="max-width: 80%">
+        <p class="text-white text-lg truncate">{{ chapters.length }} Chapters</p>
       </div>
     </template>
 
@@ -46,7 +46,9 @@ export default {
   },
   watch: {
     value(newVal) {
-      this.$nextTick(this.scrollToChapter)
+      if (newVal) {
+        this.$nextTick(this.scrollToChapter)
+      }
     }
   },
   computed: {
@@ -63,7 +65,7 @@ export default {
       return this.playbackRate
     },
     currentChapterId() {
-      return this.currentChapter?.id || null
+      return this.currentChapter?.id
     },
     currentChapterTitle() {
       return this.currentChapter?.title || null
@@ -76,12 +78,12 @@ export default {
     scrollToChapter() {
       if (!this.currentChapterId) return
 
-      var container = this.$refs.container
+      const container = this.$refs.container
       if (container) {
-        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+        const currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
         if (currChapterEl) {
-          var offsetTop = currChapterEl.offsetTop
-          var containerHeight = container.clientHeight
+          const offsetTop = currChapterEl.offsetTop
+          const containerHeight = container.clientHeight
           container.scrollTo({ top: offsetTop - containerHeight / 2 })
         }
       }
diff --git a/components/modals/Modal.vue b/components/modals/Modal.vue
index 84f47c7c..400775e3 100644
--- a/components/modals/Modal.vue
+++ b/components/modals/Modal.vue
@@ -2,7 +2,7 @@
   <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
     <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
 
-    <div class="absolute z-40 top-10 right-4 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
+    <div class="absolute z-40 top-10 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
       <span class="material-icons text-4xl">close</span>
     </div>
     <slot name="outer" />