From 3fa4e754a1b27bcce56912ca4a3008e51375ade7 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Wed, 15 Jan 2025 00:56:19 +0000
Subject: [PATCH 01/11] Add strings for LabelSeriesDescription and
 LabelEditSeries

---
 client/strings/en-us.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 61478bb2..57075c8a 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -309,6 +309,7 @@
   "LabelEbook": "Ebook",
   "LabelEbooks": "Ebooks",
   "LabelEdit": "Edit",
+  "LabelEditSeries": "Edit Series",
   "LabelEmail": "Email",
   "LabelEmailSettingsFromAddress": "From Address",
   "LabelEmailSettingsRejectUnauthorized": "Reject unauthorized certificates",
@@ -540,6 +541,7 @@
   "LabelSequence": "Sequence",
   "LabelSerial": "Serial",
   "LabelSeries": "Series",
+  "LabelSeriesDescription": "Series Description",
   "LabelSeriesName": "Series Name",
   "LabelSeriesProgress": "Series Progress",
   "LabelServerLogLevel": "Server Log Level",

From 9ba79d4c02ded3849dd18394e02ecb07cbbd4262 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Wed, 15 Jan 2025 00:56:35 +0000
Subject: [PATCH 02/11] Add EditSeriesModal

---
 client/components/modals/EditSeriesModal.vue | 65 ++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 client/components/modals/EditSeriesModal.vue

diff --git a/client/components/modals/EditSeriesModal.vue b/client/components/modals/EditSeriesModal.vue
new file mode 100644
index 00000000..0706adcf
--- /dev/null
+++ b/client/components/modals/EditSeriesModal.vue
@@ -0,0 +1,65 @@
+<template>
+  <modals-modal v-model="show" name="edit-series" :processing="isProcessing" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh; min-height: 40vh">
+      <h3 class="text-xl font-semibold mb-8">{{ $strings.LabelEditSeries }}</h3>
+      <div class="flex items-center mb-4">
+        <ui-textarea-with-label v-model="descriptionValue" :label="$strings.LabelSeriesDescription" :rows="8" />
+      </div>
+      <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
+        <div class="flex items-center px-4">
+          <div class="flex-grow" />
+
+          <!-- desktop -->
+          <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+          <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+          <!-- mobile -->
+          <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    series: Object
+  },
+  data() {
+    return {
+      isProcessing: false,
+      descriptionValue: ''
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    async save() {
+      if (this.isProcessing) {
+        return null
+      }
+
+      const payload = {
+        description: this.descriptionValue
+      }
+
+      this.isProcessing = true
+      // Handle series update
+      this.isProcessing = false
+    },
+    async saveAndClose() {
+      const wasUpdated = await this.save()
+      if (wasUpdated !== null) this.show = false
+    }
+  }
+}
+</script>

From 50fd8a3b2b039aa8bdf06e8b6265bb7ed59b487f Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Wed, 15 Jan 2025 00:57:24 +0000
Subject: [PATCH 03/11] Add EditSeriesModal to Series context menu

---
 client/components/app/BookShelfToolbar.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 74157b18..5e667290 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -63,6 +63,8 @@
         </ui-tooltip>
 
         <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
+
+        <modals-edit-series-modal v-model="showEditSeriesModal" :series="this.selectedSeries" />
       </template>
       <!-- library & collections page -->
       <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
@@ -131,7 +133,8 @@ export default {
       totalEntities: 0,
       processingSeries: false,
       processingIssues: false,
-      processingAuthors: false
+      processingAuthors: false,
+      showEditSeriesModal: false
     }
   },
   computed: {
@@ -139,6 +142,10 @@ export default {
       if (!this.selectedSeries) return []
 
       const items = [
+        {
+          text: this.$strings.LabelEditSeries,
+          action: 'edit-series'
+        },
         {
           text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
           action: 'mark-series-finished'
@@ -440,6 +447,9 @@ export default {
     exportOPML() {
       this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
     },
+    showEditSeries() {
+      this.showEditSeriesModal = !this.showEditSeriesModal
+    },
     seriesContextMenuAction({ action }) {
       if (action === 'open-rss-feed') {
         this.showOpenSeriesRSSFeed()
@@ -455,6 +465,8 @@ export default {
           return
         }
         this.markSeriesFinished()
+      } else if ((action = 'edit-series')) {
+        this.showEditSeries()
       } else if (this.handleSubtitlesAction(action)) {
         return
       } else if (this.handleCollapseSubSeriesAction(action)) {

From 109c996c245ec4b7bec5cdf1b6a15396bc13e337 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Thu, 6 Feb 2025 20:16:17 +0000
Subject: [PATCH 04/11] Remove EditSeries modal from BookShelfToolbar

---
 client/components/app/BookShelfToolbar.vue | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 5e667290..74157b18 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -63,8 +63,6 @@
         </ui-tooltip>
 
         <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
-
-        <modals-edit-series-modal v-model="showEditSeriesModal" :series="this.selectedSeries" />
       </template>
       <!-- library & collections page -->
       <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
@@ -133,8 +131,7 @@ export default {
       totalEntities: 0,
       processingSeries: false,
       processingIssues: false,
-      processingAuthors: false,
-      showEditSeriesModal: false
+      processingAuthors: false
     }
   },
   computed: {
@@ -142,10 +139,6 @@ export default {
       if (!this.selectedSeries) return []
 
       const items = [
-        {
-          text: this.$strings.LabelEditSeries,
-          action: 'edit-series'
-        },
         {
           text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
           action: 'mark-series-finished'
@@ -447,9 +440,6 @@ export default {
     exportOPML() {
       this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
     },
-    showEditSeries() {
-      this.showEditSeriesModal = !this.showEditSeriesModal
-    },
     seriesContextMenuAction({ action }) {
       if (action === 'open-rss-feed') {
         this.showOpenSeriesRSSFeed()
@@ -465,8 +455,6 @@ export default {
           return
         }
         this.markSeriesFinished()
-      } else if ((action = 'edit-series')) {
-        this.showEditSeries()
       } else if (this.handleSubtitlesAction(action)) {
         return
       } else if (this.handleCollapseSubSeriesAction(action)) {

From c5afea107490914c3604f2395aad575e8431ec23 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Fri, 7 Feb 2025 01:29:08 +0000
Subject: [PATCH 05/11] Adjust Series page UI spacing and add EditSeriesModal
 and button

---
 client/pages/library/_library/series/_id.vue | 33 +++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index 865648f8..ce1f3a50 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -1,7 +1,18 @@
 <template>
-  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar :selected-series="series" />
-    <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
+  <div id="page-wrapper" class="page" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar id="series-toolbar" :selected-series="series" />
+    <div class="max-w-6xl mx-auto">
+      <div class="flex items-center my-8">
+        <h1 class="text-2xl">{{ series.name }}</h1>
+
+        <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
+          <span class="material-symbols text-base">edit</span>
+        </button>
+      </div>
+      <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
+    </div>
+
+    <modals-edit-series-modal v-model="showEditSeriesModal" :series="series" />
   </div>
 </template>
 
@@ -33,7 +44,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      showEditSeriesModal: false
+    }
   },
   computed: {
     streamLibraryItem() {
@@ -43,6 +56,9 @@ export default {
   methods: {
     seriesUpdated(series) {
       this.series = series
+    },
+    showEditSeries() {
+      this.showEditSeriesModal = !this.showEditSeriesModal
     }
   },
   mounted() {
@@ -57,3 +73,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+#bookshelf {
+  background-image: none;
+}
+#series-toolbar {
+  background-color: rgba(55, 56, 56, 1);
+}
+</style>

From 0e83f1f8574f93c213ce7c46bebea79754f19a09 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Sat, 8 Feb 2025 01:01:27 +0000
Subject: [PATCH 06/11] Add Series description to series page

---
 client/pages/library/_library/series/_id.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index ce1f3a50..d5ca689d 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -9,6 +9,12 @@
           <span class="material-symbols text-base">edit</span>
         </button>
       </div>
+      <div class="mb-6">
+        <h2 class="font-semibold">
+          {{ $strings.LabelDescription }}
+        </h2>
+        <div>{{ series.description }}</div>
+      </div>
       <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
     </div>
 

From 60e6e2278a038b8422711581bf41208e7ca2433e Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Sat, 8 Feb 2025 01:01:48 +0000
Subject: [PATCH 07/11] Update Series description from EditSeriesModal

---
 client/components/modals/EditSeriesModal.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/components/modals/EditSeriesModal.vue b/client/components/modals/EditSeriesModal.vue
index 0706adcf..25f0fbdb 100644
--- a/client/components/modals/EditSeriesModal.vue
+++ b/client/components/modals/EditSeriesModal.vue
@@ -29,7 +29,7 @@ export default {
   data() {
     return {
       isProcessing: false,
-      descriptionValue: ''
+      descriptionValue: this.series.description || ''
     }
   },
   computed: {
@@ -53,7 +53,10 @@ export default {
       }
 
       this.isProcessing = true
-      // Handle series update
+      const updateResult = await this.$axios.$patch(`/api/series/${this.series.id}`, payload).catch((error) => {
+        console.error('Failed to update', error)
+        return false
+      })
       this.isProcessing = false
     },
     async saveAndClose() {

From 19641c3e4b917ba62db3ae291bc20ba75cdfd8e0 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Thu, 13 Feb 2025 02:31:40 +0000
Subject: [PATCH 08/11] Add padding to Series page metadata

---
 client/pages/library/_library/series/_id.vue | 25 +++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index d5ca689d..6c0e6085 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -2,19 +2,22 @@
   <div id="page-wrapper" class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar id="series-toolbar" :selected-series="series" />
     <div class="max-w-6xl mx-auto">
-      <div class="flex items-center my-8">
-        <h1 class="text-2xl">{{ series.name }}</h1>
+      <div class="px-4e sm:px-8e">
+        <div class="flex items-center my-8">
+          <h1 class="text-2xl">{{ series.name }}</h1>
 
-        <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
-          <span class="material-symbols text-base">edit</span>
-        </button>
-      </div>
-      <div class="mb-6">
-        <h2 class="font-semibold">
-          {{ $strings.LabelDescription }}
-        </h2>
-        <div>{{ series.description }}</div>
+          <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
+            <span class="material-symbols text-base">edit</span>
+          </button>
+        </div>
+        <div class="mb-6">
+          <h2 class="font-semibold">
+            {{ $strings.LabelDescription }}
+          </h2>
+          <div>{{ series.description }}</div>
+        </div>
       </div>
+
       <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
     </div>
 

From fa6657776c9fd276c4575d44a80ed2ea031c316e Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Mon, 17 Feb 2025 21:11:05 +0000
Subject: [PATCH 09/11] Fix series page scrollbar, add bottom padding

---
 client/pages/library/_library/series/_id.vue | 32 +++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index 6c0e6085..4f9de150 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -1,24 +1,26 @@
 <template>
   <div id="page-wrapper" class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar id="series-toolbar" :selected-series="series" />
-    <div class="max-w-6xl mx-auto">
-      <div class="px-4e sm:px-8e">
-        <div class="flex items-center my-8">
-          <h1 class="text-2xl">{{ series.name }}</h1>
+    <div class="h-full overflow-y-auto pb-[100px]">
+      <div class="max-w-6xl mx-auto">
+        <div class="px-4e sm:px-8e">
+          <div class="flex items-center my-8">
+            <h1 class="text-2xl">{{ series.name }}</h1>
 
-          <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
-            <span class="material-symbols text-base">edit</span>
-          </button>
-        </div>
-        <div class="mb-6">
-          <h2 class="font-semibold">
-            {{ $strings.LabelDescription }}
-          </h2>
-          <div>{{ series.description }}</div>
+            <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
+              <span class="material-symbols text-base">edit</span>
+            </button>
+          </div>
+          <div class="mb-6">
+            <h2 class="font-semibold">
+              {{ $strings.LabelDescription }}
+            </h2>
+            <div>{{ series.description }}</div>
+          </div>
         </div>
+
+        <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
       </div>
-
-      <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
     </div>
 
     <modals-edit-series-modal v-model="showEditSeriesModal" :series="series" />

From 1dcc542288b7542b640ef8ffb1f2a97315ca9de6 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Tue, 18 Feb 2025 01:23:22 +0000
Subject: [PATCH 10/11] Add expanded option to GET Library series route

---
 server/controllers/LibraryController.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 0ece483f..2e2c3306 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -767,12 +767,16 @@ class LibraryController {
       .map((v) => v.trim().toLowerCase())
       .filter((v) => !!v)
 
-    const series = await Database.seriesModel.findByPk(req.params.seriesId)
+    const series = req.query.expanded ? await Database.seriesModel.getExpandedById(req.params.seriesId) : await Database.seriesModel.findByPk(req.params.seriesId)
     if (!series) return res.sendStatus(404)
 
     const libraryItemsInSeries = await libraryItemsBookFilters.getLibraryItemsForSeries(series, req.user)
 
     const seriesJson = series.toOldJSON()
+    if (req.query.expanded) {
+      seriesJson.books = series.books
+    }
+
     if (include.includes('progress')) {
       const libraryItemsFinished = libraryItemsInSeries.filter((li) => !!req.user.getMediaProgress(li.media.id)?.isFinished)
       seriesJson.progress = {

From 8aef2b78cd5127fe6ce0d4a61b12f7bf0edf53ff Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Tue, 18 Feb 2025 01:23:44 +0000
Subject: [PATCH 11/11] Add authors and total series duration

---
 client/pages/library/_library/series/_id.vue | 28 +++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index 4f9de150..a465d486 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -17,6 +17,16 @@
             </h2>
             <div>{{ series.description }}</div>
           </div>
+          <div class="mb-6">
+            <h2 class="font-semibold">
+              {{ authors.length > 1 ? $strings.LabelAuthors : $strings.LabelAuthor }}
+            </h2>
+            <div>{{ authors.join(', ') }}</div>
+          </div>
+          <div class="mb-6">
+            <h2 class="font-semibold">{{ this.$strings.LabelTotalDuration }}</h2>
+            <div>{{ totalDuration.hours }}<span>hrs</span> {{ totalDuration.minutes }}<span>min</span></div>
+          </div>
         </div>
 
         <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
@@ -41,7 +51,7 @@ export default {
       return redirect(`/library/${libraryId}`)
     }
 
-    const series = await app.$axios.$get(`/api/libraries/${library.id}/series/${params.id}?include=progress,rssfeed`).catch((error) => {
+    const series = await app.$axios.$get(`/api/libraries/${library.id}/series/${params.id}?include=progress,rssfeed&expanded=1`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -62,6 +72,22 @@ export default {
   computed: {
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
+    },
+    totalDuration() {
+      const totalSeconds = this.series.books.reduce((acc, book) => acc + book.duration, 0)
+      const hours = Math.floor(totalSeconds / 3600)
+      const minuteRemainder = totalSeconds % 3600
+      const minutes = Math.floor(minuteRemainder / 60)
+
+      return { hours, minutes }
+    },
+    authors() {
+      // Get nested array of authors
+      const nestedAuthors = this.series.books.map((book) => book.authors.map((author) => author.name))
+      // Flatten to one array
+      const authors = nestedAuthors.flat(1)
+      // Remove duplicates
+      return [...new Set(authors)]
     }
   },
   methods: {