Adding progress filter, filter dot, current chapter highlighted

components/app/StreamContainer.vue

@@ -18,7 +18,7 @@
       <audio-player-mini ref="audioPlayerMini" :loading="isLoading" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
     </div>
     <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
-    <modals-chapters-modal v-model="showChapterModal" :chapters="chapters" @select="selectChapter" />
+    <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
   </div>
 </template>
 
@@ -34,7 +34,8 @@ export default {
       lastProgressTimeUpdate: 0,
       showPlaybackSpeedModal: false,
       playbackSpeed: 1,
-      showChapterModal: false
+      showChapterModal: false,
+      currentTime: 0
     }
   },
   watch: {
@@ -46,6 +47,10 @@ export default {
     }
   },
   computed: {
+    currentChapter() {
+      if (!this.audiobook || !this.chapters.length) return null
+      return this.chapters.find((ch) => ch.start <= this.currentTime && ch.end > this.currentTime)
+    },
     socketConnected() {
       return this.$store.state.socketConnected
     },
@@ -124,6 +129,8 @@ export default {
       this.showChapterModal = false
     },
     async cancelStream() {
+      this.currentTime = 0
+
       if (this.download) {
         if (this.$refs.audioPlayerMini) {
           this.$refs.audioPlayerMini.terminateStream()
@@ -147,6 +154,8 @@ export default {
       }
     },
     updateTime(currentTime) {
+      this.currentTime = currentTime
+
       var diff = currentTime - this.lastProgressTimeUpdate
 
       if (diff > 4 || diff < 0) {
@@ -231,6 +240,7 @@ export default {
 
       var currentTime = await this.getDownloadStartTime()
       if (isNaN(currentTime) || currentTime === null) currentTime = 0
+      this.currentTime = currentTime
 
       // Update local current time
       this.$localStore.setCurrent({
@@ -276,6 +286,7 @@ export default {
 
       var playlistUrl = stream.clientPlaylistUri
       var currentTime = stream.clientCurrentTime || 0
+      this.currentTime = currentTime
       var playOnLoad = this.$store.state.playOnLoad
       if (playOnLoad) this.$store.commit('setPlayOnLoad', false)
 

components/modals/ChaptersModal.vue

@@ -1,10 +1,16 @@
 <template>
   <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="currentChapter" class="absolute top-4 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">Current: {{ currentChapterTitle }}</p>
+      </div>
+    </template>
+
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="chapter in chapters">
-            <li :key="chapter.id" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(chapter)">
+            <li :key="chapter.id" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
               <div class="flex items-center justify-center px-3">
                 <span class="font-normal block truncate text-lg">{{ chapter.title }}</span>
                 <div class="flex-grow" />
@@ -25,6 +31,10 @@ export default {
     chapters: {
       type: Array,
       default: () => []
+    },
+    currentChapter: {
+      type: Object,
+      default: () => null
     }
   },
   data() {
@@ -38,6 +48,12 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    currentChapterId() {
+      return this.currentChapter ? this.currentChapter.id : null
+    },
+    currentChapterTitle() {
+      return this.currentChapter ? this.currentChapter.title : null
     }
   },
   methods: {

components/modals/FilterModal.vue

@@ -80,6 +80,11 @@ export default {
           text: 'Authors',
           value: 'authors',
           sublist: true
+        },
+        {
+          text: 'Progress',
+          value: 'progress',
+          sublist: true
         }
       ]
     }
@@ -124,6 +129,9 @@ export default {
     authors() {
       return this.$store.getters['audiobooks/getUniqueAuthors']
     },
+    progress() {
+      return ['Read', 'Unread', 'In Progress']
+    },
     sublistItems() {
       return (this[this.sublist] || []).map((item) => {
         return {