From 090ba90b3782fbc4acbf735abd116038186a6367 Mon Sep 17 00:00:00 2001
From: mfcar <marcosfcar@gmail.com>
Date: Sat, 2 Mar 2024 21:46:08 +0000
Subject: [PATCH 1/5] Add season filter

---
 .../tables/podcast/LazyEpisodesTable.vue      | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index f2c6f34282..de56f84813 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -18,6 +18,7 @@
           <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
         </template>
         <template v-else>
+          <controls-filter-select v-model="seasonKey" :items="seasonItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
           <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
           <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="filterSortChanged" />
           <div class="flex-grow md:hidden" />
@@ -31,6 +32,9 @@
         <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
       </form>
     </div>
+<!--    <div>-->
+<!--      <pre>{{ episodesList }}</pre>-->
+<!--    </div>-->
     <div class="relative min-h-[176px]">
       <template v-for="episode in totalEpisodes">
         <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
@@ -65,6 +69,7 @@ export default {
       episodesCopy: [],
       filterKey: 'incomplete',
       sortKey: 'publishedAt',
+      seasonKey: 'allSeasons',
       sortDesc: true,
       selectedEpisode: null,
       showPodcastRemoveModal: false,
@@ -145,6 +150,28 @@ export default {
         }
       ]
     },
+    seasonItems() {
+      const seasonsSet = this.episodesCopy.reduce((acc, episode) => {
+        if (episode.season) {
+          acc.add(episode.season);
+        }
+        return acc;
+      }, new Set());
+
+      const seasonsArray = Array.from(seasonsSet);
+
+      const seasonItems = seasonsArray.map(season => ({
+        value: season,
+        text: `Season ${season}`
+      }));
+
+      seasonItems.unshift({
+        value: 'allSeasons',
+        text: 'All Seasons'
+      });
+
+      return seasonItems;
+    },
     isSelectionMode() {
       return this.selectedEpisodes.length > 0
     },
@@ -163,6 +190,9 @@ export default {
     episodesSorted() {
       return this.episodesCopy
         .filter((ep) => {
+          // Filter by season
+          if (this.seasonKey !== 'allSeasons' && ep.season !== this.seasonKey) return false
+
           if (this.filterKey === 'all') return true
           const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
           if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished

From 2f97499612fcf651b2e9e052f5805365e298dd43 Mon Sep 17 00:00:00 2001
From: mfcar <marcosfcar@gmail.com>
Date: Sat, 2 Mar 2024 21:55:27 +0000
Subject: [PATCH 2/5] Show the filter control only for the serial podcast type

---
 .../components/tables/podcast/LazyEpisodesTable.vue  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index de56f84813..1f2180fd1b 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -18,7 +18,9 @@
           <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
         </template>
         <template v-else>
-          <controls-filter-select v-model="seasonKey" :items="seasonItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
+          <template v-if="podcastType === 'serial'">
+            <controls-filter-select v-model="seasonKey" :items="seasonItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
+          </template>
           <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
           <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="filterSortChanged" />
           <div class="flex-grow md:hidden" />
@@ -34,6 +36,9 @@
     </div>
 <!--    <div>-->
 <!--      <pre>{{ episodesList }}</pre>-->
+<!--    </div>-->
+<!--    <div>-->
+<!--      <pre>{{ libraryItem }}</pre>-->
 <!--    </div>-->
     <div class="relative min-h-[176px]">
       <template v-for="episode in totalEpisodes">
@@ -184,6 +189,9 @@ export default {
     mediaMetadata() {
       return this.media.metadata || {}
     },
+    podcastType() {
+      return this.mediaMetadata.type || 'episodic'
+    },
     episodes() {
       return this.media.episodes || []
     },
@@ -191,7 +199,7 @@ export default {
       return this.episodesCopy
         .filter((ep) => {
           // Filter by season
-          if (this.seasonKey !== 'allSeasons' && ep.season !== this.seasonKey) return false
+          if (this.podcastType === 'serial' && this.seasonKey !== 'allSeasons' && ep.season !== this.seasonKey) return false
 
           if (this.filterKey === 'all') return true
           const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)

From 0ced0721dbbbbb415375d68b7c9e6b32ea9d8fdb Mon Sep 17 00:00:00 2001
From: mfcar <marcosfcar@gmail.com>
Date: Sun, 3 Mar 2024 00:07:09 +0000
Subject: [PATCH 3/5] Format the season group and add strings

---
 .../tables/podcast/LazyEpisodesTable.vue      | 90 +++++++++++++------
 client/strings/en-us.json                     |  4 +-
 2 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index 1f2180fd1b..055b58c9f2 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -34,18 +34,31 @@
         <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
       </form>
     </div>
-<!--    <div>-->
-<!--      <pre>{{ episodesList }}</pre>-->
-<!--    </div>-->
-<!--    <div>-->
-<!--      <pre>{{ libraryItem }}</pre>-->
-<!--    </div>-->
     <div class="relative min-h-[176px]">
-      <template v-for="episode in totalEpisodes">
-        <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
-          <!-- episode is mounted here -->
-        </div>
+      <template v-if="podcastType === 'serial'">
+        <template v-for="group in groupedEpisodesBySeason">
+          <div class="w-full my-2">
+            <div class="w-full bg-primary px-6 py-2 flex items-center">
+              <p class="pr-4">{{ $strings.LabelSeason }} {{ group.season }}</p>
+              <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ group.episodes.length }}</span>
+              <div class="flex-grow" />
+            </div>
+          <template v-for="episode in group.episodes">
+            <div :key="episode" :id="`episode-${episode}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
+              <!-- episode is mounted here -->
+            </div>
+          </template>
+          </div>
+        </template>
+      </template>
+      <template v-else>
+          <template v-for="episode in totalEpisodes">
+            <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
+              <!-- episode is mounted here -->
+            </div>
+          </template>
       </template>
+
       <div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }">
         <ui-loading-indicator />
       </div>
@@ -156,26 +169,22 @@ export default {
       ]
     },
     seasonItems() {
-      const seasonsSet = this.episodesCopy.reduce((acc, episode) => {
-        if (episode.season) {
-          acc.add(episode.season);
-        }
-        return acc;
-      }, new Set());
-
-      const seasonsArray = Array.from(seasonsSet);
+      const seasonsMap = new Map();
+      seasonsMap.set('allSeasons', this.$strings.LabelAllSeasons);
 
-      const seasonItems = seasonsArray.map(season => ({
-        value: season,
-        text: `Season ${season}`
-      }));
-
-      seasonItems.unshift({
-        value: 'allSeasons',
-        text: 'All Seasons'
+      this.episodesCopy.forEach((episode) => {
+        const season = episode.season || 'unknown';
+        if (!seasonsMap.has(season)) {
+          seasonsMap.set(season, `${this.$strings.LabelSeason} ${season}`);
+        }
       });
 
-      return seasonItems;
+      if (seasonsMap.has('unknown')) {
+        seasonsMap.delete('unknown');
+        seasonsMap.set('unknown', this.$strings.LabelSeasonUnknown);
+      }
+
+      return Array.from(seasonsMap, ([value, text]) => ({ value, text }));
     },
     isSelectionMode() {
       return this.selectedEpisodes.length > 0
@@ -199,9 +208,11 @@ export default {
       return this.episodesCopy
         .filter((ep) => {
           // Filter by season
-          if (this.podcastType === 'serial' && this.seasonKey !== 'allSeasons' && ep.season !== this.seasonKey) return false
+          const season = ep.season && ep.season.trim() !== '' ? ep.season : 'unknown';
+          if (this.podcastType === 'serial' && this.seasonKey === 'unknown' && season !== 'unknown') return false;
+          if (this.podcastType === 'serial' && this.seasonKey !== 'allSeasons' && season !== this.seasonKey) return false;
 
-          if (this.filterKey === 'all') return true
+          if (this.filterKey === 'all') return true;
           const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
           if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
           if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
@@ -247,6 +258,27 @@ export default {
     },
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
+    },
+    groupedEpisodesBySeason() {
+      if (this.podcastType !== 'serial') {
+        return [];
+      }
+
+      return this.episodesList.reduce((grouped, episode, index) => {
+        let season = episode.season || 'unknown';
+        const seasonGroup = grouped.find(group => group.season === season);
+
+        if (!seasonGroup) {
+          grouped.push({
+            season,
+            episodes: [index]
+          });
+        } else {
+          seasonGroup.episodes.push(index);
+        }
+
+        return grouped;
+      }, []).sort((a, b) => b.season - a.season);
     }
   },
   methods: {
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 2465f87372..2d5fa0dfbb 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -200,6 +200,7 @@
   "LabelAddToPlaylistBatch": "Add {0} Items to Playlist",
   "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "All",
+  "LabelAllSeasons": "All Seasons",
   "LabelAllUsers": "All Users",
   "LabelAllUsersExcludingGuests": "All users excluding guests",
   "LabelAllUsersIncludingGuests": "All users including guests",
@@ -436,6 +437,7 @@
   "LabelSearchTitle": "Search Title",
   "LabelSearchTitleOrASIN": "Search Title or ASIN",
   "LabelSeason": "Season",
+  "LabelSeasonUnknown": "Season Unknown",
   "LabelSelectAllEpisodes": "Select all episodes",
   "LabelSelectEpisodesShowing": "Select {0} episodes showing",
   "LabelSelectUsers": "Select users",
@@ -776,4 +778,4 @@
   "ToastSocketFailedToConnect": "Socket failed to connect",
   "ToastUserDeleteFailed": "Failed to delete user",
   "ToastUserDeleteSuccess": "User deleted"
-}
\ No newline at end of file
+}

From a4d3dfa9b2fe17f7fc4b0fb9754fe45484ffe51c Mon Sep 17 00:00:00 2001
From: mfcar <marcosfcar@gmail.com>
Date: Sun, 3 Mar 2024 22:48:53 +0000
Subject: [PATCH 4/5] Add expand/collapse option

---
 .../tables/podcast/LazyEpisodesTable.vue      | 68 +++++++++++++------
 1 file changed, 47 insertions(+), 21 deletions(-)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index 055b58c9f2..9e654f5933 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -36,18 +36,25 @@
     </div>
     <div class="relative min-h-[176px]">
       <template v-if="podcastType === 'serial'">
-        <template v-for="group in groupedEpisodesBySeason">
+        <template v-for="group in seasonGroups">
           <div class="w-full my-2">
-            <div class="w-full bg-primary px-6 py-2 flex items-center">
+            <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar(group)">
               <p class="pr-4">{{ $strings.LabelSeason }} {{ group.season }}</p>
               <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ group.episodes.length }}</span>
               <div class="flex-grow" />
+              <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="group.showSeason ? 'transform rotate-180' : ''">
+                <span class="material-icons text-4xl">expand_more</span>
+              </div>
             </div>
-          <template v-for="episode in group.episodes">
-            <div :key="episode" :id="`episode-${episode}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
-              <!-- episode is mounted here -->
-            </div>
-          </template>
+            <transition name="slide">
+              <div class="w-full" v-if="group.showSeason">
+                <template v-for="episode in group.episodes">
+                  <div :key="episode" :id="`episode-${episode}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
+                    <!-- episode is mounted here -->
+                  </div>
+                </template>
+              </div>
+            </transition>
           </div>
         </template>
       </template>
@@ -104,7 +111,8 @@ export default {
       episodeComponentRefs: {},
       windowHeight: 0,
       episodesTableOffsetTop: 0,
-      episodeRowHeight: 176
+      episodeRowHeight: 176,
+      seasonGroups: {}
     }
   },
   watch: {
@@ -112,6 +120,9 @@ export default {
       handler() {
         this.refresh()
       }
+    },
+    episodesList() {
+      this.updateSeasonGroups();
     }
   },
   computed: {
@@ -259,29 +270,41 @@ export default {
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
     },
-    groupedEpisodesBySeason() {
-      if (this.podcastType !== 'serial') {
-        return [];
+  },
+  methods: {
+    updateSeasonGroups() {
+      if (!this.episodesSorted.length) {
+        this.seasonGroups = {};
+        return;
       }
 
-      return this.episodesList.reduce((grouped, episode, index) => {
-        let season = episode.season || 'unknown';
-        const seasonGroup = grouped.find(group => group.season === season);
+      const grouped = this.episodesSorted.reduce((grouped, episode, index) => {
+        let season = Number(episode.season);
+        season = Number.isInteger(season) ? season : 'unknown';
+        const seasonGroup = grouped[season];
 
         if (!seasonGroup) {
-          grouped.push({
+          const newGroup = {
             season,
-            episodes: [index]
-          });
+            episodes: [index],
+            showSeason: false
+          };
+          grouped[season] = newGroup;
         } else {
           seasonGroup.episodes.push(index);
         }
 
         return grouped;
-      }, []).sort((a, b) => b.season - a.season);
-    }
-  },
-  methods: {
+      }, {});
+
+      const sortedGrouped = Object.values(grouped).sort((a, b) => b.season - a.season);
+
+      if (sortedGrouped.length > 0) {
+        sortedGrouped[0].showSeason = true;
+      }
+
+      this.seasonGroups = sortedGrouped;
+    },
     submit() {},
     inputUpdate() {
       clearTimeout(this.searchTimeout)
@@ -479,6 +502,9 @@ export default {
       this.episodeComponentRefs = {}
       this.episodeIndexesMounted = []
     },
+    clickBar(group) {
+      group.showSeason = !group.showSeason
+    },
     mountEpisode(index) {
       const episodeEl = document.getElementById(`episode-${index}`)
       if (!episodeEl) {

From 6f58f3fd2c68993144f63a1954260bf60365ff01 Mon Sep 17 00:00:00 2001
From: mfcar <marcosfcar@gmail.com>
Date: Wed, 6 Mar 2024 15:59:22 +0000
Subject: [PATCH 5/5] Add episodesSorted watch item

---
 client/components/tables/podcast/LazyEpisodesTable.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index 9e654f5933..766be20712 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -123,6 +123,9 @@ export default {
     },
     episodesList() {
       this.updateSeasonGroups();
+    },
+    episodesSorted() {
+      this.updateSeasonGroups();
     }
   },
   computed: {