Player track chapter tickmarks, highlight current chapter, progress filters, links in stream container

client/components/app/BookShelf.vue

@@ -10,8 +10,11 @@
     </div>
 
     <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4">Your Audiobookshelf is empty!</p>
-      <ui-btn color="success" @click="scan">Scan your Audiobooks</ui-btn>
+      <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
+      <div class="flex">
+        <ui-btn to="/config" color="primary" class="w-52 mr-2" @click="scan">Configure Scanner</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
+      </div>
     </div>
     <div v-else class="w-full flex flex-col items-center">
       <template v-for="(shelf, index) in groupedBooks">
@@ -43,7 +46,8 @@ export default {
       availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
       selectedSizeIndex: 3,
       rowPaddingX: 40,
-      keywordFilterTimeout: null
+      keywordFilterTimeout: null,
+      scannerParseSubtitle: false
     }
   },
   watch: {

client/components/app/BookShelfToolbar.vue

@@ -42,7 +42,6 @@ export default {
       this.saveSettings()
     },
     saveSettings() {
-      this.$store.commit('user/setSettings', this.settings) // Immediate update
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
     init() {

client/components/app/StreamContainer.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-40 bg-primary p-4">
-    <div class="absolute -top-16 left-4">
+    <nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="absolute -top-16 left-4 cursor-pointer">
       <cards-book-cover :audiobook="streamAudiobook" :width="88" />
-    </div>
+    </nuxt-link>
     <div class="flex items-center pl-24">
       <div>
-        <h1>
-          {{ title }} <span v-if="stream" class="text-xs text-gray-400">({{ stream.id }})</span>
-        </h1>
-        <p class="text-gray-400 text-sm">by {{ author }}</p>
+        <nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="hover:underline cursor-pointer">
+          {{ title }} <span v-if="stream && $isDev" class="text-xs text-gray-400">({{ stream.id }})</span>
+        </nuxt-link>
+        <p class="text-gray-400 text-sm hover:underline cursor-pointer" @click="filterByAuthor">by {{ author }}</p>
       </div>
       <div class="flex-grow" />
       <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
@@ -66,6 +66,15 @@ export default {
     }
   },
   methods: {
+    filterByAuthor() {
+      if (this.$route.name !== 'index') {
+        this.$router.push('/')
+      }
+      var settingsUpdate = {
+        filterBy: `authors.${this.$encode(this.author)}`
+      }
+      this.$store.dispatch('user/updateUserSettings', settingsUpdate)
+    },
     audioPlayerMounted() {
       this.audioPlayerReady = true
       if (this.stream) {