mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
Cleaning up, adding readme and images, genre filter
This commit is contained in:
parent
53e46ff54d
commit
307b5b83a9
@ -6,4 +6,5 @@ npm-debug.log
|
|||||||
/audiobooks
|
/audiobooks
|
||||||
/metadata
|
/metadata
|
||||||
dev.js
|
dev.js
|
||||||
/test/
|
/test/
|
||||||
|
/client/.nuxt/
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full h-16 bg-primary relative">
|
<div class="w-full h-16 bg-primary relative">
|
||||||
<div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-20">
|
<div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-30">
|
||||||
<div class="flex h-full items-center">
|
<div class="flex h-full items-center">
|
||||||
<img v-if="!showBack" src="/LogoTransparent.png" class="w-12 h-12 mr-4" />
|
<img v-if="!showBack" src="/LogoTransparent.png" class="w-12 h-12 mr-4" />
|
||||||
<a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
|
<a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
|
||||||
|
@ -20,9 +20,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { sort } from '@/assets/fastSort'
|
|
||||||
console.log('SORT', sort)
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full h-10 relative">
|
<div class="w-full h-10 relative">
|
||||||
<div id="toolbar" class="absolute top-0 left-0 w-full h-full z-10 flex items-center px-8">
|
<div id="toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-8">
|
||||||
<!-- <p>Order By: {{ settings.orderBy }}</p>
|
|
||||||
<p class="px-4">Desc: {{ settings.orderDesc ? 'Desc' : 'Asc' }}</p> -->
|
|
||||||
<p class="font-book">{{ numShowing }} Audiobooks</p>
|
<p class="font-book">{{ numShowing }} Audiobooks</p>
|
||||||
<div class="flex-grow" />
|
<div class="flex-grow" />
|
||||||
<controls-filter-select v-model="settings.filterBy" class="w-28 h-7.5" @change="updateFilter" />
|
<controls-filter-select v-model="settings.filterBy" class="w-40 h-7.5" @change="updateFilter" />
|
||||||
<span class="px-4 text-sm">by</span>
|
<span class="px-4 text-sm">by</span>
|
||||||
<controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-40 h-7.5" @change="updateOrder" />
|
<controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-40 h-7.5" @change="updateOrder" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
|
<div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
|
||||||
<p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ author }}</p>
|
<p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -36,14 +36,20 @@ export default {
|
|||||||
return this.book.title || 'No Title'
|
return this.book.title || 'No Title'
|
||||||
},
|
},
|
||||||
titleCleaned() {
|
titleCleaned() {
|
||||||
if (this.title.length > 75) {
|
if (this.title.length > 60) {
|
||||||
return this.title.slice(0, 47) + '...'
|
return this.title.slice(0, 57) + '...'
|
||||||
}
|
}
|
||||||
return this.title
|
return this.title
|
||||||
},
|
},
|
||||||
author() {
|
author() {
|
||||||
return this.book.author || 'Unknown'
|
return this.book.author || 'Unknown'
|
||||||
},
|
},
|
||||||
|
authorCleaned() {
|
||||||
|
if (this.author.length > 30) {
|
||||||
|
return this.author.slice(0, 27) + '...'
|
||||||
|
}
|
||||||
|
return this.author
|
||||||
|
},
|
||||||
cover() {
|
cover() {
|
||||||
return this.book.cover || '/book_placeholder.jpg'
|
return this.book.cover || '/book_placeholder.jpg'
|
||||||
},
|
},
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div ref="wrapper" class="relative" v-click-outside="clickOutside">
|
<div ref="wrapper" class="relative" v-click-outside="clickOutside">
|
||||||
<button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
|
<button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
|
||||||
<span class="flex items-center justify-between">
|
<span class="flex items-center justify-between">
|
||||||
<span class="block truncate" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
<span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
@ -11,15 +11,42 @@
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
|
<div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||||
<template v-for="item in items">
|
<ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
|
||||||
<li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
|
<template v-for="item in items">
|
||||||
<div class="flex items-center">
|
<li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
|
||||||
<span class="font-normal ml-3 block truncate">{{ item.text }}</span>
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="font-normal ml-3 block truncate">{{ item.text }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
|
||||||
|
<span class="material-icons">arrow_right</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
<ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
|
||||||
|
<li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
|
||||||
|
<div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
|
||||||
|
<span class="material-icons">arrow_left</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="font-normal ml-3 block truncate">Back</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
<li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
|
||||||
</ul>
|
<div class="flex items-center justify-center">
|
||||||
|
<span class="font-normal block truncate py-2">No {{ sublist }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<template v-for="item in sublistItems">
|
||||||
|
<li :key="item" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item)">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="font-normal truncate py-2 text-xs">{{ snakeToNormal(item) }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -31,6 +58,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showMenu: false,
|
showMenu: false,
|
||||||
|
sublist: null,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: 'All',
|
text: 'All',
|
||||||
@ -38,15 +66,25 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Genre',
|
text: 'Genre',
|
||||||
value: 'genre'
|
value: 'genres',
|
||||||
|
sublist: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Tag',
|
text: 'Tag',
|
||||||
value: 'tag'
|
value: 'tags',
|
||||||
|
sublist: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
showMenu(newVal) {
|
||||||
|
if (!newVal) {
|
||||||
|
if (this.sublist && !this.selectedItemSublist) this.sublist = null
|
||||||
|
if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
selected: {
|
selected: {
|
||||||
get() {
|
get() {
|
||||||
@ -56,17 +94,53 @@ export default {
|
|||||||
this.$emit('input', val)
|
this.$emit('input', val)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
selectedItemSublist() {
|
||||||
|
return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
|
||||||
|
},
|
||||||
selectedText() {
|
selectedText() {
|
||||||
|
if (!this.selected) return ''
|
||||||
|
var parts = this.selected.split('.')
|
||||||
|
if (parts.length > 1) {
|
||||||
|
return this.snakeToNormal(parts[1])
|
||||||
|
}
|
||||||
var _sel = this.items.find((i) => i.value === this.selected)
|
var _sel = this.items.find((i) => i.value === this.selected)
|
||||||
if (!_sel) return ''
|
if (!_sel) return ''
|
||||||
return _sel.text
|
return _sel.text
|
||||||
|
},
|
||||||
|
genres() {
|
||||||
|
return this.$store.state.audiobooks.genres
|
||||||
|
},
|
||||||
|
tags() {
|
||||||
|
return this.$store.state.audiobooks.tags
|
||||||
|
},
|
||||||
|
sublistItems() {
|
||||||
|
return this[this.sublist] || []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
snakeToNormal(kebab) {
|
||||||
|
if (!kebab) {
|
||||||
|
return 'err'
|
||||||
|
}
|
||||||
|
return String(kebab)
|
||||||
|
.split('_')
|
||||||
|
.map((t) => t.slice(0, 1).toUpperCase() + t.slice(1))
|
||||||
|
.join(' ')
|
||||||
|
},
|
||||||
clickOutside() {
|
clickOutside() {
|
||||||
|
if (!this.selectedItemSublist) this.sublist = null
|
||||||
this.showMenu = false
|
this.showMenu = false
|
||||||
},
|
},
|
||||||
clickedOption(val) {
|
clickedSublistOption(item) {
|
||||||
|
this.clickedOption({ value: `${this.sublist}.${item}` })
|
||||||
|
},
|
||||||
|
clickedOption(option) {
|
||||||
|
if (option.sublist) {
|
||||||
|
this.sublist = option.value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var val = option.value
|
||||||
if (this.selected === val) {
|
if (this.selected === val) {
|
||||||
this.showMenu = false
|
this.showMenu = false
|
||||||
return
|
return
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
<div ref="wrapper" class="relative" v-click-outside="clickOutside">
|
<div ref="wrapper" class="relative" v-click-outside="clickOutside">
|
||||||
<button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
|
<button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
|
||||||
<span class="flex items-center justify-between">
|
<span class="flex items-center justify-between">
|
||||||
<span class="block truncate" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
<span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
||||||
<span class="material-icons text-xl text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
|
<span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
|
||||||
</span>
|
</span>
|
||||||
<!-- <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
<!-- <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-20 opacity-0">
|
<div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-30 opacity-0">
|
||||||
<div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
|
<div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
|
||||||
|
|
||||||
<div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
|
<div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
<ui-textarea-with-label v-model="details.description" :rows="3" label="Description" class="mt-2" />
|
<ui-textarea-with-label v-model="details.description" :rows="3" label="Description" class="mt-2" />
|
||||||
|
|
||||||
<ui-multi-select v-model="details.genre" label="Genre" :items="genres" class="mt-2" @addOption="addGenre" />
|
<ui-multi-select v-model="details.genres" label="Genre" :items="genres" class="mt-2" @addOption="addGenre" />
|
||||||
|
|
||||||
<div class="flex py-4">
|
<div class="flex py-4">
|
||||||
<ui-btn color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
|
<ui-btn color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
|
||||||
@ -45,7 +45,7 @@ export default {
|
|||||||
description: null,
|
description: null,
|
||||||
author: null,
|
author: null,
|
||||||
series: null,
|
series: null,
|
||||||
genre: []
|
genres: []
|
||||||
},
|
},
|
||||||
resettingProgress: false,
|
resettingProgress: false,
|
||||||
genres: ['adventure', 'autobiography', 'biography', 'childrens', 'comedy', 'crime', 'dystopian', 'fantasy', 'fiction', 'health', 'history', 'horror', 'mystery', 'new_adult', 'nonfiction', 'philosophy', 'politics', 'religion', 'romance', 'sci-fi', 'self-help', 'short_story', 'technology', 'thriller', 'true_crime', 'western', 'young_adult']
|
genres: ['adventure', 'autobiography', 'biography', 'childrens', 'comedy', 'crime', 'dystopian', 'fantasy', 'fiction', 'health', 'history', 'horror', 'mystery', 'new_adult', 'nonfiction', 'philosophy', 'politics', 'religion', 'romance', 'sci-fi', 'self-help', 'short_story', 'technology', 'thriller', 'true_crime', 'western', 'young_adult']
|
||||||
@ -109,7 +109,7 @@ export default {
|
|||||||
this.details.title = this.book.title
|
this.details.title = this.book.title
|
||||||
this.details.description = this.book.description
|
this.details.description = this.book.description
|
||||||
this.details.author = this.book.author
|
this.details.author = this.book.author
|
||||||
this.details.genre = this.book.genre || []
|
this.details.genres = this.book.genres || []
|
||||||
this.details.series = this.book.series
|
this.details.series = this.book.series
|
||||||
},
|
},
|
||||||
resetProgress() {
|
resetProgress() {
|
||||||
|
@ -55,7 +55,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
search: null,
|
search: null,
|
||||||
lastSearch: null,
|
lastSearch: null,
|
||||||
processing: false,
|
|
||||||
searchResults: []
|
searchResults: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -99,16 +99,11 @@ export default {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.currentSearch = this.textInput
|
this.currentSearch = this.textInput
|
||||||
// this.itemsToShow = this.items.filter((i) => {
|
|
||||||
// var iValue = String(i.value).toLowerCase()
|
|
||||||
// return iValue.includes(this.currentSearch.toLowerCase())
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
keydownInput() {
|
keydownInput() {
|
||||||
clearTimeout(this.typingTimeout)
|
clearTimeout(this.typingTimeout)
|
||||||
this.isTyping = true
|
this.isTyping = true
|
||||||
this.typingTimeout = setTimeout(() => {
|
this.typingTimeout = setTimeout(() => {
|
||||||
// this.setMatchingItems()
|
|
||||||
this.currentSearch = this.textInput
|
this.currentSearch = this.textInput
|
||||||
}, 100)
|
}, 100)
|
||||||
this.setInputWidth()
|
this.setInputWidth()
|
||||||
@ -145,7 +140,6 @@ export default {
|
|||||||
}
|
}
|
||||||
this.isFocused = true
|
this.isFocused = true
|
||||||
this.recalcMenuPos()
|
this.recalcMenuPos()
|
||||||
// this.$refs.input.style.width = '100px'
|
|
||||||
},
|
},
|
||||||
inputBlur() {
|
inputBlur() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -165,15 +159,12 @@ export default {
|
|||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
if (this.$refs.input) this.$refs.input.focus()
|
if (this.$refs.input) this.$refs.input.focus()
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.$refs.input.focus()
|
|
||||||
// })
|
|
||||||
var newSelected = null
|
var newSelected = null
|
||||||
if (this.selected.includes(itemValue)) {
|
if (this.selected.includes(itemValue)) {
|
||||||
newSelected = this.selected.filter((s) => s !== itemValue)
|
newSelected = this.selected.filter((s) => s !== itemValue)
|
||||||
} else {
|
} else {
|
||||||
newSelected = this.selected.concat([itemValue])
|
newSelected = this.selected.concat([itemValue])
|
||||||
// this.blur()
|
|
||||||
}
|
}
|
||||||
this.textInput = null
|
this.textInput = null
|
||||||
this.currentSearch = null
|
this.currentSearch = null
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "audiobookshelf-client",
|
"name": "audiobookshelf-client",
|
||||||
"version": "0.9.51",
|
"version": "0.9.52",
|
||||||
"description": "Audiobook manager and player",
|
"description": "Audiobook manager and player",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -29,10 +29,10 @@
|
|||||||
<div class="font-book text-center px-4 w-12">
|
<div class="font-book text-center px-4 w-12">
|
||||||
{{ audio.index }}
|
{{ audio.index }}
|
||||||
</div>
|
</div>
|
||||||
<div class="font-book text-center px-2 w-40">
|
<div class="font-book text-center px-2 w-32">
|
||||||
{{ audio.trackNumFromFilename }}
|
{{ audio.trackNumFromFilename }}
|
||||||
</div>
|
</div>
|
||||||
<div class="font-book text-center w-40">
|
<div class="font-book text-center w-32">
|
||||||
{{ audio.trackNumFromMeta }}
|
{{ audio.trackNumFromMeta }}
|
||||||
</div>
|
</div>
|
||||||
<div class="font-book truncate px-4 flex-grow">
|
<div class="font-book truncate px-4 flex-grow">
|
||||||
|
@ -1,13 +1,31 @@
|
|||||||
import { sort } from '@/assets/fastSort'
|
import { sort } from '@/assets/fastSort'
|
||||||
|
|
||||||
|
const STANDARD_GENRES = ['adventure', 'autobiography', 'biography', 'childrens', 'comedy', 'crime', 'dystopian', 'fantasy', 'fiction', 'health', 'history', 'horror', 'mystery', 'new_adult', 'nonfiction', 'philosophy', 'politics', 'religion', 'romance', 'sci-fi', 'self-help', 'short_story', 'technology', 'thriller', 'true_crime', 'western', 'young_adult']
|
||||||
|
|
||||||
export const state = () => ({
|
export const state = () => ({
|
||||||
audiobooks: [],
|
audiobooks: [],
|
||||||
listeners: []
|
listeners: [],
|
||||||
|
genres: [...STANDARD_GENRES],
|
||||||
|
tags: []
|
||||||
})
|
})
|
||||||
|
|
||||||
export const getters = {
|
export const getters = {
|
||||||
getFiltered: (state, getters, rootState) => () => {
|
getFiltered: (state, getters, rootState) => () => {
|
||||||
var filtered = state.audiobooks
|
var filtered = state.audiobooks
|
||||||
|
var settings = rootState.settings.settings || {}
|
||||||
|
var filterBy = settings.filterBy || ''
|
||||||
|
var filterByParts = filterBy.split('.')
|
||||||
|
if (filterByParts.length > 1) {
|
||||||
|
var primary = filterByParts[0]
|
||||||
|
var secondary = filterByParts[1]
|
||||||
|
if (primary === 'genres') {
|
||||||
|
filtered = filtered.filter(ab => {
|
||||||
|
return ab.book && ab.book.genres.includes(secondary)
|
||||||
|
})
|
||||||
|
} else if (primary === 'tags') {
|
||||||
|
filtered = filtered.filter(ab => ab.tags.includes(secondary))
|
||||||
|
}
|
||||||
|
}
|
||||||
// TODO: Add filters
|
// TODO: Add filters
|
||||||
return filtered
|
return filtered
|
||||||
},
|
},
|
||||||
@ -40,7 +58,21 @@ export const actions = {
|
|||||||
|
|
||||||
export const mutations = {
|
export const mutations = {
|
||||||
set(state, audiobooks) {
|
set(state, audiobooks) {
|
||||||
console.log('Set Audiobooks', audiobooks)
|
// GENRES
|
||||||
|
var genres = [...state.genres]
|
||||||
|
audiobooks.forEach((ab) => {
|
||||||
|
if (!ab.book) return
|
||||||
|
genres = genres.concat(ab.book.genres)
|
||||||
|
})
|
||||||
|
state.genres = [...new Set(genres)] // Remove Duplicates
|
||||||
|
|
||||||
|
// TAGS
|
||||||
|
var tags = []
|
||||||
|
audiobooks.forEach((ab) => {
|
||||||
|
tags = tags.concat(ab.tags)
|
||||||
|
})
|
||||||
|
state.tags = [...new Set(tags)] // Remove Duplicates
|
||||||
|
|
||||||
state.audiobooks = audiobooks
|
state.audiobooks = audiobooks
|
||||||
state.listeners.forEach((listener) => {
|
state.listeners.forEach((listener) => {
|
||||||
listener.meth()
|
listener.meth()
|
||||||
@ -49,13 +81,28 @@ export const mutations = {
|
|||||||
addUpdate(state, audiobook) {
|
addUpdate(state, audiobook) {
|
||||||
var index = state.audiobooks.findIndex(a => a.id === audiobook.id)
|
var index = state.audiobooks.findIndex(a => a.id === audiobook.id)
|
||||||
if (index >= 0) {
|
if (index >= 0) {
|
||||||
console.log('Audiobook Updated', audiobook)
|
|
||||||
state.audiobooks.splice(index, 1, audiobook)
|
state.audiobooks.splice(index, 1, audiobook)
|
||||||
} else {
|
} else {
|
||||||
console.log('Audiobook Added', audiobook)
|
|
||||||
state.audiobooks.push(audiobook)
|
state.audiobooks.push(audiobook)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// GENRES
|
||||||
|
if (audiobook.book) {
|
||||||
|
var newGenres = []
|
||||||
|
audiobook.book.genres.forEach((genre) => {
|
||||||
|
if (!state.genres.includes(genre)) newGenres.push(genre)
|
||||||
|
})
|
||||||
|
if (newGenres.length) state.genres = state.genres.concat(newGenres)
|
||||||
|
}
|
||||||
|
|
||||||
|
// TAGS
|
||||||
|
var newTags = []
|
||||||
|
audiobook.tags.forEach((tag) => {
|
||||||
|
if (!state.tags.includes(tag)) newTags.push(tag)
|
||||||
|
})
|
||||||
|
if (newTags.length) state.tags = state.tags.concat(newTags)
|
||||||
|
|
||||||
|
|
||||||
state.listeners.forEach((listener) => {
|
state.listeners.forEach((listener) => {
|
||||||
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
||||||
listener.meth()
|
listener.meth()
|
||||||
@ -63,9 +110,35 @@ export const mutations = {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
remove(state, audiobook) {
|
remove(state, audiobook) {
|
||||||
console.log('Audiobook removed', audiobook)
|
|
||||||
state.audiobooks = state.audiobooks.filter(a => a.id !== audiobook.id)
|
state.audiobooks = state.audiobooks.filter(a => a.id !== audiobook.id)
|
||||||
|
|
||||||
|
// GENRES
|
||||||
|
if (audiobook.book) {
|
||||||
|
audiobook.book.genres.forEach((genre) => {
|
||||||
|
if (!STANDARD_GENRES.includes(genre)) {
|
||||||
|
var isInOtherAB = state.audiobooks.find(ab => {
|
||||||
|
return ab.book && ab.book.genres.includes(genre)
|
||||||
|
})
|
||||||
|
if (!isInOtherAB) {
|
||||||
|
// Genre is not used by any other audiobook - remove it
|
||||||
|
state.genres = state.genres.filter(g => g !== genre)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// TAGS
|
||||||
|
audiobook.tags.forEach((tag) => {
|
||||||
|
var isInOtherAB = state.audiobooks.find(ab => {
|
||||||
|
return ab.tags.includes(tag)
|
||||||
|
})
|
||||||
|
if (!isInOtherAB) {
|
||||||
|
// Tag is not used by any other audiobook - remove it
|
||||||
|
state.tags = state.tags.filter(t => t !== tag)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
state.listeners.forEach((listener) => {
|
state.listeners.forEach((listener) => {
|
||||||
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
||||||
listener.meth()
|
listener.meth()
|
||||||
|
BIN
images/ss_audiobook.png
Normal file
BIN
images/ss_audiobook.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 185 KiB |
BIN
images/ss_bookshelf.png
Normal file
BIN
images/ss_bookshelf.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 MiB |
BIN
images/ss_no_covers.png
Normal file
BIN
images/ss_no_covers.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
BIN
images/ss_streaming.png
Normal file
BIN
images/ss_streaming.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "audiobookshelf",
|
"name": "audiobookshelf",
|
||||||
"version": "0.9.51",
|
"version": "0.9.52",
|
||||||
"description": "",
|
"description": "Self-hosted audiobook server for managing and playing audiobooks.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node index.js",
|
"dev": "node index.js",
|
||||||
|
32
readme.md
Normal file
32
readme.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# AudioBookshelf
|
||||||
|
|
||||||
|
AudioBookshelf is a self-hosted audiobook server for managing and playing your audiobooks.
|
||||||
|
|
||||||
|
**Currently in early beta**
|
||||||
|
|
||||||
|
<img alt="Screenshot1" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_bookshelf.png" />
|
||||||
|
|
||||||
|
Missing a lot of features still, like...
|
||||||
|
|
||||||
|
* Scanner is intended for file structure `[author name]/[title]/...`
|
||||||
|
* Adding new audiobooks require pressing Scan button again (on settings page)
|
||||||
|
* Matching is all manual now and only using 1 source (openlibrary)
|
||||||
|
* Need to add cover selection from match results
|
||||||
|
* Different views to see more details of each audiobook
|
||||||
|
* Mobile app will be next..
|
||||||
|
|
||||||
|
<img alt="Screenshot2" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_streaming.png" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Built to run in Docker for now (also on Unraid server Community Apps)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 1337:80 -v /audiobooks:/audiobooks -v /config:/config -v /metadata:/metadata --name audiobookshelf --rm advplyr/audiobookshelf
|
||||||
|
```
|
||||||
|
|
||||||
|
<img alt="Screenshot3" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_audiobook.png" />
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Feel free to help out
|
@ -28,6 +28,8 @@ class ApiController {
|
|||||||
this.router.delete('/user/audiobook/:id', this.resetUserAudiobookProgress.bind(this))
|
this.router.delete('/user/audiobook/:id', this.resetUserAudiobookProgress.bind(this))
|
||||||
|
|
||||||
this.router.post('/authorize', this.authorize.bind(this))
|
this.router.post('/authorize', this.authorize.bind(this))
|
||||||
|
|
||||||
|
this.router.get('/genres', this.getGenres.bind(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
find(req, res) {
|
find(req, res) {
|
||||||
@ -139,5 +141,11 @@ class ApiController {
|
|||||||
this.emitter('user_updated', req.user.toJSONForBrowser())
|
this.emitter('user_updated', req.user.toJSONForBrowser())
|
||||||
res.sendStatus(200)
|
res.sendStatus(200)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGenres(req, res) {
|
||||||
|
res.json({
|
||||||
|
genres: this.db.getGenres()
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
module.exports = ApiController
|
module.exports = ApiController
|
@ -57,6 +57,10 @@ class Audiobook {
|
|||||||
return this.book ? this.book.author : 'Unknown'
|
return this.book ? this.book.author : 'Unknown'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get genres() {
|
||||||
|
return this.book ? this.book.genres || [] : []
|
||||||
|
}
|
||||||
|
|
||||||
get totalDuration() {
|
get totalDuration() {
|
||||||
var total = 0
|
var total = 0
|
||||||
this.tracks.forEach((track) => total += track.duration)
|
this.tracks.forEach((track) => total += track.duration)
|
||||||
|
@ -8,7 +8,7 @@ class Book {
|
|||||||
this.publisher = null
|
this.publisher = null
|
||||||
this.description = null
|
this.description = null
|
||||||
this.cover = null
|
this.cover = null
|
||||||
this.genre = []
|
this.genres = []
|
||||||
|
|
||||||
if (book) {
|
if (book) {
|
||||||
this.construct(book)
|
this.construct(book)
|
||||||
@ -24,7 +24,7 @@ class Book {
|
|||||||
this.publisher = book.publisher
|
this.publisher = book.publisher
|
||||||
this.description = book.description
|
this.description = book.description
|
||||||
this.cover = book.cover
|
this.cover = book.cover
|
||||||
this.genre = book.genre
|
this.genres = book.genres
|
||||||
}
|
}
|
||||||
|
|
||||||
toJSON() {
|
toJSON() {
|
||||||
@ -37,7 +37,7 @@ class Book {
|
|||||||
publisher: this.publisher,
|
publisher: this.publisher,
|
||||||
description: this.description,
|
description: this.description,
|
||||||
cover: this.cover,
|
cover: this.cover,
|
||||||
genre: this.genre
|
genres: this.genres
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,7 +49,7 @@ class Book {
|
|||||||
this.publishYear = data.publish_year || null
|
this.publishYear = data.publish_year || null
|
||||||
this.description = data.description || null
|
this.description = data.description || null
|
||||||
this.cover = data.cover || null
|
this.cover = data.cover || null
|
||||||
this.genre = data.genre || []
|
this.genres = data.genres || []
|
||||||
}
|
}
|
||||||
|
|
||||||
update(payload) {
|
update(payload) {
|
||||||
@ -57,12 +57,12 @@ class Book {
|
|||||||
for (const key in payload) {
|
for (const key in payload) {
|
||||||
if (payload[key] === undefined) continue;
|
if (payload[key] === undefined) continue;
|
||||||
|
|
||||||
if (key === 'genre') {
|
if (key === 'genres') {
|
||||||
if (payload['genre'] === null && this.genre !== null) {
|
if (payload['genres'] === null && this.genres !== null) {
|
||||||
this.genre = []
|
this.genres = []
|
||||||
hasUpdates = true
|
hasUpdates = true
|
||||||
} else if (payload['genre'].join(',') !== this.genre.join(',')) {
|
} else if (payload['genres'].join(',') !== this.genres.join(',')) {
|
||||||
this.genre = payload['genre']
|
this.genres = payload['genres']
|
||||||
hasUpdates = true
|
hasUpdates = true
|
||||||
}
|
}
|
||||||
} else if (this[key] !== undefined && payload[key] !== this[key]) {
|
} else if (this[key] !== undefined && payload[key] !== this[key]) {
|
||||||
|
18
server/Db.js
18
server/Db.js
@ -154,5 +154,23 @@ class Db {
|
|||||||
Logger.error(`[DB] Remove entity ${entityName} Failed: ${error}`)
|
Logger.error(`[DB] Remove entity ${entityName} Failed: ${error}`)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGenres() {
|
||||||
|
var allGenres = []
|
||||||
|
this.db.audiobooks.forEach((audiobook) => {
|
||||||
|
allGenres = allGenres.concat(audiobook.genres)
|
||||||
|
})
|
||||||
|
allGenres = [...new Set(allGenres)] // Removes duplicates
|
||||||
|
return allGenres
|
||||||
|
}
|
||||||
|
|
||||||
|
getTags() {
|
||||||
|
var allTags = []
|
||||||
|
this.db.audiobooks.forEach((audiobook) => {
|
||||||
|
allTags = allTags.concat(audiobook.tags)
|
||||||
|
})
|
||||||
|
allTags = [...new Set(allTags)] // Removes duplicates
|
||||||
|
return allTags
|
||||||
|
}
|
||||||
}
|
}
|
||||||
module.exports = Db
|
module.exports = Db
|
@ -106,12 +106,10 @@ async function scanParts(audiobook, parts) {
|
|||||||
}
|
}
|
||||||
audiobook.audioFiles.push(audioFileObj)
|
audiobook.audioFiles.push(audioFileObj)
|
||||||
|
|
||||||
var trackNumber = isNumber(trackNumFromMeta) ? trackNumFromMeta : trackNumFromFilename
|
var trackNumber = 1
|
||||||
if (trackNumber === null) {
|
if (parts.length > 1) {
|
||||||
if (parts.length === 1) {
|
trackNumber = isNumber(trackNumFromMeta) ? trackNumFromMeta : trackNumFromFilename
|
||||||
// Only 1 track
|
if (trackNumber === null) {
|
||||||
trackNumber = 1
|
|
||||||
} else {
|
|
||||||
Logger.error('Invalid track number for', parts[i])
|
Logger.error('Invalid track number for', parts[i])
|
||||||
audioFileObj.invalid = true
|
audioFileObj.invalid = true
|
||||||
audioFileObj.error = 'Failed to get track number'
|
audioFileObj.error = 'Failed to get track number'
|
||||||
@ -136,6 +134,11 @@ async function scanParts(audiobook, parts) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
tracks.sort((a, b) => a.index - b.index)
|
tracks.sort((a, b) => a.index - b.index)
|
||||||
|
audiobook.audioFiles.sort((a, b) => {
|
||||||
|
var aNum = isNumber(a.trackNumFromMeta) ? a.trackNumFromMeta : isNumber(a.trackNumFromFilename) ? a.trackNumFromFilename : 0
|
||||||
|
var bNum = isNumber(b.trackNumFromMeta) ? b.trackNumFromMeta : isNumber(b.trackNumFromFilename) ? b.trackNumFromFilename : 0
|
||||||
|
return aNum - bNum
|
||||||
|
})
|
||||||
|
|
||||||
// If first index is 0, increment all by 1
|
// If first index is 0, increment all by 1
|
||||||
if (tracks[0].index === 0) {
|
if (tracks[0].index === 0) {
|
||||||
|
Loading…
Reference in New Issue
Block a user