2021-08-21 16:15:44 +02:00
|
|
|
<template>
|
|
|
|
<div class="w-full border-b border-gray-700 pb-2">
|
|
|
|
<div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
|
2022-04-13 15:26:43 +02:00
|
|
|
<div class="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
|
|
|
|
<img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
|
|
|
|
</div>
|
2022-04-14 01:13:39 +02:00
|
|
|
<div v-if="!isPodcast" class="px-4 flex-grow">
|
2021-08-21 16:15:44 +02:00
|
|
|
<div class="flex items-center">
|
2022-06-29 00:32:46 +02:00
|
|
|
<h1 class="text-base">{{ book.title }}</h1>
|
2021-08-21 16:15:44 +02:00
|
|
|
<div class="flex-grow" />
|
2022-03-14 01:34:31 +01:00
|
|
|
<p>{{ book.publishedYear }}</p>
|
2021-08-21 16:15:44 +02:00
|
|
|
</div>
|
2022-06-29 00:32:46 +02:00
|
|
|
<p class="text-gray-300 text-sm">{{ book.author }}</p>
|
|
|
|
<div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
|
|
|
|
<div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
|
|
|
|
<p class="leading-3 text-xs text-gray-400">
|
|
|
|
{{ series.series }}<span v-if="series.volumeNumber"> #{{ series.volumeNumber }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-21 16:15:44 +02:00
|
|
|
<div class="w-full max-h-12 overflow-hidden">
|
2021-10-28 21:41:42 +02:00
|
|
|
<p class="text-gray-500 text-xs">{{ book.description }}</p>
|
2021-08-21 16:15:44 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-04-14 01:13:39 +02:00
|
|
|
<div v-else class="px-4 flex-grow">
|
|
|
|
<h1>{{ book.title }}</h1>
|
|
|
|
<p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
|
|
|
|
<p class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
|
|
|
|
<p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
|
|
|
|
</div>
|
2021-08-21 16:15:44 +02:00
|
|
|
</div>
|
|
|
|
<div v-if="bookCovers.length > 1" class="flex">
|
|
|
|
<template v-for="cover in bookCovers">
|
|
|
|
<div :key="cover" class="border-2 hover:border-yellow-300 border-transparent" :class="cover === selectedCover ? 'border-yellow-200' : ''" @mousedown.stop @mouseup.stop @click.stop="clickCover(cover)">
|
|
|
|
<img :src="cover" class="h-20 w-12 object-cover mr-1" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
book: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {}
|
2021-12-03 02:40:42 +01:00
|
|
|
},
|
2022-04-14 01:13:39 +02:00
|
|
|
isPodcast: Boolean,
|
2021-12-03 02:40:42 +01:00
|
|
|
bookCoverAspectRatio: Number
|
2021-08-21 16:15:44 +02:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
selectedCover: null
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
bookCovers() {
|
|
|
|
return this.book.covers ? this.book.covers || [] : []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
selectMatch() {
|
|
|
|
var book = { ...this.book }
|
|
|
|
book.cover = this.selectedCover
|
|
|
|
this.$emit('select', this.book)
|
|
|
|
},
|
|
|
|
clickCover(cover) {
|
|
|
|
this.selectedCover = cover
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
2021-10-28 21:41:42 +02:00
|
|
|
this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
|
2021-08-21 16:15:44 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|