groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-10 11:21:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Display tooltip with book details on card hover

Browse source
This commit is contained in:
Greg Lorenzen 2024-07-17 21:15:30 +00:00
parent 2998d3ba6a
commit fbaf096507
1 changed files with 119 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

19
client/components/cards/LazyBookCard.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard"> <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
<ui-tooltip :direction="'top'" :text="getTooltipText()">
<div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }"> <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
<!-- When cover image does not fill --> <!-- When cover image does not fill -->
<div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary"> <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
@ -123,6 +124,7 @@
</div> </div>
</div> </div>
</div> </div>
</ui-tooltip>
<!-- Alternative bookshelf title/author/sort --> <!-- Alternative bookshelf title/author/sort -->
<div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full"> <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
@ -333,6 +335,9 @@ export default {
authorLF() { authorLF() {
return this.mediaMetadata.authorNameLF return this.mediaMetadata.authorNameLF
}, },
description() {
return this.mediaMetadata.description || ''
},
artist() { artist() {
const artists = this.mediaMetadata.artists || [] const artists = this.mediaMetadata.artists || []
return artists.join(', ') return artists.join(', ')
@ -1099,6 +1104,20 @@ export default {
this.showCoverBg = false this.showCoverBg = false
} }
} }
},
getTooltipText() {
const maxLength = 500
const truncatedSynopsis = this.description.length > maxLength ? this.description.substring(0, maxLength) + '...' : this.description
const duration = this.media.duration ? this.$elapsedPrettyExtended(this.media.duration, false) : ''
let tooltipText = '<div style="text-align: left;">'
if (truncatedSynopsis) {
tooltipText += `<strong>Synopsis</strong> <br/>${truncatedSynopsis} <br/><br/>`
}
if (duration) {
tooltipText += `<strong>Duration</strong><br/>${duration}`
}
tooltipText += '</div>'
return tooltipText
} }
}, },
mounted() { mounted() {