Add size stats

client/pages/config/library-stats.vue

@@ -60,6 +60,25 @@
             </div>
           </template>
         </div>
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsLargestItems }}</h1>
+          <p v-if="!top10LargestItems.length">{{ $strings.MessageNoItems }}</p>
+          <template v-for="(ab, index) in top10LargestItems">
+            <div :key="index" class="w-full py-2">
+              <div class="flex items-center mb-1">
+                <p class="text-sm 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.size) / largestItemSize) + '%' }" />
+                </div>
+                <div class="w-4 ml-3">
+                  <p class="text-sm font-bold">{{ $bytesPretty(ab.size) }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
     </app-settings-content>
   </div>
@@ -105,6 +124,13 @@ export default {
       if (!this.top10LongestItems.length) return 0
       return this.top10LongestItems[0].duration
     },
+    top10LargestItems() {
+      return this.libraryStats ? this.libraryStats.largestItems || [] : []
+    },
+    largestItemSize() {
+      if (!this.top10LargestItems.length) return 0
+      return this.top10LargestItems[0].size
+    },
     authorsWithCount() {
       return this.libraryStats ? this.libraryStats.authorsWithCount : []
     },

client/strings/en-us.json

@@ -138,6 +138,7 @@
   "HeaderSettingsGeneral": "General",
   "HeaderSettingsScanner": "Scanner",
   "HeaderSleepTimer": "Sleep Timer",
+  "HeaderStatsLargestItems": "Largest Items",
   "HeaderStatsLongestItems": "Longest Items (hrs)",
   "HeaderStatsMinutesListeningChart": "Minutes Listening (last 7 days)",
   "HeaderStatsRecentSessions": "Recent Sessions",

server/controllers/LibraryController.js

@@ -637,6 +637,7 @@ class LibraryController {
     var authorsWithCount = libraryHelpers.getAuthorsWithCount(libraryItems)
     var genresWithCount = libraryHelpers.getGenresWithCount(libraryItems)
     var durationStats = libraryHelpers.getItemDurationStats(libraryItems)
+    var sizeStats = libraryHelpers.getItemSizeStats(libraryItems)
     var stats = {
       totalItems: libraryItems.length,
       totalAuthors: Object.keys(authorsWithCount).length,
@@ -645,6 +646,7 @@ class LibraryController {
       longestItems: durationStats.longestItems,
       numAudioTracks: durationStats.numAudioTracks,
       totalSize: libraryHelpers.getLibraryItemsTotalSize(libraryItems),
+      largestItems: sizeStats.largestItems,
       authorsWithCount,
       genresWithCount
     }

server/utils/libraryHelpers.js

@@ -280,6 +280,19 @@ module.exports = {
     }
   },
 
+  getItemSizeStats(libraryItems) {
+    var sorted = sort(libraryItems).desc(li => li.media.size)
+    var top10 = sorted.slice(0, 10).map(li => ({ id: li.id, title: li.media.metadata.title, size: li.media.size })).filter(i => i.size > 0)
+    var totalSize = 0
+    libraryItems.forEach((li) => {
+      totalSize += li.media.size
+    })
+    return {
+      totalSize,
+      largestItems: top10
+    }
+  },
+
   getLibraryItemsTotalSize(libraryItems) {
     var totalSize = 0
     libraryItems.forEach((li) => {