Cleanup ItemSearchCard remove unused match properties, add LabelByAuthor string

components/cards/ItemSearchCard.vue

@@ -1,16 +1,10 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    <div class="flex-grow px-2 audiobookSearchCardContent">
-      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
-      <p v-else class="truncate text-sm" v-html="matchHtml" />
-
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-fg-muted">{{ matchHtml }}</p>
-
-      <p v-if="matchKey !== 'authors'" class="text-xs text-fg truncate">by {{ authorName }}</p>
-      <p v-else class="truncate text-xs text-fg" 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 class="grow px-2 audiobookSearchCardContent">
+      <p class="truncate text-sm">{{ title }}</p>
+      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
     </div>
   </div>
 </template>
@@ -22,9 +16,7 @@ export default {
       type: Object,
       default: () => {}
     },
-    search: String,
-    matchKey: String,
-    matchText: String
+    search: String
   },
   data() {
     return {}
@@ -58,35 +50,6 @@ export default {
     authorName() {
       if (this.isPodcast) return this.mediaMetadata.author
       return this.mediaMetadata.authorName
-    },
-    matchHtml() {
-      if (!this.matchText || !this.search) return ''
-      if (this.matchKey === 'subtitle') return ''
-      var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
-      if (matchSplit.length < 2) return ''
-
-      var html = ''
-      var totalLenSoFar = 0
-      for (let i = 0; i < matchSplit.length - 1; i++) {
-        var indexOf = matchSplit[i].length
-        var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
-        var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
-        totalLenSoFar += indexOf + this.search.length
-
-        html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
-      }
-      var lastPart = this.matchText.substr(totalLenSoFar)
-      html += lastPart
-
-      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 === 'subtitle') return `<p class="truncate">${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 === 'narrators') return `<p class="truncate">Narrator: ${html}</p>`
-      return `${html}`
     }
   },
   methods: {},
@@ -101,4 +64,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
+</style>

pages/search.vue

@@ -14,7 +14,7 @@
       <template v-for="item in bookResults">
         <div :key="item.libraryItem.id" class="w-full h-16 py-1">
           <nuxt-link :to="`/item/${item.libraryItem.id}`">
-            <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+            <cards-item-search-card :library-item="item.libraryItem" :search="lastSearch" />
           </nuxt-link>
         </div>
       </template>
@@ -23,7 +23,7 @@
       <template v-for="item in podcastResults">
         <div :key="item.libraryItem.id" class="text-fg select-none relative py-1">
           <nuxt-link :to="`/item/${item.libraryItem.id}`">
-            <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+            <cards-item-search-card :library-item="item.libraryItem" :search="lastSearch" />
           </nuxt-link>
         </div>
       </template>
@@ -160,4 +160,4 @@ export default {
   height: calc(100% - 108px);
   max-height: calc(100% - 108px);
 }
-</style>
+</style>

strings/en-us.json

@@ -113,6 +113,7 @@
   "LabelAutoSleepTimerAutoRewindHelp": "When the auto sleep timer finishes, playing the item again will automatically rewind your position.",
   "LabelAutoSleepTimerHelp": "When playing media between the specified start and end times a sleep timer will automatically start.",
   "LabelBooks": "Books",
+  "LabelByAuthor": "by {0}",
   "LabelChapterTrack": "Chapter Track",
   "LabelChapters": "Chapters",
   "LabelClosePlayer": "Close player",