mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-28 23:04:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add:Cover image cache, resize & use webp image #223

Browse source
This commit is contained in:
advplyr 2021-12-12 17:15:37 -06:00
parent d04f3450ec
commit ddf0fa72e8
14 changed files with 360 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/components/cards/LazyBookCard.vue
View file

@ -10,7 +10,7 @@
<p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
</div>
<img v-show="audiobook" ref="cover" :src="bookCoverSrc" class="w-full h-full object-contain transition-opacity duration-300" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
<img v-show="audiobook" ref="cover" :src="bookCoverSrc" class="w-full h-full object-contain transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
<!-- Placeholder Cover Title & Author -->
<div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">

17
client/pages/config/index.vue
View file

@ -53,7 +53,8 @@
<div class="h-0.5 bg-primary bg-opacity-30 w-full" />
<div class="flex items-center py-4">
<ui-btn color="bg" small :padding-x="4" class="hidden lg:block" :loading="isResettingAudiobooks" @click="resetAudiobooks">Reset All Audiobooks</ui-btn>
<ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click="purgeCache">Purge Cache</ui-btn>
<ui-btn color="bg" small :padding-x="4" class="hidden lg:block" :loading="isResettingAudiobooks" @click="resetAudiobooks">Remove All Audiobooks</ui-btn>
<div class="flex-grow" />
<p class="pr-2 text-sm font-book text-yellow-400">Report bugs, request features, provide feedback, and contribute on <a class="underline" href="https://github.com/advplyr/audiobookshelf" target="_blank">github</a>.</p>
<a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
@ -93,6 +94,7 @@ export default {
storeCoversInAudiobookDir: false,
updatingServerSettings: false,
useSquareBookCovers: false,
isPurgingCache: false,
newServerSettings: {}
}
},
@ -209,6 +211,19 @@ export default {
this.$toast.error('Failed to reset audiobooks - manually remove the /config/audiobooks folder')
})
}
},
async purgeCache() {
this.isPurgingCache = true
await this.$axios
.$post('/api/purgecache')
.then(() => {
this.$toast.success('Cache Purged!')
})
.catch((error) => {
console.error('Failed to purge cache', error)
this.$toast.error('Failed to purge cache')
})
this.isPurgingCache = false
}
},
mounted() {

3
client/plugins/init.client.js
View file

@ -6,8 +6,6 @@ Vue.directive('click-outside', vClickOutside.directive)
Vue.prototype.$eventBus = new Vue()
Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
Vue.prototype.$dateDistanceFromNow = (unixms) => {
if (!unixms) return ''
return formatDistance(unixms, Date.now(), { addSuffix: true })
@ -145,4 +143,5 @@ export {
export default ({ app }, inject) => {
app.$decode = decode
app.$encode = encode
app.$isDev = process.env.NODE_ENV !== 'production'
}

31
client/store/audiobooks.js
View file

@ -16,36 +16,17 @@ export const getters = {
if (!bookItem) return placeholder
var book = bookItem.book
if (!book || !book.cover || book.cover === placeholder) return placeholder
var cover = book.cover
// Absolute URL covers (should no longer be used)
if (cover.startsWith('http:') || cover.startsWith('https:')) return cover
if (book.cover.startsWith('http:') || book.cover.startsWith('https:')) return book.cover
// Server hosted covers
try {
// Ensure cover is refreshed if cached
var bookLastUpdate = book.lastUpdate || Date.now()
var userToken = rootGetters['user/getToken']
var userToken = rootGetters['user/getToken']
var bookLastUpdate = book.lastUpdate || Date.now()
cover = cover.replace(/\\/g, '/')
// Map old covers to new format /s/book/{bookid}/*
if (cover.startsWith('/local')) {
cover = cover.replace('local', `s/book/${bookItem.id}`)
if (cover.includes(bookItem.path + '/')) { // Remove book path
cover = cover.replace(bookItem.path + '/', '')
}
}
// Easier to replace these special characters then to encodeUriComponent of the filename
var encodedCover = cover.replace(/%/g, '%25').replace(/#/g, '%23')
var url = new URL(encodedCover, document.baseURI)
return url.href + `?token=${userToken}&ts=${bookLastUpdate}`
} catch (err) {
console.error(err)
return placeholder
if (process.env.NODE_ENV !== 'production') { // Testing
return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
}
return `/api/books/${bookItem.id}/cover?token=${userToken}`
}
}