Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-10-27 11:18:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update:Cleanup bookshelf toolbars & fix siderail icon

Browse Source
This commit is contained in:
advplyr 2022-10-28 18:10:19 -05:00
parent 685b4e77eb
commit e752b4071d
12 changed files with 121 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/components/app/Appbar.vue
View File

@ -153,7 +153,7 @@ export default {
cancelSelectionMode() {
if (this.processingBatchDelete) return
this.$store.commit('setSelectedLibraryItems', [])
this.$eventBus.$emit('bookshelf-clear-selection')
this.$eventBus.$emit('bookshelf_clear_selection')
this.isAllSelected = false
},
toggleBatchRead() {
@ -172,7 +172,7 @@ export default {
this.$toast.success('Batch update success!')
this.$store.commit('setProcessingBatch', false)
this.$store.commit('setSelectedLibraryItems', [])
this.$eventBus.$emit('bookshelf-clear-selection')
this.$eventBus.$emit('bookshelf_clear_selection')
})
.catch((error) => {
this.$toast.error('Batch update failed')
@ -195,7 +195,7 @@ export default {
this.processingBatchDelete = false
this.$store.commit('setProcessingBatch', false)
this.$store.commit('setSelectedLibraryItems', [])
this.$eventBus.$emit('bookshelf-clear-selection')
this.$eventBus.$emit('bookshelf_clear_selection')
})
.catch((error) => {
this.$toast.error('Batch delete failed')

4
client/components/app/BookShelfRow.vue
View File

@ -188,11 +188,11 @@ export default {
}
},
mounted() {
this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$on('item-selected', this.itemSelectedEvt)
},
beforeDestroy() {
this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$off('item-selected', this.itemSelectedEvt)
}
}

100
client/components/app/BookShelfToolbar.vue
View File

@ -1,16 +1,16 @@
<template>
<div class="w-full h-20 md:h-10 relative">
<div class="flex md:hidden h-10 items-center">
<nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<p class="text-sm">Home</p>
</nuxt-link>
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<p class="text-sm">Library</p>
</nuxt-link>
<nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<p class="text-sm">Series</p>
</nuxt-link>
<nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
<p class="text-sm">Collections</p>
</nuxt-link>
<nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
@ -42,9 +42,10 @@
</div>
<div class="flex-grow hidden sm:inline-block" />
<ui-checkbox v-show="showSortFilters && !isPodcast" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
<controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
<controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
<ui-checkbox v-if="isLibraryPage && !isPodcastLibrary" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
<controls-filter-select v-if="isLibraryPage" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
<controls-order-select v-if="isLibraryPage" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
<controls-sort-select v-if="isSeriesPage" v-model="seriesSort" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
<ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
</template>
@ -81,11 +82,29 @@ export default {
settings: {},
hasInit: false,
totalEntities: 0,
keywordFilter: null,
keywordTimeout: null,
processingSeries: false,
processingIssues: false,
processingAuthors: false
processingAuthors: false,
seriesSort: 'name',
seriesSortDesc: false,
seriesSortItems: [
{
text: 'Name',
value: 'name'
},
{
text: '# of Books',
value: 'numBooks'
},
{
text: 'Added At',
value: 'addedAt'
},
{
text: 'Total Duration',
value: 'totalDuration'
}
]
}
},
computed: {
@ -98,25 +117,6 @@ export default {
userCanUpdate() {
return this.$store.getters['user/getUserCanUpdate']
},
isPodcast() {
return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
},
showSortFilters() {
return this.page === ''
},
numShowing() {
return this.totalEntities
},
entityName() {
if (this.isPodcast) return 'Podcasts'
if (!this.page) return 'Books'
if (this.page === 'series') return 'Series'
if (this.page === 'collections') return 'Collections'
return ''
},
paramId() {
return this.$route.params ? this.$route.params.id || '' : ''
},
currentLibraryId() {
return this.$store.state.libraries.currentLibraryId
},
@ -126,14 +126,30 @@ export default {
isPodcastLibrary() {
return this.currentLibraryMediaType === 'podcast'
},
homePage() {
isLibraryPage() {
return this.page === ''
},
isSeriesPage() {
return this.page === 'series'
},
isCollectionsPage() {
return this.page === 'collections'
},
isHomePage() {
return this.$route.name === 'library-library'
},
libraryBookshelfPage() {
return this.$route.name === 'library-library-bookshelf-id'
isPodcastSearchPage() {
return this.$route.name === 'library-library-podcast-search'
},
showLibrary() {
return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
numShowing() {
return this.totalEntities
},
entityName() {
if (this.isPodcastLibrary) return 'Podcasts'
if (!this.page) return 'Books'
if (this.isSeriesPage) return 'Series'
if (this.isCollectionsPage) return 'Collections'
return ''
},
seriesName() {
return this.selectedSeries ? this.selectedSeries.name : null
@ -153,9 +169,6 @@ export default {
},
isIssuesFilter() {
return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
},
isPodcastSearchPage() {
return this.$route.name === 'library-library-podcast-search'
}
},
methods: {
@ -235,6 +248,10 @@ export default {
updateFilter() {
this.saveSettings()
},
updateSeriesSort() {
this.$store.commit('libraries/setSeriesSort', { sort: this.seriesSort, desc: this.seriesSortDesc })
this.$eventBus.$emit('series-sort-updated')
},
updateCollapseSeries() {
this.saveSettings()
},
@ -251,15 +268,6 @@ export default {
},
setBookshelfTotalEntities(totalEntities) {
this.totalEntities = totalEntities
},
keywordFilterInput() {
clearTimeout(this.keywordTimeout)
this.keywordTimeout = setTimeout(() => {
this.keywordUpdated(this.keywordFilter)
}, 1000)
},
keywordUpdated() {
this.$eventBus.$emit('bookshelf-keyword-filter', this.keywordFilter)
}
},
mounted() {

29
client/components/app/LazyBookshelf.vue
View File

@ -98,6 +98,12 @@ export default {
if (!this.page) return 'books'
return this.page
},
seriesSortBy() {
return this.$store.state.libraries.seriesSort
},
seriesSortDesc() {
return this.$store.state.libraries.seriesSortDesc
},
orderBy() {
return this.$store.getters['user/getUserSetting']('orderBy')
},
@ -417,12 +423,15 @@ export default {
this.$nextTick(this.remountEntities)
},
buildSearchParams() {
if (this.page === 'search' || this.page === 'series' || this.page === 'collections') {
if (this.page === 'search' || this.page === 'collections') {
return ''
}
let searchParams = new URLSearchParams()
if (this.page === 'series-books') {
if (this.page === 'series') {
searchParams.set('sort', this.seriesSortBy)
searchParams.set('desc', this.seriesSortDesc ? 1 : 0)
} else if (this.page === 'series-books') {
searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
} else {
if (this.filterBy && this.filterBy !== 'all') {
@ -458,6 +467,12 @@ export default {
return false
},
seriesSortUpdated() {
var wasUpdated = this.checkUpdateSearchParams()
if (wasUpdated) {
this.resetEntities()
}
},
settingsUpdated(settings) {
var wasUpdated = this.checkUpdateSearchParams()
if (wasUpdated) {
@ -469,10 +484,7 @@ export default {
scroll(e) {
if (!e || !e.target) return
var { scrollTop } = e.target
// clearTimeout(this.scrollTimeout)
// this.scrollTimeout = setTimeout(() => {
this.handleScroll(scrollTop)
// }, 250)
},
libraryItemAdded(libraryItem) {
console.log('libraryItem added', libraryItem)
@ -604,7 +616,8 @@ export default {
}
})
this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$on('socket_init', this.socketInit)
this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
@ -628,7 +641,9 @@ export default {
if (bookshelf) {
bookshelf.removeEventListener('scroll', this.scroll)
}
this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$off('socket_init', this.socketInit)
this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')

2
client/components/app/SideRail.vue
View File

@ -64,7 +64,7 @@
</nuxt-link>
<nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
<icons-podcast-svg class="w-6 h-6" />
<span class="abs-icons icon-podcast text-xl"></span>
<p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>

2
client/components/cards/LazySeriesCard.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
<div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
<div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
<div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
<covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />

26
client/components/controls/EpisodeSortSelect.vue → client/components/controls/SortSelect.vue
View File

@ -26,29 +26,15 @@
export default {
props: {
value: String,
descending: Boolean
descending: Boolean,
items: {
type: Array,
default: () => []
}
},
data() {
return {
showMenu: false,
items: [
{
text: 'Pub Date',
value: 'publishedAt'
},
{
text: 'Title',
value: 'title'
},
{
text: 'Season',
value: 'season'
},
{
text: 'Episode',
value: 'episode'
}
]
showMenu: false
}
},
computed: {

22
client/components/tables/podcast/EpisodesTable.vue
View File

@ -12,7 +12,7 @@
</template>
<template v-else>
<controls-episode-filter-select v-model="filterKey" class="w-36 md:w-36 h-9 ml-1 sm:ml-4" />
<controls-episode-sort-select v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
<controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
</template>
</div>
<p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
@ -42,7 +42,25 @@ export default {
showPodcastRemoveModal: false,
selectedEpisodes: [],
episodesToRemove: [],
processing: false
processing: false,
sortItems: [
{
text: 'Pub Date',
value: 'publishedAt'
},
{
text: 'Title',
value: 'title'
},
{
text: 'Season',
value: 'season'
},
{
text: 'Episode',
value: 'episode'
}
]
}
},
watch: {

4
client/components/widgets/EpisodeSlider.vue
View File

@ -150,11 +150,11 @@ export default {
this.setScrollVars()
},
mounted() {
this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$on('item-selected', this.itemSelectedEvt)
},
beforeDestroy() {
this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$off('item-selected', this.itemSelectedEvt)
}
}

4
client/components/widgets/ItemSlider.vue
View File

@ -130,11 +130,11 @@ export default {
this.setScrollVars()
},
mounted() {
this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$on('item-selected', this.itemSelectedEvt)
},
beforeDestroy() {
this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
this.$eventBus.$off('item-selected', this.itemSelectedEvt)
}
}

2
client/layouts/default.vue
View File

@ -474,7 +474,7 @@ export default {
if (this.$store.getters['getNumLibraryItemsSelected'] && name === 'Escape') {
// ESCAPE key cancels batch selection
this.$store.commit('setSelectedLibraryItems', [])
this.$eventBus.$emit('bookshelf-clear-selection')
this.$eventBus.$emit('bookshelf_clear_selection')
e.preventDefault()
return
}

8
client/store/libraries.js
View File

@ -8,7 +8,9 @@ export const state = () => ({
folders: [],
issues: 0,
folderLastUpdate: 0,
filterData: null
filterData: null,
seriesSort: 'name',
seriesSortDesc: false
})
export const getters = {
@ -289,5 +291,9 @@ export const mutations = {
state.filterData.languages.sort((a, b) => a.localeCompare(b))
}
}
},
setSeriesSort(state, { sort, desc }) {
state.seriesSort = sort
state.seriesSortDesc = desc
}
}