Update sorting/filtering for podcasts, show sort line on bookshelf list view, update podcast episode UI

components/cards/LazyListBookCard.vue

@@ -22,7 +22,7 @@
         <p class="whitespace-normal" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">
           {{ displayTitle }}<span v-if="seriesSequence">&nbsp;#{{ seriesSequence }}</span>
         </p>
-        <p class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displayAuthor }}</p>
+        <p class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">by {{ displayAuthor }}</p>
         <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
       </div>
     </div>
@@ -150,10 +150,11 @@ export default {
       return Math.max(2, 3 * this.sizeMultiplier)
     },
     author() {
-      return this.mediaMetadata.authorName || ''
+      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.authorName || 'Unknown'
     },
     authorLF() {
-      return this.mediaMetadata.authorNameLF || ''
+      return this.mediaMetadata.authorNameLF || 'Unknown'
     },
     series() {
       // Only included when filtering by series or collapse series
@@ -177,6 +178,7 @@ export default {
       return this.title
     },
     displayAuthor() {
+      if (this.isPodcast) return this.author
       if (this.orderBy === 'media.metadata.authorNameLF') return this.authorLF
       return this.author
     },
@@ -184,7 +186,6 @@ export default {
       if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs)
       if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs)
       if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt)
-      if (this.orderBy === 'duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
       if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
       return null
     },

components/home/BookshelfToolbar.vue

@@ -58,6 +58,7 @@ export default {
       return this.$route.query || {}
     },
     entityTitle() {
+      if (this.isPodcast) return 'Podcasts'
       if (this.page === 'library') return 'Books'
       else if (this.page === 'series') {
         return 'Series'
@@ -71,6 +72,9 @@ export default {
         return this.$store.state.globals.series.name
       }
       return null
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
     }
   },
   methods: {

components/modals/FilterModal.vue

@@ -56,7 +56,7 @@ export default {
   data() {
     return {
       sublist: null,
-      items: [
+      bookItems: [
         {
           text: 'All',
           value: 'all'
@@ -96,6 +96,22 @@ export default {
           value: 'issues',
           sublist: false
         }
+      ],
+      podcastItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        }
       ]
     }
   },
@@ -124,6 +140,13 @@ export default {
         this.$emit('update:filterBy', val)
       }
     },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
+    },
+    items() {
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
     selectedItemSublist() {
       return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
     },

components/modals/OrderModal.vue

@@ -26,7 +26,7 @@ export default {
   },
   data() {
     return {
-      items: [
+      bookItems: [
         {
           text: 'Title',
           value: 'media.metadata.title'
@@ -47,6 +47,32 @@ export default {
           text: 'Size',
           value: 'size'
         }
+      ],
+      podcastItems: [
+        {
+          text: 'Title',
+          value: 'media.metadata.title'
+        },
+        {
+          text: 'Author',
+          value: 'media.metadata.author'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
+        },
+        {
+          text: 'Size',
+          value: 'size'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
+        }
       ]
     }
   },
@@ -74,6 +100,13 @@ export default {
       set(val) {
         this.$emit('update:descending', val)
       }
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
+    },
+    items() {
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
     }
   },
   methods: {

components/tables/podcast/EpisodeRow.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10">
-    <div v-if="episode" class="flex items-center h-24">
+  <div class="w-full px-0 py-4 overflow-hidden relative border-b border-white border-opacity-10">
+    <div v-if="episode" class="flex items-center">
       <!-- <div class="w-12 min-w-12 max-w-16 h-full">
         <div class="flex h-full items-center justify-center">
           <span class="material-icons drag-handle text-lg text-white text-opacity-50 hover:text-opacity-100">menu</span>
         </div>
       </div> -->
-      <div class="flex-grow px-2">
+      <div class="flex-grow px-1">
+        <p v-if="publishedAt" class="text-xs text-gray-400 mb-1">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+
         <p class="text-sm font-semibold">
           {{ title }}
         </p>
@@ -19,10 +21,8 @@
             <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
           </div>
 
-          <span class="material-icons px-2" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75' : ''" @click="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
-
           <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
-          <p v-if="publishedAt" class="px-4 text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+          <span class="material-icons px-2" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75 text-xl' : 'text-gray-300 text-xl'" @click="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
         </div>
       </div>
     </div>

components/tables/podcast/EpisodesTable.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="w-full">
+    <p class="text-lg mb-1 font-semibold">Episodes ({{ episodes.length }})</p>
+
     <template v-for="episode in episodes">
       <tables-podcast-episode-row :episode="episode" :library-item-id="libraryItemId" :key="episode.id" />
     </template>

mixins/bookshelfCardsHelpers.js

@@ -48,6 +48,11 @@ export default {
         bookCoverAspectRatio: this.bookCoverAspectRatio
       }
       if (this.entityName === 'series-books') props.showSequence = true
+      if (this.entityName === 'books') {
+        props.filterBy = this.filterBy
+        props.orderBy = this.orderBy
+        props.sortingIgnorePrefix = !!this.sortingIgnorePrefix
+      }
 
       var _this = this
       var instance = new ComponentClass({

pages/item/_id.vue

@@ -6,9 +6,6 @@
           <covers-book-cover :library-item="libraryItem" :width="128" :book-cover-aspect-ratio="bookCoverAspectRatio" />
           <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :style="{ width: 128 * progressPercent + 'px' }"></div>
         </div>
-        <div class="flex my-4">
-          <p v-if="numTracks" class="text-sm">{{ numTracks }} Tracks</p>
-        </div>
       </div>
       <div class="flex-grow px-3">
         <h1 class="text-lg">{{ title }}</h1>
@@ -58,7 +55,7 @@
     </div>
 
     <div class="w-full py-4">
-      <p>{{ description }}</p>
+      <p class="text-sm">{{ description }}</p>
     </div>
 
     <tables-podcast-episodes-table v-if="isPodcast" :library-item-id="libraryItemId" :episodes="episodes" />