From 98c1ee01fdc45728368e404321bfce37ac6478bb Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Oct 2021 16:49:34 -0500
Subject: [PATCH] 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/AudioPlayer.vue             | 47 +++++++++++++++----
 client/components/app/StreamContainer.vue     |  2 +-
 client/components/modals/EditModal.vue        | 24 +++++++++-
 client/components/modals/Modal.vue            |  7 +++
 .../components/modals/edit-tabs/Details.vue   |  4 +-
 client/components/readers/Reader.vue          | 39 +++++++--------
 client/components/tables/LibrariesTable.vue   |  8 +++-
 client/layouts/default.vue                    | 36 +++++++++++---
 client/package.json                           |  2 +-
 client/pages/audiobook/_id/edit.vue           | 47 ++++++++++++++++---
 client/plugins/constants.js                   | 19 ++++----
 package.json                                  |  2 +-
 12 files changed, 176 insertions(+), 61 deletions(-)

diff --git a/client/components/AudioPlayer.vue b/client/components/AudioPlayer.vue
index bc1b0844..b4ce3d22 100644
--- a/client/components/AudioPlayer.vue
+++ b/client/components/AudioPlayer.vue
@@ -451,7 +451,8 @@ export default {
       })
     },
     showChapters() {
-      this.showChaptersModal = true
+      if (!this.chapters.length) return
+      this.showChaptersModal = !this.showChaptersModal
     },
     play() {
       if (!this.$refs.audio) {
@@ -486,6 +487,9 @@ export default {
       this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
 
       this.audioEl = this.$refs.audio
+      this.setTrackWidth()
+    },
+    setTrackWidth() {
       if (this.$refs.track) {
         this.trackWidth = this.$refs.track.clientWidth
       } else {
@@ -512,21 +516,48 @@ export default {
         this.$refs.volumeControl.toggleMute()
       }
     },
-    hotkey(keyCode) {
-      if (keyCode === this.$hotkeys.PLAY_PAUSE) this.playPauseClick()
-      else if (keyCode === this.$hotkeys.JUMP_FORWARD) this.forward10()
-      else if (keyCode === this.$hotkeys.JUMP_BACKWARD) this.backward10()
-      else if (keyCode === this.$hotkeys.VOLUME_UP) this.volumeUp()
-      else if (keyCode === this.$hotkeys.VOLUME_DOWN) this.volumeDown()
-      else if (keyCode === this.$hotkeys.MUTE) this.toggleMute()
+    increasePlaybackRate() {
+      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
+      if (currentRateIndex >= rates.length - 1) return
+      this.playbackRate = rates[currentRateIndex + 1] || 1
+      this.playbackRateChanged(this.playbackRate)
+    },
+    decreasePlaybackRate() {
+      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
+      if (currentRateIndex <= 0) return
+      this.playbackRate = rates[currentRateIndex - 1] || 1
+      this.playbackRateChanged(this.playbackRate)
+    },
+    closePlayer() {
+      if (this.loading) return
+      this.$emit('close')
+    },
+    hotkey(action) {
+      if (action === 'Space') this.playPauseClick()
+      else if (action === 'ArrowRight') this.forward10()
+      else if (action === 'ArrowLeft') this.backward10()
+      else if (action === 'ArrowUp') this.volumeUp()
+      else if (action === 'ArrowDown') this.volumeDown()
+      else if (action === 'KeyM') this.toggleMute()
+      else if (action === 'KeyL') this.showChapters()
+      else if (action === 'Shift-ArrowUp') this.increasePlaybackRate()
+      else if (action === 'Shift-ArrowDown') this.decreasePlaybackRate()
+      else if (action === 'Escape') this.closePlayer()
+    },
+    windowResize() {
+      this.setTrackWidth()
     }
   },
   mounted() {
+    window.addEventListener('resize', this.windowResize)
     this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated })
     this.init()
     this.$eventBus.$on('player-hotkey', this.hotkey)
   },
   beforeDestroy() {
+    window.removeEventListener('resize', this.windowResize)
     this.$store.commit('user/removeSettingsListener', 'audioplayer')
     this.$eventBus.$off('player-hotkey', this.hotkey)
   }
diff --git a/client/components/app/StreamContainer.vue b/client/components/app/StreamContainer.vue
index 04e5b69d..721138b0 100644
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@@ -14,7 +14,7 @@
       <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
     </div>
 
-    <audio-player ref="audioPlayer" :chapters="chapters" :loading="isLoading" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
+    <audio-player ref="audioPlayer" :chapters="chapters" :loading="isLoading" @close="cancelStream" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
   </div>
 </template>
 
diff --git a/client/components/modals/EditModal.vue b/client/components/modals/EditModal.vue
index 543a65e6..3ba9a523 100644
--- a/client/components/modals/EditModal.vue
+++ b/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>
 
diff --git a/client/components/modals/Modal.vue b/client/components/modals/Modal.vue
index 838b3a88..e3c42ff2 100644
--- a/client/components/modals/Modal.vue
+++ b/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)
     }
   },
diff --git a/client/components/modals/edit-tabs/Details.vue b/client/components/modals/edit-tabs/Details.vue
index bf92a54d..c3786f27 100644
--- a/client/components/modals/edit-tabs/Details.vue
+++ b/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" />
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index bcb3a7c0..ac41776a 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-50 bg-primary text-white">
     <div class="absolute top-4 right-4 z-20">
-      <span class="material-icons cursor-pointer text-4xl" @click="show = false">close</span>
+      <span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
     </div>
 
     <div class="absolute top-4 left-4 font-book">
@@ -27,8 +27,6 @@ export default {
     show(newVal) {
       if (newVal) {
         this.init()
-      } else {
-        this.close()
       }
     }
   },
@@ -89,27 +87,23 @@ export default {
     getEbookUrl(path) {
       return `/ebook/${this.libraryId}/${this.folderId}/${path}`
     },
-    keyUp(e) {
-      if (!this.$refs.readerComponent) {
-        return
-      }
-      if ((e.keyCode || e.which) == 37) {
-        if (this.$refs.readerComponent.prev) {
-          this.$refs.readerComponent.prev()
-        }
-      } else if ((e.keyCode || e.which) == 39) {
-        if (this.$refs.readerComponent.next) {
-          this.$refs.readerComponent.next()
-        }
-      } else if ((e.keyCode || e.which) == 27) {
-        this.show = false
+    hotkey(action) {
+      console.log('Reader hotkey', action)
+      if (!this.$refs.readerComponent) return
+
+      if (action === 'ArrowRight') {
+        if (this.$refs.readerComponent.next) this.$refs.readerComponent.next()
+      } else if (action === 'ArrowLeft') {
+        if (this.$refs.readerComponent.prev) this.$refs.readerComponent.prev()
+      } else if (action === 'Escape') {
+        this.close()
       }
     },
     registerListeners() {
-      document.addEventListener('keyup', this.keyUp)
+      this.$eventBus.$on('reader-hotkey', this.hotkey)
     },
     unregisterListeners() {
-      document.removeEventListener('keyup', this.keyUp)
+      this.$eventBus.$off('reader-hotkey', this.hotkey)
     },
     init() {
       this.registerListeners()
@@ -144,16 +138,15 @@ export default {
       }
     },
     close() {
-      if (this.ebookType === 'epub') {
-        this.unregisterListeners()
-      }
+      this.unregisterListeners()
+      this.show = false
     }
   },
   mounted() {
     if (this.show) this.init()
   },
   beforeDestroy() {
-    this.close()
+    this.unregisterListeners()
   }
 }
 </script>
diff --git a/client/components/tables/LibrariesTable.vue b/client/components/tables/LibrariesTable.vue
index 799c5e80..f9911398 100644
--- a/client/components/tables/LibrariesTable.vue
+++ b/client/components/tables/LibrariesTable.vue
@@ -102,11 +102,17 @@ export default {
       this.libraryCopies = this.libraries.map((lib) => {
         return { ...lib }
       })
+    },
+    librariesUpdated() {
+      this.init()
     }
   },
   mounted() {
+    this.$store.commit('libraries/addListener', { id: 'libraries-table', meth: this.librariesUpdated })
     this.init()
   },
-  beforeDestroy() {}
+  beforeDestroy() {
+    this.$store.commit('libraries/removeListener', 'libraries-table')
+  }
 }
 </script>
\ No newline at end of file
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index c7d5f853..661e2d12 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -332,25 +332,49 @@ export default {
       return activeElement && inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1
     },
     keyUp(e) {
-      if (!this.$store.state.showExperimentalFeatures) {
+      var keyCode = e.keyCode || e.which
+      if (!this.$keynames[keyCode]) {
+        // Unused hotkey
         return
       }
-      var keyCode = e.keyCode || e.which
 
-      // If an input is focused then ignore key press
+      var keyName = this.$keynames[keyCode]
+      var name = keyName
+      if (e.shiftKey) name = 'Shift-' + keyName
+
+      if (process.env.NODE_ENV !== 'production') {
+        console.log('Hotkey command', name)
+      }
+
+      // Input is focused then ignore key press
       if (this.checkActiveElementIsInput()) {
         return
       }
 
-      // Modal is open ignore key press
+      // Modal is open
       if (this.$store.state.openModal) {
-        // console.log('Modal is open', this.$store.state.openModal)
+        this.$eventBus.$emit('modal-hotkey', name)
+        return
+      }
+
+      // EReader is open
+      if (this.$store.state.showEReader) {
+        this.$eventBus.$emit('reader-hotkey', name)
+        return
+      }
+
+      // Batch selecting
+      if (this.$store.getters['getNumAudiobooksSelected']) {
+        // ESCAPE key cancels batch selection
+        if (name === 'Escape') {
+          this.$store.commit('setSelectedAudiobooks', [])
+        }
         return
       }
 
       // Playing audiobook
       if (this.$store.state.streamAudiobook) {
-        this.$eventBus.$emit('player-hotkey', keyCode)
+        this.$eventBus.$emit('player-hotkey', name)
       }
     }
   },
diff --git a/client/package.json b/client/package.json
index ad443764..54894eb9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {
diff --git a/client/pages/audiobook/_id/edit.vue b/client/pages/audiobook/_id/edit.vue
index ee339cf4..d6a77f92 100644
--- a/client/pages/audiobook/_id/edit.vue
+++ b/client/pages/audiobook/_id/edit.vue
@@ -10,9 +10,18 @@
       </div>
       <div class="w-full flex items-center text-sm py-4 bg-primary border-l border-r border-t border-gray-600">
         <div class="font-book text-center px-4 w-12">New</div>
-        <div class="font-book text-center px-4 w-12">Old</div>
-        <div class="font-book text-center px-4 w-32">Track Parsed from Filename</div>
-        <div class="font-book text-center px-4 w-32">Track From Metadata</div>
+        <div class="font-book text-center px-4 w-24 flex items-center cursor-pointer text-white text-opacity-40 hover:text-opacity-100" @click="sortByCurrent" @mousedown.prevent>
+          <span class="text-white">Current</span>
+          <span class="material-icons ml-1" :class="currentSort === 'current' ? 'text-white text-opacity-100 text-lg' : 'text-sm'">{{ currentSort === 'current' ? 'expand_more' : 'unfold_more' }}</span>
+        </div>
+        <div class="font-book text-center px-4 w-32 flex items-center cursor-pointer text-white text-opacity-40 hover:text-opacity-100" @click="sortByFilenameTrack" @mousedown.prevent>
+          <span class="text-white">Track From Filename</span>
+          <span class="material-icons ml-1" :class="currentSort === 'filename' ? 'text-white text-opacity-100 text-lg' : 'text-sm'">{{ currentSort === 'filename' ? 'expand_more' : 'unfold_more' }}</span>
+        </div>
+        <div class="font-book text-center px-4 w-32 flex items-center cursor-pointer text-white text-opacity-40 hover:text-opacity-100" @click="sortByMetadataTrack" @mousedown.prevent>
+          <span class="text-white">Track From Metadata</span>
+          <span class="material-icons ml-1" :class="currentSort === 'metadata' ? 'text-white text-opacity-100 text-lg' : 'text-sm'">{{ currentSort === 'metadata' ? 'expand_more' : 'unfold_more' }}</span>
+        </div>
         <div class="font-book truncate px-4 flex-grow">Filename</div>
 
         <div class="font-mono w-20 text-center">Size</div>
@@ -21,13 +30,13 @@
         <div class="font-mono w-56">Notes</div>
         <div class="font-book w-40">Include in Tracklist</div>
       </div>
-      <draggable v-model="files" v-bind="dragOptions" class="list-group border border-gray-600" draggable=".item" tag="ul" @start="drag = true" @end="drag = false">
+      <draggable v-model="files" v-bind="dragOptions" class="list-group border border-gray-600" draggable=".item" tag="ul" @start="drag = true" @end="drag = false" @update="draggableUpdate">
         <transition-group type="transition" :name="!drag ? 'flip-list' : null">
           <li v-for="(audio, index) in files" :key="audio.path" :class="audio.include ? 'item' : 'exclude'" class="w-full list-group-item flex items-center">
             <div class="font-book text-center px-4 py-1 w-12">
               {{ audio.include ? index - numExcluded + 1 : -1 }}
             </div>
-            <div class="font-book text-center px-4 w-12">{{ audio.index }}</div>
+            <div class="font-book text-center px-4 w-24">{{ audio.index }}</div>
             <div class="font-book text-center px-2 w-32">
               {{ audio.trackNumFromFilename }}
             </div>
@@ -121,7 +130,8 @@ export default {
       },
       saving: false,
       checkingTrackNumbers: false,
-      trackNumData: []
+      trackNumData: [],
+      currentSort: 'current'
     }
   },
   computed: {
@@ -204,12 +214,35 @@ export default {
     }
   },
   methods: {
+    draggableUpdate(e) {
+      this.currentSort = ''
+    },
+    sortByCurrent() {
+      this.files.sort((a, b) => {
+        if (a.index === null) return 1
+        return a.index - b.index
+      })
+      this.currentSort = 'current'
+    },
+    sortByMetadataTrack() {
+      this.files.sort((a, b) => {
+        if (a.trackNumFromMeta === null) return 1
+        return a.trackNumFromMeta - b.trackNumFromMeta
+      })
+      this.currentSort = 'metadata'
+    },
+    sortByFilenameTrack() {
+      this.files.sort((a, b) => {
+        if (a.trackNumFromFilename === null) return 1
+        return a.trackNumFromFilename - b.trackNumFromFilename
+      })
+      this.currentSort = 'filename'
+    },
     checkTrackNumbers() {
       this.checkingTrackNumbers = true
       this.$axios
         .$get(`/api/scantracks/${this.audiobookId}`)
         .then((res) => {
-          console.log('RES', res)
           this.trackNumData = res
           this.checkingTrackNumbers = false
         })
diff --git a/client/plugins/constants.js b/client/plugins/constants.js
index fd631ff5..a4e4849a 100644
--- a/client/plugins/constants.js
+++ b/client/plugins/constants.js
@@ -15,17 +15,18 @@ const Constants = {
   CoverDestination
 }
 
-const Hotkeys = {
-  PLAY_PAUSE: 32, // Space
-  JUMP_FORWARD: 39, // ArrowRight
-  JUMP_BACKWARD: 37, // ArrowLeft
-  CLOSE: 27, // ESCAPE
-  VOLUME_UP: 38, // ArrowUp
-  VOLUME_DOWN: 40, // ArrowDown
-  MUTE: 77, // M
+const KeyNames = {
+  27: 'Escape',
+  32: 'Space',
+  37: 'ArrowLeft',
+  38: 'ArrowUp',
+  39: 'ArrowRight',
+  40: 'ArrowDown',
+  76: 'KeyL',
+  77: 'KeyM'
 }
 
 export default ({ app }, inject) => {
   inject('constants', Constants)
-  inject('hotkeys', Hotkeys)
+  inject('keynames', KeyNames)
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index d820377f..b9f6d82a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {