mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-04 02:05:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add:Experimental authors page layout #187,Add:Square covers #210

Browse source
This commit is contained in:
advplyr 2021-12-02 19:02:38 -06:00
parent 9a6ba3d0de
commit d544540454
24 changed files with 304 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/components/tables/CollectionBooksTable.vue
View file

@ -11,7 +11,7 @@
<draggable v-model="booksCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
<transition-group type="transition" :name="!drag ? 'collection-book' : null">
<template v-for="book in booksCopy">
<tables-collection-book-table-row :key="book.id" :is-dragging="drag" :book="book" :collection-id="collectionId" class="item" :class="drag ? '' : 'collection-book-item'" @edit="editBook" />
<tables-collection-book-table-row :key="book.id" :is-dragging="drag" :book="book" :collection-id="collectionId" :book-cover-aspect-ratio="bookCoverAspectRatio" class="item" :class="drag ? '' : 'collection-book-item'" @edit="editBook" />
</template>
</transition-group>
</draggable>
@ -51,6 +51,12 @@ export default {
}
},
computed: {
coverAspectRatio() {
return this.$store.getters['getServerSetting']('coverAspectRatio')
},
bookCoverAspectRatio() {
return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
},
totalDuration() {
var _total = 0
this.books.forEach((book) => {

13
client/components/tables/collection/BookTableRow.vue
View file

@ -6,9 +6,9 @@
<span class="material-icons drag-handle text-xl">menu</span>
</div>
</div>
<div class="h-full relative" :style="{ width: '50px' }">
<covers-book-cover :audiobook="book" :width="50" />
<div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full" v-show="isHovering && showPlayBtn">
<div class="h-full relative" :style="{ width: coverWidth + 'px' }">
<covers-book-cover :audiobook="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
<span class="material-icons">play_arrow</span>
</div>
@ -57,7 +57,8 @@ export default {
type: Object,
default: () => {}
},
isDragging: Boolean
isDragging: Boolean,
bookCoverAspectRatio: Number
},
data() {
return {
@ -117,6 +118,10 @@ export default {
},
userIsRead() {
return this.userAudiobook ? !!this.userAudiobook.isRead : false
},
coverWidth() {
if (this.bookCoverAspectRatio === 1) return 50 * 1.6
return 50
}
},
methods: {