mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-08-03 17:54:54 +02:00
Update book finder and cover matching - includes LibGen provider
This commit is contained in:
advplyr
parent
744aacbb4b
commit
7d4e2e3d97
14 changed files with 379 additions and 76 deletions
|
|
@ -2,13 +2,35 @@
|
|||
<div class="w-full h-full">
|
||||
<div class="flex">
|
||||
<cards-book-cover :audiobook="audiobook" />
|
||||
<div class="flex-grow px-8">
|
||||
<div class="flex-grow pl-6 pr-2">
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="flex items-center">
|
||||
<ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
|
||||
<ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-4">Update</ui-btn>
|
||||
<ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form @submit.prevent="submitSearchForm">
|
||||
<div class="flex items-center justify-start -mx-1 py-2 mt-2">
|
||||
<div class="flex-grow px-1">
|
||||
<ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
|
||||
</div>
|
||||
<div class="w-24 px-1">
|
||||
<ui-btn type="submit" class="mt-5 w-full" :padding-x="0">Search</ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-72 overflow-y-scroll mt-2 max-w-full">
|
||||
<p v-if="!coversFound.length">No Covers Found</p>
|
||||
<template v-for="cover in coversFound">
|
||||
<div :key="cover" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="setCover(cover)">
|
||||
<img :src="cover" class="h-24 object-cover" style="width: 60px" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,7 +47,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: null
|
||||
searchTitle: null,
|
||||
searchAuthor: null,
|
||||
imageUrl: null,
|
||||
coversFound: [],
|
||||
hasSearched: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -51,14 +77,22 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.coversFound.length && (this.searchTitle !== this.book.title || this.searchAuthor !== this.book.author)) {
|
||||
this.coversFound = []
|
||||
this.hasSearched = false
|
||||
}
|
||||
this.imageUrl = this.book.cover || ''
|
||||
this.searchTitle = this.book.title || ''
|
||||
this.searchAuthor = this.book.author || ''
|
||||
},
|
||||
async submitForm() {
|
||||
console.log('Submit form', this.details)
|
||||
submitForm() {
|
||||
this.updateCover(this.imageUrl)
|
||||
},
|
||||
async updateCover(cover) {
|
||||
this.isProcessing = true
|
||||
const updatePayload = {
|
||||
book: {
|
||||
cover: this.imageUrl
|
||||
cover: cover
|
||||
}
|
||||
}
|
||||
var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
|
||||
|
|
@ -71,6 +105,25 @@ export default {
|
|||
this.$toast.success('Update Successful')
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
getSearchQuery() {
|
||||
var searchQuery = `provider=best&title=${this.searchTitle}`
|
||||
if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
|
||||
return searchQuery
|
||||
},
|
||||
async submitSearchForm() {
|
||||
this.isProcessing = true
|
||||
var searchQuery = this.getSearchQuery()
|
||||
var results = await this.$axios.$get(`/api/find/covers?${searchQuery}`).catch((error) => {
|
||||
console.error('Failed', error)
|
||||
return []
|
||||
})
|
||||
this.coversFound = results
|
||||
this.isProcessing = false
|
||||
this.hasSearched = true
|
||||
},
|
||||
setCover(cover) {
|
||||
this.updateCover(cover)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue