Add user controls for title field visibility

client/components/content/LibraryItemDetails.vue

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -160,6 +160,9 @@ export default {
     },
     podcastType() {
       return this.mediaMetadata.type
+    },
+    fieldVisibility() {
+      return this.$store.getters['user/getUserSetting']('fieldVisibility')
     }
   },
   methods: {},

client/components/modals/ItemFieldVisibilityModal.vue

@@ -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>

client/pages/item/_id/index.vue

@@ -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">
@@ -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>
 
@@ -180,6 +186,7 @@ export default {
       episodesDownloading: [],
       episodeDownloadsQueued: [],
       showBookmarksModal: false,
+      showFieldVisibilityModal: false,
       isDescriptionClamped: false,
       showFullDescription: false
     }
@@ -429,6 +436,12 @@ export default {
         })
       }
 
+      return items
+    },
+    globalItemSettingsContextMenuItems() {
+      const items = []
+      items.push({ text: this.$strings.LabelFieldVisibility, action: 'fieldVisibility' })
+
       return items
     }
   },
@@ -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() {

client/store/user.js

@@ -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
+    }
   }
 })
 

client/strings/en-us.json

@@ -136,6 +136,7 @@
   "HeaderEpisodes": "Episodes",
   "HeaderEreaderDevices": "Ereader Devices",
   "HeaderEreaderSettings": "Ereader Settings",
+  "HeaderFields": "Fields",
   "HeaderFiles": "Files",
   "HeaderFindChapters": "Find Chapters",
   "HeaderIgnoredFiles": "Ignored Files",
@@ -318,6 +319,7 @@
   "LabelExportOPML": "Export OPML",
   "LabelFeedURL": "Feed URL",
   "LabelFetchingMetadata": "Fetching Metadata",
+  "LabelFieldVisibility": "Field Visibility",
   "LabelFile": "File",
   "LabelFileBirthtime": "File Birthtime",
   "LabelFileBornDate": "Born {0}",
@@ -407,7 +409,6 @@
   "LabelMore": "More",
   "LabelMoreInfo": "More Info",
   "LabelName": "Name",
-  "LabelNarrator": "Narrator",
   "LabelNarrators": "Narrators",
   "LabelNew": "New",
   "LabelNewPassword": "New Password",