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

Add:Show current book duration on match page as compared with book listed #1803

Browse source
This commit is contained in:
advplyr 2023-10-03 17:16:49 -05:00
parent 5ccf0df308
commit 401bd91204
3 changed files with 37 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/components/cards/BookMatchCard.vue
View file

@ -15,8 +15,8 @@
</div>
<p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
<p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
<p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
<div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
<p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
<div v-if="book.series?.length" class="flex py-1 -mx-1">
<div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
<p class="leading-3 text-xs text-gray-400">
{{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
@ -29,9 +29,7 @@
</div>
<div v-else class="px-4 flex-grow">
<h1>
<div class="flex items-center">
{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" />
</div>
<div class="flex items-center">{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" /></div>
</h1>
<p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
<p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
@ -56,7 +54,8 @@ export default {
default: () => {}
},
isPodcast: Boolean,
bookCoverAspectRatio: Number
bookCoverAspectRatio: Number,
currentBookDuration: Number
},
data() {
return {
@ -65,12 +64,27 @@ export default {
},
computed: {
bookCovers() {
return this.book.covers ? this.book.covers || [] : []
return this.book.covers || []
},
bookDuration() {
return (this.book.duration || 0) * 60
},
bookDurationComparison() {
if (!this.bookDuration || !this.currentBookDuration) return ''
let differenceInSeconds = this.currentBookDuration - this.bookDuration
// Only show seconds on difference if difference is less than an hour
if (differenceInSeconds < 0) {
differenceInSeconds = Math.abs(differenceInSeconds)
return `(${this.$elapsedPrettyExtended(differenceInSeconds, false, differenceInSeconds < 3600)} shorter)`
} else if (differenceInSeconds > 0) {
return `(${this.$elapsedPrettyExtended(differenceInSeconds, false, differenceInSeconds < 3600)} longer)`
}
return '(exact match)'
}
},
methods: {
selectMatch() {
var book = { ...this.book }
const book = { ...this.book }
book.cover = this.selectedCover
this.$emit('select', book)
},