mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-08-04 18:24:46 +02:00
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
This commit is contained in:
parent
97a065030e
commit
98c1ee01fd
12 changed files with 176 additions and 61 deletions
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue