mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-12-25 13:19:38 +00:00
Update sorting and filtering for podcasts, add title ignore prefix to podcast metadata, check user permissions for podcast episode row UI
This commit is contained in:
advplyr
parent
23cc6bb210
commit
ac097862fc
17 changed files with 154 additions and 335 deletions
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<div class="outer-container">
|
||||
<!-- absolute positioned container -->
|
||||
<div class="inner-container">
|
||||
<div class="relative h-10">
|
||||
<div class="table-header" id="headerdiv">
|
||||
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="header-cell min-w-12 max-w-12"></th>
|
||||
<th class="header-cell min-w-6 max-w-6"></th>
|
||||
<th class="header-cell min-w-64 max-w-64 px-2">Title</th>
|
||||
<th class="header-cell min-w-48 max-w-48 px-2">Author</th>
|
||||
<th class="header-cell min-w-48 max-w-48 px-2">Series</th>
|
||||
<th class="header-cell min-w-24 max-w-24 px-2">Year</th>
|
||||
<th class="header-cell min-w-80 max-w-80 px-2">Description</th>
|
||||
<th class="header-cell min-w-48 max-w-48 px-2">Narrator</th>
|
||||
<th class="header-cell min-w-48 max-w-48 px-2">Genres</th>
|
||||
<th class="header-cell min-w-48 max-w-48 px-2">Tags</th>
|
||||
<th class="header-cell min-w-24 max-w-24 px-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="absolute top-0 left-0 w-full h-full pointer-events-none" :class="isScrollable ? 'header-shadow' : ''" />
|
||||
</div>
|
||||
|
||||
<div ref="tableBody" class="table-body" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;" @scroll="tableScrolled">
|
||||
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<template v-for="book in books">
|
||||
<app-book-list-row :key="book.id" :book="book" @edit="editBook" />
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
books: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScrollable: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
checkIsScrolled() {
|
||||
if (!this.$refs.tableBody) return
|
||||
this.isScrollable = this.$refs.tableBody.scrollTop > 0
|
||||
},
|
||||
tableScrolled() {
|
||||
this.checkIsScrolled()
|
||||
},
|
||||
editBook(book) {
|
||||
var bookIds = this.books.map((e) => e.id)
|
||||
this.$store.commit('setBookshelfBookIds', bookIds)
|
||||
this.$store.commit('showEditModal', book)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkIsScrolled()
|
||||
},
|
||||
beforeDestroy() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.outer-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
height: calc(100% - 50px);
|
||||
width: calc(100% - 10px);
|
||||
margin: 10px;
|
||||
}
|
||||
.inner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.table-header {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.header-shadow {
|
||||
box-shadow: 3px 8px 3px #11111155;
|
||||
}
|
||||
.table-body {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
overflow-y: scroll;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.header-cell {
|
||||
background-color: #22222288;
|
||||
padding: 0px 4px;
|
||||
text-align: left;
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: semi-bold;
|
||||
}
|
||||
.body-cell {
|
||||
text-align: left;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.book-row {
|
||||
background-color: #22222288;
|
||||
}
|
||||
.book-row:nth-child(odd) {
|
||||
background-color: #333;
|
||||
}
|
||||
.book-row.selected {
|
||||
background-color: rgba(0, 255, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
<template>
|
||||
<tr class="book-row" :class="selected ? 'selected' : ''">
|
||||
<td class="body-cell min-w-12 max-w-12">
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-white border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500 w-4 h-4" @click="selectBtnClick">
|
||||
<svg v-if="selected" class="fill-current text-green-500 pointer-events-none w-2.5 h-2.5" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="body-cell min-w-6 max-w-6">
|
||||
<covers-hover-book-cover :audiobook="book" />
|
||||
</td>
|
||||
<td class="body-cell min-w-64 max-w-64 px-2">
|
||||
<nuxt-link :to="`/item/${book.id}`" class="hover:underline">
|
||||
<p class="truncate">
|
||||
{{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
|
||||
</p>
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td class="body-cell min-w-48 max-w-48 px-2">
|
||||
<p class="truncate">{{ book.book.authorFL }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-48 max-w-48 px-2">
|
||||
<p class="truncate">{{ seriesText }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-24 max-w-24 px-2">
|
||||
<p class="truncate">{{ book.book.publishedYear }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-80 max-w-80 px-2">
|
||||
<p class="truncate">{{ book.book.description }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-48 max-w-48 px-2">
|
||||
<p class="truncate">{{ book.book.narrator }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-48 max-w-48 px-2">
|
||||
<p class="truncate">{{ genresText }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-48 max-w-48 px-2">
|
||||
<p class="truncate">{{ tagsText }}</p>
|
||||
</td>
|
||||
<td class="body-cell min-w-24 max-w-24 px-2">
|
||||
<div class="flex">
|
||||
<span v-if="userCanUpdate" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-xl" @click="editClick">edit</span>
|
||||
<span v-if="showPlayButton" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-2xl mx-1" @click="startStream">play_arrow</span>
|
||||
<span v-if="showReadButton" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-xl" @click="openEbook">auto_stories</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
book: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
userAudiobook: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isProcessingReadUpdate: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showExperimentalFeatures() {
|
||||
return this.$store.state.showExperimentalFeatures
|
||||
},
|
||||
libraryItemId() {
|
||||
return this.book.id
|
||||
},
|
||||
selected: {
|
||||
get() {
|
||||
return this.$store.getters['getIsLibraryItemSelected'](this.libraryItemId)
|
||||
},
|
||||
set(val) {
|
||||
if (this.processingBatch) return
|
||||
this.$store.commit('setLibraryItemSelected', { libraryItemId: this.libraryItemId, selected: val })
|
||||
}
|
||||
},
|
||||
processingBatch() {
|
||||
return this.$store.state.processingBatch
|
||||
},
|
||||
bookObj() {
|
||||
return this.book.book || {}
|
||||
},
|
||||
series() {
|
||||
return this.bookObj.series || null
|
||||
},
|
||||
volumeNumber() {
|
||||
return this.bookObj.volumeNumber || null
|
||||
},
|
||||
seriesText() {
|
||||
if (!this.series) return ''
|
||||
if (!this.volumeNumber) return this.series
|
||||
return `${this.series} #${this.volumeNumber}`
|
||||
},
|
||||
genresText() {
|
||||
if (!this.bookObj.genres) return ''
|
||||
return this.bookObj.genres.join(', ')
|
||||
},
|
||||
tagsText() {
|
||||
return (this.book.tags || []).join(', ')
|
||||
},
|
||||
isMissing() {
|
||||
return this.book.isMissing
|
||||
},
|
||||
isInvalid() {
|
||||
return this.book.isInvalid
|
||||
},
|
||||
numEbooks() {
|
||||
return this.book.numEbooks
|
||||
},
|
||||
numTracks() {
|
||||
return this.book.numTracks
|
||||
},
|
||||
isStreaming() {
|
||||
return this.$store.getters['getLibraryItemIdStreaming'] === this.libraryItemId
|
||||
},
|
||||
showReadButton() {
|
||||
return this.showExperimentalFeatures && this.numEbooks
|
||||
},
|
||||
showPlayButton() {
|
||||
return !this.isMissing && !this.isInvalid && this.numTracks && !this.isStreaming
|
||||
},
|
||||
userIsRead() {
|
||||
return this.userAudiobook ? !!this.userAudiobook.isRead : false
|
||||
},
|
||||
userCanUpdate() {
|
||||
return this.$store.getters['user/getUserCanUpdate']
|
||||
},
|
||||
userCanDelete() {
|
||||
return this.$store.getters['user/getUserCanDelete']
|
||||
},
|
||||
userCanDownload() {
|
||||
return this.$store.getters['user/getUserCanDownload']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectBtnClick() {
|
||||
if (this.processingBatch) return
|
||||
this.$store.commit('toggleLibraryItemSelected', this.libraryItemId)
|
||||
},
|
||||
openEbook() {
|
||||
this.$store.commit('showEReader', this.book)
|
||||
},
|
||||
downloadClick() {
|
||||
this.$store.commit('showEditModalOnTab', { libraryItem: this.book, tab: 'download' })
|
||||
},
|
||||
startStream() {
|
||||
this.$eventBus.$emit('play-item', {
|
||||
libraryItemId: this.book.id
|
||||
})
|
||||
},
|
||||
editClick() {
|
||||
this.$emit('edit', this.book)
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="flex-grow hidden sm:inline-block" />
|
||||
|
||||
<ui-checkbox v-show="showSortFilters" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
|
||||
<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" />
|
||||
<!-- <div v-show="showSortFilters" class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
|
||||
|
|
@ -70,6 +70,9 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
isPodcast() {
|
||||
return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
|
||||
},
|
||||
isGridMode() {
|
||||
return this.viewMode === 'grid'
|
||||
},
|
||||
|
|
@ -80,6 +83,7 @@ export default {
|
|||
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'
|
||||
|
|
|
|||
|
|
@ -85,6 +85,9 @@ export default {
|
|||
showExperimentalFeatures() {
|
||||
return this.$store.state.showExperimentalFeatures
|
||||
},
|
||||
isPodcast() {
|
||||
return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
|
||||
},
|
||||
emptyMessage() {
|
||||
if (this.page === 'series') return `You have no series`
|
||||
if (this.page === 'collections') return "You haven't made any collections yet"
|
||||
|
|
@ -386,7 +389,7 @@ export default {
|
|||
searchParams.set('sort', this.orderBy)
|
||||
searchParams.set('desc', this.orderDesc ? 1 : 0)
|
||||
}
|
||||
if (this.collapseSeries) {
|
||||
if (this.collapseSeries && !this.isPodcast) {
|
||||
searchParams.set('collapseseries', 1)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
:bookmarks="bookmarks"
|
||||
:sleep-timer-set="sleepTimerSet"
|
||||
:sleep-timer-remaining="sleepTimerRemaining"
|
||||
:is-podcast="isPodcast"
|
||||
@playPause="playPause"
|
||||
@jumpForward="jumpForward"
|
||||
@jumpBackward="jumpBackward"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue