mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2026-08-31 07:37:22 +02:00
Fix: android auto requirements, Change: New UI #33
This commit is contained in:
advplyr
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-group-shelf :key="shelf.id" group-type="collection" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupsPerRow: 2
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
collections() {
|
||||
return this.$store.state.user.collections || []
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
for (let i = 0; i < this.collections.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.groupsPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.groups.push(this.collections[i])
|
||||
|
||||
if ((i + 1) % this.groupsPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.groups.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
this.$store.dispatch('user/loadUserCollections')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-shelf :key="shelf.id" :label="shelf.label" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
settings: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
books() {
|
||||
return this.$store.getters['audiobooks/getFilteredAndSorted']()
|
||||
},
|
||||
booksWithUserAbData() {
|
||||
var books = this.books.map((b) => {
|
||||
var userAbData = this.$store.getters['user/getMostRecentUserAudiobookData'](b.id)
|
||||
return { ...b, userAbData }
|
||||
})
|
||||
return books
|
||||
},
|
||||
booksCurrentlyReading() {
|
||||
var books = this.booksWithUserAbData
|
||||
.map((b) => ({ ...b }))
|
||||
.filter((b) => b.userAbData && !b.userAbData.isRead && b.userAbData.progress > 0)
|
||||
.sort((a, b) => {
|
||||
return a.userAbData.lastUpdate - b.userAbData.lastUpdate
|
||||
})
|
||||
return books
|
||||
},
|
||||
booksRecentlyAdded() {
|
||||
var books = this.books
|
||||
.map((b) => {
|
||||
return { ...b }
|
||||
})
|
||||
.sort((a, b) => a.addedAt - b.addedAt)
|
||||
return books.slice(0, 10)
|
||||
},
|
||||
booksRead() {
|
||||
var books = this.booksWithUserAbData
|
||||
.filter((b) => b.userAbData && b.userAbData.isRead)
|
||||
.sort((a, b) => {
|
||||
return a.userAbData.lastUpdate - b.userAbData.lastUpdate
|
||||
})
|
||||
return books.slice(0, 10)
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
|
||||
if (this.booksCurrentlyReading.length) {
|
||||
shelves.push({
|
||||
id: 'recent',
|
||||
label: 'Continue Reading',
|
||||
books: this.booksCurrentlyReading
|
||||
})
|
||||
}
|
||||
|
||||
if (this.booksRecentlyAdded.length) {
|
||||
shelves.push({
|
||||
id: 'added',
|
||||
label: 'Recently Added',
|
||||
books: this.booksRecentlyAdded
|
||||
})
|
||||
}
|
||||
|
||||
if (this.booksRead.length) {
|
||||
shelves.push({
|
||||
id: 'read',
|
||||
label: 'Read Again',
|
||||
books: this.booksRead
|
||||
})
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.settings = { ...this.$store.state.user.settings }
|
||||
|
||||
// var bookshelfView = await this.$localStore.getBookshelfView()
|
||||
// this.isListView = bookshelfView === 'list'
|
||||
// this.bookshelfReady = true
|
||||
// console.log('Bookshelf view', bookshelfView)
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
booksPerRow: 3
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
books() {
|
||||
return this.$store.getters['audiobooks/getFilteredAndSorted']()
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
for (let i = 0; i < this.books.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.booksPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.books.push(this.books[i])
|
||||
|
||||
if ((i + 1) % this.booksPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.books.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-group-shelf v-if="!selectedSeriesName" :key="shelf.id" group-type="series" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
|
||||
<bookshelf-library-shelf v-else :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupsPerRow: 2,
|
||||
booksPerRow: 3,
|
||||
selectedSeriesName: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
routeQuery: {
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.series) {
|
||||
console.log('Select series')
|
||||
this.selectedSeriesName = this.$decode(newVal.series)
|
||||
} else {
|
||||
this.selectedSeriesName = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routeQuery() {
|
||||
return this.$route.query
|
||||
},
|
||||
series() {
|
||||
return this.$store.getters['audiobooks/getSeriesGroups']()
|
||||
},
|
||||
seriesShelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.groupsPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.groups.push(this.series[i])
|
||||
|
||||
if ((i + 1) % this.groupsPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.groups.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
},
|
||||
selectedSeries() {
|
||||
if (!this.selectedSeriesName) return null
|
||||
return this.series.find((s) => s.name === this.selectedSeriesName)
|
||||
},
|
||||
seriesBooksShelves() {
|
||||
if (!this.selectedSeries) return []
|
||||
var seriesBooks = this.selectedSeries.books || []
|
||||
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
for (let i = 0; i < seriesBooks.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.booksPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.books.push(seriesBooks[i])
|
||||
|
||||
if ((i + 1) % this.booksPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.books.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
},
|
||||
shelves() {
|
||||
if (this.selectedSeries) {
|
||||
return this.seriesBooksShelves
|
||||
} else {
|
||||
return this.seriesShelves
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user