mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
86 lines
3.3 KiB
Vue
86 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<modals-modal v-model="show" :width="800" :height="500" :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">{{ title }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div class="absolute -top-10 left-0 w-full flex">
|
||
|
|
<div class="h-10 w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300" :class="selectedTab === 'details' ? 'bg-bg' : 'bg-primary text-gray-400'" @click="selectTab('details')">Details</div>
|
||
|
|
<div class="h-10 w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300" :class="selectedTab === 'cover' ? 'bg-bg' : 'bg-primary text-gray-400'" @click="selectTab('cover')">Cover</div>
|
||
|
|
<div class="h-10 w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300" :class="selectedTab === 'match' ? 'bg-bg' : 'bg-primary text-gray-400'" @click="selectTab('match')">Match</div>
|
||
|
|
<div class="h-10 w-28 rounded-t-lg flex items-center justify-center cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300" :class="selectedTab === 'tracks' ? 'bg-bg' : 'bg-primary text-gray-400'" @click="selectTab('tracks')">Tracks</div>
|
||
|
|
</div>
|
||
|
|
<div class="px-4 w-full h-full text-sm py-6 rounded-b-lg rounded-tr-lg bg-bg shadow-lg">
|
||
|
|
<keep-alive>
|
||
|
|
<component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" />
|
||
|
|
</keep-alive>
|
||
|
|
</div>
|
||
|
|
</modals-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selectedTab: 'details',
|
||
|
|
processing: false,
|
||
|
|
audiobook: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
show: {
|
||
|
|
handler(newVal) {
|
||
|
|
if (newVal) {
|
||
|
|
if (this.audiobook && this.audiobook.id === this.selectedAudiobookId) return
|
||
|
|
this.audiobook = null
|
||
|
|
this.fetchFull()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
show: {
|
||
|
|
get() {
|
||
|
|
return this.$store.state.showEditModal
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
this.$store.commit('setShowEditModal', val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabName() {
|
||
|
|
if (this.selectedTab === 'details') return 'modals-edit-tabs-details'
|
||
|
|
else if (this.selectedTab === 'cover') return 'modals-edit-tabs-cover'
|
||
|
|
else if (this.selectedTab === 'match') return 'modals-edit-tabs-match'
|
||
|
|
else if (this.selectedTab === 'tracks') return 'modals-edit-tabs-tracks'
|
||
|
|
return ''
|
||
|
|
},
|
||
|
|
selectedAudiobook() {
|
||
|
|
return this.$store.state.selectedAudiobook || {}
|
||
|
|
},
|
||
|
|
selectedAudiobookId() {
|
||
|
|
return this.selectedAudiobook.id
|
||
|
|
},
|
||
|
|
book() {
|
||
|
|
return this.audiobook ? this.audiobook.book || {} : {}
|
||
|
|
},
|
||
|
|
title() {
|
||
|
|
return this.book.title || 'No Title'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectTab(tab) {
|
||
|
|
this.selectedTab = tab
|
||
|
|
},
|
||
|
|
async fetchFull() {
|
||
|
|
try {
|
||
|
|
this.audiobook = await this.$axios.$get(`/api/audiobook/${this.selectedAudiobookId}`)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to fetch audiobook', this.selectedAudiobookId, error)
|
||
|
|
this.show = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {}
|
||
|
|
}
|
||
|
|
</script>
|