Skip to content

Commit

Permalink
Merge pull request #3117 from mikiher/show-subtitles
Browse files Browse the repository at this point in the history 
New feature: Show Subtitles
  • Loading branch information
@advplyr
advplyr authored Jul 9, 2024
2 parents 93114b2 + 8c4afa1 commit 10cb8eb
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 4,682 deletions.
4 changes: 2 additions & 2 deletions client/components/app/Appbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
Expand Down
85 changes: 79 additions & 6 deletions client/components/app/BookShelfToolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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" />

Expand All @@ -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'">
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -318,21 +322,85 @@ 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() {
return this.$store.state.libraries.numUserPlaylists > 0
}
},
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() {
Expand All @@ -353,6 +421,8 @@ export default {
return
}
this.markSeriesFinished()
} else if (this.handleSubtitlesAction(action)) {
return
}
},
showOpenSeriesRSSFeed() {
Expand Down Expand Up @@ -482,6 +552,9 @@ export default {
updateCollapseBookSeries() {
this.saveSettings()
},
updateShowSubtitles() {
this.saveSettings()
},
updateAuthorSort() {
this.saveSettings()
},
Expand Down
19 changes: 18 additions & 1 deletion client/components/cards/LazyBookCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -171,6 +174,7 @@ export default {
selected: false,
isSelectionMode: false,
displayTitleTruncated: false,
displaySubtitleTruncated: false,
showCoverBg: false
}
},
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -644,6 +655,9 @@ export default {
},
mediaItemShare() {
return this._libraryItem.mediaItemShare || null
},
showSubtitles() {
return !this.isPodcast && this.store.getters['user/getUserSetting']('showSubtitles')
}
},
methods: {
Expand Down Expand Up @@ -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) {
Expand Down
Loading

0 comments on commit 10cb8eb

Please sign in to comment.