mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-29 23:25:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: bookshelf list view, add: sort by most recent

Browse source
This commit is contained in:
advplyr 2021-10-16 15:50:13 -05:00
parent 6dbbfdbc04
commit 56a70aefaf
16 changed files with 377 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
android/app/build.gradle
View file

@ -13,8 +13,8 @@ android {
applicationId "com.audiobookshelf.app"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 21
versionName "0.9.5-beta"
versionCode 22
versionName "0.9.6-beta"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions {
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

8
assets/fonts.css
View file

@ -10,8 +10,8 @@
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
font-size: 1.5rem;
letter-spacing: normal;
text-transform: none;
display: inline-block;
@ -21,6 +21,12 @@
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons.text-icon {
font-size: 1.15rem;
}
.material-icons.text-base {
font-size: 1rem;
}
@font-face {
font-family: 'Gentium Book Basic';

12
components/app/Bookshelf.vue
View file

@ -3,7 +3,7 @@
<template v-for="(shelf, index) in groupedBooks">
<div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 flex justify-around relative">
<template v-for="audiobook in shelf">
<cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" :local-user-progress="localUserAudiobooks[audiobook.id]" />
<cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" />
</template>
<div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
</div>
@ -41,19 +41,13 @@ export default {
return this.$store.getters['user/getFilterOrderKey']
},
hasFilters() {
return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
},
userAudiobooks() {
return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
},
localUserAudiobooks() {
return this.$store.state.user.localUserAudiobooks || {}
return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
}
},
methods: {
clearFilter() {
this.$store.dispatch('user/updateUserSettings', {
filterBy: 'all'
mobileFilterBy: 'all'
})
},
calcShelves() {

138
components/app/BookshelfList.vue Normal file
View file

@ -0,0 +1,138 @@
<template>
<div id="bookshelf" ref="wrapper" class="w-full overflow-y-auto">
<template v-for="(ab, index) in audiobooks">
<div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 px-2 flex relative">
<app-bookshelf-list-row :audiobook="ab" :card-width="cardWidth" :page-width="pageWidth" />
<div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
</div>
</template>
<div v-show="!audiobooks.length" class="w-full py-16 text-center text-xl">
<div class="py-4">No Audiobooks</div>
<ui-btn v-if="hasFilters" @click="clearFilter">Clear Filter</ui-btn>
</div>
<div v-show="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-70 z-20">
<div class="py-4">Loading...</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currFilterOrderKey: null,
pageWidth: 0,
audiobooks: []
}
},
computed: {
isLoading() {
return this.$store.state.audiobooks.isLoading
},
cardWidth() {
return 75
},
cardHeight() {
return this.cardWidth * 2
},
contentRowWidth() {
return this.pageWidth - 16 - this.cardWidth
},
filterOrderKey() {
return this.$store.getters['user/getFilterOrderKey']
},
hasFilters() {
return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
}
},
methods: {
clearFilter() {
this.$store.dispatch('user/updateUserSettings', {
mobileFilterBy: 'all'
})
},
calcShelves() {
this.audiobooks = this.$store.getters['audiobooks/getFilteredAndSorted']()
},
audiobooksUpdated() {
this.calcShelves()
},
init() {
if (this.$refs.wrapper) {
this.pageWidth = this.$refs.wrapper.clientWidth
this.calcShelves()
}
},
resize() {
this.init()
},
settingsUpdated() {
if (this.currFilterOrderKey !== this.filterOrderKey) {
this.calcShelves()
}
},
async loadAudiobooks() {
var currentLibrary = await this.$localStore.getCurrentLibrary()
if (currentLibrary) {
this.$store.commit('libraries/setCurrentLibrary', currentLibrary.id)
}
this.$store.dispatch('audiobooks/load')
},
socketConnected(isConnected) {
if (isConnected) {
console.log('Connected - Load from server')
this.loadAudiobooks()
} else {
console.log('Disconnected - Reset to local storage')
this.$store.commit('audiobooks/reset')
this.$store.dispatch('audiobooks/useDownloaded')
// this.calcShelves()
// this.$store.dispatch('downloads/loadFromStorage')
}
}
},
mounted() {
this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
window.addEventListener('resize', this.resize)
if (!this.$server) {
console.error('Bookshelf mounted no server')
return
}
this.$server.on('connected', this.socketConnected)
if (this.$server.connected) {
this.loadAudiobooks()
} else {
console.log('Bookshelf - Server not connected using downloaded')
}
this.init()
},
beforeDestroy() {
this.$store.commit('audiobooks/removeListener', 'bookshelf')
this.$store.commit('user/removeSettingsListener', 'bookshelf')
window.removeEventListener('resize', this.resize)
if (!this.$server) {
console.error('Bookshelf beforeDestroy no server')
return
}
this.$server.off('connected', this.socketConnected)
}
}
</script>
<style>
#bookshelf {
height: calc(100% - 48px);
}
.bookshelfRow {
background-image: url(/wood_panels.jpg);
}
.bookshelfDivider {
background: rgb(149, 119, 90);
background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
box-shadow: 2px 14px 8px #111111aa;
}
</style>

124
components/app/BookshelfListRow.vue Normal file
View file

@ -0,0 +1,124 @@
<template>
<div class="w-full h-full flex">
<cards-book-card :audiobook="audiobook" :width="cardWidth" class="self-end" />
<div class="relative px-2" :style="{ width: contentRowWidth + 'px' }">
<div class="flex">
<nuxt-link :to="`/audiobook/${audiobook.id}`">
<p class="leading-6" style="font-size: 1.1rem">{{ audiobook.book.title }}</p>
</nuxt-link>
<div class="flex-grow" />
<div class="flex items-center">
<!-- <button class="mx-1" @click="editAudiobook(ab)">
<span class="material-icons text-icon pb-px">edit</span>
</button> -->
<button v-if="!isPlaying" class="mx-1 rounded-full w-6 h-6" @click="playAudiobook">
<span class="material-icons">play_arrow</span>
</button>
</div>
</div>
<p v-if="audiobook.book.subtitle" class="text-gray-200 leading-6 truncate" style="font-size: 0.9rem">{{ audiobook.book.subtitle }}</p>
<p class="text-sm text-gray-200">by {{ audiobook.book.author }}</p>
<div class="flex items-center py-1">
<p class="text-xs text-gray-300">{{ $elapsedPretty(audiobook.duration) }}</p>
<span class="px-3 text-xs text-gray-300">•</span>
<p class="text-xs text-gray-300 font-mono">{{ $bytesPretty(audiobook.size, 0) }}</p>
<span class="px-3 text-xs text-gray-300">•</span>
<p class="text-xs text-gray-300">{{ numTracks }} tracks</p>
</div>
<div class="flex">
<div v-if="userProgressPercent && !userIsRead" class="w-min my-1">
<div class="bg-primary bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Progress: {{ Math.floor(userProgressPercent * 100) }}%</div>
</div>
<div v-if="isDownloadPlayable" class="w-min my-1 mx-1">
<div class="bg-success bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloaded</div>
</div>
<div v-else-if="isDownloading" class="w-min my-1 mx-1">
<div class="bg-warning bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloading...</div>
</div>
<div v-if="isPlaying" class="w-min my-1 mx-1">
<div class="bg-info bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">{{ isStreaming ? 'Streaming' : 'Playing' }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
audiobook: {
type: Object,
default: () => {}
},
cardWidth: {
type: Number,
default: 75
},
pageWidth: Number
},
data() {
return {}
},
computed: {
audiobookId() {
return this.audiobook.id
},
mostRecentUserProgress() {
return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
},
userProgressPercent() {
return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
},
userIsRead() {
return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
},
contentRowWidth() {
return this.pageWidth - 16 - this.cardWidth
},
isDownloading() {
return this.downloadObj ? this.downloadObj.isDownloading : false
},
isDownloadPreparing() {
return this.downloadObj ? this.downloadObj.isPreparing : false
},
isDownloadPlayable() {
return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
},
downloadedCover() {
return this.downloadObj ? this.downloadObj.cover : null
},
downloadObj() {
return this.$store.getters['downloads/getDownload'](this.audiobookId)
},
isStreaming() {
return this.$store.getters['isAudiobookStreaming'](this.audiobookId)
},
isPlaying() {
return this.$store.getters['isAudiobookPlaying'](this.audiobookId)
},
numTracks() {
if (this.audiobook.tracks) return this.audiobook.tracks.length
return this.audiobook.numTracks || 0
}
},
methods: {
playAudiobook() {
if (this.isPlaying) {
return
}
this.$store.commit('setPlayOnLoad', true)
if (!this.isDownloadPlayable) {
// Stream
console.log('[PLAYCLICK] Set Playing STREAM ' + this.audiobook.book.title)
this.$store.commit('setStreamAudiobook', this.audiobook)
this.$server.socket.emit('open_stream', this.audiobook.id)
} else {
// Local
console.log('[PLAYCLICK] Set Playing Local Download ' + this.audiobook.book.title)
this.$store.commit('setPlayingDownload', this.downloadObj)
}
}
},
mounted() {}
}
</script>

13
components/app/StreamContainer.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="w-full p-4 pointer-events-none fixed bottom-0 left-0 right-0 z-20">
<div v-if="audiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
<div v-if="audiobook" id="streamContainer" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
<div class="pl-16 pr-2 flex items-center pb-2">
<div>
<p class="px-2">{{ title }}</p>
@ -12,7 +12,7 @@
</div>
<span class="material-icons" @click="cancelStream">close</span>
</div>
<div class="absolute left-2 -top-10">
<div class="absolute left-2 -top-10 bookCoverWrapper">
<cards-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="64" />
</div>
<audio-player-mini ref="audioPlayerMini" :loading="isLoading" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
@ -380,3 +380,12 @@ export default {
}
}
</script>
<style>
.bookCoverWrapper {
box-shadow: 3px -2px 5px #00000066;
}
#streamContainer {
box-shadow: 0px -8px 8px #11111177;
}
</style>

22
components/cards/BookCard.vue
View file

@ -17,9 +17,9 @@
<span class="material-icons text-success" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">download_done</span>
</div>
<div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
<div class="absolute bottom-0 left-0 h-1.5 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
<div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
<div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem', bottom: sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300 absolute left-0">
<span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
</div>
</div>
@ -35,14 +35,6 @@ export default {
type: Object,
default: () => null
},
userProgress: {
type: Object,
default: () => null
},
localUserProgress: {
type: Object,
default: () => null
},
width: {
type: Number,
default: 140
@ -87,16 +79,17 @@ export default {
return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
},
orderBy() {
return this.$store.getters['user/getUserSetting']('orderBy')
return this.$store.getters['user/getUserSetting']('mobileOrderBy')
},
mostRecentUserProgress() {
if (!this.localUserProgress) return this.userProgress
if (!this.userProgress) return this.localUserProgress
return this.localUserProgress.lastUpdate > this.userProgress.lastUpdate ? this.localUserProgress : this.userProgress
return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
},
userProgressPercent() {
return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
},
userIsRead() {
return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
},
showError() {
return this.hasMissingParts || this.hasInvalidParts
},
@ -110,7 +103,6 @@ export default {
return this.download ? this.download.cover : null
},
download() {
return null
return this.$store.getters['downloads/getDownloadIfReady'](this.audiobookId)
},
errorText() {

5
components/modals/OrderModal.vue
View file

@ -54,6 +54,10 @@ export default {
{
text: 'Size',
value: 'size'
},
{
text: 'Last Read',
value: 'recent'
}
]
}
@ -89,6 +93,7 @@ export default {
if (this.selected === val) {
this.selectedDesc = !this.selectedDesc
} else {
if (val === 'recent' || val === 'addedAt') this.selectedDesc = true // Progress defaults to descending
this.selected = val
}
this.show = false

2
layouts/default.vue
View file

@ -415,6 +415,6 @@ export default {
height: calc(100vh - 64px);
}
#content.playerOpen {
height: calc(100vh - 240px);
height: calc(100vh - 236px);
}
</style>

2
nuxt.config.js
View file

@ -26,7 +26,7 @@ export default {
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Open+Sans:wght@400;600' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Source+Sans+Pro:wght@300;400;600' },
]
},

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "audiobookshelf-app",
"version": "v0.9.5-beta",
"version": "v0.9.6-beta",
"author": "advplyr",
"scripts": {
"dev": "nuxt --hostname localhost --port 1337",

30
pages/index.vue
View file

@ -6,6 +6,7 @@
<p class="font-book">{{ numAudiobooks }} Audiobooks</p>
<div class="flex-grow" />
<span class="material-icons px-2" @click="changeView">{{ viewIcon }}</span>
<div class="relative flex items-center px-2">
<span class="material-icons" @click="showFilterModal = true">filter_alt</span>
<div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
@ -13,10 +14,13 @@
<span class="material-icons px-2" @click="showSortModal = true">sort</span>
</div>
</div>
<app-bookshelf />
<template v-if="bookshelfReady">
<app-bookshelf v-if="!isListView" />
<app-bookshelf-list v-else />
</template>
<modals-order-modal v-model="showSortModal" :order-by.sync="settings.orderBy" :descending.sync="settings.orderDesc" @change="updateOrder" />
<modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.filterBy" @change="updateFilter" />
<modals-order-modal v-model="showSortModal" :order-by.sync="settings.mobileOrderBy" :descending.sync="settings.mobileOrderDesc" @change="updateOrder" />
<modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.mobileFilterBy" @change="updateFilter" />
<modals-search-modal v-model="showSearchModal" />
</div>
</template>
@ -28,7 +32,9 @@ export default {
showSortModal: false,
showFilterModal: false,
showSearchModal: false,
settings: {}
settings: {},
isListView: false,
bookshelfReady: false
}
},
computed: {
@ -37,9 +43,18 @@ export default {
},
numAudiobooks() {
return this.$store.getters['audiobooks/getFiltered']().length
},
viewIcon() {
return this.isListView ? 'grid_view' : 'view_stream'
}
},
methods: {
changeView() {
this.isListView = !this.isListView
var bookshelfView = this.isListView ? 'list' : 'grid'
this.$localStore.setBookshelfView(bookshelfView)
},
updateOrder() {
this.saveSettings()
},
@ -50,8 +65,13 @@ export default {
this.$store.commit('user/setSettings', this.settings) // Immediate update
this.$store.dispatch('user/updateUserSettings', this.settings)
},
init() {
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)
},
settingsUpdated(settings) {
for (const key in settings) {

19
plugins/store.js
View file

@ -442,7 +442,6 @@ class LocalStorage {
this.userAudiobooks = val ? JSON.parse(val) : {}
this.userAudiobooksLoaded = true
this.vuexStore.commit('user/setLocalUserAudiobooks', this.userAudiobooks)
console.log('[LocalStorage] Loaded Local USER Audiobooks ' + JSON.stringify(this.userAudiobooks))
} catch (error) {
console.error('[LocalStorage] Failed to load user audiobooks', error)
}
@ -600,6 +599,24 @@ class LocalStorage {
return null
}
}
async setBookshelfView(view) {
try {
await Storage.set({ key: 'bookshelfView', value: view })
} catch (error) {
console.error('[LocalStorage] Failed to set bookshelf view', error)
}
}
async getBookshelfView() {
try {
var view = await Storage.get({ key: 'bookshelfView' }) || {}
return view.value || null
} catch (error) {
console.error('[LocalStorage] Failed to get bookshelf view', error)
return null
}
}
}
export default ({ app, store }, inject) => {

29
store/audiobooks.js
View file

@ -22,7 +22,7 @@ export const getters = {
getFiltered: (state, getters, rootState, rootGetters) => () => {
var filtered = state.audiobooks
var settings = rootState.user.settings || {}
var filterBy = settings.filterBy || ''
var filterBy = settings.mobileFilterBy || ''
var searchGroups = ['genres', 'tags', 'series', 'authors', 'progress']
var group = searchGroups.find(_group => filterBy.startsWith(_group + '.'))
@ -45,18 +45,27 @@ export const getters = {
}
return filtered
},
getFilteredAndSorted: (state, getters, rootState) => () => {
getFilteredAndSorted: (state, getters, rootState, rootGetters) => () => {
var settings = rootState.user.settings
var direction = settings.orderDesc ? 'desc' : 'asc'
var direction = settings.mobileOrderDesc ? 'desc' : 'asc'
var filtered = getters.getFiltered()
var orderByNumber = settings.orderBy === 'book.volumeNumber'
return sort(filtered)[direction]((ab) => {
// Supports dot notation strings i.e. "book.title"
var value = settings.orderBy.split('.').reduce((a, b) => a[b], ab)
if (orderByNumber && !isNaN(value)) return Number(value)
return value
})
if (settings.mobileOrderBy === 'recent') {
return sort(filtered)[direction]((ab) => {
var abprogress = rootGetters['user/getMostRecentAudiobookProgress'](ab.id)
if (!abprogress) return 0
return abprogress.lastUpdate
})
} else {
var orderByNumber = settings.mobileOrderBy === 'book.volumeNumber'
return sort(filtered)[direction]((ab) => {
// Supports dot notation strings i.e. "book.title"
var value = settings.mobileOrderBy.split('.').reduce((a, b) => a[b], ab)
if (orderByNumber && !isNaN(value)) return Number(value)
return value
})
}
},
getUniqueAuthors: (state) => {
var _authors = state.audiobooks.filter(ab => !!(ab.book && ab.book.author)).map(ab => ab.book.author)

13
store/user.js
View file

@ -2,6 +2,9 @@ export const state = () => ({
user: null,
localUserAudiobooks: {},
settings: {
mobileOrderBy: 'recent',
mobileOrderDesc: true,
mobileFilterBy: 'all',
orderBy: 'book.title',
orderDesc: false,
filterBy: 'all',
@ -19,6 +22,16 @@ export const getters = {
getUserAudiobook: (state) => (audiobookId) => {
return state.user && state.user.audiobooks ? state.user.audiobooks[audiobookId] || null : null
},
getLocalUserAudiobook: (state) => (audiobookId) => {
return state.user && state.user.localUserAudiobooks ? state.user.localUserAudiobooks[audiobookId] || null : null
},
getMostRecentAudiobookProgress: (state, getters) => (audiobookId) => {
var userAb = getters.getUserAudiobook(audiobookId)
var localUserAb = getters.getLocalUserAudiobook(audiobookId)
if (!localUserAb) return userAb
if (!userAb) return localUserAb
return localUserAb.lastUpdate > userAb.lastUpdate ? localUserAb : userAb
},
getUserSetting: (state) => (key) => {
return state.settings ? state.settings[key] || null : null
},

2
tailwind.config.js
View file

@ -30,7 +30,7 @@ module.exports = {
none: 'none'
},
fontFamily: {
sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
book: ['Gentium Book Basic', 'serif']
}