Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-22 00:07:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

New search page, updated search menu includes tags #112

Browse Source
This commit is contained in:
advplyr 2021-10-17 11:29:52 -05:00
parent aa872948d5
commit 48f0e039e5
18 changed files with 259 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
client/components/app/BookShelf.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
<!-- Cover size widget -->
<div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-20">
<div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-30">
<div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
<span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
<p class="px-2 font-mono">{{ bookCoverWidth }}</p>
@ -16,6 +16,14 @@
<ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
</div>
</div>
<div v-else-if="page === 'search'" id="bookshelf-categorized" class="w-full flex flex-col items-center">
<template v-for="(shelf, index) in categorizedShelves">
<app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
</template>
<div v-show="!categorizedShelves.length" class="w-full py-16 text-center text-xl">
<div class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
</div>
</div>
<div v-else id="bookshelf" class="w-full flex flex-col items-center">
<template v-for="(shelf, index) in shelves">
<div :key="index" class="w-full bookshelfRow relative">
@ -45,8 +53,8 @@ export default {
page: String,
selectedSeries: String,
searchResults: {
type: Array,
default: () => []
type: Object,
default: () => {}
},
searchQuery: String
},
@ -74,7 +82,7 @@ export default {
},
searchResults() {
this.$nextTick(() => {
this.$store.commit('audiobooks/setSearchResults', this.searchResults)
// this.$store.commit('audiobooks/setSearchResults', this.searchResults)
this.setBookshelfEntities()
})
},
@ -94,6 +102,9 @@ export default {
audiobooks() {
return this.$store.state.audiobooks.audiobooks
},
sizeMultiplier() {
return this.bookCoverWidth / 120
},
bookCoverWidth() {
return this.availableSizes[this.selectedSizeIndex]
},
@ -122,11 +133,54 @@ export default {
showGroups() {
return this.page !== '' && this.page !== 'search' && !this.selectedSeries
},
categorizedShelves() {
if (this.page !== 'search') return []
var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
const shelves = []
if (audiobookSearchResults.length) {
shelves.push({
label: 'Books',
books: audiobookSearchResults.map((absr) => absr.audiobook)
})
}
if (this.searchResults.series && this.searchResults.series.length) {
var seriesGroups = this.searchResults.series.map((seriesResult) => {
return {
type: 'series',
name: seriesResult.series || '',
books: seriesResult.audiobooks || []
}
})
shelves.push({
label: 'Series',
series: seriesGroups
})
}
if (this.searchResults.tags && this.searchResults.tags.length) {
var tagGroups = this.searchResults.tags.map((tagResult) => {
return {
type: 'tags',
name: tagResult.tag || '',
books: tagResult.audiobooks || []
}
})
shelves.push({
label: 'Tags',
series: tagGroups
})
}
return shelves
},
entities() {
if (this.page === '') {
return this.$store.getters['audiobooks/getFilteredAndSorted']()
} else if (this.page === 'search') {
return this.searchResults || []
var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
return audiobookSearchResults.map((absr) => absr.audiobook)
} else {
var seriesGroups = this.$store.getters['audiobooks/getSeriesGroups']()
if (this.selectedSeries) {

3
client/components/app/BookShelfCategorized.vue
View File

@ -51,9 +51,6 @@ export default {
sizeMultiplier() {
return this.bookCoverWidth / 120
},
signSizeMultiplier() {
return (1 - this.sizeMultiplier) / 2 + this.sizeMultiplier
},
paddingX() {
return 16 * this.sizeMultiplier
},

17
client/components/app/BookShelfRow.vue
View File

@ -2,11 +2,23 @@
<div class="relative">
<div ref="shelf" class="w-full max-w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 2.5 * sizeMultiplier + 'rem' }" @scroll="scrolled">
<div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
<div class="flex items-center -mb-2">
<div v-if="shelf.books" class="flex items-center -mb-2">
<template v-for="entity in shelf.books">
<cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" @edit="editBook" />
</template>
</div>
<div v-else-if="shelf.series" class="flex items-center -mb-2">
<template v-for="entity in shelf.series">
<cards-group-card :key="entity.name" :width="bookCoverWidth" :group="entity" @click="$emit('clickSeries', entity)" />
</template>
</div>
<div v-else-if="shelf.tags" class="flex items-center -mb-2">
<template v-for="entity in shelf.tags">
<nuxt-link :key="entity.name" :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(entity.name)}`">
<cards-group-card :width="bookCoverWidth" :group="entity" />
</nuxt-link>
</template>
</div>
</div>
</div>
@ -67,7 +79,6 @@ export default {
},
scrollLeft() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
this.isScrolling = true
@ -75,7 +86,6 @@ export default {
},
scrollRight() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
this.isScrolling = true
@ -89,7 +99,6 @@ export default {
},
checkCanScroll() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
var clientWidth = this.$refs.shelf.clientWidth

7
client/components/app/BookShelfToolbar.vue
View File

@ -41,8 +41,8 @@ export default {
isHome: Boolean,
selectedSeries: String,
searchResults: {
type: Array,
default: () => []
type: Object,
default: () => {}
},
searchQuery: String
},
@ -60,7 +60,8 @@ export default {
if (this.page === '') {
return this.$store.getters['audiobooks/getFiltered']().length
} else if (this.page === 'search') {
return (this.searchResults || []).length
var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
return audiobookSearchResults.length
} else {
var groups = this.$store.getters['audiobooks/getSeriesGroups']()
if (this.selectedSeries) {

48
client/components/cards/AudiobookSearchCard.vue
View File

@ -1,9 +1,16 @@
<template>
<div class="flex h-full px-1 overflow-hidden">
<cards-book-cover :audiobook="audiobook" :width="50" />
<div class="flex-grow px-2 searchCardContent h-full">
<p class="truncate text-sm">{{ title }}</p>
<p class="text-xs text-gray-200 truncate">by {{ author }}</p>
<div class="flex-grow px-2 audiobookSearchCardContent">
<p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
<p v-else class="truncate text-sm" v-html="matchHtml" />
<p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
<p v-if="matchKey !== 'author'" class="text-xs text-gray-200 truncate">by {{ author }}</p>
<p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
<div v-if="matchKey === 'series' || matchKey === 'tags'" class="m-0 p-0 truncate" v-html="matchHtml" />
</div>
</div>
</template>
@ -14,7 +21,10 @@ export default {
audiobook: {
type: Object,
default: () => {}
}
},
search: String,
matchKey: String,
matchText: String
},
data() {
return {}
@ -26,8 +36,34 @@ export default {
title() {
return this.book ? this.book.title : 'No Title'
},
subtitle() {
return this.book ? this.book.subtitle : ''
},
author() {
return this.book ? this.book.author : 'Unknown'
},
matchHtml() {
if (!this.matchText || !this.search) return ''
if (this.matchKey === 'subtitle') return ''
var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
if (matchSplit.length < 2) return ''
var html = ''
var totalLenSoFar = 0
for (let i = 0; i < matchSplit.length - 1; i++) {
var indexOf = matchSplit[i].length
var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
totalLenSoFar += indexOf + this.search.length
html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
}
var lastPart = this.matchText.substr(totalLenSoFar)
html += lastPart
if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
if (this.matchKey === 'author') return `by ${html}`
return `${html}`
}
},
methods: {},
@ -36,9 +72,9 @@ export default {
</script>
<style>
.searchCardContent {
.audiobookSearchCardContent {
width: calc(100% - 80px);
height: calc(50px * 1.5);
height: 75px;
display: flex;
flex-direction: column;
justify-content: center;

4
client/components/cards/AuthorSearchCard.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex h-full px-1 overflow-hidden">
<img src="https://rpgplanner.com/wp-content/uploads/2020/06/no-photo-available.png" class="w-40 h-40 max-h-40 object-contain" style="max-height: 40px; max-width: 40px" />
<img src="/icons/NoUserPhoto.png" class="w-40 h-40 max-h-40 object-contain" style="max-height: 40px; max-width: 40px" />
<div class="flex-grow px-2 authorSearchCardContent h-full">
<p class="truncate text-sm">{{ author }}</p>
</div>
@ -22,7 +22,7 @@ export default {
</script>
<style>
.searchCardContent {
.authorSearchCardContent {
width: calc(100% - 80px);
height: 40px;
display: flex;

12
client/components/cards/GroupCard.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="relative">
<div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series?${groupType}=${groupEncode}`" class="cursor-pointer">
<nuxt-link :to="groupTo" class="cursor-pointer">
<div class="w-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'" :style="{ height: height + 'px', width: height + 'px' }">
<cards-group-cover ref="groupcover" :name="groupName" :book-items="bookItems" :width="height" :height="height" />
@ -54,6 +54,16 @@ export default {
_group() {
return this.group || {}
},
groupType() {
return this._group.type
},
groupTo() {
if (this.groupType === 'series') {
return `/library/${this.currentLibraryId}/bookshelf/series?series=${this.groupEncode}`
} else {
return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}`
}
},
height() {
return this.width * 1.6
},

34
client/components/cards/TagSearchCard.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="flex h-full px-1 overflow-hidden">
<div class="w-10 h-10 flex items-center justify-center">
<span class="material-icons text-2xl text-gray-200">local_offer</span>
</div>
<div class="flex-grow px-2 tagSearchCardContent h-full">
<p class="truncate text-sm">{{ tag }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
tag: String
},
data() {
return {}
},
computed: {},
methods: {},
mounted() {}
}
</script>
<style>
.tagSearchCardContent {
width: calc(100% - 40px);
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>

45
client/components/controls/GlobalSearch.vue
View File

@ -23,7 +23,7 @@
<template v-for="item in audiobookResults">
<li :key="item.audiobook.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
<nuxt-link :to="`/audiobook/${item.audiobook.id}`">
<cards-audiobook-search-card :audiobook="item.audiobook" />
<cards-audiobook-search-card :audiobook="item.audiobook" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
</nuxt-link>
</li>
</template>
@ -39,12 +39,21 @@
<p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Series</p>
<template v-for="item in seriesResults">
<li :key="item.series" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickedOption(item.series)">
<li :key="item.series" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series?series=${$encode(item.series)}`">
<cards-series-search-card :series="item.series" :book-items="item.audiobooks" />
</nuxt-link>
</li>
</template>
<p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Tags</p>
<template v-for="item in tagResults">
<li :key="item.tag" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.tag)}`">
<cards-tag-search-card :tag="item.tag" />
</nuxt-link>
</li>
</template>
</template>
</ul>
</div>
@ -64,6 +73,7 @@ export default {
audiobookResults: [],
authorResults: [],
seriesResults: [],
tagResults: [],
searchTimeout: null,
lastSearch: null
}
@ -76,19 +86,27 @@ export default {
return this.$store.state.libraries.currentLibraryId
},
totalResults() {
return this.audiobookResults.length + this.seriesResults.length + this.authorResults.length
return this.audiobookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length
}
},
methods: {
submitSearch() {
if (!this.search) return
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/search?query=${this.search}`)
var search = this.search
this.clearResults()
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/search?query=${search}`)
},
clearResults() {
this.search = null
this.lastSearch = null
this.audiobookResults = []
this.authorResults = []
this.seriesResults = []
this.tagResults = []
this.showMenu = false
this.isFetching = false
this.isTyping = false
clearTimeout(this.searchTimeout)
this.$nextTick(() => {
if (this.$refs.input) {
this.$refs.input.blur()
@ -117,9 +135,14 @@ export default {
console.error('Search error', error)
return []
})
// Search was canceled
if (!this.isFetching) return
this.audiobookResults = searchResults.audiobooks || []
this.authorResults = searchResults.authors || []
this.seriesResults = searchResults.series || []
this.tagResults = searchResults.tags || []
this.isFetching = false
if (!this.showMenu) {
@ -135,19 +158,15 @@ export default {
}
this.isTyping = true
this.searchTimeout = setTimeout(() => {
// Canceled search
if (!this.isTyping) return
this.isTyping = false
this.runSearch(val)
}, 750)
},
clickClear() {
if (this.search) {
this.search = null
this.lastSearch = null
this.audiobookResults = []
this.authorResults = []
this.seriesResults = []
this.showMenu = false
}
this.clearResults()
}
},
mounted() {}

2
client/components/modals/edit-tabs/Cover.vue
View File

@ -79,8 +79,6 @@
</template>
<script>
import Path from 'path'
export default {
props: {
processing: Boolean,

4
client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "audiobookshelf-client",
"version": "1.4.10",
"version": "1.4.11",
"description": "Audiobook manager and player",
"main": "index.js",
"scripts": {
@ -30,4 +30,4 @@
"@nuxtjs/tailwindcss": "^4.2.1",
"postcss": "^8.3.6"
}
}
}

22
client/pages/library/_library/bookshelf/_id.vue
View File

@ -19,27 +19,37 @@ export default {
return redirect('/oops?message=Library not found')
}
// Set filter by
if (query.filter) {
store.dispatch('user/updateUserSettings', { filterBy: query.filter })
}
var searchResults = []
// Search page
var searchResults = {}
var audiobookSearchResults = []
var searchQuery = null
if (params.id === 'search' && query.query) {
searchQuery = query.query
searchResults = await app.$axios.$get(`/api/library/${libraryId}/audiobooks?q=${query.query}`).catch((error) => {
searchResults = await app.$axios.$get(`/api/library/${libraryId}/search?q=${searchQuery}`).catch((error) => {
console.error('Search error', error)
return []
return {}
})
audiobookSearchResults = searchResults.audiobooks || []
store.commit('audiobooks/setSearchResults', searchResults)
if (searchResults.length) searchResults.forEach((ab) => store.commit('audiobooks/addUpdate', ab))
if (audiobookSearchResults.length) audiobookSearchResults.forEach((ab) => store.commit('audiobooks/addUpdate', ab.audiobook))
}
// Series page
var selectedSeries = query.series ? app.$decode(query.series) : null
store.commit('audiobooks/setSelectedSeries', selectedSeries)
var libraryPage = params.id || ''
store.commit('audiobooks/setLibraryPage', libraryPage)
return {
id: libraryPage,
libraryId,
searchQuery,
searchResults,
selectedSeries
@ -65,9 +75,9 @@ export default {
methods: {
async newQuery() {
var query = this.$route.query.query
this.searchResults = await this.$axios.$get(`/api/audiobooks?q=${query}`).catch((error) => {
this.searchResults = await this.$axios.$get(`/api/library/${this.libraryId}/search?q=${query}`).catch((error) => {
console.error('Search error', error)
return []
return {}
})
this.searchQuery = query
}

BIN
client/static/icons/NoUserPhoto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

6
client/store/audiobooks.js
View File

@ -14,7 +14,8 @@ export const state = () => ({
keywordFilter: null,
selectedSeries: null,
libraryPage: null,
searchResults: []
searchResults: {},
searchResultAudiobooks: []
})
export const getters = {
@ -25,7 +26,7 @@ export const getters = {
if (!state.libraryPage) {
return getters.getFiltered()
} else if (state.libraryPage === 'search') {
return state.searchResults
return state.searchResultAudiobooks
} else if (state.libraryPage === 'series') {
var series = getters.getSeriesGroups()
if (state.selectedSeries) {
@ -222,6 +223,7 @@ export const mutations = {
},
setSearchResults(state, val) {
state.searchResults = val
state.searchResultAudiobooks = val && val.audiobooks ? val.audiobooks.map(ab => ab.audiobook) : []
},
set(state, audiobooks) {
// GENRES

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "audiobookshelf",
"version": "1.4.10",
"version": "1.4.11",
"description": "Self-hosted audiobook server for managing and playing audiobooks",
"main": "index.js",
"scripts": {

22
server/ApiController.js
View File

@ -148,15 +148,18 @@ class ApiController {
var bookMatches = []
var authorMatches = {}
var seriesMatches = {}
var tagMatches = {}
var audiobooksInLibrary = this.db.audiobooks.filter(ab => ab.libraryId === library.id)
audiobooksInLibrary.forEach((ab) => {
var queryResult = ab.searchQuery(req.query.q)
if (queryResult.book) {
bookMatches.push({
var bookMatchObj = {
audiobook: ab,
matchKey: queryResult.book
})
matchKey: queryResult.book,
matchText: queryResult.bookMatchText
}
bookMatches.push(bookMatchObj)
}
if (queryResult.author && !authorMatches[queryResult.author]) {
authorMatches[queryResult.author] = {
@ -173,10 +176,23 @@ class ApiController {
seriesMatches[queryResult.series].audiobooks.push(ab)
}
}
if (queryResult.tags && queryResult.tags.length) {
queryResult.tags.forEach((tag) => {
if (!tagMatches[tag]) {
tagMatches[tag] = {
tag,
audiobooks: [ab]
}
} else {
tagMatches[tag].audiobooks.push(ab)
}
})
}
})
res.json({
audiobooks: bookMatches.slice(0, maxResults),
tags: Object.values(tagMatches).slice(0, maxResults),
authors: Object.values(authorMatches).slice(0, maxResults),
series: Object.values(seriesMatches).slice(0, maxResults)
})

15
server/objects/Audiobook.js
View File

@ -654,11 +654,22 @@ class Audiobook {
}
isSearchMatch(search) {
return this.book.isSearchMatch(search.toLowerCase().trim())
var tagMatch = this.tags.filter(tag => {
return tag.toLowerCase().includes(search.toLowerCase().trim())
})
return this.book.isSearchMatch(search.toLowerCase().trim()) || tagMatch.length
}
searchQuery(search) {
return this.book.getQueryMatches(search.toLowerCase().trim())
var matches = this.book.getQueryMatches(search.toLowerCase().trim())
matches.tags = this.tags.filter(tag => {
return tag.toLowerCase().includes(search.toLowerCase().trim())
})
if (!matches.book && matches.tags.length) {
matches.book = 'tags'
matches.bookMatchText = matches.tags.join(', ')
}
return matches
}
getAudioFileByIno(ino) {

9
server/objects/Book.js
View File

@ -220,11 +220,16 @@ class Book {
}
getQueryMatches(search) {
var titleMatch = this._title.toLowerCase().includes(search) || this._subtitle.toLowerCase().includes(search)
var titleMatch = this._title.toLowerCase().includes(search)
var subtitleMatch = this._subtitle.toLowerCase().includes(search)
var authorMatch = this._author.toLowerCase().includes(search)
var seriesMatch = this._series.toLowerCase().includes(search)
var bookMatchKey = titleMatch ? 'title' : subtitleMatch ? 'subtitle' : authorMatch ? 'author' : seriesMatch ? 'series' : false
var bookMatchText = bookMatchKey ? this[bookMatchKey] : ''
return {
book: titleMatch ? 'title' : authorMatch ? 'author' : seriesMatch ? 'series' : false,
book: bookMatchKey,
bookMatchText,
author: authorMatch ? this._author : false,
series: seriesMatch ? this._series : false
}