mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-22 20:04:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Update book finder and cover matching - includes LibGen provider

Browse source
This commit is contained in:
Mark Cooper 2021-08-21 09:15:44 -05:00
parent be7e2576f1
commit 30700c1eb0
14 changed files with 379 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

81
client/components/modals/edit-tabs/Match.vue
View file

@ -1,42 +1,26 @@
<template>
<div class="w-full h-full overflow-hidden">
<div class="flex items-center mb-4">
<div class="w-72">
<form @submit.prevent="submitSearch">
<ui-text-input-with-label v-model="search" label="Search Title" placeholder="Search" :disabled="processing" />
</form>
<form @submit.prevent="submitSearch">
<div class="flex items-center justify-start -mx-1 h-20">
<div class="w-72 px-1">
<ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
</div>
<div class="w-72 px-1">
<ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
</div>
<ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
<div class="flex-grow" />
</div>
<div class="flex-grow" />
</div>
</form>
<div v-show="processing" class="flex h-full items-center justify-center">
<p>Loading...</p>
</div>
<div v-show="!processing && !searchResults.length" class="flex h-full items-center justify-center">
<p>No Results</p>
</div>
<div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden">
<div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper">
<template v-for="(res, index) in searchResults">
<div :key="index" class="w-full border-b border-gray-700 pb-2 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch(res)">
<div class="flex py-1">
<img :src="res.cover || '/book_placeholder.jpg'" class="h-24 object-cover" style="width: 60px" />
<div class="px-4 flex-grow">
<div class="flex items-center">
<h1>{{ res.title }}</h1>
<div class="flex-grow" />
<p>{{ res.first_publish_year || res.first_publish_date }}</p>
</div>
<p class="text-gray-400">{{ res.author }}</p>
<div class="w-full max-h-12 overflow-hidden">
<p class="text-gray-500 text-xs" v-html="res.description"></p>
</div>
</div>
</div>
<div v-if="res.covers && res.covers.length > 1" class="flex">
<template v-for="cover in res.covers.slice(1)">
<img :key="cover" :src="cover" class="h-20 w-12 object-cover mr-1" />
</template>
</div>
</div>
<cards-book-match-card :key="index" :book="res" @select="selectMatch" />
</template>
</div>
</div>
@ -53,8 +37,10 @@ export default {
},
data() {
return {
search: null,
searchTitle: null,
searchAuthor: null,
lastSearch: null,
provider: 'best',
searchResults: []
}
},
@ -77,36 +63,41 @@ export default {
}
},
methods: {
getSearchQuery() {
var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
return searchQuery
},
submitSearch() {
if (!this.searchTitle) {
this.$toast.warning('Search title is required')
return
}
this.runSearch()
},
async runSearch() {
if (this.lastSearch === this.search) return
console.log('Search', this.lastSearch, this.search)
var searchQuery = this.getSearchQuery()
if (this.lastSearch === searchQuery) return
this.searchResults = []
this.isProcessing = true
this.lastSearch = this.search
var results = await this.$axios.$get(`/api/find/search?title=${this.search}`).catch((error) => {
this.lastSearch = searchQuery
var results = await this.$axios.$get(`/api/find/search?${searchQuery}`).catch((error) => {
console.error('Failed', error)
return []
})
results = results.filter((res) => {
return !!res.title
})
console.log('Got results', results)
this.searchResults = results
this.isProcessing = false
},
init() {
if (!this.audiobook.book || !this.audiobook.book.title) {
this.search = null
this.searchTitle = null
return
}
if (this.searchResults.length) {
console.log('Already hav ereuslts', this.searchResults, this.lastSearch)
}
this.search = this.audiobook.book.title
this.searchTitle = this.audiobook.book.title
this.searchAuthor = this.audiobook.book.author || ''
this.runSearch()
},
async selectMatch(match) {
@ -136,4 +127,10 @@ export default {
}
}
}
</script>
</script>
<style>
.matchListWrapper {
height: calc(100% - 80px);
}
</style>