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

2025-08-19 03:15:58 +02:00 · 2022-03-26 17:41:26 -05:00
parent e32d05ea27
commit 0e665e2091
28 changed files with 526 additions and 82 deletions
--- a/client/components/app/BookListRow.vue
+++ b/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)
--- a/client/components/app/BookShelfCategorized.vue
+++ b/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
          })
--- a/client/components/app/BookShelfRow.vue
+++ b/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>
--- a/client/components/app/StreamContainer.vue
+++ b/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>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -527,7 +527,9 @@ export default {
    },
    play() {
      var eventBus = this.$eventBus || this.$nuxt.$eventBus
-      eventBus.$emit('play-item', this.libraryItemId)
+      eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItemId
+      })
    },
    mouseover() {
      this.isHovering = true
--- a/client/components/modals/item/EditModal.vue
+++ b/client/components/modals/item/EditModal.vue
@@ -123,8 +123,9 @@ export default {
      if (!this.userCanUpdate && !this.userCanDownload) return []
      return this.tabs.filter((tab) => {
        if (tab.id === 'download' && this.isMissing) return false
-        if (tab.id === 'chapters' && this.mediaType !== 'book') return false
-        if (tab.id === 'episodes' && this.mediaType !== 'podcast') return false
+        if (this.mediaType == 'podcast' && (tab.id == 'match' || tab.id == 'chapters')) return false
+        if (this.mediaType == 'book' && tab.id == 'episodes') return false
+
        if ((tab.id === 'download' || tab.id === 'files') && this.userCanDownload) return true
        if (tab.id !== 'download' && tab.id !== 'files' && this.userCanUpdate) return true
        if (tab.id === 'match' && this.userCanUpdate && this.showExperimentalFeatures) return true
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@@ -35,7 +35,7 @@
                </div>
              </td>
              <td v-if="userCanDownload && !isMissing" class="text-center">
-                <a :href="`/s/item/${libraryItemId}${$encodeUriPath(file.metadata.relPath)}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+                <a :href="`/s/item/${libraryItemId}/${$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
              </td>
            </tr>
          </template>
--- a/client/components/tables/TracksTable.vue
+++ b/client/components/tables/TracksTable.vue
@@ -38,7 +38,7 @@
                {{ $secondsToTimestamp(track.duration) }}
              </td>
              <td v-if="userCanDownload" class="text-center">
-                <a :href="`/s/item/${libraryItemId}${$encodeUriPath(track.metadata.relPath)}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+                <a :href="`/s/item/${libraryItemId}/${$encodeUriPath(track.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
              </td>
            </tr>
          </template>
--- a/client/components/tables/collection/BookTableRow.vue
+++ b/client/components/tables/collection/BookTableRow.vue
@@ -27,11 +27,6 @@
        <span class="material-icons text-lg text-white text-opacity-70 hover:text-opacity-100 cursor-pointer">radio_button_unchecked</span>
      </div> -->
    </div>
-    <!-- <div class="absolute top-0 left-0 z-40 bg-red-500 w-full h-full">
-      <div class="w-24 h-full absolute top-0 -right-24 transform transition-transform" :class="isHovering ? 'translate-x-0' : '-translate-x-24'">
-        <span class="material-icons">edit</span>
-      </div>
-    </div> -->
    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : '-translate-x-24'">
      <div class="flex h-full items-center">
        <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
@@ -126,7 +121,9 @@ export default {
      this.isHovering = false
    },
    playClick() {
-      this.$eventBus.$emit('play-item', this.book.id)
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.book.id
+      })
    },
    clickEdit() {
      this.$emit('edit', this.book)
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/client/components/tables/podcast/EpisodeTableRow.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div v-if="episode" class="flex items-center h-24">
+      <div class="w-12 min-w-12 max-w-16 h-full">
+        <div class="flex h-full items-center justify-center">
+          <span class="material-icons drag-handle text-lg text-white text-opacity-50 hover:text-opacity-100">menu</span>
+        </div>
+      </div>
+      <div class="flex-grow px-2">
+        <p class="text-sm font-semibold">
+          {{ title }}
+        </p>
+        <p class="text-sm">
+          {{ description }}
+        </p>
+        <div class="flex items-center pt-2">
+          <div 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" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click="playClick">
+            <span class="material-icons">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <p class="pl-2 pr-1 text-sm">{{ timeRemaining }}</p>
+          </div>
+
+          <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
+            <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+          </ui-tooltip>
+        </div>
+      </div>
+      <div class="w-24 min-w-24" />
+    </div>
+    <div class="w-24 min-w-24 -right-0 absolute top-0 h-full transform transition-transform" :class="!isHovering ? 'translate-x-32' : 'translate-x-0'">
+      <div class="flex h-full items-center">
+        <div class="mx-1">
+          <ui-icon-btn icon="edit" borderless @click="clickEdit" />
+        </div>
+        <div class="mx-1">
+          <ui-icon-btn icon="close" borderless @click="removeClick" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!userIsFinished" class="absolute bottom-0 left-0 h-1 bg-warning" :style="{ width: itemProgressPercent * 100 + '%' }" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItemId: String,
+    episode: {
+      type: Object,
+      default: () => {}
+    },
+    isDragging: Boolean
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false,
+      processingRemove: false,
+      isHovering: false
+    }
+  },
+  watch: {
+    isDragging: {
+      handler(newVal) {
+        if (newVal) {
+          this.isHovering = false
+        }
+      }
+    }
+  },
+  computed: {
+    audioFile() {
+      return this.episode.audioFile
+    },
+    title() {
+      return this.episode.title || ''
+    },
+    description() {
+      return this.episode.description || ''
+    },
+    duration() {
+      return this.$secondsToTimestamp(this.episode.duration)
+    },
+    isStreaming() {
+      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
+    },
+    streamIsPlaying() {
+      return this.$store.state.streamIsPlaying && this.isStreaming
+    },
+    itemProgress() {
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
+    },
+    itemProgressPercent() {
+      return this.itemProgress ? this.itemProgress.progress : 0
+    },
+    userIsFinished() {
+      return this.itemProgress ? !!this.itemProgress.isFinished : false
+    },
+    timeRemaining() {
+      if (this.streamIsPlaying) return 'Playing'
+      if (!this.itemProgress) return this.$elapsedPretty(this.episode.duration)
+      if (this.userIsFinished) return 'Finished'
+      var remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
+      return `${this.$elapsedPretty(remaining)} left`
+    }
+  },
+  methods: {
+    mouseover() {
+      if (this.isDragging) return
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickEdit() {},
+    playClick() {
+      if (this.streamIsPlaying) {
+        this.$eventBus.$emit('pause-item')
+      } else {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.libraryItemId,
+          episodeId: this.episode.id
+        })
+      }
+    },
+    toggleFinished() {
+      var updatePayload = {
+        isFinished: !this.userIsFinished
+      }
+      this.isProcessingReadUpdate = true
+      this.$axios
+        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
+        .then(() => {
+          this.isProcessingReadUpdate = false
+          this.$toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.isProcessingReadUpdate = false
+          this.$toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+        })
+    },
+    removeClick() {
+      this.processingRemove = true
+
+      this.$axios
+        .$delete(`/api/items/${this.libraryItemId}/episode/${this.episode.id}`)
+        .then((updatedPodcast) => {
+          console.log(`Episode removed from podcast`, updatedPodcast)
+          this.$toast.success('Episode removed from podcast')
+          this.processingRemove = false
+        })
+        .catch((error) => {
+          console.error('Failed to remove episode from podcast', error)
+          this.$toast.error('Failed to remove episode from podcast')
+          this.processingRemove = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/client/components/tables/podcast/EpisodesTable.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="w-full py-6">
+    <p class="text-lg mb-0 font-semibold">Episodes</p>
+    <draggable v-model="episodesCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'episode' : null">
+        <template v-for="episode in episodesCopy">
+          <tables-podcast-episode-table-row :key="episode.id" :is-dragging="drag" :episode="episode" :library-item-id="libraryItem.id" class="item" :class="drag ? '' : 'episode'" />
+        </template>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  components: {
+    draggable
+  },
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      },
+      episodesCopy: []
+    }
+  },
+  watch: {
+    libraryItem: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    episodes() {
+      return this.media.episodes || []
+    }
+  },
+  methods: {
+    draggableUpdate() {
+      var episodesUpdate = {
+        episodes: this.episodesCopy.map((b) => b.id)
+      }
+      this.$axios
+        .$patch(`/api/items/${this.libraryItem.id}/episodes`, episodesUpdate)
+        .then((podcast) => {
+          console.log('Podcast updated', podcast)
+        })
+        .catch((error) => {
+          console.error('Failed to update podcast', error)
+          this.$toast.error('Failed to save podcast episode order')
+        })
+    },
+    init() {
+      this.episodesCopy = this.episodes.map((ep) => {
+        return {
+          ...ep
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+.episode-item {
+  transition: all 0.4s ease;
+}
+
+.episode-enter-from,
+.episode-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.episode-leave-active {
+  position: absolute;
+}
+</style>