Library stats page links to genres, authors, items #453, use overall days when hours > 10000

This commit is contained in:
advplyr 2022-04-20 18:43:39 -05:00
parent 8be3bebee8
commit f2d9de5a5f
3 changed files with 24 additions and 11 deletions

View File

@ -6,15 +6,15 @@
</svg>
<div class="px-2">
<p class="text-4xl md:text-5xl font-bold">{{ totalItems }}</p>
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Books in Library</p>
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Items in Library</p>
</div>
</div>
<div class="flex px-4">
<span class="material-icons text-7xl">show_chart</span>
<div class="px-1">
<p class="text-4xl md:text-5xl font-bold">{{ totalHours }}</p>
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Overall Hours</p>
<p class="text-4xl md:text-5xl font-bold">{{ totalTime }}</p>
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Overall {{ useOverallHours ? 'Hours' : 'Days' }}</p>
</div>
</div>
@ -74,8 +74,7 @@ export default {
return this.libraryStats ? this.libraryStats.totalDuration : 0
},
totalHours() {
var totalHours = Math.round(this.totalDuration / (60 * 60))
return totalHours
return Math.round(this.totalDuration / (60 * 60))
},
totalSizePretty() {
var totalSize = this.libraryStats ? this.libraryStats.totalSize : 0
@ -86,6 +85,13 @@ export default {
},
totalSizeMod() {
return this.totalSizePretty.split(' ')[1]
},
useOverallHours() {
return this.totalHours < 10000
},
totalTime() {
if (this.useOverallHours) return this.totalHours
return Math.round(this.totalHours / 24)
}
},
methods: {},

View File

@ -13,7 +13,9 @@
<div class="flex items-end mb-1">
<p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
<div class="flex-grow" />
<p class="text-base font-book text-white text-opacity-70">{{ genre.genre }}</p>
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base font-book text-white text-opacity-70 hover:underline">
{{ genre.genre }}
</nuxt-link>
</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 * genre.count) / totalItems) + '%' }" />
@ -25,9 +27,11 @@
<h1 class="text-2xl mb-4 font-book">Top 10 Authors</h1>
<p v-if="!top10Authors.length">No Authors</p>
<template v-for="(author, index) in top10Authors">
<div :key="author.author" class="w-full py-2">
<div :key="author.id" class="w-full py-2">
<div class="flex items-center mb-1">
<p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ author.author }}</p>
<p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">
{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
</p>
<div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
</div>
@ -44,7 +48,9 @@
<template v-for="(ab, index) in top10LongestItems">
<div :key="index" class="w-full py-2">
<div class="flex items-center mb-1">
<p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ ab.title }}</p>
<p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">
{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
</p>
<div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
<div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
</div>

View File

@ -247,7 +247,8 @@ module.exports = {
if (authorsMap[author.id]) authorsMap[author.id].count++
else
authorsMap[author.id] = {
author: author.name,
id: author.id,
name: author.name,
count: 1
}
})
@ -257,7 +258,7 @@ module.exports = {
getItemDurationStats(libraryItems) {
var sorted = sort(libraryItems).desc(li => li.media.duration)
var top10 = sorted.slice(0, 10).map(li => ({ title: li.media.metadata.title, duration: li.media.duration })).filter(i => i.duration > 0)
var top10 = sorted.slice(0, 10).map(li => ({ id: li.id, title: li.media.metadata.title, duration: li.media.duration })).filter(i => i.duration > 0)
var totalDuration = 0
var numAudioTracks = 0
libraryItems.forEach((li) => {