Skip to content

Commit

Permalink
Add options for title field visibility
Browse files Browse the repository at this point in the history
  • Loading branch information
glorenzen committed Sep 24, 2024
1 parent bb7938f commit 1ebcbe8
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 10 deletions.
19 changes: 11 additions & 8 deletions client/components/content/LibraryItemDetails.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div v-if="narrators?.length" class="flex py-0.5 mt-4">
<div v-if="narrators?.length && fieldVisibility.narrators" class="flex py-0.5 mt-4">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
</div>
Expand All @@ -11,15 +11,15 @@
</template>
</div>
</div>
<div v-if="publishedYear" class="flex py-0.5">
<div v-if="publishedYear && fieldVisibility.publishYear" class="flex py-0.5">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
</div>
<div>
{{ publishedYear }}
</div>
</div>
<div v-if="publisher" class="flex py-0.5">
<div v-if="publisher && fieldVisibility.publisher" class="flex py-0.5">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublisher }}</span>
</div>
Expand All @@ -35,7 +35,7 @@
{{ podcastType }}
</div>
</div>
<div class="flex py-0.5" v-if="genres.length">
<div class="flex py-0.5" v-if="genres.length && fieldVisibility.genres">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
</div>
Expand All @@ -46,7 +46,7 @@
</template>
</div>
</div>
<div class="flex py-0.5" v-if="tags.length">
<div class="flex py-0.5" v-if="tags.length && fieldVisibility.tags">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelTags }}</span>
</div>
Expand All @@ -57,23 +57,23 @@
</template>
</div>
</div>
<div v-if="language" class="flex py-0.5">
<div v-if="language && fieldVisibility.language" class="flex py-0.5">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelLanguage }}</span>
</div>
<div>
<nuxt-link :to="`/library/${libraryId}/bookshelf?filter=languages.${$encode(language)}`" class="hover:underline">{{ language }}</nuxt-link>
</div>
</div>
<div v-if="tracks.length || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
<div v-if="(tracks.length || audioFile || (isPodcast && totalPodcastDuration)) && fieldVisibility.duration" class="flex py-0.5">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
</div>
<div>
{{ durationPretty }}
</div>
</div>
<div class="flex py-0.5">
<div v-if="fieldVisibility.size" class="flex py-0.5">
<div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
<span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSize }}</span>
</div>
Expand Down Expand Up @@ -160,6 +160,9 @@ export default {
},
podcastType() {
return this.mediaMetadata.type
},
fieldVisibility() {
return this.$store.getters['user/getUserSetting']('fieldVisibility')
}
},
methods: {},
Expand Down
62 changes: 62 additions & 0 deletions client/components/modals/ItemFieldVisibilityModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<modals-modal v-model="show" name="field-visibility" :width="600" :height="'unset'">
<template #outer>
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
<p class="text-3xl text-white truncate">{{ $strings.LabelFieldVisibility }}</p>
</div>
</template>
<div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh">
<h3 class="text-xl font-semibold mb-8">{{ $strings.HeaderFields }}</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div v-for="field in fields" :key="field.text" class="flex items-center">
<ui-toggle-switch v-model="field.visible" @input="updateFieldVisibility(field.key, field.visible)" />
<div class="pl-4">
<span>{{ field.text }}</span>
</div>
</div>
</div>
</div>
</modals-modal>
</template>

<script>
export default {
props: {
value: Boolean
},
computed: {
fields() {
return [
{ text: this.$strings.LabelNarrators, key: 'narrators', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').narrators },
{ text: this.$strings.LabelPublishYear, key: 'publishYear', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').publishYear },
{ text: this.$strings.LabelPublisher, key: 'publisher', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').publisher },
{ text: this.$strings.LabelGenres, key: 'genres', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').genres },
{ text: this.$strings.LabelTags, key: 'tags', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').tags },
{ text: this.$strings.LabelLanguage, key: 'language', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').language },
{ text: this.$strings.LabelDuration, key: 'duration', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').duration },
{ text: this.$strings.LabelReleaseDate, key: 'releaseDate', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').releaseDate },
{ text: this.$strings.LabelSize, key: 'size', visible: this.$store.getters['user/getUserSetting']('fieldVisibility').size }
]
},
show: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
},
methods: {
updateFieldVisibility(fieldKey, visible) {
const payload = {
fieldVisibility: {
...this.$store.state.user.settings.fieldVisibility,
[fieldKey]: visible
}
}
this.$store.dispatch('user/updateUserSettings', { fieldVisibility: payload.fieldVisibility })
}
}
}
</script>
18 changes: 18 additions & 0 deletions client/pages/item/_id/index.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamLibraryItem ? 'streaming' : ''">
<div class="w-full h-10 relative">
<div id="toolbar" class="absolute md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end px-2 md:px-8">
<ui-context-menu-dropdown v-if="globalItemSettingsContextMenuItems.length" :items="globalItemSettingsContextMenuItems" :menu-width="110" class="ml-2" @action="globalItemSettingsContextMenuAction" />
</div>
</div>
<div id="item-page-wrapper" class="w-full h-full overflow-y-auto px-2 py-6 lg:p-8">
<div class="flex flex-col lg:flex-row max-w-6xl mx-auto">
<div class="w-full flex justify-center lg:block lg:w-52" style="min-width: 208px">
Expand Down Expand Up @@ -142,6 +147,7 @@

<modals-podcast-episode-feed v-model="showPodcastEpisodeFeed" :library-item="libraryItem" :episodes="podcastFeedEpisodes" />
<modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :library-item-id="libraryItemId" hide-create @select="selectBookmark" />
<modals-item-field-visibility-modal v-model="showFieldVisibilityModal" />
</div>
</template>

Expand Down Expand Up @@ -180,6 +186,7 @@ export default {
episodesDownloading: [],
episodeDownloadsQueued: [],
showBookmarksModal: false,
showFieldVisibilityModal: false,
isDescriptionClamped: false,
showFullDescription: false
}
Expand Down Expand Up @@ -429,6 +436,12 @@ export default {
})
}
return items
},
globalItemSettingsContextMenuItems() {
const items = []
items.push({ text: this.$strings.LabelFieldVisibility, action: 'fieldVisibility' })
return items
}
},
Expand Down Expand Up @@ -759,6 +772,11 @@ export default {
this.$store.commit('setSelectedLibraryItem', this.libraryItem)
this.$store.commit('globals/setShareModal', this.mediaItemShare)
}
},
globalItemSettingsContextMenuAction({ action, data }) {
if (action === 'fieldVisibility') {
this.showFieldVisibilityModal = true
}
}
},
mounted() {
Expand Down
13 changes: 12 additions & 1 deletion client/store/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,18 @@ export const state = () => ({
authorSortBy: 'name',
authorSortDesc: false,
jumpForwardAmount: 10,
jumpBackwardAmount: 10
jumpBackwardAmount: 10,
fieldVisibility: {
narrators: true,
publishYear: true,
publisher: true,
genres: true,
tags: true,
language: true,
duration: true,
releaseDate: true,
size: true
}
}
})

Expand Down
3 changes: 2 additions & 1 deletion client/strings/en-us.json
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@
"HeaderEpisodes": "Episodes",
"HeaderEreaderDevices": "Ereader Devices",
"HeaderEreaderSettings": "Ereader Settings",
"HeaderFields": "Fields",
"HeaderFiles": "Files",
"HeaderFindChapters": "Find Chapters",
"HeaderIgnoredFiles": "Ignored Files",
Expand Down Expand Up @@ -318,6 +319,7 @@
"LabelExportOPML": "Export OPML",
"LabelFeedURL": "Feed URL",
"LabelFetchingMetadata": "Fetching Metadata",
"LabelFieldVisibility": "Field Visibility",
"LabelFile": "File",
"LabelFileBirthtime": "File Birthtime",
"LabelFileBornDate": "Born {0}",
Expand Down Expand Up @@ -407,7 +409,6 @@
"LabelMore": "More",
"LabelMoreInfo": "More Info",
"LabelName": "Name",
"LabelNarrator": "Narrator",
"LabelNarrators": "Narrators",
"LabelNew": "New",
"LabelNewPassword": "New Password",
Expand Down

0 comments on commit 1ebcbe8

Please sign in to comment.