diff --git a/client/components/cards/BookMatchCard.vue b/client/components/cards/BookMatchCard.vue index dd782d30..77619e55 100644 --- a/client/components/cards/BookMatchCard.vue +++ b/client/components/cards/BookMatchCard.vue @@ -15,8 +15,8 @@

by {{ book.author }}

Narrated by {{ book.narrator }}

-

Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}

-
+

Runtime: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}

+

{{ series.series }} #{{ series.sequence }} @@ -29,9 +29,7 @@

-
- {{ book.title }} -
+
{{ book.title }}

by {{ book.author }}

{{ book.genres.join(', ') }}

@@ -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) }, diff --git a/client/components/modals/item/tabs/Match.vue b/client/components/modals/item/tabs/Match.vue index 0c5d67eb..1c682919 100644 --- a/client/components/modals/item/tabs/Match.vue +++ b/client/components/modals/item/tabs/Match.vue @@ -22,7 +22,7 @@
@@ -205,7 +205,7 @@ export default { processing: Boolean, libraryItem: { type: Object, - default: () => { } + default: () => {} } }, data() { @@ -290,13 +290,17 @@ export default { return this.$strings.LabelSearchTitle }, media() { - return this.libraryItem ? this.libraryItem.media || {} : {} + return this.libraryItem?.media || {} }, mediaMetadata() { return this.media.metadata || {} }, + currentBookDuration() { + if (this.isPodcast) return 0 + return this.media.duration || 0 + }, mediaType() { - return this.libraryItem ? this.libraryItem.mediaType : null + return this.libraryItem?.mediaType || null }, isPodcast() { return this.mediaType == 'podcast' diff --git a/client/plugins/utils.js b/client/plugins/utils.js index 439f65c5..495a14ef 100644 --- a/client/plugins/utils.js +++ b/client/plugins/utils.js @@ -54,7 +54,7 @@ Vue.prototype.$secondsToTimestamp = (seconds, includeMs = false, alwaysIncludeHo return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}${msString}` } -Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => { +Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true, showSeconds = true) => { if (isNaN(seconds) || seconds === null) return '' seconds = Math.round(seconds) @@ -69,11 +69,16 @@ Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => { hours -= days * 24 } + // If not showing seconds then round minutes up + if (minutes && seconds && !showSeconds) { + if (seconds >= 30) minutes++ + } + const strs = [] if (days) strs.push(`${days}d`) if (hours) strs.push(`${hours}h`) if (minutes) strs.push(`${minutes}m`) - if (seconds) strs.push(`${seconds}s`) + if (seconds && showSeconds) strs.push(`${seconds}s`) return strs.join(' ') }