mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-08-04 18:24:46 +02:00
Cleaning up, adding readme and images, genre filter
This commit is contained in:
Mark Cooper
parent
53e46ff54d
commit
307b5b83a9
25 changed files with 269 additions and 65 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -20,9 +20,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { sort } from '@/assets/fastSort'
|
||||
console.log('SORT', sort)
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<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">
|
||||
<!-- <p>Order By: {{ settings.orderBy }}</p>
|
||||
<p class="px-4">Desc: {{ settings.orderDesc ? 'Desc' : 'Asc' }}</p> -->
|
||||
<div id="toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-8">
|
||||
<p class="font-book">{{ numShowing }} Audiobooks</p>
|
||||
<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>
|
||||
<controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-40 h-7.5" @change="updateOrder" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</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' }">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -36,14 +36,20 @@ export default {
|
|||
return this.book.title || 'No Title'
|
||||
},
|
||||
titleCleaned() {
|
||||
if (this.title.length > 75) {
|
||||
return this.title.slice(0, 47) + '...'
|
||||
if (this.title.length > 60) {
|
||||
return this.title.slice(0, 57) + '...'
|
||||
}
|
||||
return this.title
|
||||
},
|
||||
author() {
|
||||
return this.book.author || 'Unknown'
|
||||
},
|
||||
authorCleaned() {
|
||||
if (this.author.length > 30) {
|
||||
return this.author.slice(0, 27) + '...'
|
||||
}
|
||||
return this.author
|
||||
},
|
||||
cover() {
|
||||
return this.book.cover || '/book_placeholder.jpg'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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">
|
||||
<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 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">
|
||||
|
|
@ -11,15 +11,42 @@
|
|||
</span>
|
||||
</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">
|
||||
<template v-for="item in items">
|
||||
<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)">
|
||||
<div class="flex items-center">
|
||||
<span class="font-normal ml-3 block truncate">{{ item.text }}</span>
|
||||
<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">
|
||||
<ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
|
||||
<template v-for="item in items">
|
||||
<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)">
|
||||
<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>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -31,6 +58,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
sublist: null,
|
||||
items: [
|
||||
{
|
||||
text: 'All',
|
||||
|
|
@ -38,15 +66,25 @@ export default {
|
|||
},
|
||||
{
|
||||
text: 'Genre',
|
||||
value: 'genre'
|
||||
value: 'genres',
|
||||
sublist: true
|
||||
},
|
||||
{
|
||||
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: {
|
||||
selected: {
|
||||
get() {
|
||||
|
|
@ -56,17 +94,53 @@ export default {
|
|||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
selectedItemSublist() {
|
||||
return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
|
||||
},
|
||||
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)
|
||||
if (!_sel) return ''
|
||||
return _sel.text
|
||||
},
|
||||
genres() {
|
||||
return this.$store.state.audiobooks.genres
|
||||
},
|
||||
tags() {
|
||||
return this.$store.state.audiobooks.tags
|
||||
},
|
||||
sublistItems() {
|
||||
return this[this.sublist] || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
snakeToNormal(kebab) {
|
||||
if (!kebab) {
|
||||
return 'err'
|
||||
}
|
||||
return String(kebab)
|
||||
.split('_')
|
||||
.map((t) => t.slice(0, 1).toUpperCase() + t.slice(1))
|
||||
.join(' ')
|
||||
},
|
||||
clickOutside() {
|
||||
if (!this.selectedItemSublist) this.sublist = null
|
||||
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) {
|
||||
this.showMenu = false
|
||||
return
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<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">
|
||||
<span class="flex items-center justify-between">
|
||||
<span class="block truncate" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
||||
<span class="material-icons text-xl text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
|
||||
<span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
|
||||
<span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
|
||||
</span>
|
||||
<!-- <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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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-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-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">
|
||||
<ui-btn color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
description: null,
|
||||
author: null,
|
||||
series: null,
|
||||
genre: []
|
||||
genres: []
|
||||
},
|
||||
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']
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
this.details.title = this.book.title
|
||||
this.details.description = this.book.description
|
||||
this.details.author = this.book.author
|
||||
this.details.genre = this.book.genre || []
|
||||
this.details.genres = this.book.genres || []
|
||||
this.details.series = this.book.series
|
||||
},
|
||||
resetProgress() {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ export default {
|
|||
return {
|
||||
search: null,
|
||||
lastSearch: null,
|
||||
processing: false,
|
||||
searchResults: []
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -99,16 +99,11 @@ export default {
|
|||
return
|
||||
}
|
||||
this.currentSearch = this.textInput
|
||||
// this.itemsToShow = this.items.filter((i) => {
|
||||
// var iValue = String(i.value).toLowerCase()
|
||||
// return iValue.includes(this.currentSearch.toLowerCase())
|
||||
// })
|
||||
},
|
||||
keydownInput() {
|
||||
clearTimeout(this.typingTimeout)
|
||||
this.isTyping = true
|
||||
this.typingTimeout = setTimeout(() => {
|
||||
// this.setMatchingItems()
|
||||
this.currentSearch = this.textInput
|
||||
}, 100)
|
||||
this.setInputWidth()
|
||||
|
|
@ -145,7 +140,6 @@ export default {
|
|||
}
|
||||
this.isFocused = true
|
||||
this.recalcMenuPos()
|
||||
// this.$refs.input.style.width = '100px'
|
||||
},
|
||||
inputBlur() {
|
||||
setTimeout(() => {
|
||||
|
|
@ -165,15 +159,12 @@ export default {
|
|||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if (this.$refs.input) this.$refs.input.focus()
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.input.focus()
|
||||
// })
|
||||
|
||||
var newSelected = null
|
||||
if (this.selected.includes(itemValue)) {
|
||||
newSelected = this.selected.filter((s) => s !== itemValue)
|
||||
} else {
|
||||
newSelected = this.selected.concat([itemValue])
|
||||
// this.blur()
|
||||
}
|
||||
this.textInput = null
|
||||
this.currentSearch = null
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "audiobookshelf-client",
|
||||
"version": "0.9.51",
|
||||
"version": "0.9.52",
|
||||
"description": "Audiobook manager and player",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@
|
|||
<div class="font-book text-center px-4 w-12">
|
||||
{{ audio.index }}
|
||||
</div>
|
||||
<div class="font-book text-center px-2 w-40">
|
||||
<div class="font-book text-center px-2 w-32">
|
||||
{{ audio.trackNumFromFilename }}
|
||||
</div>
|
||||
<div class="font-book text-center w-40">
|
||||
<div class="font-book text-center w-32">
|
||||
{{ audio.trackNumFromMeta }}
|
||||
</div>
|
||||
<div class="font-book truncate px-4 flex-grow">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,31 @@
|
|||
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 = () => ({
|
||||
audiobooks: [],
|
||||
listeners: []
|
||||
listeners: [],
|
||||
genres: [...STANDARD_GENRES],
|
||||
tags: []
|
||||
})
|
||||
|
||||
export const getters = {
|
||||
getFiltered: (state, getters, rootState) => () => {
|
||||
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
|
||||
return filtered
|
||||
},
|
||||
|
|
@ -40,7 +58,21 @@ export const actions = {
|
|||
|
||||
export const mutations = {
|
||||
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.listeners.forEach((listener) => {
|
||||
listener.meth()
|
||||
|
|
@ -49,13 +81,28 @@ export const mutations = {
|
|||
addUpdate(state, audiobook) {
|
||||
var index = state.audiobooks.findIndex(a => a.id === audiobook.id)
|
||||
if (index >= 0) {
|
||||
console.log('Audiobook Updated', audiobook)
|
||||
state.audiobooks.splice(index, 1, audiobook)
|
||||
} else {
|
||||
console.log('Audiobook Added', 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) => {
|
||||
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
||||
listener.meth()
|
||||
|
|
@ -63,9 +110,35 @@ export const mutations = {
|
|||
})
|
||||
},
|
||||
remove(state, audiobook) {
|
||||
console.log('Audiobook removed', audiobook)
|
||||
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) => {
|
||||
if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
|
||||
listener.meth()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue