Update podcast episode queue order

client/components/cards/LazyBookCard.vue

@@ -672,24 +672,29 @@ export default {
 
         if (fullLibraryItem && fullLibraryItem.media.episodes) {
           const episodes = fullLibraryItem.media.episodes || []
-          episodes.sort((a, b) => b.publishedAt - a.publishedAt)
+          // Sort from least recent to most recent
+          episodes.sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+
           const episodeIndex = episodes.findIndex((ep) => ep.id === this.recentEpisode.id)
           if (episodeIndex >= 0) {
             for (let i = episodeIndex; i < episodes.length; i++) {
               const episode = episodes[i]
-              const audioFile = episode.audioFile
+              const podcastProgress = this.store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+              if (!podcastProgress || !podcastProgress.isFinished) {
                 queueItems.push({
                   libraryItemId: this.libraryItemId,
                   episodeId: episode.id,
                   title: episode.title,
                   subtitle: this.mediaMetadata.title,
-                duration: audioFile.duration || null,
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  duration: episode.audioFile.duration || null,
                   coverPath: this.media.coverPath || null
                 })
               }
             }
           }
         }
+      }
 
       eventBus.$emit('play-item', {
         libraryItemId: this.libraryItemId,

client/components/modals/player/QueueItemRow.vue

@@ -3,7 +3,8 @@
     <covers-preview-cover :src="coverUrl" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
     <div class="flex-grow px-2 py-1 queue-item-row-content truncate">
       <p class="text-gray-200 text-sm truncate">{{ title }}</p>
-      <p class="text-gray-400 text-sm">{{ subtitle }}</p>
+      <p class="text-gray-300 text-sm">{{ subtitle }}</p>
+      <p v-if="caption" class="text-gray-400 text-xs">{{ caption }}</p>
     </div>
     <div class="w-28">
       <p v-if="isOpenInPlayer" class="text-sm text-right text-gray-400">Streaming</p>
@@ -41,6 +42,9 @@ export default {
     subtitle() {
       return this.item.subtitle || ''
     },
+    caption() {
+      return this.item.caption
+    },
     libraryItemId() {
       return this.item.libraryItemId
     },

client/components/tables/podcast/EpisodesTable.vue

@@ -128,19 +128,24 @@ export default {
     },
     playEpisode(episode) {
       const queueItems = []
-      const episodeIndex = this.episodes.findIndex((e) => e.id === episode.id)
+
-      for (let i = episodeIndex; i < this.episodes.length; i++) {
+      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
-        const episode = this.episodes[i]
+      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
-        const audioFile = episode.audioFile
+      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
+        const episode = episodesInListeningOrder[i]
+        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        if (!podcastProgress || !podcastProgress.isFinished) {
           queueItems.push({
             libraryItemId: this.libraryItem.id,
             episodeId: episode.id,
             title: episode.title,
             subtitle: this.mediaMetadata.title,
-          duration: audioFile.duration || null,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            duration: episode.audioFile.duration || null,
             coverPath: this.media.coverPath || null
           })
         }
+      }
 
       this.$eventBus.$emit('play-item', {
         libraryItemId: this.libraryItem.id,

client/pages/item/_id/index.vue

@@ -519,27 +519,33 @@ export default {
       var episodeId = null
       const queueItems = []
       if (this.isPodcast) {
-        var episodeIndex = this.podcastEpisodes.findIndex((ep) => {
+        const episodesInListeningOrder = this.podcastEpisodes.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+
+        // Find most recent episode unplayed
+        var episodeIndex = episodesInListeningOrder.findLastIndex((ep) => {
           var podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, ep.id)
           return !podcastProgress || !podcastProgress.isFinished
         })
         if (episodeIndex < 0) episodeIndex = 0
 
-        episodeId = this.podcastEpisodes[episodeIndex].id
+        episodeId = episodesInListeningOrder[episodeIndex].id
 
-        for (let i = episodeIndex; i < this.podcastEpisodes.length; i++) {
+        for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
-          const episode = this.podcastEpisodes[i]
+          const episode = episodesInListeningOrder[i]
-          const audioFile = episode.audioFile
+          const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+          if (!podcastProgress || !podcastProgress.isFinished) {
             queueItems.push({
               libraryItemId: this.libraryItemId,
               episodeId: episode.id,
               title: episode.title,
               subtitle: this.title,
-            duration: audioFile.duration || null,
+              caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+              duration: episode.audioFile.duration || null,
               coverPath: this.libraryItem.media.coverPath || null
             })
           }
         }
+      }
 
       this.$eventBus.$emit('play-item', {
         libraryItemId: this.libraryItem.id,