Merge pull request #3117 from mikiher/show-subtitles

New feature: Show Subtitles

client/components/app/Appbar.vue

@@ -170,13 +170,13 @@ export default {
 
       if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
         options.push({
-          text: 'Quick Embed Metadata',
+          text: this.$strings.ButtonQuickEmbedMetadata,
           action: 'quick-embed'
         })
       }
 
       options.push({
-        text: 'Re-Scan',
+        text: this.$strings.ButtonReScan,
         action: 'rescan'
       })
 

client/components/app/BookShelfToolbar.vue

@@ -53,7 +53,6 @@
           <span class="font-mono">{{ numShowing }}</span>
         </div>
         <div class="flex-grow" />
-        <ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
 
         <!-- RSS feed -->
         <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
@@ -68,9 +67,6 @@
 
         <div class="flex-grow hidden sm:inline-block" />
 
-        <!-- 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" />
-
         <!-- library filter select -->
         <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
 
@@ -88,11 +84,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-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
+      </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">
         <div class="flex-grow" />
         <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
         <div class="flex-grow" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- authors page -->
       <template v-else-if="page === 'authors'">
@@ -151,11 +153,13 @@ export default {
 
       if (this.isSeriesRemovedFromContinueListening) {
         items.push({
-          text: 'Re-Add Series to Continue Listening',
+          text: this.$strings.LabelReAddSeriesToContinueListening,
           action: 're-add-to-continue-listening'
         })
       }
 
+      this.addSubtitlesMenuItem(items)
+
       return items
     },
     seriesSortItems() {
@@ -318,11 +322,14 @@ export default {
 
       if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
         items.push({
-          text: 'Export OPML',
+          text: this.$strings.LabelExportOPML,
           action: 'export-opml'
         })
       }
 
+      this.addSubtitlesMenuItem(items)
+      this.addCollapseSeriesMenuItem(items)
+
       return items
     },
     showPlaylists() {
@@ -330,9 +337,70 @@ export default {
     }
   },
   methods: {
+    addSubtitlesMenuItem(items) {
+      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
+        if (this.settings.showSubtitles) {
+          items.push({
+            text: this.$strings.LabelHideSubtitles,
+            action: 'hide-subtitles'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelShowSubtitles,
+            action: 'show-subtitles'
+          })
+        }
+      }
+    },
+    addCollapseSeriesMenuItem(items) {
+      if (this.isLibraryPage && this.isBookLibrary && !this.isBatchSelecting) {
+        if (this.settings.collapseSeries) {
+          items.push({
+            text: this.$strings.LabelExpandSeries,
+            action: 'expand-series'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelCollapseSeries,
+            action: 'collapse-series'
+          })
+        }
+      }
+    },
+    handleSubtitlesAction(action) {
+      if (action === 'show-subtitles') {
+        this.settings.showSubtitles = true
+        this.updateShowSubtitles()
+        return true
+      }
+      if (action === 'hide-subtitles') {
+        this.settings.showSubtitles = false
+        this.updateShowSubtitles()
+        return true
+      }
+      return false
+    },
+    handleCollapseSeriesAction(action) {
+      if (action === 'collapse-series') {
+        this.settings.collapseSeries = true
+        this.updateCollapseSeries()
+        return true
+      }
+      if (action === 'expand-series') {
+        this.settings.collapseSeries = false
+        this.updateCollapseSeries()
+        return true
+      }
+      return false
+    },
     contextMenuAction({ action }) {
       if (action === 'export-opml') {
         this.exportOPML()
+        return
+      } else if (this.handleSubtitlesAction(action)) {
+        return
+      } else if (this.handleCollapseSeriesAction(action)) {
+        return
       }
     },
     exportOPML() {
@@ -353,6 +421,8 @@ export default {
           return
         }
         this.markSeriesFinished()
+      } else if (this.handleSubtitlesAction(action)) {
+        return
       }
     },
     showOpenSeriesRSSFeed() {
@@ -482,6 +552,9 @@ export default {
     updateCollapseBookSeries() {
       this.saveSettings()
     },
+    updateShowSubtitles() {
+      this.saveSettings()
+    },
     updateAuthorSort() {
       this.saveSettings()
     },

client/components/cards/LazyBookCard.vue

@@ -132,6 +132,9 @@
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
+      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <p cy-id="subtitle" class="truncate" ref="displaySubtitle" :style="{ fontSize: 0.6 + 'em' }">{{ displaySubtitle }}</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>
@@ -171,6 +174,7 @@ export default {
       selected: false,
       isSelectionMode: false,
       displayTitleTruncated: false,
+      displaySubtitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -237,7 +241,7 @@ export default {
       return this._libraryItem.mediaType
     },
     isPodcast() {
-      return this.mediaType === 'podcast'
+      return this.mediaType === 'podcast' || this.store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
     },
     isMusic() {
       return this.mediaType === 'music'
@@ -339,6 +343,13 @@ export default {
       if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
       return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix || '\u00A0' : this.title || '\u00A0'
     },
+    displaySubtitle() {
+      if (!this.libraryItem) return '\u00A0'
+      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
+      return ''
+    },
     displayLineTwo() {
       if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
@@ -644,6 +655,9 @@ export default {
     },
     mediaItemShare() {
       return this._libraryItem.mediaItemShare || null
+    },
+    showSubtitles() {
+      return !this.isPodcast && this.store.getters['user/getUserSetting']('showSubtitles')
     }
   },
   methods: {
@@ -685,6 +699,9 @@ export default {
         if (this.$refs.displayTitle) {
           this.displayTitleTruncated = this.$refs.displayTitle.scrollWidth > this.$refs.displayTitle.clientWidth
         }
+        if (this.$refs.displaySubtitle) {
+          this.displaySubtitleTruncated = this.$refs.displaySubtitle.scrollWidth > this.$refs.displaySubtitle.clientWidth
+        }
       })
     },
     clickCard(e) {

client/cypress/tests/components/cards/LazyBookCard.cy.js

@@ -11,7 +11,7 @@ function createMountOptions() {
     mediaType: 'book',
     media: {
       id: 'book1',
-      metadata: { title: 'The Fellowship of the Ring', titleIgnorePrefix: 'Fellowship of the Ring', authorName: 'J. R. R. Tolkien' },
+      metadata: { title: 'The Fellowship of the Ring', titleIgnorePrefix: 'Fellowship of the Ring', authorName: 'J. R. R. Tolkien', subtitle: 'The Lord of the Rings, Book 1' },
       numTracks: 1
     }
   }
@@ -138,6 +138,16 @@ describe('LazyBookCard', () => {
     })
   })
 
+  it('shows subtitle when showSubtitles settings is true', () => {
+    mountOptions.mocks.$store.getters['user/getUserSetting'] = (settingName) => {
+      if (settingName === 'showSubtitles') return true
+    }
+    cy.mount(LazyBookCard, mountOptions)
+
+    cy.get('&titleImageNotReady').should('be.hidden')
+    cy.get('&subtitle').should('be.visible').and('have.text', 'The Lord of the Rings, Book 1')
+  })
+
   it('shows overlay on mouseover', () => {
     cy.mount(LazyBookCard, mountOptions)
     cy.get('#book-card-0').trigger('mouseover')

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

@@ -59,6 +59,7 @@
   "ButtonPurgeItemsCache": "Purge Items Cache",
   "ButtonQueueAddItem": "Add to queue",
   "ButtonQueueRemoveItem": "Remove from queue",
+  "ButtonQuickEmbedMetadata": "Quick Embed Metadata",
   "ButtonQuickMatch": "Quick Match",
   "ButtonReScan": "Re-Scan",
   "ButtonRead": "Read",
@@ -293,9 +294,11 @@
   "LabelEpisodeTitle": "Episode Title",
   "LabelEpisodeType": "Episode Type",
   "LabelExample": "Example",
+  "LabelExpandSeries": "Expand Series",
   "LabelExplicit": "Explicit",
   "LabelExplicitChecked": "Explicit (checked)",
   "LabelExplicitUnchecked": "Not Explicit (unchecked)",
+  "LabelExportOPML": "Export OPML",
   "LabelFeedURL": "Feed URL",
   "LabelFetchingMetadata": "Fetching Metadata",
   "LabelFile": "File",
@@ -319,6 +322,7 @@
   "LabelHardDeleteFile": "Hard delete file",
   "LabelHasEbook": "Has ebook",
   "LabelHasSupplementaryEbook": "Has supplementary ebook",
+  "LabelHideSubtitles": "Hide Subtitles",
   "LabelHighestPriority": "Highest priority",
   "LabelHost": "Host",
   "LabelHour": "Hour",
@@ -446,6 +450,7 @@
   "LabelRSSFeedPreventIndexing": "Prevent Indexing",
   "LabelRSSFeedSlug": "RSS Feed Slug",
   "LabelRSSFeedURL": "RSS Feed URL",
+  "LabelReAddSeriesToContinueListening": "Re-add series to Continue Listening",
   "LabelRead": "Read",
   "LabelReadAgain": "Read Again",
   "LabelReadEbookWithoutProgress": "Read ebook without keeping progress",
@@ -516,6 +521,7 @@
   "LabelShareURL": "Share URL",
   "LabelShowAll": "Show All",
   "LabelShowSeconds": "Show seconds",
+  "LabelShowSubtitles": "Show Subtitles",
   "LabelSize": "Size",
   "LabelSleepTimer": "Sleep timer",
   "LabelSlug": "Slug",