Add playing podcast episodes, episode progress, podcast page, podcast home page shelves

client/components/app/BookListRow.vue

@@ -151,7 +151,9 @@ export default {
       this.$store.commit('showEditModalOnTab', { libraryItem: this.book, tab: 'download' })
     },
     startStream() {
-      this.$eventBus.$emit('play-item', this.book.id)
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.book.id
+      })
     },
     editClick() {
       this.$emit('edit', this.book)

client/components/app/BookShelfCategorized.vue

@@ -167,7 +167,7 @@ export default {
     libraryItemUpdated(libraryItem) {
       console.log('libraryItem updated', libraryItem)
       this.shelves.forEach((shelf) => {
-        if (shelf.type === 'books') {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
           shelf.entities = shelf.entities.map((ent) => {
             if (ent.id === libraryItem.id) {
               return libraryItem
@@ -186,7 +186,7 @@ export default {
     },
     removeBookFromShelf(libraryItem) {
       this.shelves.forEach((shelf) => {
-        if (shelf.type === 'books') {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
           shelf.entities = shelf.entities.filter((ent) => {
             return ent.id !== libraryItem.id
           })

client/components/app/BookShelfRow.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <div ref="shelf" class="w-full max-w-full categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
       <div class="w-full h-full pt-6">
-        <div v-if="shelf.type === 'book'" class="flex items-center">
+        <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
             <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editBook" />
           </template>

client/components/app/StreamContainer.vue

@@ -133,6 +133,10 @@ export default {
     }
   },
   methods: {
+    setPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+      this.$store.commit('setIsPlaying', isPlaying)
+    },
     setSleepTimer(seconds) {
       this.sleepTimerSet = true
       this.sleepTimerTime = seconds
@@ -221,7 +225,7 @@ export default {
     },
     closePlayer() {
       this.playerHandler.closePlayer()
-      this.$store.commit('setLibraryItemStream', null)
+      this.$store.commit('setMediaPlaying', null)
     },
     streamProgress(data) {
       if (!data.numSegments) return
@@ -234,7 +238,10 @@ export default {
       }
     },
     sessionOpen(session) {
-      this.$store.commit('setLibraryItemStream', session.libraryItem)
+      this.$store.commit('setMediaPlaying', {
+        libraryItem: session.libraryItem,
+        episodeId: session.episodeId
+      })
       this.playerHandler.prepareOpenSession(session)
     },
     streamClosed(streamId) {
@@ -271,24 +278,40 @@ export default {
         this.playerHandler.switchPlayer()
       }
     },
-    async playLibraryItem(libraryItemId) {
+    async playLibraryItem(payload) {
+      var libraryItemId = payload.libraryItemId
+      var episodeId = payload.episodeId || null
+
+      if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
+        this.playerHandler.play()
+        return
+      }
+
       var libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
         console.error('Failed to fetch full item', error)
         return null
       })
       if (!libraryItem) return
-      this.$store.commit('setLibraryItemStream', libraryItem)
+      this.$store.commit('setMediaPlaying', {
+        libraryItem,
+        episodeId
+      })
 
-      this.playerHandler.load(libraryItem, true)
+      this.playerHandler.load(libraryItem, episodeId, true)
+    },
+    pauseItem() {
+      this.playerHandler.pause()
     }
   },
   mounted() {
     this.$eventBus.$on('cast-session-active', this.castSessionActive)
     this.$eventBus.$on('play-item', this.playLibraryItem)
+    this.$eventBus.$on('pause-item', this.pauseItem)
   },
   beforeDestroy() {
     this.$eventBus.$off('cast-session-active', this.castSessionActive)
     this.$eventBus.$off('play-item', this.playLibraryItem)
+    this.$eventBus.$off('pause-item', this.pauseItem)
   }
 }
 </script>