From d64932dad70c0be31375b99c92fd2c994007bb58 Mon Sep 17 00:00:00 2001
From: Scott Ruoti <ruoti@utk.edu>
Date: Sat, 29 Oct 2022 22:54:31 -0400
Subject: [PATCH 1/5] Fixes bug when titles are in multiple series being
 collapsed

---
 server/utils/libraryHelpers.js | 43 +++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index cb5fb0d4..19e0cd6f 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -283,32 +283,31 @@ module.exports = {
   collapseBookSeries(libraryItems, series) {
     var seriesObjects = this.getSeriesFromBooks(libraryItems, series, null, null, true)
     var seriesToUse = {}
-    var libraryItemIdsToHide = []
-    seriesObjects.forEach((series) => {
-      series.firstBook = series.books.find(b => !seriesToUse[b.id]) // Find first book not already used
-      if (series.firstBook) {
-        seriesToUse[series.firstBook.id] = series
-        libraryItemIdsToHide = libraryItemIdsToHide.concat(series.books.filter(b => !seriesToUse[b.id]).map(b => b.id))
-      }
-    })
+    var collapsedLibraryItems = []
 
-    return libraryItems.map((li) => {
+    libraryItems.forEach((li) => {
       if (li.mediaType != 'book') return
-      var libraryItemJson = li.toJSONMinified()
-      if (libraryItemIdsToHide.includes(li.id)) {
-        return null
-      }
-      if (seriesToUse[li.id]) {
+
+      // Handle when this is the first book in a series
+      seriesObjects.filter(s => s.books[0].id == li.id).forEach(series => {
+        let libraryItemJson = li.toJSONMinified()
         libraryItemJson.collapsedSeries = {
-          id: seriesToUse[li.id].id,
-          name: seriesToUse[li.id].name,
-          nameIgnorePrefix: seriesToUse[li.id].nameIgnorePrefix,
-          libraryItemIds: seriesToUse[li.id].books.map(b => b.id),
-          numBooks: seriesToUse[li.id].books.length
+          id: series.id,
+          name: series.name,
+          nameIgnorePrefix: series.nameIgnorePrefix,
+          libraryItemIds: series.books.map(b => b.id),
+          numBooks: series.books.length
         }
-      }
-      return libraryItemJson
-    }).filter(li => li)
+        collapsedLibraryItems.push(libraryItemJson);
+      });
+
+      // Ignore books contained in series
+      if (li.media.metadata.series.length) return
+
+      collapsedLibraryItems.push(li.toJSONMinified())
+    });
+
+    return collapsedLibraryItems
   },
 
   buildPersonalizedShelves(user, libraryItems, mediaType, allSeries, allAuthors, maxEntitiesPerShelf = 10) {

From b322d0207bdea39007122b70e7d239638ac95986 Mon Sep 17 00:00:00 2001
From: Scott Ruoti <ruoti@utk.edu>
Date: Sun, 30 Oct 2022 10:21:12 -0400
Subject: [PATCH 2/5] Fixed sorting to be more consistent for multiple series
 (and generally)

---
 server/controllers/LibraryController.js | 94 +++++++++++++++----------
 server/utils/libraryHelpers.js          | 36 +++++-----
 2 files changed, 76 insertions(+), 54 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index e06fbe92..a5bcfe73 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -160,17 +160,30 @@ class LibraryController {
       minified: req.query.minified === '1',
       collapseseries: req.query.collapseseries === '1'
     }
+    var mediaIsBook = payload.mediaType === 'book'
 
     var filterSeries = null
     if (payload.filterBy) {
       // If filtering by series, will include seriesName and seriesSequence on media metadata
-      filterSeries = (payload.mediaType == 'book' && payload.filterBy.startsWith('series.')) ? libraryHelpers.decode(payload.filterBy.replace('series.', '')) : null
+      filterSeries = (mediaIsBook && payload.filterBy.startsWith('series.')) ? libraryHelpers.decode(payload.filterBy.replace('series.', '')) : null
       if (filterSeries === 'No Series') filterSeries = null
 
       libraryItems = libraryHelpers.getFilteredLibraryItems(libraryItems, payload.filterBy, req.user, this.rssFeedManager.feedsArray)
       payload.total = libraryItems.length
     }
 
+    if (payload.collapseseries) {
+      libraryItems = libraryHelpers.collapseBookSeries(libraryItems, this.db.series, filterSeries)
+      payload.total = libraryItems.length
+    }
+
+
+    var sortArray = []
+    if (filterSeries) {
+      // Book media when filtering series will sort by the series sequence
+      sortArray.push({ asc: (li) => li.media.metadata.getSeries(filterSeries).sequence })
+    }
+
     if (payload.sortBy) {
       var sortKey = payload.sortBy
 
@@ -186,29 +199,37 @@ class LibraryController {
         sortKey += 'IgnorePrefix'
       }
 
-      // Start sort
-      var direction = payload.sortDesc ? 'desc' : 'asc'
-      var sortArray = [
-        {
-          [direction]: (li) => {
-            // When collapsing by series and sorting by title use the series name instead of the book title
-            if (payload.mediaType === 'book' && payload.collapseseries && li.media.metadata.seriesName) {
-              if (sortByTitle) {
-                return this.db.serverSettings.sortingIgnorePrefix ? li.media.metadata.seriesNameIgnorePrefix : li.media.metadata.seriesName
-              } else {
-                // When not sorting by title always show the collapsed series at the end
-                return direction === 'desc' ? -1 : 'zzzz'
-              }
+      // If series are collapsed and not sorting by title, sort all collapsed series to the end in alphabetical order
+      if (payload.collapseseries && !sortByTitle) {
+        sortArray.push({
+          asc: (li) => {
+            if (li.collapsedSeries) {
+              return this.db.serverSettings.sortingIgnorePrefix ?
+                li.collapsedSeries.nameIgnorePrefix :
+                li.collapsedSeries.name
+            } else {
+              return ''
             }
+          }
+        })
+      }
 
+      var direction = payload.sortDesc ? 'desc' : 'asc'
+      sortArray.push({
+        [direction]: (li) => {
+          if (mediaIsBook && sortByTitle && li.collapsedSeries) {
+            return this.db.serverSettings.sortingIgnorePrefix ?
+              li.collapsedSeries.nameIgnorePrefix :
+              li.collapsedSeries.name
+          } else {
             // Supports dot notation strings i.e. "media.metadata.title"
             return sortKey.split('.').reduce((a, b) => a[b], li)
           }
         }
-      ]
+      })
 
       // Secondary sort when sorting by book author use series sort title
-      if (payload.mediaType === 'book' && payload.sortBy.includes('author')) {
+      if (mediaIsBook && payload.sortBy.includes('author')) {
         sortArray.push({
           asc: (li) => {
             if (li.media.metadata.series && li.media.metadata.series.length) {
@@ -218,30 +239,31 @@ class LibraryController {
           }
         })
       }
+    }
+
+    // Sort the items
+    if (sortArray.length) {
       libraryItems = naturalSort(libraryItems).by(sortArray)
     }
 
-    if (payload.collapseseries) {
-      libraryItems = libraryHelpers.collapseBookSeries(libraryItems, this.db.series)
-      payload.total = libraryItems.length
-    } else if (filterSeries) {
-      // Book media when filtering series will include series object on media metadata
-      libraryItems = libraryItems.map(li => {
-        var series = li.media.metadata.getSeries(filterSeries)
-        var liJson = payload.minified ? li.toJSONMinified() : li.toJSON()
-        liJson.media.metadata.series = series
-        return liJson
-      })
-      libraryItems = naturalSort(libraryItems).asc(li => li.media.metadata.series.sequence)
-    } else {
-      libraryItems = libraryItems.map(li => payload.minified ? li.toJSONMinified() : li.toJSON())
-    }
+    payload.results = libraryItems.map(li => {
+      let json = payload.minified ? li.toJSONMinified() : li.toJSON()
+
+      if (li.collapsedSeries) {
+        json.collapsedSeries = {
+          id: li.collapsedSeries.id,
+          name: li.collapsedSeries.name,
+          nameIgnorePrefix: li.collapsedSeries.nameIgnorePrefix,
+          libraryItemIds: li.collapsedSeries.books.map(b => b.id),
+          numBooks: li.collapsedSeries.books.length
+        }
+      } else if (filterSeries) {
+        json.media.metadata.series = li.media.metadata.getSeries(filterSeries)
+      }
+
+      return json
+    })
 
-    if (payload.limit) {
-      var startIndex = payload.page * payload.limit
-      libraryItems = libraryItems.slice(startIndex, startIndex + payload.limit)
-    }
-    payload.results = libraryItems
     res.json(payload)
   }
 
diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index 19e0cd6f..f3d28acf 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -280,34 +280,34 @@ module.exports = {
     return totalSize
   },
 
-  collapseBookSeries(libraryItems, series) {
-    var seriesObjects = this.getSeriesFromBooks(libraryItems, series, null, null, true)
-    var seriesToUse = {}
-    var collapsedLibraryItems = []
+
+  collapseBookSeries(libraryItems, series, filterSeries) {
+    // Get series from the library items. If this list is being collapsed after filtering for a series,
+    // don't collapse that series, only books that are in other series.
+    var seriesObjects = this
+      .getSeriesFromBooks(libraryItems, series, null, null, true)
+      .filter(s => s.id != filterSeries)
+
+    var filteredLibraryItems = []
 
     libraryItems.forEach((li) => {
       if (li.mediaType != 'book') return
 
       // Handle when this is the first book in a series
       seriesObjects.filter(s => s.books[0].id == li.id).forEach(series => {
-        let libraryItemJson = li.toJSONMinified()
-        libraryItemJson.collapsedSeries = {
-          id: series.id,
-          name: series.name,
-          nameIgnorePrefix: series.nameIgnorePrefix,
-          libraryItemIds: series.books.map(b => b.id),
-          numBooks: series.books.length
-        }
-        collapsedLibraryItems.push(libraryItemJson);
+        // Clone the library item as we need to attach data to it, but don't
+        // want to change the global copy of the library item
+        filteredLibraryItems.push(Object.assign(
+          Object.create(Object.getPrototypeOf(li)),
+          li, { collapsedSeries: series }))
       });
 
-      // Ignore books contained in series
-      if (li.media.metadata.series.length) return
-
-      collapsedLibraryItems.push(li.toJSONMinified())
+      // Only included books not contained in series
+      if (!seriesObjects.some(s => s.books.some(b => b.id == li.id)))
+        filteredLibraryItems.push(li)
     });
 
-    return collapsedLibraryItems
+    return filteredLibraryItems
   },
 
   buildPersonalizedShelves(user, libraryItems, mediaType, allSeries, allAuthors, maxEntitiesPerShelf = 10) {

From c1035d97e8d988269b896bc78a112e7ca1232cff Mon Sep 17 00:00:00 2001
From: Scott Ruoti <ruoti@utk.edu>
Date: Sun, 30 Oct 2022 11:38:00 -0400
Subject: [PATCH 3/5] Show book sequences for collapsed series when filtering
 by series

---
 client/components/app/LazyBookshelf.vue  |  28 ++++--
 client/components/cards/LazyBookCard.vue | 117 +++++++++++++++++------
 server/controllers/LibraryController.js  |  58 ++++++++---
 server/utils/libraryHelpers.js           |   7 +-
 4 files changed, 159 insertions(+), 51 deletions(-)

diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 08ed1496..c0798d19 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -1,12 +1,15 @@
 <template>
   <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 v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative"
+        :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20"
+          :class="`h-${shelfDividerHeightIndex}`" />
       </div>
     </template>
 
-    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
+    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'"
+      class="w-full flex flex-col items-center justify-center py-12">
       <p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
       <div v-if="userIsAdminOrUp" class="flex">
         <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
@@ -319,7 +322,6 @@ export default {
           this.totalEntities = payload.total
           this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
           this.entities = new Array(this.totalEntities)
-          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
         }
 
         for (let i = 0; i < payload.results.length; i++) {
@@ -329,8 +331,21 @@ export default {
             this.entityComponentRefs[index].setEntity(this.entities[index])
           }
         }
+
+        this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
       }
     },
+    getEntitiesCount() {
+      let uniqueEntities = new Set()
+      this.entities.forEach(entity => {
+        if (entity.collapsedSeries) {
+          entity.collapsedSeries.libraryItemIds.forEach(uniqueEntities.add, uniqueEntities)
+        } else {
+          uniqueEntities.add(entity.id)
+        }
+      });
+      return uniqueEntities.size
+    },
     loadPage(page) {
       this.pagesLoaded[page] = true
       this.fetchEntites(page)
@@ -513,7 +528,7 @@ export default {
         if (indexOf >= 0) {
           this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
           this.totalEntities = this.entities.length
-          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+          this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
           this.executeRebuild()
         }
       }
@@ -551,7 +566,7 @@ export default {
       if (indexOf >= 0) {
         this.entities = this.entities.filter((ent) => ent.id !== collection.id)
         this.totalEntities = this.entities.length
-        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
         this.executeRebuild()
       }
     },
@@ -715,6 +730,7 @@ export default {
 .bookshelfRow {
   background-image: var(--bookshelf-texture-img);
 }
+
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: var(--bookshelf-divider-bg);
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index d437c67d..22b064de 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -1,106 +1,160 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`book-card-${index}`"
+    :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }"
+    class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent
+    @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <!-- When cover image does not fill -->
     <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
       <div class="absolute cover-bg" ref="coverBg" />
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full"
+      :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
         {{ displayTitle }}
       </p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo ||
+          '&nbsp;'
+      }}</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>
+    <div v-if="seriesSequenceList"
+      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 bg-black bg-opacity-90 box-shadow-md"
+      style="background-color: #78350f">#{{ seriesSequenceList }}</div>
+    <div v-else-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>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-      <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
+      <div v-show="libraryItem && !imageReady"
+        class="absolute top-0 left-0 w-full h-full flex items-center justify-center"
+        :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}
+        </p>
       </div>
 
       <!-- Cover Image -->
-      <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+      <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300"
+        :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded"
+        :style="{ opacity: imageReady ? 1 : 0 }" />
 
       <!-- Placeholder Cover Title & Author -->
-      <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div v-if="!hasCover"
+        class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center"
+        :style="{ padding: placeholderCoverPadding + 'rem' }">
         <div>
-          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+            {{ titleCleaned }}</p>
         </div>
       </div>
-      <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+      <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center"
+        :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
+        <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75"
+          :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
       </div>
     </div>
 
     <!-- No progress shown for collapsed series in library and podcasts (unless showing podcast episode) -->
-    <div v-if="!booksInSeries && (!isPodcast || episodeProgress)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+    <div v-if="!booksInSeries && (!isPodcast || episodeProgress)"
+      class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b"
+      :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }">
+    </div>
     <!-- Finished progress bar for collapsed series -->
-    <div v-else-if="booksInSeries && seriesIsFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success" :style="{ width: width * userProgressPercent + 'px' }"></div>
+    <div v-else-if="booksInSeries && seriesIsFinished"
+      class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success"
+      :style="{ width: width * userProgressPercent + 'px' }"></div>
 
     <!-- Overlay is not shown if collapsing series in library -->
-    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
+    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing"
+      class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block"
+      :class="overlayWrapperClasslist">
       <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto"
+          @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
         </div>
       </div>
 
       <div v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto"
+          @click.stop.prevent="clickReadEBook">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
         </div>
       </div>
 
-      <div v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
+      <div v-if="userCanUpdate" v-show="!isSelectionMode"
+        class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0"
+        :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
         <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
       </div>
 
-      <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+      <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100"
+        :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }"
+        @click.stop.prevent="selectBtnClick">
+        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''"
+          :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' :
+              'radio_button_unchecked'
+          }}</span>
       </div>
 
       <!-- More Menu Icon -->
-      <div ref="moreIcon" v-show="!isSelectionMode" class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
+      <div ref="moreIcon" v-show="!isSelectionMode"
+        class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150"
+        :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }"
+        @click.stop.prevent="clickShowMore">
         <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
       </div>
     </div>
 
     <!-- Processing/loading spinner overlay -->
-    <div v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+    <div v-if="processing"
+      class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
       <widgets-loading-spinner size="la-lg" />
     </div>
 
     <!-- Series name overlay -->
-    <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
+    <div v-if="booksInSeries && libraryItem && isHovering"
+      class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center"
+      :style="{ padding: sizeMultiplier + 'rem' }">
       <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
     </div>
 
     <!-- Error widget -->
     <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
-      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-        <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }"
+        class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+        <span class="material-icons text-red-100 pr-1"
+          :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
       </div>
     </ui-tooltip>
 
-    <div v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
+    <div v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10"
+      :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
       <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
     </div>
 
     <!-- Series sequence -->
-    <div v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="seriesSequence && !isHovering && !isSelectionMode"
+      class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode && !processing"
+      class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">Episode #{{ recentEpisodeNumber }}</p>
     </div>
 
     <!-- Podcast Num Episodes -->
-    <div v-else-if="numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+    <div v-else-if="numEpisodes && !isHovering && !isSelectionMode"
+      class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
     </div>
   </div>
@@ -236,6 +290,9 @@ export default {
       // Only added to item object when collapseSeries is enabled
       return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
     },
+    seriesSequenceList() {
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
+    },
     libraryItemIdsInSeries() {
       // Only added to item object when collapseSeries is enabled
       return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
@@ -515,7 +572,7 @@ export default {
           }
         }
         var mediaMetadata = libraryItem.media.metadata
-        if (mediaMetadata.series) {
+        if (mediaMetadata.series && Array.isArray(mediaMetadata.series)) {
           var newSeries = mediaMetadata.series.find((se) => se.id === this.series.id)
           if (newSeries) {
             // update selected series
diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index a5bcfe73..0ee05571 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -162,32 +162,40 @@ class LibraryController {
     }
     var mediaIsBook = payload.mediaType === 'book'
 
+    // Step 1 - Filter the retrieved library items
     var filterSeries = null
     if (payload.filterBy) {
-      // If filtering by series, will include seriesName and seriesSequence on media metadata
-      filterSeries = (mediaIsBook && payload.filterBy.startsWith('series.')) ? libraryHelpers.decode(payload.filterBy.replace('series.', '')) : null
-      if (filterSeries === 'No Series') filterSeries = null
-
       libraryItems = libraryHelpers.getFilteredLibraryItems(libraryItems, payload.filterBy, req.user, this.rssFeedManager.feedsArray)
       payload.total = libraryItems.length
+
+      // Determining if we are filtering titles by a series, and if so, which series
+      filterSeries = (mediaIsBook && payload.filterBy.startsWith('series.')) ? libraryHelpers.decode(payload.filterBy.replace('series.', '')) : null
+      if (filterSeries === 'No Series') filterSeries = null
     }
 
+    // Step 2 - If selected, collapse library items by the series they belong to.
+    // If also filtering by series, will not collapse the filtered series as this would lead
+    // to series having a collapsed series that is just that series.
     if (payload.collapseseries) {
-      libraryItems = libraryHelpers.collapseBookSeries(libraryItems, this.db.series, filterSeries)
-      payload.total = libraryItems.length
+      let collapsedItems = libraryHelpers.collapseBookSeries(libraryItems, this.db.series, filterSeries)
+
+      if (!(collapsedItems.length == 1 && collapsedItems[0].collapsedSeries)) {
+        libraryItems = collapsedItems
+        payload.total = collapsedItems.length
+      }
     }
 
-
+    // Step 3 - Sort the retrieved library items.
     var sortArray = []
-    if (filterSeries) {
-      // Book media when filtering series will sort by the series sequence
+
+    // When on the series page, sort by sequence only
+    if (filterSeries && !payload.sortBy) {
       sortArray.push({ asc: (li) => li.media.metadata.getSeries(filterSeries).sequence })
     }
 
     if (payload.sortBy) {
-      var sortKey = payload.sortBy
-
       // old sort key TODO: should be mutated in dbMigration
+      var sortKey = payload.sortBy
       if (sortKey.startsWith('book.')) {
         sortKey = sortKey.replace('book.', 'media.metadata.')
       }
@@ -241,11 +249,11 @@ class LibraryController {
       }
     }
 
-    // Sort the items
     if (sortArray.length) {
       libraryItems = naturalSort(libraryItems).by(sortArray)
     }
 
+    // Step 4 - Transform the items to pass to the client side
     payload.results = libraryItems.map(li => {
       let json = payload.minified ? li.toJSONMinified() : li.toJSON()
 
@@ -257,7 +265,31 @@ class LibraryController {
           libraryItemIds: li.collapsedSeries.books.map(b => b.id),
           numBooks: li.collapsedSeries.books.length
         }
+
+        // If collapsing by series and filtering by a series, generate the list of sequences the collapsed
+        // series represents in the filtered series
+        if (filterSeries) {
+          json.collapsedSeries.seriesSequenceList = li.collapsedSeries.books
+            .map(b => parseFloat(b.filterSeriesSequence))
+            .filter(s => s)
+            .sort((a, b) => a - b)
+            .reduce((ranges, currentSequence) => {
+              let lastRange = ranges.at(-1)
+
+              if (lastRange && ((lastRange.end + 1) == currentSequence)) {
+                lastRange.end = currentSequence
+              }
+              else {
+                ranges.push({ start: currentSequence, end: currentSequence })
+              }
+
+              return ranges
+            }, [])
+            .map(r => r.start == r.end ? r.start : `${r.start}-${r.end}`)
+            .join(', ')
+        }
       } else if (filterSeries) {
+        // If filtering by series, make sure to include the series metadata
         json.media.metadata.series = li.media.metadata.getSeries(filterSeries)
       }
 
@@ -297,7 +329,7 @@ class LibraryController {
       minified: req.query.minified === '1'
     }
 
-    var series = libraryHelpers.getSeriesFromBooks(libraryItems, this.db.series, payload.filterBy, req.user, payload.minified)
+    var series = libraryHelpers.getSeriesFromBooks(libraryItems, this.db.series, null, payload.filterBy, req.user, payload.minified)
 
     const direction = payload.sortDesc ? 'desc' : 'asc'
     series = naturalSort(series).by([
diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index f3d28acf..b33a1b8f 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -153,7 +153,7 @@ module.exports = {
     return data
   },
 
-  getSeriesFromBooks(books, allSeries, filterBy, user, minified = false) {
+  getSeriesFromBooks(books, allSeries, filterSeries, filterBy, user, minified = false) {
     const _series = {}
     const seriesToFilterOut = {}
     books.forEach((libraryItem) => {
@@ -179,6 +179,9 @@ module.exports = {
 
         const abJson = minified ? libraryItem.toJSONMinified() : libraryItem.toJSONExpanded()
         abJson.sequence = bookSeriesObj.sequence
+        if (filterSeries) {
+          abJson.filterSeriesSequence = libraryItem.media.metadata.getSeries(filterSeries).sequence
+        }
         if (!_series[bookSeriesObj.id]) {
           _series[bookSeriesObj.id] = {
             id: bookSeriesObj.id,
@@ -285,7 +288,7 @@ module.exports = {
     // Get series from the library items. If this list is being collapsed after filtering for a series,
     // don't collapse that series, only books that are in other series.
     var seriesObjects = this
-      .getSeriesFromBooks(libraryItems, series, null, null, true)
+      .getSeriesFromBooks(libraryItems, series, filterSeries, null, null, true)
       .filter(s => s.id != filterSeries)
 
     var filteredLibraryItems = []

From b1111912f74a8eae70c2087b6deeed9d5937db62 Mon Sep 17 00:00:00 2001
From: Scott Ruoti <ruoti@utk.edu>
Date: Thu, 3 Nov 2022 09:11:33 -0400
Subject: [PATCH 4/5] Added sorting by sequence for series and collapsing
 series in series view

---
 client/components/app/BookShelfToolbar.vue    |  17 ++-
 client/components/app/LazyBookshelf.vue       |   8 +-
 client/components/cards/LazyBookCard.vue      |  16 ++-
 .../components/controls/LibrarySortSelect.vue | 130 +++++++++++-------
 server/controllers/LibraryController.js       |  45 +++---
 5 files changed, 137 insertions(+), 79 deletions(-)

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index bbf30f6e..00da52c3 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -28,13 +28,19 @@
             <span class="font-mono">{{ numShowing }}</span>
           </div>
           <div class="flex-grow" />
-          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center" @click="markSeriesFinished">
+          <ui-checkbox v-model="settings.collapseBookSeries" label="Collapse Series" checkbox-bg="bg"
+            check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
+          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center ml-1 sm:ml-4"
+            @click="markSeriesFinished">
             <div class="h-5 w-5">
-              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
-                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                fill="rgb(63, 181, 68)">
+                <path
+                  d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
               </svg>
               <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
+                <path
+                  d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
               </svg>
             </div>
             <span class="pl-2"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span>
@@ -280,6 +286,9 @@ export default {
     updateCollapseSeries() {
       this.saveSettings()
     },
+    updateCollapseBookSeries() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index c0798d19..9f289dc5 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -122,6 +122,9 @@ export default {
     collapseSeries() {
       return this.$store.getters['user/getUserSetting']('collapseSeries')
     },
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
+    },
     coverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
@@ -452,6 +455,9 @@ export default {
         searchParams.set('filter', this.seriesFilterBy)
       } else if (this.page === 'series-books') {
         searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
       } else {
         if (this.filterBy && this.filterBy !== 'all') {
           searchParams.set('filter', this.filterBy)
@@ -467,8 +473,6 @@ export default {
       return searchParams.toString()
     },
     checkUpdateSearchParams() {
-      if (this.page === 'series-books') return false
-
       var newSearchParams = this.buildSearchParams()
       var currentQueryString = window.location.search
       if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index 22b064de..85ac20a5 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -22,12 +22,16 @@
       }}</p>
     </div>
 
-    <div v-if="seriesSequenceList"
-      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 bg-black bg-opacity-90 box-shadow-md"
-      style="background-color: #78350f">#{{ seriesSequenceList }}</div>
-    <div v-else-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>
+    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }"
+      style="background-color: #78350f">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+    </div>
+    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20"
+      :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }"
+      style="background-color: #cd9d49dd">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+    </div>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
       <div v-show="libraryItem && !imageReady"
diff --git a/client/components/controls/LibrarySortSelect.vue b/client/components/controls/LibrarySortSelect.vue
index 88363583..1bb6e9bb 100644
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
@@ -1,19 +1,27 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button"
+      class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer"
+      aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
+      @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
         <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu"
+      class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+      role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in selectItems">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400"
+          :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option"
+          @click="clickedOption(item.value)">
           <div class="flex items-center">
             <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
           </div>
-          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+          <span v-if="item.value === selected"
+            class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
             <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
           </span>
         </li>
@@ -29,46 +37,54 @@ export default {
     descending: Boolean
   },
   data() {
+    const bookItems = [
+      {
+        text: 'Title',
+        value: 'media.metadata.title'
+      },
+      {
+        text: 'Author (First Last)',
+        value: 'media.metadata.authorName'
+      },
+      {
+        text: 'Author (Last, First)',
+        value: 'media.metadata.authorNameLF'
+      },
+      {
+        text: 'Published Year',
+        value: 'media.metadata.publishedYear'
+      },
+      {
+        text: 'Added At',
+        value: 'addedAt'
+      },
+      {
+        text: 'Size',
+        value: 'size'
+      },
+      {
+        text: 'Duration',
+        value: 'media.duration'
+      },
+      {
+        text: 'File Birthtime',
+        value: 'birthtimeMs'
+      },
+      {
+        text: 'File Modified',
+        value: 'mtimeMs'
+      }
+    ]
+
+    const seriesItems = [...bookItems, {
+      text: 'Sequence',
+      value: 'sequence'
+    }]
+
     return {
       showMenu: false,
-      bookItems: [
-        {
-          text: 'Title',
-          value: 'media.metadata.title'
-        },
-        {
-          text: 'Author (First Last)',
-          value: 'media.metadata.authorName'
-        },
-        {
-          text: 'Author (Last, First)',
-          value: 'media.metadata.authorNameLF'
-        },
-        {
-          text: 'Published Year',
-          value: 'media.metadata.publishedYear'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        },
-        {
-          text: 'Duration',
-          value: 'media.duration'
-        },
-        {
-          text: 'File Birthtime',
-          value: 'birthtimeMs'
-        },
-        {
-          text: 'File Modified',
-          value: 'mtimeMs'
-        }
-      ],
+      bookItems: bookItems,
+      seriesItems: seriesItems,
       podcastItems: [
         {
           text: 'Title',
@@ -122,8 +138,21 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
     },
     selectItems() {
-      if (this.isPodcast) return this.podcastItems
-      return this.bookItems
+      let items = null
+      if (this.isPodcast) {
+        items = this.podcastItems
+      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
+        items = this.seriesItems
+      } else {
+        items = this.bookItems
+      }
+
+      if (!items.some(i => i.value === this.selected)) {
+        this.selected = items[0].value
+        this.selectedDesc = !this.defaultsToAsc(items[0].value)
+      }
+
+      return items
     },
     selectedText() {
       var _selected = this.selected
@@ -143,12 +172,19 @@ export default {
         this.selectedDesc = !this.selectedDesc
       } else {
         this.selected = val
-        if (val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF') {
-          this.selectedDesc = false
-        }
+        if (this.defaultsToAsc(val)) this.selectedDesc = false
       }
       this.showMenu = false
       this.$nextTick(() => this.$emit('change', val))
+    },
+    defaultsToAsc(val) {
+      return (
+        val == 'media.metadata.title' ||
+        val == 'media.metadata.author' ||
+        val == 'media.metadata.authorName' ||
+        val == 'media.metadata.authorNameLF' ||
+        val == 'sequence'
+      );
     }
   }
 }
diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 0ee05571..c2902931 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -181,7 +181,7 @@ class LibraryController {
 
       if (!(collapsedItems.length == 1 && collapsedItems[0].collapsedSeries)) {
         libraryItems = collapsedItems
-        payload.total = collapsedItems.length
+        payload.total = libraryItems.length
       }
     }
 
@@ -207,8 +207,10 @@ class LibraryController {
         sortKey += 'IgnorePrefix'
       }
 
-      // If series are collapsed and not sorting by title, sort all collapsed series to the end in alphabetical order
-      if (payload.collapseseries && !sortByTitle) {
+      // If series are collapsed and not sorting by title or sequence, 
+      // sort all collapsed series to the end in alphabetical order
+      const sortBySequence = filterSeries && (sortKey === 'sequence')
+      if (payload.collapseseries && !(sortByTitle || sortBySequence)) {
         sortArray.push({
           asc: (li) => {
             if (li.collapsedSeries) {
@@ -222,10 +224,13 @@ class LibraryController {
         })
       }
 
+      // Sort series based on the sortBy attribute
       var direction = payload.sortDesc ? 'desc' : 'asc'
       sortArray.push({
         [direction]: (li) => {
-          if (mediaIsBook && sortByTitle && li.collapsedSeries) {
+          if (mediaIsBook && sortBySequence) {
+            return li.media.metadata.getSeries(filterSeries).sequence
+          } else if (mediaIsBook && sortByTitle && li.collapsedSeries) {
             return this.db.serverSettings.sortingIgnorePrefix ?
               li.collapsedSeries.nameIgnorePrefix :
               li.collapsedSeries.name
@@ -269,24 +274,24 @@ class LibraryController {
         // If collapsing by series and filtering by a series, generate the list of sequences the collapsed
         // series represents in the filtered series
         if (filterSeries) {
-          json.collapsedSeries.seriesSequenceList = li.collapsedSeries.books
-            .map(b => parseFloat(b.filterSeriesSequence))
-            .filter(s => s)
-            .sort((a, b) => a - b)
-            .reduce((ranges, currentSequence) => {
-              let lastRange = ranges.at(-1)
+          json.collapsedSeries.seriesSequenceList =
+            naturalSort(li.collapsedSeries.books.map(b => b.filterSeriesSequence)).asc()
+              .reduce((ranges, currentSequence) => {
+                let lastRange = ranges.at(-1)
+                let isNumber = /^(\d+|\d+\.\d*|\d*\.\d+)$/.test(currentSequence)
+                if (isNumber) currentSequence = parseFloat(currentSequence)
 
-              if (lastRange && ((lastRange.end + 1) == currentSequence)) {
-                lastRange.end = currentSequence
-              }
-              else {
-                ranges.push({ start: currentSequence, end: currentSequence })
-              }
+                if (lastRange && isNumber && lastRange.isNumber && ((lastRange.end + 1) == currentSequence)) {
+                  lastRange.end = currentSequence
+                }
+                else {
+                  ranges.push({ start: currentSequence, end: currentSequence, isNumber: isNaN(currentSequence) })
+                }
 
-              return ranges
-            }, [])
-            .map(r => r.start == r.end ? r.start : `${r.start}-${r.end}`)
-            .join(', ')
+                return ranges
+              }, [])
+              .map(r => r.start == r.end ? r.start : `${r.start}-${r.end}`)
+              .join(', ')
         }
       } else if (filterSeries) {
         // If filtering by series, make sure to include the series metadata

From 24d97d17ba25b5ab943c34952156db8b7a93b529 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 6 Nov 2022 10:55:44 -0600
Subject: [PATCH 5/5] Add collapseBookSeries to default settings

---
 client/store/user.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/store/user.js b/client/store/user.js
index 58652fa5..90f17b2b 100644
--- a/client/store/user.js
+++ b/client/store/user.js
@@ -6,7 +6,8 @@ export const state = () => ({
     filterBy: 'all',
     playbackRate: 1,
     bookshelfCoverSize: 120,
-    collapseSeries: false
+    collapseSeries: false,
+    collapseBookSeries: false
   },
   settingsListeners: [],
   collections: [],