mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<modals-modal v-model="show" name="podcast-episode-view-modal" :width="800" :height="'unset'" :processing="processing">
|
||
|
|
<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">Episode</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div ref="wrapper" class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
|
||
|
|
<div class="flex mb-4">
|
||
|
|
<div class="w-12 h-12">
|
||
|
|
<covers-book-cover :library-item="libraryItem" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
||
|
|
</div>
|
||
|
|
<div class="flex-grow px-2">
|
||
|
|
<p class="text-base mb-1">{{ podcastTitle }}</p>
|
||
|
|
<p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="text-lg font-semibold mb-6">{{ title }}</p>
|
||
|
|
<div v-if="description" class="default-style" v-html="description" />
|
||
|
|
<p v-else class="mb-2">No description</p>
|
||
|
|
</div>
|
||
|
|
</modals-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
processing: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
show: {
|
||
|
|
get() {
|
||
|
|
return this.$store.state.globals.showViewPodcastEpisodeModal
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
this.$store.commit('globals/setShowViewPodcastEpisodeModal', val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
libraryItem() {
|
||
|
|
return this.$store.state.selectedLibraryItem
|
||
|
|
},
|
||
|
|
episode() {
|
||
|
|
return this.$store.state.globals.selectedEpisode || {}
|
||
|
|
},
|
||
|
|
episodeId() {
|
||
|
|
return this.episode.id
|
||
|
|
},
|
||
|
|
title() {
|
||
|
|
return this.episode.title || 'No Episode Title'
|
||
|
|
},
|
||
|
|
description() {
|
||
|
|
return this.episode.description || ''
|
||
|
|
},
|
||
|
|
media() {
|
||
|
|
return this.libraryItem ? this.libraryItem.media || {} : {}
|
||
|
|
},
|
||
|
|
mediaMetadata() {
|
||
|
|
return this.media.metadata || {}
|
||
|
|
},
|
||
|
|
podcastTitle() {
|
||
|
|
return this.mediaMetadata.title
|
||
|
|
},
|
||
|
|
podcastAuthor() {
|
||
|
|
return this.mediaMetadata.author
|
||
|
|
},
|
||
|
|
bookCoverAspectRatio() {
|
||
|
|
return this.$store.getters['getBookCoverAspectRatio']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
mounted() {}
|
||
|
|
}
|
||
|
|
</script>
|