Add:Alternate bookshelf view show sorting/filtering keys and ignore The prefix title #232 #361

client/components/app/LazyBookshelf.vue

@@ -2,9 +2,6 @@
   <div id="bookshelf" class="w-full overflow-y-auto">
     <template v-for="shelf in totalShelves">
       <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <!-- <div class="absolute top-0 left-0 bottom-0 p-4 z-10">
-          <p class="text-white text-2xl">{{ shelf }}</p>
-        </div>-->
         <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
       </div>
     </template>
@@ -116,6 +113,9 @@ export default {
     bookshelfView() {
       return this.$store.getters['getServerSetting']('bookshelfView')
     },
+    sortingIgnorePrefix() {
+      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
+    },
     isCoverSquareAspectRatio() {
       return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
     },

client/components/cards/LazyBookCard.vue

@@ -5,11 +5,12 @@
       <div class="absolute cover-bg" ref="coverBg" />
     </div>
 
-    <div v-if="isAlternativeBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${sizeMultiplier * 3}rem` }">
+    <div v-if="isAlternativeBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        <span v-if="volumeNumber">#{{ volumeNumber }}&nbsp;</span>{{ title }}
+        <span v-if="volumeNumber">#{{ volumeNumber }}&nbsp;</span>{{ displayTitle }}
       </p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ authorFL }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayAuthor }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
 
     <div v-if="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
@@ -99,7 +100,10 @@ export default {
       // Book can be passed as prop or set with setEntity()
       type: Object,
       default: () => null
-    }
+    },
+    orderBy: String,
+    filterBy: String,
+    sortingIgnorePrefix: Boolean
   },
   data() {
     return {
@@ -180,6 +184,24 @@ export default {
     volumeNumber() {
       return this.book.volumeNumber || null
     },
+    displayTitle() {
+      if (this.orderBy === 'book.title' && this.sortingIgnorePrefix && this.title.toLowerCase().startsWith('the ')) {
+        return this.title.substr(4) + ', The'
+      } else {
+        console.log('DOES NOT COMPUTE', this.orderBy, this.sortingIgnorePrefix, this.title.toLowerCase())
+      }
+      return this.title
+    },
+    displayAuthor() {
+      if (this.orderBy === 'book.authorLF') return this.authorLF
+      return this.authorFL
+    },
+    displaySortLine() {
+      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._audiobook.addedAt)
+      if (this.orderBy === 'duration') return 'Duration: ' +  this.$elapsedPrettyExtended(this._audiobook.duration, false)
+      if (this.orderBy === 'size')  return 'Size: ' + this.$bytesPretty(this._audiobook.size)
+      return null
+    },
     userProgress() {
       return this.store.getters['user/getUserAudiobook'](this.audiobookId)
     },
@@ -322,6 +344,11 @@ export default {
     isAlternativeBookshelfView() {
       var constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.TITLES
+    },
+    titleDisplayBottomOffset() {
+      if (!this.isAlternativeBookshelfView) return 0
+      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
+      return 4.25 * this.sizeMultiplier
     }
   },
   methods: {

client/mixins/bookshelfCardsHelpers.js

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

client/plugins/init.client.js

@@ -25,7 +25,7 @@ Vue.prototype.$addDaysToToday = (daysToAdd) => {
 }
 
 Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
-  if (bytes === 0) {
+  if (isNaN(bytes) || !bytes === 0) {
     return '0 Bytes'
   }
   const k = 1024
@@ -61,13 +61,20 @@ Vue.prototype.$secondsToTimestamp = (seconds) => {
   return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}`
 }
 
-Vue.prototype.$elapsedPrettyExtended = (seconds) => {
+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 = Math.floor(hours / 24)
-  hours -= days * 24
+
+  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`)

server/controllers/LibraryController.js

@@ -214,7 +214,7 @@ class LibraryController {
 
     var sortingIgnorePrefix = this.db.serverSettings.sortingIgnorePrefix
     series = sort(series).asc(s => {
-      if (sortingIgnorePrefix && s.name.toLowerCase().startsWith('the')) {
+      if (sortingIgnorePrefix && s.name.toLowerCase().startsWith('the ')) {
         return s.name.substr(4)
       }
       return s.name