Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-09-06 17:51:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Manually removed changes that should not have been included in this PR.

Browse Source
This commit is contained in:
tagmeh 2025-08-10 18:27:30 -05:00
parent 656936378e
commit fe55002f84
1 changed files with 7 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
client/components/modals/item/tabs/Cover.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
<div class="flex flex-col sm:flex-row mb-4">
<!-- Current book cover -->
<div class="relative self-center md:self-start">
<covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<!-- book cover overlay -->
@ -15,9 +14,7 @@
</div>
</div>
<!-- Contains Upload new cover and local covers -->
<div class="grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
<!-- Upload new cover -->
<div class="flex items-center">
<div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
<ui-file-input ref="fileInput" @change="fileUploadSelected">
@ -32,7 +29,6 @@
</form>
</div>
<!-- Locaal covers -->
<div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white/10">
<div class="flex items-center justify-center py-2">
<p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
@ -53,7 +49,6 @@
</div>
</div>
<!-- Search Cover Form -->
<form @submit.prevent="submitSearchForm">
<div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
<div class="w-48 grow p-1">
@ -69,63 +64,13 @@
</div>
</form>
<!-- Cover Search Results -->
<div v-if="hasSearched" class="flex flex-col items-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
<div v-if="hasSearched" class="flex items-center flex-wrap justify-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
<p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
<!-- Conditional Rendering Based on bookCoverAspectRatio -->
<template v-if="bookCoverAspectRatio === 1">
<!-- Square Covers First -->
<template v-if="squareCovers.length">
<div class="flex items-center flex-wrap justify-center">
<template v-for="cover in squareCovers">
<div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
<covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
</template>
</div>
</template>
<!-- Divider if there are rectangle covers -->
<div v-if="rectangleCovers.length" class="w-full border-b border-white/10 my-4"></div>
<!-- Rectangle Covers -->
<template v-if="rectangleCovers.length">
<div class="flex items-center flex-wrap justify-center">
<template v-for="cover in rectangleCovers">
<div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
<covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
</template>
</div>
</template>
</template>
<template v-else>
<!-- Rectangle Covers First -->
<template v-if="rectangleCovers.length">
<div class="flex items-center flex-wrap justify-center">
<template v-for="cover in rectangleCovers">
<div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
<covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
</template>
</div>
</template>
<!-- Divider if there are square covers -->
<div v-if="squareCovers.length" class="w-full border-b border-white/10 my-4"></div>
<!-- Square Covers -->
<template v-if="squareCovers.length">
<div class="flex items-center flex-wrap justify-center">
<template v-for="cover in squareCovers">
<div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
<covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
</template>
</div>
</template>
<template v-for="cover in coversFound">
<div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
<covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
</template>
</div>
@ -150,9 +95,7 @@ export default {
libraryItem: {
type: Object,
default: () => {}
},
coversFound: { type: Array, default: () => [] },
coverPath: { type: String, default: '' }
}
},
data() {
return {
@ -165,8 +108,7 @@ export default {
showLocalCovers: false,
previewUpload: null,
selectedFile: null,
provider: 'google',
sortedCovers: []
provider: 'google'
}
},
watch: {
@ -247,12 +189,6 @@ export default {
_file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
return _file
})
},
squareCovers() {
return this.sortedCovers.filter((cover) => cover.width === cover.height)
},
rectangleCovers() {
return this.sortedCovers.filter((cover) => cover.width !== cover.height)
}
},
methods: {
@ -371,9 +307,7 @@ export default {
console.error('Failed', error)
return []
})
this.coversFound = results
const images = await this.resolveImages()
this.isProcessing = false
this.hasSearched = true
@ -389,29 +323,6 @@ export default {
.finally(() => {
this.isProcessing = false
})
},
async resolveImages() {
const resolvedImages = await Promise.all(
this.coversFound.map((cover) => {
return new Promise((resolve) => {
const img = new Image()
img.src = cover
img.onload = () => {
resolve({ src: cover, width: img.width, height: img.height })
}
})
})
)
// Sort images: squares first, then rectangles by area
this.sortedCovers = resolvedImages.sort((a, b) => {
// Prioritize square images (-1 for square, 1 for non-square)
const squareComparison = (b.width === b.height) - (a.width === a.height)
if (squareComparison !== 0) return squareComparison
// Sub-sort by width (ascending order)
return a.width - b.width
})
return this.sortedCovers
}
}
}