mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-07-10 19:31:39 +00:00
refactored and fixed image
This commit is contained in:
Vito0912
parent
dc15c49658
commit
ba3497884e
2 changed files with 100 additions and 68 deletions
|
|
@ -3,85 +3,108 @@
|
|||
<div class="max-w-3xl w-full my-6 mx-auto">
|
||||
<h2 class="text-2xl mb-0">Current Progress</h2>
|
||||
<div class="my-8">
|
||||
<div v-if="this.libraryStats" class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
|
||||
<div class="w-full my-2 mx-auto">
|
||||
<div v-if="libraryStats" class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
|
||||
<div class="w-full my-2">
|
||||
<div class="flex justify-between">
|
||||
<p class="text-2xl font-bold">{{(this.listenedTime / 3600).toFixed(1)}} Hours</p>
|
||||
<p class="text-base text-white text-opacity-70 hover:underline">
|
||||
{{ (this.libraryStats.totalDuration / 3600).toFixed(1) }} total hours
|
||||
</p>
|
||||
<p class="text-2xl font-bold">{{ $elapsedPretty(listenedTime) }}</p>
|
||||
<div class="flex flex-col justify-end">
|
||||
<nuxt-link class="text-base text-white text-opacity-70 hover:underline self-end" :to="`/library/${currentLibraryId}/stats`">
|
||||
{{ this.$getString('LabelTotal', [$elapsedPretty(libraryStats.totalDuration)]) }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden mt-2">
|
||||
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * listenedTime) / libraryStats.totalDuration) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
|
||||
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * listenedTime) / this.libraryStats.totalDuration) + '%' }" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="this.libraryStats" class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
|
||||
<div class="w-full my-2 mx-auto">
|
||||
|
||||
<div v-if="libraryStats" class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
|
||||
<div class="w-full my-2">
|
||||
<div class="flex justify-between">
|
||||
<p class="text-2xl font-bold">{{this.currentMediaProgress.length}} items listened</p>
|
||||
<p class="text-base text-white text-opacity-70 hover:underline">
|
||||
{{ this.items.length }} total items
|
||||
</p>
|
||||
<p class="text-2xl font-bold">{{ this.$getString('LabelItemsListened', [currentMediaProgress.length]) }}</p>
|
||||
<nuxt-link class="text-base text-white text-opacity-70 hover:underline self-end" :to="`/library/${currentLibraryId}/stats`">
|
||||
{{ this.$getString('LabelItemsTotal', [items.length]) }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden mt-2">
|
||||
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * currentMediaProgress.length) / items.length) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
|
||||
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * this.currentMediaProgress.length) / this.items.length) + '%' }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-2xl mb-2">Items to continue</h2>
|
||||
<tr v-for="(item, index) in unfinishedStartedItems" :key="item.id" v-if="index < itemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td>
|
||||
<covers-preview-cover v-if="item.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-sm font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p class="text-sm">{{ Math.floor(item.mediaProgress.progress * 100) }}%</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="itemsToShow < unfinishedStartedItems.length">
|
||||
<td colspan="3" class="text-center text-yellow-400 cursor-pointer" @click="itemsToShow += 6">Show more</td>
|
||||
</tr>
|
||||
<h2 class="text-2xl mb-2">Unfinished Items</h2>
|
||||
|
||||
<tr v-for="(item, index) in unfinishedItems" :key="item.id" v-if="index < topItemsToShow && index < unfinishedItems.length - bottomItemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td>
|
||||
<covers-preview-cover v-if="item.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-sm font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ item.media.duration }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="flex flex-col lg:flex-row justify-between gap-12">
|
||||
<div v-if="unfinishedStartedItems.length" class="w-full lg:w-1/2">
|
||||
<h2 class="text-2xl mb-2">Items to continue</h2>
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in unfinishedStartedItems" :key="item.id" v-if="index < itemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td class="pr-4">
|
||||
<covers-preview-cover v-if="item.media.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<p class="text-sm">{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-xs font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
<td class="text-center pl-1 text-white/70">
|
||||
<p class="text-xs">{{ Math.floor(item.mediaProgress.progress * 100) }}%</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="itemsToShow < unfinishedStartedItems.length">
|
||||
<td colspan="3" class="text-center text-yellow-400 cursor-pointer" @click="itemsToShow += 6">Show more</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<tr v-if="topItemsToShow + bottomItemsToShow < unfinishedItems.length">
|
||||
<td colspan="3" class="text-center">
|
||||
<span v-if="topItemsToShow < unfinishedItems.length - bottomItemsToShow" class="text-yellow-400 cursor-pointer" @click="loadMoreTopItems">Load 3 More from Top</span>
|
||||
<span v-if="topItemsToShow < unfinishedItems.length - bottomItemsToShow && bottomItemsToShow < unfinishedItems.length - topItemsToShow" class="mx-4">|</span>
|
||||
<span v-if="bottomItemsToShow < unfinishedItems.length - topItemsToShow" class="text-yellow-400 cursor-pointer" @click="loadMoreBottomItems">Load 3 More from Bottom</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-for="(item, index) in unfinishedItems" :key="item.id" v-if="index >= unfinishedItems.length - bottomItemsToShow && index >= topItemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td>
|
||||
<covers-preview-cover v-if="item.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-sm font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="w-full lg:w-1/2">
|
||||
<h2 class="text-2xl mb-2">Unfinished Items</h2>
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in unfinishedItems" :key="item.id" v-if="index < topItemsToShow && index < unfinishedItems.length - bottomItemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td class="pr-4">
|
||||
<covers-preview-cover v-if="item.media.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<p class="text-sm">{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-xs font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
<td class="text-center text-white/70 whitespace-nowrap w-full">
|
||||
<p class="inline-block w-full text-xs pl-1">
|
||||
{{ $elapsedPretty(item.media.duration) }}
|
||||
</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr v-if="topItemsToShow + bottomItemsToShow < unfinishedItems.length">
|
||||
<td colspan="3" class="text-center py-2">
|
||||
<span v-if="topItemsToShow < unfinishedItems.length - bottomItemsToShow" class="text-yellow-400 cursor-pointer" @click="loadMoreTopItems">Load More from Top</span>
|
||||
<span v-if="topItemsToShow < unfinishedItems.length - bottomItemsToShow && bottomItemsToShow < unfinishedItems.length - topItemsToShow" class="mx-4">|</span>
|
||||
<span v-if="bottomItemsToShow < unfinishedItems.length - topItemsToShow" class="text-yellow-400 cursor-pointer" @click="loadMoreBottomItems">Load More from Bottom</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(item, index) in unfinishedItems" :key="item.id" v-if="index >= unfinishedItems.length - bottomItemsToShow && index >= topItemsToShow" :class="!item.isFinished ? '' : 'isFinished'">
|
||||
<td class="pr-4">
|
||||
<covers-preview-cover v-if="item.media.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
|
||||
<div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<p class="text-sm">{{ item.media.metadata.title || 'Unknown' }}</p>
|
||||
<p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-xs font-sans">{{ item.media.metadata.subtitle }}</p>
|
||||
</td>
|
||||
<td class="text-center text-white/70 whitespace-nowrap w-full">
|
||||
<p class="inline-block w-full text-xs pl-1">
|
||||
{{ $elapsedPretty(item.media.duration) }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-settings-content>
|
||||
</template>
|
||||
|
|
@ -93,7 +116,7 @@ export default {
|
|||
return {
|
||||
items: null,
|
||||
libraryStats: null,
|
||||
itemsToShow: 6,
|
||||
itemsToShow: 7,
|
||||
topItemsToShow: 3,
|
||||
bottomItemsToShow: 3,
|
||||
}
|
||||
|
|
@ -102,6 +125,7 @@ export default {
|
|||
currentLibraryId(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.init()
|
||||
this.resetValues()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -205,6 +229,11 @@ export default {
|
|||
loadMoreBottomItems() {
|
||||
const maxBottomItems = this.unfinishedItems.length - this.topItemsToShow;
|
||||
this.bottomItemsToShow = Math.min(this.bottomItemsToShow + 3, maxBottomItems);
|
||||
},
|
||||
resetValues() {
|
||||
this.itemsToShow = 7
|
||||
this.topItemsToShow = 3
|
||||
this.bottomItemsToShow = 3
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -350,6 +350,8 @@
|
|||
"LabelIntervalEveryHour": "Every hour",
|
||||
"LabelInvert": "Invert",
|
||||
"LabelItem": "Item",
|
||||
"LabelItemsListened": "{0} items listened",
|
||||
"LabelItemsTotal": "{0} items total",
|
||||
"LabelJumpBackwardAmount": "Jump backward amount",
|
||||
"LabelJumpForwardAmount": "Jump forward amount",
|
||||
"LabelLanguage": "Language",
|
||||
|
|
@ -584,6 +586,7 @@
|
|||
"LabelToolsMakeM4bDescription": "Generate a .M4B audiobook file with embedded metadata, cover image, and chapters.",
|
||||
"LabelToolsSplitM4b": "Split M4B to MP3's",
|
||||
"LabelToolsSplitM4bDescription": "Create MP3's from an M4B split by chapters with embedded metadata, cover image, and chapters.",
|
||||
"LabelTotal": "{0} total",
|
||||
"LabelTotalDuration": "Total Duration",
|
||||
"LabelTotalTimeListened": "Total Time Listened",
|
||||
"LabelTrackFromFilename": "Track from Filename",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue