Add:Podcasts latest episodes page

.gitignore

@@ -11,7 +11,6 @@ test/
 /client/.nuxt/
 /client/dist/
 /dist/
-library/
 
 sw.*
 .DS_STORE

client/components/app/BookShelfToolbar.vue

@@ -18,7 +18,7 @@
       </nuxt-link>
     </div>
     <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
-      <template v-if="page !== 'search' && page !== 'podcast-search' && !isHome">
+      <template v-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
         <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
         <div v-else class="items-center hidden md:flex w-full">
           <p class="pl-4 font-book text-lg">

client/components/app/SideRail.vue

@@ -14,6 +14,14 @@
       <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons">format_list_bulleted</span>
+
+      <p class="font-book pt-1" style="font-size: 0.9rem">Latest</p>
+
+      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -80,7 +88,7 @@
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>
 
-    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version"/>
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
   </div>
 </template>
 
@@ -123,6 +131,9 @@ export default {
     isPodcastSearchPage() {
       return this.$route.name === 'library-library-podcast-search'
     },
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
+    },
     homePage() {
       return this.$route.name === 'library-library'
     },
@@ -165,9 +176,9 @@ export default {
     }
   },
   methods: {
-    clickChangelog(){
+    clickChangelog() {
       this.showChangelogModal = true
-    } 
+    }
   },
   mounted() {}
 }

client/pages/library/_library/podcast/latest.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar page="recent-episodes" />
+
+    <div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
+      <div class="w-full max-w-3xl mx-auto py-4">
+        <p class="text-xl mb-2 font-semibold">Latest episodes</p>
+        <p v-if="!recentEpisodes.length && !processing" class="text-center text-xl">No podcasts found</p>
+        <template v-for="(episode, index) in episodesMapped">
+          <div :key="episode.id" class="flex py-5 cursor-pointer relative" @click.stop="clickEpisode(episode)">
+            <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId)" :width="96" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
+            <div class="flex-grow pl-4 max-w-2xl">
+              <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
+
+              <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
+
+              <p class="font-semibold mb-2">{{ episode.title }}</p>
+
+              <p class="text-sm text-gray-200 mb-4">{{ episode.subtitle }}</p>
+
+              <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">
+                <span v-if="episodeIdStreaming === episode.id" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+                <span v-else class="material-icons text-success">play_arrow</span>
+                <p class="pl-2 pr-1 text-sm font-semibold">{{ getButtonText(episode) }}</p>
+              </button>
+            </div>
+
+             <div v-if="episode.progress" class="absolute bottom-0 left-0 h-0.5 pointer-events-none bg-warning" :style="{ width: episode.progress.progress * 100 + '%' }" />
+          </div>
+          <div :key="index" v-if="index !== recentEpisodes.length" class="w-full h-px bg-white bg-opacity-10" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, query, store, app, redirect }) {
+    var libraryId = params.library
+    var libraryData = await store.dispatch('libraries/fetch', libraryId)
+    if (!libraryData) {
+      return redirect('/oops?message=Library not found')
+    }
+
+    // Redirect book libraries
+    const library = libraryData.library
+    if (library.mediaType === 'book') {
+      return redirect(`/library/${libraryId}`)
+    }
+
+    return {
+      libraryId
+    }
+  },
+  data() {
+    return {
+      recentEpisodes: [],
+      totalEpisodes: 0,
+      currentPage: 0,
+      processing: false,
+      openingItem: false
+    }
+  },
+  computed: {
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    libraryItemIdStreaming() {
+      return this.$store.getters['getLibraryItemIdStreaming']
+    },
+    episodeIdStreaming() {
+      return this.$store.state.streamEpisodeId
+    },
+    streamIsPlaying() {
+      return this.$store.state.streamIsPlaying
+    },
+    episodesMapped() {
+      return this.recentEpisodes.map((ep) => {
+        return {
+          ...ep,
+          progress: this.$store.getters['user/getUserMediaProgress'](ep.libraryItemId, ep.id)
+        }
+      })
+    }
+  },
+  methods: {
+    async clickEpisode(episode) {
+      if (this.openingItem) return
+      this.openingItem = true
+      const fullLibraryItem = await this.$axios.$get(`/api/items/${episode.libraryItemId}`).catch((error) => {
+        var errMsg = error.response ? error.response.data || '' : ''
+        this.$toast.error(errMsg || 'Failed to get library item')
+        return null
+      })
+      this.openingItem = false
+      if (!fullLibraryItem) return
+
+      this.$store.commit('setSelectedLibraryItem', fullLibraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
+    },
+    getButtonText(episode) {
+      if (this.episodeIdStreaming === episode.id) return this.streamIsPlaying ? 'Streaming' : 'Play'
+      if (!episode.progress) return this.$elapsedPretty(episode.duration)
+      if (episode.progress.isFinished) return 'Finished'
+      var remaining = Math.floor(episode.progress.duration - episode.progress.currentTime)
+      return `${this.$elapsedPretty(remaining)} left`
+    },
+    playClick(episodeToPlay) {
+      if (episodeToPlay.id === this.episodeIdStreaming && this.streamIsPlaying) {
+        return this.$eventBus.$emit('pause-item')
+      }
+
+      // Queue up more recent items
+      const queueItems = []
+      const episodeIndex = this.episodesMapped.findIndex((e) => e.id === episodeToPlay.id)
+      const indexFromBack = this.episodesMapped.length - episodeIndex - 1
+      for (let i = this.episodesMapped.length - 1 - indexFromBack; i >= 0; i--) {
+        const episode = this.episodesMapped[i]
+        if (!episode.progress || !episode.isFinished) {
+          queueItems.push({
+            libraryItemId: episode.libraryItemId,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: episode.podcast.metadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            duration: episode.duration || null,
+            coverPath: episode.podcast.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: episodeToPlay.libraryItemId,
+        episodeId: episodeToPlay.id,
+        queueItems
+      })
+    },
+    async loadRecentEpisodes(page = 0) {
+      this.processing = true
+      const episodePayload = await this.$axios.$get(`/api/libraries/${this.libraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
+        console.error('Failed to get recent episodes', error)
+        this.$toast.error('Failed to get recent episodes')
+        return null
+      })
+      this.processing = false
+      console.log('Episodes', episodePayload)
+      this.recentEpisodes = episodePayload.episodes || []
+      this.totalEpisodes = episodePayload.total
+      this.currentPage = page
+    }
+  },
+  mounted() {
+    this.loadRecentEpisodes()
+  }
+}
+</script>

client/pages/library/_library/podcast/search.vue

@@ -2,7 +2,7 @@
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar page="podcast-search" />
 
-    <div class="w-full h-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
+    <div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
       <div class="w-full max-w-4xl mx-auto flex">
         <form @submit.prevent="submit" class="flex flex-grow">
           <ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2 text-sm md:text-base" />

server/Server.js

@@ -226,6 +226,8 @@ class Server {
       '/library/:library/bookshelf/:id?',
       '/library/:library/authors',
       '/library/:library/series/:id?',
+      '/library/:library/podcast/search',
+      '/library/:library/podcast/latest',
       '/config/users/:id',
       '/config/users/:id/sessions',
       '/collection/:id'

server/controllers/LibraryController.js

@@ -517,6 +517,11 @@ class LibraryController {
       const unfinishedEpisodes = libraryItem.media.episodes.filter(ep => {
         const userProgress = req.user.getMediaProgress(libraryItem.id, ep.id)
         return !userProgress || !userProgress.isFinished
+      }).map(_ep => {
+        const ep = _ep.toJSONExpanded()
+        ep.podcast = libraryItem.media.toJSONMinified()
+        ep.libraryItemId = libraryItem.id
+        return ep
       })
       allUnfinishedEpisodes.push(...unfinishedEpisodes)
     }