Add:Player queue for podcast episodes & autoplay next episode #603

client/components/modals/player/QueueItemRow.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="item" class="w-full flex items-center px-4 py-2" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
+    <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>
+    </div>
+    <div class="w-28">
+      <p v-if="isOpenInPlayer" class="text-sm text-right text-gray-400">Streaming</p>
+      <div v-else-if="isHovering" class="flex items-center justify-end -mx-1">
+        <button class="outline-none mx-1 flex items-center" @click.stop="playClick">
+          <span class="material-icons text-success">play_arrow</span>
+        </button>
+        <button class="outline-none mx-1 flex items-center" @click.stop="removeClick">
+          <span class="material-icons text-error">close</span>
+        </button>
+      </div>
+      <p v-else class="text-gray-400 text-sm text-right">{{ durationPretty }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    index: Number
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    title() {
+      return this.item.title || ''
+    },
+    subtitle() {
+      return this.item.subtitle || ''
+    },
+    libraryItemId() {
+      return this.item.libraryItemId
+    },
+    episodeId() {
+      return this.item.episodeId
+    },
+    coverPath() {
+      return this.item.coverPath
+    },
+    coverUrl() {
+      if (!this.coverPath) return '/book_placeholder.jpg'
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    duration() {
+      return this.item.duration
+    },
+    durationPretty() {
+      if (!this.duration) return 'N/A'
+      return this.$elapsedPretty(this.duration)
+    },
+    isOpenInPlayer() {
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
+    },
+    wrapperClass() {
+      if (this.isOpenInPlayer) return 'bg-yellow-400 bg-opacity-10'
+      if (this.index % 2 === 0) return 'bg-gray-300 bg-opacity-5 hover:bg-opacity-10'
+      return 'bg-bg hover:bg-gray-300 hover:bg-opacity-10'
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    playClick() {
+      this.$emit('play', this.item)
+    },
+    removeClick() {
+      this.$emit('remove', this.item)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.queue-item-row-content {
+  max-width: calc(100% - 48px - 128px);
+}
+</style>

client/components/modals/player/QueueItemsModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <modals-modal v-model="show" name="queue-items" :width="800" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Player Queue</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden py-4" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
+        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem" @remove="removeItem" />
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItemId: String
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
+    }
+  },
+  methods: {
+    playItem(item) {
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: item.libraryItemId,
+        episodeId: item.episodeId || null,
+        queueItems: this.playerQueueItems
+      })
+      this.show = false
+    },
+    removeItem(item) {
+      const updatedQueue = this.playerQueueItems.filter((i) => {
+        if (!i.episodeId) return i.libraryItemId !== item.libraryItemId
+        return i.libraryItemId !== item.libraryItemId || i.episodeId !== item.episodeId
+      })
+      this.$store.commit('setPlayerQueueItems', updatedQueue)
+    }
+  }
+}
+</script>