{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"
+{{ displaySubtitle }}
+{{ displayLineTwo || ' ' }}
{{ displaySortLine }}
@@ -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 : 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 @@ -635,6 +646,9 @@ export default { }, mediaItemShare() { return this._libraryItem.mediaItemShare || null + }, + showSubtitles() { + return !this.isPodcast && this.store.getters['user/getUserSetting']('showSubtitles') } }, methods: { @@ -676,6 +690,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) { diff --git a/client/cypress/tests/components/cards/LazyBookCard.cy.js b/client/cypress/tests/components/cards/LazyBookCard.cy.js index 52a1f00b..c39c0302 100644 --- a/client/cypress/tests/components/cards/LazyBookCard.cy.js +++ b/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') diff --git a/client/store/user.js b/client/store/user.js index 70746bc1..3555d63e 100644 --- a/client/store/user.js +++ b/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,