mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-24 19:11:44 +01:00
230 lines
10 KiB
Vue
230 lines
10 KiB
Vue
<template>
|
|
<div class="page" :class="libraryItemIdStreaming ? '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 px-4 md:px-0">{{ $strings.HeaderLatestEpisodes }}</p>
|
|
<p v-if="!recentEpisodes.length && !processing" class="text-center text-xl">{{ $strings.MessageNoEpisodes }}</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" class="hidden md:block" />
|
|
<div class="flex-grow pl-4 max-w-2xl">
|
|
<!-- mobile -->
|
|
<div class="flex md:hidden mb-2">
|
|
<covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId)" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
|
|
<div class="flex-grow px-2">
|
|
<div class="flex items-center">
|
|
<div class="flex" @click.stop>
|
|
<nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
|
|
</div>
|
|
<widgets-explicit-indicator :explicit="episode.podcast.metadata.explicit" />
|
|
</div>
|
|
<p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- desktop -->
|
|
<div class="hidden md:block">
|
|
<div class="flex items-center">
|
|
<div class="flex" @click.stop>
|
|
<nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
|
|
</div>
|
|
<widgets-explicit-indicator :explicit="episode.podcast.metadata.explicit" />
|
|
</div>
|
|
<p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center font-semibold text-gray-200">
|
|
<div v-if="episode.season || episode.episode">#</div>
|
|
<div v-if="episode.season">{{ episode.season }}x</div>
|
|
<div v-if="episode.episode">{{ episode.episode }}</div>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-2">
|
|
<div class="font-semibold text-sm md:text-base">{{ episode.title }}</div>
|
|
<widgets-podcast-type-indicator :type="episode.episodeType" />
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-200 mb-4 episode-subtitle-long" v-html="episode.subtitle || episode.description" />
|
|
|
|
<div class="flex items-center">
|
|
<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 text-2xl" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
|
|
<span v-else class="material-icons text-2xl text-success">play_arrow</span>
|
|
<p class="pl-2 pr-1 text-sm font-semibold">{{ getButtonText(episode) }}</p>
|
|
</button>
|
|
|
|
<button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" @click.stop="queueBtnClick(episode)">
|
|
<span class="material-icons-outlined text-2xl">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
|
|
</button>
|
|
</div>
|
|
</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: {
|
|
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
|
|
},
|
|
isStreamingFromDifferentLibrary() {
|
|
return this.$store.getters['getIsStreamingFromDifferentLibrary']
|
|
},
|
|
episodesMapped() {
|
|
return this.recentEpisodes.map((ep) => {
|
|
return {
|
|
...ep,
|
|
progress: this.$store.getters['user/getUserMediaProgress'](ep.libraryItemId, ep.id)
|
|
}
|
|
})
|
|
},
|
|
playerQueueItems() {
|
|
return this.$store.state.playerQueueItems || []
|
|
},
|
|
playerQueueEpisodeIdMap() {
|
|
const episodeIds = {}
|
|
this.playerQueueItems.forEach((i) => {
|
|
if (i.episodeId) episodeIds[i.episodeId] = true
|
|
})
|
|
return episodeIds
|
|
},
|
|
dateFormat() {
|
|
return this.$store.state.serverSettings.dateFormat
|
|
}
|
|
},
|
|
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,
|
|
libraryId: episode.libraryId,
|
|
episodeId: episode.id,
|
|
title: episode.title,
|
|
subtitle: episode.podcast.metadata.title,
|
|
caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : '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
|
|
},
|
|
queueBtnClick(episode) {
|
|
if (this.playerQueueEpisodeIdMap[episode.id]) {
|
|
// Remove from queue
|
|
this.$store.commit('removeItemFromQueue', { libraryItemId: episode.libraryItemId, episodeId: episode.id })
|
|
} else {
|
|
// Add to queue
|
|
const queueItem = {
|
|
libraryItemId: episode.libraryItemId,
|
|
libraryId: episode.libraryId,
|
|
episodeId: episode.id,
|
|
title: episode.title,
|
|
subtitle: episode.podcast.metadata.title,
|
|
caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
|
|
duration: episode.duration || null,
|
|
coverPath: episode.podcast.coverPath || null
|
|
}
|
|
this.$store.commit('addItemToQueue', queueItem)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadRecentEpisodes()
|
|
}
|
|
}
|
|
</script>
|