Add: add hotkeys to modals, player, and ereader #121, Fix: audio player track not resizing on window resize #123, Add: sortable columns on manage tracks page #128

client/components/modals/EditModal.vue

@@ -93,6 +93,9 @@ export default {
           this.fetchOnShow = false
           this.audiobook = null
           this.init()
+          this.registerListeners()
+        } else {
+          this.unregisterListeners()
         }
       }
     }
@@ -179,7 +182,8 @@ export default {
       }
     },
     goNextBook() {
-      if (this.currentBookshelfIndex >= this.bookshelfBookIds.length) return
+      if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
+
       var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
       var nextBook = this.$store.getters['audiobooks/getAudiobook'](nextBookId)
       if (nextBook) {
@@ -212,9 +216,25 @@ export default {
         this.processing = false
         this.show = false
       }
+    },
+    hotkey(action) {
+      if (action === 'ArrowRight') {
+        this.goNextBook()
+      } else if (action === 'ArrowLeft') {
+        this.goPrevBook()
+      }
+    },
+    registerListeners() {
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+    },
+    unregisterListeners() {
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
     }
   },
-  mounted() {}
+  mounted() {},
+  beforeDestroy() {
+    this.unregisterListeners()
+  }
 }
 </script>
 

client/components/modals/Modal.vue

@@ -83,6 +83,11 @@ export default {
         this.show = false
       }
     },
+    hotkey(action) {
+      if (action === 'Escape') {
+        this.show = false
+      }
+    },
     setShow() {
       document.body.appendChild(this.el)
       setTimeout(() => {
@@ -90,6 +95,7 @@ export default {
       }, 10)
       document.documentElement.classList.add('modal-open')
 
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
       this.$store.commit('setOpenModal', this.name)
     },
     setHide() {
@@ -97,6 +103,7 @@ export default {
       this.el.remove()
       document.documentElement.classList.remove('modal-open')
 
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
       this.$store.commit('setOpenModal', null)
     }
   },

client/components/modals/edit-tabs/Details.vue

@@ -60,8 +60,8 @@
             <ui-btn v-if="isRootUser" :loading="savingMetadata" color="bg" type="button" class="h-full" small @click.stop.prevent="saveMetadata">Save Metadata</ui-btn>
           </ui-tooltip>
 
-          <ui-tooltip :disabled="libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="ml-4">
-            <ui-btn v-if="isRootUser" :loading="rescanning" :disabled="libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
+          <ui-tooltip :disabled="!!libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="ml-4">
+            <ui-btn v-if="isRootUser" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
           </ui-tooltip>
 
           <div class="flex-grow" />