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

client/components/stats/PreviewIcons.vue

@@ -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="text-4xl md:text-5xl font-bold">{{ totalTime }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Overall Hours</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 Math.round(this.totalDuration / (60 * 60))
-      return totalHours
     },
     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: {},

client/pages/config/library-stats.vue

@@ -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>

server/utils/libraryHelpers.js

@@ -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) => {