Adding progress filter, filter dot, current chapter highlighted

android/app/build.gradle

@@ -13,8 +13,8 @@ android {
         applicationId "com.audiobookshelf.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 16
-        versionName "0.9.1-beta"
+        versionCode 17
+        versionName "0.9.2-beta"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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 {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "v0.9.1-beta",
+  "version": "v0.9.2-beta",
   "author": "advplyr",
   "scripts": {
     "dev": "nuxt --hostname localhost --port 1337",

pages/index.vue

@@ -6,7 +6,10 @@
         <p class="font-book">{{ numAudiobooks }} Audiobooks</p>
 
         <div class="flex-grow" />
-        <span class="material-icons px-2" @click="showFilterModal = true">filter_alt</span>
+        <div class="relative flex items-center px-2">
+          <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
+          <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
+        </div>
         <span class="material-icons px-2" @click="showSortModal = true">sort</span>
       </div>
     </div>
@@ -29,6 +32,9 @@ export default {
     }
   },
   computed: {
+    hasFilters() {
+      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
+    },
     numAudiobooks() {
       return this.$store.getters['audiobooks/getFiltered']().length
     }

store/audiobooks.js

@@ -17,15 +17,11 @@ export const getters = {
     return state.audiobooks.find(ab => ab.id === id)
   },
   getFiltered: (state, getters, rootState, rootGetters) => () => {
-    // var isDisc = !rootState.networkConnected || !rootState.socketConnected
-    // console.log('GET FILETERED', isDisc)
-    // var filtered = isDisc ? rootGetters['downloads/getAudiobooks'] : state.audiobooks
-    // console.log('FILTERED LEN', filtered.length)
     var filtered = state.audiobooks
     var settings = rootState.user.settings || {}
     var filterBy = settings.filterBy || ''
 
-    var searchGroups = ['genres', 'tags', 'series', 'authors']
+    var searchGroups = ['genres', 'tags', 'series', 'authors', 'progress']
     var group = searchGroups.find(_group => filterBy.startsWith(_group + '.'))
     if (group) {
       var filter = decode(filterBy.replace(`${group}.`, ''))
@@ -33,6 +29,16 @@ export const getters = {
       else if (group === 'tags') filtered = filtered.filter(ab => ab.tags.includes(filter))
       else if (group === 'series') filtered = filtered.filter(ab => ab.book && ab.book.series === filter)
       else if (group === 'authors') filtered = filtered.filter(ab => ab.book && ab.book.author === filter)
+      else if (group === 'progress') {
+        filtered = filtered.filter(ab => {
+          var userAudiobook = rootGetters['user/getUserAudiobook'](ab.id)
+          var isRead = userAudiobook && userAudiobook.isRead
+          if (filter === 'Read' && isRead) return true
+          if (filter === 'Unread' && !isRead) return true
+          if (filter === 'In Progress' && (userAudiobook && !userAudiobook.isRead && userAudiobook.progress > 0)) return true
+          return false
+        })
+      }
     }
     return filtered
   },