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

Update:Collections table row UI updates and include book duration #240

Browse source
This commit is contained in:
advplyr 2022-07-04 14:59:56 -05:00
parent 68f3f0e276
commit 6a8d901ce1
4 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/tables/collection/BookTableRow.vue
View file

@ -1,13 +1,14 @@
<template> <template>
<div class="w-full px-2 py-2 overflow-hidden relative"> <div class="w-full px-2 py-2 overflow-hidden relative">
<div v-if="book" class="flex h-20"> <div v-if="book" class="flex w-full">
<div class="h-full relative" :style="{ width: bookWidth + 'px' }"> <div class="h-full relative" :style="{ width: bookWidth + 'px' }">
<covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" /> <covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div> </div>
<div class="w-80 h-full px-2 flex items-center"> <div class="flex-grow book-table-content h-full px-2 flex items-center">
<div> <div class="max-w-full">
<nuxt-link :to="`/item/${book.id}`" class="truncate text-sm">{{ bookTitle }}</nuxt-link> <nuxt-link :to="`/item/${book.id}`" class="truncate block text-sm">{{ bookTitle }}</nuxt-link>
<p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p> <p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p>
<p class="text-xxs text-gray-500">{{ bookDuration }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -46,13 +47,13 @@ export default {
return this.mediaMetadata.authorName || '' return this.mediaMetadata.authorName || ''
}, },
bookDuration() { bookDuration() {
return this.$secondsToTimestamp(this.media.duration) return this.$elapsedPretty(this.media.duration)
}, },
bookCoverAspectRatio() { bookCoverAspectRatio() {
return this.$store.getters['getBookCoverAspectRatio'] return this.$store.getters['getBookCoverAspectRatio']
}, },
bookWidth() { bookWidth() {
if (this.bookCoverAspectRatio === 1) return 80 if (this.bookCoverAspectRatio === 1) return 50
return 50 return 50
}, },
isMissing() { isMissing() {
@ -78,4 +79,11 @@ export default {
}, },
mounted() {} mounted() {}
} }
</script> </script>
<style>
.book-table-content {
width: calc(100% - 50px);
max-width: calc(100% - 50px);
}
</style>

6
pages/collection/_id.vue
View file

@ -6,8 +6,8 @@
<covers-collection-cover :book-items="bookItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" /> <covers-collection-cover :book-items="bookItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div> </div>
</div> </div>
<div class="flex-grow px-2 py-6 md:py-0 md:px-10"> <div class="flex-grow py-6">
<div class="flex items-center"> <div class="flex items-center px-2">
<h1 class="text-xl font-sans"> <h1 class="text-xl font-sans">
{{ collectionName }} {{ collectionName }}
</h1> </h1>
@ -18,7 +18,7 @@
</ui-btn> </ui-btn>
</div> </div>
<div class="my-8 max-w-2xl"> <div class="my-8 max-w-2xl px-2">
<p class="text-base text-gray-100">{{ description }}</p> <p class="text-base text-gray-100">{{ description }}</p>
</div> </div>

11
plugins/init.client.js
View file

@ -52,17 +52,20 @@ Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i] return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
} }
Vue.prototype.$elapsedPretty = (seconds) => { Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
if (seconds < 60) {
return `${Math.floor(seconds)} sec${useFullNames ? 'onds' : ''}`
}
var minutes = Math.floor(seconds / 60) var minutes = Math.floor(seconds / 60)
if (minutes < 70) { if (minutes < 70) {
return `${minutes} min` return `${minutes} min${useFullNames ? `ute${minutes === 1 ? '' : 's'}` : ''}`
} }
var hours = Math.floor(minutes / 60) var hours = Math.floor(minutes / 60)
minutes -= hours * 60 minutes -= hours * 60
if (!minutes) { if (!minutes) {
return `${hours} hr` return `${hours} ${useFullNames ? 'hours' : 'hr'}`
} }
return `${hours} hr ${minutes} min` return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
} }
Vue.prototype.$secondsToTimestamp = (seconds) => { Vue.prototype.$secondsToTimestamp = (seconds) => {

3
tailwind.config.js
View file

@ -33,6 +33,9 @@ module.exports = {
sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans], sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono], mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
book: ['Gentium Book Basic', 'serif'] book: ['Gentium Book Basic', 'serif']
},
fontSize: {
xxs: '0.625rem'
} }
} }
}, },