Add:Search for narrators #1495

client/components/cards/ItemSearchCard.vue

@@ -10,7 +10,7 @@
       <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
       <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
 
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
   </div>
 </template>
@@ -67,12 +67,13 @@ export default {
       //        but with removing commas periods etc this is no longer plausible
       const html = this.matchText
 
-      if (this.matchKey === 'episode') return `<p class="truncate">Episode: ${html}</p>`
-      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'episode') return `<p class="truncate">${this.$strings.LabelEpisode}: ${html}</p>`
+      if (this.matchKey === 'tags') return `<p class="truncate">${this.$strings.LabelTags}: ${html}</p>`
       if (this.matchKey === 'authors') return `by ${html}`
       if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
       if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
-      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
+      if (this.matchKey === 'series') return `<p class="truncate">${this.$strings.LabelSeries}: ${html}</p>`
+      if (this.matchKey === 'narrators') return `<p class="truncate">${this.$strings.LabelNarrator}: ${html}</p>`
       return `${html}`
     }
   },

client/components/cards/NarratorCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
+    <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-20">
+        <span class="material-icons-outlined text-8xl">record_voice_over</span>
+      </div>
+
+      <!-- Narrator name & num books overlay -->
+      <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+        <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+        <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script>
+export default {
+  props: {
+    narrator: {
+      type: Object,
+      default: () => {}
+    },
+    width: Number,
+    height: Number,
+    sizeMultiplier: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    name() {
+      return this.narrator?.name || ''
+    },
+    numBooks() {
+      return this.narrator?.books?.length || 0
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {}
+}
+</script>

client/components/cards/NarratorSearchCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-icons text-2xl text-gray-200">record_voice_over</span>
+    </div>
+    <div class="flex-grow px-2 narratorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ narrator }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    narrator: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.narratorSearchCardContent {
+  width: calc(100% - 40px);
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>