feat: Add a Show Subtitles option

client/components/app/BookShelfToolbar.vue

@@ -68,6 +68,8 @@
 
         <div class="flex-grow hidden sm:inline-block" />
 
+        <ui-checkbox v-if="isLibraryPage && !isBatchSelecting" v-model="settings.showSubtitles" :label="$strings.LabelShowSubtitles" checkbox-bg="bg" check-color="white" small class="mr-6" @input="updateShowSubtitles" />
+
         <!-- collapse series checkbox -->
         <ui-checkbox v-if="isLibraryPage && isBookLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
 
@@ -88,11 +90,17 @@
 
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
+      <!-- home page -->
+      <template v-else-if="isHome">
+        <div class="flex-grow" />
+        <ui-checkbox v-model="settings.showSubtitles" :label="$strings.LabelShowSubtitles" checkbox-bg="bg" check-color="white" small class="mr-6" @input="updateShowSubtitles" />
+      </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">
         <div class="flex-grow" />
         <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
         <div class="flex-grow" />
+        <ui-checkbox v-model="settings.showSubtitles" :label="$strings.LabelShowSubtitles" checkbox-bg="bg" check-color="white" small class="mr-6" @input="updateShowSubtitles" />
       </template>
       <!-- authors page -->
       <template v-else-if="page === 'authors'">
@@ -482,6 +490,9 @@ export default {
     updateCollapseBookSeries() {
       this.saveSettings()
     },
+    updateShowSubtitles() {
+      this.saveSettings()
+    },
     updateAuthorSort() {
       this.saveSettings()
     },

client/components/app/LazyBookshelf.vue

@@ -120,6 +120,9 @@ export default {
     filterBy() {
       return this.$store.getters['user/getUserSetting']('filterBy')
     },
+    showSubtitles() {
+      return this.$store.getters['user/getUserSetting']('showSubtitles')
+    },
     collapseSeries() {
       return this.$store.getters['user/getUserSetting']('collapseSeries')
     },

client/components/cards/LazyBookCard.vue

@@ -127,6 +127,9 @@
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
+      <ui-tooltip v-if="showSubtitles" :text="displayLineOne" :disabled="!displayLineOneTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <p class="truncate" ref="displayLineOne" :style="{ fontSize: 0.6 + 'em' }">{{ displayLineOne }}</p>
+      </ui-tooltip>
       <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
       <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
@@ -166,6 +169,7 @@ export default {
       selected: false,
       isSelectionMode: false,
       displayTitleTruncated: false,
+      displayLineOneTruncated: false,
       showCoverBg: false
     }
   },
@@ -334,6 +338,13 @@ export default {
       if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
       return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title || '\u00A0'
     },
+    displayLineOne() {
+      if (this.collapsedSeries) return this.collapsedSeries.numBooks === 1 ? '1 book' : `${this.collapsedSeries.numBooks} books`
+      if (this.mediaMetadata.subtitle) return this.mediaMetadata.subtitle
+      if (this.mediaMetadata.seriesName) return this.mediaMetadata.seriesName
+      if (this.mediaMetadata.genres) return this.mediaMetadata.genres.filter((genre) => !['Podcasts', 'Audiobook'].includes(genre)).join(', ') || '\u00A0'
+      return '\u00A0'
+    },
     displayLineTwo() {
       if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
@@ -627,6 +638,9 @@ export default {
     rssFeed() {
       if (this.booksInSeries) return null
       return this._libraryItem.rssFeed || null
+    },
+    showSubtitles() {
+      return this.store.getters['user/getUserSetting']('showSubtitles')
     }
   },
   methods: {
@@ -668,6 +682,9 @@ export default {
         if (this.$refs.displayTitle) {
           this.displayTitleTruncated = this.$refs.displayTitle.scrollWidth > this.$refs.displayTitle.clientWidth
         }
+        if (this.$refs.displayLineOne) {
+          this.displayLineOneTruncated = this.$refs.displayLineOne.scrollWidth > this.$refs.displayLineOne.clientWidth
+        }
       })
     },
     clickCard(e) {

client/store/user.js

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

client/strings/en-us.json

@@ -502,6 +502,7 @@
   "LabelSettingsTimeFormat": "Time Format",
   "LabelShowAll": "Show All",
   "LabelShowSeconds": "Show seconds",
+  "LabelShowSubtitles": "Show Subtitles",
   "LabelSize": "Size",
   "LabelSleepTimer": "Sleep timer",
   "LabelSlug": "Slug",