From 92a31c246c75616ef627dee73c7c58fd438555fe Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 4 Aug 2022 18:23:09 -0500
Subject: [PATCH] Update:Collections page show total duration #303

---
 components/tables/CollectionBooksTable.vue |  6 +++---
 plugins/init.client.js                     | 23 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/tables/CollectionBooksTable.vue b/components/tables/CollectionBooksTable.vue
index 9fbc4c22..9f1fa61f 100644
--- a/components/tables/CollectionBooksTable.vue
+++ b/components/tables/CollectionBooksTable.vue
@@ -8,7 +8,7 @@
       </div>
 
       <div class="flex-grow" />
-      <p v-if="totalDuration">{{ totalDurationPretty }}</p>
+      <p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
     </div>
     <template v-for="book in booksCopy">
       <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item collection-book-item" @edit="editBook" />
@@ -41,12 +41,12 @@ export default {
     totalDuration() {
       var _total = 0
       this.books.forEach((book) => {
-        _total += book.duration
+        _total += book.media.duration
       })
       return _total
     },
     totalDurationPretty() {
-      return this.$elapsedPretty(this.totalDuration)
+      return this.$elapsedPrettyExtended(this.totalDuration)
     }
   },
   methods: {
diff --git a/plugins/init.client.js b/plugins/init.client.js
index b50e5474..79adfc08 100644
--- a/plugins/init.client.js
+++ b/plugins/init.client.js
@@ -66,6 +66,29 @@ Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
   return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
 }
 
+Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => {
+  if (isNaN(seconds) || seconds === null) return ''
+  seconds = Math.round(seconds)
+
+  var minutes = Math.floor(seconds / 60)
+  seconds -= minutes * 60
+  var hours = Math.floor(minutes / 60)
+  minutes -= hours * 60
+
+  var days = 0
+  if (useDays || Math.floor(hours / 24) >= 100) {
+    days = Math.floor(hours / 24)
+    hours -= days * 24
+  }
+
+  var strs = []
+  if (days) strs.push(`${days}d`)
+  if (hours) strs.push(`${hours}h`)
+  if (minutes) strs.push(`${minutes}m`)
+  if (seconds) strs.push(`${seconds}s`)
+  return strs.join(' ')
+}
+
 Vue.prototype.$secondsToTimestamp = (seconds) => {
   var _seconds = seconds
   var _minutes = Math.floor(seconds / 60)