Merge 9e85525c5d into 190a1000d9

client/components/app/BookShelfToolbar.vue

@@ -157,6 +157,7 @@ export default {
       }
 
       this.addSubtitlesMenuItem(items)
+      this.addDetailsOnHoverMenuItem(items)
       this.addCollapseSubSeriesMenuItem(items)
 
       return items
@@ -329,6 +330,7 @@ export default {
 
       this.addSubtitlesMenuItem(items)
       this.addCollapseSeriesMenuItem(items)
+      this.addDetailsOnHoverMenuItem(items)
 
       return items
     },
@@ -367,6 +369,21 @@ export default {
         }
       }
     },
+    addDetailsOnHoverMenuItem(items) {
+      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
+        if (this.settings.showDetailsOnHover) {
+          items.push({
+            text: this.$strings.LabelHideDetailsOnHover,
+            action: 'hide-details-on-hover'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelShowDetailsOnHover,
+            action: 'show-details-on-hover'
+          })
+        }
+      }
+    },
     addCollapseSubSeriesMenuItem(items) {
       if (this.selectedSeries && this.isBookLibrary && !this.isBatchSelecting) {
         if (this.settings.collapseBookSeries) {
@@ -408,6 +425,19 @@ export default {
       }
       return false
     },
+    handleDetailsOnHoverAction(action) {
+      if (action === 'show-details-on-hover') {
+        this.settings.showDetailsOnHover = true
+        this.updateShowDetailsOnHover()
+        return true
+      }
+      if (action === 'hide-details-on-hover') {
+        this.settings.showDetailsOnHover = false
+        this.updateShowDetailsOnHover()
+        return true
+      }
+      return false
+    },
     handleCollapseSubSeriesAction(action) {
       if (action === 'collapse-sub-series') {
         this.settings.collapseBookSeries = true
@@ -429,6 +459,8 @@ export default {
         return
       } else if (this.handleCollapseSeriesAction(action)) {
         return
+      } else if (this.handleDetailsOnHoverAction(action)) {
+        return
       }
     },
     exportOPML() {
@@ -451,6 +483,8 @@ export default {
         this.markSeriesFinished()
       } else if (this.handleSubtitlesAction(action)) {
         return
+      } else if (this.handleDetailsOnHoverAction(action)) {
+        return
       } else if (this.handleCollapseSubSeriesAction(action)) {
         return
       }
@@ -597,6 +631,9 @@ export default {
     updateShowSubtitles() {
       this.saveSettings()
     },
+    updateShowDetailsOnHover() {
+      this.saveSettings()
+    },
     updateAuthorSort() {
       this.saveSettings()
     },

client/components/cards/LazyBookCard.vue

@@ -1,5 +1,6 @@
 <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">
+    <ui-tooltip :disabled="!userShowDetailsOnHover" :direction="'bottom'" :delayOnShow="500" :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 ' }">
         <!-- 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">
@@ -123,6 +124,7 @@
           </div>
         </div>
       </div>
+    </ui-tooltip>
 
     <!-- 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">
@@ -313,6 +315,9 @@ export default {
     authorLF() {
       return this.mediaMetadata.authorNameLF
     },
+    description() {
+      return this.mediaMetadata.description || ''
+    },
     artist() {
       const artists = this.mediaMetadata.artists || []
       return artists.join(', ')
@@ -458,6 +463,9 @@ export default {
     userIsAdminOrUp() {
       return this.store.getters['user/getIsAdminOrUp']
     },
+    userShowDetailsOnHover() {
+      return this.store.getters['user/getUserSetting']('showDetailsOnHover')
+    },
     moreMenuItems() {
       if (this.recentEpisode) {
         const items = [
@@ -1075,6 +1083,30 @@ export default {
           this.showCoverBg = false
         }
       }
+    },
+    getTooltipText() {
+      // Set the maximum length for the description
+      const maxLength = 250
+
+      // Truncate the description if it exceeds the maximum length
+      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) : ''
+      // Get user progress
+      const elapsedPretty = this.userProgress ? this.$elapsedPrettyExtended(this.userProgress.currentTime, true) : ''
+
+      // Build the tooltip text using a table format
+      let tooltipText = '<div style="text-align: left; width: 100%;">'
+      if (elapsedPretty) {
+        tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${elapsedPretty} / ${duration}</div>`
+      } else {
+        tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${duration}</div>`
+      }
+      tooltipText += `<div>${truncatedDescription}</div>`
+      tooltipText += '</div>'
+
+      return tooltipText
     }
   },
   mounted() {

client/store/user.js

@@ -9,6 +9,7 @@ export const state = () => ({
     collapseSeries: false,
     collapseBookSeries: false,
     showSubtitles: false,
+    showDetailsOnHover: false,
     useChapterTrack: false,
     seriesSortBy: 'name',
     seriesSortDesc: false,

client/strings/en-us.json

@@ -367,6 +367,7 @@
   "LabelHardDeleteFile": "Hard delete file",
   "LabelHasEbook": "Has ebook",
   "LabelHasSupplementaryEbook": "Has supplementary ebook",
+  "LabelHideDetailsOnHover": "Hide Details on Hover",
   "LabelHideSubtitles": "Hide Subtitles",
   "LabelHighestPriority": "Highest priority",
   "LabelHost": "Host",
@@ -589,6 +590,7 @@
   "LabelShareOpen": "Share Open",
   "LabelShareURL": "Share URL",
   "LabelShowAll": "Show All",
+  "LabelShowDetailsOnHover": "Show Details on Hover",
   "LabelShowSeconds": "Show seconds",
   "LabelShowSubtitles": "Show Subtitles",
   "LabelSize": "Size",