New data model fix collections page & table

client/components/tables/CollectionBooksTable.vue

@@ -6,7 +6,7 @@
         <p class="font-mono text-sm">{{ books.length }}</p>
       </div>
       <div class="flex-grow" />
-      <p v-if="totalDuration">{{ totalDurationPretty }}</p>
+      <!-- <p v-if="totalDuration">{{ totalDurationPretty }}</p> -->
     </div>
     <draggable v-model="booksCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'collection-book' : null">
@@ -56,16 +56,6 @@ export default {
     },
     bookCoverAspectRatio() {
       return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
-    },
-    totalDuration() {
-      var _total = 0
-      this.books.forEach((book) => {
-        _total += book.duration
-      })
-      return _total
-    },
-    totalDurationPretty() {
-      return this.$elapsedPretty(this.totalDuration)
     }
   },
   methods: {

client/components/tables/collection/BookTableRow.vue

@@ -17,7 +17,6 @@
       <div class="w-80 h-full px-2 flex items-center">
         <div>
           <nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
-          <!-- <nuxt-link :to="`/library/${book.libraryId}/bookshelf?filter=authors.${$encode(bookAuthor)}`" class="truncate block text-gray-400 text-sm hover:underline">{{ bookAuthor }}</nuxt-link> -->
         </div>
       </div>
       <div class="flex-grow flex items-center">
@@ -89,8 +88,12 @@ export default {
     bookAuthor() {
       return (this.mediaMetadata.authors || []).map((au) => au.name).join(', ')
     },
+    defaultAudiobook() {
+      if (!this.media.audiobooks.length) return null
+      return this.media.audiobooks[0]
+    },
     bookDuration() {
-      return this.$secondsToTimestamp(this.media.duration)
+      return this.$secondsToTimestamp(this.defaultAudiobook.duration)
     },
     isMissing() {
       return this.book.isMissing
@@ -98,14 +101,11 @@ export default {
     isInvalid() {
       return this.book.isInvalid
     },
-    numTracks() {
-      return this.media.tracks.length
-    },
     isStreaming() {
       return this.$store.getters['getLibraryItemIdStreaming'] === this.book.id
     },
     showPlayBtn() {
-      return !this.isMissing && !this.isInvalid && !this.isStreaming && this.numTracks
+      return !this.isMissing && !this.isInvalid && !this.isStreaming && this.defaultAudiobook
     },
     itemProgress() {
       return this.$store.getters['user/getUserLibraryItemProgress'](this.book.id)

client/pages/collection/_id.vue

@@ -83,7 +83,7 @@ export default {
     },
     playableBooks() {
       return this.bookItems.filter((book) => {
-        return !book.isMissing && !book.isInvalid && book.numTracks
+        return !book.isMissing && !book.isInvalid && book.media.audiobooks.length
       })
     },
     streaming() {
@@ -91,9 +91,6 @@ export default {
     },
     showPlayButton() {
       return this.playableBooks.length
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
     }
   },
   methods: {
@@ -118,7 +115,10 @@ export default {
       }
     },
     clickPlay() {
-      var nextBookNotRead = this.playableBooks.find((pb) => !this.userAudiobooks[pb.id] || !this.userAudiobooks[pb.id].isRead)
+      var nextBookNotRead = this.playableBooks.find((pb) => {
+        var prog = this.$store.getters['user/getUserLibraryItemProgress'](pb.id)
+        return !prog || !prog.isFinished
+      })
       if (nextBookNotRead) {
         this.$eventBus.$emit('play-item', nextBookNotRead.id)
       }