extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-11-07 08:34:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
advplyr 2021-10-23 16:49:34 -05:00
parent 97a065030e
commit 98c1ee01fd
12 changed files with 176 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/components/AudioPlayer.vue
View File

@ -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)
}

2
client/components/app/StreamContainer.vue
View File

@ -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>

24
client/components/modals/EditModal.vue
View File

@ -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>

7
client/components/modals/Modal.vue
View File

@ -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)
}
},

4
client/components/modals/edit-tabs/Details.vue
View File

@ -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" />

39
client/components/readers/Reader.vue
View File

@ -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>

8
client/components/tables/LibrariesTable.vue
View File

@ -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>

36
client/layouts/default.vue
View File

@ -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)
}
}
},

2
client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "audiobookshelf-client",
"version": "1.4.15",
"version": "1.4.16",
"description": "Audiobook manager and player",
"main": "index.js",
"scripts": {

47
client/pages/audiobook/_id/edit.vue
View File

@ -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
})

19
client/plugins/constants.js
View File

@ -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)
}

2
package.json
View File

@ -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": {