mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-24 20:54:43 +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

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

@ -1,13 +1,14 @@
<template>
<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' }">
<covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
<div class="w-80 h-full px-2 flex items-center">
<div>
<nuxt-link :to="`/item/${book.id}`" class="truncate text-sm">{{ bookTitle }}</nuxt-link>
<div class="flex-grow book-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<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="text-xxs text-gray-500">{{ bookDuration }}</p>
</div>
</div>
</div>
@ -46,13 +47,13 @@ export default {
return this.mediaMetadata.authorName || ''
},
bookDuration() {
return this.$secondsToTimestamp(this.media.duration)
return this.$elapsedPretty(this.media.duration)
},
bookCoverAspectRatio() {
return this.$store.getters['getBookCoverAspectRatio']
},
bookWidth() {
if (this.bookCoverAspectRatio === 1) return 80
if (this.bookCoverAspectRatio === 1) return 50
return 50
},
isMissing() {
@ -79,3 +80,10 @@ export default {
mounted() {}
}
</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" />
</div>
</div>
<div class="flex-grow px-2 py-6 md:py-0 md:px-10">
<div class="flex items-center">
<div class="flex-grow py-6">
<div class="flex items-center px-2">
<h1 class="text-xl font-sans">
{{ collectionName }}
</h1>
@ -18,7 +18,7 @@
</ui-btn>
</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>
</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]
}
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)
if (minutes < 70) {
return `${minutes} min`
return `${minutes} min${useFullNames ? `ute${minutes === 1 ? '' : 's'}` : ''}`
}
var hours = Math.floor(minutes / 60)
minutes -= hours * 60
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) => {

3
tailwind.config.js
View file

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