mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-12-22 19:59:37 +00:00
Init
This commit is contained in:
advplyr
commit
6930e69b55
106 changed files with 26925 additions and 0 deletions
42
client/components/modals/edit-tabs/Cover.vue
Normal file
42
client/components/modals/edit-tabs/Cover.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="w-full h-full">
|
||||
<!-- <img :src="cover" class="w-40 h-60" /> -->
|
||||
<div class="flex">
|
||||
<cards-book-cover :audiobook="audiobook" />
|
||||
<div class="flex-grow px-8">
|
||||
<ui-text-input-with-label v-model="imageUrl" label="Image URL" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
audiobook: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cover: null,
|
||||
imageUrl: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
audiobook: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
this.cover = this.audiobook.cover || '/book_placeholder.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
client/components/modals/edit-tabs/Details.vue
Normal file
135
client/components/modals/edit-tabs/Details.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="w-full h-full overflow-hidden overflow-y-auto px-1">
|
||||
<div v-if="userProgress" class="bg-primary rounded-md w-full px-4 py-1 mb-4 border border-success border-opacity-50">
|
||||
<div class="w-full flex items-center">
|
||||
<p>
|
||||
Your progress: <span class="font-mono text-lg">{{ (userProgress * 100).toFixed(0) }}%</span>
|
||||
</p>
|
||||
<div class="flex-grow" />
|
||||
<ui-btn v-if="!resettingProgress" small :padding-x="2" class="-mr-3" @click="resetProgress">Reset</ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="submitForm">
|
||||
<ui-text-input-with-label v-model="details.title" label="Title" />
|
||||
|
||||
<ui-text-input-with-label v-model="details.author" label="Author" class="mt-4" />
|
||||
|
||||
<ui-textarea-with-label v-model="details.description" :rows="6" label="Description" class="mt-4" />
|
||||
|
||||
<div class="flex py-4">
|
||||
<ui-btn color="error" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
|
||||
<div class="flex-grow" />
|
||||
<ui-btn type="submit">Submit</ui-btn>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
processing: Boolean,
|
||||
audiobook: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
details: {
|
||||
title: null,
|
||||
description: null,
|
||||
author: null
|
||||
},
|
||||
resettingProgress: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
audiobook: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isProcessing: {
|
||||
get() {
|
||||
return this.processing
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:processing', val)
|
||||
}
|
||||
},
|
||||
audiobookId() {
|
||||
return this.audiobook ? this.audiobook.id : null
|
||||
},
|
||||
book() {
|
||||
return this.audiobook ? this.audiobook.book || {} : {}
|
||||
},
|
||||
userAudiobook() {
|
||||
return this.$store.getters['getUserAudiobook'](this.audiobookId)
|
||||
},
|
||||
userProgress() {
|
||||
return this.userAudiobook ? this.userAudiobook.progress : 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitForm() {
|
||||
console.log('Submit form', this.details)
|
||||
this.isProcessing = true
|
||||
const updatePayload = {
|
||||
book: this.details
|
||||
}
|
||||
var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
|
||||
console.error('Failed to update', error)
|
||||
return false
|
||||
})
|
||||
this.isProcessing = false
|
||||
if (updatedAudiobook) {
|
||||
console.log('Update Successful', updatedAudiobook)
|
||||
this.$toast.success('Update Successful')
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
init() {
|
||||
this.details.title = this.book.title
|
||||
this.details.description = this.book.description
|
||||
this.details.author = this.book.author
|
||||
},
|
||||
resetProgress() {
|
||||
if (confirm(`Are you sure you want to reset your progress?`)) {
|
||||
this.resettingProgress = true
|
||||
this.$axios
|
||||
.$delete(`/api/user/audiobook/${this.audiobookId}`)
|
||||
.then(() => {
|
||||
console.log('Progress reset complete')
|
||||
this.$toast.success(`Your progress was reset`)
|
||||
this.resettingProgress = false
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Progress reset failed', error)
|
||||
this.resettingProgress = false
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteAudiobook() {
|
||||
if (confirm(`Are you sure you want to remove this audiobook?`)) {
|
||||
this.isProcessing = true
|
||||
this.$axios
|
||||
.$delete(`/api/audiobook/${this.audiobookId}`)
|
||||
.then(() => {
|
||||
console.log('Audiobook removed')
|
||||
this.$toast.success('Audiobook Removed')
|
||||
this.$emit('close')
|
||||
this.isProcessing = false
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Remove Audiobook failed', error)
|
||||
this.isProcessing = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
100
client/components/modals/edit-tabs/Match.vue
Normal file
100
client/components/modals/edit-tabs/Match.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div class="w-full h-full overflow-hidden">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-72">
|
||||
<form @submit.prevent="submitSearch">
|
||||
<ui-text-input-with-label v-model="search" label="Search Title" placeholder="Search" :disabled="processing" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
</div>
|
||||
<div v-show="processing" class="flex h-full items-center justify-center">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden">
|
||||
<template v-for="(res, index) in searchResults">
|
||||
<div :key="index" class="w-full border-b border-gray-700 pb-2 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch(res)">
|
||||
<div class="flex py-1">
|
||||
<img :src="res.cover || '/book_placeholder.jpg'" class="h-24 object-cover" style="width: 60px" />
|
||||
<div class="px-4 flex-grow">
|
||||
<div class="flex items-center">
|
||||
<h1>{{ res.title }}</h1>
|
||||
<div class="flex-grow" />
|
||||
<p>{{ res.first_publish_year || res.first_publish_date }}</p>
|
||||
</div>
|
||||
<p class="text-gray-400">{{ res.author }}</p>
|
||||
<div class="w-full max-h-12 overflow-hidden">
|
||||
<p class="text-gray-500 text-xs" v-html="res.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="res.covers && res.covers.length > 1" class="flex">
|
||||
<template v-for="cover in res.covers.slice(1)">
|
||||
<img :key="cover" :src="cover" class="h-20 w-12 object-cover mr-1" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
audiobook: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: null,
|
||||
lastSearch: null,
|
||||
processing: false,
|
||||
searchResults: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
audiobook: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
submitSearch() {
|
||||
this.runSearch()
|
||||
},
|
||||
async runSearch() {
|
||||
if (this.lastSearch === this.search) return
|
||||
console.log('Search', this.lastSearch, this.search)
|
||||
|
||||
this.searchResults = []
|
||||
this.processing = true
|
||||
this.lastSearch = this.search
|
||||
var results = await this.$axios.$get(`/api/find/search?title=${this.search}`)
|
||||
console.log('Got results', results)
|
||||
this.searchResults = results
|
||||
this.processing = false
|
||||
},
|
||||
init() {
|
||||
if (!this.audiobook.book || !this.audiobook.book.title) {
|
||||
this.search = null
|
||||
return
|
||||
}
|
||||
if (this.searchResults.length) {
|
||||
console.log('Already hav ereuslts', this.searchResults, this.lastSearch)
|
||||
}
|
||||
this.search = this.audiobook.book.title
|
||||
this.runSearch()
|
||||
},
|
||||
selectMatch(match) {}
|
||||
},
|
||||
mounted() {
|
||||
console.log('Match mounted')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
client/components/modals/edit-tabs/Tracks.vue
Normal file
66
client/components/modals/edit-tabs/Tracks.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="w-full h-full overflow-y-auto overflow-x-hidden">
|
||||
<div class="flex mb-4">
|
||||
<nuxt-link :to="`/audiobook/${audiobook.id}/edit`">
|
||||
<ui-btn color="primary">Edit Track Order</ui-btn>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<table class="text-sm tracksTable">
|
||||
<tr class="font-book">
|
||||
<th>#</th>
|
||||
<th class="text-left">Filename</th>
|
||||
<th class="text-left">Size</th>
|
||||
<th class="text-left">Duration</th>
|
||||
</tr>
|
||||
<template v-for="track in tracks">
|
||||
<tr :key="track.index">
|
||||
<td class="text-center">
|
||||
<p>{{ track.index }}</p>
|
||||
</td>
|
||||
<td class="font-book">
|
||||
{{ track.filename }}
|
||||
</td>
|
||||
<td class="font-mono">
|
||||
{{ $bytesPretty(track.size) }}
|
||||
</td>
|
||||
<td class="font-mono">
|
||||
{{ $secondsToTimestamp(track.duration) }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
audiobook: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tracks: null,
|
||||
audioFiles: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
audiobook: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
this.audioFiles = this.audiobook.audioFiles
|
||||
this.tracks = this.audiobook.tracks
|
||||
console.log('INIT', this.audiobook)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue