217 lines
7.5 KiB
Vue
217 lines
7.5 KiB
Vue
<template>
|
|
<div class="w-full px-1 md:px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
|
|
<div v-if="book" class="flex h-18 md:h-[5.5rem]">
|
|
<div class="w-10 min-w-10 md:w-16 md:max-w-16 h-full">
|
|
<div class="flex h-full items-center justify-center">
|
|
<span class="material-symbols drag-handle text-lg md:text-xl">menu</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-full flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
|
|
<div class="relative" :style="{ height: coverHeight + 'px', minHeight: coverHeight + 'px', maxHeight: coverHeight + 'px' }">
|
|
<covers-book-cover :library-item="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
|
<div class="absolute top-0 left-0 flex items-center justify-center bg-black bg-opacity-50 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-symbols fill text-2xl">play_arrow</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow overflow-hidden max-w-48 md:max-w-md h-full flex items-center px-2 md:px-3">
|
|
<div>
|
|
<div class="truncate max-w-48 md:max-w-md">
|
|
<nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline text-sm md:text-base">{{ bookTitle }}</nuxt-link>
|
|
</div>
|
|
<div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
|
|
<nuxt-link v-for="_series in seriesList" :key="_series.id" :to="`/library/${book.libraryId}/series/${_series.id}`" class="hover:underline font-sans text-gray-300"> {{ _series.text }}</nuxt-link>
|
|
</div>
|
|
<div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
|
|
<template v-for="(author, index) in bookAuthors">
|
|
<nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
|
|
><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span>
|
|
</template>
|
|
</div>
|
|
<p v-if="media.duration" class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
|
|
<div class="flex h-full items-center">
|
|
<ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
|
|
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
|
|
</ui-tooltip>
|
|
<div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
|
|
<ui-icon-btn icon="edit" borderless @click="clickEdit" />
|
|
</div>
|
|
<div v-if="userCanDelete" class="mx-1">
|
|
<ui-icon-btn icon="close" borderless @click="removeClick" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
collectionId: String,
|
|
book: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
isDragging: Boolean,
|
|
bookCoverAspectRatio: Number
|
|
},
|
|
data() {
|
|
return {
|
|
isProcessingReadUpdate: false,
|
|
processingRemove: false,
|
|
isHovering: false
|
|
}
|
|
},
|
|
watch: {
|
|
isDragging: {
|
|
handler(newVal) {
|
|
if (newVal) {
|
|
this.isHovering = false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
translateDistance() {
|
|
if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
|
|
else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
|
|
return '-translate-x-24'
|
|
},
|
|
media() {
|
|
return this.book.media || {}
|
|
},
|
|
mediaMetadata() {
|
|
return this.media.metadata || {}
|
|
},
|
|
tracks() {
|
|
return this.media.tracks || []
|
|
},
|
|
bookTitle() {
|
|
return this.mediaMetadata.title || ''
|
|
},
|
|
bookAuthors() {
|
|
return this.mediaMetadata.authors || []
|
|
},
|
|
bookDuration() {
|
|
return this.$elapsedPretty(this.media.duration)
|
|
},
|
|
series() {
|
|
return this.mediaMetadata.series || []
|
|
},
|
|
seriesList() {
|
|
return this.series.map((se) => {
|
|
let text = se.name
|
|
if (se.sequence) text += ` #${se.sequence}`
|
|
return {
|
|
...se,
|
|
text
|
|
}
|
|
})
|
|
},
|
|
isMissing() {
|
|
return this.book.isMissing
|
|
},
|
|
isInvalid() {
|
|
return this.book.isInvalid
|
|
},
|
|
isStreaming() {
|
|
return this.$store.getters['getLibraryItemIdStreaming'] === this.book.id
|
|
},
|
|
showPlayBtn() {
|
|
return !this.isMissing && !this.isInvalid && !this.isStreaming && this.tracks.length
|
|
},
|
|
itemProgress() {
|
|
return this.$store.getters['user/getUserMediaProgress'](this.book.id)
|
|
},
|
|
userIsFinished() {
|
|
return this.itemProgress ? !!this.itemProgress.isFinished : false
|
|
},
|
|
coverSize() {
|
|
return this.$store.state.globals.isMobile ? 30 : 50
|
|
},
|
|
coverHeight() {
|
|
return this.coverSize * 1.6
|
|
},
|
|
coverWidth() {
|
|
if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
|
|
return this.coverSize
|
|
},
|
|
userCanUpdate() {
|
|
return this.$store.getters['user/getUserCanUpdate']
|
|
},
|
|
userCanDelete() {
|
|
return this.$store.getters['user/getUserCanDelete']
|
|
}
|
|
},
|
|
methods: {
|
|
mouseover() {
|
|
if (this.isDragging) return
|
|
this.isHovering = true
|
|
},
|
|
mouseleave() {
|
|
this.isHovering = false
|
|
},
|
|
playClick() {
|
|
const queueItems = [
|
|
{
|
|
libraryItemId: this.book.id,
|
|
libraryId: this.book.libraryId,
|
|
episodeId: null,
|
|
title: this.bookTitle,
|
|
subtitle: this.bookAuthors.map((au) => au.name).join(', '),
|
|
caption: '',
|
|
duration: this.media.duration || null,
|
|
coverPath: this.media.coverPath || null
|
|
}
|
|
]
|
|
|
|
this.$eventBus.$emit('play-item', {
|
|
libraryItemId: this.book.id,
|
|
queueItems
|
|
})
|
|
},
|
|
clickEdit() {
|
|
this.$emit('edit', this.book)
|
|
},
|
|
toggleFinished() {
|
|
var updatePayload = {
|
|
isFinished: !this.userIsFinished
|
|
}
|
|
this.isProcessingReadUpdate = true
|
|
this.$axios
|
|
.$patch(`/api/me/progress/${this.book.id}`, updatePayload)
|
|
.then(() => {
|
|
this.isProcessingReadUpdate = false
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed', error)
|
|
this.isProcessingReadUpdate = false
|
|
this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
|
|
})
|
|
},
|
|
removeClick() {
|
|
this.processingRemove = true
|
|
|
|
this.$axios
|
|
.$delete(`/api/collections/${this.collectionId}/book/${this.book.id}`)
|
|
.then((updatedCollection) => {
|
|
console.log(`Book removed from collection`, updatedCollection)
|
|
this.$toast.success(this.$strings.ToastRemoveItemFromCollectionSuccess)
|
|
this.processingRemove = false
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to remove book from collection', error)
|
|
this.$toast.error(this.$strings.ToastRemoveItemFromCollectionFailed)
|
|
this.processingRemove = false
|
|
})
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script> |