groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-09 19:01:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update tooltip text formatting and include user progress

Browse source
This commit is contained in:
Greg Lorenzen 2024-07-23 05:42:00 +00:00
parent e919e4f5af
commit f87960e604
1 changed files with 11 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1115,22 +1115,20 @@ export default {
// Truncate the description if it exceeds the maximum length // Truncate the description if it exceeds the maximum length
const truncatedDescription = this.description.length > maxLength ? this.description.substring(0, maxLength) + '...' : this.description const truncatedDescription = this.description.length > maxLength ? this.description.substring(0, maxLength) + '...' : this.description
// Get the duration of the media
const duration = this.media.duration ? this.$elapsedPrettyExtended(this.media.duration, false) : '' const duration = this.media.duration ? this.$elapsedPrettyExtended(this.media.duration, false) : ''
// Get user progress
// Determine the vertical alignment of the duration based on the length of the description const elapsedPretty = this.userProgress ? this.$elapsedPrettyExtended(this.userProgress.currentTime, true) : ''
const durationVerticalAlign = this.description.length < 200 ? 'top' : 'middle'
// Build the tooltip text using a table format // Build the tooltip text using a table format
let tooltipText = '<table style="text-align: left; width: 100%;">' let tooltipText = '<div style="text-align: left; width: 100%;">'
tooltipText += '<tr>' if (elapsedPretty) {
tooltipText += `<th style="padding-right: 10px;"><strong>${this.$strings.LabelDuration}</strong></th>` tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${elapsedPretty} / ${duration}</div>`
tooltipText += `<th><strong>${this.$strings.LabelDescription}</strong></th>` } else {
tooltipText += '</tr>' tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${duration}</div>`
tooltipText += '<tr>' }
tooltipText += `<td style="padding-right: 10px; vertical-align: ${durationVerticalAlign}; white-space: nowrap;">${duration}</td>` tooltipText += `<div>${truncatedDescription}</div>`
tooltipText += `<td>${truncatedDescription}</td>` tooltipText += '</div>'
tooltipText += '</tr>'
tooltipText += '</table>'
return tooltipText return tooltipText
} }