Show total filesizes

public/existing.html

@@ -31,6 +31,10 @@
         .dataTable-sorter::after {
             border-bottom: 4px solid #dbdbdb;
         }
+
+        .hidden {
+            display: none;
+        }
     </style>
 </head>
 
@@ -43,6 +47,8 @@
         <p id="status-message">Loading... Please wait 🙂</p>
         <div id="errors"></div>
 
+        <p class="hidden" id="total-filesize"></p>
+
         <div class="update-status">
             <p id="last-updated"></p>
             <button type="button" class="btn btn-primary" id="refresh-button"><i class="fas fa-circle-notch"></i> Refresh table</button>

public/existing.js

@@ -58,8 +58,8 @@ function removeMessage()
 
 /**
  * For use with Array.prototype.map to map a series/movie to a row.
- * 
- * @param {Object} mediaItem 
+ *
+ * @param {Object} mediaItem
  * @returns Array
  */
 const editionRegex = /\{edition-(.+)\}$/g;
@@ -159,7 +159,7 @@ function addDataTable(rows)
                 select: [tblData.headings.indexOf('Server')],
                 render: function(data, cell, row) {
                     const [name, domain, slug, id] = data.split('|');
-                    
+
                     let url = `https://${domain}`;
 
                     if (!domain.includes('srvr.no')) {
@@ -188,7 +188,7 @@ function addDataTable(rows)
     dataTbl = new simpleDatatables.DataTable(tbl, dataTblConfig);
     dataTbl.on('datatable.init', function() {
         const search = document.querySelector('.datatable-search input');
-        
+
         if (search) {
             search.focus();
         }
@@ -204,6 +204,8 @@ function addDataTable(rows)
 
 async function apiFetch(apiUrl)
 {
+    const errors = document.querySelector('#errors');
+
     try {
         const response = await fetch(apiUrl.url);
         let json = await response.json();
@@ -220,7 +222,10 @@ async function apiFetch(apiUrl)
     catch (err) {
         const element = document.createElement('p');
         element.textContent = `Error fetching data from ${apiUrl.url}: ${err.message}`;
-        errors.appendChild(element);
+
+        if (errors) {
+            errors.appendChild(element);
+        }
 
         console.error(err);
     }
@@ -228,11 +233,44 @@ async function apiFetch(apiUrl)
     return [];
 }
 
+/**
+ *
+ * @param {Array} media Flatten array of media objects
+ */
+async function printTotalFilesize(media)
+{
+    const totalSizeElement = document.querySelector('#total-filesize');
+    if (!totalSizeElement) {
+        return;
+    }
+
+    let totalSizeOnDisk = 0;
+    for (const item of media)
+    {
+        const { path } = item;
+        // Ignore the 4K Plex server
+        if (path && (path.includes('/data/echo/MediaServer') || path.includes('/data/media/MediaServer'))) {
+            continue;
+        }
+
+        if (item.sizeOnDisk) {
+            totalSizeOnDisk += item.sizeOnDisk;
+            continue;
+        }
+
+        if (item.statistics && item.statistics.sizeOnDisk) {
+            totalSizeOnDisk += item.statistics.sizeOnDisk;
+        }
+    }
+
+    totalSizeElement.innerHTML = `💾 Total media storage size, minus <code>smooth-canyon</code> (4K server): <kbd>${humanFileSize(totalSizeOnDisk)}</kbd>`;
+    totalSizeElement.classList.remove('hidden');
+}
+
 async function initial()
 {
     media = [];
-    const errors = document.querySelector('#errors');
-    
+
     const refreshBtn = document.querySelector('#refresh-button');
     let icon = null;
     if (refreshBtn) {
@@ -248,6 +286,9 @@ async function initial()
 
     media = await Promise.all(promises);
     media = media.flat();
+
+    printTotalFilesize(media);
+
     media = media.sort((a, b) => {
         return a.sortTitle.localeCompare(b.sortTitle);
     });
@@ -303,4 +344,4 @@ window.addEventListener('DOMContentLoaded', function() {
     }
 
     initial();
-});
+});